/* =========================================================
   LoveHappiness admin dark theme
   Approximate colors from the Adobe XD design.
   Retune the variables below for pixel-exact specs later.
   ========================================================= */
/* ---------- Brand fonts (local) ---------- */
@font-face {
    font-family: 'DM Sans';
    src: url('/brand/fonts/DMSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/brand/fonts/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('/brand/fonts/DMSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/brand/fonts/PlayfairDisplay-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/brand/fonts/PlayfairDisplay-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/brand/fonts/PlayfairDisplay-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Playfair Display';
    src: url('/brand/fonts/PlayfairDisplay-Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}

:root {
    --lh-bg: #0f0a1e;
    --lh-bg-2: #150b26;
    --lh-panel: #1e1035;
    --lh-panel-2: #2a1546;
    --lh-border: rgba(255, 255, 255, 0.08);
    --lh-text: #fff;
    --lh-muted: #b0adb6;
    --lh-pink: #FF9EE0;
    --lh-light: #FFD6EC;
    --lh-magenta: #9333ea;
    --lh-grad: linear-gradient(90deg, #ff1493 0%, #9333ea 100%);
    --lh-grad-v: linear-gradient(180deg, #1a1030 0%, #150b26 55%, #0f0a1e 100%);
    --lh-radius: 5px;
    --lh-pill: 40px;
    --lh-sidebar: #190a3b;
}

/* ---------- Fonts ---------- */
body,
.content-wrapper,
.main-sidebar,
.btn,
.form-control,
table,
.card {
    font-family: 'DM Sans', 'Source Sans Pro', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
.brand-text,
.login-box-msg,
.lh-serif {
    font-family: 'Playfair Display', serif;
}

/* =========================================================
   LOGIN PAGE
   ========================================================= */
body.login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 38%, #2a0a4e 0%, #1a0a3e 52%, #0f0a1e 100%);
    color: var(--lh-text);
}

.login-box {
    width: 92%;
    max-width: 430px;
    /* position: relative; */
}

.bg_box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../brand/img/bg_shadow.svg);
    width: 100%;
    height: 100%;
   background-size: 1100px 1100px;
    background-position: center;
    background-repeat: no-repeat;
}

.login-logo,
.login-logo a {
    color: var(--lh-text);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    text-decoration: none;
    display: block;
    margin-bottom: 0.5rem;
}

.login-page .card {
    background: rgba(0, 0, 0, 0) !important;
    border: 0px solid var(--lh-border) !important;
    /* border-radius: 26px; */
    /* backdrop-filter: blur(16px); */
    /* -webkit-backdrop-filter: blur(16px); */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0);
}

.login-card-body {
    padding: 1.25rem 2.25rem 2.5rem;
}

.login-box-msg {
    text-align: center;
    /* background: linear-gradient(90deg, #ffd0ea, #ff5fb0); */
    /* -webkit-background-clip: text; */
    /* background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

/* input with leading icon */
.login-page .lh-field {
    position: relative;
    margin-bottom: 1rem;
}

.login-page .lh-field>.lh-ico {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    color: var(--lh-text);
    pointer-events: none;
}

.login-page .lh-field>.lh-eye {
    position: absolute;
    top: 50%;
    right: 21px;
    transform: translateY(-50%);
    color: var(--lh-text);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.login-page .form-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--lh-pill);
    color: var(--lh-text);
    height: 50px;
    padding: 0 44px;
}

.login-page .form-control:-webkit-autofill,
.login-page .form-control:-webkit-autofill:hover,
.login-page .form-control:-webkit-autofill:focus,
.login-page .form-control:-webkit-autofill:active {
    -webkit-text-fill-color: var(--lh-text) !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--lh-text);
}

.login-page .form-control::placeholder {
    color: var(--lh-text);
}

.login-page .form-control:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: var(--lh-pink);
    box-shadow: 0 0 0 3px rgba(255, 46, 154, 0.22);
    color: #fff;
}

.login-page .btn-primary,
.login-page .btn-block {
    background: var(--lh-grad);
    border: none;
    border-radius: var(--lh-pill);
    height: 50px;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 26px rgba(199, 36, 185, 0.38);
    padding: .375rem 1.3rem;
}

.login-page .btn-primary:hover {
    filter: brightness(1.07);
}

.login-page a {
    color: var(--lh-text);
}

.login-page .icheck-primary label {
    color: var(--lh-muted);
}

