/* ════════════════════════════════════════════════════════════════════════
   DeepForge — design system
   ────────────────────────────────────────────────────────────────────────
   Tema "Modern Minimal" (21st.dev / tweakcn): palette neutra + primary blu,
   font Inter, raggi morbidi. Colori in oklch (verbatim dal tema). Le variabili
   `--df-*` ri-tematizzano l'intera UI; il blocco dark sotto fa l'override.
   ════════════════════════════════════════════════════════════════════════ */

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

:root {
    /* ─── Palette (Modern Minimal — light) ─────────────────────────────── */
    --df-bg: oklch(0.9846 0.0017 247.8389);          /* muted: canvas app   */
    --df-bg-elevated: oklch(1 0 0);                   /* card/surface bianco */
    --df-fg: oklch(0.3211 0 0);
    --df-fg-muted: oklch(0.5510 0.0234 264.3637);
    --df-fg-soft: oklch(0.6500 0.0150 264.0000);
    --df-border: oklch(0.9276 0.0058 264.5313);
    --df-border-strong: oklch(0.8700 0.0060 264.0000);

    --df-primary: oklch(71.374% 0.1497 259.468);
    --df-primary-hover: oklch(0.5500 0.1900 259.8145);
    --df-primary-soft: oklch(0.9514 0.0250 236.8242);  /* accent (azzurro)  */
    --df-primary-fg: oklch(1 0 0);

    --df-success: oklch(91.374% 0.09131 148.478);
    --df-success-soft: oklch(65.879% 0.20662 142.455);
    --df-info: oklch(0.6800 0.1300 230.0000);
    --df-info-soft: oklch(0.9500 0.0400 230.0000);
    --df-warning: oklch(0.7200 0.1600 70.0000);
    --df-warning-soft: oklch(0.9600 0.0600 80.0000);
    --df-danger: oklch(0.6368 0.2078 25.3313);         /* destructive       */
    --df-danger-soft: oklch(96.982% 0.0362 200.967);

    /* Sidebar chiara, coerente col tema minimal */
    --df-sidebar-bg: oklch(0.22 0.02 271.87);
    --df-sidebar-fg: oklch(0.5510 0.0234 264.3637);
    --df-sidebar-fg-active: oklch(0.3791 0.1378 265.5222);  /* accent-fg blu */
    --df-sidebar-bg-active: oklch(49.935% 0.11794 244.788);  /* accent soft  */
    --df-sidebar-accent: oklch(0.6231 0.1880 259.8145);     /* primary      */

    /* ─── Typography ───────────────────────────────────────────────────── */
    --df-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --df-font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
    --df-fs-sm: 0.8125rem;
    --df-fs-base: 0.9375rem;
    --df-fs-lg: 1.125rem;
    --df-fs-xl: 1.5rem;

    /* ─── Spacing ─────────────────────────────────────────────────────── */
    --df-radius: 6px;
    --df-radius-lg: 10px;
    --df-sidebar-w: 240px;
    --df-sidebar-w-mini: 60px;
    --df-topbar-h: 60px;
    --df-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --df-shadow: 0 4px 12px rgba(15, 23, 42, .08);

    /* ─── Alias retrocompatibili (template pre-Fase 12) ──────────────── */
    --bg: var(--df-bg);
    --fg: var(--df-fg);
    --muted: var(--df-fg-muted);
    --accent: var(--df-primary);
    --accent-soft: var(--df-primary-soft);
    --card: var(--df-bg-elevated);
    --border: var(--df-border);
    --danger: var(--df-danger);
    --success: var(--df-success);
}

