/* ─────────────────────────────────────────────
   sankey.css  —  Logística Dashboard
   Modo claro por padrão · escuro via html.dark
   ───────────────────────────────────────────── */

:root {
  --transition-fast:   150ms;
  --transition-normal: 300ms;
}

/* ── Tema claro (padrão) ──────────────────── */
:root {
  --bg:             #f6f8fa;
  --bg-alt:         #ffffff;
  --card-bg:        #ffffff;
  --topbar-bg:      #ffffff;
  --border:         #d0d7de;
  --text-primary:   #1f2328;
  --text-secondary: #57606a;
  --accent:         #0969da;
  --accent-hover:   #0860ca;
  --input-bg:       #ffffff;
  --input-focus:    rgba(9,105,218,.25);
  --table-head-bg:  #f6f8fa;
  --table-stripe:   #f6f8fa;
  --table-hover:    #eaf2ff;
  --shadow:         0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --badge-admin-bg: #dbeafe;
  --badge-admin-fg: #1d4ed8;
  --badge-user-bg:  #f1f3f5;
  --badge-user-fg:  #57606a;
  --danger-bg:      rgba(207,34,46,.08);
  --danger-fg:      #cf222e;
  --danger-border:  rgba(207,34,46,.3);
  --btn-green:      #2da44e;
  --btn-green-hov:  #2c974b;
  --btn-green-bdr:  #2da44e;
}

/* ── Tema escuro ──────────────────────────── */
html.dark {
  --bg:             #0d1117;
  --bg-alt:         #161b22;
  --card-bg:        #161b22;
  --topbar-bg:      #161b22;
  --border:         #30363d;
  --text-primary:   #e6edf3;
  --text-secondary: #8b949e;
  --accent:         #388bfd;
  --accent-hover:   #58a6ff;
  --input-bg:       #0d1117;
  --input-focus:    rgba(56,139,253,.25);
  --table-head-bg:  #0d1117;
  --table-stripe:   #0f1419;
  --table-hover:    #1c2128;
  --shadow:         0 8px 32px rgba(0,0,0,.45);
  --badge-admin-bg: rgba(31,111,235,.2);
  --badge-admin-fg: #58a6ff;
  --badge-user-bg:  #21262d;
  --badge-user-fg:  #8b949e;
  --danger-bg:      rgba(218,54,54,.15);
  --danger-fg:      #f47067;
  --danger-border:  rgba(218,54,54,.4);
  --btn-green:      #238636;
  --btn-green-hov:  #2ea043;
  --btn-green-bdr:  #2ea043;
}

/* ── Reset & base ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  transition: background var(--transition-normal), color var(--transition-normal);
}

/* ════════════════════════════════════════════
   THEME TOGGLE  (idêntico ao Programa Mestre)
   ════════════════════════════════════════════ */
.theme-toggle {
  --base-scale: 12px;
  --toggle-width: 5.625em;
  --toggle-height: 2.5em;
  --radius-pill: 100em;
  --sun-diameter: 2.125em;
  --sun-offset: calc((var(--toggle-height) - var(--sun-diameter)) / 2);
  --bg-toggle-light: #3d7eae;
  --bg-toggle-dark:  #1d1f2c;
  --color-sun:         #ecca2f;
  --color-moon:        #c4c9d1;
  --color-crater:      #959db1;
  --color-star:        #fff;
  --color-cloud-front: #f3fdff;
  --color-cloud-back:  #aacadf;
  --shadow-primary:    rgba(0,0,0,.25);
  --shadow-highlight:  rgba(255,255,255,.82);
  --halo-color:        rgba(255,255,255,.1);

  width: auto; height: auto;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--base-scale);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; flex-shrink: 0;
}

.theme-toggle__container {
  width: var(--toggle-width); height: var(--toggle-height);
  display: block; position: relative; overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--bg-toggle-light);
  transition: background-color var(--transition-normal), transform var(--transition-fast);
  box-shadow: .06em .06em .125em var(--shadow-highlight);
}
html.dark .theme-toggle__container { background-color: var(--bg-toggle-dark); }
.theme-toggle:hover  .theme-toggle__container { transform: translateY(-1px); }
.theme-toggle:active .theme-toggle__container { transform: translateY(0); }
.theme-toggle__container::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--radius-pill); pointer-events: none;
  box-shadow: 0 .05em .187em rgba(0,0,0,.5) inset;
}

