/* === DMP Theme (light + dim) === */
:root {
  /* neutrali */
  --bg-0: #F8FAFC;   /* sfondo app */
  --bg-1: #FFFFFF;   /* superfici / card */
  --line-1: #E5E7EB; /* bordi */
  --text-1: #0F172A; /* testo principale */
  --text-2: #475569; /* testo secondario */
  --muted:  #94A3B8; /* elementi disattivi */

  /* ACCENT: scegli set (teal di default) */
  --accent:        #0EA5A9; /* principale */
  --accent-hover:  #0C8E92;
  --accent-soft:   #CCFBF1;
  --accent-ink:    #FFFFFF; /* testo su accent */

  /* stati */
  --success: #10B981; --success-ink: #FFFFFF;
  --warn:    #F59E0B; --warn-ink:    #111827;
  --danger:  #EF4444; --danger-ink:  #FFFFFF;

  --focus:   #22D3EE; /* anello focus accessibile */
  --shadow:  0 1px 2px rgba(2,6,23,.06), 0 2px 8px rgba(2,6,23,.08);
}

/* Variante “dim” (chiaro soft) */
html[data-theme="dim"] {
  --bg-0: #F4F6F8;
  --bg-1: #FCFDFE;
  --line-1: #E2E8F0;
  --text-1: #0B1220;
  --text-2: #3C4A5D;
}

/* Applicazione delle variabili a componenti comuni */
html, body { background: var(--bg-0); color: var(--text-1); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

.navbar, .topbar, .sidebar { background: var(--bg-1); border-bottom: 1px solid var(--line-1); box-shadow: var(--shadow); }
.card, .panel, .modal { background: var(--bg-1); border: 1px solid var(--line-1); border-radius: 12px; box-shadow: var(--shadow); }

.btn { border: 1px solid var(--line-1); background: var(--bg-1); color: var(--text-1); border-radius: 10px; padding: .6rem .9rem; }
.btn:hover { border-color: var(--accent); }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.input, select, textarea {
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--line-1); border-radius: 10px; padding: .55rem .7rem;
}
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; }

.table th { background: #F1F5F9; color: var(--text-2); }
.table td, .table th { border-color: var(--line-1); }

.badge { border-radius: 999px; padding: .15rem .5rem; font-weight: 600; }
.badge-success { background: var(--success); color: var(--success-ink); }
.badge-warn    { background: var(--warn);    color: var(--warn-ink); }
.badge-danger  { background: var(--danger);  color: var(--danger-ink); }


/* === Icon system === */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.icon{display:inline-block;line-height:1;font-size:1rem;vertical-align:middle}
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;border-radius:8px;
  border:1px solid var(--line-1);background:var(--bg-1);color:var(--text-1);text-decoration:none
}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.actions{display:flex;gap:.4rem;flex-wrap:wrap}


/* === Responsive layout / mobile === */
@media (max-width: 1024px){
  .layout{grid-template-columns:1fr}
  .sb-toggle{display:inline-flex}
  .sidebar{
    position:fixed;top:56px;left:0;bottom:0;width:280px;background:var(--bg-1);
    transform:translateX(-100%);transition:transform .2s ease;z-index:40;box-shadow:var(--shadow)
  }
  html.sb-open .sidebar{transform:translateX(0)}
}

@media (max-width: 640px){
  .card{border-radius:10px}
  .btn{padding:.55rem .8rem}
  .table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .hide-sm{display:none!important}
}

/* Burger in topbar */
.sb-toggle{
  display:none;align-items:center;justify-content:center;margin-left:.5rem;
  width:2.2rem;height:2.2rem;border-radius:8px;border:1px solid var(--line-1);background:var(--bg-1)
}
.sb-toggle:hover{border-color:var(--accent);color:var(--accent)}

/* === Typography system === */
:root{
  /* Font families */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Scala dimensioni (base 16px) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  28px;
  --fs-4xl:  clamp(28px, 4vw, 36px);

  /* Pesi */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Altezza riga */
  --lh-tight: 1.25;
  --lh-base:  1.55;
  --lh-loose: 1.75;
}

