:root {
  /* COR PRINCIPAL DO FUNDO (gradiente topo/esquerda) */
  --bg-start: #dbe6f5;
  /* COR SECUNDARIA DO FUNDO (gradiente base/direita) */
  --bg-end: #f6f8fc;
  /* MANCHA DE LUZ 1 (efeito liquid glass no fundo) */
  --bg-orb-1: rgba(109, 168, 255, 0.34);
  /* MANCHA DE LUZ 2 */
  --bg-orb-2: rgba(255, 186, 124, 0.26);
  /* MANCHA DE LUZ 3 */
  --bg-orb-3: rgba(161, 255, 220, 0.18);

  /* TEXTO PRINCIPAL */
  --text-main: #162033;
  /* TEXTO SECUNDARIO */
  --text-muted: #5f6b7c;

  /* COR DA MARCA / DESTAQUE PRINCIPAL */
  --brand: #1e2f4f;
  /* DESTAQUE HOVER/SECUNDARIO */
  --brand-2: #365d9d;

  /* VIDRO: FUNDO DOS CARDS/MENU/TOPBAR */
  --glass-bg: rgba(255, 255, 255, 0.34);
  /* VIDRO: BORDA CLARA */
  --glass-border: rgba(255, 255, 255, 0.55);
  /* VIDRO: BRILHO INTERNO */
  --glass-highlight: rgba(255, 255, 255, 0.72);
  /* SOMBRA SUAVE */
  --glass-shadow: rgba(20, 32, 51, 0.14);

  /* BOTAO PRIMARIO */
  --btn-primary-bg: rgba(30, 47, 79, 0.84);
  --btn-primary-border: rgba(30, 47, 79, 0.9);
  --btn-primary-text: #ffffff;

  /* BOTAO SUCCESS (confirmar/finalizar) */
  --btn-success-bg: rgba(16, 132, 97, 0.85);
  --btn-success-border: rgba(16, 132, 97, 0.9);
  --btn-success-text: #ffffff;

  /* BOTAO WARNING (plano) */
  --btn-warning-bg: rgba(244, 175, 44, 0.88);
  --btn-warning-border: rgba(230, 160, 28, 0.92);
  --btn-warning-text: #1c150a;

  /* BOTAO PERIGO */
  --btn-danger-bg: rgba(196, 58, 74, 0.88);
  --btn-danger-border: rgba(196, 58, 74, 0.94);
  --btn-danger-text: #ffffff;

  /* CAMPOS (input/select) */
  --field-bg: rgba(255, 255, 255, 0.44);
  --field-border: rgba(255, 255, 255, 0.62);
  --field-focus: rgba(73, 130, 224, 0.42);

  /* TABELAS */
  --table-head-bg: rgba(255, 255, 255, 0.36);
  --table-row-border: rgba(255, 255, 255, 0.38);

  /* ALERTAS */
  --alert-glass: rgba(255, 255, 255, 0.42);
}

html,
body {
  min-height: 100%;
}

body {
  color: var(--text-main);
  background:
    radial-gradient(40rem 40rem at 10% 10%, var(--bg-orb-1), transparent 60%),
    radial-gradient(35rem 35rem at 85% 15%, var(--bg-orb-2), transparent 62%),
    radial-gradient(28rem 28rem at 70% 80%, var(--bg-orb-3), transparent 65%),
    linear-gradient(160deg, var(--bg-start), var(--bg-end));
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.06) 0 1px,
      transparent 1px 14px
    );
  opacity: 0.45;
  z-index: 0;
}

header,
main {
  position: relative;
  z-index: 1;
}

.topbar {
  background: rgba(255, 255, 255, 0.22);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    linear-gradient(145deg, var(--brand), var(--brand-2));
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 20px rgba(36, 71, 126, 0.24);
  font-weight: 700;
}

.brand-text {
  color: var(--brand);
  font-weight: 700;
  letter-spacing: 0.2px;
}

.card,
.offcanvas,
.alert,
.border.rounded {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  box-shadow:
    0 10px 35px var(--glass-shadow),
    inset 0 1px 0 var(--glass-highlight);
}

.card {
  border-radius: 18px;
}

.card .card-body {
  position: relative;
}

.card .card-body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.18),
    rgba(255, 255, 255, 0.03) 48%,
    rgba(255, 255, 255, 0.08)
  );
  opacity: 0.6;
}

.card .card-body > * {
  position: relative;
  z-index: 1;
}

.text-muted {
  color: var(--text-muted) !important;
}

.display-6,
.h3,
.h5,
.h6 {
  color: var(--text-main);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.16);
  --bs-table-hover-bg: rgba(255, 255, 255, 0.22);
  --bs-table-color: var(--text-main);
  margin-bottom: 0;
}

