:root {
  --alo-green-900: #004200;
  --alo-green-800: #063f12;
  --alo-green-700: #07551a;
  --alo-lime: #2cff05;
  --alo-lime-soft: #dcffd6;
  --alo-orange: #ff5800;
  --alo-orange-soft: #fff0e8;
  --alo-ink: #102114;
  --alo-muted: #64736a;
  --alo-bg: #f7faf5;
  --alo-surface: #ffffff;
  --alo-border: rgba(0, 66, 0, .14);
  --alo-shadow: 0 12px 30px rgba(0, 66, 0, .10);
  --alo-shadow-soft: 0 4px 16px rgba(0, 66, 0, .08);
}

html {
  color-scheme: light;
}

html {
  --bg: var(--alo-bg);
  --card: var(--alo-surface);
  --text: var(--alo-ink);
  --muted: var(--alo-muted);
  --border: var(--alo-border);
  --primary: var(--alo-green-900);
  --shadow: var(--alo-shadow);
  --shadow2: var(--alo-shadow-soft);
  --radius: 12px;
}

body {
  background:
    radial-gradient(circle at top right, rgba(44, 255, 5, .18), transparent 32rem),
    linear-gradient(180deg, #fbfdf9 0%, var(--alo-bg) 100%) !important;
  color: var(--alo-ink) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(44, 255, 5, .08), transparent 28%),
    radial-gradient(circle at 8% 12%, rgba(255, 88, 0, .10), transparent 20rem);
  z-index: -1;
}

header,
.topbar,
.navbar,
.app-header {
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid var(--alo-border) !important;
  box-shadow: var(--alo-shadow-soft) !important;
  backdrop-filter: blur(12px);
}

header {
  min-height: 72px;
}

header::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--alo-lime), var(--alo-orange));
}

.brand .logo,
.logo,
.brand-logo {
  background: var(--alo-lime) !important;
  color: var(--alo-green-900) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 22px rgba(44, 255, 5, .22) !important;
}

.logo::before,
.brand .logo::before,
.brand-logo::before {
  content: "";
  width: 28px;
  height: 28px;
  display: block;
  background: url("/static/alo_socia/logo-alo-socia-icon.png") center / contain no-repeat;
}

.logo,
.brand .logo,
.brand-logo {
  font-size: 0 !important;
}

.title,
h1,
h2,
h3 {
  color: var(--alo-green-900);
  letter-spacing: 0 !important;
}

.title {
  font-size: 20px !important;
  font-weight: 950 !important;
}

.brand {
  gap: 14px !important;
}

.subtitle,
.sub,
.muted,
small {
  color: var(--alo-muted) !important;
}

.btn,
button[type="submit"],
input[type="submit"],
.fg-btn,
.aBtn,
.btnSm,
.iconBtn {
  background: var(--alo-green-900) !important;
  color: #fff !important;
  border-color: var(--alo-green-900) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 22px rgba(0, 66, 0, .16) !important;
  min-height: 40px;
  font-weight: 850 !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}

.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.fg-btn:hover,
.aBtn:hover,
.btnSm:hover,
.iconBtn:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn:not(.ghost):not(.btn-ghost)::after,
button[type="submit"]::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--alo-lime);
  margin-left: 2px;
}

.btn.ghost,
.btn-ghost,
.ghost,
.btn.secondary,
.btn-secondary,
.iconBtn {
  background: #fff !important;
  color: var(--alo-green-900) !important;
  border: 1px solid var(--alo-border) !important;
  box-shadow: none !important;
}

.actions,
.quick {
  gap: 10px !important;
}

.qbtn {
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .78) !important;
}

.btn.danger,
.danger {
  background: #b42318 !important;
  border-color: #b42318 !important;
  color: #fff !important;
}

.qbtn.active,
.pill.active,
.fg-pill {
  background: var(--alo-lime-soft) !important;
  border-color: rgba(44, 255, 5, .65) !important;
  color: var(--alo-green-900) !important;
}

.card,
.panel,
.box,
.form-card,
.tableWrap,
.modalContent,
.login-card {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--alo-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--alo-shadow-soft) !important;
  position: relative;
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--alo-shadow) !important;
}

