/*
 * D-Zone Dashboard Custom Theme Override
 * ----------------------------------------
 * Overrides default Vuexy purple (#7367f0) primary color
 * to match D-Zone brand: dark green primary + beige background.
 *
 * Colors extracted from D-Zone logo:
 *   Primary (dark green): #1B4332
 *   Primary lighter shades for hover/light variants
 *   Background (beige/cream): #F0E6D3
 */

/* ===========================
   CSS Variable Overrides
   =========================== */
:root {
    --bs-primary: #1b4332 !important;
    --bs-primary-rgb: 27, 67, 50 !important;
}

/* ===========================
   Body & Content Background
   =========================== */
html body {
    background-color: #f0e6d3 !important;
}

html body .app-content.content {
    background-color: transparent !important;
}

html body .content-wrapper {
    background-color: transparent !important;
}

/* Auth / Login page background */
html body.blank-page {
    background-color: #f0e6d3 !important;
}

html body.blank-page .app-content.content {
    background-color: transparent !important;
}

html body.blank-page .content-wrapper {
    background-color: transparent !important;
}

/* Navbar area background */
.header-navbar-shadow {
    background: linear-gradient(
        180deg,
        rgba(240, 230, 211, 0.95) 44%,
        rgba(240, 230, 211, 0.46) 73%,
        rgba(240, 230, 211, 0)
    ) !important;
}

.header-navbar.navbar-shadow {
    box-shadow: 0 4px 24px 0 rgba(27, 67, 50, 0.06) !important;
}

/* ===========================
   Wavy Decorative Background
   (Matches the provider-web login style)
   =========================== */
html body::before {
    content: "";
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath d='M1440,900 C1300,750 1100,700 1050,500 C1000,300 1150,200 1200,100 C1250,0 1350,0 1440,0 Z' fill='%23E8D9BF' fill-opacity='0.35'/%3E%3Cpath d='M1440,900 L1100,900 C1150,750 1250,650 1280,500 C1310,350 1350,250 1440,150 Z' fill='%23E8D9BF' fill-opacity='0.35'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Auth page: also add wavy on the left side */
html body.blank-page::after {
    content: "";
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='none'%3E%3Cpath d='M0,900 C100,750 150,600 100,450 C50,300 0,200 0,0 L0,0 Z' fill='%23E8D9BF' fill-opacity='0.3'/%3E%3Cpath d='M0,900 L300,900 C250,800 200,700 180,550 C160,400 100,300 0,200 Z' fill='%23E8D9BF' fill-opacity='0.3'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}

/* Modals & Backdrops explicitly layered */
.modal-backdrop {
    z-index: 1050 !important;
}

.modal {
    z-index: 1055 !important;
}

/* ===========================
   Primary Color Overrides
   =========================== */

/* --- Backgrounds --- */
.bg-primary,
.badge-primary,
.btn-primary,
.btn-primary:not(:disabled):not(.disabled),
.progress-bar,
.nav-pills .nav-link.active,
.pagination .page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #1b4332 !important;
    border-color: #1b4332 !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: #143728 !important;
    border-color: #143728 !important;
    box-shadow: 0 4px 18px -4px rgba(27, 67, 50, 0.65) !important;
}

/* --- Gradient backgrounds --- */
.bg-gradient-primary,
.btn-gradient-primary {
    background-image: linear-gradient(
        118deg,
        #1b4332,
        rgba(27, 67, 50, 0.7)
    ) !important;
}

/* --- Light primary backgrounds --- */
.bg-light-primary {
    background-color: rgba(27, 67, 50, 0.12) !important;
    color: #1b4332 !important;
}

.badge.badge-light-primary {
    background-color: rgba(27, 67, 50, 0.12) !important;
    color: #1b4332 !important;
}

/* --- Text Colors --- */
.text-primary,
a.text-primary {
    color: #1b4332 !important;
}

a {
    color: #1b4332;
}

a:hover {
    color: #143728;
}

/* --- Border Colors --- */
.border-primary {
    border-color: #1b4332 !important;
}

.form-control:focus {
    border-color: #1b4332 !important;
    box-shadow: 0 3px 10px 0 rgba(27, 67, 50, 0.1) !important;
}

.custom-select:focus,
.form-select:focus {
    border-color: #1b4332 !important;
    box-shadow: 0 3px 10px 0 rgba(27, 67, 50, 0.1) !important;
}

/* ===========================
   Sidebar / Main Menu
   =========================== */
