/* ============================================================================
 *  theme.css  —  Tema professionale "Grassini Impianti / Termofacile"
 * ============================================================================
 *  Layer di modernizzazione sopra Bootstrap 3.3.7.
 *  Si applica automaticamente a tutte le pagine che includono header.php/footer.php
 *  SENZA modificare la griglia o rompere il markup esistente.
 *
 *  Direzione di design: enterprise raffinato.
 *   - Palette: blu/navy (tecnico, affidabile) + accento ambra (caldo/freddo HVAC)
 *   - Tipografia: Sora (titoli) + Manrope (testo)
 *   - Superfici pulite, ombre morbide, angoli arrotondati, micro-interazioni
 *
 *  Caricare DOPO bootstrap.min.css.
 *  Font e icone: Google Fonts + Font Awesome 6 (vedi header.php/login.php).
 * ============================================================================ */

:root {
    /* --- Brand --- */
    --c-primary:        #1d4ed8;   /* blu tecnico */
    --c-primary-dark:   #1437a8;
    --c-primary-darker: #0f2a7a;
    --c-primary-soft:   #eaf0ff;
    --c-accent:         #f59e0b;   /* ambra (caldo) */
    --c-accent-dark:    #d97706;

    /* --- Stato --- */
    --c-success: #16a34a;
    --c-danger:  #dc2626;
    --c-warning: #f59e0b;
    --c-info:    #0ea5e9;

    /* --- Neutri --- */
    --c-bg:        #eef2f9;
    --c-bg-grad-1: #eef3fb;
    --c-bg-grad-2: #e7ecf6;
    --c-surface:   #ffffff;
    --c-text:      #1f2a37;
    --c-muted:     #647084;
    --c-border:    #e2e8f0;
    --c-border-2:  #cbd5e1;

    /* --- Forma --- */
    --radius:    14px;
    --radius-sm: 10px;
    --radius-xs: 8px;

    /* --- Ombre --- */
    --shadow-sm: 0 1px 2px rgba(16,30,54,.06), 0 1px 3px rgba(16,30,54,.05);
    --shadow-md: 0 4px 12px rgba(16,30,54,.08), 0 2px 4px rgba(16,30,54,.04);
    --shadow-lg: 0 18px 40px rgba(16,30,54,.14), 0 6px 14px rgba(16,30,54,.08);

    --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Sora', 'Manrope', sans-serif;
}