.theme-toggle__sun {
  width: var(--sun-diameter); height: var(--sun-diameter);
  position: absolute; top: var(--sun-offset);
  transform: translateX(var(--sun-offset));
  border-radius: 50%; overflow: hidden;
  background-color: var(--color-sun);
  box-shadow:
    .05em .125em .125em var(--shadow-primary),
    0 .05em .125em var(--shadow-primary),
    .05em .05em .05em rgba(254,255,239,.61) inset,
    0 -.05em .05em #a1872a inset,
    0 0 0 .625em var(--halo-color),
    0 0 0 1.25em var(--halo-color),
    0 0 0 1.875em var(--halo-color);
  transition: transform var(--transition-normal);
}
html.dark .theme-toggle__sun {
  transform: translateX(calc(var(--toggle-width) - var(--sun-diameter) - var(--sun-offset)));
}
.theme-toggle:hover .theme-toggle__sun {
  transform: translateX(calc(var(--sun-offset) + .187em));
}
html.dark .theme-toggle:hover .theme-toggle__sun {
  transform: translateX(calc(var(--toggle-width) - var(--sun-diameter) - var(--sun-offset) - .187em));
}

.theme-toggle__moon-mask {
  position: relative; display: block;
  width: 100%; height: 100%; border-radius: inherit;
  background-color: var(--color-moon);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
  box-shadow:
    .062em .062em .062em rgba(254,255,239,.61) inset,
    0 -.062em .062em #969696 inset;
}
html.dark .theme-toggle__moon-mask { transform: translateX(0); }

.theme-toggle__crater {
  position: absolute; border-radius: 50%;
  background-color: var(--color-crater);
  box-shadow: 0 .03em .06em var(--shadow-primary) inset;
}
.theme-toggle__crater:nth-of-type(1) { top:.75em; left:.3em;    width:.75em;  height:.75em;  }
.theme-toggle__crater:nth-of-type(2) { top:.9em;  left:1.375em; width:.375em; height:.375em; }
.theme-toggle__crater:nth-of-type(3) { top:.3em;  left:.8em;    width:.25em;  height:.25em;  }

.theme-toggle__stars {
  position: absolute; left: .3em; width: 2.75em;
  color: var(--color-star);
  transform: translateY(-2em);
  transition: transform var(--transition-normal);
}
.theme-toggle__stars svg { display: block; width: 100%; height: auto; }
html.dark .theme-toggle__stars { transform: translateY(.5em); }

.theme-toggle__clouds {
  position: absolute; left: .3em; top: 2em;
  width: 1.25em; height: 1.25em; border-radius: 50%;
  background-color: var(--color-cloud-front);
  transform: translateY(0);
  transition: transform var(--transition-normal);
  box-shadow:
    .937em .312em var(--color-cloud-front),
    1.437em .375em var(--color-cloud-front),
    2.187em 0 var(--color-cloud-front),
    2.937em .312em var(--color-cloud-front),
    3.625em -.062em var(--color-cloud-front),
    4.5em -.312em var(--color-cloud-front),
    4.625em -1.75em 0 .437em var(--color-cloud-front),
    -.312em -.312em var(--color-cloud-back),
    .5em -.125em var(--color-cloud-back),
    1.25em -.062em var(--color-cloud-back),
    2em -.312em var(--color-cloud-back),
    2.625em 0 var(--color-cloud-back),
    3.375em -.437em var(--color-cloud-back),
    4em -.625em var(--color-cloud-back),
    4.125em -2.125em 0 .437em var(--color-cloud-back);
}
html.dark .theme-toggle__clouds { transform: translateY(3em); }


/* ════════════════════════════════════════════
   LOGIN
   ════════════════════════════════════════════ */
body.login-body {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--bg);
  overflow: hidden;
}
html.dark body.login-body { background: var(--bg); }

/* Campo de particulas: cobre a viewport e fica atras do cartao. */
.login-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.login-shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: center;
  gap: 72px;
  width: 100%;
  max-width: 1040px;
}

.login-hero { color: var(--text-primary); }
.login-hero > * { animation: loginItemIn 520ms ease both; }
.login-hero > *:nth-child(1) { animation-delay: 80ms; }
.login-hero > *:nth-child(2) { animation-delay: 150ms; }
.login-hero > *:nth-child(3) { animation-delay: 220ms; }
.login-hero > *:nth-child(4) { animation-delay: 290ms; }
.login-hero > *:nth-child(5) { animation-delay: 360ms; }

