/* =====================================================================
   GESTIONALE CANTIERI — Dattoli / D.C.G. s.r.l.
   Foglio di stile rinnovato (design system autosufficiente)

   Restyle 2026: grafica moderna e responsive che NON dipende da Bootstrap
   (i vecchi CDN BS4-alpha / Tether non sono affidabili). Qui sono
   ridefinite tutte le utility usate dal markup originale (griglia col-*,
   row, hidden-sm-down/md-down, navbar, dropdown, btn, table, form-control,
   alert, paginazione), così la struttura e la logica PHP restano invariate.

   Indice:
     1.  Design tokens
     2.  Reset & base
     3.  Tipografia
     4.  Layout: container / row / griglia col-*
     5.  Utility (visibilità responsive, allineamento)
     6.  Topbar / Navbar + dropdown + menu mobile
     7.  Bottoni
     8.  Form, input, select, textarea
     9.  Tabelle (+ scroll responsive)
     10. Alert / messaggi (.success .error .failure)
     11. Paginazione (.mypagination)
     12. Login
     13. Card / box / contenuti
     14. Modale (edit via AJAX)
     15. Responsive finale
   ===================================================================== */

/* 1. ----------------------------- DESIGN TOKENS ---------------------- */
:root {
  /* Brand: blu acciaio + arancione cantiere */
  --c-primary-900: #142b45;
  --c-primary-800: #1b3a5c;
  --c-primary-700: #224b75;
  --c-primary-600: #2c5f93;
  --c-primary-500: #3a72ad;
  --c-primary-100: #e7eef6;

  --c-accent-600: #d97706;
  --c-accent-500: #f59e0b;   /* arancione cantiere */
  --c-accent-300: #fcd34d;

  --c-success: #15803d;
  --c-success-bg: #dcfce7;
  --c-error: #b91c1c;
  --c-error-bg: #fee2e2;

  --c-ink: #1f2733;
  --c-ink-soft: #5b6675;
  --c-line: #e2e7ee;
  --c-line-strong: #cdd5e0;
  --c-bg: #f4f6f9;
  --c-surface: #ffffff;
  --c-zebra: #f1f5f9;

  --font-head: "Oswald", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(20, 43, 69, .06), 0 1px 3px rgba(20, 43, 69, .08);
  --shadow-md: 0 6px 18px rgba(20, 43, 69, .10);
  --shadow-lg: 0 18px 40px rgba(20, 43, 69, .18);

  --nav-h: 60px;
  --transition: .2s ease;
}

/* 2. ----------------------------- RESET & BASE --------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
body, table { font-size: 14px; }
a { color: var(--c-primary-600); text-decoration: none; cursor: pointer; transition: color var(--transition); }
a:hover { color: var(--c-accent-600); }
img { max-width: 100%; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: 18px 0; }
button { cursor: pointer; font-family: inherit; }
::selection { background: var(--c-accent-300); color: var(--c-primary-900); }
:focus-visible { outline: 3px solid rgba(58,114,173,.45); outline-offset: 2px; border-radius: 4px; }

/* 3. ----------------------------- TIPOGRAFIA ---------------------- */
h1,h2,h3,h4,h5 { font-family: var(--font-head); font-weight: 600; color: var(--c-primary-900); line-height: 1.15; margin: 0 0 .4em; letter-spacing: .2px; }
b, strong { font-weight: 600; color: var(--c-primary-900); }
/* "titoletti" dei moduli: nel markup sono <b>TITOLO</b> a inizio form */
form > b:first-child {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 1.15rem;
  letter-spacing: .5px;
  color: var(--c-primary-800);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 3px solid var(--c-accent-500);
  margin-bottom: 8px;
}

/* 4. ------------------------ LAYOUT: container/row/col ------------- */
.container { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 16px; }

.row { display: flex; flex-wrap: wrap; margin-inline: -12px; }
.row > [class*="col-"] { padding-inline: 12px; }

/* griglia base mobile-first: col-xs-* valgono sempre */
[class*="col-"] { width: 100%; }
.col-xs-12 { width: 100%; }
.col-xs-6 { width: 50%; }

