/* ============================================================
   GeoSync — wspólny wygląd VKART (Etap 2, wariant ciemny)
   Ładowany PO wbudowanych <style> w index.php, browse.php, raporty.php,
   więc nadpisuje ich kolory bez zmian w logice stron.
   Tokeny: https://vkart.pl/ui/v1/vkart-ui.css (--vk-dark-*)
   ============================================================ */

/* ---- browse.php / raporty.php: zmienne strony → tokeny VKART ---- */
:root {
  --bg:      var(--vk-dark-bg, #081A2C);
  --bg2:     var(--vk-dark-surface, #0E2A47);
  --bg3:     var(--vk-dark-bg, #081A2C);
  --card:    var(--vk-dark-surface, #0E2A47);
  --card2:   var(--vk-dark-bg, #081A2C);
  --border:  var(--vk-dark-line, #1F4166);
  --border2: var(--vk-dark-line2, #2B5480);
  --text:    var(--vk-dark-text, #EAF1F8);
  --text2:   var(--vk-dark-text2, #9FB6CE);
  --text3:   var(--vk-dark-text3, #6F87A0);
  --blue:      var(--vk-blue-bright, #3D8BD4);
  --blue-dark: var(--vk-blue, #2E75B6);
  --blue-bg:   var(--vk-dark-surface2, #12355A);
  --input-bg:     var(--vk-dark-bg, #081A2C);
  --input-border: var(--vk-dark-line2, #2B5480);
}

body { font-family: var(--vk-font, 'Libre Franklin', system-ui, sans-serif); }
code, pre, .mono, td.mono { font-family: var(--vk-font-mono, 'JetBrains Mono', ui-monospace, monospace); }

/* ---- Logo w nagłówkach ---- */
.vk-sync-logo { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; }
.vk-sync-logo img { height: 24px; width: auto; display: block; }
.top { background: var(--vk-dark-surface, #0E2A47); }
.top h1 { display: flex; align-items: center; gap: 9px; }
.top h1 img { height: 24px; width: auto; display: block; }

/* ---- index.php: kolory wpisane na sztywno ---- */
body:has(.main-layout) { height: 100vh; background: var(--vk-dark-bg, #081A2C); }
.main-layout { height: auto; flex: 1; min-height: 0; }

.topbar { background: var(--vk-dark-surface, #0E2A47); border-bottom-color: var(--vk-dark-line, #1F4166); }
.topbar-user { color: var(--vk-dark-text2, #9FB6CE); }
.btn-logout { color: #CFE0F1; border-color: var(--vk-dark-line2, #2B5480); }
.btn-logout:hover { color: #fff; border-color: var(--vk-blue-bright, #3D8BD4); }

.sidebar { background: var(--vk-dark-surface, #0E2A47); border-right-color: var(--vk-dark-line, #1F4166); }
.sidebar-section { color: var(--vk-dark-text3, #6F87A0); }
.panel-btn { color: var(--vk-dark-text2, #9FB6CE); }
.panel-btn:hover { background: var(--vk-dark-surface2, #12355A); color: #fff; }

.cal-title { color: var(--vk-dark-text, #EAF1F8); }
.cal-nav a { color: #CFE0F1; border-color: var(--vk-dark-line2, #2B5480); }
.cal-nav a:hover { background: var(--vk-dark-surface2, #12355A); }
.cal-nav .today-btn { background: var(--vk-blue, #2E75B6); border-color: var(--vk-blue, #2E75B6); color: #fff; }
.cal-dow { color: var(--vk-dark-text3, #6F87A0); }
.cal-cell { background: var(--vk-dark-surface, #0E2A47); border-color: var(--vk-dark-line, #1F4166); }
.cal-cell:hover { border-color: var(--vk-dark-line2, #2B5480); }
.cal-cell.today { border-color: var(--vk-blue-bright, #3D8BD4); background: var(--vk-dark-surface2, #12355A); }
.cal-day-num { color: var(--vk-dark-text2, #9FB6CE); }
.cal-cell.today .cal-day-num { color: #fff; }
.cal-session.teren { background: #163E6B; color: #CFE3F7; border-left-color: var(--vk-blue-bright, #3D8BD4); }

.office-form, .login-box, .modal { background: var(--vk-dark-surface, #0E2A47); border-color: var(--vk-dark-line2, #2B5480); }
.form-row input, .form-row textarea, .form-row select,
.form-field input { background: var(--vk-dark-bg, #081A2C); border-color: var(--vk-dark-line2, #2B5480); }
.form-field input:focus, .form-row input:focus, .form-row textarea:focus { border-color: var(--vk-blue-bright, #3D8BD4); }
.btn-login { background: var(--vk-blue, #2E75B6); }
.btn-login:hover { background: var(--vk-navy, #1F4E79); }
.btn-close-modal { background: var(--vk-dark-line2, #2B5480); }
.sess-tooltip { background: var(--vk-dark-bg, #081A2C); border-color: var(--vk-dark-line2, #2B5480); }
.login-box .vk-sync-mark { display: block; height: 44px; width: auto; margin: 0 auto 14px; }

/* ---- Fokus z klawiatury ---- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--vk-blue-bright, #3D8BD4);
  outline-offset: 2px;
}