/* ============================================================
   Pmus Web — Design system (Satoshi + iftech blue)
   Primary brand: #0582CA  ·  Secondary: #2E3A6B / #56AEBD
   ============================================================ */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700,800&display=swap');

:root {
    /* Surfaces */
    --bg:               #F6F8FB;
    --surface:          #FFFFFF;
    --surface-2:        #EEF2F7;     /* light grey #E8EDF3 mixed for less contrast */
    --surface-3:        #E2E7EE;

    /* Typography (Midnight ink + neutrals derived from light grey) */
    --text:             #232323;     /* midnight */
    --text-secondary:   #404550;
    --text-tertiary:    #6B7280;
    --text-quaternary:  #98A0AB;

    /* Lines */
    --line:             rgba(35, 42, 55, .09);
    --line-strong:      rgba(35, 42, 55, .16);

    /* Brand */
    --blue:             #0582CA;     /* primary */
    --blue-700:         #036B9E;     /* hover/pressed */
    --blue-800:         #024F77;
    --indigo:           #2E3A6B;     /* dark blue (secondary) */
    --aqua:             #56AEBD;     /* aqua (secondary) */
    --aqua-700:         #3F94A4;
    --teal:             #56AEBD;     /* alias aqua */
    --mint:             #56AEBD;
    --cyan:             #56AEBD;
    --midnight:         #232323;
    --light-grey:       #E8EDF3;

    /* Status accents */
    --red:              #FF5154;     /* danger */
    --red-700:          #E03A3D;
    --orange:           #F47C3D;     /* warning (30 gg) */
    --orange-700:       #D86528;
    --yellow:           #FCBF49;     /* attention (90 gg) */
    --yellow-700:       #D89C29;
    --yellow-light:     #FCFB49;
    --green:            #1DD15E;     /* success */
    --green-700:        #14A549;
    --purple:           #9D4EDD;     /* tertiary */
    --purple-700:       #7E36BC;
    --pink:             #FF5154;
    --gray:             #6B7280;

    /* Soft tinted backgrounds for chips/pills/badges */
    --blue-soft:        rgba(5, 130, 202, .10);
    --blue-soft-2:      rgba(5, 130, 202, .18);
    --indigo-soft:      rgba(46, 58, 107, .10);
    --aqua-soft:        rgba(86, 174, 189, .14);
    --teal-soft:        rgba(86, 174, 189, .14);
    --green-soft:       rgba(29, 209, 94, .12);
    --orange-soft:      rgba(244, 124, 61, .14);
    --red-soft:         rgba(255, 81, 84, .12);
    --yellow-soft:      rgba(252, 191, 73, .18);
    --purple-soft:      rgba(157, 78, 221, .12);
    --gray-soft:        rgba(107, 114, 128, .12);

    /* Shadows: soft, low offset, large blur */
    --shadow-1:  0 1px 2px rgba(15, 23, 42, .05);
    --shadow-2:  0 4px 14px -4px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);
    --shadow-3:  0 14px 32px -10px rgba(15, 23, 42, .12), 0 4px 10px -4px rgba(15, 23, 42, .06);
    --shadow-pop: 0 26px 60px -14px rgba(15, 23, 42, .22);

    /* Radii — concentricity scale (multipli di 4): 4 / 8 / 12 / 16 / 20 / 28
       Convenzione:
       - badge / pill: 8 (--r-1)
       - bottoni / input: 12 (--r-2)
       - card / paper: 16 (--r-3)
       - modali / contenitori grandi: 20 (--r-4)
       - hero / brand surface: 28 (--r-5) */
    --r-1:   8px;
    --r-2:  12px;
    --r-3:  16px;
    --r-4:  20px;
    --r-5:  28px;

    /* Spacing scale (multipli di 8) */
    --s-1:   4px;
    --s-2:   8px;
    --s-3:  16px;
    --s-4:  24px;
    --s-5:  32px;
    --s-6:  40px;

    /* Brand gradient: primary → dark blue (sober, premium) */
    --grad-brand:   linear-gradient(135deg, #0582CA 0%, #2E3A6B 100%);
    --grad-success: linear-gradient(135deg, #1DD15E 0%, #56AEBD 100%);
    --grad-warm:    linear-gradient(135deg, #F47C3D 0%, #FF5154 100%);
}

/* ============================================================
   Base
   ============================================================ */
html, body {
    font-family: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: 'ss01', 'ss02', 'cv11';
    letter-spacing: -.005em;
}

::selection { background: rgba(5, 130, 202, .22); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(35, 42, 55, .14); border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box;
    transition: background-color .15s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(35, 42, 55, .26); border: 2px solid transparent; background-clip: content-box;
}
* { scrollbar-color: rgba(35, 42, 55, .22) transparent; scrollbar-width: thin; }

code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

/* ============================================================
   Page chrome
   ============================================================ */
.page-fade { animation: page-fade .28s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes page-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}


.page-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 24px; gap: 16px; flex-wrap: wrap;
}
.page-title {
    font-size: 28px; font-weight: 700; letter-spacing: -.022em;
    margin: 0; line-height: 1.15; color: var(--text);
}
.page-subtitle {
    color: var(--text-tertiary); margin-top: 4px;
    font-size: 13.5px; line-height: 1.5;
}

/* Section heading */
.section-h {
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-tertiary);
    margin: 0 0 12px;
}