html { font-family: var(--font-sans); font-size: 16px; }
body { font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text-1); }

h1, h2, h3, h4, h5, h6 {
  color: var(--text-1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  margin: 0 0 .6rem 0;
}
h1{ font-size: var(--fs-4xl); }
h2{ font-size: var(--fs-3xl); }
h3{ font-size: var(--fs-2xl); }
h4{ font-size: var(--fs-xl); }
h5{ font-size: var(--fs-lg); }
h6{ font-size: var(--fs-base); color: var(--text-2); }

p{ margin: 0 0 .8rem 0; color: var(--text-1); }
small, .text-small{ font-size: var(--fs-sm); color: var(--text-2); }
.muted, .text-muted{ color: var(--text-2); }
.code, code, pre{ font-family: var(--font-mono); font-size: var(--fs-sm); }

label{ font-size: var(--fs-sm); color: var(--text-2); font-weight: var(--fw-medium); }
.help-text{ font-size: var(--fs-xs); color: var(--muted); }

::placeholder{ color: var(--muted); opacity: 1; }

/* Link ben visibili ma non aggressivi */
a { color: var(--accent); }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* === Buttons system === */
:root{
  --btn-h: 2.5rem;
  --btn-r: 10px;
  --btn-pad-x: .95rem;
  --btn-gap: .45rem;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--btn-gap);
  height: var(--btn-h); padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-r); border: 1px solid var(--line-1);
  background: var(--bg-1); color: var(--text-1);
  font-weight: var(--fw-medium); font-size: var(--fs-sm); line-height: 1;
  text-decoration:none; cursor:pointer; user-select:none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .02s ease;
}
.btn:hover{ border-color: var(--accent); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }
.btn[disabled], .btn.disabled{ opacity:.6; pointer-events:none; }

/* Varianti */
.btn-primary{
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.btn-primary:hover{ background: var(--accent-hover); border-color: var(--accent-hover); }

.btn-secondary{
  background: var(--accent-soft); border-color: rgba(0,0,0,.04); color: var(--text-1);
}
.btn-secondary:hover{ border-color: var(--accent); }

.btn-outline{
  background: transparent; color: var(--accent); border-color: var(--accent);
}
.btn-outline:hover{ background: var(--accent-soft); }

.btn-ghost{
  background: transparent; border-color: transparent; color: var(--text-1);
}
.btn-ghost:hover{ background: rgba(2,6,23,.05); }

.btn-danger{
  background: var(--danger); border-color: var(--danger); color: var(--danger-ink);
}
.btn-danger:hover{ filter: brightness(.95); }

.btn-success{
  background: var(--success); border-color: var(--success); color: var(--success-ink);
}
.btn-success:hover{ filter: brightness(.95); }

.btn-warn{
  background: var(--warn); border-color: var(--warn); color: var(--warn-ink);
}
.btn-warn:hover{ filter: brightness(.95); }

/* Dimensioni */
.btn-sm{ height: 2.1rem; font-size: var(--fs-xs); padding: 0 .7rem; border-radius: 8px; }
.btn-lg{ height: 3rem; font-size: var(--fs-base); padding: 0 1.1rem; border-radius: 12px; }
.btn-block{ display:flex; width:100%; }

/* Bottoni “link” (per azioni testuali) */
.btn-link{
  background: transparent; border: none; color: var(--accent); padding: 0; height:auto;
}
.btn-link:hover{ text-decoration: underline; }

/* Icon-button allineato al sistema icone */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:8px;
  border:1px solid var(--line-1); background:var(--bg-1); color:var(--text-1);
}
.icon-btn:hover{ border-color: var(--accent); color: var(--accent); }

/* Input e select coerenti con la tipografia */
.input, select, textarea {
  font-family: var(--font-sans); font-size: var(--fs-sm);
  background: var(--bg-1); color: var(--text-1);
  border: 1px solid var(--line-1); border-radius: 10px; padding: .55rem .7rem;
}
.input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

