html,
body {
    font-family: "Circular Std", "SF Pro Display", "Avenir Next", "Montserrat", "Segoe UI", sans-serif;
    background: #f5efe7;
    color: #171412;
}

:root {
    --hatchers-ink: var(--bs-primary);
    --hatchers-sand: var(--bs-secondary);
    --hatchers-sand-deep: color-mix(in srgb, var(--bs-secondary), #000 12%);
    --hatchers-canvas: #f5efe7;
    --hatchers-surface: #fffdf9;
    --hatchers-surface-strong: #ffffff;
    --hatchers-border: #e7dccd;
    --hatchers-text: #171412;
    --hatchers-muted: #6e6458;
    --hatchers-shadow: 0 20px 45px rgba(17, 17, 17, 0.08);
}

body.light,
body {
    background: linear-gradient(180deg, #f8f3ec 0%, #f3ece4 100%);
    color: var(--hatchers-text);
}

.wrapper,
.content-wrapper,
.page-content,
.container-fluid {
    background: transparent;
}

.page-topbar {
    background: rgba(255, 253, 249, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid color-mix(in srgb, var(--hatchers-sand), transparent 45%);
    box-shadow: 0 8px 30px rgba(17, 17, 17, 0.05);
}

.navbar-header {
    min-height: 74px;
    align-items: center;
}

.sidebar {
    background: linear-gradient(180deg, #151311 0%, #1f1b17 100%);
    border-inline-end: 1px solid color-mix(in srgb, var(--hatchers-sand), transparent 86%);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.02);
}

.sidebar .border-bottom,
.sidebar-lg .border-bottom,
.sidebar-md .border-bottom {
    border-color: color-mix(in srgb, var(--hatchers-sand), transparent 82%) !important;
}

.sidebar .nav-link,
.sidebar .navbar-nav .nav-item .nav-link,
.sidebar .navbar-nav .multimenu .active-main,
.sidebar .multimenu-title,
.sidebar h6,
.sidebar .nav-text,
.sidebar .color-changer,
.sidebar a {
    color: rgba(255, 251, 245, 0.84) !important;
}

.sidebar .nav-link:hover,
.sidebar .nav-link:focus,
.sidebar .show > .nav-link,
.sidebar .collapse .nav-link:hover,
.sidebar .navbar-nav .nav-item .nav-link:hover,
.sidebar .navbar-nav .nav-item .nav-link:focus,
.sidebar .navbar-nav .multimenu .active-main:hover {
    background: color-mix(in srgb, var(--hatchers-sand), transparent 92%) !important;
    color: #ffffff !important;
    border-color: color-mix(in srgb, var(--hatchers-sand), transparent 84%) !important;
    box-shadow: none !important;
}

.sidebar .nav-link {
    border: 1px solid transparent;
    border-radius: 14px !important;
    transition: all 0.18s ease;
}

.sidebar .nav-link.active {
    font-weight: 700;
}

.sidebar .nav-link.active,
.sidebar .navbar-nav .nav-item .nav-link.active,
.sidebar .navbar-nav .multimenu .active-main {
    background: transparent !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: inset 3px 0 0 var(--hatchers-sand) !important;
}

.sidebar h6 {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    opacity: 0.7;
}

.main-content,
.main-content-rtl {
    background: transparent;
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu,
.list-group-item,
.accordion-item {
    background: rgba(255, 253, 249, 0.96);
    border: 1px solid var(--hatchers-border);
    box-shadow: var(--hatchers-shadow);
}

.card,
.modal-content,
.offcanvas,
.dropdown-menu {
    border-radius: 20px !important;
}

.card-header,
.bg-secondary {
    background: linear-gradient(180deg, #f7f1ea 0%, #efe4d7 100%) !important;
    color: var(--hatchers-ink) !important;
    border-bottom: 1px solid var(--hatchers-border) !important;
}

.settings-color,
.color-changer,
.page-header,
.breadcrumb-item,
.breadcrumb-item a,
.form-label,
.offcanvas-title {
    color: var(--hatchers-text) !important;
}

.text-muted,
.dropdown-item p,
.dropdown-item span,
.form-text {
    color: var(--hatchers-muted) !important;
}

.btn {
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.btn-primary,
.bg-primary {
    background: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: color-mix(in srgb, var(--bs-primary), #000 10%) !important;
    border-color: color-mix(in srgb, var(--bs-primary), #000 10%) !important;
}

.btn-secondary,
.header-btn-icon,
.lag-btn .btn,
.lag-btn2 .btn {
    background: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--hatchers-ink) !important;
}

.btn-secondary:hover,
.header-btn-icon:hover,
.lag-btn .btn:hover,
.lag-btn2 .btn:hover {
    background: var(--hatchers-sand-deep) !important;
    border-color: var(--hatchers-sand-deep) !important;
    color: var(--hatchers-ink) !important;
}

.form-control,
.form-select,
.bootstrap-select .dropdown-toggle,
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    background: #fffdfb !important;
    border: 1px solid var(--hatchers-border) !important;
    border-radius: 14px !important;
    color: var(--hatchers-text) !important;
    box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
.bootstrap-select .dropdown-toggle:focus,
.select2-container--focus .select2-selection,
.select2-container--open .select2-selection {
    border-color: var(--hatchers-sand-deep) !important;
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-secondary), transparent 78%) !important;
}

.table,
.table th,
.table td,
table.dataTable thead th,
table.dataTable tbody td {
    color: var(--hatchers-text) !important;
    border-color: color-mix(in srgb, var(--hatchers-sand), transparent 72%) !important;
}

.table thead,
.table-light,
table.dataTable thead th {
    background: #f3e9dd !important;
}

.badge.bg-danger,
.badge.bg-success,
.badge.bg-warning {
    border-radius: 999px;
}

.list-options .list-group-item,
.list-group-item {
    border-radius: 16px !important;
    margin-bottom: 10px;
}

.list-options .list-group-item.active,
.list-options .list-group-item:hover {
    background: var(--hatchers-ink) !important;
    color: #fff !important;
    border-color: var(--hatchers-ink) !important;
}

.theme-selection label,
.settings-box-header,
.box-shadow {
    border-radius: 18px !important;
}

.theme-selection label {
    overflow: hidden;
    border: 1px solid var(--hatchers-border);
    background: #fff;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.theme-selection label:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(17, 17, 17, 0.08);
    border-color: var(--hatchers-sand-deep);
}

.theme-selection input:checked + label {
    border-color: var(--hatchers-ink);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bs-secondary), transparent 68%);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #f6ede3 !important;
    color: var(--hatchers-ink) !important;
}

footer.bg-white,
footer.fixed-bottom {
    background: rgba(255, 253, 249, 0.96) !important;
    border-top: 1px solid var(--hatchers-border) !important;
    color: var(--hatchers-muted);
}

.auth-form,
.login-form,
.login-box,
.register-box,
.forgot-box,
.card-auth,
.auth-card {
    background: rgba(255, 253, 249, 0.96);
    border: 1px solid var(--hatchers-border);
    border-radius: 24px;
    box-shadow: var(--hatchers-shadow);
}

@media (max-width: 991.98px) {
    .page-topbar {
        backdrop-filter: none;
    }

    .sidebar-md {
        background: linear-gradient(180deg, #151311 0%, #1f1b17 100%);
    }
}