/* Breadcrumb */
.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-tertiary);
}
.breadcrumb .bc-link {
    color: var(--text-tertiary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background .15s, color .15s;
}
.breadcrumb .bc-link:hover { background: var(--surface-2); color: var(--blue); }
.breadcrumb .bc-sep {
    font-size: 16px !important;
    color: var(--text-quaternary);
    user-select: none;
}
.breadcrumb .bc-current {
    color: var(--text); font-weight: 600;
    padding: 4px 8px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 360px;
}

/* ============================================================
   Cards (Apple-style)
   ============================================================ */
.section-card, .mud-paper {
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-3) !important;     /* 16 — concentric with 12px button inside */
    box-shadow: var(--shadow-1) !important;
    transition: box-shadow .35s cubic-bezier(.16, 1, .3, 1),
                border-color .25s ease,
                transform .25s cubic-bezier(.16, 1, .3, 1);
}
.mud-paper.mud-elevation-1 { box-shadow: var(--shadow-1) !important; }
.mud-paper.mud-elevation-2 { box-shadow: var(--shadow-2) !important; }
.mud-paper.mud-elevation-3 { box-shadow: var(--shadow-3) !important; }
/* Filter / toolbar paper inherits the paper radius too */
.mud-paper.toolbar-paper { border-radius: var(--r-3) !important; }

/* ============================================================
   KPI Cards
   ============================================================ */
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    padding: 22px 24px;
    height: 100%;
    position: relative; overflow: hidden;
    transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .2s, border-color .2s;
    animation: kpi-pop .45s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes kpi-pop {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
    border-color: rgba(5, 130, 202, .25);
}

.kpi-card .kpi-label {
    font-size: 12px; font-weight: 600; letter-spacing: -.005em;
    color: var(--text-tertiary);
}
.kpi-card .kpi-value {
    font-size: 36px; font-weight: 700; line-height: 1.05; margin-top: 8px;
    letter-spacing: -.03em; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.kpi-card .kpi-prefix { font-size: 22px; font-weight: 600; color: var(--text-tertiary); margin-right: 4px; vertical-align: 5px; }
.kpi-card .kpi-trend { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; line-height: 1.4; }
.kpi-card .kpi-icon-wrap {
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.kpi-card .kpi-card-head { display: flex; align-items: flex-start; justify-content: space-between; }

/* Accent left bars for KPI variants */
.kpi-accent-blue   .kpi-icon-wrap { background: var(--blue-soft);   color: var(--blue); }
.kpi-accent-indigo .kpi-icon-wrap { background: var(--indigo-soft); color: var(--indigo); }
.kpi-accent-green  .kpi-icon-wrap { background: var(--green-soft);  color: var(--green); }
.kpi-accent-orange .kpi-icon-wrap { background: var(--orange-soft); color: var(--orange); }
.kpi-accent-red    .kpi-icon-wrap { background: var(--red-soft);    color: var(--red); }
.kpi-accent-purple .kpi-icon-wrap { background: var(--purple-soft); color: var(--purple); }
.kpi-accent-teal   .kpi-icon-wrap { background: var(--teal-soft);   color: var(--teal); }
.kpi-accent-gray   .kpi-icon-wrap { background: var(--gray-soft);   color: var(--gray); }

.kpi-pulse {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--pulse, var(--red));
    margin-left: 10px; vertical-align: middle;
    animation: kpi-pulse 1.6s ease-out infinite;
}
@keyframes kpi-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 81, 84, .55); }
    70%  { box-shadow: 0 0 0 10px rgba(255, 81, 84, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 81, 84, 0); }
}

