/* =============================================================================
   FiskalX Centrala — dizajn sustav
   "Operate" konzola: smireni slate okvir, jedna plava boja naglaska, guste
   tablice, standardne afordancije. Namjerno ODVOJEN od site.css (koji je skin
   lokalnog WebAdmina na kasi i ima --web-* theming). Bootstrap ostaje učitan
   kao reset + grid + JS ponašanje; ovdje ga preoblačimo.
   ============================================================================= */

:root {
    --c-bg: #eef2f6;
    --c-surface: #ffffff;
    --c-surface-sunken: #f8fafc;

    --c-sidebar: #0f172a;
    --c-sidebar-2: #1e293b;
    --c-sidebar-fg: #cbd5e1;
    --c-sidebar-fg-dim: #8ba0b8;
    --c-sidebar-fg-active: #ffffff;

    --c-text: #0f172a;
    --c-text-2: #475569;
    --c-text-3: #64748b;

    --c-border: #e3e8ef;
    --c-border-strong: #cdd5e0;

    --c-accent: #2563eb;
    --c-accent-fg: #ffffff;
    --c-accent-hover: #1d4ed8;
    --c-accent-weak: #eff5ff;
    --c-accent-line: #c3dafe;

    --c-ok: #15803d;
    --c-ok-weak: #f0fdf4;
    --c-ok-line: #bbf7d0;
    --c-warn: #b45309;
    --c-warn-weak: #fffbeb;
    --c-warn-line: #fde68a;
    --c-err: #b91c1c;
    --c-err-weak: #fef2f2;
    --c-err-line: #fecaca;

    --c-radius: 10px;
    --c-radius-sm: 7px;
    --c-radius-pill: 999px;

    --c-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
    --c-shadow: 0 1px 3px rgba(15, 23, 42, .07), 0 12px 28px -12px rgba(15, 23, 42, .14);
    --c-shadow-lg: 0 2px 6px rgba(15, 23, 42, .08), 0 24px 48px -16px rgba(15, 23, 42, .22);

    --c-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --c-font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

    --c-sidebar-w: 246px;
    --c-topbar-h: 56px;
    --c-page-max: 1180px;
}

/* ── Reset / osnove ─────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--c-font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-bg) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--c-accent);
    text-decoration: none;
}

a:hover { color: var(--c-accent-hover); text-decoration: underline; }

code, kbd, samp, pre {
    font-family: var(--c-font-mono);
    font-size: .86em;
}

code {
    background: var(--c-surface-sunken);
    border: 1px solid var(--c-border);
    border-radius: 5px;
    padding: .08em .38em;
    color: var(--c-text-2);
    word-break: break-all;
}

pre {
    background: var(--c-surface-sunken);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-sm);
    padding: .75rem .9rem;
    overflow-x: auto;
    color: var(--c-text-2);
}

h1, h2, h3, h4, h5, h6 { font-weight: 650; color: var(--c-text); line-height: 1.25; }

canvas { display: block; max-width: 100%; }

hr { border: 0; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }

/* Brojevi u tablicama i metrikama poravnani */
.c-table td, .c-table th, .c-kpi__value, .c-num { font-variant-numeric: tabular-nums; }

/* ── Browser površine (jeftin, pouzdan signal da je dizajnirano) ────────────── */

::selection { background: var(--c-accent); color: #fff; }

:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

* { scrollbar-width: thin; scrollbar-color: var(--c-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--c-border-strong); border-radius: 999px; border: 2px solid var(--c-bg); }
*::-webkit-scrollbar-thumb:hover { background: #b3bdca; }

/* =============================================================================
   APP SHELL — sidebar + main
   ============================================================================= */

.c-shell {
    display: grid;
    grid-template-columns: var(--c-sidebar-w) minmax(0, 1fr);
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────────────────── */

.c-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--c-sidebar);
    color: var(--c-sidebar-fg);
    border-right: 1px solid #0b1220;
    z-index: 40;
}

.c-sidebar__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: 1rem 1.1rem;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -.01em;
    border-bottom: 1px solid var(--c-sidebar-2);
}

.c-sidebar__brand:hover { color: #fff; text-decoration: none; }

.c-sidebar__brand img { width: 26px; height: 26px; border-radius: 6px; }

.c-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: .75rem .6rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.c-sidebar__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--c-sidebar-fg-dim);
    padding: .9rem .55rem .35rem;
}

.c-navlink {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem .55rem;
    border-radius: var(--c-radius-sm);
    color: var(--c-sidebar-fg);
    font-weight: 500;
    font-size: 13.5px;
    line-height: 1.2;
    transition: background .12s ease, color .12s ease;
}

