:root {
  --orange: #ff7900;
  --orange-dark: #d95f00;
  
  /* Variáveis do Modo Claro */
  --ink: #24272b;
  --slate: #56616b;
  --line: #e4e9ed;
  --canvas: #f5f7fa;
  --card: #fff;
  
  --success: #168353;
  --danger: #c53d35;
  --sidebar-w: 250px;
  --sidebar-collapsed: 68px;
  --shadow: 0 7px 24px rgba(30,41,59,.07);
}

/* =========================================
   MODO ESCURO (DARK MODE)
   ========================================= */
html.dark-mode,
body.dark-mode {
  --ink: #eef1f3;
  --slate: #aeb5bc;
  --line: #3b4046;
  --canvas: #16181a;
  --card: #202327;
  --shadow: 0 7px 24px rgba(0,0,0,.4);
}

body.dark-mode th { background: #1a1c1e; color: #aeb5bc; }
body.dark-mode td { border-bottom-color: var(--line); }
body.dark-mode tr:hover td { background: rgba(255, 121, 0, 0.08); }
body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #1a1c1e; color: #eef1f3; border-color: var(--line); }
body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { background: #202327; }

/* =========================================
   ESTRUTURA GERAL
   ========================================= */
.mini-bars { display: grid; gap: 11px; padding-top: 3px; }
.mini-bar-row { display: grid; grid-template-columns: minmax(70px,1fr) minmax(80px,1.5fr) auto; gap: 8px; align-items: center; font-size: 11px; }
.mini-bar-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--slate); }
.mini-bar-row > div { height: 7px; border-radius: 9px; background: var(--line); overflow: hidden; }
.mini-bar-row i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), #ff9a38); }
.mini-bar-row b { font-size: 10px; color: var(--ink); white-space: nowrap; }

* { box-sizing: border-box; font-family: Inter, Arial, sans-serif; }
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--ink); font-size: 13px; }
.app-shell { margin-left: var(--sidebar-w); min-width: 0; transition: margin-left .25s ease; }
.content { padding: 18px 24px 32px; min-width: 0; }

/* =========================================
   SIDEBAR (MENU LATERAL)
   ========================================= */
.sidebar {
  position: fixed;
  z-index: 30;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  padding: 15px 10px;
  background: #292d31;
  color: #eef1f3;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  transition: width .25s ease, transform .25s ease;
}

.sidebar-brand { height: 51px; padding: 0 9px 14px; border-bottom: 1px solid rgba(255,255,255,.1); white-space: nowrap; overflow: hidden; }
.sidebar-brand a { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }
.sidebar-brand img { width: 25px; height: 25px; object-fit: contain; object-position: center; background: transparent; border-radius: 4px; flex-shrink: 0; }
.sidebar-brand span { font-size: 15px; font-weight: 800; letter-spacing: .3px; }
.sidebar-brand b { color: var(--orange); }

.sidebar-nav { padding-top: 14px; display: grid; gap: 3px; }
.sidebar-link {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px;
  color: #d6dbe0;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  background: transparent;
  text-align: left;
  white-space: nowrap;
}

.sidebar-link:hover,
.sidebar-link.active,
details[open] > .sidebar-link {
  color: #fff;
  background: rgba(255,121,0,.17);
}

.nav-icon { width: 25px; flex: 0 0 25px; text-align: center; color: var(--orange); font-size: 14px; font-weight: 800; }
.nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.nav-chevron { margin-left: auto; color: #adb5bd; font-size: 16px; transition: transform .2s; }

.nav-group summary { list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group[open] .nav-chevron { transform: rotate(180deg); }

.nav-submenu { margin: 1px 0 6px 37px; border-left: 1px solid rgba(255,255,255,.13); display: grid; }
.nav-submenu-link { padding: 6px 9px; color: #b6bdc4; text-decoration: none; font-size: 12px; white-space: nowrap; }
.nav-submenu-link:hover,
.nav-submenu-link.active { color: var(--orange); }

.sidebar-user {
  margin-top: auto;
  padding: 14px 7px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 57px;
  white-space: nowrap;
}

.user-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--orange); font-weight: 800; color: #fff; flex: none; }
.sidebar-user strong, .sidebar-user small { display: block; }
.sidebar-user small { font-size: 10px; color: #aeb5bc; margin-top: 2px; }
.logout-link { color: #fff; text-decoration: none; font-size: 17px; }
.sidebar-backdrop { display: none; }

/* =========================================
   TOPBAR & HEADERS
   ========================================= */
.topbar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: -18px -24px 22px;
  padding: 0 24px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

.sidebar-toggle { width: 31px; height: 31px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 16px; }
.topbar-context { display: flex; gap: 8px; align-items: baseline; }
.topbar-context span { font-size: 11px; color: var(--slate); }
.topbar-context strong { font-size: 13px; color: var(--ink); }
.topbar-actions { margin-left: auto; }

.live-indicator { color: var(--success); font-size: 11px; font-weight: 700; }
.live-indicator:before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
  background: var(--success);
}

.page-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--ink); }
.page-header h1,
.page-header h2 { margin: 0; font-size: 28px; line-height: 1.15; letter-spacing: -.5px; }
.page-header h3 { margin: 0; font-size: 17px; }
.page-header p { margin: 5px 0 0; }

.muted { color: var(--slate); }
.section-block { margin-top: 20px; }

/* =========================================
   CARDS, PANELS & KPI
   ========================================= */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 12px; }