/* breakpoint md (>=768px): col-md-* */
@media (min-width: 768px) {
  .col-md-1  { width: 8.3333%; }
  .col-md-2  { width: 16.6667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.3333%; }
  .col-md-5  { width: 41.6667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.3333%; }
  .col-md-8  { width: 66.6667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.3333%; }
  .col-md-11 { width: 91.6667%; }
  .col-md-12 { width: 100%; }
}

/* contenuto principale dei moduli */
.content {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  margin: 18px 16px 28px;
}
/* il markup spesso annida .row.content > .col-md-12: evitiamo doppio padding */
.row.content { margin-inline: 16px; }
.row.content > [class*="col-"] { padding-inline: 0; }

/* 5. ----------------------------- UTILITY ------------------------- */
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
center { display: block; }

/* visibilità responsive (come BS4-alpha) */
.hidden-sm-down { display: none !important; }
@media (min-width: 768px) {
  th.hidden-sm-down, td.hidden-sm-down { display: table-cell !important; }
  .hidden-sm-down { display: block !important; }
}
.hidden-md-down { display: none !important; }
@media (min-width: 992px) {
  th.hidden-md-down, td.hidden-md-down { display: table-cell !important; }
  .hidden-md-down { display: block !important; }
}
/* mostra solo su mobile */
.hidden-sm-up { display: block; }
@media (min-width: 768px) { .hidden-sm-up { display: none !important; } }
.hidden-md-up { display: block; }
@media (min-width: 992px) { .hidden-md-up { display: none !important; } }

/* 6. ------------------------ NAVBAR + DROPDOWN -------------------- */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--nav-h);
  padding: 0 18px;
  background: linear-gradient(100deg, var(--c-primary-900), var(--c-primary-700)) !important;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.sticky-top { position: sticky; top: 0; z-index: 1000; }

.navbar-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 1.15rem;
  letter-spacing: .5px; color: #fff !important; text-transform: uppercase;
  padding: 8px 6px; white-space: nowrap;
}
.navbar-brand::before {
  content: ""; width: 26px; height: 26px; flex: none; border-radius: 6px;
  background: linear-gradient(135deg, var(--c-accent-500), var(--c-accent-300));
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}
.navbar-brand:hover { color: var(--c-accent-300) !important; }

/* collapse / lista voci */
.navbar-collapse { display: flex; flex: 1 1 auto; }
.navbar-nav { list-style: none; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; }
.navbar-nav.mr-auto { margin-right: auto; }

.nav-item { position: relative; }
.nav-link {
  display: block; padding: 10px 14px; color: rgba(255,255,255,.88) !important;
  font-weight: 500; font-size: .95rem; border-radius: 8px;
  white-space: nowrap; transition: background var(--transition), color var(--transition);
}
.nav-link:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.dropdown-toggle::after {
  content: ""; display: inline-block; margin-left: 7px;
  border: 5px solid transparent; border-top-color: currentColor; vertical-align: middle;
  position: relative; top: 2px; opacity: .8;
}

/* dropdown */
.dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0;
  min-width: 210px; padding: 8px; margin: 0;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 1200;
}
.dropdown.open > .dropdown-menu,
.nav-item.dropdown:hover > .dropdown-menu { display: block; animation: ddIn .16s ease; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-item {
  display: block; padding: 9px 12px; border-radius: 7px;
  color: var(--c-ink) !important; font-size: .92rem; font-weight: 500;
}
.dropdown-item:hover { background: var(--c-primary-100); color: var(--c-primary-800) !important; }
.dropdown-item b { color: inherit; }

/* hamburger */
.navbar-toggler {
  display: none; margin-left: auto; width: 44px; height: 40px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px; position: relative;
}
.navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 2px;
  background: #fff; transform: translate(-50%,-50%); transition: var(--transition);
}
.navbar-toggler-icon::before { transform: translate(-50%,-7px); }
.navbar-toggler-icon::after { transform: translate(-50%,5px); }

/* 7. ----------------------------- BOTTONI ------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; line-height: 1;
  padding: 10px 16px; border: 1px solid transparent; border-radius: 8px;
  background: var(--c-primary-600); color: #fff; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); color: #fff; }
.btn:active { transform: none; }
.btn-sm { padding: 7px 13px; font-size: .82rem; }
.btn-md { padding: 11px 20px; font-size: .95rem; }

/* il markup usa molto "btn-default": bottone chiaro elegante */
.btn-default {
  background: var(--c-surface); color: var(--c-primary-800);
  border-color: var(--c-line-strong);
}
.btn-default:hover { background: var(--c-primary-100); color: var(--c-primary-900); border-color: var(--c-primary-500); }

