/* =========================================================
   BILANCIO ROMA — DESIGN SYSTEM
   Palette, tipografia e componenti condivisi.
   Mobile-first: le regole base valgono da 0px, i breakpoint
   aggiungono complessità solo dai tablet in su.
   ========================================================= */

:root{
    /* --- Brand: giallorosso, ma con toni meno "neon AI" e più materici --- */
    --rm-garnet-900:#3d0c14;
    --rm-garnet-800:#5c1220;
    --rm-garnet-700:#7a1929;
    --rm-garnet-600:#96202f;
    --rm-gold-500:#d9a441;
    --rm-gold-400:#e8bd68;
    --rm-gold-300:#f2d296;

    /* --- Neutri caldi (niente più slate-blu da "dashboard AI") --- */
    --rm-bg:#141110;
    --rm-bg-soft:#1b1716;
    --rm-surface:#211c1a;
    --rm-surface-2:#2a2321;
    --rm-border:rgba(242,226,204,.09);
    --rm-border-strong:rgba(242,226,204,.16);

    --rm-text:#f6f1ea;
    --rm-text-dim:#c9beb2;
    --rm-text-mute:#8f8378;

    /* --- Stato / dati --- */
    --rm-ok:#4fae6d;
    --rm-warn:#d99a3f;
    --rm-bad:#c14343;
    --rm-info:#5b9bbf;

    /* --- Scala spaziatura & raggi (più contenuti, meno "pillola ovunque") --- */
    --rm-radius-sm:8px;
    --rm-radius-md:12px;
    --rm-radius-lg:16px;
    --rm-shadow-sm:0 2px 8px rgba(0,0,0,.22);
    --rm-shadow-md:0 8px 24px rgba(0,0,0,.28);

    --rm-font-display:'DM Serif Display', system-ui, sans-serif;
    --rm-font-body:'Sarabun', system-ui, -apple-system, "Segoe UI", sans-serif;
    --rm-font-num:'Sarabun', 'DM Serif Display', monospace;

    /* barra di navigazione inferiore mobile: altezza + safe area */
    --rm-tabbar-h:60px;
}

/* =========================================================
   RESET LEGGERO
   ========================================================= */
.rm-scope, .rm-scope *{ box-sizing:border-box; }
.rm-scope{
    font-family:var(--rm-font-body);
    color:var(--rm-text);
    -webkit-font-smoothing:antialiased;
}
.rm-scope h1, .rm-scope h2, .rm-scope h3{
    font-family:var(--rm-font-display);
    font-weight:600;
    letter-spacing:.01em;
    margin:0 0 .4em;
}
.rm-scope a{ color:inherit; }

/* =========================================================
   LAYOUT DI BASE
   ========================================================= */
.rm-page{
    background:var(--rm-bg);
    min-height:100vh;
    padding-bottom:calc(var(--rm-tabbar-h) + 24px); /* spazio per tabbar mobile */
}
.rm-container{
    max-width:1240px;
    margin:0 auto;
    padding:18px 16px 40px;
}
@media (min-width:768px){
    .rm-container{ padding:28px 24px 56px; }
}
@media (min-width:1100px){
    .rm-page{ padding-bottom:40px; } /* niente tabbar su desktop */
}

/* =========================================================
   HERO — versione sobria, niente blob radiali multipli
   ========================================================= */
.rm-hero{
    position:relative;
    border-radius:var(--rm-radius-lg);
    padding:24px 20px;
    background:
        linear-gradient(135deg, var(--rm-garnet-800), var(--rm-garnet-900) 72%);
    border:1px solid var(--rm-border-strong);
    box-shadow:var(--rm-shadow-md);
    overflow:hidden;
    margin-bottom:18px;
}
.rm-hero::after{
    content:"";
    position:absolute;
    right:-40px; top:-60px;
    width:220px; height:220px;
    background:radial-gradient(circle, rgba(217,164,65,.22), transparent 70%);
    pointer-events:none;
}
.rm-hero__eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(217,164,65,.14);
    border:1px solid rgba(217,164,65,.3);
    color:var(--rm-gold-300);
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.rm-hero h1{
    font-size:clamp(24px, 5vw, 36px);
    line-height:1.12;
    margin:14px 0 8px;
    color:#fff;
}
.rm-hero p{
    max-width:680px;
    color:rgba(246,241,234,.82);
    line-height:1.55;
    font-size:14.5px;
    margin:0;
}
@media (min-width:768px){
    .rm-hero{ padding:34px; }
    .rm-hero p{ font-size:16px; }
}

