/* ═══════════════════════════════════════════════════════════════════════
   Titans Gym — shtresa e dizajnit "Energji sportive"
   ───────────────────────────────────────────────────────────────────────
   Ndertuar mbi variablat e MudBlazor (--mud-palette-*), qe nderrohen
   automatikisht midis light dhe dark mode. Kjo do te thote qe asnje
   rregull ketu nuk ka nevoje te dyfishohet per dark mode — perveç atyre
   qe perdorin rgba te fiksuar, te cilat jane zgjedhur me qellim qe te
   funksionojne ne te dyja regjimet.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root {
    /* Gradientet e brand-it — perdoren ne appbar, butona dhe kartela KPI. */
    --titans-zjarr: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
    --titans-energji: linear-gradient(135deg, #A3E635 0%, #65A30D 100%);
    --titans-nate: linear-gradient(135deg, #0F172A 0%, #1E293B 60%, #24344d 100%);

    /* Kohezgjatjet e animacioneve — te njejta kudo qe levizja te ndihet koherente. */
    --titans-shpejt: .15s;
    --titans-normal: .25s;
    --titans-ngadale: .4s;
    --titans-lehtesim: cubic-bezier(.4, 0, .2, 1);
}

/* ── Baza ──────────────────────────────────────────────────────────────── */

html, body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Numrat ne tabela dhe KPI duhet te rreshtohen vertikalisht kolone-kolone.
   Pa kete, shifrat me gjeresi te ndryshme i bejne totalet te dridhen. */
.titans-shifra,
.mud-table td .titans-shifra,
.titans-kpi-vlera {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* ── Appbar ────────────────────────────────────────────────────────────── */

.mud-appbar {
    background: var(--titans-nate) !important;
    border-bottom: 1px solid rgba(249, 115, 22, .28);
    backdrop-filter: saturate(140%) blur(8px);
}

/* Vije e holle zjarri poshte appbar-it — detaji qe e lidh me brand-in. */
.mud-appbar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--titans-zjarr);
    opacity: .9;
}

.mud-appbar .mud-typography-h6 {
    font-family: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* ── Drawer / navigimi ─────────────────────────────────────────────────── */

.mud-drawer {
    border-inline-end: 1px solid var(--mud-palette-divider);
}

.mud-nav-link {
    border-radius: 8px;
    margin-inline: 6px;
    margin-block: 2px;
    position: relative;
    transition: background-color var(--titans-shpejt) var(--titans-lehtesim),
                color var(--titans-shpejt) var(--titans-lehtesim);
}

/* Vetem pajisjet me mi te vertete e marrin hover-in. Ne prekje, `:hover`
   "ngec" pas nje klikimi dhe lidhja mbetet e ndezur edhe pasi je larguar. */
@media (hover: hover) and (pointer: fine) {
    .mud-nav-link:hover {
        background-color: rgba(249, 115, 22, .09);
    }
}

/* Gjendja aktive: shirit zjarri majtas + sfond i lehte + tekst i theksuar.
   Shiriti animohet nga lart-poshte qe kalimi mes faqeve te ndihet i gjalle. */
.mud-nav-link.active {
    background-color: rgba(249, 115, 22, .13);
    color: var(--mud-palette-primary) !important;
    font-weight: 600;
}

.mud-nav-link.active::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: -6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--titans-zjarr);
    animation: titans-shirit var(--titans-normal) var(--titans-lehtesim);
}

.mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

@keyframes titans-shirit {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

/* ── Kartelat ──────────────────────────────────────────────────────────── */

.mud-card,
.mud-paper:not(.mud-appbar):not(.mud-drawer):not(.mud-popover) {
    border: 1px solid var(--mud-palette-divider);
    transition: transform var(--titans-normal) var(--titans-lehtesim),
                box-shadow var(--titans-normal) var(--titans-lehtesim),
                border-color var(--titans-normal) var(--titans-lehtesim);
}

/* Kartelat e klikueshme ngrihen lehte — sinjal prekshmerie, jo dekorim.
   Ne celular ky ngritje nuk ka kuptim: prekja e le kartelen te ngritur me
   3px derisa te prekesh diku tjeter, dhe rreshti duket i shtremberuar. */
@media (hover: hover) and (pointer: fine) {
    .mud-card[style*="cursor:pointer"]:hover,
    .mud-card[style*="cursor: pointer"]:hover,
    .titans-kartele-veprim:hover {
        transform: translateY(-3px);
        border-color: rgba(249, 115, 22, .45);
        box-shadow: 0 12px 28px rgba(249, 115, 22, .16),
                    0 4px 10px rgba(15, 23, 42, .07);
    }
}

.mud-card[style*="cursor:pointer"]:active,
.titans-kartele-veprim:active {
    transform: translateY(-1px);
}

/* ── Kartela KPI ───────────────────────────────────────────────────────── */

/* Kartela metrike me brez ngjyre siper. Ngjyra e brezit vjen nga nje
   modifikues (.titans-kpi--sukses etj.) qe faqja e vendos sipas kuptimit. */
.titans-kpi {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.titans-kpi::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--titans-zjarr);
}

