/* ═══════════════════════════════════════════════════════════════
   Seen Gestionale — design system
   Stile minimale moderno (Linear / Vercel-like) con dark mode
   ═══════════════════════════════════════════════════════════════ */

[x-cloak] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─────────── Scrollbar moderna ─────────── */
* { scrollbar-width: thin; scrollbar-color: rgb(203 213 225) transparent; }
.dark * { scrollbar-color: rgb(51 65 85) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgb(203 213 225);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184); background-clip: padding-box; }
.dark ::-webkit-scrollbar-thumb { background: rgb(51 65 85); background-clip: padding-box; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgb(71 85 105); background-clip: padding-box; }

/* ─────────── Selezione testo ─────────── */
::selection { background: rgb(59 130 246 / 0.20); color: rgb(15 23 42); }
.dark ::selection { background: rgb(59 130 246 / 0.40); color: rgb(248 250 252); }

/* ─────────── Focus ─────────── */
:focus-visible {
    outline: 2px solid rgb(59 130 246);
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible, a:focus-visible { outline: none; }

/* ─────────── Form inputs (base + dark) ───────────
   Stile uniforme per TUTTI gli input/textarea/select del gestionale,
   anche quando hanno classi Tailwind multiple (es. `!pl-10 !h-11`).
   Usa `!important` perché alcuni template forzano padding/altezza con `!`. */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
textarea,
select {
    width: 100%;
    background-color: rgb(255 255 255);
    color: rgb(15 23 42);
    border: 1px solid rgb(226 232 240);
    border-radius: 0.625rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
    -webkit-appearance: none;
    appearance: none;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: rgb(59 130 246);
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.18);
}
input[disabled],
textarea[disabled],
select[disabled] {
    background-color: rgb(248 250 252);
    color: rgb(100 116 139);
    cursor: not-allowed;
}

/* Dark mode — sfondo scuro coerente col card surface-dark */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="search"],
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark input[type="month"],
.dark input[type="week"],
.dark textarea,
.dark select {
    background-color: rgb(15 23 42) !important;     /* ink-900 */
    color: rgb(241 245 249) !important;             /* ink-100 */
    border-color: rgb(51 65 85) !important;         /* ink-700 */
}
.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="number"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="url"]:focus,
.dark input[type="search"]:focus,
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark input[type="time"]:focus,
.dark input[type="month"]:focus,
.dark input[type="week"]:focus,
.dark textarea:focus,
.dark select:focus {
    border-color: rgb(59 130 246) !important;
    box-shadow: 0 0 0 3px rgb(59 130 246 / 0.30) !important;
}
.dark input[disabled],
.dark textarea[disabled],
.dark select[disabled] {
    background-color: rgb(30 41 59) !important;
    color: rgb(100 116 139) !important;
}

/* Autofill — Chrome forza giallo crema, lo riverniciamo con inset shadow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgb(255 255 255) inset;
    -webkit-text-fill-color: rgb(15 23 42);
    transition: background-color 9999s ease-in-out 0s;
}
.dark input:-webkit-autofill,
.dark input:-webkit-autofill:hover,
.dark input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px rgb(15 23 42) inset !important;
    -webkit-text-fill-color: rgb(241 245 249) !important;
    caret-color: rgb(241 245 249);
}

/* Placeholder leggibili in entrambi i temi */
input::placeholder, textarea::placeholder {
    color: rgb(148 163 184);   /* ink-400 */
    opacity: 1;
}
.dark input::placeholder, .dark textarea::placeholder {
    color: rgb(148 163 184);   /* ink-400 anche in dark per visibilità */
    opacity: 0.75;
}

/* Date picker indicator: forza icona chiara in dark */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.dark input[type="time"]::-webkit-calendar-picker-indicator,
.dark input[type="month"]::-webkit-calendar-picker-indicator,
.dark input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(0.85);
    cursor: pointer;
}

