/* Palette and shared tokens — defined once so future v2 pages reuse them. */
:root {
    --c-navy:        #0c334e;
    --c-navy-hover:  #20577d;
    --c-teal:        #51ADA6;
    --c-teal-hover:  #418f88;
    --c-green:       #04AA6D;
    --c-pill-blue:   #e6eef4;
    --c-row-zebra:   #f2f2f2;
    --c-row-hover:   #ddd;
    --c-text-muted:  #555;
    --c-border:      #ddd;
    --c-border-soft: #ccc;
    --c-bg:          #ffffff;

    --radius-pill:   25px;
    --radius-tag:    12px;
    --shadow-card:   0 1px 3px rgba(0,0,0,0.08);

    --font-base:     normal 13px sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font: var(--font-base);
    background: var(--c-bg);
    color: var(--c-navy);
}

.hidden { display: none; }
.da-provjerimo-smijes-li-ti-ovo-vidjeti { display: none; }


/* === Overrides for the legacy navigacija.css =============================
   On mobile the legacy stylesheet sets .menu { position: fixed } and gives
   the logo a hard width: 600px. In portrait the logo wraps to its own row
   and the nav balloons to ~200 px tall, covering the top of the viewport
   and hiding any position:sticky element underneath (notably our scanner
   action bar and zoom slider). Pin the nav back into normal flow on v2
   pages so it scrolls with the rest of the document; UX-wise this is
   indistinguishable on phones and slightly nicer (the nav doesn't eat
   half the screen). */
.menu { position: relative !important; }
#logo { max-width: 200px; height: auto; }


/* === Page layout === */
.page-container {
    max-width: 1400px;
    margin: 20px auto;
    padding: 0 20px;
}


/* === Top search bar (scanner entry point) === */
.search-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.pretrazi_icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
}

.search-input {
    padding: 10px 18px;
    border: 1px solid #888;
    border-radius: var(--radius-pill);
    font-size: 14px;
    box-sizing: border-box;
    background: white;
    color: var(--c-navy);
}
.search-input:focus { outline: none; border-color: var(--c-navy); }

.search-bar .search-input { flex: 1; min-width: 0; }

.fotic-btn {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: var(--shadow-card);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fotic-btn:hover { background: var(--c-row-zebra); }
.fotic-btn img { width: 24px; height: 24px; display: block; }

#scanner {
    margin-bottom: 16px;
    background: var(--c-row-zebra);
    border-radius: 12px;
    padding: 12px;
}
#scanner[hidden] { display: none; }
#reader { max-width: 100%; margin-top: 10px; }

/* Always-stacked layout: camera dropdown row, then button row.
   Avoids the buttons wrapping unpredictably on narrow viewports — the Stop
   button was getting pushed off-screen on phones when the close-X's
   margin-left:auto kicked in mid-flex-wrap. */
.scanner-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.scanner-cam-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: 13px;
    color: var(--c-text-muted);
}
.scanner-cam-label > span { flex: 0 0 auto; }
.scanner-cam-label > select {
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-pill);
    background: white;
    color: var(--c-navy);
    font: var(--font-base);
    cursor: pointer;
}
.scanner-cam-label > select:focus { outline: none; border-color: var(--c-navy); }
.scanner-cam-label > select:disabled { opacity: 0.6; cursor: not-allowed; }

/* Pinned at the top of the scanner panel so it stays put no matter how the
   video element reflows after start(). Also stays visible while the user
   scrolls the page on mobile. */
.scanner-btn-row {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--c-row-zebra);
    padding: 4px 0;
}