/* ─── Modern Minimal — dark mode (override variabili) ──────────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        --df-bg: oklch(0.2 0.02 271.68);
        --df-bg-elevated: oklch(0.22 0.02 271.69);
        --df-fg: oklch(0.9219 0 0);
        --df-fg-muted: oklch(0.7155 0 0);
        --df-fg-soft: oklch(0.6000 0 0);
        --df-border: oklch(0.3715 0 0);
        --df-border-strong: oklch(0.4400 0 0);

        --df-primary: oklch(0.6231 0.1880 259.8145);
        --df-primary-hover: oklch(0.7000 0.1700 259.8145);
        --df-primary-soft: oklch(0.3791 0.1378 265.5222);
        --df-primary-fg: oklch(1 0 0);

        --df-danger: oklch(50.13% 0.18078 26.752);
        --df-danger-soft: oklch(43.925% 0.15721 27.906);

        : oklch(0.2686 0 0);
        --df-sidebar-fg: oklch(0.7155 0 0);
        --df-sidebar-fg-active: oklch(0.8823 0.0571 254.1284);
        -active: oklch(0.3791 0.1378 265.5222);
        --df-sidebar-accent: oklch(0.6231 0.1880 259.8145);

        --df-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --df-shadow: 0 4px 12px rgba(0, 0, 0, .5);
    }
}

/* ─── Reset minimale ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--df-font);
    font-size: var(--df-fs-base);
    background: var(--df-bg);
    color: var(--df-fg);
    line-height: 1.5;
    min-height: 100vh;
}
a { color: var(--df-primary); text-decoration: none; }
a:hover { color: var(--df-primary-hover); text-decoration: underline; }
code, pre { font-family: var(--df-font-mono); font-size: 0.875em; }

/* ─── Layout: sidebar + topbar ─────────────────────────────────────────── */
.app-shell {
    display: grid;
    grid-template-columns: var(--df-sidebar-w) 1fr;
    grid-template-rows: var(--df-topbar-h) 1fr;
    grid-template-areas:
        "sidebar topbar"
        "sidebar main";
    min-height: 100vh;
}
.app-shell.no-sidebar {
    grid-template-columns: 1fr;
    grid-template-areas:
        "topbar"
        "main";
}
.app-shell.no-sidebar .sidebar { display: none; }

