/* ============================================================
   CER MAORI — App Design System  (app.css)
   Single source of truth for the unified UI.
   Brand: CER green, modernized. Neutrals: slate.
   Type: DM Sans (UI) + JetBrains Mono (numbers/codes).
   Loaded AFTER style.css so it wins. Drop-in for the legacy
   per-page --admin-* blocks: keeps the same class hooks
   (.sidebar, .nav-link, .stat-card, .main-content, .table…)
   so page JS keeps working untouched.
   ============================================================ */

:root {
    /* ---- Brand green ramp (modernized forest green) ---- */
    --brand-50:  #edf6f0;
    --brand-100: #d3ebda;
    --brand-200: #a8d6b6;
    --brand-300: #72bb89;
    --brand-400: #449a61;
    --brand-500: #2c7a3f;   /* primary — 4.7:1 on white */
    --brand-600: #246834;   /* hover   */
    --brand-700: #1d5529;   /* active  */
    --brand-800: #173f1f;
    --brand-900: #102d17;
    --brand:        var(--brand-500);
    --brand-hover:  var(--brand-600);
    --brand-active: var(--brand-700);
    --brand-bright: #34a853; /* lively accent / success icon */
    --brand-soft:   var(--brand-50);
    --brand-soft-2: var(--brand-100);
    --brand-ring:   rgba(44,122,63,.18);

    /* ---- Neutrals (slate) ---- */
    --bg:          #f3f5f7;
    --surface:     #ffffff;
    --surface-2:   #f6f8fa;   /* hover / subtle fill */
    --surface-3:   #eef1f4;
    --border:      #e3e8ec;
    --border-2:    #d4dbe1;
    --ink:         #15202b;   /* primary text */
    --ink-2:       #54636f;   /* secondary text — 5.7:1 */
    --ink-3:       #7d8a95;   /* muted (icons / large only) */

    /* ---- Dark sidebar ---- */
    --sidebar-bg:        #111b29;
    --sidebar-bg-2:      #0d1622;
    --sidebar-ink:       rgba(255,255,255,.60);
    --sidebar-ink-active:#ffffff;
    --sidebar-hover:     rgba(255,255,255,.07);
    --sidebar-active:    rgba(255,255,255,.11);

    /* ---- Semantic states ---- */
    --green:  var(--brand-500);  --green-dim: rgba(44,122,63,.10);
    --blue:   #2563eb;           --blue-dim:  rgba(37,99,235,.09);
    --amber:  #b45309;           --amber-dim: rgba(180,83,9,.10);
    --red:    #dc2626;           --red-dim:   rgba(220,38,38,.08);
    --purple: #7c3aed;           --purple-dim:rgba(124,58,237,.08);
    --cyan:   #0e7490;           --cyan-dim:  rgba(14,116,144,.09);

    /* ---- Radii ---- */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-pill: 999px;

    /* ---- Elevation ---- */
    --shadow-sm: 0 1px 2px rgba(16,32,24,.05), 0 1px 3px rgba(16,32,24,.04);
    --shadow:    0 2px 6px rgba(16,32,24,.06), 0 4px 14px rgba(16,32,24,.05);
    --shadow-lg: 0 10px 30px rgba(16,32,24,.10), 0 4px 10px rgba(16,32,24,.05);
    --shadow-brand: 0 4px 14px rgba(44,122,63,.30);

    /* ---- Type scale (fixed, product UI) ---- */
    --fs-11: .6875rem; --fs-12: .75rem;  --fs-13: .8125rem; --fs-14: .875rem;
    --fs-15: .9375rem; --fs-16: 1rem;    --fs-18: 1.125rem; --fs-21: 1.3125rem;
    --fs-26: 1.625rem; --fs-32: 2rem;

    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* ---- Motion ---- */
    --ease: cubic-bezier(.4, 0, .2, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    /* ---- Z-scale (semantic) ---- */
    --z-sticky: 100; --z-backdrop: 1040; --z-sidebar: 1045;
    --z-modal: 1055; --z-toast: 1080; --z-tooltip: 1090;

    /* ===== Legacy --admin-* aliases (so old markup keeps working) ===== */
    --admin-bg: var(--bg);
    --admin-surface: var(--surface);
    --admin-surface-hover: var(--surface-2);
    --admin-border: var(--border);
    --admin-border-subtle: var(--surface-3);
    --admin-text: var(--ink);
    --admin-text-secondary: var(--ink-2);
    --admin-text-muted: var(--ink-3);
    --admin-sidebar-bg: var(--sidebar-bg);
    --admin-sidebar-hover: var(--sidebar-hover);
    --admin-sidebar-active: var(--sidebar-active);
    --admin-sidebar-text: var(--sidebar-ink);
    --admin-sidebar-text-active: var(--sidebar-ink-active);
    --admin-green: var(--brand); --admin-green-dim: var(--green-dim);
    --admin-blue: var(--blue);   --admin-blue-dim: var(--blue-dim);
    --admin-amber: var(--amber); --admin-amber-dim: var(--amber-dim);
    --admin-red: var(--red);     --admin-red-dim: var(--red-dim);
    --admin-purple: var(--purple); --admin-purple-dim: var(--purple-dim);
    --admin-cyan: var(--cyan);   --admin-cyan-dim: var(--cyan-dim);
    --admin-radius: var(--radius); --admin-radius-lg: var(--radius-lg); --admin-radius-sm: var(--radius-sm);
    --admin-shadow-sm: var(--shadow-sm); --admin-shadow: var(--shadow); --admin-shadow-lg: var(--shadow-lg);
}

/* ============================================================
   BASE
   ============================================================ */
body.app {
    font-family: var(--font-sans) !important;
    background: var(--bg) !important;
    color: var(--ink);
    font-size: var(--fs-15);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.app *,
.app *::before,
.app *::after { box-sizing: border-box; }

.app ::selection { background: var(--brand-100); color: var(--brand-900); }

.app h1, .app h2, .app h3, .app h4, .app h5, .app h6 {
    color: var(--ink);
    letter-spacing: -.02em;
    font-weight: 700;
}
.app a { color: var(--brand-600); text-decoration: none; }
.app a:hover { color: var(--brand-700); text-decoration: underline; }

.mono, .font-monospace, .app code { font-family: var(--font-mono) !important; }
.app code { font-size: .85em; color: var(--ink-2); background: var(--surface-3);
    padding: .12em .4em; border-radius: 5px; }

.text-muted-2 { color: var(--ink-2) !important; }
.text-ink { color: var(--ink) !important; }

/* Accessible keyboard focus everywhere */
.app :focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
    border-radius: 4px;
}
.app :focus:not(:focus-visible) { outline: none; }

/* Tame the global pill buttons + card hover from style.css */
.app .btn { border-radius: var(--radius-sm); }
.app .card { border-radius: var(--radius); }
.app .card:hover { transform: none; box-shadow: var(--shadow-sm); }

/* Quiet, modern scrollbars */
.app *::-webkit-scrollbar { width: 10px; height: 10px; }
.app *::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
.app *::-webkit-scrollbar-thumb:hover { background: var(--ink-3); border: 3px solid transparent; background-clip: padding-box; }
.app *::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   APP SHELL — sidebar + main
   ============================================================ */
.app-shell { display: flex; min-height: 100vh; align-items: stretch; }

.sidebar {
    width: 248px; min-width: 248px;
    background: var(--sidebar-bg) !important;
    color: #fff;
    display: flex; flex-direction: column;
    position: sticky; top: 0; align-self: flex-start;
    height: 100vh; overflow-y: auto; overflow-x: hidden;
    border-right: 1px solid rgba(255,255,255,.06);
    transition: width .28s var(--ease), min-width .28s var(--ease);
    z-index: var(--z-sidebar);
}
.sidebar.collapsed { width: 76px; min-width: 76px; }
.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-foot-text,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .admin-info-text,
.sidebar.collapsed .logo-section p,
.sidebar.collapsed hr { display: none; }
.sidebar.collapsed .nav-link { padding: .7rem; justify-content: center; }
.sidebar.collapsed .nav-link i { margin: 0 !important; }

/* Brand / logo */
.sidebar .logo-section,
.sidebar .sidebar-brand {
    display: flex; align-items: center; gap: .7rem;
    padding: 3rem 1.1rem 1rem;   /* top clears the fixed .sidebar-toggle */
}
.sidebar.collapsed .logo-section { padding: 3.2rem .6rem 1rem; }
.sidebar .logo-section img,
.sidebar .sidebar-brand img {
    height: 42px; width: 42px; object-fit: cover;
    border-radius: 11px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12);
}
.sidebar.collapsed .logo-section img { margin: 0 auto; }
.sidebar .logo-section h4,
.sidebar .sidebar-brand .brand-name {
    font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
    margin: 0; color: #fff; line-height: 1.1;
}
.sidebar .logo-section p,
.sidebar .sidebar-brand .brand-sub {
    margin: .1rem 0 0; font-size: .66rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.42);
}