.c-navlink:hover { background: var(--c-sidebar-2); color: #fff; text-decoration: none; }

.c-navlink.is-active {
    background: var(--c-accent);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

.c-navlink__icon {
    width: 17px;
    height: 17px;
    flex: none;
    opacity: .85;
}

.c-navlink.is-active .c-navlink__icon { opacity: 1; }

.c-sidebar__foot {
    border-top: 1px solid var(--c-sidebar-2);
    padding: .75rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: 13px;
}

/* Cijeli blok je link na Moj profil (ne vise inertan span) - zato hover/fokus stanja. */
.c-sidebar__user {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-width: 0;
    flex: 1 1 auto;
    color: var(--c-sidebar-fg);
    text-decoration: none;
    padding: .3rem .4rem;
    margin: -.3rem -.4rem;
    border-radius: 7px;
}

.c-sidebar__user:hover,
.c-sidebar__user:focus-visible,
.c-sidebar__user.is-active {
    background: var(--c-sidebar-2);
    color: var(--c-sidebar-fg);
    text-decoration: none;
}

.c-sidebar__user-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.c-sidebar__user-mail {
    font-size: 11px;
    color: var(--c-sidebar-fg-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-sidebar__avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
}

.c-sidebar__user-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-linkbtn {
    background: none;
    border: 0;
    padding: .3rem .4rem;
    color: var(--c-sidebar-fg-dim);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
    border-radius: 5px;
}

.c-linkbtn:hover { color: #fff; background: var(--c-sidebar-2); }

/* ── Main column ────────────────────────────────────────────────────────────── */

.c-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100vh;
}

.c-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--c-topbar-h);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.6) blur(8px);
    -webkit-backdrop-filter: saturate(1.6) blur(8px);
    border-bottom: 1px solid var(--c-border);
}

.c-hamburger {
    display: none;
    background: none;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--c-radius-sm);
    width: 34px;
    height: 34px;
    padding: 0;
    place-items: center;
    color: var(--c-text-2);
    cursor: pointer;
    flex: none;
}

.c-hamburger:hover { background: var(--c-surface-sunken); }

/* ── Korisnik u gornjoj traci (samo mobitel: na desktopu je profil/odjava u sidebaru) ── */
.c-topbar__user {
    display: none;
    align-items: center;
    gap: .4rem;
    margin-left: auto;
    flex: none;
}

.c-topbar__user form { margin: 0; }

.c-topbar__avatar,
.c-topbar__logout {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface);
    color: var(--c-text-2);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

