html, body { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
html, body { height: 100%; }

:root{
  --app-radius: 16px;
  --app-border: rgba(15, 23, 42, 0.10);
  --app-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --app-surface: rgba(255,255,255,.78);
  --app-surface-2: rgba(255,255,255,.64);
  --app-text: #0f172a;
  --app-muted: rgba(15,23,42,.65);
  --app-focus: rgba(79,70,229,.35);
}

body{
  background-color: var(--theme-page, #f6f7fb);
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,130,246,.22), transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(168,85,247,.16), transparent 55%),
    radial-gradient(1000px 700px at 50% 100%, rgba(16,185,129,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  color: var(--theme-text, var(--app-text));
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar{
  backdrop-filter: blur(8px);
}

.card{
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius);
  box-shadow: var(--app-shadow);
  background: var(--theme-form, var(--app-surface));
}

.btn{
  border-radius: 14px;
}

.btn-primary{
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  border: none;
}
.btn-primary:hover{
  filter: brightness(1.02);
}

.btn-outline-secondary{
  border-color: rgba(148,163,184,.7);
}

.btn-outline-secondary:hover{
  background: rgba(148,163,184,.16);
}

.navbar-brand { letter-spacing: -0.02em; }

.form-control,
.form-select,
.form-control-color{
  border-radius: 14px;
  border-color: rgba(148,163,184,.55);
  background: rgba(255,255,255,.82);
  font-weight: 700;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(79,70,229,.65);
  box-shadow: 0 0 0 .25rem var(--app-focus);
}

.form-text{ color: var(--app-muted); font-weight: 600; }
.text-secondary{ color: var(--app-muted) !important; }

.table > :not(caption) > * > *{
  padding: .9rem .9rem;
}

a.card{
  transition: transform .15s ease, box-shadow .15s ease;
}
a.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(2,6,23,.12);
}

.upper { text-transform: uppercase; }

#dash-grid .card { box-shadow: none; }

.dash-wrap { border: 1px solid var(--app-border); border-radius: 14px; background: rgba(255,255,255,.60); padding: 10px; }
.dash-top { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1.6fr .9fr .9fr; padding: 12px; }
.dash-kpi { background: rgba(37,99,235,.10); border-radius: 12px; padding: 10px 12px; }
.dash-kpi:nth-child(2){ background: rgba(16,185,129,.12); }
.dash-kpi-title { font-weight: 800; color: rgba(15,23,42,.65); letter-spacing: .02em; }
.dash-kpi-value { font-weight: 900; font-size: 28px; line-height: 1; }
.dash-date { background: rgba(148,163,184,.14); border-radius: 12px; padding: 10px 12px; }
.dash-date-title { font-weight: 800; color: rgba(15,23,42,.65); letter-spacing: .02em; margin-bottom: 6px; }
.dash-date-controls { display: grid; grid-template-columns: 40px 1fr 40px 56px; gap: 8px; align-items: center; }
.dash-meta { background: rgba(79,70,229,.10); border-radius: 12px; padding: 10px 12px; }
.dash-meta-title { font-weight: 800; color: rgba(15,23,42,.65); letter-spacing: .02em; margin-bottom: 6px; }
.dash-table thead th { position: sticky; top: 0; z-index: 1; }
.dash-status{
  border: 1px solid var(--app-border);
  background: rgba(255,255,255,.72);
  border-radius: 12px;
  padding: 8px 10px;
}

/* Mais espaço visual entre linhas/colunas */
.dash-table{ border-collapse: separate; border-spacing: 0 .55rem; }
.dash-table thead th{ padding: .8rem .85rem; }
.dash-table tbody td{ padding: .9rem .85rem; background: rgba(255,255,255,.78); border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); }
.dash-table tbody td:first-child{ border-left: 1px solid var(--app-border); border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
.dash-table tbody td:last-child{ border-right: 1px solid var(--app-border); border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
.dash-row-has td{ background: rgba(99,102,241,.06); }
.dash-row-ok td{ background: rgba(16,185,129,.10); }

@media (max-width: 992px){
  .dash-top{ grid-template-columns: 1fr 1fr; }
}

/* Dash compacto (modal) */
.modal-dash .modal-dialog{ max-width: 980px; }
.modal-dash .modal-content{
  background:
    radial-gradient(800px 420px at 0% 0%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(16,185,129,.18), transparent 55%),
    radial-gradient(900px 520px at 50% 120%, rgba(168,85,247,.14), transparent 55%),
    rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15,23,42,.10);
}
.modal-dash .modal-header{
  background: rgba(255,255,255,.35);
  border-bottom-color: rgba(15,23,42,.10);
}
.dash-compact{ display: flex; flex-direction: column; }
.dash-compact .dash-fixed{
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(37,99,235,.16), rgba(16,185,129,.12));
  padding: 10px;
}
.dash-compact .dash-fixed-inner{ max-width: 920px; margin: 0 auto; }
.dash-compact .dash-top{ gap: 10px; padding: 0; justify-content: center; }
.dash-compact .dash-kpi{ padding: 8px 10px; }
.dash-compact .dash-kpi-value{ font-size: 22px; }
.dash-compact .dash-table{ font-size: .9rem; }
.dash-compact .dash-status{ margin: 0; }
.dash-compact .dash-scroll{
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(2,6,23,.02), rgba(79,70,229,.06)),
    rgba(255,255,255,.35);
  padding: 8px;
  max-height: 55vh;
  overflow: auto;
}

/* Cores mais intuitivas */
.dash-kpi-ops{ background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(99,102,241,.10)); }
.dash-kpi-kg{ background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(34,197,94,.10)); }
.dash-date{ background: linear-gradient(135deg, rgba(148,163,184,.18), rgba(2,6,23,.02)); }
.dash-meta{ background: linear-gradient(135deg, rgba(79,70,229,.16), rgba(168,85,247,.10)); }

/* Evita “fundo branco” na tabela do dash dentro do modal */
.dash-compact .dash-table tbody td{ background: rgba(99,102,241,.06); }
.dash-compact .dash-row-has td{ background: rgba(99,102,241,.10); }
.dash-compact .dash-row-ok td{ background: rgba(16,185,129,.14); }

/* OP compacto */
.op-card .form-text{ font-size: .78rem; }