.sidebar hr { border-color: rgba(255,255,255,.08) !important; opacity: 1; margin: .35rem .9rem; }

.sidebar-section-label {
    padding: .9rem 1.2rem .3rem;
    font-size: .65rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.34);
}

.sidebar-nav { padding: .3rem .6rem; flex: 1 1 auto; }

.sidebar .nav-link {
    color: var(--sidebar-ink);
    padding: .6rem .8rem; margin: 1px 0;
    border-radius: 9px;
    display: flex; align-items: center; gap: .15rem;
    font-size: var(--fs-14); font-weight: 500;
    white-space: nowrap; cursor: pointer; user-select: none;
    position: relative;
    transition: background .16s var(--ease), color .16s var(--ease);
}
.sidebar .nav-link i { min-width: 20px; font-size: 1.05rem; text-align: center; opacity: .9; }
.sidebar .nav-link:hover { color: var(--sidebar-ink-active); background: var(--sidebar-hover); text-decoration: none; }
.sidebar .nav-link.active {
    color: var(--sidebar-ink-active);
    background: var(--sidebar-active);
    font-weight: 600;
}
.sidebar .nav-link.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 18px; border-radius: 0 3px 3px 0;
    background: var(--brand-bright);
}
.sidebar .nav-link.active i { opacity: 1; color: var(--brand-bright); }