/* Header tabella più leggibile */
.table th { background: #F1F5F9; color: var(--text-2); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.table td { font-size: var(--fs-sm); }


/* === Forms — force light theme globally (companies & everywhere) === */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background: var(--bg-1) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--line-1) !important;
  border-radius: 10px;
  padding: .55rem .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
  border-color: var(--accent) !important;
}

/* Disabled / readonly */
input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly]{
  background: #F3F4F6 !important;
  color: var(--text-2) !important;
}

/* Placeholder color */
::placeholder { color: var(--muted); opacity: 1; }

/* File input button (Chrome/Edge/Firefox) */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button{
  background: var(--bg-1);
  color: var(--text-1);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  padding: .4rem .7rem;
  margin-right: .6rem;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover{
  border-color: var(--accent);
}

/* Compat layer per classi legacy eventualmente presenti */
.dmp-input,
.form-control,
.vertical input,
.vertical select,
.vertical textarea,
.dark input,
.dark select,
.dark textarea,
.form-dark input,
.form-dark select,
.form-dark textarea {
  background: var(--bg-1) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--line-1) !important;
}

/* === Forms + Labels contrast tuning (global) === */

/* Variabili di contrasto leggermente più scure */
:root{
  --line-2: #CBD5E1;      /* bordo celle/campi più visibile */
  --label:  #334155;      /* etichette più leggibili */
}

/* Label più scure e leggibili */
label,
.form label,
.field label {
  color: var(--label) !important;
  font-weight: var(--fw-medium);
  opacity: 1;
}

/* Bordo celle/campi leggermente più scuro */
.card, .panel, .modal { border-color: var(--line-2) !important; }
.table td, .table th { border-color: var(--line-2) !important; }

/* Campi input/select/textarea coerenti (niente blu) */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select,
textarea{
  background: var(--bg-1) !important;
  color: var(--text-1) !important;            /* testo non blu */
  border: 1px solid var(--line-2) !important; /* bordo più visibile */
  border-radius: 10px;
  padding: .55rem .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  box-shadow: none !important;
}

/* Focus: elimina l’alone blu di default e usa quello del tema */
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--focus) !important;   /* anello tema */
  outline-offset: 2px !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Autofill WebKit (testo che appare blu/strano in alcuni browser) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill{
  -webkit-text-fill-color: var(--text-1) !important;
  box-shadow: 0 0 0px 1000px var(--bg-1) inset !important;
  caret-color: var(--text-1);
}

/* Pulsante del file input */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button{
  background: var(--bg-1);
  color: var(--text-1);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: .4rem .7rem;
  margin-right: .6rem;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover{
  border-color: var(--accent);
}


/* === FINAL OVERRIDE: labels + textarea (kill old dark styles) === */

/* Etichette: rendile leggibili ovunque (sovrascrive classi legacy come .label/.control-label) */
label,
.label,
.form-label,
.control-label,
.field > label,
.field .label,
.vertical > label,
.vertical .field > label,
.form .field > label,
.form .label {
  color: var(--label) !important;       /* #334155 di default (vedi :root in theme.css) */
  font-weight: var(--fw-medium);
  opacity: 1 !important;
}

/* Textarea: forza sfondo chiaro anche contro selettori super specifici del vecchio tema */
textarea,
.field textarea,
.vertical textarea,
.form textarea,
.card textarea,
.panel textarea,
.modal textarea {
  background: var(--bg-1) !important;   /* chiaro */
  color: var(--text-1) !important;      /* testo normale, non blu */
  border: 1px solid var(--line-2) !important;  /* bordo più visibile */
  border-radius: 10px;
  padding: .55rem .7rem;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  box-shadow: none !important;
}

/* Focus coerente con il tema (niente alone blu) */
textarea:focus,
textarea:focus-visible {
  outline: 2px solid var(--focus) !important;
  outline-offset: 2px !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
}

/* Per sicurezza: se qualche wrapper “dark” impone il blu, neutralizzalo sui figli */
.form-dark textarea,
.dark textarea,
.vertical.dark textarea {
  background: var(--bg-1) !important;
  color: var(--text-1) !important;
  border-color: var(--line-2) !important;
}

