/* ========================= */
/*   Info dla przeglądarki   */
/* ========================= */
:root {
  color-scheme: light dark;
}

/* ========================= */
/*        Anty-FOT           */
/* ========================= */


html.preload * {
  transition: none !important;
}

/* ========================= */
/*       Fallback tła        */
/* ========================= */
/* Kolor zanim załaduje się obraz */
body.app-body {
  background-color: #e0e3e8;
  /* light fallback */
}

body.app-body.dark {
  background-color: #0f1115;
  /* dark fallback */
}

/* ========================= */
/*   Zmienne bazowe (root)   */
/* ========================= */
:root {
  --bg: #e0e3e8;
  --card: #ffffff;
  --text: #333333;
  --accent: #00bfa5;
  --accent-hover: #008c7e;
  --glass: rgba(0, 0, 0, 0.04);
  --glass-border: rgba(0, 0, 0, 0.05);
  --table-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  --font-sans: Arial, Helvetica, sans-serif;
}

/* ========================= */
/*    Light Theme Variables  */
/* ========================= */
body.app-body:not(.dark) {
  --bg: #e0e3e8;
  --card: #ffffff;
  --text: #333333;
  --glass: rgba(0, 0, 0, 0.04);
  --glass-border: rgba(0, 0, 0, 0.05);
  --table-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* ========================= */
/*    Dark Theme Variables   */
/* ========================= */
body.app-body.dark {
  --bg: #1c1c1c;
  --card: #2a2a2a;
  --text: #e2e2e2;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.10);
  --table-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ========================= */
/*   Layout & Typography     */
/* ========================= */
body.app-body {
  color: var(--text);
  font-family: var(--font-sans);
  background-color: var(--bg);
  min-height: 100vh;
  margin: 0;
  transition: background 0.3s ease, color 0.3s ease;
}

/* ========================= */
/*       Tła motywów         */
/* ========================= */
body.app-body {
  background: url('/static/bg_light.jpg') no-repeat center center fixed;
  background-size: cover;
}

body.app-body.dark {
  background: url('/static/bg_dark.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* ========================= */
/*  Universal App Container  */
/* ========================= */
.app-wrapper {
  background: var(--card);
  color: var(--text);
  border-radius: 0.8rem;
  box-shadow: var(--table-shadow);
  border: 1px solid var(--glass-border);
  padding: 1rem;
  backdrop-filter: blur(6px);
}

/* ========================= */
/*    Ikony – Sidebar Chev   */
/* ========================= */
#toggle-sidebar .chev {
  color: var(--text);
}