html:not(.dark-layout) .main-menu,
html:not(.dark-layout) .main-menu.menu-light,
html:not(.dark-layout) .main-menu .main-menu-content,
html:not(.dark-layout) .main-menu .navigation,
html:not(.dark-layout) .main-menu .navigation-main,
html:not(.dark-layout) .main-menu .navbar-header,
html:not(.dark-layout) .main-menu.menu-light .navigation,
html:not(.dark-layout) .main-menu.menu-light .navigation-main {
    background-color: #EFE5D5 !important;
    background: #EFE5D5 !important;
}

html:not(.dark-layout) .main-menu {
    border-right: 1px solid rgba(215, 198, 175, 0.6) !important;
}

html:not(.dark-layout) .main-menu .shadow-bottom {
    background: linear-gradient(180deg, #EFE5D5 44%, rgba(239, 229, 213, 0.51) 73%, rgba(239, 229, 213, 0)) !important;
}

html:not(.dark-layout) .main-menu .navigation .menu-content {
    background-color: #E5D9C7 !important;
    background: #E5D9C7 !important;
}

.main-menu.menu-dark {
    background-color: #1a2226 !important;
}

.main-menu .navigation > li.active > a {
    background: linear-gradient(
        118deg,
        #1b4332,
        rgba(27, 67, 50, 0.85)
    ) !important;
    box-shadow: 0 0 10px 1px rgba(27, 67, 50, 0.5) !important;
    color: #fff !important;
    border-radius: 6px;
}

.main-menu .navigation > li.active > a svg,
.main-menu .navigation > li.active > a i {
    color: #fff !important;
}

.main-menu .navigation > li ul .active > a {
    color: #1b4332 !important;
}

.main-menu .navigation li a {
    color: #3b3a36 !important;
}

.main-menu .navigation li a:hover {
    color: #1b4332 !important;
    background-color: rgba(27, 67, 50, 0.06) !important;
}

/* Sidebar brand text */
.main-menu .navbar-header .brand-text {
    color: #1b4332 !important;
    font-weight: 700;
}

/* For dark menu, brand text should be white */
.main-menu.menu-dark .navbar-header .brand-text {
    color: #ffffff !important;
}

/* Collapse toggle icon */
.main-menu .navigation > li > a .collapse-toggle-icon,
.main-menu .nav-link.modern-nav-toggle i,
.main-menu .nav-link.modern-nav-toggle svg {
    color: #1b4332 !important;
}

.main-menu.menu-dark .nav-link.modern-nav-toggle i,
.main-menu.menu-dark .nav-link.modern-nav-toggle svg {
    color: #1b4332 !important;
}

/* ===========================
   Navbar
   =========================== */
.header-navbar {
    background-color: #EFE5D5 !important;
    border: 1px solid rgba(215, 198, 175, 0.7) !important;
    border-radius: 12px;
}

.header-navbar .navbar-container ul.nav li a.nav-link i:hover,
.header-navbar .navbar-container ul.nav li a.nav-link svg:hover {
    color: #1b4332 !important;
}

/* ===========================
   Cards (Beige, darker than background)
   =========================== */
.card {
    background-color: #EFE5D5 !important;
    border: 1px solid rgba(215, 198, 175, 0.65) !important;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(27, 67, 50, 0.04);
}

.card .card-header {
    background-color: transparent !important;
}

.card .card-footer {
    background-color: rgba(27, 67, 50, 0.03) !important;
    border-top: 1px solid rgba(215, 198, 175, 0.5) !important;
}

/* Sub-cards / Stat boxes inside cards */
.bg-light,
.table-responsive .table {
    background-color: transparent !important;
}

.form-control,
.form-select,
.input-group-text {
    background-color: #FAF5EC !important;
    border-color: #D7C6AF !important;
    color: #2D3748 !important;
}

/* ===========================
   Tables (Light Mode)
   =========================== */
html:not(.dark-layout) .table,
html:not(.dark-layout) .table-responsive .table {
    background-color: transparent !important;
    --bs-table-bg: transparent !important;
    --bs-table-accent-bg: transparent !important;
    --bs-table-hover-bg: rgba(27, 67, 50, 0.04) !important;
}

html:not(.dark-layout) .table:not(.table-dark):not(.table-light) thead th,
html:not(.dark-layout) .table:not(.table-dark):not(.table-light) thead:not(.table-dark) th,
html:not(.dark-layout) .table thead th,
html:not(.dark-layout) .table tfoot th {
    background-color: #E2D4BC !important;
    color: #1b4332 !important;
    border-bottom: 1px solid rgba(215, 198, 175, 0.8) !important;
    font-weight: 600;
}

html:not(.dark-layout) .table td,
html:not(.dark-layout) .table th {
    border-color: rgba(215, 198, 175, 0.45) !important;
    color: #3b3a36;
}

html:not(.dark-layout) .table-hover tbody tr:hover td,
html:not(.dark-layout) .table-hover tbody tr:hover th {
    background-color: rgba(27, 67, 50, 0.04) !important;
}

html:not(.dark-layout) .table-striped tbody tr:nth-of-type(odd) td {
    background-color: rgba(240, 230, 211, 0.3) !important;
}

/* ===========================
   Buttons (Light Mode)
   =========================== */
.btn-outline-primary {
    color: #1b4332 !important;
    border-color: #1b4332 !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: #1b4332 !important;
    color: #fff !important;
}

.btn-flat-primary {
    color: #1b4332 !important;
}

.btn-flat-primary:hover {
    background-color: rgba(27, 67, 50, 0.12) !important;
}

html:not(.dark-layout) .btn-outline-secondary {
    background-color: #FAF5EC !important;
    border-color: #D7C6AF !important;
    color: #3b3a36 !important;
}

html:not(.dark-layout) .btn-outline-secondary:hover,
html:not(.dark-layout) .btn-outline-secondary:active,
html:not(.dark-layout) .btn-outline-secondary.active {
    background-color: #1b4332 !important;
    border-color: #1b4332 !important;
    color: #fff !important;
}

html:not(.dark-layout) .btn-secondary {
    background-color: #D7C6AF !important;
    border-color: #D7C6AF !important;
    color: #3b3a36 !important;
}

html:not(.dark-layout) .btn-secondary:hover {
    background-color: #C8B59B !important;
    border-color: #C8B59B !important;
    color: #1b4332 !important;
}

/* ===========================
   Modals & Dropdowns (Light Mode)
   =========================== */
html:not(.dark-layout) .modal-content {
    background-color: #EFE5D5 !important;
    border: 1px solid rgba(215, 198, 175, 0.8) !important;
    box-shadow: 0 10px 30px rgba(27, 67, 50, 0.12) !important;
    border-radius: 14px !important;
    overflow: hidden;
}

html:not(.dark-layout) .modal-header {
    background-color: #E2D4BC !important;
    border-bottom: 1px solid rgba(215, 198, 175, 0.7) !important;
}

html:not(.dark-layout) .modal-title,
html:not(.dark-layout) .modal-header h5,
html:not(.dark-layout) .modal-header h4 {
    color: #1b4332 !important;
    font-weight: 700 !important;
}

html:not(.dark-layout) .modal-body {
    background-color: #EFE5D5 !important;
}

html:not(.dark-layout) .modal-footer {
    background-color: #E9DEC9 !important;
    border-top: 1px solid rgba(215, 198, 175, 0.7) !important;
}

html:not(.dark-layout) .modal .modal-header .btn-close,
html:not(.dark-layout) .modal-header .btn-close {
    background-color: #FAF5EC !important;
    box-shadow: 0 2px 8px rgba(27, 67, 50, 0.1) !important;
    border: 1px solid #D7C6AF !important;
    color: #1b4332 !important;
    opacity: 0.9;
}

html:not(.dark-layout) .modal .modal-header .btn-close:hover,
html:not(.dark-layout) .modal-header .btn-close:hover {
    background-color: #1b4332 !important;
    color: #fff !important;
    opacity: 1;
}

html:not(.dark-layout) .dropdown-menu {
    background-color: #FAF5EC !important;
    border: 1px solid #D7C6AF !important;
    box-shadow: 0 5px 25px rgba(27, 67, 50, 0.08) !important;
}

html:not(.dark-layout) .dropdown-item {
    color: #3b3a36 !important;
}

html:not(.dark-layout) .dropdown-item:hover,
html:not(.dark-layout) .dropdown-item:focus {
    background-color: rgba(27, 67, 50, 0.08) !important;
    color: #1b4332 !important;
}

/* ===========================
   Pagination & Lists (Light Mode)
   =========================== */
html:not(.dark-layout) .pagination .page-item .page-link {
    background-color: #FAF5EC !important;
    border-color: #D7C6AF !important;
    color: #3b3a36 !important;
}

html:not(.dark-layout) .pagination .page-item.active .page-link {
    background-color: #1b4332 !important;
    border-color: #1b4332 !important;
    color: #fff !important;
}

html:not(.dark-layout) .pagination .page-item .page-link:hover {
    background-color: #E2D4BC !important;
    color: #1b4332 !important;
}

html:not(.dark-layout) .list-group-item {
    background-color: #EFE5D5 !important;
    border-color: rgba(215, 198, 175, 0.6) !important;
    color: #3b3a36 !important;
}

/* ===========================
   Checkbox / Radio / Switch
   =========================== */
.form-check-input:checked {
    background-color: #1b4332 !important;
    border-color: #1b4332 !important;
}

.form-switch .form-check-input:checked {
    background-color: #1b4332 !important;
}

/* ===========================
   Waves Effect (Ripple)
   =========================== */
.waves-effect .waves-ripple {
    background: radial-gradient(
        rgba(27, 67, 50, 0.2) 0,
        rgba(27, 67, 50, 0.3) 40%,
        rgba(27, 67, 50, 0.4) 50%,
        rgba(27, 67, 50, 0.5) 60%,
        rgba(255, 255, 255, 0) 70%
    ) !important;
}

/* ===========================
   Alert Primary
   =========================== */
.alert-primary {
    background-color: rgba(27, 67, 50, 0.12) !important;
    color: #1b4332 !important;
}

.alert-primary .alert-heading {
    color: #1b4332 !important;
}

/* ===========================
   List Group
   =========================== */
.list-group-item.active {
    background-color: #1b4332 !important;
    border-color: #1b4332 !important;
}

/* ===========================
   Toast Primary
   =========================== */
.toast.bg-primary {
    background-color: #1b4332 !important;
}

/* ===========================
   SweetAlert Primary
   =========================== */
.swal2-styled.swal2-confirm {
    background-color: #1b4332 !important;
}

/* ===========================
   Spinner Primary
   =========================== */
.spinner-border.text-primary {
    color: #1b4332 !important;
}

/* ===========================
   Toastr success (login)
   =========================== */
.toast-success {
    background-color: #1b4332 !important;
}

/* ===========================
   Auth Page Specific Styles
   =========================== */
html:not(.dark-layout) .auth-wrapper .auth-inner .card {
    z-index: 1;
    position: relative;
    border-radius: 16px;
    background-color: #EFE5D5 !important;
    border: 1px solid rgba(215, 198, 175, 0.7) !important;
    box-shadow: 0 4px 30px rgba(27, 67, 50, 0.08);
}

.auth-wrapper .brand-logo .brand-text {
    color: #1b4332 !important;
}

/* ===========================
   Colors CSS Overrides
   (Vuexy colors.css primary classes)
   =========================== */
.text-primary {
    color: #1b4332 !important;
}
.bg-primary {
    background-color: #1b4332 !important;
}
.border-primary {
    border-color: #1b4332 !important;
}
.bg-light-primary {
    background-color: rgba(27, 67, 50, 0.12) !important;
    color: #1b4332 !important;
}
.badge-light-primary {
    background-color: rgba(27, 67, 50, 0.12) !important;
    color: #1b4332 !important;
}
.avatar-status.status-primary {
    background-color: #1b4332 !important;
}

/* Nav tabs primary */
.nav-tabs .nav-link.active {
    color: #1b4332 !important;
    border-bottom-color: #1b4332 !important;
}

/* Select2 / form elements */
.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: #1b4332 !important;
}

