:root {
    --brand-gold: #d7a21b;
    --brand-gold-dark: #b98508;
    --brand-gold-soft: #fff4d6;
    --brand-ink: #2f2817;
    --brand-muted: #756b57;
    --brand-border: #eadfbf;
    --bs-primary: var(--brand-gold);
    --bs-primary-rgb: 215, 162, 27;
    --bs-link-color: var(--brand-gold-dark);
    --bs-link-hover-color: #8f6506;
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html,
body {
    font-family: var(--bs-font-sans-serif);
    color: var(--brand-ink);
    background-color: #f8f5ef;
    letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-title,
.page-title-box h4,
.modal-title {
    color: var(--brand-ink);
    font-family: var(--bs-font-sans-serif);
    font-weight: 700;
    letter-spacing: 0;
}

a {
    color: var(--brand-gold-dark);
}

a:hover {
    color: #8f6506;
}

.text-primary {
    color: var(--brand-gold-dark) !important;
}

.bg-primary,
.badge.bg-primary {
    background-color: var(--brand-gold) !important;
}

.border-primary {
    border-color: var(--brand-gold) !important;
}

.btn {
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0;
}

.btn-primary {
    color: #fff;
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
    box-shadow: 0 8px 18px rgba(215, 162, 27, .22);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--brand-gold-dark);
    border-color: var(--brand-gold-dark);
    box-shadow: 0 8px 18px rgba(185, 133, 8, .25);
}

.btn-outline-primary {
    color: var(--brand-gold-dark);
    border-color: var(--brand-gold);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    color: #fff;
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
}

.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: #ded7c8;
    border-radius: 6px;
    color: var(--brand-ink);
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 .2rem rgba(215, 162, 27, .16);
}

.form-floating-custom > .form-control:focus ~ label,
.form-floating-custom > .form-control:not(:placeholder-shown) ~ label,
.form-floating-icon,
.form-floating-custom .form-control:focus ~ .form-floating-icon {
    color: var(--brand-gold-dark);
}

#page-topbar {
    background-color: #fff;
    border-bottom: 1px solid var(--brand-border);
    box-shadow: 0 4px 18px rgba(47, 40, 23, .05);
}

.navbar-brand-box {
    background-color: #fff !important;
    border-right: 1px solid var(--brand-border);
}

.navbar-header .header-item {
    color: var(--brand-ink);
}

.vertical-menu {
    background: #fff;
    border-right: 1px solid var(--brand-border);
    box-shadow: 4px 0 18px rgba(47, 40, 23, .04);
}

#sidebar-menu ul li.menu-title {
    color: var(--brand-muted);
    font-weight: 700;
    letter-spacing: .04em;
}

#sidebar-menu ul li a {
    color: #4f4737;
    font-weight: 600;
}

#sidebar-menu ul li a i,
#sidebar-menu ul li a svg {
    color: var(--brand-gold-dark);
    stroke: var(--brand-gold-dark);
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active {
    color: var(--brand-gold-dark);
    background-color: var(--brand-gold-soft);
}

#sidebar-menu ul li ul.sub-menu li a {
    color: #665d4d;
}

#sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu ul li ul.sub-menu li a.active {
    color: var(--brand-gold-dark);
}

.main-content,
.page-content {
    background-color: #f8f5ef;
}

.card {
    border: 1px solid var(--brand-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(47, 40, 23, .06);
}

.card-header,
.modal-header {
    background-color: #fffaf0;
    border-bottom-color: var(--brand-border);
}

.table {
    color: var(--brand-ink);
}

.table thead th,
table.dataTable thead th {
    color: var(--brand-ink);
    background-color: #fff9e8;
    border-color: var(--brand-border);
    font-weight: 700;
}

.table td,
.table th,
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-color: #eee5cf;
}

.page-item.active .page-link,
.pagination .active > .page-link {
    background-color: var(--brand-gold);
    border-color: var(--brand-gold);
}

.page-link {
    color: var(--brand-gold-dark);
}

.dropdown-menu {
    border-color: var(--brand-border);
    box-shadow: 0 10px 30px rgba(47, 40, 23, .12);
}

.dropdown-item:active,
.dropdown-item:hover {
    color: var(--brand-gold-dark);
    background-color: var(--brand-gold-soft);
}

.footer {
    background-color: #fff;
    border-top: 1px solid var(--brand-border);
    color: var(--brand-muted);
}

.auth-page {
    background: #f8f5ef;
}

.auth-full-page-content {
    background-color: #fff;
    box-shadow: 8px 0 30px rgba(47, 40, 23, .08);
}

.auth-logo img,
.logo-lg img {
    object-fit: contain;
}

.auth-bg {
    background-image: linear-gradient(rgba(47, 40, 23, .42), rgba(47, 40, 23, .42)), url("/assets/images/auth-bg.jpg");
    background-size: cover;
    background-position: center;
}

.auth-bg .bg-overlay {
    background: linear-gradient(135deg, rgba(215, 162, 27, .72), rgba(47, 40, 23, .82));
}

.bg-bubbles li {
    background-color: rgba(255, 244, 214, .2);
    border: 1px solid rgba(255, 244, 214, .32);
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 143% !important;
    color: var(--bs-modal-color);
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--brand-border);
    border-radius: 8px;
    outline: 0;
    left: -16% !important;
    box-shadow: 0 18px 50px rgba(47, 40, 23, .18);
}

.note-editor.note-frame {
    border-color: var(--brand-border);
    border-radius: 8px;
}

.note-toolbar {
    background-color: #fffaf0;
    border-bottom-color: var(--brand-border);
}

@media (max-width: 767.98px) {
    .modal-content {
        width: 100% !important;
        left: 0 !important;
    }
}