/**
 * Dashboard Modernization - Light Modern Theme
 * Clean, white, professional UI for Forms module
 */

/* ============================================================
   CSS VARIABLES
   ============================================================ */
:root {
  --dash-primary: #4f46e5;
  --dash-primary-rgb: 79, 70, 229;
  --dash-primary-light: #6366f1;
  --dash-primary-lighter: #e0e7ff;
  --dash-accent: #0891b2;
  --dash-accent-rgb: 8, 145, 178;
  --dash-success: #059669;
  --dash-success-rgb: 5, 150, 105;
  --dash-warning: #d97706;
  --dash-danger: #dc2626;
  --dash-bg: #f8fafc;
  --dash-bg-white: #ffffff;
  --dash-bg-subtle: #f1f5f9;
  --dash-border: #e2e8f0;
  --dash-border-light: #f1f5f9;
  --dash-text: #1e293b;
  --dash-text-secondary: #64748b;
  --dash-text-muted: #94a3b8;
  --dash-radius: 14px;
  --dash-radius-sm: 10px;
  --dash-radius-xs: 6px;
  --dash-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --dash-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --dash-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.04);
  --dash-transition: all 0.2s ease;
}

/* ============================================================
   BODY & BASE
   ============================================================ */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0 !important;
  min-width: auto !important;
  background: var(--dash-bg) !important;
  color: var(--dash-text) !important;
  min-height: 100vh;
  line-height: 1.5;
}

/* ============================================================
   MAIN DIV CONTAINER
   ============================================================ */
#mainDiv {
  max-width: 1600px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  animation: dashFadeIn 0.4s ease both;
}

@keyframes dashFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

#bck-logo {
  display: none !important;
}

/* ============================================================
   REFRESH STATE BAR
   ============================================================ */
#refreshState {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  padding: 0.5rem 1rem !important;
  margin-bottom: 0.75rem;
  cursor: pointer;
  transition: var(--dash-transition);
  box-shadow: var(--dash-shadow-sm);
}

#refreshState:hover {
  border-color: rgba(var(--dash-primary-rgb), 0.3) !important;
  box-shadow: var(--dash-shadow);
}

#refreshState table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}

#refreshState td {
  border: none !important;
  padding: 0 0.5rem !important;
  color: var(--dash-text) !important;
  vertical-align: middle !important;
}

#refreshStateM, #refreshStateS {
  color: var(--dash-text-muted) !important;
  font-size: 0.8rem !important;
  font-weight: 500;
}

#refreshStateBar {
  height: 6px !important;
  border-radius: 3px !important;
  overflow: hidden !important;
  background: var(--dash-bg-subtle) !important;
}

/* jQuery UI progressbar override */
#refreshStateBar .ui-progressbar-value,
.ui-widget-header {
  background: linear-gradient(135deg, var(--dash-primary), var(--dash-accent)) !important;
  border: none !important;
  border-radius: 3px !important;
}

.progress-label {
  color: var(--dash-text-muted) !important;
  font-size: 0.7rem !important;
  margin-top: 2px;
}

/* ============================================================
   CONFIG STATE BAR
   ============================================================ */
#configState {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  padding: 0.5rem 1rem !important;
  margin-bottom: 0.75rem;
  box-shadow: var(--dash-shadow-sm);
}

#configState table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
}

#configState td {
  border: none !important;
  padding: 0 0.5rem !important;
  color: var(--dash-text) !important;
  vertical-align: middle !important;
}

#configState input[type="checkbox"] {
  accent-color: var(--dash-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#configState label {
  color: var(--dash-text) !important;
  cursor: pointer;
  font-size: 0.875rem;
}

#configSpeach {
  color: var(--dash-text-secondary) !important;
  font-size: 0.85rem !important;
}

/* ============================================================
   HORIZONTAL RULES / SEPARATORS
   ============================================================ */
hr.line-black,
hr.line-red {
  border: none !important;
  height: 1px !important;
  background: var(--dash-border-light) !important;
  margin: 0.625rem 0 !important;
}

hr.line-red {
  background: linear-gradient(90deg, transparent, rgba(var(--dash-primary-rgb), 0.2), transparent) !important;
}