.table thead th {
  background: var(--table-head-bg);
  border-bottom-color: var(--table-row-border);
  font-weight: 600;
}

.table td,
.table th {
  vertical-align: middle;
  white-space: nowrap;
  border-color: var(--table-row-border);
}

.table-responsive {
  border-radius: 14px;
}

.btn,
.form-control,
.form-select {
  min-height: 42px;
  border-radius: 12px;
}

.form-control-sm,
.btn-sm,
.form-select-sm {
  min-height: 36px;
  border-radius: 10px;
}

.form-control,
.form-select {
  background: var(--field-bg);
  border: 1px solid var(--field-border);
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.form-control::placeholder {
  color: rgba(38, 48, 66, 0.6);
}

input[type="date"],
input[type="time"] {
  color: var(--text-main);
  -webkit-text-fill-color: var(--text-main);
}

input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  color: inherit;
}

input[type="date"]:required:invalid,
input[type="time"]:required:invalid {
  color: rgba(38, 48, 66, 0.6);
  -webkit-text-fill-color: rgba(38, 48, 66, 0.6);
}

.form-control:focus,
.form-select:focus {
  background: rgba(255, 255, 255, 0.56);
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    0 0 0 0.2rem var(--field-focus),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.btn {
  border-width: 1px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 8px 18px rgba(21, 32, 51, 0.12);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-border);
  --bs-btn-color: var(--btn-primary-text);
  --bs-btn-hover-bg: rgba(27, 42, 70, 0.92);
  --bs-btn-hover-border-color: rgba(27, 42, 70, 0.98);
  --bs-btn-active-bg: rgba(20, 33, 57, 0.96);
  --bs-btn-active-border-color: rgba(20, 33, 57, 1);
}

.btn-success {
  --bs-btn-bg: var(--btn-success-bg);
  --bs-btn-border-color: var(--btn-success-border);
  --bs-btn-color: var(--btn-success-text);
  --bs-btn-hover-bg: rgba(13, 116, 84, 0.94);
  --bs-btn-hover-border-color: rgba(13, 116, 84, 1);
  --bs-btn-active-bg: rgba(11, 103, 75, 0.96);
  --bs-btn-active-border-color: rgba(11, 103, 75, 1);
}

.btn-warning {
  --bs-btn-bg: var(--btn-warning-bg);
  --bs-btn-border-color: var(--btn-warning-border);
  --bs-btn-color: var(--btn-warning-text);
  --bs-btn-hover-bg: rgba(235, 166, 36, 0.95);
  --bs-btn-hover-border-color: rgba(220, 154, 30, 1);
  --bs-btn-active-bg: rgba(218, 149, 27, 0.96);
  --bs-btn-active-border-color: rgba(208, 140, 22, 1);
}

.btn-danger {
  --bs-btn-bg: var(--btn-danger-bg);
  --bs-btn-border-color: var(--btn-danger-border);
  --bs-btn-color: var(--btn-danger-text);
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-dark {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.btn-light {
  --bs-btn-bg: rgba(255, 255, 255, 0.32);
  --bs-btn-border-color: rgba(255, 255, 255, 0.42);
  --bs-btn-color: var(--text-main);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.46);
  --bs-btn-hover-border-color: rgba(255, 255, 255, 0.56);
}

.alert {
  border-radius: 14px;
  background: var(--alert-glass);
}

.alert-success {
  color: #0e5132;
}

.alert-danger {
  color: #7c2330;
}

.alert-warning {
  color: #6b4b11;
}

.badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.offcanvas {
  background: rgba(246, 249, 255, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.nav.flex-column .btn {
  justify-content: flex-start;
  text-align: left;
  font-weight: 500;
}

.topbar nav {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar nav .btn {
  white-space: nowrap;
}

a.btn-link {
  color: var(--brand-2);
}

a.btn-link:hover {
  color: var(--brand);
}

.mobile-table {
  background: rgba(255, 255, 255, 0.16);
}

@media (max-width: 991.98px) {
  .topbar nav .btn.btn-sm {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }

  .row.g-3 > [class*="col-"] + [class*="col-"] .card {
    margin-top: 0;
  }
}

@media (max-width: 767.98px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  h1,
  .h3 {
    font-size: 1.12rem;
  }

  .brand-text {
    font-size: 0.95rem;
  }

  .display-6 {
    font-size: 1.7rem;
  }

  .card {
    border-radius: 16px;
  }

  .mobile-table {
    border-radius: 12px;
  }

  .mobile-table table {
    min-width: 640px;
  }

  .offcanvas {
    width: min(88vw, 360px);
  }
}