/* Date input — testo digit/placeholder leggibile in dark
   (gg/mm/aaaa di default è renderizzato col color del browser, troppo scuro) */
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark input[type="time"],
.dark input[type="month"],
.dark input[type="week"] {
    color-scheme: dark;
}
.dark input[type="date"]::-webkit-datetime-edit,
.dark input[type="datetime-local"]::-webkit-datetime-edit,
.dark input[type="time"]::-webkit-datetime-edit,
.dark input[type="month"]::-webkit-datetime-edit,
.dark input[type="week"]::-webkit-datetime-edit {
    color: rgb(241 245 249);
}
.dark input[type="date"]::-webkit-datetime-edit-text,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-text,
.dark input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
.dark input[type="time"]::-webkit-datetime-edit-hour-field,
.dark input[type="time"]::-webkit-datetime-edit-minute-field {
    color: rgb(241 245 249);
}
/* Quando il campo è vuoto, le placeholder pseudo-cifre devono essere medie */
.dark input[type="date"]:not(:focus):invalid::-webkit-datetime-edit,
.dark input[type="datetime-local"]:not(:focus):invalid::-webkit-datetime-edit,
.dark input[type="time"]:not(:focus):invalid::-webkit-datetime-edit {
    color: rgb(148 163 184);   /* ink-400 */
}

/* Select — option (Chrome/Firefox usa il bg di sistema, lo riallineamo) */
.dark select option,
.dark select optgroup {
    background-color: rgb(15 23 42);   /* ink-900 */
    color: rgb(241 245 249);
}
/* Se il select usa una option vuota disabled come placeholder, schiarisce comunque il testo */
.dark select:invalid,
.dark select option[value=""][disabled] {
    color: rgb(148 163 184);
}
/* Color-scheme aiuta a forzare la dropdown nativa scura su Chrome */
.dark select {
    color-scheme: dark;
}

/* Checkbox/radio — stile compatto coerente */
input[type="checkbox"],
input[type="radio"] {
    accent-color: rgb(37 99 235);
}
.dark input[type="checkbox"],
.dark input[type="radio"] {
    color-scheme: dark;
    accent-color: rgb(59 130 246);
}

/* ───────────────────────── DARK MODE FALLBACKS ─────────────────────────
   Se nei template ci sono classi Tailwind senza variante dark:, qui sotto
   forniamo override globali per le classi più comuni di testo/sfondo,
   così nessun testo resta illeggibile in dark mode. */

.dark .text-slate-900 { color: rgb(248 250 252) !important; }
.dark .text-slate-800 { color: rgb(241 245 249) !important; }
.dark .text-slate-700 { color: rgb(226 232 240) !important; }
.dark .text-slate-600 { color: rgb(203 213 225) !important; }
.dark .text-slate-500 { color: rgb(148 163 184) !important; }
.dark .text-slate-400 { color: rgb(100 116 139) !important; }
.dark .text-slate-300 { color: rgb(71 85 105) !important; }

.dark .bg-white,
.dark .bg-slate-50    { background-color: rgb(17 24 39) !important; }   /* surface-dark */
.dark .bg-slate-100   { background-color: rgb(30 41 59) !important; }   /* ink-800 */
.dark .bg-slate-200   { background-color: rgb(51 65 85) !important; }   /* ink-700 */

.dark .border-slate-100 { border-color: rgb(31 41 55) !important; }
.dark .border-slate-200 { border-color: rgb(31 41 55) !important; }
.dark .border-slate-300 { border-color: rgb(51 65 85) !important; }

.dark .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(31 41 55) !important; }
.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(31 41 55) !important; }

.dark .hover\:bg-slate-50:hover  { background-color: rgb(30 41 59 / 0.6) !important; }
.dark .hover\:bg-slate-100:hover { background-color: rgb(51 65 85) !important; }

/* Bg colorati semantici (badge stati, alert): scurire per dark mode */
.dark .bg-blue-50    { background-color: rgb(30 58 138 / 0.30) !important; }
.dark .bg-green-50   { background-color: rgb(20 83 45 / 0.30) !important; }
.dark .bg-yellow-50  { background-color: rgb(133 77 14 / 0.25) !important; }
.dark .bg-amber-50   { background-color: rgb(146 64 14 / 0.25) !important; }
.dark .bg-red-50     { background-color: rgb(127 29 29 / 0.30) !important; }
.dark .bg-purple-50  { background-color: rgb(76 29 149 / 0.30) !important; }
.dark .bg-pink-50    { background-color: rgb(131 24 67 / 0.30) !important; }
.dark .bg-emerald-50 { background-color: rgb(6 78 59 / 0.30) !important; }

