/* =============================================================================
   ClinicaEscola · Nutrição — Design System v2
   ============================================================================= */

/* Fonte */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..800;1,9..40,300..800&display=swap');

/* -------------------------------------------------------------------------- */
/* TOKENS — Tema Claro                                                        */
/* -------------------------------------------------------------------------- */
:root,
[data-theme="light"] {
  --app-bg:            #f0f4f8;
  --app-surface:       #ffffff;
  --app-surface-2:     #f8fafc;
  --app-surface-glass: rgba(255,255,255,0.7);
  --app-input:         #ffffff;
  --app-input-readonly:#e9eef4;
  --app-text:          #0d1b2a;
  --app-muted:         #5e7590;
  --app-border:        #dde4ed;
  --app-primary:       #0f766e;
  --app-primary-hover: #0e8078;
  --app-primary-soft:  #e0faf6;
  --app-primary-on:    #ffffff;
  --app-accent:        #14b8a6;
  --app-danger:        #dc2626;
  --app-danger-soft:   #fef2f2;
  --app-ok-soft:       #ecfdf5;
  --app-warn-soft:     #fefce8;
  --app-info-soft:     #eff6ff;
  --app-sidebar:       #071321;
  --app-sidebar-text:  #94a3b8;
  --app-sidebar-hover: rgba(255,255,255,0.06);
  --app-sidebar-active:#134e4a;
  --app-header:        #ffffff;
  --app-shadow-sm:     0 1px 3px rgba(10,30,60,0.07), 0 1px 2px rgba(10,30,60,0.05);
  --app-shadow:        0 4px 12px rgba(10,30,60,0.08), 0 1px 3px rgba(10,30,60,0.05);
  --app-shadow-lg:     0 10px 30px rgba(10,30,60,0.10), 0 2px 6px rgba(10,30,60,0.06);
  --app-ring:          rgba(15,118,110,0.35);
  --app-radius:        0.875rem;
  --app-radius-sm:     0.5rem;
  color-scheme: light;
}

/* -------------------------------------------------------------------------- */
/* TOKENS — Tema Escuro                                                       */
/* -------------------------------------------------------------------------- */
[data-theme="dark"] {
  --app-bg:            #080f18;
  --app-surface:       #0f1924;
  --app-surface-2:     #172032;
  --app-surface-glass: rgba(15,25,36,0.8);
  --app-input:         #0f1924;
  --app-input-readonly:#172032;
  --app-text:          #dce8f5;
  --app-muted:         #7a94af;
  --app-border:        #1f3044;
  --app-primary:       #0f766e;
  --app-primary-hover: #14b8a6;
  --app-primary-soft:  #0d3b38;
  --app-primary-on:    #ffffff;
  --app-accent:        #2dd4bf;
  --app-danger:        #f87171;
  --app-danger-soft:   #450a0a;
  --app-ok-soft:       #052e16;
  --app-warn-soft:     #451a03;
  --app-info-soft:     #0c1a3d;
  --app-sidebar:       #040d18;
  --app-sidebar-text:  #6b8099;
  --app-sidebar-hover: rgba(255,255,255,0.04);
  --app-sidebar-active:#0d3b38;
  --app-header:        #0a1321;
  --app-shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --app-shadow:        0 4px 12px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.3);
  --app-shadow-lg:     0 10px 30px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
  --app-ring:          rgba(45,212,191,0.3);
  color-scheme: dark;
}

/* -------------------------------------------------------------------------- */
/* BASE                                                                       */
/* -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------------------- */
/* UTILITÁRIOS SEMÂNTICOS                                                     */
/* -------------------------------------------------------------------------- */
.bg-app       { background-color: var(--app-bg) !important; }
.bg-surface   { background-color: var(--app-surface) !important; }
.bg-surface-2 { background-color: var(--app-surface-2) !important; }
.text-app     { color: var(--app-text) !important; }
.text-muted   { color: var(--app-muted) !important; }
.border-app   { border-color: var(--app-border) !important; }
.shadow-app   { box-shadow: var(--app-shadow) !important; }
.bg-sidebar   { background-color: var(--app-sidebar) !important; }
.text-sidebar { color: var(--app-sidebar-text) !important; }
.bg-header    { background-color: var(--app-header) !important; }