/* brand mark above login card */
.lh-brand {
    text-align: center;
    margin-bottom: 0rem;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lh-brand .fa-heart {
    color: var(--lh-pink);
}

.lh-welcome {
    font-style: italic;
    color: #ff9ee0;
}

.login-page .btn-primary .fa-chevron-right {
    float: right;
    margin-top: 3px;
    opacity: .85;
}

.lh-forgot {
    display: block;
    text-align: center;
    margin-top: 2rem;
    font-size: .9rem;
}

.lh-login-foot {
    text-align: center;
    color: var(--lh-text);
    font-size: 0.8rem;
    padding: 1.20rem 0;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0px;
    width: 100%;
    /* background: var(--lh-bg) !important; */
}

/* =========================================================
   ADMIN SHELL  (sidebar / topbar / footer)
   ========================================================= */
body,
.content-wrapper {
    background: var(--lh-bg) !important;
    color: var(--lh-text);
}

.main-header.navbar {
    background: var(--lh-bg) !important;
    border-bottom: 0px solid var(--lh-border) !important;
}

.main-header .nav-link,
.main-header .fa,
.main-header .fas {
    color: var(--lh-text) !important;
}

.main-sidebar {
    background: var(--lh-sidebar) !important;
    border-right: 0px solid var(--lh-border);
}

/* transparent / hidden sidebar scrollbar (still scrollable) */
.main-sidebar,
.main-sidebar .sidebar {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.main-sidebar::-webkit-scrollbar,
.main-sidebar .sidebar::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

.main-sidebar::-webkit-scrollbar-thumb,
.main-sidebar .sidebar::-webkit-scrollbar-thumb {
    background: transparent;
}

/* dark-mode scrollbars across the admin (page + table horizontal scroll) */
body,
.content-wrapper,
.content-wrapper *,
.dataTables_scrollBody,
.table-responsive {
    scrollbar-width: thin;
    /* Firefox */
    scrollbar-color: #3a2456 var(--lh-bg-2);
}

body::-webkit-scrollbar,
.content-wrapper ::-webkit-scrollbar,
.dataTables_scrollBody::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body::-webkit-scrollbar-track,
.content-wrapper ::-webkit-scrollbar-track,
.dataTables_scrollBody::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: var(--lh-bg-2);
    border-radius: 8px;
}

body::-webkit-scrollbar-thumb,
.content-wrapper ::-webkit-scrollbar-thumb,
.dataTables_scrollBody::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #3a2456;
    border-radius: 8px;
}

body::-webkit-scrollbar-thumb:hover,
.content-wrapper ::-webkit-scrollbar-thumb:hover,
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--lh-magenta);
}

.brand-link {
    border-bottom: 0px solid var(--lh-border) !important;
    background: transparent !important;
}

/* full logo when expanded, favicon mark when collapsed */
.brand-link .lh-logo-mini {
    display: none;
}

body.sidebar-collapse .brand-link .lh-logo-full {
    display: none;
}

body.sidebar-collapse .brand-link .lh-logo-mini {
    display: inline-block;
}

/* when a collapsed sidebar is hovered (it expands), restore the full logo */
body.sidebar-collapse .main-sidebar:hover .brand-link .lh-logo-full {
    display: inline-block;
}

body.sidebar-collapse .main-sidebar:hover .brand-link .lh-logo-mini {
    display: none;
}

