/* Medical DNA brand — https://www.medicaldna.it */
@font-face {
  font-family: "Chemistry";
  src: url("https://www.medicaldna.it/wp-content/themes/novalab/fonts/Chemistry/Chemistry.woff") format("woff");
  font-display: swap;
}

:root {
  --mdna-dark: #181818;
  --mdna-dark-2: #191919;
  --mdna-accent: #33d1cb;
  --mdna-accent-hover: #2bbdb7;
  --mdna-accent-soft: rgba(51, 209, 203, 0.12);
  --mdna-white: #ffffff;
  --mdna-bg: #f4f6f7;
  --mdna-muted: #6b7280;
  --mdna-border: #e5e7eb;
  --mdna-warn: #cf2e2e;
  --mdna-warn-bg: #fef2f2;
  --nav-h: 64px;
  --header-h: 60px;
  --footer-h: auto;
  --accent: var(--mdna-accent);
  --accent-dark: var(--mdna-dark);
  --accent-light: var(--mdna-accent-soft);
  --ink: var(--mdna-dark);
  --muted: var(--mdna-muted);
  --border: var(--mdna-border);
  --warn: var(--mdna-warn);
  --warn-bg: var(--mdna-warn-bg);
  --paper: var(--mdna-bg);
}

body {
  font-family: "Barlow", Arial, Helvetica, sans-serif;
  background: var(--mdna-bg);
  color: var(--mdna-dark);
}

h1, h2, h3, .brand-title, .login-card h1, .app-header h1, .sidebar .brand h1 {
  font-family: "Chemistry", "Barlow", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Top info bar (stile Medical DNA) */
.top-bar {
  background: var(--mdna-dark);
  color: var(--mdna-white);
  font-size: 0.72rem;
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: center;
  padding-top: calc(8px + env(safe-area-inset-top));
}
.top-bar a { color: var(--mdna-accent); text-decoration: none; }
.top-bar span { opacity: 0.85; }

/* Header con logo */
.app-header, .desktop-header {
  background: var(--mdna-white);
  border-bottom: none;
  box-shadow: 0 1px 0 var(--mdna-border);
}
.app-header {
  height: auto;
  min-height: var(--header-h);
  padding: 0;
  padding-top: 0;
  flex-direction: column;
  align-items: stretch;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}
.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.header-brand img { height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.header-brand .titles h1 { font-size: 0.95rem; color: var(--mdna-dark); line-height: 1.2; margin: 0; }
.header-brand .titles p { font-size: 0.72rem; color: var(--mdna-muted); margin: 0; }
.accent-strip { height: 3px; background: var(--mdna-accent); width: 100%; flex-shrink: 0; }
.desktop-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--mdna-white);
  border-bottom: 1px solid var(--mdna-border);
}
.desktop-header .titles h2 {
  font-family: "Chemistry", "Barlow", Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--mdna-dark);
  margin: 0;
}
.status-dot { background: var(--mdna-accent); }

.sidebar .btn-ghost {
  color: var(--mdna-white);
  border-color: rgba(255,255,255,0.25);
  background: transparent;
}
.sidebar .btn-ghost:active { background: rgba(255,255,255,0.08); }

@media(min-width:900px) {
  .top-bar { justify-content: flex-end; padding-right: 24px; }
  .desktop-header { display: flex !important; }
  #app-view { flex-direction: row; align-items: stretch; }
  .main-col { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .app-header, .top-bar { display: none !important; }
  .bottom-nav { display: none !important; }
}

.sidebar {
  background: var(--mdna-dark);
  border-right: none;
  width: 240px;
  flex-shrink: 0;
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  position: sticky;
  top: 0;
  align-self: flex-start;
  max-height: 100dvh;
}
.sidebar .brand {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.sidebar .brand h1 { color: var(--mdna-white); font-size: 0.9rem; margin: 0; }
.sidebar .brand .sub { color: rgba(255,255,255,0.6); margin: 4px 0 0; font-size: 0.75rem; }
.sidebar .brand img {
  height: 36px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin-bottom: 10px;
  background: var(--mdna-white);
  border-radius: 6px;
  padding: 6px 8px;
  box-sizing: content-box;
}
.sidebar-nav .nav-item { color: rgba(255,255,255,0.55); }
.sidebar-nav .nav-item.active { color: var(--mdna-accent); background: rgba(51,209,203,0.08); }

.btn-primary {
  background: var(--mdna-accent);
  color: var(--mdna-dark);
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
}
.btn-primary:active { background: var(--mdna-accent-hover); }
.btn-ghost {
  border-radius: 999px;
  color: var(--mdna-dark);
  border-color: var(--mdna-border);
}

.bottom-nav {
  background: var(--mdna-white);
  box-shadow: 0 -1px 0 var(--mdna-border);
}
.nav-item.active { color: var(--mdna-accent); }

.kpi .value { color: var(--mdna-dark); }
.kpi .value::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--mdna-accent);
  margin-top: 4px;
}
.chip.active { background: var(--mdna-accent-soft); color: var(--mdna-dark); border-color: var(--mdna-accent); }
.pill { background: var(--mdna-accent-soft); color: var(--mdna-dark); }
.bubble.out { background: var(--mdna-accent-soft); border-left: 3px solid var(--mdna-accent); }
.panel h2, .settings-section h3, .desktop-header h2 { color: var(--mdna-dark); }
.settings-section h3, .panel h2 { border-left: 3px solid var(--mdna-accent); padding-left: 10px; }
.tabs { border-radius: 999px; padding: 4px; background: var(--mdna-white); }
.tab.active { background: var(--mdna-accent); color: var(--mdna-dark); border-radius: 999px; }
.day-btn.active { background: var(--mdna-accent); color: var(--mdna-dark); border-color: var(--mdna-accent); }