/* Chart / Dashboard */
.apexcharts-toolbar {
    z-index: 1 !important;
}

/* ===========================
   Divider with text
   =========================== */
.divider.divider-primary .divider-text {
    color: #1b4332 !important;
}

.divider.divider-primary .divider-text::before,
.divider.divider-primary .divider-text::after {
    border-color: #1b4332 !important;
}

/* ===========================
   Timeline primary
   =========================== */
.timeline .timeline-point-primary {
    border-color: #1b4332 !important;
}

.timeline .timeline-point-primary i,
.timeline .timeline-point-primary svg {
    color: #1b4332 !important;
}

/* ===========================
   Media Queries
   =========================== */
@media (max-width: 767.98px) {
    html body::before {
        opacity: 0.4;
    }
}

/* ===========================
   DARK MODE OVERRIDES
   Vuexy adds .dark-layout to <html>
   =========================== */

/* Dark background - override beige */
.dark-layout body,
html.dark-layout body {
    background-color: #161d31 !important;
}

/* Hide the wavy SVG decoration in dark mode */
.dark-layout body::before,
html.dark-layout body::before,
.dark-layout::before,
html.dark-layout::before {
    display: none !important;
}

.dark-layout body.blank-page::after,
html.dark-layout body.blank-page::after {
    display: none !important;
}