/* ============================================================
   Pills / Badges — sober, professional, business gestionale
   Radius 8 (--r-1) per concentricità con bottoni 12 e card 16.
   ============================================================ */
.pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    padding: 3px 9px;
    border-radius: var(--r-1);     /* 8 */
    white-space: nowrap;
    line-height: 1.55;
    border: 1px solid transparent;
}
.pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 999px;
    background: currentColor; opacity: .85; flex-shrink: 0;
}
.pill-active   { background: var(--green-soft);   color: var(--green-700);  border-color: rgba(20,165,73,.20); }
.pill-demo     { background: var(--purple-soft);  color: var(--purple-700); border-color: rgba(126,54,188,.20); }
.pill-waiting  { background: var(--orange-soft);  color: var(--orange-700); border-color: rgba(216,101,40,.20); }
.pill-expired  { background: var(--red-soft);     color: var(--red-700);    border-color: rgba(224,58,61,.20); }
.pill-disabled { background: var(--gray-soft);    color: var(--text-secondary); border-color: rgba(107,114,128,.20); }
.pill-unknown  { background: var(--gray-soft);    color: var(--text-tertiary); border-color: rgba(107,114,128,.18); }

/* Tone-only badges (no dot, opzionale icona) */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: var(--r-1);
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    line-height: 1.55; border: 1px solid transparent;
}
.badge .material-icons { font-size: 13px; }
.badge-danger  { background: var(--red-soft);    color: var(--red-700);    border-color: rgba(224,58,61,.20); }
.badge-warning { background: var(--orange-soft); color: var(--orange-700); border-color: rgba(216,101,40,.20); }
.badge-attn    { background: var(--yellow-soft); color: var(--yellow-700); border-color: rgba(216,156,41,.28); }
.badge-info    { background: var(--blue-soft);   color: var(--blue-700);   border-color: rgba(3,107,158,.20); }
.badge-success { background: var(--green-soft);  color: var(--green-700);  border-color: rgba(20,165,73,.20); }
.badge-neutral { background: var(--gray-soft);   color: var(--text-secondary); border-color: rgba(107,114,128,.18); }

.text-expiring-soon { color: var(--orange-700); font-weight: 600; }
.text-expired       { color: var(--red-700);    font-weight: 700; }

/* ============================================================
   Product version badges — colore univoco per famiglia di prodotto:
   Plus (azzurro), Admin (magenta), Flow (giallo).
   Markup: <span class="product-badge product-plus">Plus</span>
   ============================================================ */