.sidebar {
    grid-area: sidebar;
    background: var(--df-sidebar-bg);
    color: var(--df-sidebar-fg);
    padding: 1rem 0;
    overflow-y: auto;
}
.sidebar .brand {
    padding: 0 1.5rem 1.5rem;
    border-bottom: 1px solid var(--df-border);
    font-weight: 700;
    font-size: var(--df-fs-lg);
    color: var(--df-sidebar-accent);
    letter-spacing: .02em;
}
.sidebar .brand small {
    display: block;
    color: var(--df-sidebar-fg);
    font-weight: 400;
    font-size: var(--df-fs-sm);
    margin-top: .25rem;
}
/* Icona compatta del brand: visibile solo nella sidebar collassata (mobile). */
.sidebar .brand-icon { display: none; font-size: 1.4rem; }
.sidebar nav { padding: 1rem 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a {
    color: var(--df-sidebar-fg);
    padding: .625rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .625rem;
    text-decoration: none;
}
.sidebar nav a:hover {
    background: var(--df-sidebar-bg-active);
    color: var(--df-sidebar-fg-active);
    text-decoration: none;
}
.sidebar nav a.active {
    background: var(--df-sidebar-bg-active);
    color: var(--df-sidebar-fg-active);
    border-left: 3px solid var(--df-sidebar-accent);
    padding-left: calc(1.5rem - 3px);
}
.sidebar .nav-group-title {
    padding: 1.5rem 1.5rem .5rem;
    color: var(--df-fg-soft);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: .08em;
}

.topbar {
    grid-area: topbar;
    background: var(--df-bg-elevated);
    border-bottom: 1px solid var(--df-border);
    display: flex;
    align-items: center;
    padding: 0 2rem;
    gap: 1rem;
    box-shadow: var(--df-shadow-sm);
}
.topbar .page-title {
    font-weight: 600;
    color: var(--df-fg);
    font-size: var(--df-fs-lg);
}
.topbar .spacer { flex: 1; }
.topbar .user-chip {
    background: var(--df-bg);
    border: 1px solid var(--df-border);
    padding: .375rem .75rem;
    border-radius: var(--df-radius);
    font-size: var(--df-fs-sm);
    color: var(--df-fg-muted);
}

main.content {
    grid-area: main;
    padding: 2rem;
    overflow-y: auto;
    max-width: 100%;
}

/* ─── Cards ──────────────────────────────────────────────────────────── */
.card {
    background: var(--df-bg-elevated);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: var(--df-shadow-sm);
}
.card h2, .card h3 { margin-top: 0; color: var(--df-fg); }

/* ─── Typography titoli ──────────────────────────────────────────────── */
h1 { font-size: var(--df-fs-xl); color: var(--df-fg); margin: 0 0 1rem; }
h2 { font-size: 1.25rem; color: var(--df-fg); }
h3 { font-size: 1.0625rem; color: var(--df-fg); }
p { margin: 0 0 1rem; }
.muted { color: var(--df-fg-muted); }
.help { color: var(--df-fg-muted); font-size: var(--df-fs-sm); margin-top: .25rem; }

/* ─── Forms ──────────────────────────────────────────────────────────── */
label {
    display: block;
    font-weight: 600;
    color: var(--df-fg);
    margin: 1rem 0 .375rem;
    font-size: var(--df-fs-sm);
}
/* Form controls dei form in-app → look dei widget DevExtreme Fluent (campo
   riempito, hover, focus accentato, chevron sui select).
   Scopato a `.app-shell form`: i widget DevExtreme (griglie/SelectBox) NON
   stanno in un <form>, quindi sono esclusi senza guardie; e la login glass vive
   in `.login-card` (fuori da .app-shell), quindi resta intoccata. */
.app-shell form input[type="text"], .app-shell form input[type="email"],
.app-shell form input[type="password"], .app-shell form input[type="number"],
.app-shell form input[type="url"], .app-shell form input[type="date"],
.app-shell form input[type="datetime-local"], .app-shell form input[type="search"],
.app-shell form input[type="tel"], .app-shell form input[type="time"],
.app-shell form textarea,
.app-shell form select {
    width: 100%;
    min-height: 38px;
    background: var(--df-bg-elevated);
    color: var(--df-fg);
    border: 1px solid var(--df-border-strong);
    border-radius: var(--df-radius);
    padding: .5rem .75rem;
    font: inherit;
    font-size: var(--df-fs-base);
    transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.app-shell form input[type="text"]:hover:not(:disabled),
.app-shell form input[type="email"]:hover:not(:disabled),
.app-shell form input[type="password"]:hover:not(:disabled),
.app-shell form input[type="number"]:hover:not(:disabled),
.app-shell form input[type="url"]:hover:not(:disabled),
.app-shell form input[type="date"]:hover:not(:disabled),
.app-shell form input[type="search"]:hover:not(:disabled),
.app-shell form textarea:hover:not(:disabled),
.app-shell form select:hover:not(:disabled) {
    border-color: var(--df-primary);
}
.app-shell form input:focus, .app-shell form textarea:focus,
.app-shell form select:focus {
    outline: none;
    border-color: var(--df-primary);
    box-shadow: 0 0 0 3px var(--df-primary-soft);
}
.app-shell form input::placeholder, .app-shell form textarea::placeholder {
    color: var(--df-fg-soft);
}
.app-shell form input:disabled, .app-shell form textarea:disabled,
.app-shell form select:disabled {
    opacity: .6; cursor: not-allowed; background: var(--df-bg);
}
/* Select: chevron custom come i dropdown DevExtreme */
.app-shell form select {
    appearance: none; -webkit-appearance: none;
    padding-right: 2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23888' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .7rem center;
}
.app-shell form textarea { font-family: var(--df-font); min-height: 80px; resize: vertical; }
.app-shell form input[type="file"] { color: var(--df-fg-muted); padding: .35rem; }
/* Pulsante "Scegli file": stesso look del bottone primario ("Carica documenti"). */
.app-shell form input[type="file"]::file-selector-button,
.app-shell form input[type="file"]::-webkit-file-upload-button {
    background: var(--df-primary);
    color: var(--df-primary-fg);
    border: 1px solid var(--df-primary);
    border-radius: var(--df-radius);
    padding: .5rem 1.125rem;
    margin-right: .75rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .1s ease, border-color .1s ease;
}
.app-shell form input[type="file"]::file-selector-button:hover,
.app-shell form input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--df-primary-hover);
    border-color: var(--df-primary-hover);
}
.app-shell form input[type="checkbox"], .app-shell form input[type="radio"] {
    accent-color: var(--df-primary); width: 16px; height: 16px; vertical-align: middle;
}
.app-shell form input[type="range"] { accent-color: var(--df-primary); }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
button, .btn, input[type="submit"] {
    background: var(--df-primary);
    color: var(--df-primary-fg);
    border: 1px solid var(--df-primary);
    border-radius: var(--df-radius);
    padding: .5rem 1.125rem;
    font-weight: 600;
    font-size: var(--df-fs-base);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color .1s ease;
}
button:hover, .btn:hover {
    background: var(--df-primary-hover);
    border-color: var(--df-primary-hover);
    color: var(--df-primary-fg);
    text-decoration: none;
}
.btn-secondary {
    background: transparent;
    color: var(--df-primary);
    border: 1px solid var(--df-primary);
}
.btn-secondary:hover {
    background: var(--df-primary-soft);
    color: var(--df-primary-hover);
}
.btn-danger {
    background: var(--df-danger);
    border-color: var(--df-danger);
}
.btn-danger:hover {
    background: color-mix(in oklch, var(--df-danger), black 14%);
    border-color: color-mix(in oklch, var(--df-danger), black 14%);
}