.login-card {
  border: none;
  box-shadow: 0 8px 40px rgba(24,24,24,0.08);
  border-top: 4px solid var(--mdna-accent);
}
.login-logo { text-align: center; margin-bottom: 20px; }
.login-logo img { height: 56px; width: auto; max-width: 280px; object-fit: contain; }
.login-card h1 { color: var(--mdna-dark); text-align: center; }

/* Footer Besquare — logo + copyright centrati */
.site-footer {
  background: var(--mdna-white);
  color: var(--mdna-muted);
  border-top: 1px solid var(--mdna-border);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  margin-top: auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.7rem;
  line-height: 1;
  white-space: nowrap;
  text-align: center;
}
.site-footer a { color: var(--mdna-dark); text-decoration: none; font-weight: 600; }
.site-footer a:hover { color: var(--mdna-accent); }
.footer-sep { color: var(--mdna-border); user-select: none; }
.footer-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.footer-logo img { height: 22px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.footer-copy { color: var(--mdna-muted); }
.login-footer {
  width: 100%;
  max-width: 400px;
  margin-top: 16px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0;
  border-top: none;
  background: transparent;
}

#app-view .site-footer {
  margin-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom));
}
@media(min-width:900px) {
  .sidebar { display: flex !important; }
  .desktop-header { display: flex !important; }
  #app-view .site-footer { margin-bottom: 0; }
  .header-brand img { height: 42px; }
}
.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  gap: 2px;
}
.sidebar-nav .nav-item {
  flex: none;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 16px;
  font-size: 0.85rem;
  border-radius: 0;
  border: none;
  min-height: 44px;
}
.sidebar-nav .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Header status + theme */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.68rem;
  color: var(--mdna-muted);
  line-height: 1.2;
}
.header-status .clock { font-weight: 600; color: var(--mdna-dark); font-variant-numeric: tabular-nums; }
.system-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.system-status .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34,197,94,0.25);
}
.system-status.offline .dot { background: var(--mdna-warn); box-shadow: 0 0 0 2px rgba(207,46,46,0.2); }
.theme-toggle {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--mdna-border);
  background: var(--mdna-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* Thread WhatsApp light */
.thread-compose {
  display: flex;
  gap: 8px;
  padding: 12px 0 0;
  border-top: 1px solid var(--mdna-border);
  margin-top: 12px;
}
.thread-compose input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 16px;
}
.thread-actions {
  display: flex;
  gap: 8px;
  padding: 8px 0 12px;
  flex-wrap: wrap;
}
.thread-actions .btn { flex: 1; min-width: 120px; }

/* Mobile layout */
@media(max-width:899px) {
  .top-bar { display: flex !important; font-size: 0.65rem; padding: 6px 10px; gap: 8px; }
  .top-bar span:last-child { display: none; }
  .app-header { display: flex !important; position: sticky; top: 0; z-index: 40; }
  .header-inner { padding: 8px 12px; align-items: flex-start; }
  .header-brand img { height: 28px; max-width: 120px; }
  .header-brand .titles h1 { font-size: 0.85rem; }
  .header-brand .titles p { font-size: 0.65rem; }
  .accent-strip { order: -1; }
  .header-actions { flex-direction: column; align-items: flex-end; gap: 4px; }
  .header-status { font-size: 0.62rem; }
  .desktop-kpi-bar, .sidebar, .desktop-header { display: none !important; }
  .main-col { flex: 1; min-height: 0; }
  #app-view { flex-direction: column; min-height: 100dvh; }
  #app-view .site-footer { margin-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
}
@media(min-width:900px) {
  .desktop-header .header-actions { margin-left: auto; }
}

/* KPI bar desktop (admin) */
.desktop-kpi-bar {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 12px 24px;
  background: var(--mdna-white);
  border-bottom: 1px solid var(--mdna-border);
}
@media(min-width:900px) {
  .desktop-kpi-bar.visible { display: grid; }
}

/* Dark mode */
html[data-theme="dark"] {
  --mdna-bg: #0f1113;
  --mdna-white: #1a1d21;
  --mdna-dark: #eef1f4;
  --mdna-muted: #9ca3af;
  --mdna-border: #2a2f36;
  --mdna-accent-soft: rgba(51, 209, 203, 0.15);
  --paper: #0f1113;
  --ink: #eef1f4;
}
html[data-theme="dark"] body { background: var(--mdna-bg); color: var(--mdna-dark); }
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .settings-section,
html[data-theme="dark"] .stat-rows,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: #1a1d21;
  color: #eef1f4;
  border-color: #2a2f36;
}
html[data-theme="dark"] .site-footer { background: #1a1d21; }
html[data-theme="dark"] .sidebar { background: #0a0c0e; }
html[data-theme="dark"] .bubble.in { background: #252a30; }
html[data-theme="dark"] .bottom-nav { background: #1a1d21; }