/* ═══════════════════════════════════════════════════════
   MedControl — theme.css
   Tema CLARO como padrão. Escuro via [data-theme="dark"]
═══════════════════════════════════════════════════════ */

/* ── TEMA CLARO (padrão) ── */
:root {
  --primary:       #0f766e;
  --primary-l:     #0d9488;
  --primary-xl:    #14b8a6;
  --primary-bg:    #f0fdfa;
  --accent:        #f59e0b;
  --red:           #ef4444;
  --orange:        #f97316;
  --yellow:        #ca8a04;
  --green:         #16a34a;
  --sidebar-w:     260px;
  --bg:            #f1f5f9;
  --surface:       #ffffff;
  --surface2:      #f8fafc;
  --border:        #e2e8f0;
  --border-l:      #f1f5f9;
  --text:          #0f172a;
  --text-2:        #334155;
  --muted:         #64748b;
  --muted-l:       #94a3b8;
  --sb-bg:         #ffffff;
  --sb-border:     #e2e8f0;
  --sb-text:       #475569;
  --sb-active-bg:  #f0fdfa;
  --sb-active-c:   #0f766e;
  --sb-active-br:  #0d9488;
  --card-bg:       #ffffff;
  --card-border:   #e2e8f0;
  --card-shadow:   0 1px 4px rgba(0,0,0,0.06);
  --card-hover:    0 6px 24px rgba(0,0,0,0.10);
  --input-bg:      #ffffff;
  --input-border:  #cbd5e1;
  --input-text:    #0f172a;
  --input-focus:   #0d9488;
}

/* ── TEMA ESCURO ── */
[data-theme="dark"] {
  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface2:      #273548;
  --border:        rgba(255,255,255,0.07);
  --border-l:      rgba(255,255,255,0.04);
  --text:          #f1f5f9;
  --text-2:        #cbd5e1;
  --muted:         #94a3b8;
  --muted-l:       #64748b;
  --sb-bg:         #1e293b;
  --sb-border:     rgba(255,255,255,0.07);
  --sb-text:       #94a3b8;
  --sb-active-bg:  rgba(15,118,110,0.2);
  --sb-active-c:   #14b8a6;
  --sb-active-br:  rgba(20,184,166,0.3);
  --card-bg:       #1e293b;
  --card-border:   rgba(255,255,255,0.07);
  --card-shadow:   0 1px 4px rgba(0,0,0,0.3);
  --card-hover:    0 6px 24px rgba(0,0,0,0.4);
  --input-bg:      #273548;
  --input-border:  rgba(255,255,255,0.1);
  --input-text:    #f1f5f9;
  --input-focus:   #14b8a6;
  --primary-l:     #14b8a6;
  --primary-xl:    #5eead4;
  --primary-bg:    rgba(15,118,110,0.12);
  --yellow:        #eab308;
  --green:         #22c55e;
}

/* ══ BASE ══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg) !important; color: var(--text) !important; font-family: 'DM Sans', Arial, sans-serif; min-height: 100vh; }

/* ══ SIDEBAR ══ */
.sidebar, aside.sidebar { background: var(--sb-bg) !important; border-right: 1px solid var(--sb-border) !important; }
.sidebar-logo { border-bottom: 1px solid var(--sb-border) !important; }
.sidebar-logo h2 { color: var(--text) !important; }
.sidebar-logo span { color: var(--muted) !important; }
.nav-section-title { color: var(--muted-l) !important; }
.nav-item { color: var(--sb-text) !important; background: transparent !important; }
.nav-item:hover { background: var(--surface2) !important; color: var(--text) !important; }
.nav-item.active { background: var(--sb-active-bg) !important; color: var(--sb-active-c) !important; border-color: var(--sb-active-br) !important; }
.sidebar-footer { border-top: 1px solid var(--sb-border) !important; }
.user-chip, .uc { background: var(--surface2) !important; border: 1px solid var(--border) !important; }
.user-name { color: var(--text) !important; }
.user-role { color: var(--muted) !important; }
.integration-item { border-color: var(--border) !important; }
.integration-item span { color: var(--muted) !important; }
.integration-item .tag { background: var(--surface2) !important; color: var(--muted) !important; }