.c-topbar__avatar { background: var(--c-accent); border-color: transparent; color: #fff; text-transform: uppercase; }
.c-topbar__avatar:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.c-topbar__logout:hover { background: var(--c-surface-sunken); color: var(--c-text); }

/* ── Kvačica na prijavi ("Zapamti prijavu") ─────────────────────────────────── */
.c-check {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .25rem 0 .9rem;
    font-size: 14px;
    color: var(--c-text-2);
    cursor: pointer;
    min-height: 44px; /* dovoljno za prst */
}

.c-check input { width: 20px; height: 20px; flex: none; accent-color: var(--c-accent); }
.c-check small { display: block; color: var(--c-text-3); font-size: 12px; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */

.c-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .1rem .2rem;
    font-size: 13px;
    min-width: 0;
    flex: 1;
}

.c-crumbs a { color: var(--c-text-3); }
.c-crumbs a:hover { color: var(--c-accent); }

.c-crumbs__sep {
    color: var(--c-border-strong);
    margin: 0 .15rem;
    user-select: none;
}

.c-crumbs__here {
    color: var(--c-text);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40ch;
}

/* ── Kasa jump (global search) ──────────────────────────────────────────────── */

.c-jump {
    position: relative;
    flex: none;
    width: 260px;
    max-width: 42vw;
}

.c-jump input {
    width: 100%;
    height: 34px;
    padding: 0 .7rem 0 2rem;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--c-radius-sm);
    background: var(--c-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat .55rem center;
    font: inherit;
    font-size: 13px;
    color: var(--c-text);
}

.c-jump input::placeholder { color: var(--c-text-3); }
.c-jump input:focus { border-color: var(--c-accent); outline: none; box-shadow: 0 0 0 3px var(--c-accent-weak); }

/* ── Page container ─────────────────────────────────────────────────────────── */

.c-page {
    flex: 1;
    width: 100%;
    max-width: var(--c-page-max);
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

.c-page--wide { max-width: 100%; }

/* ── Firm context header (ime firme kao pod-header + pod-navigacija) ─────────── */

.c-context {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
}

.c-context__inner {
    max-width: var(--c-page-max);
    margin: 0 auto;
    padding: 1rem 1.5rem 0;
}

.c-context__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.c-context__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
    margin: 0;
}

.c-context__meta {
    color: var(--c-text-3);
    font-size: 12.5px;
}

.c-subnav {
    display: flex;
    gap: .15rem;
    margin-top: .7rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.c-subnav::-webkit-scrollbar { display: none; }

.c-subnav a {
    padding: .55rem .8rem;
    font-size: 13px;
    font-weight: 550;
    color: var(--c-text-3);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.c-subnav a:hover { color: var(--c-text); text-decoration: none; }

.c-subnav a.is-active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

/* ── Page head ──────────────────────────────────────────────────────────────── */

.c-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.c-page-head__titles { min-width: 0; }

.c-page-head h1 {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin: 0;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.c-page-head__sub {
    color: var(--c-text-3);
    font-size: 13px;
    margin-top: .3rem;
}

.c-page-head__actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    flex: none;
}

/* ── Buttons (preoblači Bootstrap .btn) ─────────────────────────────────────── */

.btn,
.c-btn {
    --_bg: var(--c-surface);
    --_fg: var(--c-text-2);
    --_bd: var(--c-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .48rem .85rem;
    font-family: var(--c-font);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    border-radius: var(--c-radius-sm);
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease;
    text-decoration: none;
}

.btn:hover,
.c-btn:hover { text-decoration: none; background: var(--c-surface-sunken); color: var(--c-text); border-color: var(--c-border-strong); }

.btn:focus-visible,
.c-btn:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

.btn:disabled,
.c-btn:disabled,
.btn.disabled { opacity: .55; pointer-events: none; }

.btn-sm, .c-btn--sm { padding: .34rem .6rem; font-size: 12px; }
.btn-lg { padding: .6rem 1.1rem; font-size: 14px; }

.btn-primary,
.c-btn--primary {
    --_bg: var(--c-accent);
    --_fg: var(--c-accent-fg);
    --_bd: var(--c-accent);
    box-shadow: var(--c-shadow-sm);
}

.btn-primary:hover,
.c-btn--primary:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); color: #fff; }

.btn-outline-primary { --_fg: var(--c-accent); --_bd: var(--c-accent-line); --_bg: var(--c-surface); }
.btn-outline-primary:hover { background: var(--c-accent-weak); color: var(--c-accent-hover); border-color: var(--c-accent); }

.btn-outline-secondary { --_fg: var(--c-text-2); --_bd: var(--c-border-strong); }

.btn-secondary { --_bg: #475569; --_fg: #fff; --_bd: #475569; }
.btn-secondary:hover { background: #334155; border-color: #334155; color: #fff; }

.btn-danger,
.c-btn--danger { --_bg: var(--c-err); --_fg: #fff; --_bd: var(--c-err); }
.btn-danger:hover { background: #991b1b; border-color: #991b1b; color: #fff; }

.btn-outline-danger { --_fg: var(--c-err); --_bd: var(--c-err-line); }
.btn-outline-danger:hover { background: var(--c-err-weak); color: #991b1b; border-color: var(--c-err); }

.btn-warning { --_bg: #f59e0b; --_fg: #1f2937; --_bd: #f59e0b; }

.btn-link,
.c-btn--link {
    --_bg: transparent;
    --_bd: transparent;
    --_fg: var(--c-accent);
    padding-left: .3rem;
    padding-right: .3rem;
    box-shadow: none;
}

.btn-link:hover,
.c-btn--link:hover { background: transparent; text-decoration: underline; color: var(--c-accent-hover); }

.btn-link.text-danger,
.btn-link.text-decoration-none.text-danger { --_fg: var(--c-err); }

/* ── Cards / panels ─────────────────────────────────────────────────────────── */

.c-card,
main > .card,
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow-sm);
}

.card-body { padding: 1.15rem 1.25rem; }
.card-title { font-size: 14px; font-weight: 650; margin-bottom: .85rem; color: var(--c-text); }

.c-card {
    padding: 1.15rem 1.25rem;
    margin-bottom: 1.15rem;
}

.c-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin: -.15rem 0 .95rem;
}

.c-card__title {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: -.005em;
    color: var(--c-text);
    margin: 0;
}

.c-card--flush { padding: 0; overflow: hidden; }
.c-card--flush .c-card__head { padding: 1rem 1.25rem 0; margin-bottom: .5rem; }

/* ── KPI grid ───────────────────────────────────────────────────────────────── */

.c-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
    gap: .85rem;
    margin-bottom: 1.15rem;
}

.c-kpi {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: .9rem 1rem 1rem;
    box-shadow: var(--c-shadow-sm);
}

.c-kpi__label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--c-text-3);
}

.c-kpi__value {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--c-text);
    margin-top: .3rem;
    line-height: 1.1;
}

.c-kpi__hint { font-size: 12px; color: var(--c-text-3); margin-top: .15rem; }

/* ── Tables (preoblači Bootstrap .table) ────────────────────────────────────── */

.c-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    background: var(--c-surface);
    box-shadow: var(--c-shadow-sm);
}

.c-table-wrap .table,
.c-table-wrap .c-table { margin: 0; border: 0; box-shadow: none; }

.table,
.c-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--c-text-2);
    background: var(--c-surface);
}

.table thead th,
.c-table thead th {
    text-align: left;
    font-weight: 600;
    font-size: 11.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--c-text-3);
    background: var(--c-surface-sunken);
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--c-border);
    white-space: nowrap;
}

.table tbody td,
.c-table tbody td {
    padding: .62rem .9rem;
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}

.table tbody tr:last-child td,
.c-table tbody tr:last-child td { border-bottom: 0; }

.table tbody tr,
.c-table tbody tr { transition: background .1s ease; }

.table-hover tbody tr:hover,
.c-table tbody tr:hover { background: var(--c-accent-weak); }

.table-striped tbody tr:nth-child(odd) { background: var(--c-surface-sunken); }
.table-striped tbody tr:nth-child(odd):hover { background: var(--c-accent-weak); }

.table-sm tbody td, .table-sm thead th { padding-top: .42rem; padding-bottom: .42rem; }

.table td .btn-sm, .c-table td .btn-sm { vertical-align: baseline; }