/* 2FA highlighted nav item */
.sidebar .nav-link.nav-2fa {
    color: #fff; background: rgba(52,168,83,.16);
    border: 1px solid rgba(52,168,83,.45); border-radius: 9px; margin-top: 8px;
}
.sidebar .nav-link.nav-2fa:hover { background: rgba(52,168,83,.28); }
.sidebar .nav-link.nav-2fa::before { display: none; }
.sidebar .nav-link.nav-2fa .badge-2fa {
    font-size: .58rem; background: var(--brand-bright); color: #06210f;
    font-weight: 700; padding: 2px 6px; border-radius: 999px; margin-left: auto;
}

/* Sidebar footer (admin info + logout) */
.sidebar-foot { padding: .7rem .85rem 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.sidebar .admin-info { color: var(--sidebar-ink); font-size: .76rem; line-height: 1.35; }
.sidebar .admin-info i { opacity: .5; }
.sidebar .btn-logout, .sidebar .btn-logout.btn {
    width: 100%; border: 1px solid rgba(255,255,255,.14) !important;
    color: rgba(255,255,255,.66) !important; background: transparent !important;
    font-size: .82rem; font-weight: 500;
    border-radius: 9px !important; padding: .5rem .8rem !important;
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    transition: all .18s var(--ease);
}
.sidebar .btn-logout:hover {
    background: rgba(220,38,38,.16) !important; border-color: rgba(220,38,38,.4) !important;
    color: #fca5a5 !important;
}

/* Floating sidebar toggle (kept for legacy onclick="toggleSidebar()") */
.sidebar-toggle {
    position: fixed; top: 13px; left: 13px; z-index: 1050;
    background: rgba(17,27,41,.7); border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.85); width: 34px; height: 34px;
    border-radius: 9px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(10px); transition: all .18s var(--ease);
}
.sidebar-toggle:hover { background: rgba(17,27,41,.92); color: #fff; }

/* Mobile sidebar */
.sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(10,18,28,.5);
    backdrop-filter: blur(2px); z-index: var(--z-backdrop);
    opacity: 0; visibility: hidden; transition: opacity .25s var(--ease);
}
.sidebar-backdrop.show { opacity: 1; visibility: visible; }

/* ---- Main content column ---- */
.main-content, .app-main {
    flex: 1 1 auto; min-width: 0;
    background: var(--bg); min-height: 100vh;
    display: flex; flex-direction: column;
}
.app-content { padding: 1.6rem 1.9rem 3rem; max-width: 1480px; width: 100%; margin: 0 auto; }

/* ============================================================
   TOPBAR + BREADCRUMB + PAGE HEADER
   ============================================================ */