/* =========================================================
   CARD generica
   ========================================================= */
.rm-card{
    background:var(--rm-surface);
    border:1px solid var(--rm-border);
    border-radius:var(--rm-radius-md);
    padding:16px;
    box-shadow:var(--rm-shadow-sm);
}
@media (min-width:768px){
    .rm-card{ padding:20px; }
}

/* Griglia di card cliccabili (es. homepage) */
.rm-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
@media (min-width:640px){
    .rm-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:1024px){
    .rm-grid{ grid-template-columns:repeat(3, 1fr); gap:16px; }
}

.rm-tile{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px;
    border-radius:var(--rm-radius-md);
    background:var(--rm-surface);
    border:1px solid var(--rm-border);
    text-decoration:none;
    color:var(--rm-text);
    transition:border-color .16s ease, transform .16s ease, background .16s ease;
    min-height:0;
}
.rm-tile:active{ transform:scale(.98); }
@media (hover:hover){
    .rm-tile:hover{
        border-color:rgba(217,164,65,.45);
        background:var(--rm-surface-2);
        transform:translateY(-2px);
    }
}
.rm-tile__icon{
    width:40px; height:40px;
    display:flex; align-items:center; justify-content:center;
    border-radius:10px;
    background:rgba(217,164,65,.12);
    color:var(--rm-gold-400);
    flex-shrink:0;
}
.rm-tile__icon svg{ width:20px; height:20px; }
.rm-tile__tag{
    position:absolute; top:14px; right:14px;
    font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:var(--rm-gold-300);
    background:rgba(217,164,65,.1);
    border:1px solid rgba(217,164,65,.25);
    padding:3px 8px; border-radius:999px;
}
.rm-tile h2{
    font-size:17px;
    margin:0;
    color:#fff;
    padding-right:70px;
}
.rm-tile p{
    margin:0;
    font-size:13.5px;
    line-height:1.5;
    color:var(--rm-text-dim);
}
.rm-tile__go{
    margin-top:auto;
    font-size:12.5px;
    font-weight:700;
    color:var(--rm-gold-400);
    display:inline-flex; align-items:center; gap:4px;
}

/* =========================================================
   BOTTONI
   ========================================================= */
.rm-btn{
    display:inline-flex; align-items:center; justify-content:center;
    gap:8px;
    min-height:44px; /* touch target */
    padding:0 18px;
    border-radius:var(--rm-radius-sm);
    font-weight:700; font-size:14px;
    text-decoration:none;
    border:1px solid transparent;
    cursor:pointer;
    transition:filter .15s ease, transform .15s ease;
}
.rm-btn:active{ transform:scale(.97); }
.rm-btn--primary{
    background:linear-gradient(135deg, var(--rm-gold-500), #c98a2b);
    color:#241705;
}
.rm-btn--ghost{
    background:rgba(255,255,255,.04);
    border-color:var(--rm-border-strong);
    color:var(--rm-text);
}
@media (hover:hover){
    .rm-btn:hover{ filter:brightness(1.08); }
}

/* =========================================================
   KPI STAT
   ========================================================= */
.rm-kpi-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
}
@media (min-width:640px){ .rm-kpi-grid{ grid-template-columns:repeat(4, 1fr); gap:14px; } }
.rm-kpi{
    background:var(--rm-surface);
    border:1px solid var(--rm-border);
    border-radius:var(--rm-radius-md);
    padding:14px;
}
.rm-kpi__label{
    font-size:11px; text-transform:uppercase; letter-spacing:.07em;
    color:var(--rm-text-mute); font-weight:700;
}
.rm-kpi__value{
    font-family:var(--rm-font-num);
    font-size:clamp(18px,4vw,26px);
    font-weight:700;
    margin-top:4px;
    letter-spacing:.02em;
    color:#fff;
}
.rm-kpi__note{ font-size:12px; color:var(--rm-text-mute); margin-top:4px; }
.rm-status-ok{ color:var(--rm-ok); }
.rm-status-warn{ color:var(--rm-warn); }
.rm-status-bad{ color:var(--rm-bad); }