/* -------------------------------------------------------------------------- */
/* CARD — componente base de superfície                                       */
/* -------------------------------------------------------------------------- */
.app-card {
  background:    var(--app-surface);
  border:        1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow:    var(--app-shadow-sm);
  transition:    box-shadow .2s;
}
.app-card:hover { box-shadow: var(--app-shadow); }

/* Card de estatística com gradiente sutil */
.stat-card {
  background:    var(--app-surface);
  border:        1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow:    var(--app-shadow-sm);
  position:      relative;
  overflow:      hidden;
  transition:    transform .2s, box-shadow .2s;
}
.stat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--app-primary-soft) 0%, transparent 60%);
  opacity: .45;
  pointer-events: none;
}
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--app-shadow);
}

/* -------------------------------------------------------------------------- */
/* NAVEGAÇÃO LATERAL                                                          */
/* -------------------------------------------------------------------------- */
.app-nav-btn {
  color: var(--app-sidebar-text);
  border-radius: 0.625rem;
  transition: background-color .15s, color .15s;
}
.app-nav-btn:hover {
  background: var(--app-sidebar-hover);
  color: #e2e8f0;
}
.app-nav-btn.is-active {
  background: var(--app-sidebar-active);
  color: #ffffff;
  font-weight: 600;
}
.app-nav-section {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-sidebar-text);
  opacity: 0.5;
  padding: 0.75rem 0.75rem 0.25rem;
}