/* Dark content area */
.dark-layout .app-content.content,
html.dark-layout .app-content.content {
    background-color: transparent !important;
}

/* Dark navbar shadow */
.dark-layout .header-navbar-shadow,
html.dark-layout .header-navbar-shadow {
    background: linear-gradient(
        180deg,
        rgba(22, 29, 49, 0.95) 44%,
        rgba(22, 29, 49, 0.46) 73%,
        rgba(22, 29, 49, 0)
    ) !important;
}

/* Dark navbar */
.dark-layout .header-navbar,
html.dark-layout .header-navbar {
    background-color: #283046 !important;
    border-color: #3b4253 !important;
}

/* Dark cards */
.dark-layout .card,
html.dark-layout .card {
    background-color: #283046 !important;
    border-color: #3b4253 !important;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15);
}

/* Dark tables */
.dark-layout .table,
html.dark-layout .table,
.dark-layout .table:not(.table-dark):not(.table-light) thead th,
html.dark-layout .table:not(.table-dark):not(.table-light) thead th,
.dark-layout .table thead th,
html.dark-layout .table thead th,
.dark-layout .table tfoot th,
html.dark-layout .table tfoot th {
    background-color: #343d55 !important;
    color: #b4b7bd !important;
    border-color: #3b4253 !important;
}

