/* ============================================================
   ERA CUSTOMS — overlay sopra il tema Alpino/Bootstrap.
   Applica i token di assets/tokens_customs.css (caricato prima
   di questo file) a navbar, bottoni, link, badge, card — più le
   parti specifiche dell'app non coperte dal tema (già presenti
   prima di questa palette, mantenute qui sotto).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6, .block-header h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    color: var(--text-primary);
}

/* Codici/riferimenti (MRN, prot, DDT) in mono, coerente col family kit */
code, .mono { font-family: 'IBM Plex Mono', monospace; }

/* ---------- Navbar / board scuro ---------- */
.app-navbar {
    background: var(--customs-board);
    padding: 10px 20px;
}
.app-navbar .navbar-brand { display: flex; align-items: center; gap: 10px; color: var(--text-on-dark); font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; }
.app-navbar .navbar-brand img { display: block; }
.app-navbar .nav-link { color: var(--text-on-dark-soft) !important; }
.app-navbar .nav-link:hover { color: var(--text-on-dark) !important; }
.app-navbar .navbar-toggler { color: var(--text-on-dark); border-color: rgba(245,244,240,.3); }
.app-navbar .dropdown-menu { background: var(--customs-board); border: 1px solid var(--customs-secondary); }
.app-navbar .dropdown-item { color: var(--text-on-dark-soft); }
.app-navbar .dropdown-item:hover, .app-navbar .dropdown-item:focus { background: var(--customs-secondary); color: var(--text-on-dark); }
.app-navbar .dropdown-divider { border-color: var(--customs-secondary); }

/* ---------- Bottoni — accent esclusivo, testo SEMPRE Seal Ink (mai bianco, regola 03) ---------- */
.btn-primary {
    background-color: var(--customs-accent) !important;
    border-color: var(--customs-accent) !important;
    color: var(--text-on-accent) !important;
    font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--customs-accent-hover) !important;
    border-color: var(--customs-accent-hover) !important;
    color: var(--text-on-accent) !important;
}
.btn-default {
    background-color: #fff;
    border: 1px solid #ddd6d2;
    color: var(--text-primary);
}
.btn-default:hover { background-color: var(--customs-surface); color: var(--text-primary); }
.btn-danger { background-color: var(--state-error); border-color: var(--state-error); }

/* ---------- Link — mai #FF6037 su testo, sempre Seal Deep (regola 03) ---------- */
a { color: var(--customs-accent-deep); }
a:hover { color: var(--customs-accent-hover); }
.app-navbar a, .site-footer a { color: inherit; }

/* ---------- Card — radius 20px da family kit (regola 08) ---------- */
.card .body, .card .header { border-radius: var(--customs-radius); }
.card .body { box-shadow: 0 1px 3px 0 rgba(53,30,28,0.08); }

/* focus ring in accent, non su testo quindi ok anche puro #FF6037 */
.form-control:focus {
    border-color: var(--customs-accent);
    box-shadow: 0 0 0 3px var(--customs-accent-tint);
}

/* ---------- Alert (successo/attenzione/errore) ---------- */
.alert-success { background: color-mix(in srgb, var(--state-success) 15%, white); color: var(--text-primary); border-color: var(--state-success); }
.alert-danger  { background: color-mix(in srgb, var(--state-error) 15%, white); color: var(--text-primary); border-color: var(--state-error); }
.alert-warning { background: color-mix(in srgb, var(--state-warning) 18%, white); color: var(--text-primary); border-color: var(--state-warning); }

/* ---------- Paginazione ---------- */
.pagination .page-item.active .page-link { background-color: var(--customs-accent); border-color: var(--customs-accent); color: var(--text-on-accent); }
.pagination .page-link { color: var(--customs-accent-deep); }

/* ============================================================
   Parti specifiche dell'app (pattern campo/etichetta, badge di
   stato, login-box, footer, responsive) — badge ricolorati sulla
   palette di stato ERA Customs: sfondo tenue + testo Ink scuro,
   così il contrasto resta AAA anche per il testo piccolo dei
   badge invece di rischiare fondo pieno con testo chiaro (la
   guida segnala "successo AA solo su testo grande": un fondo
   pieno con testo bianco piccolo non passerebbe).
   ============================================================ */

