/* ============================================================
   CUANLAI MAHJONG — Brand Color Theme
   #7D2027  crimson-red   → primary / danger
   #EDDDC5  parchment     → light / background accent
   #C8B067  antique-gold  → warning / highlight
   #CE9042  warm-amber    → secondary accent
   #9AB08D  sage-green    → success / info
   #274133  deep-forest   → dark / sidebar
   ============================================================ */

:root {
    --mj-crimson:      #7D2027;
    --mj-parchment:    #EDDDC5;
    --mj-gold:         #C8B067;
    --mj-amber:        #CE9042;
    --mj-sage:         #9AB08D;
    --mj-forest:       #274133;

    /* Override Bootstrap primary */
    --bs-primary:            #7D2027;
    --bs-primary-rgb:        125, 32, 39;
    --bs-primary-active:     #5e1820;

    /* Override Bootstrap success → sage green */
    --bs-success:            #9AB08D;
    --bs-success-rgb:        154, 176, 141;
    --bs-success-active:     #7a9470;

    /* Override Bootstrap info → amber */
    --bs-info:               #CE9042;
    --bs-info-rgb:           206, 144, 66;
    --bs-info-active:        #b07530;

    /* Override Bootstrap warning → antique gold */
    --bs-warning:            #C8B067;
    --bs-warning-rgb:        200, 176, 103;
    --bs-warning-active:     #a8933f;

    /* Override Bootstrap secondary → parchment */
    --bs-secondary:          #EDDDC5;
    --bs-secondary-rgb:      237, 221, 197;
    --bs-secondary-active:   #d4c0a0;

    /* Override Bootstrap dark → deep forest */
    --bs-dark:               #274133;
    --bs-dark-rgb:           39, 65, 51;
}

/* ── Buttons ── */
.btn-primary {
    background-color: var(--mj-crimson) !important;
    border-color:     var(--mj-crimson) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #5e1820 !important;
    border-color:     #5e1820 !important;
}

.btn-success {
    background-color: var(--mj-sage) !important;
    border-color:     var(--mj-sage) !important;
    color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: #7a9470 !important;
    border-color:     #7a9470 !important;
}

.btn-secondary {
    background-color: var(--mj-parchment) !important;
    border-color:     #d4c0a0 !important;
    color: var(--mj-forest) !important;
}
.btn-secondary:hover, .btn-secondary:focus {
    background-color: #d4c0a0 !important;
}

/* ── Badges ── */
.badge-primary {
    background-color: var(--mj-crimson) !important;
    color: #fff !important;
}
.badge-success {
    background-color: var(--mj-sage) !important;
    color: #fff !important;
}
.badge-info {
    background-color: var(--mj-amber) !important;
    color: #fff !important;
}
.badge-warning {
    background-color: var(--mj-gold) !important;
    color: var(--mj-forest) !important;
}
.badge-secondary {
    background-color: var(--mj-parchment) !important;
    color: var(--mj-forest) !important;
}

/* ── Cards ── */
.card {
    border-color: rgba(125, 32, 39, 0.08) !important;
}

/* ── Table header ── */
.table thead tr.bg-secondary th,
.table tr.text-start.bg-secondary {
    background-color: var(--mj-forest) !important;
    color: var(--mj-parchment) !important;
}

/* ── Modal header ── */
.modal-header {
    background-color: var(--mj-crimson);
    color: var(--mj-parchment);
    border-radius: var(--bs-modal-inner-border-radius) var(--bs-modal-inner-border-radius) 0 0;
}
.modal-header .modal-title {
    color: var(--mj-parchment) !important;
}
.modal-header .btn-active-primary {
    color: var(--mj-parchment) !important;
}
.modal-header .btn-active-primary:hover {
    background-color: rgba(237, 221, 197, 0.15) !important;
}

/* ── Modal footer ── */
.modal-footer {
    background-color: rgba(237, 221, 197, 0.35);
}

/* ── Active/Here nav highlight ── */
.menu-root-here-bg-desktop > .menu-item.here > .menu-link {
    background-color: var(--mj-crimson) !important;
}
.menu-state-primary .menu-item.here > .menu-link .menu-title {
    color: var(--mj-parchment) !important;
}