/* Zadnji stupac = akcije, poravnaj desno kad je prazan header */
.c-table td.c-actions, .c-table th.c-actions { text-align: right; white-space: nowrap; }

.table-warning, .table > :not(caption) > * > .table-warning, tr.table-warning td { background: var(--c-warn-weak) !important; }

/* Row link helper */
.c-rowtitle { color: var(--c-text); font-weight: 600; }
.c-rowtitle:hover { color: var(--c-accent); }

/* ── Badges ─────────────────────────────────────────────────────────────────── */

.badge,
.c-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .5rem;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--c-radius-pill);
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}

.c-badge--muted, .badge.bg-secondary, .badge.text-bg-secondary {
    background: var(--c-surface-sunken);
    color: var(--c-text-2);
    border-color: var(--c-border-strong);
}

.c-badge--ok, .badge.bg-success, .badge.text-bg-success {
    background: var(--c-ok-weak);
    color: var(--c-ok);
    border-color: var(--c-ok-line);
}

.c-badge--warn, .badge.bg-warning, .badge.text-bg-warning, .badge.bg-warning.text-dark {
    background: var(--c-warn-weak);
    color: var(--c-warn);
    border-color: var(--c-warn-line);
}

.c-badge--err, .badge.bg-danger, .badge.text-bg-danger {
    background: var(--c-err-weak);
    color: var(--c-err);
    border-color: var(--c-err-line);
}

.c-badge--accent, .badge.bg-primary, .badge.bg-info, .badge.text-bg-primary {
    background: var(--c-accent-weak);
    color: var(--c-accent-hover);
    border-color: var(--c-accent-line);
}

.c-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block; background: currentColor; }
.c-dot--ok { color: var(--c-ok); }
.c-dot--warn { color: var(--c-warn); }
.c-dot--err { color: var(--c-err); }

/* ── Definition list (zamjena za <dl class="row">) ──────────────────────────── */

.c-defs {
    display: grid;
    grid-template-columns: minmax(150px, 210px) minmax(0, 1fr);
    gap: 0;
    margin: 0;
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    overflow: hidden;
    background: var(--c-surface);
    box-shadow: var(--c-shadow-sm);
}

.c-defs > dt {
    padding: .62rem .9rem;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--c-text-3);
    background: var(--c-surface-sunken);
    border-bottom: 1px solid var(--c-border);
}

.c-defs > dd {
    padding: .62rem .9rem;
    margin: 0;
    font-size: 13px;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-border);
    min-width: 0;
    word-wrap: break-word;
}

.c-defs > dt:last-of-type, .c-defs > dd:last-of-type { border-bottom: 0; }

/* Bootstrap dl.row fallback (za viewove koje još nisam prešao) */
dl.row dt { color: var(--c-text-3); font-weight: 600; }
dl.row dd { color: var(--c-text); }

/* ── Alerts (preoblači Bootstrap .alert) ────────────────────────────────────── */

.alert,
.c-alert {
    position: relative;
    padding: .8rem 1rem;
    border-radius: var(--c-radius-sm);
    border: 1px solid var(--c-border-strong);
    background: var(--c-surface-sunken);
    color: var(--c-text-2);
    font-size: 13px;
    margin-bottom: 1rem;
}

.alert-success, .c-alert--ok { background: var(--c-ok-weak); border-color: var(--c-ok-line); color: #14532d; }
.alert-warning, .c-alert--warn { background: var(--c-warn-weak); border-color: var(--c-warn-line); color: #78350f; }
.alert-danger, .c-alert--err { background: var(--c-err-weak); border-color: var(--c-err-line); color: #7f1d1d; }
.alert-info, .c-alert--info { background: var(--c-accent-weak); border-color: var(--c-accent-line); color: #1e3a8a; }

/* ── Toast (TempData flash) ─────────────────────────────────────────────────── */

.c-flash {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding: .75rem 1rem;
    border-radius: var(--c-radius-sm);
    font-size: 13px;
    border: 1px solid;
    animation: c-flash-in .25s ease-out;
}

@keyframes c-flash-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.c-flash--ok { background: var(--c-ok-weak); border-color: var(--c-ok-line); color: #14532d; }
.c-flash--err { background: var(--c-err-weak); border-color: var(--c-err-line); color: #7f1d1d; }
.c-flash__icon { flex: none; width: 17px; height: 17px; margin-top: 1px; }

/* ── Forms (preoblači Bootstrap .form-control / .form-select) ───────────────── */

.form-control,
.form-select,
.c-input,
.c-select,
textarea.form-control {
    width: 100%;
    min-height: 38px;
    padding: .45rem .7rem;
    font-family: var(--c-font);
    font-size: 13.5px;
    color: var(--c-text);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--c-radius-sm);
    transition: border-color .12s ease, box-shadow .12s ease;
    appearance: none;
}

.form-select,
.c-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    padding-right: 2rem;
}

.form-control:focus,
.form-select:focus,
.c-input:focus,
.c-select:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-weak);
}

.form-control::placeholder { color: var(--c-text-3); }

.form-control-sm, .form-select-sm { min-height: 32px; padding: .3rem .55rem; font-size: 12.5px; }

.form-label,
.c-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text-2);
    margin-bottom: .3rem;
}