/* =========================================================
   TABELLE — due pattern responsive

   1) .rm-table-scroll  -> per tabelle dati larghe/complesse
      (molte colonne, sort, azioni): scroll orizzontale con
      prima colonna "sticky" + indicatore di scroll.

   2) .rm-table-stack    -> per tabelle semplici chiave/valore
      (poche colonne): sotto i 640px ogni riga diventa una
      mini-card verticale con etichette (data-label).
   ========================================================= */

/* --- pattern 1: scroll con colonna fissa --- */
.rm-table-scroll{
    position:relative;
    border-radius:var(--rm-radius-md);
    border:1px solid var(--rm-border);
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    background:var(--rm-surface);
}
.rm-table-scroll table{
    width:100%;
    min-width:640px;
    border-collapse:collapse;
    font-size:13.5px;
}
.rm-table-scroll th, .rm-table-scroll td{
    padding:11px 12px;
    border-bottom:1px solid var(--rm-border);
    white-space:nowrap;
    text-align:left;
}
.rm-table-scroll thead th{
    position:sticky; top:0;
    background:var(--rm-surface-2);
    color:var(--rm-text-mute);
    font-size:11px; text-transform:uppercase; letter-spacing:.05em;
    z-index:1;
}
.rm-table-scroll tbody tr:last-child td{ border-bottom:0; }
.rm-table-scroll tbody tr:hover{ background:rgba(255,255,255,.02); }
.rm-table-scroll td.num, .rm-table-scroll th.num{
    text-align:right;
    font-family:var(--rm-font-num);
    font-variant-numeric:tabular-nums;
}
/* prima colonna fissa a sinistra, utile su elenchi lunghi (es. nomi giocatori) */
.rm-table-scroll.rm-table-scroll--pin th:first-child,
.rm-table-scroll.rm-table-scroll--pin td:first-child{
    position:sticky; left:0;
    background:var(--rm-surface);
    box-shadow:2px 0 6px rgba(0,0,0,.25);
}
.rm-table-scroll.rm-table-scroll--pin thead th:first-child{
    background:var(--rm-surface-2);
    z-index:2;
}
/* indicatore "scorri" solo mobile */
.rm-table-hint{
    display:flex; align-items:center; gap:6px;
    font-size:12px; color:var(--rm-text-mute);
    margin:6px 2px 10px;
}
@media (min-width:900px){
    .rm-table-hint{ display:none; }
}

/* --- pattern 2: stack a card sotto i 640px --- */
.rm-table-stack{
    width:100%;
    border-collapse:collapse;
    font-size:14px;
}
.rm-table-stack th, .rm-table-stack td{
    padding:11px 10px;
    border-bottom:1px solid var(--rm-border);
    text-align:left;
}
.rm-table-stack thead th{
    color:var(--rm-text-mute);
    font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    font-weight:700;
}
.rm-table-stack td.num, .rm-table-stack th.num{
    text-align:right;
    font-family:var(--rm-font-num);
}
@media (max-width:639px){
    .rm-table-stack thead{ display:none; }
    .rm-table-stack, .rm-table-stack tbody, .rm-table-stack tr, .rm-table-stack td{
        display:block; width:100%;
    }
    .rm-table-stack tr{
        margin-bottom:10px;
        border:1px solid var(--rm-border);
        border-radius:var(--rm-radius-md);
        padding:6px 12px;
        background:var(--rm-surface);
    }
    .rm-table-stack td{
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        border-bottom:1px solid var(--rm-border);
        padding:9px 0;
        text-align:right;
    }
    .rm-table-stack td:last-child{ border-bottom:0; }
    .rm-table-stack td::before{
        content:attr(data-label);
        font-size:11.5px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.04em;
        color:var(--rm-text-mute);
        text-align:left;
    }
}