.stat-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px;
  box-shadow: var(--shadow);
  min-height: 82px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stat-card:before {
  content: '';
  position: absolute;
  top: 13px;
  left: 0;
  width: 3px;
  height: 25px;
  background: var(--orange);
  border-radius: 0 3px 3px 0;
}
.stat-card span { padding-left: 7px; color: var(--slate); font-size: 12px; font-weight: 700; }
.stat-card strong { padding-left: 7px; color: var(--ink); font-size: 21px; line-height: 1.1; }

.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); padding: 16px; color: var(--ink); }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.panel-head h3 { margin: 0; font-size: 14px; color: var(--ink); }
.panel-head small { color: var(--slate); }

.kpi-row { display: flex; flex-wrap: wrap; gap: 8px; }
.kpi-chip { background: rgba(255, 121, 0, 0.1); border: 1px solid rgba(255, 121, 0, 0.2); border-radius: 5px; padding: 5px 8px; color: var(--orange); font-weight: 700; font-size: 11px; text-decoration: none;}

/* =========================================
   MAPAS & TIMELINE
   ========================================= */
.chart-wrap { height: 210px; position: relative; }

.map-placeholder {
  min-height: 245px;
  background: linear-gradient(135deg, var(--line) 25%, var(--canvas) 25% 50%, var(--line) 50% 75%, var(--canvas) 75%);
  background-size: 28px 28px;
  border-radius: 7px;
  position: relative;
  overflow: hidden;
}
.map-route { position: absolute; inset: 22% 12%; border: 2px dashed var(--orange); border-radius: 50%; transform: rotate(-9deg); }
.map-pin { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,121,0,.15); }
.map-pin.origin { left: 20%; top: 57%; }
.map-pin.destination { right: 21%; top: 29%; background: #32383d; }
.map-legend { position: absolute; bottom: 11px; left: 13px; background: var(--card); color: var(--ink); padding: 7px 9px; border-radius: 5px; font-size: 11px; box-shadow: var(--shadow); }

.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: start; min-height: 49px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); margin: 4px 0 0 5px; box-shadow: 0 0 0 4px var(--card); position: relative; }
.timeline-dot:after { content: ''; position: absolute; top: 10px; left: 4px; width: 2px; height: 38px; background: var(--line); }
.timeline-item:last-child .timeline-dot:after { display: none; }
.timeline-body strong, .timeline-body span { display: block; }
.timeline-body strong { font-size: 12px; color: var(--ink); }
.timeline-body span, .timeline-time { font-size: 11px; color: var(--slate); margin-top: 2px; }

/* =========================================
   TABELAS PADRÃO (DESKTOP)
   ========================================= */
table { width: 100%; border-collapse: collapse; background: var(--card); color: var(--ink); min-width: 650px; }
th { background: var(--card); color: var(--slate); border-bottom: 1px solid var(--line); padding: 10px 12px; text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .25px; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 13px; }
tr:hover td { background: rgba(255, 121, 0, 0.05); }
tbody tr:last-child td { border-bottom: 0; }