.brand-text {
    background: linear-gradient(90deg, #ffd0ea, #ff5fb0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.nav-sidebar .nav-link {
    display: flex;
    align-items: center;
    color: #c7c4d6 !important;
    border-radius: 10px;
    margin: 3px 0px;
    padding: 11px 14px;
    font-weight: 500;
}

/* outline SVG icons follow the link's text color */
.nav-sidebar .nav-link>.nav-icon {
    width: 20px;
    height: 20px;
    margin-right: 14px;
    flex-shrink: 0;
    color: inherit;
    stroke: currentColor;
}

.nav-sidebar .nav-link>p {
    margin: 0;
    flex: 1;
}

.nav-sidebar .nav-link:hover {
    color: #fff !important;
    background: rgba(255, 20, 147, 0.12);
}

/* active item: pink text + pink icon, subtle highlight (no gradient pill) */
.nav-sidebar .nav-link.active {
    color: var(--lh-pink) !important;
    background-color: rgb(255 255 255 / 10%) !important;
    box-shadow: none;
    font-weight: 500;
    font-size: 0.9rem;
}


.main-footer {
    background: var(--lh-bg-2) !important;
    color: var(--lh-muted) !important;
    border-top: 1px solid var(--lh-border) !important;
    text-align: center;
}

/* =========================================================
   CARDS / TABLES / FORMS / BUTTONS
   ========================================================= */
.card {
    background: var(--lh-sidebar) !important;
    border: 1px solid var(--lh-border) !important;
    border-radius: var(--lh-radius);
    color: var(--lh-text);
}

.card-header {
    border-bottom: 1px solid var(--lh-border) !important;
    color: #fff;
}

.card-header.bg-primary,
.card-header.bg-danger,
.card-header.bg-success,
.card-header.bg-info {
    background: #30234f !important;
    border: none !important;
    border-radius: 0.25rem 0.25rem 0 0;
}

.page-link {
    color: #ffffff !important;
    background-color: #190a3b !important;
    border: 1px solid #3a2456 !important;
}

.page-link:hover {
    color: #ffffff !important;
    background-color: #3a2456 !important;
    border-color: #f195d6 !important;
}

.action-btn {
    display: flex;
    justify-content: end;
    gap: 18px;
}

.content-wrapper h1,
.content-wrapper h2,
.content-wrapper h3,
.content-wrapper h5,
.content-wrapper .text-primary {
    color: #fff !important;
}

.text-muted {
    color: var(--lh-muted) !important;
}

.content-wrapper .table {
    color: var(--lh-text);
    background: transparent;
}

.content-wrapper .table thead th,
.content-wrapper .thead-light th {
    background: var(--lh-panel-2) !important;
    color: #fff !important;
    border-color: var(--lh-border) !important;
}

.content-wrapper .table td,
.content-wrapper .table th {
    border-color: var(--lh-border) !important;
}

.content-wrapper .table-hover tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

.content-wrapper .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(255, 255, 255, 0.02);
}

tr.grid-filters th {
    background: var(--lh-panel-2) !important;
}

.content-wrapper .form-control,
tr.grid-filters input,
tr.grid-filters select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: rgba(255, 255, 255, 0) !important;
    border: 1px solid var(--lh-border) !important;
    color: var(--lh-text) !important;
}

.content-wrapper .form-control::placeholder {
    color: var(--lh-muted);
}

/* dark dropdown option list (Show N entries, filters, etc.) */
.content-wrapper select option,
tr.grid-filters select option,
.dataTables_wrapper .dataTables_length select option {
    background: var(--lh-bg) !important;
    color: var(--lh-text) !important;
}

/* white calendar icon on date inputs */
.content-wrapper input[type="date"]::-webkit-calendar-picker-indicator,
tr.grid-filters input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1) brightness(1.6);
    cursor: pointer;
    opacity: 0.9;
}

/* dark datetimepicker widget with white nav arrows */
.bootstrap-datetimepicker-widget.dropdown-menu {
    background: var(--lh-panel) !important;
    border: 1px solid var(--lh-border) !important;
    color: var(--lh-text) !important;
}

.bootstrap-datetimepicker-widget,
.bootstrap-datetimepicker-widget table td,
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget .timepicker-picker span {
    color: var(--lh-text) !important;
}

/* nav arrows (prev/next/up/down) + Today/clock glyphs in white */
.bootstrap-datetimepicker-widget .fa,
.bootstrap-datetimepicker-widget .glyphicon,
.bootstrap-datetimepicker-widget [data-action] i {
    color: #fff !important;
}

.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td span:hover,
.bootstrap-datetimepicker-widget table th:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td.today:before {
    background: var(--lh-grad) !important;
    color: #fff !important;
}

.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.new {
    color: var(--lh-muted) !important;
}

/* white custom dropdown arrow on selects */
.content-wrapper select,
tr.grid-filters select,
.dataTables_wrapper .dataTables_length select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
    padding-right: 30px !important;
}

.dataTables_wrapper,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper label {
    color: var(--lh-muted) !important;
}

.dataTables_wrapper .paginate_button {
    color: #ff8ec6 !important;
}

.dataTables_wrapper .paginate_button.current {
    background: var(--lh-grad) !important;
    color: #fff !important;
    border-radius: 6px;
}

.btn-primary {
    background: var(--lh-grad) !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(199, 36, 185, 0.30);
}

.btn-info {
    background: #6a3aa0 !important;
    border: none !important;
}

.btn-success {
    background: #1f9d6b !important;
    border: none !important;
}