/* ---------------------------------------------------------------- Base ---- */
body {
    font-family: var(--font-body);
    color: var(--c-text);
    background-color: var(--c-bg);
    background-image:
        radial-gradient(1200px 600px at 100% -5%, rgba(29,78,216,.07), transparent 60%),
        radial-gradient(900px 500px at -10% 0%, rgba(245,158,11,.06), transparent 55%),
        linear-gradient(180deg, var(--c-bg-grad-1), var(--c-bg-grad-2));
    background-attachment: fixed;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 {
    font-family: var(--font-heading);
    color: #15233a;
    letter-spacing: -.01em;
    font-weight: 700;
}
h2 { font-weight: 800; }

a {
    color: var(--c-primary);
    transition: color .15s ease;
}
a:hover, a:focus { color: var(--c-primary-dark); text-decoration: none; }

/* ====================================================================
   LARGHEZZA CONTENITORE — a tutta pagina su TUTTE le pagine
   ====================================================================
   Bootstrap 3 fissa .container a larghezze rigide (750/970/1170 px) tramite
   media query, lasciando ampi margini ai lati sugli schermi grandi e
   "strozzando" le tabelle larghe (es. Lista Preventivi). Annullando quelle
   larghezze il contenitore si comporta come .container-fluid e usa l'intera
   pagina, con un piccolo respiro ai lati.
   Tutte le pagine caricano questo foglio (via header.php o link diretto),
   quindi questa singola regola le rende full-width tutte insieme.
   Rif.: Bootstrap 3 Grid system — https://getbootstrap.com/docs/3.4/css/#grid */
.container {
    width: auto !important;   /* annulla le larghezze fisse di BS3 a ogni breakpoint */
    max-width: 100%;          /* mai oltre la larghezza della pagina */
    padding-top: 8px;
    padding-left: 18px;       /* respiro ai lati: non incollato ai bordi */
    padding-right: 18px;
}

/* ------------------------------------------------------------- Navbar ---- */
#header { margin-bottom: 22px; }

.navbar.navbar-default {
    background: linear-gradient(120deg, var(--c-primary-darker), var(--c-primary) 60%, #2b62e6);
    border: 0;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    min-height: 58px;
    /* overflow rimosso: stava ritagliando i menu a tendina che escono in basso */
    position: relative;
}
.navbar.navbar-default::after { /* sottile accento ambra in basso */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, var(--c-accent), transparent 70%);
    opacity: .9;
    border-radius: 0 0 var(--radius) var(--radius); /* segue gli angoli arrotondati */
    pointer-events: none; /* non blocca i click */
}

/* Dropdown della navbar: sopra qualsiasi altro elemento della pagina */
.navbar .dropdown-menu { z-index: 1050; }

.navbar-default .navbar-nav > li > a {
    color: rgba(255,255,255,.86);
    font-weight: 600;
    font-size: 14px;
    padding: 18px 16px;
    display: flex; align-items: center; gap: 8px;
    transition: background .15s ease, color .15s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background: rgba(255,255,255,.12);
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    background: rgba(255,255,255,.16);
    color: #fff;
}
.navbar-default .navbar-nav > li > a .fa { font-size: 15px; opacity: .95; }
.navbar-default .navbar-text { color: rgba(255,255,255,.92); font-weight: 600; }
.navbar-default .navbar-text a { color: #fff; }
.navbar .caret { opacity: .8; }

/* icone PNG legacy (ico/*.png) nella navbar: nascoste se si usano le icone FA */
.navbar-nav img { display: none; }

/* Dropdown moderni */
.dropdown-menu {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    margin-top: 6px;
    min-width: 230px;
}
.dropdown-menu > li > a {
    border-radius: var(--radius-xs);
    padding: 9px 12px;
    color: var(--c-text);
    font-weight: 500;
    display: flex; align-items: center; gap: 10px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--c-primary-soft);
    color: var(--c-primary-dark);
}
.dropdown-menu > li > a img { display: none; }
.dropdown-menu .divider { background: var(--c-border); margin: 6px 4px; }

/* --------------------------------------------------------------- Card ---- */
/* Bootstrap 3 panel/well/thumbnail modernizzati come "card" */
.panel, .well, .thumbnail {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.panel { overflow: hidden; }
.panel-heading {
    background: #f8fafc;
    border-bottom: 1px solid var(--c-border);
    font-family: var(--font-heading);
    font-weight: 700;
    color: #15233a;
    padding: 14px 18px;
}
.panel-body { padding: 18px; }
.panel-default > .panel-heading { color: #15233a; }
.panel-primary { border-color: transparent; }
.panel-primary > .panel-heading {
    background: linear-gradient(120deg, var(--c-primary-dark), var(--c-primary));
    border-color: transparent; color: #fff;
}
.well { box-shadow: var(--shadow-sm); }

/* ------------------------------------------------------------ Buttons ---- */
.btn {
    border-radius: var(--radius-xs);
    font-weight: 600;
    letter-spacing: .005em;
    border: 1px solid transparent;
    padding: 8px 16px;
    transition: transform .08s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(29,78,216,.25);
}
.btn-lg { padding: 12px 22px; border-radius: var(--radius-sm); font-size: 16px; }
.btn-sm { padding: 5px 11px; }

.btn-primary {
    background: linear-gradient(120deg, var(--c-primary), var(--c-primary-dark));
    box-shadow: var(--shadow-sm);
}
.btn-primary:hover, .btn-primary:focus { filter: brightness(1.06); background: linear-gradient(120deg, var(--c-primary), var(--c-primary-dark)); }

.btn-success { background: var(--c-success); }
.btn-success:hover, .btn-success:focus { filter: brightness(1.05); background: var(--c-success); }
.btn-danger  { background: var(--c-danger); }
.btn-danger:hover, .btn-danger:focus { filter: brightness(1.05); background: var(--c-danger); }
.btn-warning { background: var(--c-accent); color: #fff; }
.btn-warning:hover, .btn-warning:focus { filter: brightness(1.04); background: var(--c-accent); color: #fff; }
.btn-info    { background: var(--c-info); color: #fff; }
.btn-info:hover, .btn-info:focus { filter: brightness(1.05); background: var(--c-info); color: #fff; }

.btn-default {
    background: var(--c-surface);
    border-color: var(--c-border-2);
    color: var(--c-text);
}
.btn-default:hover, .btn-default:focus {
    background: #f8fafc; border-color: var(--c-primary); color: var(--c-primary-dark);
}

/* --------------------------------------------------------------- Form ---- */
.form-control {
    border: 1px solid var(--c-border-2);
    border-radius: var(--radius-xs);
    box-shadow: none;
    color: var(--c-text);
    height: auto;
    padding: 10px 13px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px rgba(29,78,216,.16);
}
label, .control-label { font-weight: 600; color: #33405a; }
.input-group-addon {
    background: #f1f5fb; border-color: var(--c-border-2); border-radius: var(--radius-xs);
}

/* -------------------------------------------------------------- Table ---- */
.table { background: var(--c-surface); }
.table > thead > tr > th {
    background: #f4f7fc;
    border-bottom: 2px solid var(--c-border);
    color: #33405a;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11.5px;
    letter-spacing: .04em;
    padding: 12px 14px;
}
.table > tbody > tr > td { padding: 11px 14px; vertical-align: middle; border-color: #eef1f6; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #f9fbfe; }
.table-hover > tbody > tr:hover { background: var(--c-primary-soft); }

/* tabelle dentro una "card" */
.table-responsive {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* ------------------------------------------------------------- Alerts ---- */
.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 14px 18px;
    font-weight: 500;
}
.alert h3, .alert h4 { margin-top: 0; }
.alert-success { background: #e8f7ee; color: #14692f; border-left-color: var(--c-success); }
.alert-danger  { background: #fdeaea; color: #9b1c1c; border-left-color: var(--c-danger); }
.alert-warning { background: #fef5e6; color: #92590a; border-left-color: var(--c-warning); }
.alert-info    { background: #e6f6fd; color: #075781; border-left-color: var(--c-info); }

/* -------------------------------------------------------- Badge/Label ---- */
.label, .badge {
    font-weight: 700;
    border-radius: 999px;
    padding: .3em .7em;
    font-size: 11px;
    letter-spacing: .02em;
}
.badge { background: var(--c-primary); }

/* --------------------------------------------------------- Pagination ---- */
.pagination > li > a, .pagination > li > span {
    color: var(--c-primary);
    border-color: var(--c-border);
}
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover {
    background: var(--c-primary); border-color: var(--c-primary);
}

/* ------------------------------------------------------- Utility/extra ---- */
.modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.modal-header  { border-bottom: 1px solid var(--c-border); }
.modal-footer  { border-top: 1px solid var(--c-border); }
hr { border-top: 1px solid var(--c-border); }

::selection { background: rgba(29,78,216,.18); }

/* Scrollbar discreta (WebKit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #c2ccdb; border-radius: 8px; border: 2px solid var(--c-bg); }
::-webkit-scrollbar-thumb:hover { background: #a8b4c7; }

/* Animazione d'ingresso leggera (rispetta prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    .fade-in-up { animation: fadeInUp .5s cubic-bezier(.22,.61,.36,1) both; }
    @keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* ====================================================================
   COLONNA STATUS nella lista preventivi
   ====================================================================
   La colonna status contiene un <select> + un piccolo bottone Salva.
   Va resa larga abbastanza da NON troncare il testo del select.        */
.col-status { min-width: 200px; max-width: 260px; }

/* form inline dentro la cella: select + bottone Salva, SEMPRE su una riga */
.form-status { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: nowrap; }

/* il select resta leggibile ma NON deve allargare la colonna oltre misura:
   larghezza automatica con un tetto massimo; se l'opzione è lunga viene
   troncata con i puntini invece di "esplodere" la cella e coprire la riga. */
.form-status .input-status {
    width: auto !important;
    min-width: 120px;
    max-width: 180px;            /* tetto: impedisce alla colonna di allargarsi troppo */
    flex: 1 1 auto;
    height: 32px;
    font-size: 12.5px;
    padding: 4px 8px;
    text-overflow: ellipsis;     /* opzione troppo lunga -> ellissi, non allarga la cella */
}

/* bottone Salva accanto al select: compatto e non a tutta larghezza */
.form-status input[type="submit"],
.form-status button[type="submit"] {
    height: 32px;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: var(--radius-xs);
    background: var(--c-primary);
    color: #fff;
    border: 1px solid var(--c-primary);
    cursor: pointer;
    white-space: nowrap;
}
.form-status input[type="submit"]:hover { background: var(--c-primary-dark); }