.form-text { color: var(--c-text-3); font-size: 12px; margin-top: .3rem; }
.kasa-tekst-grid > * { min-width: 0; }
.kasa-tekst-grid .form-text { flex-wrap: wrap; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .kasa-tekst-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

.c-field { margin-bottom: 1rem; }

/* Forma: uski stupac, kartica, dosljedan razmak polja */
.c-form {
    max-width: 540px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow-sm);
    padding: 1.35rem 1.4rem;
}

/* Polja u više stupaca na širim ekranima (umjesto jednog uskog stupca) - koristi je forme
   koje su namjerno izvučene iz 540px ograničenja (vidi ".c-card form.c-form" niže, npr.
   KasaKorisnici Create/Edit) da iskoriste raspoloživu širinu kartice. */
.c-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.5rem; }

.c-form .mb-3, .c-form .c-field { margin-bottom: 1rem; }
.c-form > .mb-3:last-of-type, .c-form .c-field:last-of-type { margin-bottom: 1.25rem; }
/* Kvačica lijevo, naslov i opis desno (flex je lomio opis u uski stupac pokraj naslova). */
.c-form .form-check { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .65rem; align-items: start; padding-left: 0; }
.c-form .form-check .form-check-input { float: none; grid-column: 1; grid-row: 1; margin: .15rem 0 0; width: 1.15rem; height: 1.15rem; }
.c-form .form-check .form-check-label { grid-column: 2; grid-row: 1; font-weight: 600; font-size: 13px; color: var(--c-text-2); }
.c-form .form-check .form-text { grid-column: 2; grid-row: 2; margin-top: .2rem; }

/* Obrazac koji je već unutar kartice nema vlastiti okvir (inače je kartica u kartici). */
.c-card form.c-form { max-width: none; border: 0; box-shadow: none; background: transparent; padding: 1rem 1.25rem 1.25rem; }
.c-form__actions { display: flex; gap: .5rem; align-items: center; padding-top: .35rem; }

.text-danger { color: var(--c-err) !important; }
.field-validation-error, .validation-summary-errors { color: var(--c-err); font-size: 12.5px; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.input-validation-error { border-color: var(--c-err) !important; }

.form-check-input:checked { background-color: var(--c-accent); border-color: var(--c-accent); }
.form-check-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-weak); }

/* ── Bootstrap nav-tabs (koristi ih Analitika) ──────────────────────────────── */

.nav-tabs {
    border-bottom: 1px solid var(--c-border);
    gap: .15rem;
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: .55rem .85rem;
    font-size: 13px;
    font-weight: 550;
    color: var(--c-text-3);
    background: none;
}

.nav-tabs .nav-link:hover { color: var(--c-text); border-bottom-color: var(--c-border-strong); }
.nav-tabs .nav-link.active { color: var(--c-accent); border-bottom-color: var(--c-accent); background: none; }

/* ── Bootstrap dropdown (koristi ga Analitika scope selector + topbar) ──────── */

.dropdown-menu {
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius-sm);
    box-shadow: var(--c-shadow-lg);
    padding: .35rem;
    font-size: 13px;
}

.dropdown-item { border-radius: 5px; padding: .45rem .6rem; color: var(--c-text-2); }
.dropdown-item:hover { background: var(--c-accent-weak); color: var(--c-accent-hover); }

/* ── Progress bars (koristi ih Analitika) ───────────────────────────────────── */

.progress {
    height: 8px !important;
    background: var(--c-surface-sunken);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar { background: var(--c-accent); }
.progress-bar.bg-success { background: var(--c-ok); }
.progress-bar.bg-info { background: #0891b2; }

/* ── Segmented control (period switch) ──────────────────────────────────────── */

.c-seg {
    display: inline-flex;
    background: var(--c-surface-sunken);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--c-radius-sm);
    padding: 2px;
    gap: 2px;
}

.c-seg a {
    padding: .32rem .7rem;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--c-text-3);
    border-radius: 5px;
    white-space: nowrap;
}

.c-seg a:hover { color: var(--c-text); text-decoration: none; }
.c-seg a.is-active { background: var(--c-surface); color: var(--c-accent); box-shadow: var(--c-shadow-sm); }

/* ── Empty state (uči sučelje, ne "nema podataka") ──────────────────────────── */

.c-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--c-border-strong);
    border-radius: var(--c-radius);
    background: var(--c-surface-sunken);
    color: var(--c-text-3);
}

.c-empty__icon { width: 32px; height: 32px; margin-bottom: .6rem; opacity: .5; }
.c-empty__title { font-weight: 650; color: var(--c-text-2); font-size: 14px; }
.c-empty__text { font-size: 13px; margin-top: .3rem; max-width: 46ch; margin-inline: auto; }
.c-empty__actions { margin-top: 1rem; }

/* ── Data list rows (firma → objekt → kasa stablo) ──────────────────────────── */

.c-list { display: flex; flex-direction: column; gap: .6rem; }

.c-tile {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    padding: .95rem 1.1rem;
    box-shadow: var(--c-shadow-sm);
    transition: border-color .12s ease, box-shadow .12s ease, transform .06s ease;
}