/* =========================================================
   FILTRI / FORM DI RICERCA
   ========================================================= */
.rm-filter-bar{
    background:var(--rm-surface);
    border:1px solid var(--rm-border);
    border-radius:var(--rm-radius-md);
    padding:14px;
    margin-bottom:16px;
}
.rm-filter-bar form{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}
@media (min-width:700px){
    .rm-filter-bar form{
        grid-template-columns:2fr 1fr 1fr 1fr auto auto;
        align-items:end;
    }
}
.rm-field{ display:flex; flex-direction:column; gap:5px; }
.rm-field label{
    font-size:12px; color:var(--rm-text-mute); font-weight:600;
}
.rm-field input, .rm-field select{
    min-height:42px;
    width:100%;
    border:1px solid var(--rm-border-strong);
    border-radius:var(--rm-radius-sm);
    padding:9px 11px;
    font-size:14px;
    background:var(--rm-bg-soft);
    color:var(--rm-text);
}
.rm-field input:focus, .rm-field select:focus{
    outline:2px solid rgba(217,164,65,.45);
    outline-offset:1px;
}

/* pill di stato */
.rm-pill{
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 10px;
    border-radius:999px;
    font-size:12px; font-weight:700;
    background:rgba(79,174,109,.14);
    color:#8fd6a6;
    border:1px solid rgba(79,174,109,.28);
}
.rm-pill--off{
    background:rgba(193,67,67,.14);
    color:#e6a2a2;
    border-color:rgba(193,67,67,.28);
}
.rm-pill--warn{
    background:rgba(217,154,63,.14);
    color:var(--rm-gold-300);
    border-color:rgba(217,154,63,.3);
}

.rm-action-link{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:34px;
    padding:0 12px;
    border-radius:8px;
    font-size:12.5px; font-weight:700;
    text-decoration:none;
    background:rgba(217,164,65,.12);
    color:var(--rm-gold-300);
    border:1px solid rgba(217,164,65,.25);
}

.rm-empty{
    background:var(--rm-surface);
    border:1px solid var(--rm-border);
    border-radius:var(--rm-radius-md);
    padding:26px 18px;
    text-align:center;
    color:var(--rm-text-mute);
    font-size:14px;
}
.rm-summary{ color:var(--rm-text-mute); font-size:13.5px; margin:0 0 12px; }
.flag-cell{ display:flex; align-items:center; gap:8px; }

.rm-topbar{
    display:flex; flex-direction:column; gap:14px;
    margin-bottom:16px;
}
@media (min-width:700px){
    .rm-topbar{ flex-direction:row; justify-content:space-between; align-items:flex-start; }
}
.rm-topbar h1{ font-size:24px; color:#fff; margin:0 0 4px; }
.rm-topbar .rm-subtitle{ color:var(--rm-text-mute); font-size:13.5px; }

/* =========================================================
   TABBAR MOBILE — navigazione rapida sempre a portata di pollice
   Visibile solo sotto ~1100px, sostituisce l'affidarsi al solo
   drawer per le sezioni più usate.
   ========================================================= */
.rm-tabbar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:1150;
    display:flex;
    background:rgba(20,17,16,.92);
    backdrop-filter:blur(14px);
    border-top:1px solid var(--rm-border-strong);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.rm-tabbar a{
    flex:1;
    display:flex; flex-direction:column; align-items:center; gap:3px;
    padding:6px 2px;
    text-decoration:none;
    color:var(--rm-text-mute);
    font-size:10.5px;
    font-weight:600;
    border-radius:10px;
}
.rm-tabbar a svg{ width:20px; height:20px; }
.rm-tabbar a.is-active{ color:var(--rm-gold-400); }
.rm-tabbar a.is-active svg{ filter:drop-shadow(0 0 6px rgba(217,164,65,.35)); }
@media (min-width:1100px){
    .rm-tabbar{ display:none; }
}