/* =========================================================
   AngelPress — Tema "premium" (iniettato, senza build)
   Ritocchi estetici sopra Filament + tabellone Planning.
   Light + dark. Nessuna dipendenza Tailwind compilata.
   ========================================================= */

:root {
    --ap-indigo: #4F46E5;
    --ap-indigo-2: #6366F1;
    --ap-radius: 0.9rem;
    --ap-radius-sm: 0.6rem;
    --ap-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 26px -10px rgba(16, 24, 40, .14);
    --ap-shadow-lg: 0 14px 44px -12px rgba(79, 70, 229, .32);
    --ap-ring: rgba(79, 70, 229, .10);
    --ap-ring-strong: rgba(79, 70, 229, .16);
    --ap-border: rgba(16, 24, 40, .07);
}

/* ---------- Tipografia premium (Instrument Sans) ---------- */
.fi-body,
.fi-body .fi-main,
.fi-sidebar,
.fi-topbar,
.fi-simple-layout {
    font-family: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system,
        'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.fi-header-heading,
.fi-sidebar-header,
.fi-ta-header-cell,
.fi-sc-header-heading { letter-spacing: -0.01em; }

/* ---------- Sfondo pagina più caldo ---------- */
.fi-main {
    background:
        radial-gradient(1100px 380px at 100% -6%, rgba(99, 102, 241, .08), transparent 60%),
        radial-gradient(820px 320px at -8% -2%, rgba(79, 70, 229, .07), transparent 55%);
}
.dark .fi-main { background: transparent; }

/* ---------- Topbar: vetro + filo d'ombra ---------- */
.fi-topbar > .fi-topbar-ctn {
    backdrop-filter: saturate(1.35) blur(8px);
    box-shadow: 0 1px 0 rgba(16, 24, 40, .06);
}
.dark .fi-topbar > .fi-topbar-ctn { box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }

/* ---------- Sidebar ---------- */
.fi-sidebar-item-btn {
    border-radius: var(--ap-radius-sm);
    transition: background .15s ease, color .15s ease;
}
.fi-sidebar-item-btn:hover { background: var(--ap-ring); }
.fi-sidebar-item.fi-active .fi-sidebar-item-btn,
.fi-sidebar-item-btn[aria-current="page"] {
    background: var(--ap-ring-strong);
    font-weight: 600;
}
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .74rem;
    font-weight: 700;
    opacity: 1;
    color: #475569;
}
.dark .fi-sidebar-group-label { color: #cbd5e1; }

/* Icone del menu colorate (palette coordinata) — agganciate al link della voce */
.fi-sidebar-item-btn[href$="/calcola-preventivo"]     .fi-sidebar-item-icon { color: #4F46E5 !important; }
.fi-sidebar-item-btn[href$="/preventivos"]            .fi-sidebar-item-icon { color: #D97706 !important; }
.fi-sidebar-item-btn[href$="/commessas"]              .fi-sidebar-item-icon { color: #2563EB !important; }
.fi-sidebar-item-btn[href$="/planning-produzione"]    .fi-sidebar-item-icon { color: #7C3AED !important; }
.fi-sidebar-item-btn[href$="/clientes"]               .fi-sidebar-item-icon { color: #4F46E5 !important; }
.fi-sidebar-item-btn[href$="/fornitores"]             .fi-sidebar-item-icon { color: #0891B2 !important; }
.fi-sidebar-item-btn[href$="/prodottos"]              .fi-sidebar-item-icon { color: #9333EA !important; }
.fi-sidebar-item-btn[href$="/cartas"]                 .fi-sidebar-item-icon { color: #D97706 !important; }
.fi-sidebar-item-btn[href$="/formatos"]               .fi-sidebar-item-icon { color: #DB2777 !important; }
.fi-sidebar-item-btn[href$="/macchinas"]              .fi-sidebar-item-icon { color: #475569 !important; }
.fi-sidebar-item-btn[href$="/lavoraziones"]           .fi-sidebar-item-icon { color: #EA580C !important; }
.fi-sidebar-item-btn[href$="/listino-cartas"]         .fi-sidebar-item-icon { color: #16A34A !important; }
.fi-sidebar-item-btn[href$="/listino-lavoraziones"]   .fi-sidebar-item-icon { color: #059669 !important; }
.fi-sidebar-item-btn[href$="/magazzino-cartas"]       .fi-sidebar-item-icon { color: #0D9488 !important; }
.fi-sidebar-item-btn[href$="/movimento-cartas"]       .fi-sidebar-item-icon { color: #2563EB !important; }
.fi-sidebar-item-btn[href$="/ordine-fornitores"]      .fi-sidebar-item-icon { color: #0891B2 !important; }
.fi-sidebar-item-btn[href$="/roles"]                  .fi-sidebar-item-icon { color: #DC2626 !important; }
.fi-sidebar-item-btn[href$="/users"]                  .fi-sidebar-item-icon { color: #DC2626 !important; }
.fi-sidebar-item-btn[href$="/activities"]             .fi-sidebar-item-icon { color: #64748B !important; }
.fi-sidebar-item-btn[href$="/backups"]                .fi-sidebar-item-icon { color: #64748B !important; }
.fi-sidebar-item-btn[href$="/guida"]                  .fi-sidebar-item-icon { color: #4F46E5 !important; }
/* quando la voce è attiva l'icona resta col colore del tema (leggibilità) */

/* ---------- Card / sezioni ---------- */
.fi-sc,
.fi-section,
.fi-wi-stats-overview-stat,
.fi-fo-component-ctn > .fi-sc {
    border-radius: var(--ap-radius) !important;
    box-shadow: var(--ap-shadow);
    border: 1px solid var(--ap-border);
}
.dark .fi-sc,
.dark .fi-section,
.dark .fi-wi-stats-overview-stat { border-color: rgba(255, 255, 255, .08); }

/* NIENTE scatole dentro scatole: solo la card di 1° livello ha bordo/ombra,
   quelle annidate diventano trasparenti (basta "doppio quadro" incastrato). */
.fi-sc .fi-sc,
.fi-sc .fi-section,
.fi-section .fi-sc,
.fi-section .fi-section {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* PROFILO (unica pagina a larghezza 2xl): look piatto e arioso, ZERO riquadri.
   Solo i campi hanno il loro bordo; sezioni/2FA senza scatole. */
.fi-width-2xl .fi-sc,
.fi-width-2xl .fi-section,
.fi-width-2xl .fi-sc-component,
.fi-width-2xl .fi-sc-actions {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.fi-width-2xl .fi-sc-header,
.fi-width-2xl .fi-fo-field-label { font-weight: 600; }

/* DASHBOARD: via il GRANDE riquadro che avvolge tutto il contenuto.
   È il wrapper .fi-sc che contiene i widget → lo rendo trasparente.
   (:has scopa alla sola dashboard; i form/altre pagine non cambiano.) */
.fi-sc:has(.fi-wi-widget) {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* DASHBOARD: tabelle-widget piatte e ariose (come il profilo), niente scatola.
   Scopo ai soli widget-tabella → le liste delle risorse (Clienti ecc.) restano a card. */
.fi-wi-table .fi-ta-ctn {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}
.fi-wi-table .fi-ta-header { background: transparent !important; }

/* =========================================================
   DASHBOARD — card statistiche (componente proprio)
   ========================================================= */
.ap-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1024px) { .ap-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .ap-stats { grid-template-columns: 1fr; } }

.ap-stat {
    display: block;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--ap-border);
    border-top: 3px solid var(--ap-indigo);
    border-radius: var(--ap-radius);
    padding: 1.15rem 1.25rem;
    box-shadow: var(--ap-shadow);
    transition: transform .14s ease, box-shadow .14s ease;
}
.dark .ap-stat { background: #0f172a; border-color: rgba(255, 255, 255, .08); }
.ap-stat:hover { transform: translateY(-3px); box-shadow: var(--ap-shadow-lg); }

.ap-stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.ap-stat-label { color: #64748b; font-size: .92rem; font-weight: 500; }
.dark .ap-stat-label { color: #94a3b8; }
.ap-stat-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.3rem; height: 2.3rem; border-radius: .75rem; flex: none;
}
.ap-stat-ic svg { width: 1.3rem; height: 1.3rem; }
.ap-stat-val {
    font-size: 2.1rem; font-weight: 800; color: #0f172a;
    line-height: 1.1; margin-top: .4rem; letter-spacing: -.02em;
}
.dark .ap-stat-val { color: #fff; }
.ap-stat-sub { color: #94a3b8; font-size: .82rem; margin-top: .4rem; }

/* colori per tipo */
.ap-stat[data-c="indigo"] { border-top-color: #4F46E5; }
.ap-stat[data-c="indigo"] .ap-stat-ic { background: rgba(79, 70, 229, .12); color: #4F46E5; }
.ap-stat[data-c="green"]  { border-top-color: #16A34A; }
.ap-stat[data-c="green"] .ap-stat-ic  { background: rgba(22, 163, 74, .12); color: #16A34A; }
.ap-stat[data-c="amber"]  { border-top-color: #D97706; }
.ap-stat[data-c="amber"] .ap-stat-ic  { background: rgba(217, 119, 6, .14); color: #D97706; }
.ap-stat[data-c="blue"]   { border-top-color: #2563EB; }
.ap-stat[data-c="blue"] .ap-stat-ic   { background: rgba(37, 99, 235, .12); color: #2563EB; }

/* ---------- Tabelle ---------- */
.fi-ta-ctn {
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow);
    border: 1px solid var(--ap-border);
    overflow: hidden;
}
.fi-ta-header-cell,
.fi-ta-header {
    background: rgba(79, 70, 229, .07);
}
.fi-ta-header-cell {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .72rem;
    font-weight: 700;
}
.dark .fi-ta-header-cell,
.dark .fi-ta-header { background: rgba(255, 255, 255, .04); }
.fi-ta-row { transition: background .12s ease; }
.fi-ta-row:hover { background: rgba(79, 70, 229, .05); }
.dark .fi-ta-row:hover { background: rgba(255, 255, 255, .035); }

/* ---------- Form: campi con angoli morbidi + focus indigo ---------- */
.fi-input,
.fi-input-wrp,
.fi-fo-field .fi-input-wrp,
.fi-select-input {
    border-radius: var(--ap-radius-sm) !important;
}
.fi-input-wrp:focus-within {
    box-shadow: 0 0 0 3px var(--ap-ring-strong);
    border-color: var(--ap-indigo);
}
.fi-fo-field-label {
    font-weight: 600;
    letter-spacing: .005em;
}

/* ---------- Bottoni & badge ---------- */
.fi-btn { box-shadow: 0 1px 2px rgba(16, 24, 40, .08); border-radius: var(--ap-radius-sm); }
.fi-badge { border-radius: 9999px; font-weight: 600; }
/* bottoni pieni: effetto lucido premium (funziona su ogni colore) */
.fi-btn.fi-bg-color-600 {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0));
    box-shadow: 0 2px 6px -1px rgba(16, 24, 40, .22), 0 1px 2px rgba(16, 24, 40, .12);
}
.fi-btn.fi-bg-color-600:hover { transform: translateY(-1px); }
.fi-btn:active { transform: translateY(1px); }

/* ---------- LOGIN brandizzato ---------- */
.fi-simple-layout {
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(99, 102, 241, .22), transparent 55%),
        radial-gradient(900px 600px at 100% 100%, rgba(79, 70, 229, .28), transparent 55%),
        linear-gradient(160deg, #eef2ff 0%, #f8fafc 60%, #eef2ff 100%);
}
.dark .fi-simple-layout {
    background:
        radial-gradient(900px 500px at 15% 0%, rgba(99, 102, 241, .18), transparent 55%),
        radial-gradient(900px 600px at 100% 100%, rgba(79, 70, 229, .22), transparent 55%),
        linear-gradient(160deg, #0b1020 0%, #0f172a 60%, #0b1020 100%);
}
.fi-simple-main {
    border-radius: 1.1rem !important;
    box-shadow: 0 24px 70px -20px rgba(79, 70, 229, .45), 0 4px 12px rgba(16, 24, 40, .08) !important;
    border: 1px solid rgba(79, 70, 229, .10);
}
/* Login: via l'header di default (logo + "Accedi" doppi) — uso il mio blocco */
.fi-simple-layout .fi-simple-header { display: none; }
/* Login: via il riquadro annidato attorno al form (card dentro card) */
.fi-simple-main .fi-sc {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Blocco benvenuto nel login (codice proprio) */
.ap-login { text-align: center; margin-bottom: 1.6rem; }
.ap-login-mark {
    width: 4.2rem; height: 4.2rem; margin: 0 auto .9rem;
    border-radius: 1.1rem;
    box-shadow: 0 10px 26px -8px rgba(79, 70, 229, .55);
}
.ap-login-mark svg { width: 100%; height: 100%; display: block; border-radius: 1.1rem; }
.ap-login-hi { font-size: 1.5rem; font-weight: 800; color: #1e1b4b; letter-spacing: -.02em; }
.dark .ap-login-hi { color: #fff; }
.ap-login-sub { color: #4F46E5; font-size: .95rem; margin-top: .3rem; font-weight: 500; }
.dark .ap-login-sub { color: #a5b4fc; }

/* =========================================================
   DASHBOARD — banner di benvenuto
   ========================================================= */
.ap-hero {
    background: linear-gradient(120deg, #4F46E5 0%, #6366F1 55%, #7C3AED 100%);
    color: #fff;
    border-radius: var(--ap-radius);
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    box-shadow: var(--ap-shadow-lg);
}
.ap-hero-hi { font-size: 1.4rem; font-weight: 700; line-height: 1.15; }
.ap-hero-sub { opacity: .88; margin-top: .25rem; font-size: .92rem; }
.ap-hero-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.ap-hero-btn {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    text-decoration: none;
    padding: .6rem .95rem;
    border-radius: var(--ap-radius-sm);
    font-weight: 600;
    font-size: .86rem;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, .20);
    transition: background .15s ease, transform .12s ease;
}
.ap-hero-btn:hover { background: rgba(255, 255, 255, .26); transform: translateY(-1px); }
.ap-hero-btn-primary { background: #fff; color: var(--ap-indigo); border-color: #fff; }
.ap-hero-btn-primary:hover { background: #eef2ff; }

/* =========================================================
   TABELLONE PLANNING PRODUZIONE (kanban) — CSS proprio
   ========================================================= */
.ap-kanban {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}
@media (max-width: 1280px) { .ap-kanban { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px)  { .ap-kanban { grid-template-columns: 1fr; } }

.ap-kcol {
    background: rgba(79, 70, 229, .035);
    border: 1px solid var(--ap-border);
    border-top: 3px solid var(--ap-indigo);
    border-radius: var(--ap-radius);
    padding: .8rem;
    min-height: 140px;
}
.dark .ap-kcol { background: rgba(255, 255, 255, .02); border-color: rgba(255, 255, 255, .08); }
.ap-kcol[data-stato="da_stampare"]   { border-top-color: #64748b; }
.ap-kcol[data-stato="in_produzione"] { border-top-color: #f59e0b; }
.ap-kcol[data-stato="stampato"]      { border-top-color: #3b82f6; }
.ap-kcol[data-stato="confezionato"]  { border-top-color: #8b5cf6; }
.ap-kcol[data-stato="spedito"]       { border-top-color: #22c55e; }

.ap-kcol-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .7rem; padding: 0 .15rem;
}
.ap-kcol-title { font-size: .8rem; font-weight: 700; color: #0f172a; }
.dark .ap-kcol-title { color: #fff; }
.ap-kcol-count {
    font-size: .72rem; font-weight: 700; color: #475569;
    background: #fff; border: 1px solid var(--ap-border);
    border-radius: 9999px; padding: .05rem .55rem; min-width: 1.6rem; text-align: center;
}
.dark .ap-kcol-count { background: rgba(255, 255, 255, .1); color: #e2e8f0; border-color: transparent; }

.ap-kcol-body { display: flex; flex-direction: column; gap: .55rem; }

.ap-kcard {
    background: #fff; border-radius: .7rem; padding: .7rem .8rem;
    box-shadow: var(--ap-shadow); border: 1px solid rgba(16, 24, 40, .05);
    transition: transform .12s ease, box-shadow .12s ease;
}
.ap-kcard:hover { transform: translateY(-2px); box-shadow: var(--ap-shadow-lg); }
.dark .ap-kcard { background: #0f172a; border-color: rgba(255, 255, 255, .08); }
.ap-kcard-num { font-weight: 700; color: #0f172a; font-size: .9rem; }
.dark .ap-kcard-num { color: #fff; }
.ap-kcard-cli { color: #475569; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dark .ap-kcard-cli { color: #cbd5e1; }
.ap-kcard-desc { color: #94a3b8; font-size: .74rem; margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-kcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; font-size: .74rem; color: #64748b; }
.ap-kcard-date { color: var(--ap-indigo); font-weight: 600; }
.ap-kempty { font-size: .75rem; color: #94a3b8; font-style: italic; padding: .5rem .2rem; }