a.c-tile:hover { text-decoration: none; border-color: var(--c-accent-line); box-shadow: var(--c-shadow); }

.c-tile__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.c-tile__name { font-weight: 650; color: var(--c-text); font-size: 14px; }
.c-tile__meta { color: var(--c-text-3); font-size: 12.5px; margin-top: .15rem; }

/* ── Health line (zadnji kontakt / verzije) ─────────────────────────────────── */

.c-health { display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; }

.c-ver { font-variant-numeric: tabular-nums; }
.c-ver--ok { color: var(--c-ok); font-weight: 600; }
.c-ver--behind { color: var(--c-warn); font-weight: 600; }

/* ── Fallback za viewove koji još nisu prešli na .c-page-head ───────────────── */
.c-page > h1:first-child,
.c-page > h2:first-child { font-size: 21px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 1.15rem; }
.c-page > h1 + .row, .c-page > h1 + form { margin-top: .25rem; }
.form-group { margin-bottom: 1rem; }
.control-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--c-text-2); margin-bottom: .3rem; }
.c-page h5 { font-size: 14px; font-weight: 650; margin: 1.25rem 0 .75rem; }

/* ── Utility ────────────────────────────────────────────────────────────────── */

.c-muted { color: var(--c-text-3); }
.c-mono { font-family: var(--c-font-mono); font-size: .88em; }
.c-stack > * + * { margin-top: 1.15rem; }
.c-inline-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* Redak radnje: opis lijevo, kontrola desno; redovi odvojeni crtom (verzije aplikacije, kanal kase). */
.c-action-row { display: flex; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
    padding: .9rem 1.25rem; border-top: 1px solid var(--c-border); }
.c-action-row__text { display: flex; flex-direction: column; gap: .15rem; min-width: 220px; flex: 1 1 260px; }
.c-action-row__text strong { font-size: 14px; font-weight: 650; }
.c-action-row__text span { font-size: 12.5px; color: var(--c-text-3); }
.c-action-row__ctl { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.c-action-row__form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }
.c-action-row__form .form-select, .c-action-row__form .form-control { width: auto; min-width: 150px; }
.c-hr { border: 0; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }
.c-section-title { font-size: 15px; font-weight: 650; margin: 0 0 .85rem; letter-spacing: -.01em; }
.c-back { display: inline-flex; align-items: center; gap: .35rem; font-size: 13px; color: var(--c-text-3); margin-top: 1.5rem; }
.c-back:hover { color: var(--c-accent); }

details.c-note { margin: .75rem 0; font-size: 12.5px; }
details.c-note > summary { cursor: pointer; color: var(--c-text-3); }
details.c-note[open] > summary { margin-bottom: .5rem; }

/* ── Login ──────────────────────────────────────────────────────────────────── */

.c-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background:
        radial-gradient(1000px 500px at 100% -10%, #1e293b, transparent),
        radial-gradient(900px 500px at -10% 110%, #1e3a8a55, transparent),
        var(--c-sidebar);
}

.c-auth__card {
    width: 100%;
    max-width: 380px;
    background: var(--c-surface);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow-lg);
    padding: 2rem 1.9rem;
}

.c-auth__brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: .35rem;
}

.c-auth__brand img { width: 28px; height: 28px; border-radius: 6px; }
.c-auth__sub { color: var(--c-text-3); font-size: 13px; margin-bottom: 1.5rem; }

/* =============================================================================
   RESPONSIVE — sidebar postaje off-canvas
   ============================================================================= */

@media (max-width: 900px) {
    .c-shell { grid-template-columns: minmax(0, 1fr); }

    .c-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        /* height:auto je bitan: base pravilo ima 100vh, a na mobitelu je 100vh VIŠE od vidljivog dijela
           (adresna traka) - podnožje s profilom i odjavom tada završi ispod ruba ekrana i ne može se dodirnuti.
           Uz top+bottom visina je točno vidljivi prozor. */
        height: auto;
        /* Base ima align-self:start; na fixed elementu s top+bottom to sprječava rastezanje (izbornik ostane
           visok koliko sadržaj, a ispod njega prazno). */
        align-self: stretch;
        width: 280px;
        max-width: 86vw;
        transform: translateX(-100%);
        /* Zatvoren izbornik: bez sjene koja se probija uz rub i nedostupan tabulatoru/čitaču ekrana. */
        box-shadow: none;
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s, box-shadow .22s ease;
        overscroll-behavior: contain;
    }

    body.c-sidebar-open .c-sidebar {
        transform: none;
        visibility: visible;
        box-shadow: var(--c-shadow-lg);
        transition: transform .22s ease, visibility 0s, box-shadow .22s ease;
    }
    body.c-sidebar-open { overflow: hidden; }

    /* Podnožje (profil + odjava) uvijek vidljivo i dovoljno veliko za prst; safe-area za zarez/home traku. */
    .c-sidebar__foot { flex: none; padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
    .c-sidebar__user { padding: .55rem .5rem; margin: -.3rem -.4rem; }
    .c-linkbtn { padding: .7rem .8rem; }
    .c-navlink { padding-top: .65rem; padding-bottom: .65rem; }

    /* Profil + odjava i u gornjoj traci: dostupni jednim dodirom, bez otvaranja izbornika. */
    .c-topbar { padding: 0 .75rem; gap: .6rem; }
    .c-topbar__user { display: flex; }

    /* iOS zumira polja čiji je font manji od 16px. */
    .c-input, .form-control, .form-select, select, textarea { font-size: 16px; }

    /* Tablice se pomiču vodoravno: sjena na rubu pokazuje da ima još sadržaja (nestaje kad se dođe do kraja). */
    .c-table-wrap {
        background:
            linear-gradient(to right, var(--c-surface) 30%, rgba(255, 255, 255, 0)) 0 0 / 36px 100% no-repeat local,
            linear-gradient(to left, var(--c-surface) 30%, rgba(255, 255, 255, 0)) 100% 0 / 36px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .2), rgba(15, 23, 42, 0)) 0 0 / 12px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .2), rgba(15, 23, 42, 0)) 100% 0 / 12px 100% no-repeat scroll,
            var(--c-surface);
    }
    .c-table th, .c-table td { padding-left: .65rem; padding-right: .65rem; }

    body.c-sidebar-open::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .5);
        z-index: 35;
    }

    .c-hamburger { display: grid; }

    .c-page { padding: 1.15rem 1rem 3rem; }
    .c-context__inner { padding: .9rem 1rem 0; }
    .c-jump { width: 150px; }
}