.dark-layout .table td,
html.dark-layout .table td {
    border-color: #3b4253 !important;
    color: #b4b7bd !important;
    background-color: transparent !important;
}

.dark-layout .table-hover tbody tr:hover td,
html.dark-layout .table-hover tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

/* Dark buttons */
.dark-layout .btn-outline-secondary,
html.dark-layout .btn-outline-secondary {
    background-color: transparent !important;
    border-color: #82868b !important;
    color: #b4b7bd !important;
}

.dark-layout .btn-outline-secondary:hover,
html.dark-layout .btn-outline-secondary:hover {
    background-color: rgba(130, 134, 139, 0.2) !important;
    color: #fff !important;
}

/* Dark inputs */
.dark-layout .form-control,
html.dark-layout .form-control,
.dark-layout .form-select,
html.dark-layout .form-select,
.dark-layout .input-group-text,
html.dark-layout .input-group-text {
    background-color: #161d31 !important;
    border-color: #3b4253 !important;
    color: #b4b7bd !important;
}

/* Dark sidebar */
.dark-layout .main-menu,
html.dark-layout .main-menu {
    background-color: #283046 !important;
    border-color: #3b4253 !important;
}

.dark-layout .main-menu .navbar-header,
html.dark-layout .main-menu .navbar-header {
    background-color: #283046 !important;
}

.dark-layout .main-menu .navigation > li.active > a,
html.dark-layout .main-menu .navigation > li.active > a {
    background: linear-gradient(
        118deg,
        #1b4332,
        rgba(27, 67, 50, 0.7)
    ) !important;
    box-shadow: 0 0 10px 1px rgba(27, 67, 50, 0.7) !important;
    color: #fff !important;
}

/* Dark mode text colors */
.dark-layout .main-menu .navigation li a,
html.dark-layout .main-menu .navigation li a {
    color: #b4b7bd !important;
}

.dark-layout .main-menu .navigation li a:hover,
html.dark-layout .main-menu .navigation li a:hover {
    color: #1b4332 !important;
}

.dark-layout .main-menu .navigation > li.active > a,
html.dark-layout .main-menu .navigation > li.active > a {
    color: #fff !important;
}

.dark-layout .main-menu .navigation > li ul .active > a,
html.dark-layout .main-menu .navigation > li ul .active > a {
    color: #1b4332 !important;
}

/* Dark mode brand text */
.dark-layout .main-menu .navbar-header .brand-text,
html.dark-layout .main-menu .navbar-header .brand-text {
    color: #fff !important;
}

/* Dark dropdowns & modals */
.dark-layout .dropdown-menu,
html.dark-layout .dropdown-menu,
.dark-layout .modal-content,
html.dark-layout .modal-content {
    background-color: #283046 !important;
    border-color: #3b4253 !important;
}

.dark-layout .dropdown-item,
html.dark-layout .dropdown-item {
    color: #b4b7bd !important;
}

.dark-layout .dropdown-item:hover,
html.dark-layout .dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
}

.dark-layout .pagination .page-item .page-link,
html.dark-layout .pagination .page-item .page-link {
    background-color: #283046 !important;
    border-color: #3b4253 !important;
    color: #b4b7bd !important;
}

/* Auth page dark mode */
.dark-layout .auth-wrapper .auth-inner .card,
html.dark-layout .auth-wrapper .auth-inner .card {
    background-color: #283046 !important;
    border-color: #3b4253 !important;
}