.btn-warning {
    background: #e08a2b !important;
    border: none !important;
    color: #fff !important;
}

.btn-danger {
    background: #d9356b !important;
    border: none !important;
}

.btn-secondary {
    background: var(--lh-panel-2) !important;
    border: 1px solid var(--lh-border) !important;
    color: var(--lh-text) !important;
}

/* Modals (Sign Out etc.) */
.modal-content {
    background: var(--lh-panel);
    border: 1px solid var(--lh-border);
    border-radius: 18px;
    color: var(--lh-text);
}

.modal-header,
.modal-footer {
    border-color: var(--lh-border);
}

.alert-success {
    background: rgba(31, 157, 107, 0.15);
    color: #7ee7b8;
    border: 1px solid rgba(31, 157, 107, 0.3);
}

.alert-danger {
    background: rgba(217, 53, 107, 0.15);
    color: #ff9bc0;
    border: 1px solid rgba(217, 53, 107, 0.3);
}

.badge-info {
    background: #6a3aa0 !important;
}

.badge-secondary {
    background: #3a2a47 !important;
}

/* =========================================================
   DASHBOARD TILES
   ========================================================= */
.lh-tile {
    border-radius: 18px;
    padding: 1.6rem 1.5rem;
    color: #fff;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border: none;
}

.lh-tile .lh-num {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    margin: 0 0 0.4rem;
}

.lh-tile .lh-label {
    font-size: 1rem;
    opacity: 0.95;
    margin: 0;
}

.lh-tile .lh-ico-bg {
    float: right;
    font-size: 1.4rem;
    opacity: 0.5;
}

.lh-tile--pink {
    background: #ff1d9c;
}

.lh-tile--purple {
    background: #7c34e0;
}

.lh-tile--cyan {
    background: #2ec4f1;
}

.lh-tile--gold {
    background: #c8860a;
}

.lh-tile--teal {
    background: #16776b;
}

.lh-tile--green {
    background: #2bb673;
}

.lh-tile--dark {
    background: #241250;
}

/* secondary dark metric panels */
.lh-metric {
    background: #ff1d9c;
    border: none;
    border-radius: 16px;
    padding: 1.5rem 1.4rem;
    height: 100%;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.lh-metric .lh-num {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 2.4rem;
    line-height: 1;
    color: #fff !important;
    margin: 0 0 0.4rem;
}

.lh-metric .lh-label {
    color: #fff !important;
    opacity: 0.95;
    font-size: 0.95rem;
    margin: 0;
}

/* cycle the metric cards through the design palette */
.row > [class*="col-"]:nth-child(6n+1) .lh-metric {
    background: #ff1d9c;
}

.row > [class*="col-"]:nth-child(6n+2) .lh-metric {
    background: #7c34e0;
}

.row > [class*="col-"]:nth-child(6n+3) .lh-metric {
    background: #2ec4f1;
}

.row > [class*="col-"]:nth-child(6n+4) .lh-metric {
    background: #c8860a;
}

.row > [class*="col-"]:nth-child(6n+5) .lh-metric {
    background: #16776b;
}

.row > [class*="col-"]:nth-child(6n+6) .lh-metric {
    background: #2bb673;
}

.lh-section-title {
    color: var(--lh-muted) !important;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
}

/* =========================================================
   SIGN-OUT MODAL extras
   ========================================================= */
/* blurred dark overlay behind modals */
.modal-backdrop,
.modal-backdrop.show {
    background-color: rgba(10, 6, 22, 0.55);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    opacity: 1;
}

table.dataTable tbody tr {
    background-color: var(--lh-sidebar) !important;
}

table.dataTable.no-footer {
    border: 1px solid var(--lh-panel-2) !important;
}

#signOutModal .modal-content {
    text-align: center;
    padding: 1.5rem 1.5rem 1.75rem;
    background: linear-gradient(160deg, #190a3b 0%, #140a2d 45%, #110a25 100%);
    border: 0px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--lh-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    min-height: 380px;
    align-items: center;
    justify-content: center;
}

#signOutModal .lh-modal-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.9rem;
    margin: 0.5rem 0 1rem;
    color: var(--lh-light);
}