.field { margin-bottom: 10px; font-size: 14px; }
.field .label { color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.field .value { font-size: 15px; color: var(--text-primary); }
.subtitle { color: var(--text-secondary); margin-bottom: 16px; font-size: 14px; }

.badge-CONCLUSA               { background: color-mix(in srgb, var(--state-success) 20%, white); color: var(--text-primary); }
.badge-SCADUTA                { background: color-mix(in srgb, var(--state-error) 18%, white);   color: var(--text-primary); }
.badge-SCADENZA               { background: color-mix(in srgb, var(--state-warning) 20%, white); color: var(--text-primary); }
.badge-EXPORT_SCADUTO_IN_ITALIA { background: var(--customs-accent-tint); color: var(--text-on-accent); }
.badge-NON_RICHIESTA          { background: color-mix(in srgb, var(--customs-info) 40%, white);  color: var(--text-primary); }
.badge-IN_ATTESA              { background: color-mix(in srgb, var(--state-warning) 15%, white); color: var(--text-primary); }
.badge-MANCANTE               { background: color-mix(in srgb, var(--state-error) 18%, white);   color: var(--text-primary); }
.badge-COMODATO               { background: color-mix(in srgb, var(--customs-info) 40%, white);  color: var(--text-primary); }
.badge-NON_PREVISTO           { background: var(--customs-surface); color: var(--text-secondary); }
.badge-NON_MAPPATO            { background: var(--customs-surface); color: var(--text-secondary); }

.login-box { max-width: 380px; margin: 60px auto; }

.filters-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

.site-footer { max-width: 1400px; margin: 24px auto 0; padding: 16px 20px; }
.copyright { float: right; font-size: 12px; color: var(--text-secondary); }
.copyright a { color: var(--text-secondary); }

.upload-list { list-style: none; padding: 0; margin: 0; }
.upload-list li { padding: 8px 0; border-bottom: 1px solid var(--customs-surface); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-hover tbody tr:hover { background: var(--customs-accent-tint); }

/* ===================== Responsivo ===================== */
@media (max-width: 700px) {
    .site-footer { text-align: center; }
    .copyright { float: none; }
    .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table { min-width: 640px; }
}

/* ============================================================
   Menu laterale persistente (sostituisce la navbar orizzontale)
   ============================================================ */

.app-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 260px;
    background: var(--customs-board);
    color: var(--text-on-dark-soft);
    overflow-y: auto;
    z-index: 1000;
    transition: transform .25s ease;
}

.sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px;
    color: var(--text-on-dark);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    border-bottom: 1px solid var(--customs-secondary);
}

.sidebar-user {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--customs-secondary);
    font-size: 13px;
}
.sidebar-user i { font-size: 28px; color: var(--text-on-dark-soft); }
.sidebar-user .nome { color: var(--text-on-dark); font-weight: 600; }
.sidebar-user .ruolo { color: var(--text-on-dark-soft); font-size: 12px; }

.sidebar-menu { list-style: none; margin: 0; padding: 10px 0; }
.sidebar-menu li a {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 20px;
    color: var(--text-on-dark-soft);
    text-decoration: none;
    font-size: 14px;
}
.sidebar-menu li a i { font-size: 18px; width: 20px; text-align: center; }
.sidebar-menu li a:hover { background: var(--customs-secondary); color: var(--text-on-dark); }
.sidebar-menu li.active a { background: var(--customs-accent); color: var(--text-on-accent); font-weight: 600; }

.sidebar-header {
    padding: 16px 20px 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-on-dark-soft);
    opacity: .7;
}

.sidebar-footer-links { border-top: 1px solid var(--customs-secondary); margin-top: 10px; padding-top: 10px; }

.btn-sidebar-toggle {
    position: fixed; top: 12px; left: 12px; z-index: 1100;
    background: var(--customs-board); color: var(--text-on-dark);
    border: none; border-radius: 8px; width: 42px; height: 42px; font-size: 20px;
}