.status-badge { display: inline-flex; padding: 4px 8px; border-radius: 99px; color: #fff; font-size: 11px; font-weight: 700; }

/* Resumo de viagem em modal */
.modal-backdrop { position: fixed; z-index: 100; inset: 0; background: rgba(15, 23, 42, .35); backdrop-filter: blur(4px); padding: 28px; display: grid; place-items: center; }
.modal-backdrop[hidden] { display: none; }
.modal-card { width: min(980px, 100%); max-height: calc(100vh - 56px); overflow: hidden; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 80px rgba(0,0,0,.3); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-close { border: 0; background: transparent; color: var(--ink); font-size: 28px; line-height: 1; cursor: pointer; }
.modal-body { padding: 18px; overflow: auto; }
.modal-open { overflow: hidden; }
.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.summary-grid > div { padding: 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); }
.summary-grid small, .summary-grid strong { display: block; }
.summary-grid small { color: var(--slate); margin-bottom: 5px; }
.summary-note { margin: 14px 0; padding: 12px; border-left: 3px solid var(--orange); background: rgba(255,121,0,.08); }
.summary-note p { margin: 5px 0 0; }
.modal-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 10px; }
.modal-section-head h4 { margin: 0; }
.summary-timeline { max-height: 310px; overflow: auto; padding-right: 6px; }
.summary-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.summary-photos a { overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); color: var(--ink); text-decoration: none; }
.summary-photos img { display: block; width: 100%; height: 125px; object-fit: cover; }
.summary-photos span { display: block; padding: 7px; color: var(--slate); font-size: 11px; }

/* =========================================
   BOTÕES E ALERTAS
   ========================================= */
.alert { padding: 10px 13px; border-radius: 7px; margin-bottom: 14px; font-weight: 600; }
.alert.success { background: rgba(22, 131, 83, 0.1); border: 1px solid rgba(22, 131, 83, 0.2); color: var(--success); }
.alert.error { background: rgba(197, 61, 53, 0.1); border: 1px solid rgba(197, 61, 53, 0.2); color: var(--danger); }

.btn, .btn-primary, .btn-secondary, .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
}
.btn, .btn-primary { background: var(--orange); color: #fff; }
.btn:hover, .btn-primary:hover { background: var(--orange-dark); }
.btn-secondary { background: #5e6871; color: #fff; }
.btn-outline { background: var(--card); border-color: var(--line); color: var(--ink); }
.btn-outline:hover { border-color: var(--orange); color: var(--orange); }

/* =========================================
   FORMULÁRIOS
   ========================================= */
form { background: var(--card); padding: 18px; border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-weight: 700; color: var(--ink); font-size: 12px; }
.form-group-wide { grid-column: 1 / -1; }

input, select, textarea {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 84px; resize: vertical; }
button:disabled, input:disabled, select:disabled { opacity: .55; cursor: not-allowed; }
input:focus, select:focus, textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,121,0,.12); }

.form-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.form-section { grid-column: 1 / -1; margin: 4px 0 -3px; padding: 9px 0; border-bottom: 1px solid var(--line); font-weight: 800; color: var(--ink); font-size: 13px; }

.checklist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.check-option { display: flex; align-items: center; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; color: var(--ink); }
.check-option input { width: auto; accent-color: var(--orange); }

/* =========================================
   LOGIN PAGE (SPLIT SCREEN)
   ========================================= */
.login-page { 
    display: flex; 
    min-height: 100vh; 
    width: 100vw; 
    background: var(--card); 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden;
}

