/* STEP150 - skin globale DVM-SUITE.
   Scopo: stesso stile base su tutte le pagine, senza toccare logica applicativa. */

html, body {
  min-height: 100%;
  font-family: var(--dvm-font);
  color: var(--dvm-text);
  background:
    radial-gradient(circle at top left, rgba(61,124,255,.08), transparent 32rem),
    var(--dvm-bg);
}

body {
  margin: 0;
  line-height: 1.4;
}

/* Shell e contenitori storici */
main,
.page,
.content,
.container,
.container-fluid,
.main-content,
.page-content,
.content-shell,
.wrapper,
#app,
#main,
#content {
  box-sizing: border-box;
}

.page,
.content,
.container,
.container-fluid,
.main-content,
.page-content,
.content-shell,
.widget-content,
.panel,
.card,
.box,
.section,
.section-box,
.section-card,
.module-card,
.dashboard-card,
.dvm-card,
.dvm-surface,
fieldset {
  background: var(--dvm-surface);
  border: 1px solid var(--dvm-border);
  border-radius: var(--dvm-radius-md);
  box-shadow: var(--dvm-shadow-soft);
}

.page,
.content,
.container,
.container-fluid,
.main-content,
.page-content,
.content-shell {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

.widget-content,
.panel,
.card,
.box,
.section,
.section-box,
.section-card,
.module-card,
.dashboard-card,
.dvm-card,
.dvm-surface,
fieldset {
  padding: var(--dvm-space-4);
}

/* Titoli */
h1, h2, h3, h4, h5,
.page-title,
.section-title,
.card-title,
.widget-title {
  color: var(--dvm-primary);
  letter-spacing: -.01em;
}

h1, .page-title { font-size: var(--dvm-font-xl); }
h2, .section-title { font-size: 20px; }
h3, .card-title, .widget-title { font-size: var(--dvm-font-lg); }

small,
.help-text,
.text-muted,
.muted,
.description,
.subtitle,
.note {
  color: var(--dvm-muted);
}

/* Navbar/header */
.navbar,
.topbar,
.header,
.site-header,
.main-header,
nav {
  background: var(--dvm-primary);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 10px 30px rgba(8,24,45,.18);
}

.navbar a,
.topbar a,
.header a,
.site-header a,
.main-header a,
nav a {
  color: #fff;
  text-decoration: none;
}

/* Form */
label {
  color: var(--dvm-primary);
  font-size: var(--dvm-font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .035em;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--dvm-border);
  border-radius: var(--dvm-radius-sm);
  color: var(--dvm-text);
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(18,39,67,.02);
}

textarea {
  min-height: 82px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--dvm-accent);
  box-shadow: 0 0 0 3px rgba(61,124,255,.14);
}

/* Bottoni */
button,
.btn,
.button,
input[type="button"],
input[type="submit"],
a.btn,
a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--dvm-border-strong);
  border-radius: var(--dvm-radius-pill);
  background: #fff;
  color: var(--dvm-primary);
  font-weight: 800;
  font-size: var(--dvm-font-sm);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

button:hover,
.btn:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.btn:hover,
a.button:hover {
  background: var(--dvm-surface-soft);
}

.btn-primary,
.button-primary,
.primary,
button.primary,
input.primary {
  background: var(--dvm-primary);
  color: #fff;
  border-color: var(--dvm-primary);
}

.btn-danger,
.button-danger,
.danger {
  background: var(--dvm-danger-bg);
  color: var(--dvm-danger);
  border-color: #efc1c1;
}

/* Chip e stati */
.badge,
.chip,
.pill,
.tag,
.status,
.dvm-chip,
.dvm-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--dvm-border-strong);
  border-radius: var(--dvm-radius-pill);
  background: var(--dvm-surface-soft);
  color: var(--dvm-primary);
  font-size: var(--dvm-font-xs);
  font-weight: 800;
  line-height: 1;
}