.sidebar-overlay {
    display: none;
    position: fixed; inset: 0; background: rgba(36,21,18,.5);
    z-index: 999;
}

section.content.with-sidebar { margin-left: 260px; transition: margin .25s ease; }

@media (max-width: 991px) {
    .app-sidebar { transform: translateX(-100%); }
    .app-sidebar.aperta { transform: translateX(0); }
    section.content.with-sidebar { margin-left: 0; padding-top: 56px; }
    .sidebar-overlay.visibile { display: block; }
}

/* ============================================================
   Campanello notifiche
   ============================================================ */

.sidebar-user { position: relative; }
.campanello-notifiche { margin-left: auto; }
.campanello-toggle {
    position: relative;
    color: var(--text-on-dark-soft);
    font-size: 20px;
    display: inline-block;
    padding: 4px;
}
.campanello-toggle:hover { color: var(--text-on-dark); }
.badge-campanello {
    position: absolute; top: -4px; right: -4px;
    background: var(--customs-accent); color: var(--text-on-accent);
    border-radius: 50%; font-size: 10px; font-weight: 700;
    min-width: 16px; height: 16px; line-height: 16px; text-align: center; padding: 0 3px;
}

.menu-notifiche {
    width: 320px; max-height: 400px; overflow-y: auto;
    background: #fff; border-radius: var(--customs-radius); border: none;
    box-shadow: 0 4px 20px rgba(53,30,28,.18); padding: 0;
}
.menu-notifiche-header {
    padding: 14px 16px; font-weight: 700; color: var(--text-primary);
    border-bottom: 1px solid var(--customs-surface);
    display: flex; justify-content: space-between; align-items: center;
}
.menu-notifiche-header a { font-size: 12px; font-weight: 400; }
.notifica-item {
    display: block; padding: 10px 16px; border-bottom: 1px solid var(--customs-surface);
    color: var(--text-primary);
}
.notifica-item:hover { background: var(--customs-accent-tint); color: var(--text-primary); }
.notifica-item.non-letta { background: color-mix(in srgb, var(--customs-info) 15%, white); }
.notifica-titolo { font-size: 13px; font-weight: 600; }
.notifica-quando { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.notifica-vuota { padding: 20px; text-align: center; color: var(--text-secondary); font-size: 13px; }

/* ============================================================
   Pagina di login (layout ERA a due colonne)
   ============================================================ */

.authentication { background: var(--customs-board); }
.authentication .company_detail h3,
.authentication .company_detail p { color: var(--text-on-dark-soft); }
.authentication .company_detail .logo { color: var(--text-on-dark); }
.authentication .card-plain .link { color: var(--text-on-dark-soft); display: block; margin-top: 14px; font-size: 12px; text-align: center; }

.allegati-gruppo-titolo {
    font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--text-secondary); margin: 16px 0 4px; padding-bottom: 4px;
    border-bottom: 2px solid var(--customs-accent-tint);
}
.allegati-gruppo-titolo:first-of-type { margin-top: 0; }

.ricerca-nascosta { display: none; }

/* ============================================================
   Menu laterale comprimibile (desktop) — richiesto da Manuela
   per avere più schermo visibile. Stato salvato nel browser.
   ============================================================ */

.btn-comprimi-sidebar {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 18px; right: 12px;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--customs-accent); color: var(--text-on-accent);
    border: none; font-size: 14px; cursor: pointer; z-index: 10;
}

.app-sidebar.compressa { width: 64px; }
.app-sidebar.compressa .sidebar-brand-testo,
.app-sidebar.compressa .sidebar-user > div,
.app-sidebar.compressa .campanello-notifiche,
.app-sidebar.compressa .sidebar-menu li a span,
.app-sidebar.compressa .sidebar-header,
.app-sidebar.compressa .sidebar-footer-links a span {
    display: none;
}
.app-sidebar.compressa .sidebar-menu li a { justify-content: center; }

section.content.with-sidebar.contenuto-espanso { margin-left: 64px; }