/* ===========================================================================
   Tema visual inspirado no NiceAdmin (recriado — CSS próprio).
   Suporta tema claro/escuro via [data-theme]. As cores de marca
   (--color-primary etc.) são sobrescritas por tenant no _Layout (branding).
   =========================================================================== */
:root {
  /* Marca (sobrescrita por tenant) */
  --color-primary: #4154f1;
  --color-primary-dark: #3a4ad0;
  --color-sidebar: #2c384e;   /* mantido p/ compat. de branding; pouco usado no tema claro */
  --color-accent: #4154f1;

  /* Superfícies e texto (claro) */
  --app-bg: #f6f9ff;
  --surface: #ffffff;
  --surface-2: #f6f9ff;
  --border: #eceef1;
  --heading: #012970;
  --body-color: #444444;
  --muted: #6c757d;

  /* Header / sidebar */
  --header-bg: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-text: #012970;
  --sidebar-hover-bg: #f6f9ff;
  --sidebar-active-bg: #e7ebff;

  --sidebar-width: 280px;
  --header-height: 60px;
  --radius: 10px;
  --shadow: 0 2px 14px rgba(1, 41, 112, 0.08);
}

[data-theme="dark"] {
  --app-bg: #12161c;
  --surface: #1c2128;
  --surface-2: #232b34;
  --border: #2d343d;
  --heading: #e6edf3;
  --body-color: #b9c2cc;
  --muted: #8b949e;

  --header-bg: #1c2128;
  --sidebar-bg: #1c2128;
  --sidebar-text: #c7d0d9;
  --sidebar-hover-bg: #232b34;
  --sidebar-active-bg: #2a3552;
  --shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

html { font-size: 15px; }
body {
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background-color: var(--app-bg);
  color: var(--body-color);
  margin: 0;
  min-height: 100vh;
}
h1, h2, h3, h4, h5, h6, .fw-semibold { font-family: "Nunito", "Open Sans", sans-serif; color: var(--heading); }
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }

/* ===== Buttons / brand color ===== */
.btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #fff; }
[data-theme="dark"] .btn-outline-secondary { color: var(--body-color); border-color: var(--border); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--surface-2); color: var(--heading); }
.badge.bg-primary { background-color: var(--color-primary) !important; }

/* ===== Header ===== */
.app-header {
  position: fixed; inset: 0 0 auto 0; height: var(--header-height);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  background: var(--header-bg); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow); z-index: 1030;
}
.app-header .logo { display: flex; align-items: center; gap: 10px; min-width: calc(var(--sidebar-width) - 40px); }
.app-header .logo img { max-height: 36px; max-width: 46px; object-fit: contain; }
.app-header .logo .name { font-family: "Nunito", sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toggle-sidebar-btn { font-size: 1.5rem; line-height: 1; background: none; border: none; color: var(--heading); cursor: pointer; }
.header-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.header-nav .icon-btn { background: none; border: none; color: var(--heading); font-size: 1.25rem; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.header-nav .icon-btn:hover { background: var(--surface-2); }
.header-nav .profile-toggle { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--heading); font-weight: 600; }
.header-nav .profile-toggle .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--sidebar-active-bg); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* ===== Sidebar ===== */
.app-sidebar {
  position: fixed; top: var(--header-height); left: 0; bottom: 0; width: var(--sidebar-width);
  background: var(--sidebar-bg); border-right: 1px solid var(--border);
  padding: 18px; overflow-y: auto; transition: left .3s ease; z-index: 1020;
}
.sidebar-nav { list-style: none; padding: 0; margin: 0; }
.sidebar-nav .nav-heading { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 16px 12px 6px; }
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px; margin-bottom: 3px;
  border-radius: var(--radius); color: var(--sidebar-text); font-weight: 600; font-size: .95rem;
}
.sidebar-nav .nav-link i { font-size: 1.1rem; color: var(--color-primary); }
.sidebar-nav .nav-link:hover { background: var(--sidebar-hover-bg); }
.sidebar-nav .nav-link.active { background: var(--sidebar-active-bg); color: var(--color-primary); }
.sidebar-nav .nav-parent .nav-caret { font-size: .8rem; color: var(--muted); transition: transform .2s ease; }
.sidebar-nav .nav-parent.collapsed .nav-caret { transform: rotate(-90deg); }
.sidebar-nav .nav-submenu { padding-left: 14px; margin-bottom: 3px; }
.sidebar-nav .nav-submenu .nav-link { padding: 9px 14px; font-weight: 500; font-size: .9rem; }
.sidebar-nav .nav-submenu .nav-link i { font-size: 1rem; }

/* ===== Main / pagetitle / footer ===== */
.app-main { margin-top: var(--header-height); padding: 22px; transition: margin-left .3s ease; }
.pagetitle { margin-bottom: 18px; }
.pagetitle h1 { font-size: 1.6rem; font-weight: 700; margin: 0; }
.pagetitle .breadcrumb { margin: 6px 0 0; font-size: .85rem; }
.pagetitle .breadcrumb a { color: var(--muted); }
.app-footer { padding: 16px 22px; text-align: center; color: var(--muted); font-size: .85rem; transition: margin-left .3s ease; }

