:root, [data-theme="dark"] {
      --bg: #121212;
      --surface: #1a1a1a;
      --surface-2: #222222;
      --text: #FFFFFF;
      --accent: #61B3C4;
      --accent-hover: #4a9aab;
      --btn-primary-text: #0a0a0a;
      --muted: #979797;
      --dark-blue: #1C4361;
      --light-blue: #A5D6F1;
      --border: #2a2a2a;
      --danger: #e74c3c;
      --success: #2ecc71;
      --warning: #f39c12;
    }
    [data-theme="light"] {
      --bg: #f4f6f8;
      --surface: #ffffff;
      --surface-2: #eef1f4;
      --text: #1a1a1a;
      --accent: #1C4361;
      --accent-hover: #16364f;
      --btn-primary-text: #ffffff;
      --muted: #6b7280;
      --dark-blue: #1C4361;
      --light-blue: #A5D6F1;
      --border: #dce1e6;
      --danger: #c0392b;
      --success: #1e8449;
      --warning: #b9770e;
    }


    html { color-scheme: dark light; }
    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
    }
    body {
      font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      display: block; /* React: sidebar+main su u #root, ne direktno u body */
      overflow-x: hidden;
    }
    /* React shell: #root mora da zauzme celu širinu (inače layout izgleda "mobilno") */
    #root {
      display: block;
      width: 100%;
      min-height: 100vh;
      max-width: 100%;
    }
    #root > .sidebar { /* fixed already */ }
    #root > .main {
      width: auto;
      max-width: 100%;
      box-sizing: border-box;
    }

    .sidebar {
      width: 200px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      z-index: 100;
    }

    .sidebar-header {
      padding: 1.1rem 0.85rem;
      border-bottom: 1px solid var(--border);
    }

    .logo {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: -0.5px;
    }

    .logo span {
      color: var(--text);
      font-weight: 400;
    }

    .nav {
      flex: 1;
      padding: 1rem 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
    }

    .nav-bottom {
      margin-top: auto;
      padding-top: 0.5rem;
      border-top: 1px solid var(--border);
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.65rem 0.85rem;
      color: var(--muted);
      text-decoration: none;
      font-size: 0.88rem;
      transition: all 0.15s;
      border-left: 3px solid transparent;
    }

    .nav-item:hover {
      background: var(--surface-2);
      color: var(--text);
    }

    .nav-item.active {
      background: rgba(97, 179, 196, 0.1);
      color: var(--accent);
      border-left-color: var(--accent);
    }

    .nav-item svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    .sidebar-footer {
      padding: 1rem 1.25rem;
      border-top: 1px solid var(--border);
      font-size: 0.85rem;
      color: var(--muted);
    }

    .user-info {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--dark-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      color: var(--light-blue);
      font-size: 0.9rem;
    }

    .main {
      margin-left: 200px;
      flex: 1;
      min-height: 100vh;
      width: calc(100% - 200px);
      max-width: calc(100% - 200px);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }

    .topbar {
      height: 64px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 2rem;
      background: var(--surface);
      position: sticky;
      top: 0;
      z-index: 50;
    }

    .page-title {
      font-size: 1.25rem;
      font-weight: 600;
    }

    .topbar-actions {
      display: flex;
      gap: 0.75rem;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-size: 0.9rem;
      font-weight: 500;
      border: none;
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-primary {
      background: var(--accent);
      color: var(--btn-primary-text, #0a0a0a);
    }

    .btn-primary:hover {
      background: var(--accent-hover);
    }

    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }

    .btn-ghost:hover {
      background: var(--surface-2);
      color: var(--text);
    }

    .content {
      padding: 2rem;
      flex: 1;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 1rem;
      margin-bottom: 1.25rem;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 1.1rem 1.2rem;
      transition: border-color 0.15s, transform 0.12s, box-shadow 0.12s;
      position: relative;
      overflow: hidden;
    }
    .stat-card::before {
      content: "";
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: 3px;
      background: var(--accent);
      opacity: 0.85;
    }
    .stat-card.sc-warn::before { background: var(--warning); }
    .stat-card.sc-danger::before { background: var(--danger); }
    .stat-card.sc-ok::before { background: var(--success, #2ecc71); }
    .stat-card.sc-mute::before { background: var(--muted); }

    .stat-card:hover {
      border-color: var(--accent);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    }

    .stat-label {
      font-size: 0.72rem;
      color: var(--muted);
      margin-bottom: 0.4rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-weight: 600;
    }

    .stat-value {
      font-size: 1.65rem;
      font-weight: 700;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      line-height: 1.15;
    }

    .stat-value.accent { color: var(--accent); }
    .stat-value.warning { color: var(--warning); }
    .stat-value.danger { color: var(--danger); }
    .stat-sub {
      margin-top: 0.35rem;
      font-size: 0.72rem;
      color: var(--muted);
    }

    .dash-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.65rem 1rem;
      margin-bottom: 1.15rem;
      padding: 0.85rem 1rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
    }
    .dash-toolbar .tv-field { gap: 0.2rem; }
    .dash-toolbar label {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      font-weight: 600;
    }
    .dash-hint {
      font-size: 0.78rem;
      color: var(--muted);
      margin-left: auto;
      max-width: 280px;
      line-height: 1.35;
    }
    .dash-grid-2 {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 1.15rem;
      margin-bottom: 1.25rem;
    }
    @media (max-width: 960px) {
      .dash-grid-2 { grid-template-columns: 1fr; }
    }
    .dash-pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
      margin-top: 0.75rem;
    }
    .dash-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.65rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
    }
    .dash-pill b { font-variant-numeric: tabular-nums; }
    .quick-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
    }

    .section {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 1.5rem;
    }

    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.5rem;
      border-bottom: 1px solid var(--border);
    }

    .section-title {
      font-size: 1rem;
      font-weight: 600;
    }

    table {
      width: 100%;
      border-collapse: collapse;
    }

    th {
      text-align: left;
      padding: 0.75rem 1.5rem;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      background: var(--surface-2);
    }

    td {
      padding: 0.9rem 1.5rem;
      border-top: 1px solid var(--border);
      font-size: 0.9rem;
    }

    tr:hover td {
      background: rgba(97, 179, 196, 0.04);
    }

    .badge {
      display: inline-block;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .badge-new { background: rgba(243, 156, 18, 0.15); color: var(--warning); }
    .badge-reviewed { background: rgba(46, 204, 113, 0.15); color: var(--success); }
    /* Ozbiljnost prekršaja – boje kao na dashboard legendi */
    .badge-minor {
      background: rgba(251, 191, 36, 0.18);
      color: #fbbf24;
      border: 1px solid rgba(251, 191, 36, 0.35);
    }
    .badge-serious {
      background: rgba(249, 115, 22, 0.18);
      color: #f97316;
      border: 1px solid rgba(249, 115, 22, 0.35);
    }
    .badge-very {
      background: rgba(239, 68, 68, 0.18);
      color: #ef4444;
      border: 1px solid rgba(239, 68, 68, 0.4);
    }
    .empty-state { padding: 2.5rem 1.5rem; text-align: center; color: var(--muted); }
    .loading-state { padding: 2rem; text-align: center; color: var(--muted); }
    .table-wrap { overflow-x: auto; }
    td.penalty-cell { font-size: 0.8rem; color: var(--muted); max-width: 220px; }


    .quick-actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 2rem;
    }

    @media (max-width: 720px) {
      .sidebar { width: 72px; }
      .sidebar-header { padding: 0.65rem 0.3rem; }
      .sidebar-header .logo { width: 100%; overflow: hidden; }
      .sidebar-header .logo-img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 38px;
        margin: 0 auto;
      }
      .sidebar-header .logo-sub { display: none; }
      .sidebar .logo span,
      .sidebar .nav-item span,
      .sidebar-footer .user-details { display: none; }
      .main { margin-left: 72px; width: calc(100% - 72px); max-width: calc(100% - 72px); }
      .nav-item { justify-content: center; padding: 0.9rem; }
    }

    /* Filter bar (Prekršaji) */
    .filter-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      padding: 1.25rem 1.5rem;
      align-items: flex-end;
    }
    .filter-bar .form-group {
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      min-width: 115px;
    }
    .filter-bar .form-group label {
      font-size: 0.8rem;
      color: var(--muted);
      font-weight: 600;
    }
    .filter-bar select,
    .filter-bar input[type="date"] {
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 8px;
      padding: 0.55rem 0.75rem;
      font-size: 0.9rem;
      min-width: 110px;
    }
    .filter-bar select { min-width: 280px; max-width: 360px; }
    .filter-bar select:focus,
    .filter-bar input:focus {
      outline: none;
      border-color: var(--accent);
    }
    .btn {
      border: none;
      border-radius: 8px;
      padding: 0.55rem 1.1rem;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s;
    }
    .btn-primary {
      background: var(--accent);
      color: var(--btn-primary-text, #0a0a0a);
    }
    .btn-primary:hover { background: var(--accent-hover); }
    .btn-primary:disabled { opacity: 0.6; cursor: wait; }
    [data-theme="light"] .btn-primary {
      color: #ffffff;
    }
    [data-theme="dark"] .btn-primary {
      color: #0a0a0a;
    }
    .btn-ghost {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }
    .btn-ghost:hover { color: var(--text); border-color: var(--accent); }

    /* Kazne admin – isti stil */
    .rule-card { border-bottom: 1px solid var(--border); }
    .rule-card:last-child { border-bottom: none; }
    .rule-card-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1rem 1.5rem; cursor: pointer; gap: 1rem;
    }
    .rule-card-header:hover { background: rgba(97, 179, 196, 0.04); }
    .rule-card-body { display: none; padding: 0 1.5rem 1.25rem; border-top: 1px solid var(--border); }
    .rule-card.open .rule-card-body { display: block; }
    .rule-card.open .chevron { transform: rotate(180deg); }
    .penalty-settings .section-header { padding:0.85rem 1rem; }
    .penalty-settings-body { padding:0.85rem 1rem 1rem; }
    .penalty-category-tabs {
      display:flex; flex-wrap:wrap; gap:0.35rem; padding:0.3rem;
      margin-bottom:0.75rem; border:1px solid var(--border); border-radius:9px;
      background:var(--surface-2);
    }
    .penalty-category-tab {
      display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
      flex:1 1 140px; min-width:0; min-height:36px; padding:0.4rem 0.75rem;
      border:1px solid transparent; border-radius:7px; background:transparent;
      color:var(--muted); font:inherit; font-size:0.84rem; font-weight:600; cursor:pointer;
    }
    .penalty-category-tab:hover { color:var(--text); }
    .penalty-category-tab.active {
      border-color:var(--border); background:var(--surface); color:var(--text);
      box-shadow:0 1px 2px rgba(0,0,0,0.16);
    }
    .penalty-category-count {
      display:inline-flex; align-items:center; justify-content:center;
      min-width:22px; height:22px; padding:0 0.35rem; border:1px solid var(--border);
      border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:0.7rem;
    }
    .penalty-rule-grid {
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:0.6rem;
    }
    .penalty-rule-grid[hidden] { display:none !important; }
    .penalty-rule-grid .rule-card {
      min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:9px;
      background:var(--surface-2);
    }
    .penalty-rule-grid .rule-card:last-child { border-bottom:1px solid var(--border); }
    .penalty-rule-grid .rule-card-header { min-height:68px; padding:0.75rem 0.9rem; }
    .penalty-rule-grid .rule-title { font-size:0.88rem; line-height:1.35; }
    .penalty-rule-grid .rule-meta { font-size:0.74rem; line-height:1.35; }
    .penalty-rule-grid .rule-card-body { padding:0.75rem 0.9rem 0.9rem; }
    .penalty-rule-grid .amount-grid { gap:0.65rem; margin-top:0.75rem; }
    .penalty-rule-grid .amount-block { min-width:0; padding:0.75rem; }
    @media (max-width: 900px) {
      .penalty-settings-body { padding:0.75rem; }
      .penalty-rule-grid { grid-template-columns:1fr; }
    }
    .chevron { transition: transform 0.2s; color: var(--muted); font-size: 0.75rem; }
    .rule-title { font-weight: 600; font-size: 0.95rem; }
    .rule-meta { font-size: 0.8rem; color: var(--muted); margin-top: 0.2rem; }
    .amount-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem;
    }
    @media (max-width: 800px) { .amount-grid { grid-template-columns: 1fr; } }
    .amount-block {
      background: var(--bg); border: 1px solid var(--border);
      border-radius: 10px; padding: 1rem;
    }
    .amount-block h4 {
      font-size: 0.8rem; color: var(--accent); margin-bottom: 0.75rem;
      text-transform: uppercase; letter-spacing: 0.04em;
    }
    .amount-row {
      display: grid; grid-template-columns: 100px 1fr 1fr;
      gap: 0.5rem; align-items: center; margin-bottom: 0.5rem;
    }
    .amount-row label { font-size: 0.75rem; color: var(--muted); }
    .amount-row input {
      background: var(--surface-2); border: 1px solid var(--border);
      color: var(--text); padding: 0.4rem 0.5rem; border-radius: 6px;
      font-size: 0.85rem; font-family: inherit; width: 100%;
    }
    .amount-row input:focus { outline: none; border-color: var(--accent); }
    .save-bar { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }
    .toast {
      position: fixed; bottom: 1.5rem; right: 1.5rem;
      background: var(--surface-2); border: 1px solid var(--accent);
      color: var(--text); padding: 0.85rem 1.25rem; border-radius: 10px;
      z-index: 999; font-size: 0.9rem; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    }
    .alert-info {
      background: rgba(97, 179, 196, 0.12); border: 1px solid rgba(97, 179, 196, 0.3);
      color: var(--light-blue); padding: 0.85rem 1.25rem; border-radius: 8px;
      margin-bottom: 1rem; font-size: 0.9rem;
    }
    .form-group-note { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 1rem; }
    .form-group-note label { font-size: 0.75rem; color: var(--muted); }
    .form-group-note input {
      background: var(--surface-2); border: 1px solid var(--border);
      color: var(--text); padding: 0.45rem 0.65rem; border-radius: 6px;
      font-size: 0.875rem; font-family: inherit; width: 100%;
    }


    [data-theme="light"] .badge-new { background: rgba(185, 119, 14, 0.12); color: #b9770e; }
    [data-theme="light"] .badge-reviewed { background: rgba(30, 132, 73, 0.12); color: #1e8449; }
    [data-theme="light"] .badge-serious { background: rgba(192, 57, 43, 0.12); color: #c0392b; }
    [data-theme="light"] .badge-minor { background: rgba(185, 119, 14, 0.12); color: #b9770e; }
    [data-theme="light"] .badge-very { background: rgba(192, 57, 43, 0.15); color: #a93226; }
    [data-theme="light"] .nav-item.active {
      background: rgba(28, 67, 97, 0.08);
    }
    [data-theme="light"] tr:hover td {
      background: rgba(28, 67, 97, 0.04);
    }

    .logo-img {
      height: 52px;
      width: auto;
      display: block;
      margin-bottom: 6px;
      object-fit: contain;
    }
    /* podrazumevano tamna */
    .logo-light { display: none !important; }
    .logo-dark { display: block !important; }
    [data-theme="light"] .logo-dark { display: none !important; }
    [data-theme="light"] .logo-light { display: block !important; }
    [data-theme="dark"] .logo-dark { display: block !important; }
    [data-theme="dark"] .logo-light { display: none !important; }


    .amount-row-single {
      grid-template-columns: 120px 1fr !important;
    }
    .threshold-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1rem;
      margin-bottom: 1rem;
    }
    .threshold-title {
      font-size: 0.8rem;
      color: var(--accent);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.75rem;
    }
    .threshold-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.65rem;
    }

    .amount-label-block {
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      min-width: 0;
    }
    .amount-label-block label {
      margin: 0;
    }
    .amount-threshold {
      font-size: 0.72rem;
      line-height: 1.25;
      color: var(--muted);
      font-weight: 400;
    }
    .amount-row-single {
      grid-template-columns: minmax(140px, 1.2fr) 1fr !important;
      align-items: start;
    }

    .report-picker {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1rem;
    }
    .report-chip {
      padding: 0.45rem 0.9rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      font-size: 0.85rem;
    }
    .report-chip.active {
      border-color: var(--accent);
      background: rgba(97, 179, 196, 0.15);
      color: var(--accent);
    }
    [data-theme="light"] .report-chip.active {
      background: rgba(28, 67, 97, 0.08);
    }
    .activity-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: flex-end;
      margin-bottom: 1rem;
    }
    .activity-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.25rem;
      padding: 0.55rem 0.75rem;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 10px;
      margin-bottom: 0.75rem;
      font-size: 0.85rem;
    }
    .activity-summary span strong { color: var(--text); }
    .color-legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem 1.25rem;
      align-items: center;
      margin-bottom: 0.75rem;
      font-size: 0.8rem;
      color: var(--muted);
    }
    .color-legend label {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      cursor: pointer;
    }
    .color-legend input[type="color"] {
      width: 28px;
      height: 22px;
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 0;
      background: transparent;
      cursor: pointer;
    }
    .timeline-wrap {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      overflow: hidden;
      margin-bottom: 1rem;
    }
    .timeline-controls {
      display: flex;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--border);
      align-items: center;
    }
    .timeline-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      cursor: grab;
      user-select: none;
    }
    .timeline-scroll.dragging { cursor: grabbing; }
    .activity-timeline {
      position: relative;
      height: 120px;
      min-width: 100%;
    }
    .tl-day {
      position: absolute;
      top: 0;
      bottom: 24px;
      border-right: 1px solid var(--border);
    }
    .tl-stack {
      position: absolute;
      left: 10%;
      right: 10%;
      bottom: 0;
      top: 8px;
      display: flex;
      flex-direction: column-reverse;
      border-radius: 3px;
      overflow: hidden;
    }
    .tl-seg {
      width: 100%;
      min-height: 0;
    }
    .tl-label {
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 0.65rem;
      color: var(--muted);
    }
    .tl-axis {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 24px;
      border-top: 1px solid var(--border);
      background: var(--surface-2);
    }

    .gantt-wrap {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      overflow: hidden;
      margin-bottom: 1rem;
    }
    .gantt-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      align-items: center;
      padding: 0.5rem 0.75rem;
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .gantt-scroll {
      overflow-x: auto;
      overflow-y: hidden;
      cursor: grab;
      user-select: none;
      height: 172px;          /* fiksno: 4*36 + osovina ~28 */
      max-height: 172px;
      min-height: 172px;
      overscroll-behavior: contain;
      touch-action: none;
      position: relative;
    }
    .gantt-chart {
      /* širina se menja zumom; visina uvek ista */
      height: 172px;
    }
    .gantt-icons {
      position: sticky;
      left: 0;
      z-index: 2;
      background: var(--surface-2);
    }
    .gantt-scroll.dragging { cursor: grabbing; }
    .gantt-chart {
      display: grid;
      grid-template-columns: 44px 1fr;
      min-width: 100%;
    }
    .gantt-icons {
      display: flex;
      flex-direction: column;
      border-right: 1px solid var(--border);
      background: var(--surface-2);
    }
    .gantt-icon-cell {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid var(--border);
      color: var(--muted);
    }
    .gantt-icon-cell svg { width: 18px; height: 18px; }
    .gantt-lanes {
      position: relative;
    }
    .gantt-lane {
      position: relative;
      height: 36px;
      border-bottom: 1px solid var(--border);
      background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent calc(var(--day-w) - 1px),
        var(--border) calc(var(--day-w) - 1px),
        var(--border) var(--day-w)
      );
    }
    .gantt-bar {
      position: absolute;
      top: 8px;
      height: 26px;
      border-radius: 3px;
      min-width: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.65rem;
      font-weight: 600;
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-shadow: 0 1px 1px rgba(0,0,0,0.25);
      box-sizing: border-box;
    }
    .gantt-axis {
      grid-column: 2;
      height: 28px;
      position: relative;
      border-top: 1px solid var(--border);
      background: var(--surface-2);
    }
    .gantt-axis-label {
      position: absolute;
      top: 6px;
      transform: translateX(-50%);
      font-size: 0.65rem;
      color: var(--muted);
      white-space: nowrap;
    }
    .gantt-day-hit {
      position: absolute;
      top: 0;
      bottom: 0;
      cursor: pointer;
    }
    .gantt-day-hit:hover {
      background: rgba(97, 179, 196, 0.08);
    }
    .gantt-mode {
      font-size: 0.8rem;
      color: var(--muted);
      margin-left: auto;
    }

    .gantt-layout {
      display: grid;
      grid-template-columns: 1fr 220px;
      gap: 0.75rem;
      margin-bottom: 1rem;
      align-items: start;
    }
    @media (max-width: 960px) {
      .gantt-layout { grid-template-columns: 1fr; }
    }
    .mini-cal {
      border: 1px solid var(--border);
      border-radius: 10px;
      background: var(--surface);
      padding: 0.65rem 0.75rem;
      font-size: 0.8rem;
    }
    .mini-cal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.5rem;
      font-weight: 600;
    }
    .mini-cal-head button {
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text);
      border-radius: 6px;
      width: 28px;
      height: 28px;
      cursor: pointer;
    }
    .mini-cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      text-align: center;
    }
    .mini-cal-dow {
      color: var(--muted);
      font-size: 0.7rem;
      padding: 0.2rem 0;
    }
    .mini-cal-dow.sun { color: #e74c3c; }
    .mini-cal-day {
      border: none;
      background: transparent;
      color: var(--text);
      border-radius: 6px;
      padding: 0.35rem 0;
      cursor: pointer;
      font-size: 0.78rem;
    }
    .mini-cal-day:hover { background: var(--surface-2); }
    .mini-cal-day.muted { color: var(--muted); opacity: 0.45; }
    .mini-cal-day.in-range { background: rgba(97, 179, 196, 0.2); }
    .mini-cal-day.selected {
      background: var(--accent);
      color: var(--btn-primary-text, #fff);
      font-weight: 600;
    }
    .mini-cal-day.today { outline: 1px solid var(--accent); }
    .gantt-scroll {
      overscroll-behavior: contain;
      touch-action: none;
    }
    .th-icon {
      display: inline-flex;
      vertical-align: middle;
      margin-right: 0.25rem;
    }
    .th-icon svg { width: 14px; height: 14px; }

    .gantt-inf {
      position: absolute;
      top: 8px;
      height: 26px;
      min-width: 6px;
      border-radius: 3px;
      background: repeating-linear-gradient(
        -45deg,
        rgba(192, 57, 43, 0.55),
        rgba(192, 57, 43, 0.55) 3px,
        rgba(255, 255, 255, 0.35) 3px,
        rgba(255, 255, 255, 0.35) 6px
      );
      border: none;
      box-sizing: border-box;
      z-index: 5;
      cursor: pointer;
      pointer-events: auto;
    }
    .gantt-inf-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 13px;
      height: 13px;
      background: #c0392b;
      color: #fff;
      border-radius: 50%;
      font-size: 8px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 13px;
      z-index: 6;
      pointer-events: none;
    }
    .gantt-tooltip {
      position: fixed;
      z-index: 9999;
      max-width: 320px;
      padding: 0.65rem 0.8rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      font-size: 0.8rem;
      line-height: 1.4;
      pointer-events: none;
      color: var(--text);
    }
    .gantt-tooltip strong { display: block; margin-bottom: 0.25rem; }
    .gantt-tooltip .tt-warn { color: #e74c3c; margin-top: 0.35rem; }
    .mini-cal-day.has-inf {
      position: relative;
    }
    .mini-cal-day.has-inf::after {
      content: "";
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #e74c3c;
    }
    .gantt-axis-label {
      overflow: hidden;
      max-width: 48px;
      text-overflow: clip;
    }

    .rep-toolbar-compact {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.75rem;
      align-items: flex-end;
      padding: 0.65rem 1rem;
      border-bottom: 1px solid var(--border);
      background: var(--surface-2);
    }
    .rep-toolbar-compact .form-group {
      margin: 0;
      min-width: 0;
    }
    .rep-toolbar-compact label {
      font-size: 0.72rem;
      margin-bottom: 0.2rem;
    }
    .rep-toolbar-compact select,
    .rep-toolbar-compact input {
      padding: 0.35rem 0.5rem;
      font-size: 0.85rem;
    }
    .rep-toolbar-compact .form-group-btn label { visibility: hidden; height: 0; margin: 0; }
    .gantt-scroll {
      height: 220px !important;
      max-height: 220px !important;
      min-height: 220px !important;
    }
    .gantt-chart { height: 220px !important; }
    .gantt-lane { height: 42px !important; }
    .gantt-icon-cell { height: 42px !important; }
    /* ZELENA i CRVENA traka — ista visina i pozicija */
    .gantt-bar,
    .gantt-inf {
      top: 8px !important;
      height: 26px !important;
      border-radius: 3px !important;
      box-sizing: border-box !important;
    }
    .gantt-layout { margin-bottom: 0.5rem; }
    .report-picker { margin: 0; }
    .report-chip { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

    .tv-bar {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0.55rem 0.75rem;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      margin-bottom: 0.85rem;
      overflow: visible;
      position: relative;
      z-index: 20;
    }
    .tv-bar-main {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 0.45rem 0.55rem;
      overflow: visible;
    }
    .tv-bar-actions {
      display: none;
    }
    .tv-field-gear {
      position: relative;
      z-index: 30;
      overflow: visible;
    }
    .tv-field-gear .tv-gear {
      position: relative;
      margin: 0;
      overflow: visible;
    }
    .tv-field {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
    }
    .tv-field label {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      font-weight: 600;
    }
    .tv-bar select#rep-type,
    .tv-bar select#rep-driver,
    .tv-dates input[type="date"],
    .tv-bar .tacho-date-input {
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      border-radius: 8px;
      padding: 0 0.7rem;
      font-size: 0.88rem;
      height: 34px;
      line-height: 32px;
      min-width: 130px;
      box-sizing: border-box;
      vertical-align: middle;
    }
    .tv-bar select#rep-type {
      min-width: 130px;
      max-width: 180px;
    }
    .tv-bar select#rep-driver {
      max-width: 240px;
      min-width: 150px;
      font-weight: 500;
    }
    .tv-bar select#rep-driver:focus,
    .tv-dates input[type="date"]:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(97, 179, 196, 0.25);
    }
    .tv-presets {
      flex-wrap: nowrap;

      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
    }
    .tv-preset {
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      padding: 0 0.55rem;
      font-size: 0.75rem;
      cursor: pointer;
      height: 34px;
      line-height: 32px;
      border-radius: 7px;
      white-space: nowrap;
      box-sizing: border-box;
      transition: border-color 0.15s, background 0.15s, color 0.15s;
    }
    .tv-preset:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .tv-preset.active {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      font-weight: 600;
    }
    [data-theme="light"] .tv-preset.active {
      color: #fff;
    }
    .tv-dates {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
    .tv-dates span {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 500;
    }
    .tv-dates input[type="date"] {
      min-width: 115px;
      color-scheme: dark;
    }
    [data-theme="light"] .tv-dates input[type="date"] {
      color-scheme: light;
    }


    /* === Custom date picker === */
    .tacho-dp-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .tacho-dp-wrap input.tacho-date-input {
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      border-radius: 8px;
      padding: 0 2.1rem 0 0.7rem;
      font-size: 0.88rem;
      height: 34px;
      line-height: 32px;
      min-width: 118px;
      width: 128px;
      box-sizing: border-box;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      cursor: pointer;
    }
    .tacho-dp-wrap input.tacho-date-input:focus {
      outline: none;
      border-color: var(--accent);
      box-shadow: 0 0 0 2px rgba(97, 179, 196, 0.28);
    }
    .tacho-dp-btn {
      position: absolute;
      right: 3px;
      top: 50%;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .tacho-dp-btn:hover { color: var(--accent); background: rgba(97,179,196,0.15); }
    .tacho-dp-popup {
      position: absolute;
      z-index: 10050;
      top: calc(100% + 8px);
      left: 0;
      width: 248px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
      padding: 0.5rem 0.55rem 0.55rem;
      color: var(--text);
      user-select: none;
      animation: dpFadeIn 0.12s ease;
    }
    @keyframes dpFadeIn {
      from { opacity: 0; transform: translateY(-4px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tacho-dp-popup.dp-up { top: auto; bottom: calc(100% + 8px); }
    .tacho-dp-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.4rem;
      margin-bottom: 0.4rem;
    }
    .tacho-dp-head button.dp-nav {
      width: 28px; height: 28px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      border-radius: 10px;
      cursor: pointer;
      font-size: 1rem;
      line-height: 1;
      transition: border-color 0.12s, color 0.12s, background 0.12s;
    }
    .tacho-dp-head button.dp-nav:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: rgba(97,179,196,0.1);
    }
    .tacho-dp-title {
      flex: 1;
      text-align: center;
      border: none;
      background: transparent;
      color: var(--text);
      font-weight: 700;
      font-size: 0.9rem;
      cursor: pointer;
      padding: 0.4rem 0.5rem;
      border-radius: 10px;
      transition: background 0.12s, color 0.12s;
    }
    .tacho-dp-title:hover { background: var(--surface-2); color: var(--accent); }
    .tacho-dp-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      text-align: center;
    }
    .tacho-dp-grid.months,
    .tacho-dp-grid.years {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .tacho-dp-dow {
      font-size: 0.7rem;
      color: var(--muted);
      font-weight: 700;
      padding: 0.3rem 0 0.45rem;
      text-transform: uppercase;
      letter-spacing: 0.03em;
    }
    .tacho-dp-cell {
      border: none;
      background: transparent;
      color: var(--text);
      border-radius: 10px;
      height: 34px;
      font-size: 0.84rem;
      cursor: pointer;
      padding: 0;
      transition: background 0.1s, color 0.1s, transform 0.08s;
    }
    .tacho-dp-cell:hover { background: var(--surface-2); }
    .tacho-dp-cell:active { transform: scale(0.96); }
    .tacho-dp-cell.muted { color: var(--muted); opacity: 0.45; }
    .tacho-dp-cell.selected {
      background: var(--accent);
      color: #fff;
      font-weight: 700;
      box-shadow: 0 2px 8px rgba(97,179,196,0.35);
    }
    .tacho-dp-cell.today:not(.selected) {
      box-shadow: inset 0 0 0 1.5px var(--accent);
      font-weight: 600;
    }
    .tacho-dp-cell.month-cell,
    .tacho-dp-cell.year-cell {
      height: 34px;
      font-size: 0.8rem;
      font-weight: 600;
    }
    .tacho-dp-foot {
      margin-top: 0.45rem;
      padding-top: 0.4rem;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 0.4rem;
      justify-content: space-between;
      align-items: center;
    }
    .tacho-dp-foot button {
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--text);
      border-radius: 8px;
      padding: 0.35rem 0.65rem;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      transition: border-color 0.12s, color 0.12s;
    }
    .tacho-dp-foot button:hover { border-color: var(--accent); color: var(--accent); }
    .tacho-dp-hint {
      font-size: 0.65rem;
      color: var(--muted);
      text-align: center;
      flex: 1;
    }


    .tv-ok {
      height: 34px;
      padding: 0 0.9rem;
      border: none;
      border-radius: 7px;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.82rem;
      white-space: nowrap;
      background: var(--accent);
      color: #0a0a0a;
    }
    .tv-ok:hover {
      filter: brightness(1.08);
    }
    .tv-ok:disabled {
      opacity: 0.6;
      cursor: wait;
    }
    .tv-gear {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: var(--surface-2);
      color: var(--muted);
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
    }
    .tv-gear:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .tv-gear-panel {
      display: none;
      position: absolute;
      right: 0;
      top: calc(100% + 6px);
      min-width: 280px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(0,0,0,0.45);
      padding: 0.9rem 1rem;
      z-index: 9999;
      color: var(--text);
      text-align: left;
    }
    .tv-gear-panel.open { display: block; }
    .tv-gear-panel label {
      display: block;
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      margin-bottom: 0.4rem;
      font-weight: 600;
    }
    .tv-gear-panel select {
      width: 100%;
      background: var(--surface-2);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.5rem 0.6rem;
      font-size: 0.88rem;
    }

    .tv-dates-text {
      display: flex;
      align-items: center;
      height: 34px;
      padding: 0 0.75rem;
      background: var(--surface-2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.9rem;
      font-weight: 500;
      min-width: 200px;
      white-space: nowrap;
    }
    .tv-dates-text .tv-sep {
      color: var(--muted);
      margin: 0 0.4rem;
      font-weight: 400;
    }

    /* Grafikon aktivnosti – redovi po danu (kao Tacho View Activity chart) */
    .ac-wrap { display: flex; flex-direction: column; gap: 0; }
      .audit-search-wrap { display:flex; flex:0 1 220px; flex-direction:row; align-items:center; gap:0; min-width:170px; max-width:240px; }
    .ac-summary {
      display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center;
      padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--border);
      font-size: 0.88rem; color: var(--text);
    }
    .ac-summary strong { color: var(--text); }
    .ac-row {
      display: grid;
      grid-template-columns: 72px 88px minmax(0, 1fr);
      gap: 0.2rem 0.45rem;
      align-items: stretch;
      border-bottom: 1px solid var(--border);
      padding: 0.5rem 0.4rem 0.35rem;
      cursor: pointer;
      transition: background 0.12s;
    }
    .ac-row:hover { background: var(--surface-2); }
    .ac-row-left {
      display: flex; flex-direction: column; justify-content: center; gap: 0.1rem;
      font-size: 0.78rem; font-weight: 600;
    }
    .ac-row-left .ac-km { font-weight: 400; color: var(--muted); font-size: 0.72rem; }
    .ac-row-meta {
      display: grid !important;
      grid-template-rows: repeat(4, 1fr);
      align-items: center;
      font-size: 0.72rem;
      min-width: 82px;
      height: 56px;
      font-variant-numeric: tabular-nums;
    }
    .ac-row-meta span {
      display: flex;
      align-items: center;
      gap: 0.28rem;
      white-space: nowrap;
      font-weight: 600;
      line-height: 1;
      height: 14px;
    }
    .ac-row-meta .th-icon {
      width: 14px; height: 14px;
      display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center;
      color: inherit;
    }
    .ac-row-meta .th-icon svg { width: 14px; height: 14px; }
    .ac-timeline-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ac-timeline {
      position: relative; height: 56px; background: var(--surface-2);
      border-radius: 6px; overflow: visible; border: 1px solid var(--border);
    }
    .ac-timeline-lane {
      position: absolute; left: 0; right: 0; height: 12px;
    }
    .ac-timeline-lane.driving { top: 3px; }
    .ac-timeline-lane.work { top: 16px; }
    .ac-timeline-lane.availability { top: 29px; }
    .ac-timeline-lane.rest { top: 42px; }
    .ac-bar {
      position: absolute; top: 0; height: 100%; border-radius: 2px; min-width: 1px;
    }
    .ac-inf-mark {
      position: absolute; top: 3px; height: 12px; width: 12px;
      margin-left: -6px;
      background: transparent; z-index: 6; border-radius: 1px;
      cursor: help;
      pointer-events: auto;
    }
    .ac-inf-mark::before {
      content: "";
      position: absolute; left: 50%; top: 0; bottom: 0;
      width: 3px; margin-left: -1.5px;
    }
    .ac-inf-mark::after {
      content: "!";
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 12px; height: 12px; border-radius: 50%;
      background: #c0392b; color: #fff; font-size: 8px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      line-height: 12px; text-align: center;
      pointer-events: none;
    }
    .ac-hours {
      display: grid; grid-template-columns: 88px 92px minmax(0, 1fr); gap: 0.35rem 0.55rem;
      padding: 0.15rem 0.5rem 0.35rem; font-size: 0.62rem; color: var(--muted);
    }
    .ac-hours-scale {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    .ac-row-hours {
      display: grid;
      grid-template-columns: repeat(24, 1fr);
      text-align: center;
      font-size: 0.58rem;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      padding: 0 1px;
    }
    .ac-back-bar {
      display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
    }
    @media (max-width: 700px) {
      .ac-row { grid-template-columns: 80px 1fr; }
      .ac-row-meta { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
      .ac-hours { grid-template-columns: 80px 1fr; }
    }


    .th-icon-stack {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.15rem;
      line-height: 1.1;
    }
    .th-icon-stack .th-icon {
      display: flex;
      width: 16px;
      height: 16px;
    }
    .th-icon-stack .th-icon svg { width: 16px; height: 16px; }
    .th-icon-stack .th-lbl {
      font-size: 0.65rem;
      font-weight: 500;
      color: var(--muted);
      white-space: nowrap;
    }
    th .th-icon { vertical-align: middle; margin-right: 0.25rem; }

    /* Dnevna aktivnost – tabela */
    .da-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
    .da-table th {
      text-align: left; padding: 0.55rem 0.65rem; color: var(--muted);
      font-weight: 600; border-bottom: 1px solid var(--border); font-size: 0.8rem;
    }
    .da-table td {
      padding: 0.45rem 0.65rem; border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .da-table tr.da-day { cursor: pointer; transition: background 0.12s; }
    .da-table tr.da-day:hover { background: var(--surface-2); }
    .da-table tr.da-day.open { background: var(--surface-2); }
    .da-chev { color: var(--muted); margin-right: 0.35rem; font-size: 0.75rem; }
    .da-schema {
      width: 200px; height: 18px; display: block;
      border: 1px solid #d5d9de; border-radius: 2px; background: #f3f5f7;
    }
    .da-schema-wrap { min-width: 180px; }
    .da-schema-scale {
      display: flex; justify-content: space-between; font-size: 0.58rem;
      color: var(--muted); margin-top: 2px; max-width: 180px;
    }
    .da-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      gap: 0.75rem; flex-wrap: wrap; padding: 0.55rem 0.75rem;
      background: var(--surface-2); border: 1px solid var(--border);
      border-radius: 8px 8px 0 0; margin-top: 1rem;
    }
    .da-toolbar h3 { margin: 0; font-size: 0.95rem; font-weight: 600; }
    .da-detail-wrap { padding: 0.5rem 0.75rem 0.75rem; background: var(--surface); }

    /* Dokumenti – tacho files */
    .docs-page { display:flex; flex-direction:column; gap:0.75rem; }
    .docs-toolbar {
      display:flex; flex-wrap:wrap; align-items:center; gap:0.55rem;
      padding:0.65rem 0.85rem;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:12px;
    }
    .docs-toolbar input[type="date"],
    .docs-toolbar input[type="text"],
    .docs-toolbar select {
      height:36px;
      border:1px solid var(--border);
      background:var(--surface-2);
      color:var(--text);
      border-radius:8px;
      padding:0 0.65rem;
      font-size:0.88rem;
    }
    .docs-toolbar input.docs-search {
      flex:1; min-width:180px; max-width:320px;
      height:29px; padding:0.38rem 0.45rem 0.38rem 1.75rem;
      border-radius:8px; font-size:0.78rem;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");
      background-repeat:no-repeat;
      background-position:0.65rem center;
      background-size:13px 13px;
    }
    .docs-toolbar input.docs-search:focus {
      border-color:rgba(97,179,196,0.55);
      box-shadow:0 0 0 2px rgba(97,179,196,0.12);
      outline:none;
    }
    .docs-table-card {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
    }
    .docs-table-card table { width:100%; border-collapse:collapse; }
    .docs-table-card thead th {
      text-align:center; font-size:0.72rem; text-transform:uppercase;
      letter-spacing:0.04em; color:var(--muted); font-weight:600;
      padding:0.75rem 0.65rem; border-bottom:1px solid var(--border);
      background:var(--surface-2);
    }
    .docs-table-card tbody td {
      padding:0.7rem 0.65rem; border-bottom:1px solid var(--border);
      font-size:0.9rem; vertical-align:middle;
    }
    .docs-table-card table th:nth-child(2),
    .docs-table-card table th:nth-child(3),
    .docs-table-card table th:nth-child(4),
    .docs-table-card table td:nth-child(2),
    .docs-table-card table td:nth-child(3),
    .docs-table-card table td:nth-child(4) {
      text-align:center;
    }
    .docs-table-card table th:nth-child(2),
    .docs-table-card table td:nth-child(2) { padding-right:0.35rem; }
    .docs-table-card table th:nth-child(3),
    .docs-table-card table td:nth-child(3) { padding-left:0.35rem; }
    .docs-table-card table th:nth-child(4),
    .docs-table-card table td:nth-child(4) { padding-right:0.95rem; }
    .docs-table-card table th:nth-child(5),
    .docs-table-card table td:nth-child(5) { padding-left:0.95rem; }
    .docs-table-card .tacho-col-client {
      display:none;
    }
    .docs-table-card table th:nth-child(9),
    .docs-table-card table td:nth-child(9) {
      display:none;
    }
    .docs-download-at { white-space:normal; }
    .docs-download-date { white-space:nowrap; }
    .docs-download-time { color:var(--muted); font-size:0.72rem; line-height:1.2; }
    .docs-vehicle-name { white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
    .docs-vehicle-empty { display:block; text-align:center; }
    .docs-driver-empty { display:block; text-align:center; }
    .docs-period-cell .docs-months { margin-top:0; gap:0.35rem; }
    .docs-table-card tbody td:nth-child(3) .docs-badge {
      gap:0.22rem;
      padding:0.14rem 0.4rem;
      font-size:0.66rem;
      white-space:nowrap;
    }
    .docs-table-card tbody td:nth-child(3) .docs-badge .docs-ico-svg {
      width:14px;
      height:14px;
    }
    .docs-table-card tbody tr:last-child td { border-bottom:none; }
    .docs-table-card tbody tr:hover { background:rgba(97,179,196,0.06); }
    .docs-table-scroll tbody tr.docs-file-row td {
      background:var(--surface);
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
      transition:background 0.12s,border-color 0.12s;
    }
    .docs-table-scroll tbody tr.docs-file-row td:first-child {
      border-left:3px solid rgba(97,179,196,0.45);
      border-radius:8px 0 0 8px;
    }
    .docs-table-scroll tbody tr.docs-file-row td:last-child {
      border-right:1px solid var(--border);
      border-radius:0 8px 8px 0;
    }
    .docs-table-scroll tbody tr.docs-file-row:hover td {
      background:rgba(97,179,196,0.08);
      border-top-color:rgba(97,179,196,0.22);
      border-bottom-color:rgba(97,179,196,0.22);
    }
    .docs-table-scroll tbody tr.docs-file-row.docs-row-selected td {
      background:rgba(97,179,196,0.11);
      border-top-color:rgba(97,179,196,0.35);
      border-bottom-color:rgba(97,179,196,0.35);
    }
    .docs-table-scroll tbody tr.docs-file-row.docs-row-selected td:first-child {
      border-left-color:#61b3c4;
    }
    .docs-table-scroll tbody tr.docs-file-row-vu td:first-child { border-left-color:#60a5fa; }
    .docs-table-scroll tbody tr.docs-file-row-card td:first-child { border-left-color:#34d399; }
    .docs-table-scroll tbody tr.docs-file-row.docs-row-active td {
      background:rgba(97,179,196,0.16);
    }
    .docs-table-scroll .docs-select-cell {
      width:42px;
      padding:0 !important;
      position:relative;
    }
    .docs-row-check {
      position:absolute;
      inset:0;
      width:auto;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      border:0;
      border-radius:0;
      background:rgba(97,179,196,0.04);
      box-shadow:none;
      cursor:pointer;
      transition:background 0.12s,border-color 0.12s;
    }
    .docs-row-check:hover { background:rgba(97,179,196,0.09); }
    .docs-row-check input {
      width:15px;
      height:15px;
      margin:0;
      accent-color:#61b3c4;
      cursor:pointer;
    }
    .docs-row-selected .docs-row-check {
      border-color:rgba(97,179,196,0.65);
      background:rgba(97,179,196,0.12);
    }
    .docs-file-cell { display:flex; align-items:center; gap:0.65rem; }
    .docs-file-icon {
      width:32px; height:32px; border-radius:8px;
      background:#3b82f6; color:#fff;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
    }
    .docs-file-icon.vu { background:#64748b; }
    .docs-file-name { font-weight:500; word-break:break-all; line-height:1.3; }
    .docs-file-meta { font-size:0.75rem; color:var(--muted); margin-top:0.15rem; }
    .docs-chip {
      display:inline-flex; align-items:center; gap:0.35rem;
      padding:0.2rem 0.5rem; border-radius:6px;
      font-size:0.8rem; background:var(--surface-2); border:1px solid var(--border);
    }
    .docs-chip .dot {
      width:8px; height:8px; border-radius:50%; flex-shrink:0;
    }
    .docs-chip.driver .dot { background:#0d9488; }
    .docs-chip.device .dot { background:#e11d48; }
    .docs-dl {
      width:36px; height:36px; border-radius:8px;
      border:1px solid var(--border); background:var(--surface-2);
      color:var(--text); cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center;
    }
    .docs-dl:hover { border-color:var(--accent); color:var(--accent); }
    .docs-dl.docs-dl-info,
    .docs-dl.docs-dl-download {
      vertical-align:middle;
    }
    .docs-dl.docs-dl-info {
      width:26px; height:26px; border-radius:999px;
      border-color:rgba(97,179,196,.4); background:rgba(97,179,196,.12);
      color:#61B3C4; padding:0;
    }
    .docs-dl.docs-dl-info svg { width:15px; height:15px; }
    .docs-dl.docs-dl-info:hover { background:rgba(97,179,196,.22); }
    .docs-dl.docs-dl-download { width:34px; height:34px; border-radius:8px; }
    .docs-dl.docs-dl-download svg { width:14px; height:14px; }

    .docs-status { font-size:0.8rem; color:var(--muted); padding:0 0.25rem; }
    .docs-header { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:0.85rem; }
    .docs-header h2 { margin:0; font-size:1.25rem; font-weight:700; display:flex; align-items:center; gap:0.55rem; }
    .docs-header p { margin:0.3rem 0 0; color:var(--muted); font-size:0.85rem; }
    .docs-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0.75rem; margin-bottom:0.85rem; }
    @media (max-width:900px){ .docs-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
    .docs-stat {
      background:var(--surface); border:1px solid var(--border); border-radius:12px;
      padding:0.9rem 1rem; display:flex; align-items:center; gap:0.75rem;
    }
    .docs-stat-ico {
      width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
      background:rgba(97,179,196,0.15); color:var(--accent); font-size:1.1rem; flex-shrink:0;
    }
    .docs-stat strong { display:block; font-size:1.35rem; line-height:1.1; }
    .docs-stat span { font-size:0.75rem; color:var(--muted); }
    .docs-tabs { display:flex; gap:0.25rem; border-bottom:1px solid var(--border); margin-bottom:0.75rem; flex-wrap:wrap; }
    .docs-tab {
      background:none; border:none; border-bottom:2px solid transparent; color:var(--muted);
      padding:0.55rem 0.9rem; font-weight:600; font-size:0.88rem; cursor:pointer;
    }
    .docs-tab.active { color:var(--text); border-bottom-color:var(--accent); }
    .docs-badge {
      display:inline-flex; align-items:center; gap:0.3rem; padding:0.18rem 0.5rem; border-radius:999px;
      font-size:0.72rem; font-weight:600;
    }
    .docs-badge.card { background:rgba(16,185,129,0.15); color:#34d399; }
    .docs-badge.vu { background:rgba(59,130,246,0.15); color:#60a5fa; }
    .docs-sym { margin-right:0.25rem; font-size:0.85rem; }
    .docs-code { opacity:0.7; font-size:0.75rem; font-family:ui-monospace,monospace; margin-left:0.2rem; }

    .docs-sym { margin-right:0.25rem; font-size:0.85rem; }
    .docs-code { opacity:0.7; font-size:0.75rem; font-family:ui-monospace,monospace; margin-left:0.2rem; }
    .docs-file-icon { font-size:0.75rem; font-weight:700; letter-spacing:0.02em; }


    .docs-layout { display:grid; grid-template-columns:1fr; gap:0.85rem; }
    .docs-layout.with-detail { grid-template-columns:1fr 320px; }
    @media (max-width:1100px){ .docs-layout.with-detail { grid-template-columns:1fr; } }
    .docs-detail {
      background:var(--surface); border:1px solid var(--border); border-radius:12px;
      padding:1rem 1.1rem; position:sticky; top:0.75rem; max-height:calc(100vh - 2rem); overflow:auto;
    }
    .docs-detail h3 { margin:0 0 0.75rem; font-size:1rem; }
    .docs-detail .dd-row { margin-bottom:0.7rem; }
    .docs-detail .dd-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); font-weight:600; margin-bottom:0.15rem; }
    .docs-detail .dd-val { font-size:0.9rem; word-break:break-word; }
    .docs-table-card tbody tr.docs-row-active { background:rgba(97,179,196,0.12); }


    .docs-months { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.35rem; }
    .docs-year-group { display:flex; flex-direction:column; gap:3px; }
    .docs-year-months { display:flex; flex-wrap:wrap; gap:3px; }
    .docs-year { font-size:0.7rem; color:var(--muted); line-height:1.2; }
    .docs-month {
      width:22px; height:22px; border-radius:4px; font-size:0.65rem; font-weight:700;
      display:inline-flex; align-items:center; justify-content:center;
      background:rgba(16,185,129,0.25); color:#6ee7b7; border:1px solid rgba(16,185,129,0.35);
    }
    .docs-toolbar .docs-download-wrap { margin-left:auto; flex-shrink:0; }
    .docs-check { width:16px; height:16px; accent-color:var(--accent); cursor:pointer; }
    .docs-select-all-row {
      display:flex; align-items:center; padding:0;
      margin:-0.35rem 0 0.1rem;
    }
    .docs-select-all-row .vu-day-check {
      padding:0.35rem 0.55rem 0.35rem 0.65rem;
      border-right:none; background:transparent;
    }
    .docs-detail-modern {
      background:linear-gradient(180deg, rgba(97,179,196,0.08), transparent 120px), var(--surface);
      border:1px solid var(--border); border-radius:16px;
      padding:0; overflow:hidden; position:sticky; top:0.75rem;
      max-height:calc(100vh - 2rem); display:flex; flex-direction:column;
    }
    .docs-detail-modern .dd-head {
      padding:1.1rem 1.15rem 0.9rem; border-bottom:1px solid var(--border);
      display:flex; gap:0.85rem; align-items:flex-start;
    }
    .docs-detail-modern .dd-avatar {
      width:48px; height:48px; border-radius:12px; flex-shrink:0;
      background:rgba(97,179,196,0.18); color:var(--accent);
      display:flex; align-items:center; justify-content:center;
    }
    .docs-detail-modern .dd-body { padding:1rem 1.15rem; overflow:auto; flex:1; }
    .docs-detail-modern .dd-row {
      display:grid; grid-template-columns:110px 1fr; gap:0.5rem 0.75rem;
      padding:0.55rem 0; border-bottom:1px solid rgba(255,255,255,0.04);
      font-size:0.88rem;
    }
    .docs-detail-modern .dd-label { color:var(--muted); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; padding-top:0.15rem; }
    .docs-detail-modern .dd-val { word-break:break-word; line-height:1.4; }
    .docs-detail-modern .dd-foot {
      padding:0.85rem 1.15rem 1.1rem; border-top:1px solid var(--border);
      background:var(--surface-2);
    }

    .docs-ico-svg { width:18px; height:18px; vertical-align:middle; }


    .docs-pager {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.65rem;
      padding:0.65rem 0.85rem; border-top:1px solid var(--border);
      background:var(--surface-2); font-size:0.85rem;
    }
    .docs-pager-btns { display:flex; gap:0.25rem; align-items:center; flex-wrap:wrap; }
    .docs-pager-btns button {
      min-width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
      background:var(--surface); color:var(--text); cursor:pointer; font-size:0.82rem;
    }
    .docs-pager-btns button.active { background:var(--accent); color:var(--btn-primary-text); border-color:var(--accent); font-weight:700; }
    .docs-pager-btns button:disabled { opacity:0.4; cursor:default; }
    .docs-sort-btn { background:none; border:none; color:var(--muted); cursor:pointer; font-size:0.72rem; margin-left:0.25rem; }
    .docs-sort-btn.active { color:var(--accent); }