.product-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-1);     /* 8 */
    font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
    line-height: 1.55;
    border: 1px solid transparent;
    white-space: nowrap;
}
.product-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 999px;
    background: currentColor; opacity: .85; flex-shrink: 0;
}
.product-badge.product-plus  { background: rgba(86, 174, 189, .14); color: #2A6E7A; border-color: rgba(86, 174, 189, .32); }
.product-badge.product-admin { background: rgba(157, 78, 221, .14); color: #6E2BBE; border-color: rgba(157, 78, 221, .30); }
.product-badge.product-flow  { background: rgba(252, 191, 73, .22); color: #8E6300; border-color: rgba(216, 156, 41, .35); }
.product-badge.product-other { background: var(--gray-soft);        color: var(--text-secondary); border-color: rgba(107, 114, 128, .20); }

/* ============================================================
   Generated key card
   ============================================================ */
.key-card {
    background: var(--text);
    color: white;
    border-radius: var(--r-4);
    padding: 28px;
    box-shadow: var(--shadow-3);
    position: relative; overflow: hidden;
}
.key-card::before {
    content: ''; position: absolute; right: -40px; top: -40px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(10, 132, 255, .35), transparent 65%);
    pointer-events: none;
}
.key-card .key-value {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--r-2);
    padding: 16px;
    word-break: break-all;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px; line-height: 1.6;
}

/* ============================================================
   AppBar — frosted glass
   ============================================================ */
.mud-appbar {
    background: rgba(255, 255, 255, .72) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
}

/* ============================================================
   Drawer / Nav
   ============================================================ */
.mud-drawer {
    background: var(--surface) !important;
    border-right: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.mud-nav-item .mud-nav-link {
    border-radius: var(--r-2) !important;
    margin: 2px 10px !important;
    padding: 8px 14px !important;
    color: var(--text-secondary) !important;
    transition: background .2s, color .15s, transform .12s;
    position: relative;
}
.mud-nav-item .mud-nav-link:hover {
    background: var(--surface-2) !important;
    color: var(--text) !important;
}
.mud-nav-item .mud-nav-link.active {
    background: var(--blue-soft) !important;
    color: var(--blue) !important;
    font-weight: 600;
}
.mud-nav-item .mud-nav-link.active .mud-nav-link-icon { color: var(--blue) !important; }

/* ============================================================
   Buttons (iOS-style)
   ============================================================ */
.mud-button {
    text-transform: none !important;
    font-weight: 600 !important;
    letter-spacing: -.005em !important;
    border-radius: var(--r-2) !important;     /* 12 — Material modern */
    padding: 8px 16px !important;
    transition: transform .12s, box-shadow .15s, filter .15s, background .15s, border-color .15s !important;
}
.mud-button.mud-button-icon-start .mud-icon-root,
.mud-button.mud-button-icon-end .mud-icon-root { font-size: 18px !important; }
.mud-button-filled.mud-button-filled-primary {
    background: var(--blue) !important;
    color: white !important;
    box-shadow: 0 1px 2px rgba(5, 130, 202, .22), 0 4px 12px -4px rgba(5, 130, 202, .30) !important;
}
.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--blue-700) !important;
    box-shadow: 0 2px 4px rgba(5, 130, 202, .26), 0 8px 18px -6px rgba(5, 130, 202, .42) !important;
    transform: translateY(-1px);
}
.mud-button-filled.mud-button-filled-secondary {
    background: var(--indigo) !important;
    color: white !important;
}
.mud-button-filled.mud-button-filled-secondary:hover {
    background: #25305A !important;
    transform: translateY(-1px);
}
.mud-button-filled.mud-button-filled-primary:active { transform: translateY(0) scale(.98); }

.mud-button-outlined {
    border: 1px solid var(--line-strong) !important;
    color: var(--text) !important;
    background: var(--surface) !important;
}
.mud-button-outlined:hover {
    background: var(--surface-2) !important;
    border-color: var(--text-quaternary) !important;
    transform: translateY(-1px);
}
.mud-button-text { color: var(--blue) !important; }
.mud-button-text:hover { background: var(--blue-soft) !important; }

.mud-icon-button { transition: background .15s, transform .12s; }
.mud-icon-button:hover { transform: scale(1.06); background: var(--surface-2) !important; }

/* ============================================================
   Inputs
   ============================================================ */
.mud-input-outlined-border {
    border-color: var(--line-strong) !important;
    border-radius: var(--r-2) !important;     /* 12 — match buttons */
    transition: border-color .15s, box-shadow .15s;
}
.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 4px var(--blue-soft) !important;
}

/* ============================================================
   Chips
   ============================================================ */
.mud-chip {
    font-weight: 500 !important;
    letter-spacing: .005em;
    border-radius: 999px !important;
}
.mud-chip.mud-chip-size-small { font-size: 11.5px !important; }
.mud-chip-filled.mud-chip-color-primary {
    background: var(--blue) !important;
    color: white !important;
    border: 0;
}
.mud-chip-outlined { border-width: 1px !important; }

/* ============================================================
   Tabs
   ============================================================ */
.mud-tabs-toolbar {
    background: var(--surface) !important;
    border-bottom: 1px solid var(--line);
    padding: 0 !important;
}
.mud-tab {
    font-weight: 500 !important;
    text-transform: none !important;
    color: var(--text-tertiary) !important;
    letter-spacing: -.005em !important;
}
.mud-tab.mud-tab-active { color: var(--blue) !important; font-weight: 600; }
.mud-tabs-tabbar-inner .mud-tabs-tabbar-slider {
    background: var(--blue) !important;
    height: 2px !important; border-radius: 2px;
}

/* ============================================================
   Tables / DataGrid
   ============================================================ */
.mud-table-head th {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
    color: var(--text-tertiary) !important;
    background: var(--surface-2) !important;
    border-bottom: 1px solid var(--line) !important;
}
.mud-table-container .mud-table-row { transition: background .15s; }
.mud-table-container .mud-table-row:hover {
    background: var(--surface-2) !important;
}
.mud-table-cell { border-bottom: 1px solid var(--line) !important; }