.dark .bg-blue-100    { background-color: rgb(30 64 175 / 0.40) !important; }
.dark .bg-green-100   { background-color: rgb(22 101 52 / 0.40) !important; }
.dark .bg-yellow-100  { background-color: rgb(133 77 14 / 0.45) !important; }
.dark .bg-amber-100   { background-color: rgb(146 64 14 / 0.45) !important; }
.dark .bg-red-100     { background-color: rgb(153 27 27 / 0.45) !important; }
.dark .bg-purple-100  { background-color: rgb(91 33 182 / 0.45) !important; }
.dark .bg-pink-100    { background-color: rgb(157 23 77 / 0.45) !important; }
.dark .bg-emerald-100 { background-color: rgb(6 95 70 / 0.45) !important; }

/* Testi colorati semantici: schiarire in dark */
.dark .text-blue-800    { color: rgb(147 197 253) !important; }
.dark .text-green-800   { color: rgb(134 239 172) !important; }
.dark .text-yellow-800  { color: rgb(253 224 71) !important; }
.dark .text-amber-800   { color: rgb(252 211 77) !important; }
.dark .text-red-800     { color: rgb(252 165 165) !important; }
.dark .text-purple-800  { color: rgb(196 181 253) !important; }
.dark .text-pink-800    { color: rgb(249 168 212) !important; }
.dark .text-emerald-800 { color: rgb(110 231 183) !important; }
.dark .text-brand-800   { color: rgb(147 197 253) !important; }

.dark .text-blue-700    { color: rgb(147 197 253) !important; }
.dark .text-green-700   { color: rgb(134 239 172) !important; }
.dark .text-yellow-700  { color: rgb(253 224 71) !important; }
.dark .text-amber-700   { color: rgb(252 211 77) !important; }
.dark .text-red-700     { color: rgb(252 165 165) !important; }
.dark .text-purple-700  { color: rgb(196 181 253) !important; }
.dark .text-brand-700   { color: rgb(147 197 253) !important; }

.dark .text-blue-600    { color: rgb(96 165 250) !important; }
.dark .text-green-600   { color: rgb(74 222 128) !important; }
.dark .text-yellow-600  { color: rgb(250 204 21) !important; }
.dark .text-red-600     { color: rgb(248 113 113) !important; }
.dark .text-brand-600   { color: rgb(96 165 250) !important; }

/* Border colorati */
.dark .border-blue-200    { border-color: rgb(30 64 175 / 0.50) !important; }
.dark .border-green-200   { border-color: rgb(22 101 52 / 0.50) !important; }
.dark .border-yellow-200  { border-color: rgb(133 77 14 / 0.50) !important; }
.dark .border-amber-200   { border-color: rgb(146 64 14 / 0.50) !important; }
.dark .border-red-200     { border-color: rgb(153 27 27 / 0.50) !important; }
.dark .border-purple-200  { border-color: rgb(91 33 182 / 0.50) !important; }
.dark .border-pink-200    { border-color: rgb(157 23 77 / 0.50) !important; }
.dark .border-brand-100   { border-color: rgb(30 58 138 / 0.50) !important; }
.dark .border-brand-200   { border-color: rgb(30 64 175 / 0.50) !important; }

/* ─────────── Mobile safe-area ─────────── */
.safe-pb { padding-bottom: max(env(safe-area-inset-bottom), 0.5rem); }

/* ═══════════════════════════════════════════════════════════════
   COMPONENT CLASSES
   ═══════════════════════════════════════════════════════════════ */