@media (max-width: 560px) {
    .c-jump { display: none; }
    /* Sporedni stupci tablica (označeni c-hide-sm) se na uskom ekranu skrivaju da akcije ostanu vidljive. */
    .c-hide-sm { display: none !important; }
    .c-page-head__actions { width: 100%; display: flex; flex-wrap: wrap; gap: .5rem; }
    .c-card__head { flex-wrap: wrap; gap: .3rem .75rem; }
    .c-page-head { flex-direction: column; }
    .c-defs { grid-template-columns: 1fr; }
    .c-defs > dt { border-bottom: 0; padding-bottom: .1rem; background: var(--c-surface); }
    .c-defs > dd { padding-top: .1rem; }
}

@media print {
    .c-sidebar, .c-topbar, .c-context .c-subnav, .c-page-head__actions, .c-back { display: none; }
    .c-shell { grid-template-columns: 1fr; }
    body { background: #fff !important; }
}

/* Raspored po poslovima: svakodnevni rad, postavljanje, podrška. */
.c-main { min-width: 0; }
.c-context-nav { display: grid; gap: .2rem; padding-bottom: .45rem; }
.c-context-nav .c-subnav { display: flex; flex-wrap: wrap; overflow: visible; gap: .2rem; padding: 0; border: 0; }
.c-subnav__label { flex: 0 0 114px; align-self: center; color: var(--c-text-3); font-size: 11px; font-weight: 650; letter-spacing: .02em; }
.c-context-nav .c-subnav a { border-radius: 6px; border-bottom: 0; padding: .45rem .7rem; }
.c-context-nav .c-subnav a.is-active { background: var(--c-accent-weak); color: var(--c-accent); }
.c-overview-grid { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.6fr); gap: 1.25rem; align-items: start; }
.c-overview-grid > section { min-width: 0; }
.c-workspace-actions { display: grid; gap: .5rem; }
.c-workspace-actions .c-card__head { margin-bottom: .2rem; }
.c-action-tile { display: grid; gap: .25rem; padding: .85rem; border: 1px solid var(--c-border); border-radius: var(--c-radius-sm); color: var(--c-text); }
.c-action-tile span { font-size: 12px; color: var(--c-text-3); }
.c-action-tile:hover { border-color: var(--c-accent-line); background: var(--c-accent-weak); text-decoration: none; }
.c-quick-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.c-disclosure > summary { cursor: pointer; font-weight: 650; color: var(--c-text-2); }
.c-disclosure__body { padding-top: .9rem; }
.c-device-controls { border-top: 1px solid var(--c-border); padding: .9rem 0; margin-top: .7rem; }
.c-row-details { min-width: 145px; font-size: 12px; }
.c-row-details summary { cursor: pointer; color: var(--c-text-2); }
.c-row-details dl { display: grid; grid-template-columns: auto auto; gap: .25rem .8rem; padding-top: .5rem; margin: 0; }
.c-row-details dd { margin: 0; }
@media (max-width: 1100px) { .c-overview-grid { grid-template-columns: 1fr; } .c-workspace-actions { grid-template-columns: 1fr 1fr; } .c-workspace-actions .c-card__head { grid-column: 1 / -1; } }
@media (max-width: 600px) { .c-subnav__label { flex-basis: 100%; padding: .45rem .5rem .1rem; } .c-context-nav .c-subnav a { font-size: 12px; padding: .5rem; } .c-workspace-actions { grid-template-columns: 1fr; } .c-overview-grid { gap: .5rem; } }