/* ── Active side-menu link ── */
.menu .menu-item .menu-link.active {
    background-color: rgba(125, 32, 39, 0.1) !important;
    color: var(--mj-crimson) !important;
}

/* ── Pagination ── */
.page-item.active .page-link {
    background-color: var(--mj-crimson) !important;
    border-color:     var(--mj-crimson) !important;
}
.page-link {
    color: var(--mj-crimson) !important;
}
.page-link:hover {
    color: #5e1820 !important;
}

/* ── Search button ── */
#form_search .btn-success {
    background: linear-gradient(135deg, var(--mj-forest), var(--mj-sage)) !important;
    border: none !important;
}

/* ── Datepicker active ── */
.datepicker table tr td span.active.active,
.datepicker table tr td.active.active {
    background: var(--mj-crimson) !important;
}

/* ── Focus ring ── */
.form-control:focus, .form-select:focus {
    border-color: var(--mj-amber) !important;
    box-shadow: 0 0 0 0.2rem rgba(206, 144, 66, 0.25) !important;
}

.form-control, .form-select {
    border: 1px solid var(--bs-gray-500);
}
.border-secondary {
    border-color: var(--bs-gray-500)!important;
}

@media (min-width: 992px) {
    .aside {
        display: flex;
        width: auto;
        background-color: var(--bs-body-bg);
        border-radius: 1rem!important;
        box-shadow: 0 .5rem 1.5rem .5rem rgba(0,0,0,.075)!important;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --bs-modal-width: 1340px;
    }
}


.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] {
    background: #019ef7!important;
}
div.datepicker-dropdown {
    padding: 12px;
}
div.datepicker td, div.datepicker th {
    padding: 8px;
}
.badge {
    border-radius: 50px;
}
.flatpickr-calendar {
    padding: 8px 0;
}
.dropify-wrapper .dropify-message p {
    font-size: 12pt;
}
.dropify-wrapper {
    border: 1px dashed #E5E5E5;
    border-radius: 5px;
}
.form-select {
    padding: .775rem 1rem;
}
.border-dashed {
    border-width: 1px;
}
.amcharts-main-div a {
    display: none!important;
}
.border-solid {
    border-style: solid!important;
}
.form-select-sm {
    padding: .55rem .75rem!important;
}
.lh-1 {
    line-height: 1.1 !important;
}
.separator {
    border-bottom: 1px solid var(--bs-dark);
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 95%;
    }
    #panel_home {
        top: 25%;
    }
}
.header .header-menu .menu>.menu-item>.menu-link>.menu-title {
    font-size: 1rem;
}
.table-xs>:not(caption)>*>* {
    padding: .2rem .2rem;
}
.table-bordered tr th, .table-bordered tr td {
    border: 1px solid #000!important;
}
.table-bordered-dashed tr th, .table-bordered-dashed tr td {
    border: 1px dashed #353839!important;
}
.table-bordered-dashed {
    border-bottom: 1px dashed #353839!important;
}
.form-check-input {
    border: 1px solid var(--bs-dark);
}
.modal {
    --bs-modal-width: 650px;
}
.shadow-hover {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.table:not(.table-bordered).table-row-bordered tr {
    border-bottom-color: var(--bs-gray-400);
    border-style: dashed;
}
@media (min-width: 992px) {
    .header-fixed .header {
        height: 64px;
    }
    body.header-fixed {
        padding-top: 80px;
    }
    .menu-root-here-bg-desktop>.menu-item.here>.menu-link {
        background-color: var(--bs-primary);
    }
    .menu-state-primary .menu-item.here>.menu-link .menu-title {
        color: white;
    }
    .menu-state-primary .menu-item.here>.menu-link .menu-arrow:after {
        background-color: white;
    }
}
@media (max-width: 991px) {
    #panel_home {
        top: 10%;
    }
    .header-tablet-and-mobile-fixed .header {
        height: 54px;
    }
    body.header-tablet-and-mobile-fixed {
        padding-top: 72px!important;
    }
}
@media (min-width: 1400px) {
    .container-landing {
        max-width: 80%;
    }
}