.success,
.ok,
.online,
.badge-success,
.chip-success,
.status-ok,
.is-success {
  background: var(--dvm-success-bg);
  color: var(--dvm-success);
  border-color: #b8e0c5;
}

.warning,
.pending,
.badge-warning,
.chip-warning,
.status-warning,
.is-warning {
  background: var(--dvm-warning-bg);
  color: var(--dvm-warning);
  border-color: #efd9a0;
}

.error,
.offline,
.danger,
.badge-danger,
.chip-danger,
.status-error,
.is-danger {
  background: var(--dvm-danger-bg);
  color: var(--dvm-danger);
  border-color: #efc1c1;
}

.info,
.badge-info,
.chip-info,
.status-info,
.is-info {
  background: var(--dvm-info-bg);
  color: var(--dvm-info);
  border-color: #c8dbf6;
}

/* Tabelle */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

table th {
  color: var(--dvm-primary);
  background: var(--dvm-surface-soft);
  font-size: var(--dvm-font-xs);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .035em;
}

table th,
table td {
  border-bottom: 1px solid #e3ecf7;
  padding: 10px 8px;
  vertical-align: top;
}

table tr:hover td {
  background: rgba(61,124,255,.035);
}

/* Grid comuni */
.dvm-grid,
.card-grid,
.kpi-grid,
.metric-grid,
.dashboard-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--dvm-space-4);
}

.dvm-toolbar,
.toolbar,
.actions,
.actions-bar,
.filters,
.filters-bar,
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dvm-space-2);
}

/* Collapse/accordion */
details,
.dvm-collapse,
.accordion,
.collapse,
details.dvm-panel {
  background: var(--dvm-surface);
  border: 1px solid var(--dvm-border);
  border-radius: var(--dvm-radius-md);
  box-shadow: var(--dvm-shadow-soft);
  overflow: hidden;
}

details > summary,
.dvm-collapse > summary,
.accordion-title,
.collapse-title,
.collapse-toggle {
  min-height: 44px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--dvm-primary);
  font-weight: 900;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: var(--dvm-radius-pill);
  background: var(--dvm-info-bg);
  color: var(--dvm-info);
  font-weight: 900;
}

details[open] > summary::before {
  content: "−";
}

/* Alert */
.alert,
.message,
.notice {
  border: 1px solid var(--dvm-border);
  border-radius: var(--dvm-radius-md);
  padding: var(--dvm-space-4);
  background: var(--dvm-info-bg);
  color: var(--dvm-info);
}

.alert-error,
.message-error {
  background: var(--dvm-danger-bg);
  color: var(--dvm-danger);
  border-color: #efc1c1;
}

.alert-success,
.message-success {
  background: var(--dvm-success-bg);
  color: var(--dvm-success);
  border-color: #b8e0c5;
}

/* Utility Penpot-friendly */
.u-stack-8 > * + * { margin-top: 8px; }
.u-stack-12 > * + * { margin-top: 12px; }
.u-stack-16 > * + * { margin-top: 16px; }
.u-row-8 { display: flex; flex-wrap: wrap; gap: 8px; }
.u-row-12 { display: flex; flex-wrap: wrap; gap: 12px; }
.u-row-16 { display: flex; flex-wrap: wrap; gap: 16px; }
.u-muted { color: var(--dvm-muted); }
.u-surface { background: var(--dvm-surface); }
.u-soft { background: var(--dvm-surface-soft); }
.u-radius { border-radius: var(--dvm-radius-md); }
.u-shadow { box-shadow: var(--dvm-shadow-soft); }

@media (max-width: 900px) {
  .page,
  .content,
  .container,
  .container-fluid,
  .main-content,
  .page-content,
  .content-shell {
    max-width: calc(100vw - 16px);
  }

  .dvm-toolbar,
  .toolbar,
  .actions,
  .actions-bar,
  .filters,
  .filters-bar,
  .quick-actions {
    align-items: stretch;
  }

  button,
  .btn,
  .button,
  input[type="button"],
  input[type="submit"],
  a.btn,
  a.button {
    min-width: 0;
  }
}