/* ============================================================
   Dialogs
   ============================================================ */
.mud-dialog {
    border-radius: var(--r-4) !important;     /* 20 — concentric with 16 paper, 12 buttons */
    border: 1px solid var(--line);
    box-shadow: var(--shadow-pop) !important;
    overflow: hidden;
}
.mud-overlay-dialog {
    background: rgba(15, 23, 42, .55) !important;
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
}
.mud-dialog-title { padding: 20px 24px 8px !important; font-weight: 700 !important; letter-spacing: -.01em; }
.mud-dialog-content { padding: 8px 24px 16px !important; }
.mud-dialog-actions { padding: 12px 20px 20px !important; gap: 8px; }

/* ============================================================
   Snackbar — Apple-tinted
   ============================================================ */
.mud-snackbar {
    border-radius: var(--r-2) !important;
    box-shadow: var(--shadow-3) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--line);
    animation: snackbar-slide .32s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes snackbar-slide {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
.mud-snackbar.mud-alert-filled-success { background: rgba(29, 209, 94, .96) !important; }
.mud-snackbar.mud-alert-filled-error   { background: rgba(255, 81, 84, .96) !important; }
.mud-snackbar.mud-alert-filled-warning { background: rgba(244, 124, 61, .96) !important; color: #FFFFFF !important; }
.mud-snackbar.mud-alert-filled-info    { background: rgba(5, 130, 202, .96) !important; }

/* ============================================================
   Charts
   ============================================================ */
.mud-chart svg path,
.mud-chart svg rect,
.mud-chart svg circle { animation: chart-in .5s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes chart-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 64px 24px; color: var(--text-tertiary);
    text-align: center;
}
.empty-state svg { color: var(--surface-3); margin-bottom: 16px; }
.empty-state .empty-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
.empty-state .empty-sub   { font-size: 13px; margin-top: 6px; max-width: 320px; line-height: 1.5; }

/* ============================================================
   Skeleton
   ============================================================ */
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200% 100%;
    animation: skel 1.4s infinite;
    border-radius: var(--r-2);
}
@keyframes skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line { height: 12px; }
.skeleton-card { height: 120px; border-radius: var(--r-4); }

/* ============================================================
   Usage tiles (License Edit > Utilizzo)
   ============================================================ */
.usage-tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: 16px 18px;
    height: 100%;
    transition: border-color .2s, box-shadow .2s;
}
.usage-tile:hover { border-color: var(--line-strong); }
.usage-tile-label { font-size: 11px; font-weight: 600; letter-spacing: -.005em; color: var(--text-tertiary); }
.usage-tile-value { font-size: 24px; font-weight: 700; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.usage-tile-foot { font-size: 12px; color: var(--text-tertiary); }

.empty-mini {
    padding: 24px; text-align: center; color: var(--text-tertiary); font-size: 13px;
    border: 1px dashed var(--line); border-radius: var(--r-2);
    background: var(--surface-2);
}

/* ============================================================
   Activity dot (used in endpoint table)
   ============================================================ */
.activity-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; margin-right: 6px; }
.activity-online   {
    background: var(--green);
    box-shadow: 0 0 0 3px rgba(29, 209, 94, .18);
    animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(29, 209, 94, .55); }
    65%  { box-shadow: 0 0 0 7px rgba(29, 209, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(29, 209, 94, 0); }
}
.activity-recent   { background: var(--blue);  box-shadow: 0 0 0 3px var(--blue-soft); }
.activity-idle     { background: var(--orange); }
.activity-stale    { background: var(--gray); }
.activity-cold     { background: #C7C7CC; }

/* ============================================================
   Capacity bar
   ============================================================ */
.capacity-track {
    width: 100%; height: 8px; border-radius: 999px;
    background: var(--surface-2); overflow: hidden;
}
.capacity-fill {
    height: 100%; border-radius: 999px;
    background: var(--blue);
    transition: width .8s cubic-bezier(.16, 1, .3, 1);
}
.capacity-fill.warn { background: var(--orange); }
.capacity-fill.over { background: var(--red); }

/* ============================================================
   Misc
   ============================================================ */
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.text-muted { color: var(--text-tertiary); }
.fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; }
.tabular { font-variant-numeric: tabular-nums; }