.login-hero-eyebrow {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.login-hero-title {
  font-size: 38px; font-weight: 600; line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 17ch;
  margin-bottom: 16px;
}
.login-hero-text {
  font-size: 15px; line-height: 1.6;
  color: var(--text-secondary);
  max-width: 42ch;
  margin-bottom: 28px;
}

/* Globo pontilhado: canvas quadrado, desenhado por js/login_globe.js. */
.login-globe {
  display: block;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: -8px 0 0 -12px;
  cursor: crosshair;
}

@media (max-width: 900px) {
  .login-shell { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .login-hero { display: none; }
}

.login-card {
  position: relative;
  z-index: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 44px 40px 36px;
  width: 380px;
  max-width: 100%;
  text-align: center;
  animation: loginCardIn 520ms cubic-bezier(.22,.68,.36,1) both;
}

@keyframes loginCardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Entrada escalonada: logo, titulo, campos e botao aparecem em sequencia. */
.login-card > * { animation: loginItemIn 420ms ease both; }
.login-card > *:nth-child(1) { animation-delay: 120ms; }
.login-card > *:nth-child(2) { animation-delay: 180ms; }
.login-card > *:nth-child(3) { animation-delay: 240ms; }
.login-card > *:nth-child(4) { animation-delay: 300ms; }
.login-card form > * { animation: loginItemIn 420ms ease both; }
.login-card form > *:nth-child(2) { animation-delay: 260ms; }
.login-card form > *:nth-child(3) { animation-delay: 320ms; }
.login-card form > *:nth-child(4) { animation-delay: 380ms; }
.login-card form > *:nth-child(5) { animation-delay: 430ms; }

@keyframes loginItemIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.login-theme-btn {
  position: absolute;
  top: 14px; right: 14px;
}

.login-logo {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
  color: var(--accent);
}
.login-logo svg { display: block; }
.login-logo rect { animation: loginBarIn 620ms cubic-bezier(.22,.68,.36,1) both; transform-origin: 50% 100%; }
.login-logo rect:nth-child(1) { animation-delay: 180ms; }
.login-logo rect:nth-child(2) { animation-delay: 260ms; }
.login-logo rect:nth-child(3) { animation-delay: 340ms; }

@keyframes loginBarIn {
  from { transform: scaleY(0); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.login-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
  margin-bottom: 28px;
}

.login-error {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-fg);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
  text-align: left;
}

.form-group {
  text-align: left;
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 11px; font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .07em;
}
.form-group input,
.form-group select {
  width: 100%;
  padding: 11px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 15px; font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--input-focus);
}

.login-remember {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: -2px 0 18px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.login-remember input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.login-remember-box {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  color: #fff;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.login-remember-box svg {
  width: 11px; height: 9px;
  opacity: 0; transform: scale(.7);
  transition: opacity .18s ease, transform .18s ease;
}
.login-remember:hover .login-remember-box { border-color: var(--accent); }
.login-remember input:checked + .login-remember-box {
  background: var(--btn-green);
  border-color: var(--btn-green-bdr);
}
.login-remember input:checked + .login-remember-box svg { opacity: 1; transform: none; }
.login-remember input:focus-visible + .login-remember-box {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--input-focus);
}

.btn-primary {
  padding: 11px 20px;
  background: var(--btn-green);
  color: #fff;
  border: 1px solid var(--btn-green-bdr);
  border-radius: 8px;
  font-size: 15px; font-weight: 500; font-family: inherit;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--btn-green-hov); }
.login-body .btn-primary:hover { transform: translateY(-1px); }
.login-body .btn-primary:active { transform: translateY(0); }
.btn-block { width: 100%; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .login-card > *,
  .login-card form > *,
  .login-hero > *,
  .login-logo rect { animation: none; }
  .login-body .btn-primary:hover { transform: none; }
  .login-remember-box,
  .login-remember-box svg { transition: none; }
}


/* ════════════════════════════════════════════
   TOPBAR  (Dashboard & Admin)
   ════════════════════════════════════════════ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 24px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 200;
  transition: background var(--transition-normal);
}
.topbar-title {
  font-weight: 600; font-size: 16px;
  color: var(--text-primary);
}
.topbar-actions {
  display: flex; align-items: center; gap: 10px;
}
.topbar-user {
  font-size: 13px; color: var(--text-secondary);
}
.btn-ghost {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px; font-family: inherit;
  cursor: pointer; text-decoration: none;
  display: inline-block;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }


/* ════════════════════════════════════════════
   DASHBOARD  CONTENT
   ════════════════════════════════════════════ */