.kpi.card::before,
.card.kpi::before,
.card[data-accent]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--alo-lime);
}

.cardTitle {
  text-transform: none !important;
  color: var(--alo-muted) !important;
  font-weight: 900 !important;
}

.value,
.fg-val,
.v {
  color: var(--alo-green-900) !important;
  letter-spacing: 0 !important;
  font-weight: 950 !important;
}

.chip,
.pill,
.badge,
.tag {
  border-radius: 999px !important;
  border: 1px solid var(--alo-border) !important;
  background: rgba(44, 255, 5, .12) !important;
  color: var(--alo-green-900) !important;
}

.hint {
  background: var(--alo-lime-soft) !important;
  color: var(--alo-green-900) !important;
}

input,
select,
textarea {
  border-color: var(--alo-border) !important;
  border-radius: 10px !important;
}

input,
select,
textarea {
  background: #fff !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--alo-green-900) !important;
  box-shadow: 0 0 0 3px rgba(44, 255, 5, .22) !important;
  outline: none !important;
}

table thead,
.thead {
  background: #f0f9ec !important;
  color: var(--alo-green-900) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  color: var(--alo-green-900) !important;
  font-weight: 900 !important;
}

td,
th {
  border-color: rgba(0, 66, 0, .10) !important;
}

tr {
  transition: background .16s ease;
}

tbody tr:hover {
  background: rgba(44, 255, 5, .07) !important;
}

.tableCard,
.tableWrap {
  overflow: hidden !important;
}

.toast,
.modal {
  backdrop-filter: blur(10px);
}

.intelBox,
.preview,
.hintBox {
  background: linear-gradient(135deg, rgba(44, 255, 5, .12), rgba(255, 88, 0, .08)) !important;
  border: 1px solid var(--alo-border) !important;
  border-radius: 12px !important;
}

footer {
  color: var(--alo-muted) !important;
}

@media (max-width: 720px) {
  header {
    align-items: flex-start !important;
  }

  .brand {
    min-width: 0 !important;
  }

  main {
    padding: 16px !important;
  }
}

.alo-brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.alo-brand-mark img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.alo-brand-name {
  font-weight: 900;
  color: var(--alo-green-900);
}

/* Alô SocIA dark module theme */
html {
  color-scheme: dark !important;
  --alo-bg: #020302;
  --alo-surface: #0d1711;
  --alo-ink: #f4fff2;
  --alo-muted: #9fb2a4;
  --alo-border: rgba(180, 255, 168, .14);
  --alo-shadow: 0 30px 90px rgba(0, 0, 0, .56);
  --alo-shadow-soft: 0 18px 52px rgba(0, 0, 0, .38);
  --bg: #020302;
  --card: #0d1711;
  --text: #f4fff2;
  --muted: #9fb2a4;
  --border: rgba(180, 255, 168, .14);
  --primary: var(--alo-lime);
  --shadow: var(--alo-shadow);
  --shadow2: var(--alo-shadow-soft);
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(44, 255, 5, .10), transparent 24rem),
    radial-gradient(circle at 88% 10%, rgba(255, 88, 0, .13), transparent 24rem),
    radial-gradient(circle at 52% 112%, rgba(44, 255, 5, .055), transparent 32rem),
    linear-gradient(180deg, #020302 0%, #050806 42%, #030604 100%) !important;
  color: #f4fff2 !important;
}

body::before {
  background:
    linear-gradient(120deg, rgba(44, 255, 5, .035), transparent 42%),
    linear-gradient(0deg, rgba(0, 0, 0, .52), transparent 48%) !important;
}

header,
.topbar,
.navbar,
.app-header {
  border: 1px solid var(--alo-border) !important;
  border-bottom: 1px solid var(--alo-border) !important;
  border-radius: 22px !important;
  background:
    linear-gradient(135deg, rgba(6, 10, 8, .98), rgba(13, 23, 17, .96)),
    radial-gradient(circle at 92% 0%, rgba(255, 88, 0, .11), transparent 18rem),
    radial-gradient(circle at 0% 100%, rgba(44, 255, 5, .09), transparent 16rem) !important;
  box-shadow: 0 20px 58px rgba(0, 0, 0, .48) !important;
}