.app-topbar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: flex; align-items: center; gap: 1rem;
    padding: .7rem 1.9rem;
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.app-topbar .topbar-title { font-size: var(--fs-16); font-weight: 700; letter-spacing: -.01em; }
.app-topbar .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.breadcrumb-nav { display: flex; align-items: center; flex-wrap: wrap; gap: .15rem; font-size: var(--fs-13); }
.breadcrumb-nav a { color: var(--ink-2); font-weight: 500; }
.breadcrumb-nav a:hover { color: var(--brand-600); text-decoration: none; }
.breadcrumb-nav .crumb-sep { color: var(--ink-3); margin: 0 .15rem; }
.breadcrumb-nav .crumb-current { color: var(--ink); font-weight: 600; }

/* Page header inside content */
.page-head {
    display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.4rem;
}
.page-head .page-head-main { min-width: 0; }
.page-head h1, .page-head h2 {
    font-size: var(--fs-26); font-weight: 700; letter-spacing: -.025em; margin: 0;
    display: flex; align-items: center; gap: .6rem;
}
.page-head h1 i, .page-head h2 i { color: var(--brand); font-size: .9em; }
.page-head .page-sub { margin: .3rem 0 0; color: var(--ink-2); font-size: var(--fs-14); }
.page-head .page-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* Detail-page header bar (for pratica/configurazione detail) */
.detail-top {
    background: linear-gradient(120deg, var(--sidebar-bg), var(--sidebar-bg-2));
    color: #fff; position: sticky; top: 0; z-index: var(--z-sticky);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.detail-top-inner {
    max-width: 1480px; margin: 0 auto;
    padding: .65rem 1.9rem; display: flex; align-items: center; gap: 1rem;
}
.detail-top .detail-back {
    display: inline-flex; align-items: center; gap: .45rem;
    color: rgba(255,255,255,.8); font-weight: 600; font-size: var(--fs-14);
    padding: .35rem .7rem; border-radius: 8px; border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.04); transition: all .16s var(--ease);
}
.detail-top .detail-back:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.detail-top .detail-crumbs { display: flex; align-items: center; gap: .3rem; font-size: var(--fs-13); color: rgba(255,255,255,.6); }
.detail-top .detail-crumbs a { color: rgba(255,255,255,.78); }
.detail-top .detail-crumbs a:hover { color: #fff; text-decoration: none; }
.detail-top .detail-crumbs .crumb-current { color: #fff; font-weight: 600; }
.detail-top .detail-top-actions { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.detail-top .brand-chip { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.85); font-weight: 600; font-size: var(--fs-13); }
.detail-top .brand-chip i { color: var(--brand-bright); }

/* ============================================================
   BUTTONS
   ============================================================ */
.app .btn {
    border-radius: var(--radius-sm) !important;
    font-weight: 600; font-size: var(--fs-14);
    padding: .5rem 1rem; letter-spacing: -.01em;
    display: inline-flex; align-items: center; gap: .45rem; justify-content: center;
    transition: background .16s var(--ease), border-color .16s var(--ease),
                box-shadow .16s var(--ease), transform .12s var(--ease), color .16s var(--ease);
}
.app .btn:active { transform: translateY(.5px); }
.app .btn-lg { font-size: var(--fs-16); padding: .7rem 1.3rem; }
.app .btn-sm { font-size: var(--fs-13); padding: .35rem .7rem; }
.app .btn i { font-size: 1.05em; }

/* Primary brand action */
.app .btn-success, .app .btn-brand {
    background: var(--brand-500); border-color: var(--brand-500); color: #fff;
}
.app .btn-success:hover, .app .btn-brand:hover {
    background: var(--brand-600); border-color: var(--brand-600); color: #fff;
    box-shadow: var(--shadow-brand); transform: translateY(-1px);
}
.app .btn-success:active, .app .btn-brand:active { background: var(--brand-700); border-color: var(--brand-700); }

.app .btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.app .btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; box-shadow: 0 4px 14px rgba(37,99,235,.28); transform: translateY(-1px); }

.app .btn-danger { background: var(--red); border-color: var(--red); }
.app .btn-danger:hover { background: #b91c1c; border-color: #b91c1c; transform: translateY(-1px); }

.app .btn-warning { background: var(--amber); border-color: var(--amber); color: #fff; }
.app .btn-warning:hover { background: #92400e; border-color: #92400e; color: #fff; transform: translateY(-1px); }

.app .btn-secondary { background: var(--ink-2); border-color: var(--ink-2); color: #fff; }
.app .btn-secondary:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-1px); }

/* Outline + ghost */
.app .btn-outline-success, .app .btn-outline-brand { color: var(--brand-600); border-color: var(--border-2); background: var(--surface); }
.app .btn-outline-success:hover, .app .btn-outline-brand:hover { background: var(--brand-50); border-color: var(--brand-400); color: var(--brand-700); }
.app .btn-outline-primary { color: var(--blue); border-color: var(--border-2); background: var(--surface); }
.app .btn-outline-primary:hover { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
.app .btn-outline-secondary { color: var(--ink-2); border-color: var(--border-2); background: var(--surface); }
.app .btn-outline-secondary:hover { background: var(--surface-2); border-color: var(--border-2); color: var(--ink); }
.app .btn-outline-danger { color: var(--red); border-color: var(--border-2); background: var(--surface); }
.app .btn-outline-danger:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.app .btn-light { background: var(--surface); border-color: var(--border); color: var(--ink); }
.app .btn-light:hover { background: var(--surface-2); border-color: var(--border-2); }
.app .btn-link { color: var(--brand-600); font-weight: 600; }

/* Icon-only button */
.btn-icon { width: 36px; height: 36px; padding: 0 !important; }

/* ============================================================
   CARDS / PANELS / SURFACES
   ============================================================ */
.app .card, .surface-card {
    border: 1px solid var(--border);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
}
.app .card .card-header {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--border);
    padding: .9rem 1.25rem;
}
.app .card .card-header h5, .app .card .card-header h6 { font-weight: 700; font-size: var(--fs-15); margin: 0; letter-spacing: -.01em; }
.app .card .card-body { padding: 1.25rem; }

.panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.panel-head { padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .6rem; }
.panel-head h2, .panel-head h3, .panel-head h5 { font-size: var(--fs-15); font-weight: 700; margin: 0; }
.panel-body { padding: 1.25rem; }

/* ============================================================
   STAT CARDS  (legacy .stat-card hook)
   ============================================================ */
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--brand-500);
}
.stat-card.border-start.border-warning::before { background: var(--amber); }
.stat-card.border-start.border-info::before { background: var(--cyan); }
.stat-card.border-start.border-primary::before { background: var(--blue); }
.stat-card.border-start.border-success::before { background: var(--brand-500); }
.stat-card.border-start.border-danger::before { background: var(--red); }
.stat-card.border-start.border-secondary::before { background: var(--ink-3); }
.stat-card.border-start { border-left-color: var(--border) !important; }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2) !important; }
.stat-card .card-body h6 {
    font-size: var(--fs-12); font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-2) !important; margin-bottom: .35rem;
}
.stat-card .card-body h2, .stat-card .card-body h3,
.stat-card .stat-value {
    font-weight: 700; letter-spacing: -.02em; font-family: var(--font-mono); color: var(--ink);
}
.stat-card.is-clickable { cursor: pointer; }
.stat-card.filter-active { outline: 2px solid var(--brand-400); outline-offset: -1px; background: var(--brand-50); }
.stat-card.filter-dimmed { opacity: .5; }

