:root {
    --brand-teal: #0f766e;
    --brand-teal-dark: #115e59;
    --brand-teal-soft: rgba(15, 118, 110, 0.12);
    --brand-teal-border: rgba(15, 118, 110, 0.22);
    --surface-page: #f5f7f8;
    --surface-panel: #ffffff;
    --surface-muted: #eef4f4;
    --text-main: #172124;
    --text-muted: #667085;
    --border-soft: #dbe4e6;
    --shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
}

html,
body {
    background: var(--surface-page) !important;
    color: var(--text-main);
    letter-spacing: 0;
}

body {
    font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
}

[style*="linear-gradient"],
[style*="radial-gradient"],
[class*="gradient"] {
    background-image: none !important;
}

.color-web,
.colorWeb,
.school-home-btn,
.btn-enter,
.btn-join,
.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-primary,
.bg-primary,
.bg-dark,
.navbar-dark,
.card-header.bg-dark,
.progress-bar {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: #fff !important;
}

.color-web:hover,
.colorWeb:hover,
.school-home-btn:hover,
.btn-enter:hover,
.btn-join:hover,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--brand-teal-dark) !important;
    border-color: var(--brand-teal-dark) !important;
    color: #fff !important;
}

.color-web *,
.colorWeb *,
.school-home-btn *,
.btn-enter *,
.btn-join *,
.school-home-btn i,
.btn-enter i,
.btn-join i,
.school-home-btn span,
.btn-enter span,
.btn-join span,
.btn-primary *,
.btn-primary i,
.btn-primary svg,
.btn-primary span,
.btn-primary small,
.btn-primary:hover *,
.btn-primary:focus *,
.btn-primary:active *,
.btn-primary.active * {
    color: #fff !important;
    stroke: currentColor !important;
}

a,
.navbar.fixed-bottom .nav-link.active,
.text-primary {
    color: var(--brand-teal) !important;
}

.btn-outline-primary,
.btn-outline-secondary:hover {
    border-color: var(--brand-teal) !important;
    color: var(--brand-teal) !important;
    background-color: #fff !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
    color: #fff !important;
}

.btn-outline-primary:hover *,
.btn-outline-primary:focus *,
.btn-outline-primary:active *,
.btn-outline-primary.active *,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary *,
.btn-check:active + .btn-outline-primary,
.btn-check:active + .btn-outline-primary * {
    color: #fff !important;
    stroke: currentColor !important;
}

.btn-light,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning {
    color: var(--text-main) !important;
}

.btn-light *,
.btn-outline-secondary *,
.btn-outline-success *,
.btn-outline-info *,
.btn-outline-warning * {
    color: inherit !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.class-card,
.custom-card,
.notification-card,
.kelas-item,
.soal-card {
    border-radius: 8px !important;
    border-color: var(--border-soft) !important;
    box-shadow: var(--shadow-soft) !important;
}

.card,
.modal-content,
.dropdown-menu,
.list-group-item {
    background-color: var(--surface-panel) !important;
}

.login-shell {
    overflow: hidden;
    border: 1px solid var(--border-soft) !important;
    background: var(--surface-panel) !important;
}

.form-control,
.form-select,
.input-group-text,
.btn {
    border-radius: 8px !important;
}

.form-control,
.form-select {
    border-color: var(--border-soft) !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 0.2rem rgba(15, 118, 110, 0.16) !important;
}

.form-check-input:checked {
    background-color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
}

.menu-samping,
[style*="background-color:rgb(238, 236, 226)"],
[style*="background-color: rgb(238, 236, 226)"],
[style*="background: rgb(244, 232, 220)"],
[style*="background-color: #EEECE2"],
[style*="background-color:#EEECE2"] {
    background: var(--surface-muted) !important;
}

.menu-samping.app-sidebar {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    overflow: hidden !important;
    padding: 16px 12px !important;
}

.sidebar-brand {
    flex: 0 0 auto !important;
    padding: 4px 8px 12px !important;
    border-bottom: 1px solid var(--brand-teal-border) !important;
}

.sidebar-brand a {
    min-height: 42px;
    border-radius: 8px;
}

.sidebar-brand a:hover {
    color: var(--brand-teal) !important;
}

.sidebar-menu {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
}

.sidebar-footer {
    flex: 0 0 auto !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--brand-teal-border) !important;
    background: var(--surface-muted) !important;
}

.menu-item {
    border-radius: 8px !important;
    min-height: 42px;
}

.menu-item:hover,
.menu-item.active {
    background-color: var(--surface-panel) !important;
}

.menu-item.active {
    border-left: 3px solid var(--brand-teal);
}

[style*="rgb(218, 119, 86)"],
[style*="rgb(219, 106, 68)"],
[style*="#da7756"],
[style*="#db6a44"],
[style*="#dc6a4a"],
[style*="#dd6a4a"],
[style*="#de6a4a"],
[style*="#e06a4a"],
[style*="#FF9F43"],
[style*="rgb(231, 95, 50)"],
[style*="rgb(206, 100, 65)"],
[style*="rgb(188, 89, 56)"] {
    border-color: var(--brand-teal) !important;
}