/* ─── Badges ──────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: .125rem .5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--df-border);
    color: var(--df-fg);
}
.badge-muted { background: var(--df-border); color: var(--df-fg-muted); }
.badge-info { background: var(--df-info-soft); color: var(--df-info); }
.badge-success { 
    background: var(--df-success-soft); 
    color: var(--df-success); 
}
.badge-warning { background: var(--df-warning-soft); color: var(--df-warning); }
.badge-danger { background: var(--df-danger-soft); color: var(--df-danger); }

/* ─── Messages (Django messages framework) ───────────────────────────── */
.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}
.messages li {
    padding: .75rem 1rem;
    border-radius: var(--df-radius);
    margin-bottom: .5rem;
    border: 1px solid;
}
.messages li.info, .messages li.debug {
    background: var(--df-info-soft);
    border-color: var(--df-info);
    color: var(--df-info);
}
.messages li.success {
    background: var(--df-success-soft);
    border-color: var(--df-success);
    color: var(--df-success);
}
.messages li.warning {
    background: var(--df-warning-soft);
    border-color: var(--df-warning);
    color: oklch(0.4500 0.1100 70.0000);
}
.messages li.error {
    background: var(--df-danger-soft);
    border-color: var(--df-danger);
    color: var(--df-danger);
}

/* ─── Errors di form ─────────────────────────────────────────────────── */
.errors {
    color: var(--df-danger);
    font-size: var(--df-fs-sm);
    margin: .25rem 0;
}
.errors ul { padding-left: 1.25rem; margin: 0; }

/* ─── Tables ─────────────────────────────────────────────────────────── */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--df-bg-elevated);
    border-radius: var(--df-radius);
    overflow: hidden;
}
th {
    background: var(--df-bg);
    color: var(--df-fg-muted);
    font-size: var(--df-fs-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    padding: .625rem .75rem;
    font-weight: 600;
    border-bottom: 1px solid var(--df-border);
}
td {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--df-border);
    vertical-align: middle;
}
tbody tr:hover { background: var(--df-bg); }

/* ─── django-tables2 helpers ─────────────────────────────────────────── */
.contenuti-table { background: var(--df-bg-elevated); }
.contenuti-table .btn-row {
    display: inline-block;
    padding: .25rem .5rem;
    border-radius: var(--df-radius);
    text-decoration: none;
    color: var(--df-fg-muted);
}
.contenuti-table .btn-row:hover { background: var(--df-bg); color: var(--df-primary); text-decoration: none; }
.pagination { margin-top: 1rem; display: flex; gap: .375rem; }
.pagination a, .pagination span {
    padding: .375rem .75rem;
    border-radius: var(--df-radius);
    border: 1px solid var(--df-border-strong);
    background: var(--df-bg-elevated);
    color: var(--df-fg);
    text-decoration: none;
}
.pagination .current {
    background: var(--df-primary);
    color: var(--df-primary-fg);
    border-color: var(--df-primary);
}

/* ─── Tab strip (contenuti / cestino) ────────────────────────────────── */
.tab-strip {
    display: flex;
    gap: .375rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}
.tab-strip a {
    padding: .625rem 1.125rem;
    color: var(--df-fg-muted);
    text-decoration: none;
    border-radius: var(--df-radius) var(--df-radius) 0 0;
    border: 1px solid transparent;
    margin-bottom: -1px;
}
.tab-strip a:hover { color: var(--df-primary); text-decoration: none; }
.tab-strip a.active {
    color: var(--df-primary);
    background: var(--df-bg-elevated);
    border-color: var(--df-border) var(--df-border) transparent;
    font-weight: 600;
}