/* ══ MAIN ══ */
.main { background: var(--bg) !important; }
.topbar { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
.page-title { color: var(--text) !important; }

/* ══ CARDS ══ */
.stat-card, .card, .table-card, .chart-card, .search-bar, .form-card, .modal-content {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
}
.stat-label { color: var(--muted) !important; }
.stat-value { color: var(--text) !important; }
.stat-sub   { color: var(--muted) !important; }

/* ══ TABELA ══ */
.table, table { --bs-table-bg: transparent !important; color: var(--text) !important; }
thead th, .table-head-row th { background: var(--surface2) !important; color: var(--muted) !important; border-bottom-color: var(--border) !important; }
tbody tr { border-bottom-color: var(--border-l) !important; }
tbody tr:hover { background: var(--surface2) !important; }
td, .table td { color: var(--text-2) !important; }
.med-name { color: var(--text) !important; }
.med-code { color: var(--muted) !important; }
.lote-badge { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--muted) !important; }

/* ══ INPUTS ══ */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea,
.form-control, .form-select, .search-input {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus, .search-input:focus {
  border-color: var(--input-focus) !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.15) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--muted-l) !important; }

/* ══ LABELS ══ */
label, .form-label {
  color: var(--muted) !important;
}

/* ══ PILLS FILTRO ══ */
.pill { border-color: var(--border) !important; color: var(--muted) !important; background: transparent !important; }
.pill:hover { color: var(--text) !important; }
.pill.p-all.active { background: var(--surface2) !important; border-color: var(--border) !important; color: var(--text) !important; }