#signOutModal .lh-modal-title em {
    font-style: italic;
    color: var(--lh-pink);
    /* background: linear-gradient(90deg, #ffd0ea, #ff5fb0); */
    /* -webkit-background-clip: text; */
    /* background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
}

#signOutModal .lh-modal-sub {
    color: var(--lh-text);
    margin-bottom: 1.5rem;
}

#signOutModal .btn {
    border-radius: 40px;
    height: 55px;
    font-weight: 600;
    display: block;
    width: 100%;
}

.btn:focus {
    box-shadow: 0 0 0 .2rem rgb(255 214 236 / 63%) !important;
}

#signOutModal .btn-signout {
    background: var(--lh-grad);
    border: none;
    color: #fff;
    margin-bottom: 1.75rem;
}

#signOutModal .btn-cancel {
    background: transparent;
    border: 1px solid var(--lh-border);
    color: var(--lh-light);
}

#signOutModal .lh-modal-close {
    position: absolute;
    top: 14px;
    right: 18px;
    background: none;
    border: none;
    color: var(--lh-muted);
    font-size: 1.2rem;
    cursor: pointer;
}

/* =========================================================
   THEME TOGGLE (navbar light/dark dropdown)
   ========================================================= */
.lh-theme-link {
    color: var(--lh-text) !important;
    font-size: 1.1rem;
}

.lh-theme-dropdown {
    background: var(--lh-panel) !important;
    border: 1px solid var(--lh-border) !important;
    min-width: 160px;
}

.lh-theme-dropdown .dropdown-item {
    color: var(--lh-text) !important;
    padding: 0.5rem 1rem;
}

.lh-theme-dropdown .dropdown-item:hover,
.lh-theme-dropdown .dropdown-item:focus {
    background: rgba(255, 20, 147, 0.14) !important;
    color: #fff !important;
}

/* =========================================================
   LIGHT MODE  (body.theme-light overrides the palette)
   ========================================================= */
body.theme-light {
    --lh-bg: #f4f3f9;
    --lh-bg-2: #ffffff;
    --lh-panel: #ffffff;
    --lh-panel-2: #f0ecfa;
    --lh-border: rgba(0, 0, 0, 0.10);
    --lh-text: #1d1430;
    --lh-muted: #6b6478;
    --lh-sidebar: #ffffff;
    /* NOTE: --lh-grad-v is intentionally NOT overridden so the left
       sidebar keeps its original dark gradient in light mode. */
}

/* The left sidebar always stays dark, even in light mode */
body.theme-light .main-sidebar {
    background: var(--lh-grad-v) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-light .nav-sidebar .nav-link {
    color: #c7c4d6 !important;
}

body.theme-light .nav-sidebar .nav-link:hover {
    color: #fff !important;
}

body.theme-light .nav-sidebar .nav-link.active {
    color: var(--lh-pink) !important;
}

/* fix hardcoded colors that don't read the variables */
body.theme-light .main-header.navbar {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.theme-light .main-header .nav-link,
body.theme-light .main-header .fa,
body.theme-light .main-header .fas {
    color: #1d1430 !important;
}

body.theme-light .content-wrapper h1,
body.theme-light .content-wrapper h2,
body.theme-light .content-wrapper h3,
body.theme-light .content-wrapper h5,
body.theme-light .content-wrapper .text-primary,
body.theme-light .card-header {
    color: #0f0a1e !important;
}

body.theme-light .content-wrapper .table thead th,
body.theme-light .content-wrapper .thead-light th {
    color: #1d1430 !important;
}

body.theme-light .dataTables_wrapper,
body.theme-light .dataTables_wrapper .dataTables_info,
body.theme-light .dataTables_wrapper label {
    color: #4a4458 !important;
}

/* white-arrow/calendar icons need to flip back to dark in light mode */
body.theme-light .content-wrapper select,
body.theme-light tr.grid-filters select,
body.theme-light .dataTables_wrapper .dataTables_length select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a4458' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px !important;
}

body.theme-light .content-wrapper input[type="date"]::-webkit-calendar-picker-indicator,
body.theme-light tr.grid-filters input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
}

/* light mode: blue header bar + blue action buttons (Bootstrap default look) */
body.theme-light .card-header.bg-primary {
    background: #007bff !important;
    color: #fff !important;
    border: none !important;
   border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

/* headings inside the blue header stay white (override the dark heading rule) */
body.theme-light .card-header.bg-primary h1,
body.theme-light .card-header.bg-primary h2,
body.theme-light .card-header.bg-primary h3,
body.theme-light .card-header.bg-primary h4,
body.theme-light .card-header.bg-primary h5 {
    color: #fff !important;
}

/* sign-out modal is always dark — pin its text/border to light values in light mode */
body.theme-light #signOutModal .lh-modal-sub {
    color: #b0adb6 !important;
}