/* ─── Filter panel ───────────────────────────────────────────────────── */
.filter-panel {
    background: var(--df-bg-elevated);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.filter-panel summary { cursor: pointer; font-weight: 600; color: var(--df-fg); }
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}
.filter-grid label { color: var(--df-fg-muted); margin-bottom: .25rem; }

/* ─── Responsive ─────────────────────────────────────────────────────── */
/* Sotto i 768px la sidebar non sparisce: collassa in una barra di sole
   icone (--df-sidebar-w-mini) così la navigazione resta sempre possibile. */
@media (max-width: 768px) {
    .app-shell {
        grid-template-columns: var(--df-sidebar-w-mini) 1fr;
    }
    main.content { padding: 1rem; }

    .sidebar { overflow-x: hidden; }
    .sidebar .brand {
        padding: 0 0 1rem;
        text-align: center;
    }
    .sidebar .brand-icon { display: inline-block; }
    .sidebar .brand-text,
    .sidebar .nav-label,
    .sidebar .nav-group-title { display: none; }

    .sidebar nav a {
        justify-content: center;
        gap: 0;
        padding: .75rem 0;
    }
    .sidebar nav a i { font-size: 1.25rem; }
    .sidebar nav a.active {
        border-left: 0;
        border-right: 3px solid var(--df-sidebar-accent);
        padding-left: 0;
    }

    /* La barra processi parte dopo la mini-sidebar, non da bordo schermo. */
    .bg-bar { left: var(--df-sidebar-w-mini); }
}

/* ─── Barra processi in background (polling) ──────────────────────────────── */
.bg-bar {
    position: fixed; bottom: 0; left: var(--df-sidebar-w); right: 0; z-index: 50;
    background: var(--df-bg-elevated); border-top: 1px solid var(--df-border);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08); font-size: var(--df-fs-sm);
}
.bg-bar-toggle {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .5rem 1rem; background: none; border: 0; cursor: pointer;
    color: var(--df-fg); font: inherit; text-align: left;
}
.bg-count { color: var(--df-primary); }
.bg-chevron { margin-left: auto; color: var(--df-fg-muted); }
.bg-spinner {
    width: 14px; height: 14px; border: 2px solid var(--df-border);
    border-top-color: var(--df-primary); border-radius: 50%;
    animation: bg-spin .8s linear infinite; flex: 0 0 auto;
}
@keyframes bg-spin { to { transform: rotate(360deg); } }
.bg-bar-list { max-height: 40vh; overflow: auto; border-top: 1px solid var(--df-border); }
.bg-bar-list a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .45rem 1rem; color: var(--df-fg); text-decoration: none;
    border-bottom: 1px solid var(--df-border);
}
.bg-bar-list a:hover { background: var(--df-primary-soft); }
.bg-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Nasconde l'handle laterale della Django Debug Toolbar (solo in dev; in
   produzione DjDT non è caricato, quindi la regola è un no-op). */
#djDebugToolbarHandle { display: none !important; }

/* ─── Dashboard: contenitori grafici ──────────────────────────────────────── */
.dash-chart {
    background: rgb(255, 255, 255, 0.03);
    border-radius: 12px;
}


/* ─── Errori operazioni in background: riga rossa nella barra + toast ─────── */
.bg-bar-list .bg-item-error {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .4rem .75rem; color: var(--df-danger);
    border-left: 3px solid var(--df-danger); background: var(--df-danger-soft);
}
.df-toasts {
    position: fixed; right: 1rem; bottom: 4.5rem; z-index: 1080;
    display: flex; flex-direction: column; gap: .5rem; max-width: min(28rem, calc(100vw - 2rem));
}
.df-toast {
    display: flex; align-items: flex-start; gap: .5rem;
    padding: .65rem .8rem; border-radius: var(--df-radius-lg);
    box-shadow: var(--df-shadow); background: var(--df-surface, #fff);
    border: 1px solid var(--df-border); font-size: .9rem;
}
.df-toast-danger { border-left: 4px solid var(--df-danger); }
.df-toast-body { flex: 1; min-width: 0; }
.df-toast-msg { color: var(--df-danger); }
.df-toast-close {
    border: 0; background: transparent; font-size: 1.1rem; line-height: 1;
    cursor: pointer; color: inherit; opacity: .6;
}
.df-toast-close:hover { opacity: 1; }