/* IMAGEM LIMPA E SECA */
.login-banner {
    flex: 1; 
    background-color: var(--canvas);
    background-image: url('../images/login-bg.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

/* Lado Direito com o Formulário */
.login-panel { 
    width: 480px; 
    background: var(--card); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px; 
    box-shadow: -10px 0 40px rgba(0,0,0,0.1);
    z-index: 2;
}

.login-panel form { 
    padding: 0; 
    border: 0; 
    box-shadow: none; 
    background: transparent;
}

.login-brand { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 15px; 
    margin-bottom: 40px; 
    text-align: center;
}

.login-brand img {
    width: 150px; 
    height: auto;
    border-radius: 4px;
}

.login-brand strong { 
    font-size: 24px; 
    color: var(--ink);
    letter-spacing: -0.5px;
}

/* Esconde a imagem no celular e deixa só o formulário na tela toda */
@media (max-width: 900px) {
    .login-banner { display: none; }
    .login-panel { width: 100%; padding: 30px; align-items: center; }
    .login-panel form { width: 100%; max-width: 400px; }
}

/* =========================================
   MENU LATERAL (CORREÇÃO DE SOBREPOSIÇÃO)
   ========================================= */
body {
    padding-left: var(--sidebar-w) !important;
    transition: padding-left 0.25s ease;
    overflow-x: hidden;
}

.app-shell { margin-left: 0 !important; }

@media (min-width: 901px) {
  .sidebar-toggle { display: none; }
  .sidebar:hover, .sidebar.is-expanded { width: var(--sidebar-w); }
  .sidebar:not(:hover):not(.is-expanded) { width: var(--sidebar-collapsed); }

  .sidebar:not(:hover):not(.is-expanded) .nav-label,
  .sidebar:not(:hover):not(.is-expanded) .nav-chevron,
  .sidebar:not(:hover):not(.is-expanded) .sidebar-brand span,
  .sidebar:not(:hover):not(.is-expanded) .sidebar-user strong,
  .sidebar:not(:hover):not(.is-expanded) .sidebar-user small,
  .sidebar:not(:hover):not(.is-expanded) .logout-link,
  .sidebar:not(:hover):not(.is-expanded) #themeToggle {
    display: none !important;
    opacity: 0;
    width: 0;
  }

  .sidebar:not(:hover):not(.is-expanded) .sidebar-link {
    justify-content: center;
    padding: 9px 0;
    width: 100%;
  }

  .sidebar:not(:hover):not(.is-expanded) .nav-icon { margin: 0; }
  .sidebar:not(:hover):not(.is-expanded) .sidebar-brand { padding: 0 0 14px 0; }
  .sidebar:not(:hover):not(.is-expanded) .sidebar-brand a { justify-content: center; }
  .sidebar:not(:hover):not(.is-expanded) .nav-submenu { display: none; }

    body { padding-left: var(--sidebar-collapsed) !important; }
    body:has(.sidebar:hover),
    body:has(.sidebar.is-expanded) { padding-left: var(--sidebar-w) !important; }
}

body:has(.login-page) { padding-left: 0 !important; }

.nav-icon i { display: flex; align-items: center; justify-content: center; height: 100%; }

/* =========================================
   REGRAS DE MOBILE / RESPONSIVIDADE GERAL
   ========================================= */
@media (max-width: 900px) {
  body { padding-left: 0 !important; }
  .sidebar { width: 250px; transform: translateX(-100%); box-shadow: 8px 0 25px rgba(0,0,0,.18); }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; background: rgba(20,25,29,.38); z-index: 25; }
  .sidebar-backdrop.visible { display: block; }
  .content { padding: 14px 15px 25px; }
  .topbar { margin: -14px -15px 18px; padding: 0 15px; }
  .card-grid { grid-template-columns: 1fr; }
  .form-grid, .form-grid.form-grid-3 { grid-template-columns: 1fr; }
  .form-group-wide { grid-column: auto; }
  .page-header { align-items: flex-start; }
  .page-header h1, .page-header h2 { font-size: 23px; }
  .live-indicator { display: none; }
  .checklist-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .stat-card { min-height: 72px; padding: 10px; }
  .stat-card strong { font-size: 17px; }
  .stat-card span { font-size: 10px; }
  
  .page-header { flex-direction: column; align-items: stretch; gap: 12px; }
  .page-header > div { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .page-header .btn, 
  .page-header .btn-primary, 
  .page-header .btn-secondary, 
  .page-header .btn-outline { width: 100%; justify-content: center; }
  
  .topbar-context span { display: none; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn, .form-actions .btn-primary, .form-actions .btn-secondary { width: 100%; }
}

/* =========================================
   CORREÇÃO DE TABELAS NO MOBILE (CELULAR)
   ========================================= */
.table-wrap {
    width: 100%;
    max-width: 100vw;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 9px;
    box-shadow: var(--shadow);
}

.table-wrap table {
    width: 100%;
    min-width: 750px !important;
    border-collapse: collapse;
}

.table-wrap th, 
.table-wrap td {
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .table-wrap {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        margin-left: -15px;
        margin-right: -15px;
        width: calc(100% + 30px);
    }
    .table-wrap th:first-child,
    .table-wrap td:first-child { padding-left: 15px; }
    .table-wrap th:last-child,
    .table-wrap td:last-child { padding-right: 15px; }
}
/* Ações inline em tabelas sem herdar o visual de formulário */
.inline-action-form {
  display: inline-flex;
  padding: 0;
  margin: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.btn-danger-sm {
  padding: 4px 10px;
  font-size: 11px;
  background: var(--danger);
  border-color: var(--danger);
}
.btn-danger-sm:hover { background: #a92f29; }

/* Ajustes gerais de responsividade e prevenção de overflow */
html { -webkit-text-size-adjust: 100%; }
img, video, canvas, svg { max-width: 100%; height: auto; }
.table-wrap { overscroll-behavior-x: contain; }
td[style*="display: flex"], .table-actions { flex-wrap: wrap; }

@media (max-width: 640px) {
  .content { overflow-x: hidden; }
  .panel { padding: 13px; }
  .kpi-row { align-items: stretch; }
  .kpi-chip { max-width: 100%; white-space: normal; }
  .chart-container { min-width: 0; height: 280px !important; }
  .table-wrap table { min-width: 680px !important; }
  .modal-backdrop { padding: 0; place-items: stretch; }
  .modal-card { width: 100%; max-height: 100vh; min-height: 100vh; border-radius: 0; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal-section-head { align-items: stretch; flex-direction: column; }
}

/* =========================================
   RODAPÉ INSTITUCIONAL + SUPORTE WHATSAPP
   ========================================= */
.app-footer {
  margin-top: 34px;
  padding: 18px 0 4px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: var(--slate);
  font-size: 11px;
}

.app-footer-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  line-height: 1.5;
}

.app-footer-copy strong {
  color: var(--ink);
  font-weight: 800;
}

.app-footer-separator {
  color: var(--orange);
  font-size: 12px;
}

.footer-help-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 7px 9px 7px 13px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: #0d3f82;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(13,63,130,.18);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.footer-help-button:hover {
  background: #0a346d;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(13,63,130,.25);
}

.footer-help-button:focus-visible {
  outline: 3px solid rgba(255,121,0,.3);
  outline-offset: 2px;
}

.footer-help-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

.footer-help-icon svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.footer-help-button-disabled,
.footer-help-button-disabled:hover {
  opacity: .72;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

@media (max-width: 700px) {
  .app-footer {
    margin-top: 28px;
    padding-top: 16px;
    flex-direction: column-reverse;
    align-items: stretch;
    text-align: center;
  }

  .app-footer-copy {
    justify-content: center;
  }

  .footer-help-button {
    width: 100%;
    min-height: 40px;
  }
}

@media (max-width: 430px) {
  .app-footer-copy {
    display: block;
  }

  .app-footer-copy > span {
    display: block;
  }

  .app-footer-separator {
    display: none !important;
  }
}

/* =========================================
   CARREGAMENTO GLOBAL / ANTI-FLASH
   ========================================= */
html,
body {
  background-color: var(--canvas);
}

html.dark-mode,
html.dark-mode body {
  background-color: var(--canvas);
}

.global-data-loader {
  color: var(--ink);
  user-select: none;
}

html.is-loading .app-shell,
html.is-loading .sidebar,
html.is-loading .sidebar-backdrop {
  pointer-events: none;
}



/* =========================================
   AJUSTES TEMA CLARO - COMPONENTES MODERNOS
   Não altera o dark-mode
   ========================================= */

html:not(.dark-mode) body:not(.dark-mode) .dashboard-modal-dialog,
html:not(.dark-mode) body:not(.dark-mode) .dashboard-filter-group {
    background: var(--card);
    color: var(--ink);
    border-color: var(--line);
}

html:not(.dark-mode) body:not(.dark-mode) .dashboard-modal-body,
html:not(.dark-mode) body:not(.dark-mode) .dashboard-modal-head,
html:not(.dark-mode) body:not(.dark-mode) .dashboard-modal-foot {
    background: var(--card);
    color: var(--ink);
}

html:not(.dark-mode) body:not(.dark-mode) .dashboard-filter-search,
html:not(.dark-mode) body:not(.dark-mode) .dashboard-date-field input {
    background: #ffffff;
    color: var(--ink);
    border-color: var(--line);
}

html:not(.dark-mode) body:not(.dark-mode) .dashboard-option-item {
    background: #f8fafc;
    border-color: var(--line);
    color: var(--ink);
}

html:not(.dark-mode) body:not(.dark-mode) .dashboard-option-item:hover {
    background: rgba(255,121,0,.06);
}

html:not(.dark-mode) body:not(.dark-mode) .dashboard-group-selected {
    color: var(--slate);
}

html:not(.dark-mode) body:not(.dark-mode) .global-data-loader {
    background: rgba(255,255,255,.75);
    color: var(--ink);
}

html:not(.dark-mode) body:not(.dark-mode) .global-data-loader * {
    color: var(--ink);
}