@media (min-width: 1200px) {
  .app-main, .app-footer { margin-left: var(--sidebar-width); }
  body.toggle-sidebar .app-sidebar { left: calc(-1 * var(--sidebar-width)); }
  body.toggle-sidebar .app-main, body.toggle-sidebar .app-footer { margin-left: 0; }
}
@media (max-width: 1199px) {
  .app-sidebar { left: calc(-1 * var(--sidebar-width)); box-shadow: var(--shadow); }
  body.toggle-sidebar .app-sidebar { left: 0; }
  .app-header .logo { min-width: 0; }
}

/* ===== Cards ===== */
.card, .table-card, .metric-card, .auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); color: var(--body-color);
}
.card-header { background: transparent; border-bottom: 1px solid var(--border); color: var(--heading); font-weight: 600; }
.card-body { color: var(--body-color); }
.table-card { padding: 18px; }

.metric-card { padding: 18px; display: flex; align-items: center; gap: 14px; }
.metric-card .label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.metric-card .value { font-size: 1.7rem; font-weight: 700; color: var(--heading); font-family: "Nunito", sans-serif; }
.metric-card .icon { width: 46px; height: 46px; border-radius: 50%; background: var(--sidebar-active-bg); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex: none; }
/* Card clicável (abre modal): afeta o cursor/realce sem virar botão. */
a.metric-card--link { transition: box-shadow .15s ease, transform .15s ease; }
a.metric-card--link:hover { box-shadow: 0 6px 22px rgba(1, 41, 112, 0.14); transform: translateY(-2px); }
a.metric-card--link:hover .value { color: var(--color-primary); }

/* ===== Tables ===== */
.table { --bs-table-bg: transparent; --bs-table-color: var(--body-color); color: var(--body-color); }
.table > :not(caption) > * > * { border-color: var(--border); }
.table thead th { background: var(--surface-2); color: var(--heading); border-bottom: 1px solid var(--border); font-weight: 600; }
.table-hover > tbody > tr:hover > * { background: var(--surface-2); color: var(--heading); }

/* ===== Forms ===== */
.form-label { font-weight: 600; font-size: .9rem; color: var(--heading); }
.required::after { content: " *"; color: #dc3545; }
.form-control, .form-select { background: var(--surface); color: var(--body-color); border-color: var(--border); }
.form-control:focus, .form-select:focus { background: var(--surface); color: var(--body-color); border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(65, 84, 241, .15); }
.form-control::placeholder { color: var(--muted); opacity: 1; }
[data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: var(--surface-2); }
[data-theme="dark"] .input-group-text { background: var(--surface-2); color: var(--body-color); border-color: var(--border); }

/* ===== Dropdowns / modals / list-group ===== */
.dropdown-menu { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.dropdown-item { color: var(--body-color); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--heading); }
.dropdown-divider { border-color: var(--border); }
.modal-content { background: var(--surface); color: var(--body-color); }
.modal-header, .modal-footer { border-color: var(--border); }
.list-group-item { background: var(--surface); color: var(--body-color); border-color: var(--border); }
.list-group-item-action:hover { background: var(--surface-2); }
.text-muted { color: var(--muted) !important; }
hr { border-color: var(--border); }

/* ===== Status pills ===== */
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.status-ok { background-color: #e8f7ef; color: #1d9e75; }
.status-baixo { background-color: #fff4e0; color: #c67200; }
.status-zerado { background-color: #fce8e8; color: #c62828; }

/* ===== Login ===== */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--app-bg); padding: 20px; }
.auth-card { max-width: 420px; width: 100%; padding: 32px; }
/* Máscara de senha via CSS: o campo fica type=text (fonte/tamanho fixos) e a máscara é o disco.
   Evita o "salto" de fonte/tamanho que o glifo nativo do type=password causa ao revelar. */
.auth-card .form-control { font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 1rem; line-height: 1.5; letter-spacing: normal; }
.senha-mascarada { -webkit-text-security: disc; text-security: disc; }
.auth-card .brand { text-align: center; margin-bottom: 22px; }
.auth-card .brand img { max-height: 70px; }
.auth-card .brand .brand-icon { font-size: 3rem; line-height: 1; color: var(--color-primary); }
.auth-card .brand h1 { font-size: 1.5rem; margin: 12px 0 2px; }
.auth-card .brand small { color: var(--muted); }

/* ===========================================================================
   Overlay de loading global — bloqueia a tela durante chamadas ao servidor
   (navegações, submits de formulário e AJAX de escrita). Controlado por
   window.thmLoading em site.js. Usa os tokens de tema (claro/escuro).
   =========================================================================== */
.thm-loading {
  position: fixed;
  inset: 0;
  z-index: 1100; /* acima do chrome do app e de modais Bootstrap (1055) */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 18, 30, 0.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.thm-loading.is-active { display: flex; }
.thm-loading__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.6rem 2.2rem;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  min-width: 190px;
}
.thm-loading__spinner {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 4px solid var(--border);
  border-top-color: var(--color-primary);
  animation: thm-spin 0.8s linear infinite;
}
.thm-loading__text {
  font-family: "Nunito", "Open Sans", sans-serif;
  font-weight: 700;
  color: var(--heading);
}
@keyframes thm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .thm-loading__spinner { animation-duration: 1.6s; }
}