/* Focus visible: glow morbido e accessibile, animato */
:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px; border-radius: 6px;
    box-shadow: 0 0 0 4px var(--blue-soft);
    transition: box-shadow .2s var(--ease-out), outline-offset .15s ease;
}

/* ============================================================
   Motion system — micro-interazioni eleganti, mai invadenti.
   Curve di easing standardizzate per coerenza percepita.
   ============================================================ */
:root {
    /* Spring curve — bouncy ma controllata (Apple-like) */
    --ease-out-spring:   cubic-bezier(.16, 1, .3, 1);
    /* Decelerated — perfect per entry */
    --ease-out:          cubic-bezier(.22, .61, .36, 1);
    /* Sharp — perfect per exit */
    --ease-in:           cubic-bezier(.55, .06, .68, .19);
    /* Standard "Material" easing */
    --ease-standard:     cubic-bezier(.4, 0, .2, 1);
}

/* === Bottoni: micro-bounce su click + lift su hover === */
.mud-button {
    transition: transform .14s var(--ease-out-spring),
                box-shadow .2s ease,
                background-color .15s ease,
                border-color .15s ease,
                color .15s ease !important;
    overflow: hidden;
    position: relative;
}
.mud-button:hover  { transform: translateY(-1px); }
.mud-button:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
/* Subtle "shine" glissé sui CTA primary all'hover */
.mud-button-filled.mud-button-filled-primary::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform .55s var(--ease-out);
    pointer-events: none;
}
.mud-button-filled.mud-button-filled-primary:hover::before { transform: translateX(100%); }

/* Icon button: rotate sottile su hover (solo per i bottoni quick-action) */
.mud-icon-button {
    transition: transform .2s var(--ease-out-spring),
                background-color .15s ease,
                color .15s ease !important;
}
.mud-icon-button:hover  { transform: scale(1.08); }
.mud-icon-button:active { transform: scale(.94); transition-duration: .08s; }

/* === Tabelle: stagger fade-in delle righe al primo render === */
.mud-table-container .mud-table-row {
    animation: row-in .42s var(--ease-out-spring) both;
    transition: background-color .15s ease, box-shadow .2s ease;
}
.mud-table-container .mud-table-row:nth-child(1)  { animation-delay: .02s; }
.mud-table-container .mud-table-row:nth-child(2)  { animation-delay: .04s; }
.mud-table-container .mud-table-row:nth-child(3)  { animation-delay: .06s; }
.mud-table-container .mud-table-row:nth-child(4)  { animation-delay: .08s; }
.mud-table-container .mud-table-row:nth-child(5)  { animation-delay: .10s; }
.mud-table-container .mud-table-row:nth-child(6)  { animation-delay: .12s; }
.mud-table-container .mud-table-row:nth-child(7)  { animation-delay: .14s; }
.mud-table-container .mud-table-row:nth-child(8)  { animation-delay: .16s; }
.mud-table-container .mud-table-row:nth-child(n+9){ animation-delay: .18s; }
@keyframes row-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Tabelle "renewal" (Scadenze) — stesso effetto sulla tabella custom */
.renewal-table tbody tr { animation: row-in .42s var(--ease-out-spring) both; }
.renewal-table tbody tr:nth-child(1)  { animation-delay: .02s; }
.renewal-table tbody tr:nth-child(2)  { animation-delay: .04s; }
.renewal-table tbody tr:nth-child(3)  { animation-delay: .06s; }
.renewal-table tbody tr:nth-child(4)  { animation-delay: .08s; }
.renewal-table tbody tr:nth-child(5)  { animation-delay: .10s; }
.renewal-table tbody tr:nth-child(6)  { animation-delay: .12s; }
.renewal-table tbody tr:nth-child(7)  { animation-delay: .14s; }
.renewal-table tbody tr:nth-child(8)  { animation-delay: .16s; }
.renewal-table tbody tr:nth-child(n+9){ animation-delay: .18s; }

/* === Sidebar nav: indicator a sinistra che slide-in sull'item attivo === */
.mud-nav-item .mud-nav-link {
    position: relative;
    overflow: hidden;
}
.mud-nav-item .mud-nav-link::before {
    content: ''; position: absolute;
    left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
    width: 3px; height: 22px; border-radius: 0 3px 3px 0;
    background: var(--blue);
    transition: transform .25s var(--ease-out-spring);
    transform-origin: center;
}
.mud-nav-item .mud-nav-link.active::before { transform: translateY(-50%) scaleY(1); }
.mud-nav-item .mud-nav-link:not(.active):hover {
    transform: translateX(2px);
    transition: background-color .2s ease, color .15s ease, transform .2s var(--ease-out-spring);
}