/* ─────────── Buttons ─────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    transition: all 150ms ease;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    min-height: 40px;
    border: 1px solid transparent;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
    background: linear-gradient(180deg, rgb(59 130 246), rgb(37 99 235));
    color: white;
    box-shadow: 0 1px 2px rgb(37 99 235 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.18);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(180deg, rgb(37 99 235), rgb(29 78 216));
    box-shadow: 0 4px 10px rgb(37 99 235 / 0.30), inset 0 1px 0 rgb(255 255 255 / 0.18);
    transform: translateY(-1px);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }

.btn-secondary {
    background: white;
    color: rgb(30 41 59);
    border-color: rgb(226 232 240);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}
.btn-secondary:hover:not(:disabled) {
    background: rgb(248 250 252);
    border-color: rgb(203 213 225);
}
.dark .btn-secondary {
    background: rgb(30 41 59);
    color: rgb(226 232 240);
    border-color: rgb(51 65 85);
}
.dark .btn-secondary:hover:not(:disabled) {
    background: rgb(51 65 85);
    border-color: rgb(71 85 105);
}

.btn-ghost {
    background: transparent;
    color: rgb(71 85 105);
}
.btn-ghost:hover:not(:disabled) { background: rgb(241 245 249); color: rgb(15 23 42); }
.dark .btn-ghost { color: rgb(148 163 184); }
.dark .btn-ghost:hover:not(:disabled) { background: rgb(30 41 59); color: rgb(241 245 249); }

.btn-danger { background: rgb(220 38 38); color: white; }
.btn-danger:hover:not(:disabled) { background: rgb(185 28 28); }

.btn-sm  { padding: 0.375rem 0.75rem; font-size: 0.8125rem; min-height: 32px; }
.btn-xs  { padding: 0.25rem  0.625rem; font-size: 0.75rem;  min-height: 28px; }
.btn-icon { padding: 0.5rem; aspect-ratio: 1; width: 40px; }

/* ─────────── Cards ─────────── */
.card {
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.dark .card {
    background: rgb(17 24 39);
    border-color: rgb(31 41 55);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.20);
}
.card-hover { transition: all 150ms ease; }
.card-hover:hover {
    border-color: rgb(203 213 225);
    box-shadow: 0 8px 16px -4px rgb(15 23 42 / 0.08);
    transform: translateY(-1px);
}
.dark .card-hover:hover {
    border-color: rgb(71 85 105);
    box-shadow: 0 8px 16px -4px rgb(0 0 0 / 0.40);
}

/* ─────────── Badges ─────────── */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.2;
}
.badge-blue   { background: rgb(219 234 254); color: rgb(30 64 175); }
.badge-green  { background: rgb(220 252 231); color: rgb(22 101 52); }
.badge-yellow { background: rgb(254 249 195); color: rgb(133 77 14); }
.badge-red    { background: rgb(254 226 226); color: rgb(153 27 27); }
.badge-purple { background: rgb(237 233 254); color: rgb(91 33 182); }
.badge-pink   { background: rgb(252 231 243); color: rgb(157 23 77); }
.badge-amber  { background: rgb(254 243 199); color: rgb(146 64 14); }
.badge-slate  { background: rgb(241 245 249); color: rgb(51 65 85); }

.dark .badge-blue   { background: rgb(30 58 138 / 0.5); color: rgb(147 197 253); }
.dark .badge-green  { background: rgb(22 101 52 / 0.5); color: rgb(134 239 172); }
.dark .badge-yellow { background: rgb(133 77 14 / 0.5); color: rgb(253 224 71); }
.dark .badge-red    { background: rgb(153 27 27 / 0.5); color: rgb(252 165 165); }
.dark .badge-purple { background: rgb(91 33 182 / 0.5); color: rgb(196 181 253); }
.dark .badge-pink   { background: rgb(157 23 77 / 0.5); color: rgb(249 168 212); }
.dark .badge-amber  { background: rgb(146 64 14 / 0.5); color: rgb(252 211 77); }
.dark .badge-slate  { background: rgb(51 65 85); color: rgb(203 213 225); }

/* ─────────── Tables modern ─────────── */
.table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}
.table-modern thead th {
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgb(100 116 139);
    background: rgb(248 250 252);
    border-bottom: 1px solid rgb(226 232 240);
}
.dark .table-modern thead th {
    background: rgb(15 23 42);
    color: rgb(148 163 184);
    border-bottom-color: rgb(31 41 55);
}
.table-modern tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(241 245 249);
    color: rgb(30 41 59);
}
.dark .table-modern tbody td {
    border-bottom-color: rgb(31 41 55);
    color: rgb(226 232 240);
}
.table-modern tbody tr:hover { background: rgb(248 250 252); }
.dark .table-modern tbody tr:hover { background: rgb(15 23 42 / 0.5); }
.table-modern tbody tr:last-child td { border-bottom: 0; }
.table-modern tfoot td {
    padding: 0.75rem 1rem;
    background: rgb(248 250 252);
    border-top: 1px solid rgb(226 232 240);
    font-weight: 600;
}
.dark .table-modern tfoot td {
    background: rgb(15 23 42);
    border-top-color: rgb(31 41 55);
}