.content { padding: 20px 24px 40px; }

.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 16px;
  display: inline-flex; flex-direction: column; gap: 4px;
  min-width: 200px;
  transition: background var(--transition-normal);
  box-shadow: var(--shadow);
}
.stat-label {
  font-size: 11px; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .07em;
}
.stat-value {
  font-size: 14px; color: var(--text-primary); word-break: break-all;
}

.table-container {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: background var(--transition-normal);
}


/* ════════════════════════════════════════════
   DATATABLES OVERRIDES
   ════════════════════════════════════════════ */
div.dataTables_wrapper {
  padding: 16px 20px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-secondary);
}
div.dataTables_filter input,
div.dataTables_length select {
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  font-family: inherit !important;
  outline: none !important;
}
div.dataTables_filter label,
div.dataTables_length label,
div.dataTables_info { color: var(--text-secondary); font-size: 13px; }
div.dataTables_processing {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}
div.dataTables_paginate .paginate_button {
  color: var(--text-secondary) !important;
  border: 1px solid transparent !important;
  border-radius: 5px !important;
  padding: 4px 9px !important;
}
div.dataTables_paginate .paginate_button.current,
div.dataTables_paginate .paginate_button.current:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}
div.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
  background: var(--table-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}
div.dataTables_paginate .paginate_button.disabled,
div.dataTables_paginate .paginate_button.disabled:hover { color: var(--border) !important; }
table.dataTable { color: var(--text-primary) !important; border-collapse: collapse !important; }
table.dataTable thead th {
  background: var(--table-head-bg) !important;
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 11px !important; text-transform: uppercase !important;
  letter-spacing: .05em !important; font-weight: 500 !important;
  padding: 10px 14px !important; white-space: nowrap !important;
}
table.dataTable thead th::after,
table.dataTable thead th::before { color: var(--border) !important; }
table.dataTable tbody tr { border-bottom: 1px solid var(--border) !important; }
table.dataTable tbody tr:nth-child(even) td { background: var(--table-stripe) !important; }
table.dataTable tbody tr:hover td { background: var(--table-hover) !important; }
table.dataTable tbody td {
  padding: 8px 14px !important; font-size: 13px !important;
  border: none !important; color: var(--text-primary) !important;
}


/* ════════════════════════════════════════════
   ADMIN PANEL
   ════════════════════════════════════════════ */
.admin-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px; margin-bottom: 20px;
  transition: background var(--transition-normal);
}
.section-title {
  font-size: 15px; font-weight: 600;
  color: var(--text-primary); margin: 0 0 16px;
}
.admin-form .form-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
}
.admin-form .form-group { flex: 1; min-width: 180px; }
.admin-form .form-group-btn { flex: 0; min-width: 80px; }

.admin-table {
  width: 100%; border-collapse: collapse; font-size: .9rem;
}
.admin-table th {
  background: var(--table-head-bg);
  color: var(--text-secondary);
  padding: 10px 14px; text-align: left;
  font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
}
.admin-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
.admin-table tr:hover td { background: var(--table-hover); }

.badge {
  display: inline-block; padding: 2px 10px;
  border-radius: 12px; font-size: .75rem; font-weight: 600;
  text-transform: uppercase;
}
.badge-admin { background: var(--badge-admin-bg); color: var(--badge-admin-fg); }
.badge-user  { background: var(--badge-user-bg);  color: var(--badge-user-fg);  }

.btn-danger {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-border);
  border-radius: 6px; padding: 4px 12px;
  cursor: pointer; font-size: .8rem;
  transition: background .15s;
}
.btn-danger:hover { filter: brightness(1.2); }
.btn-sm { padding: 3px 10px; font-size: .78rem; }
.text-muted { color: var(--text-secondary); font-size: .85rem; }

/* ── Botão de perigo ghost (Excluir conta) ── */
.btn-ghost-danger {
  border-color: var(--danger-border) !important;
  color: var(--danger-fg) !important;
}
.btn-ghost-danger:hover {
  border-color: var(--danger-fg) !important;
  background: var(--danger-bg) !important;
}