body.theme-light #signOutModal .lh-modal-close {
    color: #b0adb6 !important;
}

body.theme-light #signOutModal .btn-cancel {
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: var(--lh-light) !important;
}

/* light mode: keep coloured stat cards coloured (bg-info teal, bg-success green) */
body.theme-light .content-wrapper .card.bg-info {
    background: #17a2b8 !important;
    border-color: #17a2b8 !important;
}

body.theme-light .content-wrapper .card.bg-success {
    background: #28a745 !important;
    border-color: #28a745 !important;
}

body.theme-light .content-wrapper .card.bg-info,
body.theme-light .content-wrapper .card.bg-info *,
body.theme-light .content-wrapper .card.bg-success,
body.theme-light .content-wrapper .card.bg-success * {
    color: #fff !important;
}

/* light mode: red danger header with white text (Bootstrap default look) */
body.theme-light .card-header.bg-danger {
    background: #dc3545 !important;
    color: #fff !important;
    border: none !important;
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

body.theme-light .card-header.bg-danger h1,
body.theme-light .card-header.bg-danger h2,
body.theme-light .card-header.bg-danger h3,
body.theme-light .card-header.bg-danger h4,
body.theme-light .card-header.bg-danger h5 {
    color: #fff !important;
}

body.theme-light .content-wrapper .btn-primary {
    background: #007bff !important;
    border-color: #007bff !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.theme-light .content-wrapper .btn-info {
    background: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #fff !important;
    box-shadow: none !important;
}

body.theme-light .content-wrapper .btn-primary:hover {
    background: #0069d9 !important;
    border-color: #0062cc !important;
}

body.theme-light .content-wrapper .btn-info:hover {
    background: #138496 !important;
    border-color: #117a8b !important;
}

/* light mode pagination: white buttons, blue text (Bootstrap default look) */
body.theme-light .page-link {
    color: #007bff !important;
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

body.theme-light .page-link:hover {
    color: #0056b3 !important;
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
}

body.theme-light .page-item.active .page-link {
    color: #ffffff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}

body.theme-light .page-item.disabled .page-link {
    color: #6c757d !important;
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

/* light mode scrollbars: light grey instead of dark purple */
body.theme-light ::-webkit-scrollbar-track,
body.theme-light .dataTables_scrollBody::-webkit-scrollbar-track,
body.theme-light .table-responsive::-webkit-scrollbar-track {
    background-color: #e9ecef !important;
}

body.theme-light ::-webkit-scrollbar-thumb,
body.theme-light .dataTables_scrollBody::-webkit-scrollbar-thumb,
body.theme-light .table-responsive::-webkit-scrollbar-thumb {
    background-color: #adb5bd !important;
}

body.theme-light ::-webkit-scrollbar-thumb:hover,
body.theme-light .dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
body.theme-light .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #a99fc0 !important;
}

/* light mode: theme dropdown grey hover instead of pink */
body.theme-light .lh-theme-dropdown {
    background: #ffffff !important;
    border-color: #dee2e6 !important;
}

body.theme-light .lh-theme-dropdown .dropdown-item {
    color: #1d1430 !important;
}

body.theme-light .lh-theme-dropdown .dropdown-item:hover,
body.theme-light .lh-theme-dropdown .dropdown-item:focus {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: #1d1430 !important;
}

/* light mode: neutral grey table header + filter row (instead of lavender) */
body.theme-light .content-wrapper .table thead th,
body.theme-light .content-wrapper .thead-light th,
body.theme-light tr.grid-filters th {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
}

/* light mode: white inputs / selects with dark text */
body.theme-light .content-wrapper .form-control,
body.theme-light tr.grid-filters input,
body.theme-light tr.grid-filters select,
body.theme-light .dataTables_wrapper .dataTables_filter input,
body.theme-light .dataTables_wrapper .dataTables_length select {
    background-color: rgb(255, 255, 255) !important;
    border-color: #dee2e6 !important;
    color: #1d1430 !important;
}

body.theme-light .content-wrapper .form-control::placeholder {
    color: #8a8595 !important;
}

/* light mode: grey row hover with dark text */
body.theme-light .content-wrapper .table-hover tbody tr:hover {
    background: rgb(233 236 239) !important;
    color: #1d1430 !important;
}

@media (max-width: 767px) {
    .login-box-msg {
        font-size: 2.5rem !important;
    }
}