/* === KPI / Bucket cards: lift + colored glow su hover === */
.kpi-card { will-change: transform; }
.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px -10px rgba(5,130,202,.20), var(--shadow-3);
}

/* === Pill / Badge: subtle pulse for "active" status === */
.pill-active::before {
    animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: .9; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.2); box-shadow: 0 0 0 3px rgba(29,209,94,.16); }
}

/* === Brand mark: very subtle "wake-up" on first paint === */
.brand-name, .nav-foot-mark, header .brand {
    animation: brand-wake .55s var(--ease-out-spring) both;
}
@keyframes brand-wake {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Modali / Dialog: spring scale-in invece dello scale lineare default === */
.mud-dialog {
    animation: dialog-in .38s var(--ease-out-spring) both !important;
    transform-origin: center center;
    will-change: transform, opacity;
}
@keyframes dialog-in {
    0%   { opacity: 0; transform: scale(.94) translateY(12px); }
    60%  { opacity: 1; transform: scale(1.005) translateY(-1px); } /* mini overshoot */
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mud-overlay-dialog {
    animation: overlay-fade .28s var(--ease-out) both !important;
}
@keyframes overlay-fade {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(8px) saturate(140%); }
}

/* === Drawer dettaglio licenza: easing più "spring" sull'apertura === */
.ld-panel { transition: transform .42s var(--ease-out-spring); }
.ld-panel.open .ld-quickrow,
.ld-panel.open .ld-stats,
.ld-panel.open .ld-section {
    animation: ld-content-in .5s var(--ease-out-spring) both;
}
.ld-panel.open .ld-quickrow { animation-delay: .12s; }
.ld-panel.open .ld-stats    { animation-delay: .18s; }
.ld-panel.open .ld-section:nth-of-type(1) { animation-delay: .24s; }
.ld-panel.open .ld-section:nth-of-type(2) { animation-delay: .30s; }
.ld-panel.open .ld-section:nth-of-type(3) { animation-delay: .36s; }
@keyframes ld-content-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Input outlined: focus ring "glow" più morbida e leggermente animata === */
.mud-input-outlined.mud-shrink .mud-input-outlined-border,
.mud-input-outlined:focus-within .mud-input-outlined-border {
    transition: box-shadow .25s var(--ease-out), border-color .15s ease !important;
}

/* === Bucket cards: ripple sottile sul click === */
.bucket-card { will-change: transform; }
.bucket-card.active {
    animation: bucket-pulse .55s var(--ease-out-spring) both;
}
@keyframes bucket-pulse {
    0%   { transform: scale(.985); }
    50%  { transform: scale(1.012); }
    100% { transform: scale(1); }
}

/* === Snackbar: slide-up + fade più morbido === */
.mud-snackbar {
    animation: snack-in .35s var(--ease-out-spring) both !important;
}
@keyframes snack-in {
    from { opacity: 0; transform: translateY(16px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* === Loader / skeleton: shimmer più "premium" === */
.skeleton {
    animation: skel 1.6s linear infinite;
}

/* === Quick-copy chips: tick "pop" quando confermano === */
.qc-chip .qc-icon,
.ld-qc .ld-qc-icon { transition: transform .25s var(--ease-out-spring), color .15s ease; }
.qc-chip:hover .qc-icon,
.ld-qc:hover  .ld-qc-icon { transform: scale(1.1); }

/* === Tabs MudBlazor: slider underline più morbida === */
.mud-tabs-tabbar-inner .mud-tabs-tabbar-slider {
    transition: transform .35s var(--ease-out-spring), width .25s ease !important;
}

/* === Riduci le micro-interazioni in caso di "prefers-reduced-motion" === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

.blazor-error-boundary {
    background: var(--red); color: white;
    padding: 1rem 1rem 1rem 3.7rem;
}
.blazor-error-boundary::after { content: "Si è verificato un errore." }

.validation-message { color: var(--red); font-size: 12px; }

/* ============================================================
   Page-header CTAs — slightly tighter on mobile
   ============================================================ */
@media (max-width: 720px) {
    .page-header { flex-direction: column; align-items: flex-start; }
    .page-title { font-size: 26px; }
}

/* MudDataGrid row hover: stronger lift to feel "clickable" */
.mud-table-container .mud-table-row.lic-row { cursor: pointer; }

/* ============================================================
   Eye toggle universale per input type=password.
   Wrap markup: <span class="pwd-eye-wrap"><input ...><button class="pwd-eye"></button></span>
   Il toggle è gestito da App.razor (handler globale, no duplicazioni).
   ============================================================ */
.pwd-eye-wrap { position: relative; display: block; }
.pwd-eye-wrap input[type="password"],
.pwd-eye-wrap input[type="text"] { padding-right: 44px !important; }
.pwd-eye {
    position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
    width: 32px; height: 32px; border-radius: 8px;
    background: transparent; border: 0; cursor: pointer; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-tertiary);
    transition: background-color .15s ease, color .15s ease;
}
.pwd-eye:hover  { background: var(--surface-2); color: var(--blue); }
.pwd-eye:active { transform: translateY(-50%) scale(.94); }
.pwd-eye::before {
    content: 'visibility';
    font-family: 'Material Icons';
    font-size: 18px;
    line-height: 1;
}
.pwd-eye.is-showing::before { content: 'visibility_off'; }

/* ============================================================
   Filter bar (Scadenze, e altre pagine in cui ricerca + select +
   toggle stanno sulla stessa riga). Layout grid stabile, tutti gli
   elementi allineati verticalmente al centro indipendentemente
   dall'altezza dell'input.
   ============================================================ */
.filter-bar { padding: 16px 20px; }
.filter-bar-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) minmax(160px, 0.8fr) auto auto;
    column-gap: 16px;
    row-gap: 12px;
    align-items: center;
}
.fb-cell { min-width: 0; }
.fb-search, .fb-product { display: block; }
.fb-toggles {
    display: inline-flex; align-items: center; gap: 16px;
    flex-wrap: wrap;
}
/* Allinea il baseline delle checkbox al centro degli input dense (40px alti) */
.fb-toggles .mud-input-control { margin: 0 !important; }
.fb-count { justify-self: end; }
.filter-count {
    font-size: 12.5px; font-weight: 500; color: var(--text-tertiary);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.filter-count-sep { color: var(--text-quaternary); margin: 0 4px; }

@media (max-width: 1100px) {
    .filter-bar-grid { grid-template-columns: 1fr 1fr; }
    .fb-toggles { grid-column: 1 / -1; }
    .fb-count   { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 600px) {
    .filter-bar-grid { grid-template-columns: 1fr; }
    .fb-toggles, .fb-count { grid-column: auto; }
}

/* ============================================================
   Form sections (license edit, dialog forms)
   Etichetta sopra al gruppo + spaziatura coerente.
   ============================================================ */
.form-section {
    padding: 8px 0 16px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 16px;
}
.form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.form-section-h {
    font-size: 10.5px; font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-tertiary);
    margin-bottom: 14px;
}

/* ============================================================
   Quick-copy chips — leggeri, eleganti, leggibili
   ============================================================ */
.lic-quickcopy {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 16px;
}
.qc-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .12s, box-shadow .15s;
    font-family: inherit;
    color: var(--text-secondary);
    line-height: 1.4;
}
.qc-chip:hover {
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: 0 2px 6px -3px rgba(5,130,202,.35);
}
.qc-chip:active { transform: translateY(0) scale(.99); }
.qc-chip .qc-key {
    font-size: 10px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-tertiary);
}
.qc-chip:hover .qc-key { color: var(--blue-700); }
.qc-chip .qc-val { font-size: 12.5px; font-weight: 500; }
.qc-chip .qc-icon { font-size: 14px !important; color: var(--text-quaternary); }
.qc-chip:hover .qc-icon { color: var(--blue); }

/* ============================================================
   Endpoint list (license detail) — micro tweaks
   ============================================================ */
.endpoint-mini-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.endpoint-mini-card {
    border: 1px solid var(--line); background: var(--surface);
    border-radius: var(--r-2); padding: 10px 12px;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.endpoint-mini-card:hover { border-color: var(--blue); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.endpoint-mini-mac { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text); font-weight: 600; }
.endpoint-mini-meta { font-size: 11px; color: var(--text-tertiary); margin-top: 3px; }