.btn-primary { background: var(--c-primary-600); border-color: var(--c-primary-600); color: #fff; }
.btn-primary:hover { background: var(--c-primary-700); }
.btn-secondary { background: #64748b; border-color:#64748b; color:#fff; }
.btn-accent, .btn-warning { background: var(--c-accent-500); border-color: var(--c-accent-500); color: #3a2400; }
.btn-accent:hover, .btn-warning:hover { background: var(--c-accent-600); color:#fff; }
.btn-danger { background: var(--c-error); border-color: var(--c-error); color:#fff; }

input[type="button"], input[type="submit"] { font-family: var(--font-body); font-weight: 600; }

/* 8. ----------------------------- FORM ---------------------------- */
label { font-weight: 600; color: var(--c-ink); font-size: .88rem; }

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], input[type="search"],
select, textarea, .form-control {
  font-family: inherit; font-size: .92rem; color: var(--c-ink);
  background: var(--c-surface); border: 1px solid var(--c-line-strong);
  border-radius: 8px; padding: 9px 12px; min-height: 38px;
  transition: border-color var(--transition), box-shadow var(--transition);
  max-width: 100%;
}
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
select { height: 38px; padding-right: 30px; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235b6675' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input:focus, select:focus, textarea:focus, .form-control:focus {
  outline: none; border-color: var(--c-primary-500);
  box-shadow: 0 0 0 3px rgba(58,114,173,.16);
}
input::placeholder, textarea::placeholder { color: #9aa6b4; }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-primary-600); cursor: pointer; vertical-align: middle; }
input[type="file"] { font-size: .85rem; }

#show_hide_content input[type="text"],
#show_search_content input[type="text"],
#import input, #import select { margin: 4px 6px 4px 0; }

/* 9. ----------------------------- TABELLE ------------------------- */
table { border-collapse: collapse; width: 100%; background: var(--c-surface); }
th, td { padding: 9px 10px; text-align: left; vertical-align: middle; }
thead th, tr:first-child th {
  font-family: var(--font-head); font-weight: 600; font-size: .76rem;
  letter-spacing: .6px; text-transform: uppercase; color: #fff;
  background: var(--c-primary-700);
}
tr:first-child th:first-child { border-top-left-radius: 8px; }
tr:first-child th:last-child { border-top-right-radius: 8px; }
tbody tr, table tr + tr { border-bottom: 1px solid var(--c-line); }
table tr:hover td { background: var(--c-primary-100); transition: background var(--transition); }

/* input "inline" dentro le celle */
td input[type="text"] { min-height: 30px; padding: 5px 6px; border-radius: 6px; }
td input[type="text"]:focus { background: var(--c-surface) !important; box-shadow: 0 0 0 3px rgba(58,114,173,.16); }

/* wrapper per scroll orizzontale su mobile (aggiunto via app.js) */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }

/* icone azione (delete/edit/manage) */
td img[src*="img/"] { transition: transform var(--transition), filter var(--transition); border-radius: 6px; }
td img[src*="img/"]:hover { transform: scale(1.18); }

/* 10. ----------------------------- ALERT -------------------------- */
.success, .error, .failure, .failed {
  display: inline-block; padding: 8px 14px; border-radius: 8px;
  font-weight: 600; font-size: .9rem; margin: 6px 0;
}
.success { color: var(--c-success); background: var(--c-success-bg); border: 1px solid #bbf7d0; }
.error, .failure, .failed { color: var(--c-error); background: var(--c-error-bg); border: 1px solid #fecaca; }

/* 11. ----------------------------- PAGINAZIONE -------------------- */
.mypagination { clear: both; padding: 0; display: inline-block; margin: 14px 0; }
.mypagination li { display: inline; }
.mypagination a, .mypagination span.current, .mypagination span.disabled {
  display: inline-block; min-width: 32px; text-align: center;
  border: 1px solid var(--c-line-strong); color: var(--c-primary-700);
  font-size: .82rem; font-weight: 700; padding: 6px 10px; margin: 2px;
  text-decoration: none; text-transform: uppercase; border-radius: 7px; background: var(--c-surface);
}
.mypagination a:hover, .mypagination a:active { background: var(--c-primary-100); border-color: var(--c-primary-500); }
.mypagination span.current { background: var(--c-primary-700); border-color: var(--c-primary-700); color: #fff; }
.mypagination span.disabled { color: #c2cad4; }
@media (max-width: 768px) {
  .mypagination a { display: none; }
  .mypagination a.ec_pager { display: inline-block; }
}

/* 12. ----------------------------- LOGIN -------------------------- */
body.login-page {
  min-height: 100vh; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary-900), var(--c-primary-700));
  padding: 24px;
  position: relative;
}
body.login-page::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(245,158,11,.10), transparent 45%),
                    radial-gradient(circle at 80% 70%, rgba(58,114,173,.25), transparent 50%);
}
.login-wrap { width: 100%; max-width: 380px; position: relative; z-index: 1; }
.form-login {
  background: var(--c-surface);
  padding: 34px 30px 30px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.form-login .login-logo { max-width: 200px; margin: 0 auto 6px; display: block; }
.form-login h4 { margin: 0 0 18px; }
.form-login .login-title {
  font-family: var(--font-head); font-size: 1.1rem; color: var(--c-primary-800);
  text-transform: uppercase; letter-spacing: 1px; margin: 4px 0 22px;
}
.form-login .form-control,
.form-login input[type="text"], .form-login input[type="password"] {
  width: 100%; margin-bottom: 14px; text-align: left;
}
.form-login .wrapper { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0 6px; flex-wrap: wrap; }
.form-login label, .form-login .remember { font-size: .85rem; color: var(--c-ink-soft); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.form-login .btn { width: 100%; justify-content: center; margin-top: 8px; }
.login-foot { text-align: center; color: rgba(255,255,255,.85); font-size: .8rem; margin-top: 16px; }

/* 13. ----------------------------- CARD / BOX --------------------- */
ul { padding-left: 18px; }
.content ul { list-style: none; padding-left: 0; }
.content ul ul { padding-left: 16px; }

.welcome-box { padding: 30px 26px; }
.welcome-box .hello { font-family: var(--font-head); font-size: 1.6rem; color: var(--c-primary-800); }

/* 14. ----------------------------- MODALE ------------------------- */
.modal {
  display: none; position: fixed; inset: 0; z-index: 2000;
  background: rgba(20,43,69,.5);
  align-items: center; justify-content: center; padding: 20px;
}
.modal.open { display: flex; }
.modal-dialog, .modal-content { background: var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 600px; overflow: hidden; }
.modal-header { padding: 16px 20px; background: var(--c-primary-700); color: #fff; display: flex; justify-content: space-between; align-items: center; }
.modal-header h5 { color: #fff; margin: 0; }
.modal-body { padding: 20px; overflow-x: auto; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--c-line); display: flex; justify-content: flex-end; gap: 8px; }
.modal-close { background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; }

/* 15. ----------------------------- RESPONSIVE --------------------- */
@media (max-width: 991px) {
  .navbar { flex-wrap: wrap; }
  .navbar-toggler { display: block; }
  .navbar-collapse {
    flex-basis: 100%; order: 3;
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .navbar-collapse.open { max-height: 80vh; overflow-y: auto; }
  .navbar-nav { flex-direction: column; align-items: stretch; width: 100%; padding: 8px 0 12px; gap: 0; }
  .nav-link { padding: 13px 10px; border-radius: 8px; }
  .nav-item { width: 100%; }
  .dropdown-menu {
    position: static; box-shadow: none; border: 0; background: rgba(255,255,255,.08);
    padding: 2px 0 6px 10px; min-width: 0;
  }
  .dropdown-item { color: rgba(255,255,255,.85) !important; }
  .dropdown-item:hover { background: rgba(255,255,255,.12); color: #fff !important; }
  .dropdown.open > .dropdown-menu { animation: none; }
  .content, .row.content { margin-inline: 10px; padding: 18px 16px; }
}

@media (max-width: 767px) {
  body, table { font-size: 13px; }
  .content { padding: 16px 12px; }
  .btn, input[type="submit"], input[type="button"] { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}