/* ══ STATUS CHIPS - CLARO ══ */
.chip-vencido, .badge-vencido     { background: #fee2e2 !important; color: #b91c1c !important; }
.chip-alerta_30, .badge-critico   { background: #ffedd5 !important; color: #c2410c !important; }
.chip-alerta_60, .badge-atencao   { background: #fef9c3 !important; color: #a16207 !important; }
.chip-ok, .badge-ok               { background: #dcfce7 !important; color: #15803d !important; }

/* ══ STATUS CHIPS - ESCURO ══ */
[data-theme="dark"] .chip-vencido,
[data-theme="dark"] .badge-vencido   { background: rgba(239,68,68,0.15) !important; color: #fca5a5 !important; }
[data-theme="dark"] .chip-alerta_30,
[data-theme="dark"] .badge-critico   { background: rgba(249,115,22,0.15) !important; color: #fdba74 !important; }
[data-theme="dark"] .chip-alerta_60,
[data-theme="dark"] .badge-atencao   { background: rgba(234,179,8,0.15) !important;  color: #fde047 !important; }
[data-theme="dark"] .chip-ok,
[data-theme="dark"] .badge-ok        { background: rgba(34,197,94,0.15) !important;  color: #86efac !important; }

/* ══ ACCORDION / FAQ ══ */
.accordion-item { background: var(--card-bg) !important; border-color: var(--border) !important; }
.accordion-button { background: var(--card-bg) !important; color: var(--text) !important; }
.accordion-button:not(.collapsed) { background: var(--primary-bg) !important; color: var(--primary) !important; }
[data-theme="dark"] .accordion-button::after { filter: invert(1) !important; }
.accordion-body { background: var(--card-bg) !important; color: var(--text-2) !important; }

/* ══ PLANOS ══ */
.plan-card, .pricing-card { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--text) !important; }
.plan-card h2, .plan-card h3, .plan-card .plan-name { color: var(--text) !important; }
.plan-card .price-amount { color: var(--primary) !important; }
.plan-card p, .plan-card li, .plan-card .plan-desc, .plan-card small { color: var(--muted) !important; }

/* ══ MODAIS & DROPDOWNS ══ */
.modal-header, .modal-footer { border-color: var(--border) !important; }
.dropdown-menu { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
.dropdown-item { color: var(--text) !important; }
.dropdown-item:hover { background: var(--surface2) !important; }

/* ══ BOTÕES OUTLINE ══ */
.btn-outline-soft, .btn-ghost-mc { background: transparent !important; border-color: var(--border) !important; color: var(--text) !important; }
.btn-outline-soft:hover, .btn-ghost-mc:hover { background: var(--surface2) !important; }

/* ══ HEADINGS ══ */
h1, h2, h3, h4, h5, h6 { color: var(--text) !important; }
p { color: var(--text-2); }

/* ══ TOGGLE DE TEMA ══ */
.theme-toggle-wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .8rem; margin-bottom: .4rem;
  background: var(--surface2); border-radius: 10px; border: 1px solid var(--border);
}
.theme-toggle-label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.theme-toggle {
  width: 40px; height: 22px;
  background: var(--border); border-radius: 11px;
  border: 2px solid var(--input-border);
  cursor: pointer; position: relative;
  transition: background .3s, border-color .3s;
  flex-shrink: 0; outline: none;
}
.theme-toggle::after {
  content: ''; position: absolute;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); top: 2px; left: 2px; transition: transform .3s;
}
[data-theme="dark"] .theme-toggle { background: var(--primary); border-color: var(--primary-l); }
[data-theme="dark"] .theme-toggle::after { transform: translateX(18px); background: white; }

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ══ SIDEBAR LOGO TEXT (fix invisible in light) ══ */
.sb-logo h2, .sidebar-logo h2 { color: var(--text) !important; font-size: 1.1rem; }
.sb-logo span, .sidebar-logo span { color: var(--muted) !important; }

/* ══ TOPBAR — remove card border/radius, keep clean ══ */
.topbar {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 1.5rem !important;
}

/* ══ USER CHIP — consistent across all templates ══ */
.user-chip, .uc {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: .6rem .8rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
}
.user-name, .un { color: var(--text) !important; font-size: .85rem; font-weight: 600; }
.user-role, .ur { color: var(--muted) !important; font-size: .7rem; }
.user-avatar, .ua {
  background: linear-gradient(135deg, var(--primary), var(--primary-l)) !important;
  color: white !important;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

/* ══ PLANOS — toggle labels legíveis ══ */
.toggle-label { color: var(--muted) !important; font-weight: 600; }
.toggle-label.active { color: var(--text) !important; }
/* slider do toggle de planos em modo claro */
.slider { background: var(--border) !important; border-color: var(--input-border) !important; }
input:checked + .slider { background: var(--primary) !important; }

/* ══ PLANOS — nomes dos planos legíveis ══ */
.plan-name { color: var(--text) !important; }
.plan-desc { color: var(--muted) !important; }
.plan-features li { color: var(--text-2) !important; border-bottom-color: var(--border-l) !important; }
.plan-features li.muted span { color: var(--muted-l) !important; }
.price-amount { color: var(--primary) !important; }
.price-period { color: var(--muted) !important; }

/* ══ PLANOS — btn outline em modo claro ══ */
.btn-outline {
  background: transparent !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-outline:hover { background: var(--surface2) !important; color: var(--text) !important; }

/* ══ PLANOS — cards ══ */
.plan-card { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
.plan-card::before { background: var(--border) !important; }
.plan-card.popular { border-color: var(--primary-l) !important; }

/* ══ PLANOS — FAQ ══ */
.faq-item { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
.faq-q { color: var(--text) !important; }
.faq-q i { color: var(--muted) !important; }
.faq-a { color: var(--muted) !important; }

/* ══ PLANOS — contact bar ══ */
.contact-bar { 
  background: var(--primary-bg) !important; 
  border-color: rgba(13,148,136,0.25) !important; 
}
.contact-bar p, .contact-bar strong { color: var(--text) !important; }
.btn-email {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* ══ PAGE HEADER — título planos visível ══ */
.page-header h1 {
  background: linear-gradient(135deg, var(--primary), var(--primary-l)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
[data-theme="dark"] .page-header h1 {
  background: linear-gradient(135deg, #f1f5f9, var(--primary-xl)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.page-header p { color: var(--muted) !important; }

/* ══ HEADINGS NAS PÁGINAS ADMIN ══ */
.page-title, .main h1, .main h2 { color: var(--text) !important; }
.breadcrumb a, .breadcrumb span { color: var(--primary) !important; }

/* ══ ADMIN DASHBOARD — stat cards ══ */
.stat-value, .sv { color: var(--text) !important; }

/* ══ SIDEBAR GENÉRICA (sb-logo, ni, ns patterns) ══ */
.sb-logo h2 { color: var(--text) !important; }
.sb-logo span { color: var(--muted) !important; }
.ni { color: var(--sb-text) !important; }
.ni:hover { background: var(--surface2) !important; color: var(--text) !important; }
.ni.active { background: var(--sb-active-bg) !important; color: var(--sb-active-c) !important; }
.ns { color: var(--muted-l) !important; }

/* ══ FORM CONTROLS (.fc class) ══ */
.fc {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}
.fc::placeholder { color: var(--muted-l) !important; }
.fc:focus { border-color: var(--input-focus) !important; }

/* ══ INFO BOX (caixas verdes de informação) ══ */
.info-box, .info-tip, [class*="info-"] {
  background: var(--primary-bg) !important;
  border-color: rgba(13,148,136,0.25) !important;
  color: var(--text) !important;
}
.info-box strong, .info-tip strong { color: var(--primary) !important; }

/* ══ CANCELAR BTN ══ */
.btn-cancel {
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
.btn-cancel:hover { background: var(--surface2) !important; color: var(--text) !important; }

/* ══ FAQ QUESTIONS ══ */
.faq-q { color: var(--text) !important; }
.faq-a, .faq-a-inner { color: var(--muted) !important; }

/* ══ MODAL (feedback) ══ */
.modal-box, .modal-content {
  background: var(--card-bg) !important;
  border-color: var(--card-border) !important;
  color: var(--text) !important;
}
.modal-box label, .modal-content label { color: var(--muted) !important; }
.modal-box select, .modal-box textarea,
.modal-content select, .modal-content textarea {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--input-text) !important;
}

/* ══ REDES TABLE (admin) — stat cards ══ */
.sv { color: var(--text) !important; font-size: 1.8rem; font-weight: 800; }
.sl { color: var(--muted) !important; font-size: .72rem; text-transform: uppercase; }

/* ══ FORCE all text visible in light ══ */
[data-theme="light"] .text-muted,
[data-theme="light"] [style*="color:#94a3b8"],
[data-theme="light"] [style*="color: #94a3b8"] { color: var(--muted) !important; }

/* ══ BOOTSTRAP BTN-CLOSE em modo claro ══ */
[data-theme="light"] .btn-close { filter: none !important; }
[data-theme="dark"]  .btn-close { filter: invert(1) grayscale(100%) brightness(200%) !important; }

/* ══ FORM-CARD usa sb-bg em alguns templates — normaliza ══ */
.form-card { background: var(--card-bg) !important; border-color: var(--card-border) !important; }

/* ══ STATUS CHIPS light mode (index.html inline override) ══ */
.chip-vencido, .chip-alerta_30, .chip-alerta_60, .chip-ok { border-width: 0; }

/* ══ TABLE td color inherit from theme ══ */
.table td, td { color: var(--text-2) !important; }
.table td strong, td strong, .table td .fw-bold, .med-name { color: var(--text) !important; }

/* ══ SV (stat value) em admin ══ */
.sv { color: var(--text) !important; }
.sl { color: var(--muted) !important; }