/* tabbar.css — globalni bottom tab bar (mobilni).
 *
 * Samostalna tamna komponenta: ista bez obzira na temu strane (svetle inner
 * strane, tamna vesti konzola) jer sedi kao zaseban sloj na dnu viewporta.
 * Zato koristi eksplicitne hex vrednosti iz hi-fi handoff-a (Razvoj/V3/Vesti/
 * design_handoff_vesti_mobile_chrome/README.md, sekcija „Design Tokens"),
 * ne deli token-set ni sa apex-om ni sa vesti konzolom.
 *
 * Vidljiv ≤767px; gasi se ≥768px (desktop ima top nav).
 */

.cp-tabbar { display: none; }

@media (max-width: 767px) {
    .cp-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 200;                 /* iznad hedera (z 100 na vesti), ispod modala */
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: calc(48px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: #0e0e0c;          /* --bg-deep: 4% tamnije od bg-page */
        border-top: 1px solid #2f2f2b;/* --line-strong */
        font-family: "JetBrains Mono", "Courier New", monospace;
        /* nestaje kad je tastatura otvorena (search) — toggl. klasa na body */
        transform: translateY(0);
        transition: transform 180ms ease-out;
        will-change: transform;
    }

    .cp-tabbar-cell {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding-top: 6px;             /* optička, ne matematička centriranost */
        text-decoration: none;
        color: #8a857e;               /* --t-lo */
        -webkit-tap-highlight-color: transparent;
        transition: background 80ms ease-in;
    }

    .cp-tabbar-glyph {
        font-size: 17px;
        line-height: 1;
    }

    .cp-tabbar-label {
        font-size: 9.5px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        line-height: 1;
    }

    /* Aktivna ćelija: brand-bright glif+labela + 2px marker iznad. */
    .cp-tabbar-cell.on {
        color: #c52828;               /* --brand-bright */
    }
    .cp-tabbar-cell.on::before {
        content: "";
        position: absolute;
        top: -1px;                    /* poklapa border-top trake */
        left: 50%;
        transform: translateX(-50%);
        width: 30px;
        height: 2px;
        background: #c52828;
    }

    /* Press (tap-down) — boja se ne menja, samo blagi crveni wash. */
    .cp-tabbar-cell:active {
        background: rgba(197, 40, 40, 0.15);
    }

    /* Tastatura otvorena (search): trakа se spušta ispod tastature. */
    body.cp-kbd-open .cp-tabbar {
        transform: translateY(100%);
    }

    /* Immersive overlay-i na /vesti/ se spuštaju preko tab bar-a: full-screen
       detalji vesti (.shell.drawer-open) i newsletter modal (.nl-modal.show)
       traže pun ekran, pa traka klizne dole da ne pokriva njihove akcije.
       (Hamburger meni NE sakriva traku — spec.) */
    body:has(.shell.drawer-open) .cp-tabbar,
    body:has(.nl-modal.show) .cp-tabbar {
        transform: translateY(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cp-tabbar { transition: none; }
}

/* SVETLA TEMA (vesti konzola, data-theme=light) — bar prati Soft Stone paletu
   umesto da ostane taman slab na svetloj strani. Scoped na page-vesti light
   (tabbar je ionako samo na /vesti/); inner strane i tamna tema nepromenjene. */
@media (max-width: 767px) {
    body.page-vesti[data-theme="light"] .cp-tabbar {
        background: var(--bg-rail);            /* #ecebe7 */
        border-top-color: var(--line-strong);  /* #c2bdb2 */
    }
    body.page-vesti[data-theme="light"] .cp-tabbar-cell {
        color: var(--t-lo);                     /* #78716c — čitljivo na svetlom */
    }
    body.page-vesti[data-theme="light"] .cp-tabbar-cell.on {
        color: var(--u-brand-bright);           /* #9b1919 glif+labela */
    }
    body.page-vesti[data-theme="light"] .cp-tabbar-cell.on::before {
        background: var(--u-brand-bright);      /* 2px marker iznad aktivne ćelije */
    }
    body.page-vesti[data-theme="light"] .cp-tabbar-cell:active {
        background: rgba(155, 25, 25, 0.10);
    }
}