.titans-kpi--sukses::before { background: linear-gradient(135deg, #22C55E, #15803D); }
.titans-kpi--info::before   { background: linear-gradient(135deg, #38BDF8, #0284C7); }
.titans-kpi--paralajm::before { background: linear-gradient(135deg, #FACC15, #D97706); }
.titans-kpi--rrezik::before { background: linear-gradient(135deg, #F87171, #DC2626); }
.titans-kpi--energji::before { background: var(--titans-energji); }

/* Shifra kryesore: e madhe, e ngjeshur, me hapesire negative — lexohet
   si titull, jo si tekst. Kjo eshte pjesa qe syri kap i pari. */
.titans-kpi-vlera {
    font-family: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
}

/* Etiketa mbi shifer: e vogel, kapitale, e hapur — kunder-peshe e shifres. */
.titans-kpi-etikete {
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: .7rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
}

/* Ikona e kartelës rri e zbehte derisa kartela te merret ne fokus. */
.titans-kpi .mud-icon-root {
    opacity: .32;
    transition: opacity var(--titans-normal) var(--titans-lehtesim),
                transform var(--titans-normal) var(--titans-lehtesim);
}

@media (hover: hover) and (pointer: fine) {
    .titans-kpi:hover .mud-icon-root {
        opacity: .85;
        transform: scale(1.08);
    }
}

/* ── Kartelat e veprimeve te shpejta ───────────────────────────────────── */

.titans-veprim {
    border-radius: 12px;
    cursor: pointer;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Shkelqim qe kalon mbi kartele ne hover — sugjeron energji pa u bere zhurme.
   Krijohet vetem aty ku ka hover te vertete: ne prekje shkelqimi do te
   ngelte i ndalur ne mes te kartelës pas nje klikimi. */
@media (hover: hover) and (pointer: fine) {
    .titans-veprim::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(115deg, transparent 30%, rgba(249, 115, 22, .1) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform var(--titans-ngadale) var(--titans-lehtesim);
        pointer-events: none;
    }

    .titans-veprim:hover::after {
        transform: translateX(100%);
    }
}

/* ── Tabelat ───────────────────────────────────────────────────────────── */

.mud-table-head .mud-table-cell {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .7rem;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-bottom: 2px solid var(--mud-palette-divider);
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .mud-table-row:hover .mud-table-cell {
        background-color: var(--mud-palette-table-hover);
    }
}

.mud-table-container {
    border-radius: 10px;
}

/* ── Butonat ───────────────────────────────────────────────────────────── */

.mud-button-root {
    border-radius: 8px;
    transition: transform var(--titans-shpejt) var(--titans-lehtesim),
                box-shadow var(--titans-shpejt) var(--titans-lehtesim),
                filter var(--titans-shpejt) var(--titans-lehtesim);
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--titans-zjarr);
    box-shadow: 0 2px 8px rgba(249, 115, 22, .3);
}

@media (hover: hover) and (pointer: fine) {
    .mud-button-filled.mud-button-filled-primary:hover {
        box-shadow: 0 6px 16px rgba(249, 115, 22, .42);
        filter: brightness(1.05);
        transform: translateY(-1px);
    }
}

.mud-button-filled.mud-button-filled-primary:active {
    transform: translateY(0);
}

/* ── Chips ─────────────────────────────────────────────────────────────── */

.mud-chip {
    font-weight: 600;
    letter-spacing: .01em;
}

/* ── Fusha te dhenash ──────────────────────────────────────────────────── */

/* Unaze fokusi e dukshme — kerkese aksesueshmerie, jo zbukurim. */
.mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .15);
}

/* ── Dialogjet ─────────────────────────────────────────────────────────── */

.mud-dialog {
    border-radius: 14px;
    overflow: hidden;
}

.mud-dialog-title {
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* ── Shiritat e levizjes ───────────────────────────────────────────────── */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-primary);
    background-clip: content-box;
}

/* ── Hyrja e faqeve ────────────────────────────────────────────────────── */

/* Kartelat hyjne me nje shkallezim te lehte. Vonesat jane te shkurtra
   me qellim: mbi ~250ms ne total, pritja fillon te ndihet si ngadalesim. */
.titans-hyrje > * {
    animation: titans-shfaqu var(--titans-ngadale) var(--titans-lehtesim) backwards;
}

.titans-hyrje > *:nth-child(1) { animation-delay: 0ms; }
.titans-hyrje > *:nth-child(2) { animation-delay: 40ms; }
.titans-hyrje > *:nth-child(3) { animation-delay: 80ms; }
.titans-hyrje > *:nth-child(4) { animation-delay: 120ms; }
.titans-hyrje > *:nth-child(5) { animation-delay: 160ms; }
.titans-hyrje > *:nth-child(6) { animation-delay: 200ms; }

@keyframes titans-shfaqu {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Titulli i faqes ───────────────────────────────────────────────────── */

.titans-titull-faqe {
    font-family: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;
    font-weight: 800;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

/* Vije zjarri poshte titullit te faqes. */
.titans-titull-faqe::after {
    content: "";
    display: block;
    width: 44px;
    height: 3px;
    margin-top: 6px;
    border-radius: 2px;
    background: var(--titans-zjarr);
}

/* ── Respekto preferencen e levizjes se reduktuar ──────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .titans-veprim::after { display: none; }

    .mud-card[style*="cursor:pointer"]:hover,
    .titans-kartele-veprim:hover {
        transform: none;
    }
}

/* ── Modi kiosk ────────────────────────────────────────────────────────── */

/* Ekrani i check-in-it qendron ne hyrje te palestres: duhet i lexueshem nga
   disa metra larg dhe nen drite te forte, ndaj sfondi eshte i erret dhe
   theksi portokalli vjen nga qendra, aty ku bie syri. */
.kiosku-sfondi {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background:
        radial-gradient(ellipse 70% 50% at 50% 42%, rgba(249, 115, 22, .20), transparent 70%),
        linear-gradient(135deg, #0B1220 0%, #0F172A 55%, #1E293B 100%);
}

/* ── Celulari ──────────────────────────────────────────────────────────── */

/* Kufiri 599.98px perputhet me breakpoint-in `sm` te MudBlazor-it, keshtu qe
   CSS-ja jone dhe rrjeti i MudBlazor-it nderrojne sjellje ne te njejten pike.
   Asnje rregull ketu nuk prek desktop-in: te gjitha rrine brenda media
   query-t dhe nuk aktivizohen mbi 600px. */
@media (max-width: 599.98px) {

    /* Defekti kryesor i hapesirave: `.mud-grid` eshte flexbox dhe cdo
       `.mud-grid-item` e trashegon `min-width: auto`, qe do te thote se nuk
       lejohet te tkurret nen gjeresine e permbajtjes se vet. Mjafton nje
       tabele e gjere ose nje shifer e gjate dhe i gjithe rreshti behet me i
       gjere se ekrani — keshtu TERE faqja levizet anash dhe cdo hapesire
       duket e zhvendosur. `min-width: 0` e kthen te drejten e tkurrjes, dhe
       overflow-i shkon aty ku i takon: brenda kontejnerit qe di ta rrokullise. */
    .mud-grid > .mud-grid-item {
        min-width: 0;
    }

    /* Tabelat rrokullisen BRENDA vetes, jo duke shtyre faqen.
       `overscroll-behavior-x` ndalon levizjen e tabeles te kaloje te faqja
       (dhe te nxjerre gjestin "kthehu mbrapa" te shfletuesit). */
    .mud-table-container {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Shifra e KPI-se ishte e fiksuar (h3 = 1.875rem, h4 = 1.5rem). Meqe
       `.titans-kpi` ka `overflow: hidden`, nje shume e madhe nuk dilte
       thjesht jashte — pritej. clamp() e ul vetem kur s'ka vend. */
    .titans-kpi-vlera {
        font-size: clamp(1.35rem, 7.5vw, 1.875rem);
        letter-spacing: -.01em;
    }

    /* Teksti duhet te tkurret; ikona jo — ndryshe ikona shtypet ne asgje. */
    .titans-kpi .mud-stack > div {
        min-width: 0;
    }

    .titans-kpi .mud-icon-root {
        flex-shrink: 0;
    }

    /* Titulli i faqes vjen me `style="font-size:2rem"` inline ne Paneli.razor;
       vetem `!important` e mund nje stil inline nga nje fletestil. */
    .titans-titull-faqe {
        font-size: clamp(1.375rem, 6.5vw, 2rem) !important;
    }

    /* Dialogjet zene pothuajse tere ekranin — ne 360px nje dialog i qendruar
       me margjina desktop-i mbetet nje shirit i ngushte i palexueshem. */
    .mud-dialog {
        width: 100%;
        margin: 10px;
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        border-radius: 12px;
    }

    .mud-dialog .mud-dialog-content {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Veprimet e dialogut mbeshtillen ne vend qe te dalin jashte. */
    .mud-dialog .mud-dialog-actions {
        flex-wrap: wrap;
    }
}

/* Shiritat 10px jane menduar per mi. Ne ekran prekjeje hane hapesire dhe
   duken te trashe, por nuk i heqim fare: brenda tabelave jane i vetmi
   sinjal qe permbajtja vazhdon anash. */
@media (pointer: coarse) {
    *::-webkit-scrollbar { width: 5px; height: 5px; }
    *::-webkit-scrollbar-thumb { border: 0; }
}