div.hr {
  background: var(--dash-border-light) !important;
  padding: 0 !important;
  height: 1px !important;
  opacity: 1 !important;
}

div.hr.red {
  background: rgba(220, 38, 38, 0.15) !important;
}

/* ============================================================
   BACKGROUND OVERRIDES (cornsilk, beige, aliceblue -> white cards)
   ============================================================ */
div[align="center"][style*="background-color: cornsilk"],
div[style*="background-color:cornsilk"],
div[style*="background-color: cornsilk"],
div[style*="background-color:beige"],
div[style*="background-color: beige"],
div[style*="background-color:white"],
div[style*="background-color: white"],
div[style*="background-color:aliceblue"],
div[style*="background-color: aliceblue"] {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  color: var(--dash-text) !important;
}

/* ============================================================
   SEMAPHORE BAR
   ============================================================ */
div[style*="border:1px solid #73AD21"][style*="display: inline-flex"] {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  padding: 0.5rem 0.75rem !important;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: var(--dash-shadow-sm);
}

/* Individual semaphore items */
div[style*="border:1px solid #73AD21"][style*="margin-left: 2px"] {
  background: var(--dash-bg-subtle) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius-xs) !important;
  padding: 0.375rem 0.625rem !important;
  transition: var(--dash-transition);
}

div[style*="border:1px solid #73AD21"][style*="margin-left: 2px"]:hover {
  background: var(--dash-primary-lighter) !important;
  border-color: rgba(var(--dash-primary-rgb), 0.3) !important;
}

/* ============================================================
   MAIN 3-COLUMN LAYOUT (#div-header)
   ============================================================ */
#div-header {
  display: flex !important;
  gap: 0.75rem !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  margin-top: 0.75rem;
}

/* Column Cards */
#orologio,
#interni,
#esterni {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  padding: 1rem !important;
  box-shadow: var(--dash-shadow-sm);
  transition: var(--dash-transition);
  overflow: hidden;
  color: var(--dash-text) !important;
}

#orologio:hover,
#interni:hover,
#esterni:hover {
  box-shadow: var(--dash-shadow);
  border-color: rgba(var(--dash-primary-rgb), 0.2) !important;
}

#orologio > div,
#interni > div,
#esterni > div {
  color: var(--dash-text) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
  border-collapse: collapse !important;
}

td[style*="background-color: whitesmoke"],
td[style*="background-color:whitesmoke"] {
  background-color: var(--dash-bg-subtle) !important;
}

.th-data-header,
.td-data-header {
  background-color: var(--dash-bg-subtle) !important;
  color: var(--dash-text) !important;
  border: 1px solid var(--dash-border) !important;
}

.th-data-prov {
  background-color: var(--dash-bg-subtle) !important;
  color: var(--dash-text-secondary) !important;
  border-bottom: 1px solid var(--dash-border) !important;
}

.td-data-provv {
  background-color: var(--dash-bg-white) !important;
  color: var(--dash-text) !important;
  border-color: var(--dash-border) !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-flat {
  background: var(--dash-bg-white) !important;
  color: var(--dash-text) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius-xs) !important;
  padding: 0.4375rem 0.875rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  transition: var(--dash-transition);
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
}

.btn-flat:hover {
  background: var(--dash-primary-lighter) !important;
  border-color: rgba(var(--dash-primary-rgb), 0.3) !important;
  color: var(--dash-primary) !important;
  box-shadow: var(--dash-shadow-sm);
}

.plusround {
  border-radius: var(--dash-radius-xs) !important;
}

.btn-nosize {
  font-size: inherit !important;
}

/* Button colors for semaphore states */
.btn-flat.red,
.btn-flat.Red {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

.btn-flat.blue,
.btn-flat.Blue {
  background: #ecfeff !important;
  border-color: #a5f3fc !important;
  color: #0e7490 !important;
}

.btn-flat.green,
.btn-flat.Green {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}

/* ============================================================
   BLINK ANIMATIONS
   ============================================================ */
.blink {
  animation: dashBlink 1.5s ease-in-out infinite !important;
}

.blink.red { color: var(--dash-danger) !important; }
.blink.blue { color: var(--dash-accent) !important; }
.blink.green { color: var(--dash-success) !important; }
.blink.orange { color: var(--dash-warning) !important; }

.blinkgreen {
  animation: dashBlink 1.5s ease-in-out infinite !important;
  color: var(--dash-success) !important;
}

@keyframes dashBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ============================================================
   TITLES & TEXT
   ============================================================ */
p.pTitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  color: var(--dash-text) !important;
  margin: 0.5rem 0 !important;
}

