/*
 * Phase 1.2 — v1 Gentelella design tokens + minor overrides.
 *
 * Replikuje barevný systém původního matriky.online v1 (PHP):
 *   - sidebar #2A3F54 (Gentelella dark navy)
 *   - obsah #F7F7F7
 *   - značka #8a3033 (matriky-red)
 *   - per-archive akcenty (Brno fialová, Zámrsk zelená)
 *
 * `.to_do` styl pro home page seznam matrik + seznam úkolů (z prehled.php).
 */

:root {
  --v1-sidebar: #2A3F54;
  --v1-content: #F7F7F7;
  --v1-primary: #1ABB9C;
  --v1-brand: #8a3033;
  --v1-brno: #9b59b6;
  --v1-zamrsk: #16a085;
}

/* v1-specific Gentelella tweaks — match matriky.online PHP CSS */
.openseadragon1 {
  min-height: 480px;
  height: 800px;
}

/* Per-archive accents na panel ikonách (přidávané přes <body data-archive="brno"|"zamrsk">) */
body[data-archive="brno"] .x_title h2 i.fa-book,
body[data-archive="brno"] .x_title h2 i.fa-table { color: var(--v1-brno); }
body[data-archive="zamrsk"] .x_title h2 i.fa-book,
body[data-archive="zamrsk"] .x_title h2 i.fa-table { color: var(--v1-zamrsk); }

/* DataTables ergonomie (převzato z menu.php inline <style>) */
td { white-space: nowrap; }
td.wrapok { white-space: normal; }

/* Site title — Gentelella default light gray (#ECF0F1).
 * Per v1 CSS `custom.min.css`: .site_title { color:#ECF0F1 !important; }
 * Brand red (#8a3033) bylo zaměnitelně použité dříve — odstraněno per Petr feedback.
 */
.site_title { color: #ECF0F1 !important; }
.site_title:hover,
.site_title:focus { color: #ECF0F1 !important; text-decoration: none; }

/* Sidebar disabled link (anon Deník + Chat) — gray + lock icon */
.nav.side-menu > li.disabled-link > a {
  opacity: 0.5;
  cursor: not-allowed;
}
.nav.side-menu > li.disabled-link > a:hover {
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
}
.lock-icon {
  margin-left: 6px;
  font-size: 0.9em;
  opacity: 0.7;
}

/* `.to_do` list pro home page panely "Seznam matrik" + "Seznam úkolů" */
.to_do {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.to_do li {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
}
.to_do li:last-child {
  border-bottom: 0;
}
.to_do li input[type="checkbox"] {
  margin-right: 6px;
}
.to_do li p {
  margin-bottom: 0;
  display: inline;
}

/* ============================================================
 * MOBILE / TABLET — v1 šablony pro mobily a tablety.
 * Cíl: sidebar jako slide-in drawer + DataTables kompaktní zobrazení
 * + OSD viewer touch targets.
 * ============================================================ */

/* DataTables sloupce — třídy přidávané přes columnDefs v každém v1 template.
 * Per-archive layout sám rozhoduje co schovat (Brno vs Zámrsk vs sčítání).
 */

/* Mobil <= 768 px — sidebar je slide-in drawer */
@media (max-width: 768px) {
  /* Hamburger zobrazený jen na mobilu, jinak skryt */
  .nav.toggle { display: block !important; }
  .nav.toggle a {
    padding: 14px 16px;
    font-size: 22px;
    color: #fff;
    display: inline-block;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
  }

  /* Sidebar: implicitně off-canvas (left: -260px), na .nav-open slide-in. */
  body .left_col {
    position: fixed;
    top: 0;
    left: -260px;
    width: 260px;
    height: 100vh;
    overflow-y: auto;
    z-index: 1050;
    transition: left 0.25s ease-in-out;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .left_col {
    left: 0;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.35);
  }

  /* Overlay pod drawer pro tap-to-close */
  body.nav-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 260px;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1040;
  }

  /* Content fullwidth, žádný margin-left */
  body .right_col,
  body .top_nav,
  body .container.body .main_container > div.col-md-3 ~ * {
    margin-left: 0 !important;
  }
  body .container.body { width: 100%; padding: 0; }
  body .right_col { padding: 10px; }

  /* Top nav — kompaktnější */
  .top_nav .nav_menu { min-height: 50px; padding: 0; }
  .top_nav .navbar-right { float: right; padding-right: 10px; }
  .top_nav .navbar-right li { padding: 4px 6px !important; }

  /* DataTables touch targets + per-archive column hiding viz dedicated breakpoints
   * blow (mobile-hide-sm @ <=991, mobile-hide-xs @ <=480). */
  #table_matriky td,
  #table_matriky th {
    padding: 8px 6px;
    font-size: 13px;
  }
  #table_matriky a {
    min-height: 32px;
    display: inline-block;
  }

  /* DataTables search input + length select — 44px touch */
  .dataTables_filter input,
  .dataTables_length select {
    min-height: 40px;
    font-size: 16px; /* iOS: 16px prevents zoom on focus */
    padding: 6px 10px;
  }

  /* Form inputs globálně 16px proti iOS zoom-on-focus */
  input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input[type="number"], textarea, select {
    font-size: 16px;
  }

  /* OSD toolbar — wrap na víc řádků + větší touch targets */
  .toolbar { padding: 6px 4px; }
  .toolbar a {
    padding: 10px 12px !important;
    margin: 3px !important;
    min-width: 44px;
    min-height: 44px;
    line-height: 1;
    text-align: center;
  }
  .toolbar i { font-size: 18px; }
  .toolbar input#viewer-page {
    width: 60px !important;
    min-height: 36px;
    font-size: 16px;
  }
  .toolbar span { float: none !important; margin: 0 !important; display: block; }

  /* OSD canvas — využít celou výšku viewportu mínus topnav + toolbar */
  .openseadragon1 {
    min-height: calc(100vh - 200px) !important;
    height: calc(100vh - 200px) !important;
  }

  /* Site title — větší pro tap */
  .site_title { font-size: 18px; padding: 12px; }

  /* Footer kompaktní */
  footer { padding: 10px; text-align: center; font-size: 12px; }
}