/* ============================================================
   TABLES
   ============================================================ */
.app .table { font-size: var(--fs-14); margin-bottom: 0; color: var(--ink); }
.app .table thead th {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    border-top: none;
    font-weight: 600; font-size: var(--fs-12);
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-2); padding: .7rem 1rem; white-space: nowrap;
}
.app .table tbody td {
    padding: .72rem 1rem; vertical-align: middle;
    border-bottom: 1px solid var(--surface-3); color: var(--ink);
}
.app .table tbody tr { transition: background .14s var(--ease); }
.app .table-hover tbody tr:hover { background: var(--surface-2); }
.app .table code { background: var(--surface-3); }
.user-row, .clickable-row { cursor: pointer; }
.user-row:hover, .clickable-row:hover { background: var(--surface-2); }

/* ============================================================
   BADGES / STATUS PILLS
   ============================================================ */
.app .badge {
    font-weight: 600; font-size: var(--fs-12); letter-spacing: .01em;
    padding: .36em .68em; border-radius: 7px;
}
.pill {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 600; font-size: var(--fs-12);
    padding: .28em .65em; border-radius: 999px;
    background: var(--surface-3); color: var(--ink-2);
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green  { background: var(--green-dim);  color: var(--brand-600); }
.pill-blue   { background: var(--blue-dim);   color: var(--blue); }
.pill-amber  { background: var(--amber-dim);  color: var(--amber); }
.pill-red    { background: var(--red-dim);    color: var(--red); }
.pill-purple { background: var(--purple-dim); color: var(--purple); }
.pill-cyan   { background: var(--cyan-dim);   color: var(--cyan); }
.pill-gray   { background: var(--surface-3);  color: var(--ink-2); }

/* Legacy status badges (keep mapping; refresh colors) */
.badge-pending             { background: var(--amber-dim)  !important; color: var(--amber)  !important; }
.badge-documents_uploaded  { background: var(--cyan-dim)   !important; color: var(--cyan)   !important; }
.badge-documents_validated { background: var(--purple-dim) !important; color: var(--purple) !important; }
.badge-ready_to_sign       { background: var(--blue-dim)   !important; color: var(--blue)   !important; }
.badge-signed              { background: var(--green-dim)  !important; color: var(--brand-600) !important; }
.badge-active              { background: var(--green-dim)  !important; color: var(--brand-600) !important; }
.badge-rejected            { background: var(--red-dim)    !important; color: var(--red)    !important; }
.badge-annullato           { background: var(--red-dim)    !important; color: var(--red)    !important; }

/* ============================================================
   FORMS
   ============================================================ */
.app .form-control, .app .form-select {
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    font-size: var(--fs-14); padding: .55rem .8rem;
    background: var(--surface); color: var(--ink);
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.app .form-control::placeholder { color: var(--ink-3); }
.app .form-control:focus, .app .form-select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-ring);
}
.app .form-control-lg { font-size: var(--fs-16); padding: .7rem 1rem; }
.app .form-label {
    font-weight: 600; font-size: var(--fs-13); color: var(--ink-2);
    margin-bottom: .35rem;
}
.app .form-label.uppercase { text-transform: uppercase; letter-spacing: .04em; font-size: var(--fs-12); }
.app .input-group-text {
    background: var(--surface-2); border: 1px solid var(--border-2);
    font-size: var(--fs-13); color: var(--ink-2); border-radius: var(--radius-sm);
}
.app .form-check-input:checked { background-color: var(--brand-500); border-color: var(--brand-500); }
.app .form-check-input:focus { border-color: var(--brand-400); box-shadow: 0 0 0 3px var(--brand-ring); }