/* ─────────── KPI cards ─────────── */
.kpi {
    background: white;
    border: 1px solid rgb(226 232 240);
    border-radius: 0.875rem;
    padding: 1.25rem;
    transition: all 150ms ease;
    position: relative;
    overflow: hidden;
}
.kpi::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 50%, rgb(59 130 246 / 0.04));
    pointer-events: none;
}
.dark .kpi {
    background: rgb(17 24 39);
    border-color: rgb(31 41 55);
}
.dark .kpi::before { background: linear-gradient(135deg, transparent 50%, rgb(59 130 246 / 0.08)); }

.kpi-label  { font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: rgb(100 116 139); }
.dark .kpi-label { color: rgb(148 163 184); }
.kpi-value  { font-size: 1.625rem; font-weight: 700; color: rgb(15 23 42); margin-top: 0.5rem; line-height: 1.1; letter-spacing: -0.02em; }
.dark .kpi-value { color: rgb(241 245 249); }
.kpi-hint   { font-size: 0.75rem; color: rgb(100 116 139); margin-top: 0.5rem; }
.dark .kpi-hint { color: rgb(148 163 184); }

/* ─────────── Sidebar ─────────── */
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(203 213 225);
    transition: all 120ms ease;
    position: relative;
}
.nav-link:hover { background: rgb(30 41 59 / 0.6); color: white; }
.nav-link.active {
    background: linear-gradient(135deg, rgb(37 99 235 / 0.18), rgb(124 58 237 / 0.10));
    color: white;
    box-shadow: inset 0 0 0 1px rgb(37 99 235 / 0.30);
}
.nav-link.active::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 0.5rem; bottom: 0.5rem;
    width: 3px;
    background: rgb(96 165 250);
    border-radius: 0 999px 999px 0;
}
.nav-link svg { flex-shrink: 0; opacity: 0.8; }
.nav-link.active svg { opacity: 1; }

/* ─────────── Tab orizzontali ─────────── */
.tab-link {
    padding: 0.75rem 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(100 116 139);
    border-bottom: 2px solid transparent;
    transition: all 120ms ease;
    white-space: nowrap;
}
.tab-link:hover { color: rgb(30 41 59); border-bottom-color: rgb(203 213 225); }
.tab-link.active { color: rgb(37 99 235); border-bottom-color: rgb(37 99 235); }
.dark .tab-link { color: rgb(148 163 184); }
.dark .tab-link:hover { color: rgb(241 245 249); border-bottom-color: rgb(71 85 105); }
.dark .tab-link.active { color: rgb(96 165 250); border-bottom-color: rgb(96 165 250); }

/* ─────────── Avatar ─────────── */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, rgb(59 130 246), rgb(124 58 237));
    color: white;
    font-weight: 600;
    user-select: none;
    flex-shrink: 0;
}
.avatar-sm { width: 1.5rem;  height: 1.5rem;  font-size: 0.625rem; }
.avatar-md { width: 2rem;    height: 2rem;    font-size: 0.75rem; }
.avatar-lg { width: 2.5rem;  height: 2.5rem;  font-size: 0.875rem; }
.avatar-xl { width: 3.5rem;  height: 3.5rem;  font-size: 1.125rem; }

/* ─────────── Misc ─────────── */
.divider { border-top: 1px solid rgb(241 245 249); }
.dark .divider { border-top-color: rgb(31 41 55); }

.glass {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    background: rgb(255 255 255 / 0.85);
}
.dark .glass { background: rgb(17 24 39 / 0.85); }

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: rgb(100 116 139);
    background: white;
    border: 1px dashed rgb(226 232 240);
    border-radius: 0.875rem;
}
.dark .empty-state {
    background: rgb(17 24 39 / 0.5);
    border-color: rgb(51 65 85);
    color: rgb(148 163 184);
}

/* ─────────── Mobile bottom nav ─────────── */
.mobile-nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    flex: 1;
    padding: 0.5rem;
    color: rgb(100 116 139);
    transition: color 120ms ease;
    min-height: 56px;
    position: relative;
}
.mobile-nav-link.active { color: rgb(37 99 235); }
.mobile-nav-link.active::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 3px;
    background: rgb(37 99 235);
    border-radius: 0 0 999px 999px;
}
.dark .mobile-nav-link { color: rgb(148 163 184); }
.dark .mobile-nav-link.active { color: rgb(96 165 250); }
.dark .mobile-nav-link.active::before { background: rgb(96 165 250); }

@media print {
    aside, header, .mobile-nav, .no-print { display: none !important; }
    body { background: white !important; color: black !important; }
}

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