/* Malý mobil <= 480 px — DataTables ultra-compact (`.mobile-hide-xs` priority) */
@media (max-width: 480px) {
  /* Obce: zmenšit text wrap */
  #table_matriky td .text-wrap { max-width: 150px !important; font-size: 12px; }

  /* OSD toolbar — wrap chiclets do gridu 4x2 */
  .toolbar a {
    padding: 8px 10px !important;
    margin: 2px !important;
  }
}

/* Tablet + mobile — `.mobile-hide-sm` columns skryté pod 991 px */
@media (max-width: 991px) {
  #table_matriky .mobile-hide-sm { display: none; }
}

/* Malý mobil — `.mobile-hide-xs` columns skryté pod 481 px */
@media (max-width: 480px) {
  #table_matriky .mobile-hide-xs { display: none; }
}

/* --- Sidebar footer (audit 2026-05-29 Petr) --------------------------------
 * Gentelella default `.sidebar-footer a { width: 25%; float: left }` rozbije
 * layout pokud máme jen 1-3 chiclety. Override flex pro rovnoměrnou
 * distribuci items na šířku panelu (230px) bez ohledu na počet.
 */
.sidebar-footer {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0;
  min-height: 34px;
  /* Nad cookie banner (z-index 99998 v badatelna.css) — jinak ho cookie
     banner překryje na bottom viewport edge. */
  z-index: 99999;
}
.sidebar-footer > a,
.sidebar-footer > form > button,
.sidebar-footer > form {
  flex: 1 1 0;
  width: auto !important;   /* override Gentelella 25% */
  float: none !important;   /* override Gentelella float:left */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 4px !important;
  margin: 0;
  text-align: center;
  background: #172D44;
  color: #fff !important;
  font-size: 13px;
  text-decoration: none !important;
  border: 0;
}
.sidebar-footer > a:hover,
.sidebar-footer > form > button:hover {
  background: #425567;
}
.sidebar-footer > a .fa,
.sidebar-footer > form .fa {
  font-size: 16px;
}

/* nav-sm (collapsed sidebar 70px): sidebar-footer kopíruje width + skry text labely. */
.nav-sm .sidebar-footer {
  width: 70px;
}
.nav-sm .sidebar-footer .sf-label {
  display: none;
}
/* Gentelella `.nav-sm span.fa { display:none }` skryje icony VŠUDE v nav-sm
   — override pro náš sidebar-footer (login/profile/logout). */
.nav-sm .sidebar-footer span.fa {
  display: inline-block !important;
}
.nav-sm .sidebar-footer > a,
.nav-sm .sidebar-footer > form > button {
  gap: 0;
  padding: 9px 0 !important;
}

/* Mobile (≤768px): sidebar je off-canvas drawer; sidebar-footer drží 100% drawer width
   pokud drawer open (.nav-open na body), jinak hidden mimo viewport. */
@media (max-width: 768px) {
  .sidebar-footer {
    width: 230px;  /* match Gentelella drawer width */
  }
  /* Když je drawer zavřený (no .nav-open), schovej sidebar-footer mimo viewport. */
  body:not(.nav-open) .sidebar-footer {
    left: -230px;
    transition: left 0.25s ease;
  }
  body.nav-open .sidebar-footer {
    left: 0;
    transition: left 0.25s ease;
  }
}
.sidebar-footer > a:hover,
.sidebar-footer > form:hover {
  background: #425567;
}
.sidebar-footer > form button {
  width: 100% !important;
  padding: 0 !important;
}