/* ============================================================
   ALERTS
   ============================================================ */
.app .alert { border-radius: var(--radius); font-size: var(--fs-14); border: 1px solid transparent; }
.app .alert-success { background: var(--green-dim); border-color: rgba(44,122,63,.18); color: var(--brand-700); }
.app .alert-info    { background: var(--blue-dim);  border-color: rgba(37,99,235,.16); color: #1e40af; }
.app .alert-warning { background: var(--amber-dim); border-color: rgba(180,83,9,.2);  color: #92400e; }
.app .alert-danger  { background: var(--red-dim);   border-color: rgba(220,38,38,.18); color: #991b1b; }

/* ============================================================
   MODALS
   ============================================================ */
.app .modal-content { border: none; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg); }
.app .modal-header { border-bottom: 1px solid var(--border); padding: 1.1rem 1.5rem; }
.app .modal-header .modal-title { font-weight: 700; font-size: var(--fs-16); }
.app .modal-body { padding: 1.5rem; }
.app .modal-footer { border-top: 1px solid var(--border); padding: 1rem 1.5rem; gap: .5rem; }
.app .modal-header.bg-success, .app .modal-header.bg-primary, .app .modal-header.bg-info { border-bottom: none; color: #fff; }
.app .modal-header.bg-success { background: linear-gradient(120deg, var(--brand-600), var(--brand-500)) !important; }
.app .modal-header.bg-primary { background: linear-gradient(120deg, #1d4ed8, var(--blue)) !important; }
.app .modal-header.bg-info { background: linear-gradient(120deg, #155e75, var(--cyan)) !important; }
.app .modal-header.bg-success .btn-close, .app .modal-header.bg-primary .btn-close, .app .modal-header.bg-info .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* ============================================================
   EMPTY STATES
   ============================================================ */
.empty-state { text-align: center; padding: 3.2rem 1.5rem; color: var(--ink-2); }
.empty-state .empty-icon {
    width: 64px; height: 64px; margin: 0 auto 1rem;
    display: grid; place-items: center; border-radius: 18px;
    background: var(--brand-50); color: var(--brand-500); font-size: 1.8rem;
}
.empty-state h3 { font-size: var(--fs-18); color: var(--ink); margin: 0 0 .35rem; }
.empty-state p { margin: 0 auto; max-width: 42ch; font-size: var(--fs-14); }

/* ============================================================
   SPINNERS
   ============================================================ */
.app .spinner-border, .app .spinner-grow { color: var(--brand-500); }

/* ============================================================
   BACK-OFFICE COMPAT  (legacy markup that pre-dates app.css)
   ============================================================ */
/* View headers used across admin/configurazioni views */
.app .main-content h2 { font-size: var(--fs-21); font-weight: 700; letter-spacing: -.02em; }
.app .main-content h2 i { color: var(--brand); opacity: 1; }
.app .main-content h5 { letter-spacing: -.01em; }

/* Semantic text colours (Bootstrap defaults are too light on white) */
.app .text-success { color: var(--brand-600) !important; }
.app .text-warning { color: var(--amber) !important; }
.app .text-info    { color: var(--cyan) !important; }
.app .text-primary { color: var(--blue) !important; }
.app .text-danger  { color: var(--red) !important; }
.app .text-muted   { color: var(--ink-2) !important; }
.app .text-dark    { color: var(--ink) !important; }

/* Summary / KPI gradient cards (referenti, dashboard) */
.app .card.bg-primary, .app .card.bg-success, .app .card.bg-warning,
.app .card.bg-secondary, .app .card.bg-info, .app .card.bg-danger {
    border: none !important; border-radius: var(--radius) !important; color: #fff;
}
.app .card.bg-primary   { background: linear-gradient(135deg, #1d4ed8, var(--blue)) !important; }
.app .card.bg-success   { background: linear-gradient(135deg, var(--brand-700), var(--brand-500)) !important; }
.app .card.bg-warning   { background: linear-gradient(135deg, #92400e, var(--amber)) !important; }
.app .card.bg-info      { background: linear-gradient(135deg, #155e75, var(--cyan)) !important; }
.app .card.bg-secondary { background: linear-gradient(135deg, #374151, #4b5563) !important; }
.app .card.bg-danger    { background: linear-gradient(135deg, #991b1b, var(--red)) !important; }
.app .card.bg-primary *, .app .card.bg-success *, .app .card.bg-warning *,
.app .card.bg-secondary *, .app .card.bg-info *, .app .card.bg-danger * { color: #fff !important; }
.app .card.bg-primary h2, .app .card.bg-primary h3,
.app .card.bg-success h2, .app .card.bg-success h3,
.app .card.bg-warning h2, .app .card.bg-warning h3,
.app .card.bg-secondary h2, .app .card.bg-secondary h3,
.app .card.bg-info h2, .app .card.bg-info h3,
.app .card.bg-danger h2, .app .card.bg-danger h3 { font-family: var(--font-mono); font-weight: 700; }
.app .card.bg-primary small, .app .card.bg-success small, .app .card.bg-warning small,
.app .card.bg-secondary small, .app .card.bg-info small, .app .card.bg-danger small { opacity: .88; font-weight: 500; }

/* Bootstrap solid badges → keep readable on the new palette */
.app .badge.bg-warning { color: #4a2c06 !important; }

/* ---- Configurazioni CER (shared: list + detail) ---- */
.badge-attiva          { background: var(--green-dim) !important;  color: var(--brand-600) !important; }
.badge-in_attivazione  { background: var(--blue-dim) !important;   color: var(--blue) !important; }
.badge-in_attesa       { background: var(--amber-dim) !important;  color: var(--amber) !important; }
.badge-sospesa         { background: var(--red-dim) !important;    color: var(--red) !important; }
.badge-non_attivabile  { background: var(--surface-3) !important;  color: var(--ink-2) !important; }

.app .config-card {
    cursor: pointer; background: var(--surface);
    border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.app .config-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-500); }
.app .config-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2) !important; }
.app .config-card h5 { font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }

.stat-box {
    padding: .75rem; border-radius: var(--radius-sm); text-align: center;
    background: var(--surface-2); border: 1px solid var(--surface-3);
}
.stat-box .fw-bold { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink); }
.stat-box .small { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }

.app #statsCards .card {
    border: 1px solid var(--border) !important; border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.app #statsCards .card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2) !important; }
.app #statsCards .card p.text-muted { font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.app #statsCards .card h3 { font-family: var(--font-mono); font-weight: 700; letter-spacing: -.02em; }
.app #statsCards .card .fs-1 { font-size: 1.7rem !important; }
.app #statsCards .card.border-dark { border-color: var(--brand-500) !important; outline: 1px solid var(--brand-400); }

/* ============================================================
   MEMBER AREA — lighter, warmer variant
   (apply class .app-member on body, in addition to .app)
   ============================================================ */
body.app-member {
    background:
        radial-gradient(1100px 480px at 100% -8%, #eaf5ee 0%, transparent 60%),
        radial-gradient(900px 420px at -5% 0%, #eef6f1 0%, transparent 55%),
        var(--bg) !important;
}
.app-member .member-topbar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: rgba(255,255,255,.85); backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
}
.app-member .member-topbar .navbar-brand { color: var(--ink) !important; font-weight: 700; }
.app-member .card { border-radius: var(--radius-lg) !important; }
.app-member .panel { border-radius: var(--radius-lg); }
.member-hero {
    background: linear-gradient(125deg, var(--brand-700), var(--brand-500) 70%, var(--brand-bright));
    color: #fff; border-radius: var(--radius-lg);
    padding: 1.6rem 1.8rem; box-shadow: var(--shadow);
    position: relative; overflow: hidden;
}
.member-hero::after {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%);
    pointer-events: none;
}
.member-hero h1 { color: #fff; font-size: var(--fs-26); margin: 0; }
.member-hero p { color: rgba(255,255,255,.85); margin: .3rem 0 0; }

/* ============================================================
   AUTH PAGES (login / reset)
   ============================================================ */
body.app-auth {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(52,168,83,.14), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(44,122,63,.12), transparent 55%),
        var(--bg) !important;
}

/* ============================================================
   UTILITIES
   ============================================================ */
.text-brand { color: var(--brand-600) !important; }
.bg-brand { background: var(--brand-500) !important; }
.shadow-soft { box-shadow: var(--shadow) !important; }
.divider { height: 1px; background: var(--border); border: 0; margin: 1.25rem 0; }
.stack-sm > * + * { margin-top: .6rem; }

/* ============================================================
   MOTION — entrances
   ============================================================ */
@keyframes appFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes appFade { from { opacity: 0; } to { opacity: 1; } }
.view-container, .anim-in { animation: appFadeUp .32s var(--ease-out) both; }
.anim-fade { animation: appFade .3s var(--ease) both; }
.stagger > * { animation: appFadeUp .4s var(--ease-out) both; }
.stagger > *:nth-child(1){animation-delay:.02s}.stagger > *:nth-child(2){animation-delay:.06s}
.stagger > *:nth-child(3){animation-delay:.10s}.stagger > *:nth-child(4){animation-delay:.14s}
.stagger > *:nth-child(5){animation-delay:.18s}.stagger > *:nth-child(6){animation-delay:.22s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
    .sidebar {
        position: fixed; left: 0; top: 0; height: 100vh;
        transform: translateX(-100%); transition: transform .28s var(--ease);
        width: 264px; min-width: 264px;
    }
    .sidebar.show { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .sidebar.collapsed { transform: translateX(-100%); width: 264px; min-width: 264px; }
    .app-content { padding: 1.1rem 1.1rem 2.4rem; }
    .app-topbar { padding-left: 3.6rem; }
    .detail-top-inner { padding: .6rem 1rem; }
}
@media (max-width: 576px) {
    .page-head h1, .page-head h2 { font-size: var(--fs-21); }
    .app-content { padding: .9rem .85rem 2rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .app *, .app *::before, .app *::after {
        animation-duration: .001ms !important; animation-iteration-count: 1 !important;
        transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
    .view-container, .anim-in, .anim-fade, .stagger > * { animation: none !important; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .sidebar, .sidebar-toggle, .app-topbar, .detail-top .detail-top-actions,
    .gdpr-notice, .notification-overlay { display: none !important; }
    .app-content { padding: 0; }
    body.app { background: #fff !important; }
}