header {
  margin: 18px auto 0;
  width: min(1240px, calc(100% - 48px));
}

header::after {
  background: linear-gradient(90deg, transparent, rgba(44, 255, 5, .55), rgba(255, 88, 0, .34), transparent) !important;
  height: 1px !important;
}

.brand {
  padding: 8px 12px 8px 9px;
  border: 1px solid rgba(180, 255, 168, .12) !important;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(8, 15, 11, .88), rgba(14, 25, 18, .82)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px rgba(0, 0, 0, .24) !important;
}

.brand .logo,
.logo,
.brand-logo {
  background: linear-gradient(135deg, rgba(44, 255, 5, .18), rgba(255, 88, 0, .12)) !important;
  border: 1px solid rgba(44, 255, 5, .20) !important;
  color: #f4fff2 !important;
  box-shadow: 0 12px 26px rgba(44, 255, 5, .12) !important;
}

.title,
h1,
h2,
h3,
.value,
.fg-val,
.v,
.feedName,
.panelTitle {
  color: #f4fff2 !important;
}

.subtitle,
.sub,
.muted,
small,
.cardTitle,
.field label,
footer {
  color: #9fb2a4 !important;
}

#themeToggle {
  display: none !important;
}

.btn,
button[type="submit"],
input[type="submit"],
.fg-btn,
.aBtn,
.btnSm,
.iconBtn {
  background: linear-gradient(135deg, #00520a, #0d7a16) !important;
  color: #fff !important;
  border: 1px solid rgba(44, 255, 5, .28) !important;
  box-shadow: 0 14px 34px rgba(44, 255, 5, .13) !important;
}

.btn.ghost,
.btn-ghost,
.ghost,
.btn.secondary,
.btn-secondary,
.qbtn,
.iconBtn {
  background: linear-gradient(135deg, rgba(18, 31, 23, .88), rgba(8, 13, 10, .84)) !important;
  color: #efffed !important;
  border: 1px solid rgba(180, 255, 168, .13) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
}

.card,
.panel,
.box,
.form-card,
.tableWrap,
.tableCard,
.modalContent,
.login-card,
.filters,
.dates,
.preview,
.intelBox,
.hintBox,
.payBox,
.left,
.right {
  background:
    linear-gradient(145deg, rgba(18, 31, 23, .94), rgba(8, 13, 10, .92)),
    radial-gradient(circle at 100% 0%, rgba(44, 255, 5, .07), transparent 16rem) !important;
  border: 1px solid var(--alo-border) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, .42) !important;
  color: #f4fff2 !important;
}

.card::before,
.panel::before,
.tableCard::before,
.form-card::before {
  background: linear-gradient(90deg, #2cff05, rgba(255, 88, 0, .82)) !important;
}

.chip,
.pill,
.badge,
.tag,
.hint {
  border-color: rgba(44, 255, 5, .22) !important;
  background: rgba(44, 255, 5, .10) !important;
  color: #dfffda !important;
}

input,
select,
textarea {
  background: #0a120d !important;
  color: #f4fff2 !important;
  border-color: rgba(180, 255, 168, .16) !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(244, 255, 242, .48) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(44, 255, 5, .42) !important;
  box-shadow: 0 0 0 3px rgba(44, 255, 5, .14) !important;
}

table,
tbody,
tr,
td {
  color: #e8f9e8 !important;
}

table thead,
.thead,
th {
  background: rgba(44, 255, 5, .08) !important;
  color: #dfffda !important;
}

td,
th {
  border-color: rgba(180, 255, 168, .10) !important;
}

tbody tr:hover {
  background: rgba(44, 255, 5, .08) !important;
}

.insight,
.feedItem,
.lineItem,
.payBox,
.toast {
  background: linear-gradient(135deg, rgba(22, 38, 28, .90), rgba(7, 12, 9, .88)) !important;
  border: 1px solid rgba(180, 255, 168, .10) !important;
  color: #e8f9e8 !important;
}

@media (max-width: 720px) {
  header {
    width: calc(100% - 20px);
    margin-top: 10px;
  }
}