/* Uređaji: firma ostaje vidljiva uz svaku kasu, uključujući mobilni prikaz. */
.c-devices [hidden] { display: none !important; }
.c-devices-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-bottom: 1.25rem; }
.c-devices-summary > div { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--c-radius); padding: .85rem 1rem; display: grid; gap: .15rem; }
.c-devices-summary strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.c-devices-summary span { font-size: 12px; color: var(--c-text-2); }
.c-devices-filters { display: flex; align-items: end; flex-wrap: wrap; gap: .75rem; }
.c-devices-filters > div { flex: 1 1 170px; min-width: 0; }
.c-devices-filters > .c-devices-search { flex: 2 1 260px; }
.c-devices-filters label { display: block; font-weight: 600; font-size: 12px; margin-bottom: .35rem; }
.c-devices-filters input, .c-devices-filters select { width: 100%; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--c-border-strong); border-radius: var(--c-radius-sm); background: var(--c-surface); color: var(--c-text); }
.c-devices-filters .btn { padding: .6rem .8rem; }
.c-devices-result { color: var(--c-text-3); font-size: 12px; margin: .85rem 0; }
.c-device-company { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--c-radius); margin-bottom: 1.25rem; overflow: hidden; }
.c-device-company__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--c-surface-sunken); border-bottom: 1px solid var(--c-border); }
.c-device-company__head > div { min-width: 0; }
.c-device-eyebrow { font-size: 10px; font-weight: 700; color: var(--c-text-3); text-transform: uppercase; letter-spacing: .08em; }
.c-device-company h2 { font-size: 18px; line-height: 1.4; margin: .15rem 0 .3rem; overflow-wrap: anywhere; }
.c-device-company h2 a { color: var(--c-text); }
.c-device-company__meta { display: flex; flex-wrap: wrap; gap: .2rem 1rem; color: var(--c-text-2); font-size: 12px; }
.c-device-company__count { flex-shrink: 0; font-size: 12px; background: var(--c-accent-weak); color: var(--c-accent); padding: .3rem .6rem; border-radius: var(--c-radius-pill); }
.c-device-table { margin: 0; width: 100%; table-layout: fixed; }
.c-device-table th:first-child { width: 35%; }
.c-device-table th:nth-child(2) { width: 23%; }
.c-device-table th:nth-child(3) { width: 16%; }
.c-device-table th:nth-child(4) { width: 13%; }
.c-device-table th:last-child { width: 13%; }
.c-device-table td { overflow-wrap: anywhere; }
.c-device-identity .c-rowtitle { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.c-device-code { font: 11px var(--c-font-mono); color: var(--c-text-2); border: 1px solid var(--c-border); border-radius: 4px; padding: .15rem .35rem; }
.c-device-owner { font-size: 12px; font-weight: 600; margin-top: .3rem; }
.c-device-location { color: var(--c-text-2); font-size: 12px; margin-top: .1rem; }
.c-device-reference { color: var(--c-text-3); font-size: 11px; margin-top: .3rem; }
.c-device-contact { margin-top: .4rem; }
.c-device-table td.c-actions { white-space: normal; }
.c-device-table .btn { white-space: nowrap; }
@media (max-width: 1000px) {
    .c-device-table, .c-device-table tbody { display: block; }
    .c-device-table thead { display: none; }
    .c-device-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; padding: 1rem; border-bottom: 1px solid var(--c-border); }
    .c-device-table tr:last-child { border-bottom: 0; }
    .c-device-table tbody td { display: block; border: 0; padding: 0; text-align: left; }
    .c-device-table .c-device-identity { grid-column: 1 / -1; }
    .c-device-table td[data-label]::before { content: attr(data-label); display: block; font-size: 10px; color: var(--c-text-3); margin-bottom: .25rem; }
    .c-device-table td.c-actions { display: flex; align-items: end; }
}
@media (max-width: 600px) {
    .c-devices-summary { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .c-device-company__head { padding: .85rem 1rem; align-items: start; flex-direction: column; gap: .6rem; }
    .c-devices-filters > .c-devices-search { flex-basis: 100%; }
    .c-devices-filters .btn { width: 100%; }
}

/* Ikona "i" s objašnjenjem (ovlasti, pristup) - partial Views/Shared/_InfoIkona.cshtml. Hover na mišu, dodir/fokus na mobitelu. */
.c-info {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; margin-left: .35rem; vertical-align: middle;
    border: 1px solid var(--c-border-strong); border-radius: var(--c-radius-pill);
    font: 600 .72rem/1 Georgia, "Times New Roman", serif; font-style: italic;
    color: var(--c-text-2); background: var(--c-surface); cursor: help; user-select: none;
}
.c-info:hover, .c-info:focus { color: var(--c-accent); border-color: var(--c-accent); outline: none; }
.c-info:focus-visible { box-shadow: 0 0 0 3px var(--c-accent-line); }
.c-info__tekst {
    display: none; position: absolute; z-index: 50; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: min(24rem, 86vw); padding: .6rem .75rem;
    font-family: var(--c-font); font-size: .82rem; line-height: 1.45; font-weight: 400; font-style: normal; text-align: left; white-space: normal;
    color: var(--c-text); background: var(--c-surface); border: 1px solid var(--c-border-strong);
    border-radius: var(--c-radius-sm); box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
.c-info:hover .c-info__tekst, .c-info:focus .c-info__tekst { display: block; }
@media (max-width: 560px) {
    .c-info__tekst { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; transform: none; max-width: none; width: auto; }
}