.scanner-btn {
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 13px;
    color: white;
    cursor: pointer;
}
.scanner-btn:hover { opacity: 0.85; }
.scanner-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.scanner-btn-start { background: var(--c-green); }
.scanner-btn-stop  {
    background: #b94a3b;
    font-weight: bold;
    padding: 8px 22px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.scanner-btn-close {
    background: transparent;
    color: var(--c-text-muted);
    font-size: 22px;
    line-height: 1;
    padding: 4px 10px;
    margin-left: auto;
}
.scanner-btn-close:hover { color: var(--c-navy); opacity: 1; }
.scanner-btn[hidden] { display: none; }

/* Zoom slider sits between the controls and the video. Hidden until the
   running camera reports zoom capability. */
.zoom-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.zoom-wrap .zoom-label {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--c-text-muted);
}
#zoom-slider {
    flex: 1;
    min-width: 0;
    accent-color: var(--c-teal);
}
.zoom-wrap:has(#zoom-slider.hidden) { display: none; }
/* :has() fallback for older browsers — the slider's own .hidden hides itself
   but leaves the label visible; rule above hides the whole row if supported. */


/* === Table controls (type dropdown + search) === */
.table-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.type-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--c-text-muted);
}
.type-picker select {
    padding: 8px 16px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-pill);
    background: white;
    color: var(--c-navy);
    font: var(--font-base);
    min-width: 180px;
    cursor: pointer;
}
.type-picker select:focus { outline: none; border-color: var(--c-navy); }
.table-controls .search-input { width: 320px; max-width: 100%; }


/* === Table === */
.table-wrap {
    overflow-x: auto;
    border-radius: 6px;
    box-shadow: var(--shadow-card);
}

.qa-table {
    width: 100%;
    border-collapse: collapse;
    font: var(--font-base);
    background: white;
}

.qa-table th {
    background-color: var(--c-teal);
    color: white;
    text-align: left;
    padding: 8px 10px;
    font-weight: bold;
    white-space: nowrap;
}

/* Sticky header so it stays visible on long lists. */
.qa-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.qa-table thead tr.sort-row th {
    cursor: pointer;
    user-select: none;
}
.qa-table thead tr.sort-row th:hover {
    background-color: var(--c-teal-hover);
}

.sort-ind {
    display: inline-block;
    width: 12px;
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    margin-left: 2px;
}
.sort-ind.active { color: white; }

.qa-table thead tr.filter-row th {
    background-color: #f5f5f5;
    padding: 4px 6px;
    border-bottom: 1px solid var(--c-border-soft);
}
.col-filter {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-tag);
    font: normal 11px sans-serif;
    box-sizing: border-box;
    background: white;
    color: #333;
}
.col-filter:focus { outline: none; border-color: var(--c-navy); }

.qa-table td {
    border: 1px solid var(--c-border);
    padding: 6px 10px;
    vertical-align: top;
}
.qa-table tbody tr:nth-child(even) { background-color: var(--c-row-zebra); }
.qa-table tbody tr:hover           { background-color: var(--c-row-hover); cursor: pointer; }

.qa-table .no-results {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 20px;
}

.tag-pill {
    display: inline-block;
    background: var(--c-pill-blue);
    color: var(--c-navy);
    border-radius: var(--radius-tag);
    padding: 2px 8px;
    margin: 1px 2px;
    font-size: 11px;
    white-space: nowrap;
}


/* === Pagination === */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
    font-size: 13px;
    flex-wrap: wrap;
}
.pagination button {
    background: white;
    color: var(--c-navy);
    border: 1px solid var(--c-border-soft);
    border-radius: 18px;
    padding: 6px 12px;
    margin: 0;
    cursor: pointer;
    min-width: 36px;
}
.pagination button:hover:not(:disabled) {
    background: var(--c-navy-hover);
    color: white;
    border-color: var(--c-navy-hover);
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.pagination button.active {
    background: var(--c-navy);
    color: white;
    border-color: var(--c-navy);
}
.pagination .page-info     { margin-left: 12px; color: var(--c-text-muted); }
.pagination .page-size-ctrl { margin-left: 18px; color: var(--c-text-muted); }
.pagination .page-size-ctrl select {
    padding: 4px 8px;
    border: 1px solid var(--c-border-soft);
    border-radius: var(--radius-tag);
    background: white;
    color: #333;
    font: var(--font-base);
    cursor: pointer;
    margin-left: 4px;
}


/* === Responsive === */
@media screen and (max-width: 700px) {
    .table-controls { flex-direction: column; align-items: stretch; }
    .table-controls .search-input { width: 100%; }
    .type-picker select { flex: 1; }
    /* Per-column filter row gets noisy on phones — global search is enough. */
    .qa-table thead tr.filter-row { display: none; }
    /* And sticky headers fight with the legacy hamburger nav on mobile. */
    .qa-table thead { position: static; }
}