/* v81 — Global dynamic color theme */
:root{
  --app-dark:#064e3b;
  --app-main:#08775a;
  --app-mid:#0a8a67;
  --app-accent:#34d399;
  --app-soft:#dff5ea;
  --app-soft2:#edf9f4;
  --app-border:#b9dccd;
  --app-text:#123f34;
  --app-on:#ffffff;
}
body.theme-hijau{
  --app-dark:#064e3b;--app-main:#08775a;--app-mid:#0a8a67;--app-accent:#34d399;
  --app-soft:#dff5ea;--app-soft2:#edf9f4;--app-border:#b9dccd;--app-text:#123f34;--app-on:#fff;
}
body.theme-merah{
  --app-dark:#5b1820;--app-main:#812630;--app-mid:#9f3440;--app-accent:#d45b64;
  --app-soft:#f6dfe2;--app-soft2:#fbf1f2;--app-border:#e2b9bf;--app-text:#4a171c;--app-on:#fff;
}
body.theme-coklat{
  --app-dark:#3e291f;--app-main:#68483a;--app-mid:#7d5a4a;--app-accent:#a47a67;
  --app-soft:#eadfd9;--app-soft2:#f7f1ee;--app-border:#d6c2b7;--app-text:#3f2b23;--app-on:#fff;
}

/* Sidebar and backend navigation */
body .sidebar{
  background:linear-gradient(180deg,var(--app-main) 0%,var(--app-dark) 100%)!important;
}
body .sidebar-footer{
  background:linear-gradient(180deg,color-mix(in srgb,var(--app-dark) 92%,transparent),var(--app-dark))!important;
}
body .sidebar a.active,
body .sidebar .nav-link.active,
body .sidebar .menu-item.active{
  background:color-mix(in srgb,var(--app-accent) 20%,transparent)!important;
  border-color:color-mix(in srgb,var(--app-accent) 45%,transparent)!important;
}

/* Header chips / accents */
body .date-chip, body .time-chip, body .period-active-chip{
  background:color-mix(in srgb,var(--app-soft) 80%,white)!important;
  border-color:var(--app-border)!important;
  color:var(--app-main)!important;
}
body .dot-live, body .clock-dot{background:var(--app-accent)!important}

/* Buttons */
body .btn.primary,
body button.btn.primary,
body .v65-submit{
  background:linear-gradient(135deg,var(--app-dark),var(--app-main) 55%,var(--app-mid))!important;
  border-color:var(--app-main)!important;
  color:var(--app-on)!important;
}
body .btn.soft{
  background:var(--app-soft)!important;
  border-color:var(--app-border)!important;
  color:var(--app-main)!important;
}

/* Forms / focus */
body input:focus, body select:focus, body textarea:focus{
  border-color:var(--app-main)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--app-main) 12%,transparent)!important;
}

/* Backend cards and tables */
body .card:not(.dash55-metric):not(.dash55-chart-card):not(.dash55-summary-card):not(.dash55-table-card):not(.org-summary){
  background:linear-gradient(145deg,var(--app-soft2),var(--app-soft))!important;
  border-color:var(--app-border)!important;
}
body table thead th{
  background:linear-gradient(135deg,var(--app-soft),color-mix(in srgb,var(--app-soft) 75%,var(--app-main)))!important;
  color:var(--app-text)!important;
}
body table tbody tr:nth-child(even){background:color-mix(in srgb,var(--app-soft2) 85%,white)!important}
body table tbody tr:hover{background:var(--app-soft)!important}

/* Dashboard dark panels */
body .dash55-metric,
body .dash55-chart-card,
body .dash55-summary-card,
body .dash55-table-card,
body .org-summary{
  background:linear-gradient(145deg,var(--app-main) 0%,var(--app-dark) 100%)!important;
  border-color:color-mix(in srgb,var(--app-accent) 28%,var(--app-main))!important;
}

/* Public frontend header/footer */
body .public-header,
body header.public-header,
body .public-footer,
body footer.public-footer{
  background:linear-gradient(110deg,var(--app-dark),var(--app-main),var(--app-mid))!important;
}

/* Login full page and phone */
body.v65-login{
  background:linear-gradient(135deg,var(--app-dark),var(--app-main),var(--app-mid))!important;
}
body.v65-login .v65-screen{
  background:
    radial-gradient(circle at 78% 10%,color-mix(in srgb,var(--app-accent) 18%,transparent),transparent 26%),
    linear-gradient(180deg,var(--app-mid),var(--app-main),var(--app-dark))!important;
}

/* Theme settings */
.theme-auto-note{
  margin:6px 0 12px;padding:9px 11px;border-radius:10px;
  background:var(--app-soft);border:1px solid var(--app-border);
  color:var(--app-text);font-size:9px;font-weight:700;
}
.theme-choice:has(input:checked){
  border-color:var(--app-main)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--app-main) 13%,transparent)!important;
}