/* -------------------------------------------------------------------------- */
/* HEADER / TOPBAR                                                            */
/* -------------------------------------------------------------------------- */
.app-header {
  background:    var(--app-header);
  border-bottom: 1px solid var(--app-border);
  box-shadow:    var(--app-shadow-sm);
  backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------------------- */
/* FORMULÁRIOS                                                                */
/* -------------------------------------------------------------------------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]),
select,
textarea {
  background-color: var(--app-input) !important;
  color:            var(--app-text) !important;
  border-color:     var(--app-border) !important;
  color-scheme: inherit;
}
input::placeholder, textarea::placeholder {
  color: var(--app-muted) !important;
  opacity: 0.75;
}
input[readonly], input:disabled, textarea:disabled, select:disabled {
  background-color: var(--app-input-readonly) !important;
  opacity: 0.75;
}
.input-app {
  display: block;
  width: 100%;
  border-radius: var(--app-radius-sm);
  border: 1px solid var(--app-border);
  background: var(--app-input);
  color: var(--app-text);
  padding: 0.5625rem 0.875rem;
  font-size: 0.875rem;
  transition: border-color .15s, box-shadow .15s;
}
.input-app:focus {
  outline: none;
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px var(--app-ring);
}

/* -------------------------------------------------------------------------- */
/* BOTÕES                                                                     */
/* -------------------------------------------------------------------------- */
.btn-primary {
  background:    var(--app-primary);
  color:         #fff;
  font-weight:   600;
  font-size:     0.875rem;
  padding:       0.5625rem 1.25rem;
  border-radius: var(--app-radius-sm);
  box-shadow:    var(--app-shadow-sm);
  transition:    filter .15s, transform .1s, box-shadow .15s;
  cursor:        pointer;
}
.btn-primary:hover  { filter: brightness(1.08); box-shadow: var(--app-shadow); }
.btn-primary:active { transform: scale(0.98); }

.btn-outline {
  background:    transparent;
  color:         var(--app-primary);
  border:        1.5px solid var(--app-primary);
  font-weight:   600;
  font-size:     0.875rem;
  padding:       0.5rem 1.25rem;
  border-radius: var(--app-radius-sm);
  transition:    background .15s, color .15s;
  cursor:        pointer;
}
.btn-outline:hover { background: var(--app-primary-soft); }

.icon-btn {
  padding:       0.4375rem;
  border-radius: var(--app-radius-sm);
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  transition:    background .15s;
}

/* -------------------------------------------------------------------------- */
/* TABS                                                                       */
/* -------------------------------------------------------------------------- */
.tab-link {
  white-space:    nowrap;
  padding:        0.75rem 0.25rem;
  border-bottom:  2px solid transparent;
  font-size:      0.875rem;
  font-weight:    500;
  transition:     border-color .15s, color .15s;
}
.tab-link.is-on  { border-color: var(--app-primary); color: var(--app-primary); }
.tab-link.is-off { color: var(--app-muted); }
.tab-link.is-off:hover { color: var(--app-text); }

/* -------------------------------------------------------------------------- */
/* USER MENU DROPDOWN                                                         */
/* -------------------------------------------------------------------------- */
.user-menu {
  position:      absolute;
  right:         0;
  top:           calc(100% + 0.5rem);
  min-width:     17rem;
  background:    var(--app-surface);
  border:        1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow:    var(--app-shadow-lg);
  z-index:       60;
  animation:     fadeIn .18s ease;
}

/* -------------------------------------------------------------------------- */
/* TOGGLE DE TEMA                                                             */
/* -------------------------------------------------------------------------- */
.theme-switch {
  position:      relative;
  width:         2.75rem;
  height:        1.5rem;
  border-radius: 9999px;
  background:    var(--app-border);
  transition:    background .2s;
  cursor:        pointer;
  flex-shrink:   0;
}
.theme-switch[aria-checked="true"] { background: var(--app-primary); }
.theme-switch span {
  position:      absolute;
  top:           2px; left: 2px;
  width:         1.25rem; height: 1.25rem;
  border-radius: 9999px;
  background:    #fff;
  box-shadow:    0 1px 3px rgba(0,0,0,.25);
  transition:    transform .2s;
}
.theme-switch[aria-checked="true"] span { transform: translateX(1.25rem); }

/* -------------------------------------------------------------------------- */
/* DARK MODE — overrides de classes Tailwind legadas                          */
/* -------------------------------------------------------------------------- */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-gray-50,
[data-theme="dark"] .bg-slate-50,
[data-theme="dark"] .bg-slate-100 { background-color: var(--app-surface) !important; }
[data-theme="dark"] .bg-gray-100  { background-color: var(--app-bg) !important; }

[data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-slate-800,
[data-theme="dark"] .text-slate-900 { color: var(--app-text) !important; }

[data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-slate-400,
[data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-600 { color: var(--app-muted) !important; }

[data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300, [data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300,
[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--app-border) !important; }

[data-theme="dark"] .hover\:bg-slate-50:hover,
[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--app-surface-2) !important; }

[data-theme="dark"] .bg-teal-50, [data-theme="dark"] .bg-teal-100,
[data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-cyan-50 {
  background-color: var(--app-primary-soft) !important;
  color: var(--app-accent) !important;
}
[data-theme="dark"] .bg-violet-100, [data-theme="dark"] .bg-purple-50 { background-color: #2d1b69 !important; }
[data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-indigo-50   { background-color: var(--app-info-soft) !important; }
[data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-yellow-50  { background-color: var(--app-warn-soft) !important; }
[data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-emerald-100 { background-color: var(--app-ok-soft) !important; }
[data-theme="dark"] .bg-red-50, [data-theme="dark"] .bg-red-100      { background-color: var(--app-danger-soft) !important; }

[data-theme="dark"] .text-teal-700, [data-theme="dark"] .text-teal-800,
[data-theme="dark"] .text-teal-900, [data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800 { color: #5eead4 !important; }
[data-theme="dark"] .text-blue-700, [data-theme="dark"] .text-blue-800  { color: #93c5fd !important; }
[data-theme="dark"] .text-amber-700, [data-theme="dark"] .text-amber-800 { color: #fcd34d !important; }
[data-theme="dark"] .text-green-700, [data-theme="dark"] .text-green-800 { color: #86efac !important; }
[data-theme="dark"] .text-red-600, [data-theme="dark"] .text-red-700,
[data-theme="dark"] .text-red-800    { color: #fca5a5 !important; }
[data-theme="dark"] .text-violet-700 { color: #c4b5fd !important; }

[data-theme="dark"] .bg-teal-700, [data-theme="dark"] .bg-teal-600 {
  background-color: var(--app-primary) !important;
  color: #fff !important;
}
[data-theme="dark"] .hover\:bg-teal-50:hover  { background-color: var(--app-primary-soft) !important; }
[data-theme="dark"] .hover\:bg-teal-700:hover { background-color: var(--app-primary-hover) !important; }
[data-theme="dark"] .hover\:text-teal-800:hover { color: #99f6e4 !important; }

[data-theme="dark"] .border-teal-700 { border-color: var(--app-primary) !important; }

[data-theme="dark"] thead { background-color: var(--app-surface-2) !important; }
[data-theme="dark"] tr.hover\:bg-slate-50:hover { background-color: var(--app-surface-2) !important; }

/* -------------------------------------------------------------------------- */
/* BADGE / STATUS                                                             */
/* -------------------------------------------------------------------------- */
.badge {
  display:         inline-flex;
  align-items:     center;
  gap:             0.25rem;
  font-size:       0.7rem;
  font-weight:     600;
  padding:         0.2rem 0.55rem;
  border-radius:   9999px;
  white-space:     nowrap;
  letter-spacing:  0.02em;
}
.badge-ok      { background: var(--app-ok-soft);   color: #065f46; }
.badge-warn    { background: var(--app-warn-soft);  color: #92400e; }
.badge-danger  { background: var(--app-danger-soft);color: #991b1b; }
.badge-info    { background: var(--app-info-soft);  color: #1e40af; }
.badge-primary { background: var(--app-primary-soft);color: #115e59; }

[data-theme="dark"] .badge-ok     { background: var(--app-ok-soft);    color: #6ee7b7; }
[data-theme="dark"] .badge-warn   { background: var(--app-warn-soft);   color: #fde68a; }
[data-theme="dark"] .badge-danger { background: var(--app-danger-soft); color: #fca5a5; }
[data-theme="dark"] .badge-info   { background: var(--app-info-soft);   color: #93c5fd; }
[data-theme="dark"] .badge-primary{ background: var(--app-primary-soft);color: #5eead4; }

/* -------------------------------------------------------------------------- */
/* ANIMAÇÕES                                                                  */
/* -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.animate-fade-in { animation: fadeIn .25s ease; }

/* -------------------------------------------------------------------------- */
/* TINYΜCE                                                                    */
/* -------------------------------------------------------------------------- */
.tox-tinymce { border-color: var(--app-border) !important; border-radius: var(--app-radius-sm) !important; }
[data-theme="dark"] .tox-tinymce,
[data-theme="dark"] .tox .tox-toolbar,
[data-theme="dark"] .tox .tox-toolbar__primary,
[data-theme="dark"] .tox .tox-menubar,
[data-theme="dark"] .tox .tox-statusbar { background: var(--app-surface-2) !important; border-color: var(--app-border) !important; }

/* -------------------------------------------------------------------------- */
/* LAYOUT                                                                     */
/* -------------------------------------------------------------------------- */
.app-page { width: 100%; max-width: 100% !important; box-sizing: border-box; }

/* Linha divisória sutil com gradiente */
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--app-border) 20%, var(--app-border) 80%, transparent);
  margin: 1rem 0;
}

/* Login background */
.login-bg {
  background-image: url('/assets/images/forgeit_background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}