td, th, p, span, div, label, b, strong, i, em, small {
  color: inherit;
}

a {
  color: var(--dash-primary) !important;
  text-decoration: none !important;
  transition: var(--dash-transition);
}

a:hover {
  color: var(--dash-primary-light) !important;
}

b, strong {
  color: var(--dash-text);
}

/* ============================================================
   SCROLLABLE CONTAINERS
   ============================================================ */
div.Tscroll {
  margin: 0.5rem !important;
  padding: 0.5rem !important;
  border-radius: var(--dash-radius-xs);
}

div.Tscroll::-webkit-scrollbar {
  width: 6px;
}

div.Tscroll::-webkit-scrollbar-track {
  background: var(--dash-bg-subtle);
  border-radius: 3px;
}

div.Tscroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

div.Tscroll::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================================
   SPECIAL / NORMAL DIV SECTIONS
   ============================================================ */
div.special {
  border: 1px solid #fecaca !important;
  border-radius: var(--dash-radius-sm) !important;
  padding: 0.5rem !important;
  background: #fef2f2 !important;
  color: var(--dash-text) !important;
}

div.normal {
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius-sm) !important;
  padding: 0.5rem !important;
  background: var(--dash-bg-white) !important;
  color: var(--dash-text) !important;
}

/* ============================================================
   SVG ICONS
   ============================================================ */
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: var(--dash-primary) !important;
}

.svg-icon circle {
  stroke: var(--dash-primary) !important;
}

.svg-icon-25 path,
.svg-icon-25 polygon,
.svg-icon-25 rect {
  fill: var(--dash-primary) !important;
}

.svg-icon-35 path,
.svg-icon-35 polygon,
.svg-icon-35 rect {
  fill: var(--dash-primary) !important;
}

a svg {
  fill: var(--dash-text-secondary) !important;
}

a:hover svg {
  fill: var(--dash-primary) !important;
}

/* ============================================================
   CANVAS (Clock)
   ============================================================ */
#headCanvas {
  zoom: 0.6 !important;
  -moz-transform: scale(0.6) !important;
  margin: 0.5rem auto !important;
  display: block;
  border-radius: var(--dash-radius-xs);
}

/* ============================================================
   HINTS / TOOLTIPS
   ============================================================ */
[class*="hint--"]::after {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  border-radius: var(--dash-radius-xs) !important;
  padding: 0.375rem 0.75rem !important;
}

/* ============================================================
   JQUERY UI OVERRIDES
   ============================================================ */
.ui-widget {
  font-family: 'Inter', sans-serif !important;
}

.ui-widget-content {
  background: var(--dash-bg-white) !important;
  color: var(--dash-text) !important;
  border: 1px solid var(--dash-border) !important;
}

.ui-dialog {
  border-radius: var(--dash-radius) !important;
  box-shadow: var(--dash-shadow-lg) !important;
  overflow: hidden;
}

.ui-dialog .ui-dialog-titlebar {
  background: var(--dash-bg-subtle) !important;
  border: none !important;
  border-bottom: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;
  padding: 0.75rem 1rem !important;
}

.ui-dialog .ui-dialog-content {
  background: var(--dash-bg-white) !important;
  color: var(--dash-text) !important;
  padding: 1rem !important;
}

.ui-dialog .ui-dialog-buttonpane {
  background: var(--dash-bg-subtle) !important;
  border-top: 1px solid var(--dash-border) !important;
  padding: 0.5rem 1rem !important;
}

.ui-button {
  background: var(--dash-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--dash-radius-xs) !important;
  padding: 0.5rem 1rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: var(--dash-transition);
}

.ui-button:hover {
  background: var(--dash-primary-light) !important;
  box-shadow: var(--dash-shadow-sm);
}