[style*="background-color: rgb(218, 119, 86)"],
[style*="background-color:rgb(218, 119, 86)"],
[style*="background: rgb(218, 119, 86)"],
[style*="background:rgb(218, 119, 86)"],
[style*="background-color: rgb(219, 106, 68)"],
[style*="background-color:rgb(219, 106, 68)"],
[style*="background: rgb(219, 106, 68)"],
[style*="background:rgb(219, 106, 68)"],
[style*="background-color: #da7756"],
[style*="background-color:#da7756"],
[style*="background: #da7756"],
[style*="background:#da7756"],
[style*="background-color: #db6a44"],
[style*="background-color:#db6a44"],
[style*="background: #db6a44"],
[style*="background:#db6a44"],
[style*="background-color: #dc6a4a"],
[style*="background-color:#dc6a4a"],
[style*="background: #dc6a4a"],
[style*="background:#dc6a4a"],
[style*="background-color: #dd6a4a"],
[style*="background-color:#dd6a4a"],
[style*="background: #dd6a4a"],
[style*="background:#dd6a4a"],
[style*="background-color: #de6a4a"],
[style*="background-color:#de6a4a"],
[style*="background: #de6a4a"],
[style*="background:#de6a4a"],
[style*="background-color: #e06a4a"],
[style*="background-color:#e06a4a"],
[style*="background: #e06a4a"],
[style*="background:#e06a4a"],
[style*="background-color: rgb(231, 95, 50)"],
[style*="background-color:rgb(231, 95, 50)"],
[style*="background-color: rgb(206, 100, 65)"],
[style*="background-color:rgb(206, 100, 65)"],
[style*="background-color: rgb(188, 89, 56)"],
[style*="background-color:rgb(188, 89, 56)"] {
    background: var(--brand-teal) !important;
    background-color: var(--brand-teal) !important;
    color: #fff !important;
}

[style*="color: rgb(218, 119, 86)"],
[style*="color:rgb(218, 119, 86)"],
[style*="color: rgb(219, 106, 68)"],
[style*="color:rgb(219, 106, 68)"],
[style*="color: #da7756"],
[style*="color:#da7756"],
[style*="color: #db6a44"],
[style*="color:#db6a44"],
[style*="color: #dc6a4a"],
[style*="color:#dc6a4a"],
[style*="color: #dd6a4a"],
[style*="color:#dd6a4a"],
[style*="color: #de6a4a"],
[style*="color:#de6a4a"],
[style*="color: #e06a4a"],
[style*="color:#e06a4a"],
[style*="color: #FF9F43"],
[style*="color:#FF9F43"] {
    color: var(--brand-teal) !important;
}

[style*="rgba(218, 119, 86"],
[style*="rgba(219, 106, 68"] {
    border-color: var(--brand-teal-border) !important;
}

[style*="background-color: rgba(218, 119, 86"],
[style*="background: rgba(218, 119, 86"],
[style*="background-color: rgba(219, 106, 68"],
[style*="background: rgba(219, 106, 68"] {
    background: var(--brand-teal-soft) !important;
    color: var(--brand-teal) !important;
}

[style*="linear-gradient"],
[style*="radial-gradient"] {
    background-image: none !important;
}

.modal-backdrop {
    background-color: #0f172a !important;
}

.zayni-copyright {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.hamburger-btn,
.logo,
.nav-title,
.nav-arrow,
.content-section h1,
.content-section h2,
.content-section h3,
.content-section strong,
.search-input:focus,
[class*="ti-"].text-warning {
    color: var(--brand-teal) !important;
    border-color: var(--brand-teal) !important;
}

.nav-title:hover,
.nav-title.active,
.search-result-item:hover {
    background-color: var(--brand-teal-soft) !important;
    color: var(--brand-teal) !important;
}

.bantuan-page .alert i,
.bantuan-page .nav-title,
.bantuan-page .content-section h1 {
    color: var(--brand-teal) !important;
}

.darkmode--activated {
    --brand-teal: #2dd4bf;
    --brand-teal-dark: #14b8a6;
    --brand-teal-soft: rgba(45, 212, 191, 0.16);
    --brand-teal-border: rgba(45, 212, 191, 0.28);
    --surface-page: #111827;
    --surface-panel: #1f2937;
    --surface-muted: #162025;
    --text-main: #f8fafc;
    --text-muted: #cbd5e1;
    --border-soft: #334155;
}

.darkmode--activated .menu-samping,
.darkmode--activated [style*="background-color:rgb(238, 236, 226)"] {
    background: var(--surface-muted) !important;
}

/* Final contrast guard: keep text readable on filled action buttons. */
.btn-primary,
.btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:checked + .btn-outline-secondary,
.btn-check:checked + .btn-outline-success,
.btn-check:checked + .btn-outline-info,
.btn-check:checked + .btn-outline-warning,
.btn-check:checked + .btn-outline-danger,
[class*="btn-"][style*="background: rgb(15, 118, 110)"],
[class*="btn-"][style*="background-color: rgb(15, 118, 110)"],
[class*="btn-"][style*="background:#0f766e"],
[class*="btn-"][style*="background: #0f766e"],
[class*="btn-"][style*="background-color:#0f766e"],
[class*="btn-"][style*="background-color: #0f766e"] {
    color: #fff !important;
}

.btn-primary *,
.btn-primary:visited *,
.btn-primary:hover *,
.btn-primary:focus *,
.btn-primary:active *,
.btn-primary.active *,
.btn-check:checked + .btn-outline-primary *,
.btn-check:checked + .btn-outline-secondary *,
.btn-check:checked + .btn-outline-success *,
.btn-check:checked + .btn-outline-info *,
.btn-check:checked + .btn-outline-warning *,
.btn-check:checked + .btn-outline-danger *,
[class*="btn-"][style*="background: rgb(15, 118, 110)"] *,
[class*="btn-"][style*="background-color: rgb(15, 118, 110)"] *,
[class*="btn-"][style*="background:#0f766e"] *,
[class*="btn-"][style*="background: #0f766e"] *,
[class*="btn-"][style*="background-color:#0f766e"] *,
[class*="btn-"][style*="background-color: #0f766e"] * {
    color: #fff !important;
    stroke: currentColor !important;
}