/* ============================================================
   JQUERY CONFIRM OVERRIDES
   ============================================================ */
.jconfirm .jconfirm-box {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  box-shadow: var(--dash-shadow-lg) !important;
}

.jconfirm .jconfirm-title {
  color: var(--dash-text) !important;
  font-family: 'Inter', sans-serif !important;
}

.jconfirm .jconfirm-content {
  color: var(--dash-text-secondary) !important;
}

/* ============================================================
   SMARTSUPP PANEL
   ============================================================ */
#SmartSuppPanel {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  padding: 1rem !important;
  margin-top: 0.75rem;
  box-shadow: var(--dash-shadow-sm);
}

/* ============================================================
   FIELDSET / ZIP
   ============================================================ */
.fieldsetZip {
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  background: var(--dash-bg-white) !important;
}

/* ============================================================
   STATUS ICONS
   ============================================================ */
.status-icon {
  background: #fef2f2 !important;
  border-radius: var(--dash-radius-xs);
  padding: 2px;
}

/* ============================================================
   MESSAGE LOG
   ============================================================ */
.messagelog {
  background: var(--dash-bg-white) !important;
  border-top: 1px solid var(--dash-border) !important;
  color: var(--dash-text) !important;
}

.messagelog p {
  color: var(--dash-text) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.mexfooter {
  color: var(--dash-text-muted) !important;
}

/* ============================================================
   FORM ELEMENTS
   ============================================================ */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="date"],
select,
textarea {
  background: var(--dash-bg-white) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius-xs) !important;
  color: var(--dash-text) !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0.4375rem 0.75rem !important;
  outline: none;
  transition: var(--dash-transition);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--dash-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--dash-primary-rgb), 0.1) !important;
}

input[type="submit"],
input[type="button"],
button {
  background: var(--dash-primary) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--dash-radius-xs) !important;
  padding: 0.5rem 1.25rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: var(--dash-transition);
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
  background: var(--dash-primary-light) !important;
  box-shadow: var(--dash-shadow-sm);
}

input[type="checkbox"] {
  accent-color: var(--dash-primary) !important;
}

/* ============================================================
   INLINE STYLES OVERRIDE
   ============================================================ */
div[style*="border:1px solid"][style*="#73AD21"],
div[style*="border: 1px solid"][style*="#73AD21"] {
  border-color: var(--dash-border) !important;
}

div[style*="border:1px solid"][style*="color:red"],
div[style*="border:1px solid"][style*="color: red"],
div[style*="border: 1px solid"][style*="color:red"] {
  border-color: #fecaca !important;
}

/* ============================================================
   GLOBAL SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--dash-bg-subtle);
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================================
   PRINT MEDIA
   ============================================================ */
@media print {
  body {
    background: white !important;
  }

  .hide-on-print {
    display: none !important;
  }

  #orologio, #interni, #esterni {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
  }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
  #div-header {
    flex-wrap: wrap !important;
  }

  #orologio,
  #interni,
  #esterni {
    width: 100% !important;
    flex: 1 1 100% !important;
  }
}

@media (max-width: 768px) {
  #mainDiv {
    padding: 0.5rem !important;
  }
}

/* ============================================================
   ANAGRAFICA TABLE
   ============================================================ */
#anagrafica th {
  color: var(--dash-text-secondary) !important;
  border-bottom: 1px solid var(--dash-border) !important;
}

#anagrafica td {
  color: var(--dash-text) !important;
  border: 1px solid var(--dash-border) !important;
}

#riga-anagrafica td {
  background-color: var(--dash-bg-subtle) !important;
  color: var(--dash-text) !important;
  border: 1px solid var(--dash-border) !important;
}

/* ============================================================
   W3.CSS OVERRIDES
   ============================================================ */
.w3-container {
  color: var(--dash-text) !important;
}

.w3-bar {
  background: var(--dash-bg-white) !important;
}

.w3-btn,
.w3-button {
  color: var(--dash-text) !important;
  transition: var(--dash-transition);
}

.w3-btn:hover,
.w3-button:hover {
  background: var(--dash-bg-subtle) !important;
  color: var(--dash-primary) !important;
}