/* ===== El Messiri Font ===== */
body, .layout, .main, .card, .card-body, .table, .btn,
h1, h2, h3, h4, h5, h6,
.fw-bold, .fw-semibold, .text-muted,
input, select, textarea, .form-control,
.dropdown-menu, .nav-link, .breadcrumb,
.toast-body, .modal-content, label,
p, span, a, li, td, th, div {
    font-family: 'El Messiri', sans-serif !important;
}

/* ===== Statistics Pages Scope ===== */
/* Cards white on default gray bg */
body.page-platform-overview .p-4.bg-white,
body.page-platform-payment-analysis .p-4.bg-white,
body.page-platform-customer-analysis .p-4.bg-white,
body.page-platform-operations .p-4.bg-white {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

body.page-platform-overview .card,
body.page-platform-payment-analysis .card,
body.page-platform-customer-analysis .card,
body.page-platform-operations .card {
    background-color: #ffffff !important;
    background: #ffffff !important;
}

body.page-platform-overview .table,
body.page-platform-payment-analysis .table,
body.page-platform-customer-analysis .table,
body.page-platform-operations .table {
    background-color: #ffffff !important;
}

body.page-platform-overview .text-black,
body.page-platform-overview .h3.text-black,
body.page-platform-payment-analysis .text-black,
body.page-platform-payment-analysis .h3.text-black,
body.page-platform-customer-analysis .text-black,
body.page-platform-customer-analysis .h3.text-black,
body.page-platform-operations .text-black,
body.page-platform-operations .h3.text-black {
    color: #000 !important;
}

/* ===== Full-width content: remove max-width constraints ===== */
.workspace-limit {
    max-width: 100% !important;
}

.container-xxl,
.container-xl,
.container-lg,
.container-fluid {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* ===== Filter Toggle Button ===== */
.stats-filter-toggle-btn {
    background-color: #4c6ef5 !important;
    border: 1px solid #4c6ef5 !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
    padding: 0.4rem 0.9rem !important;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.stats-filter-toggle-btn:hover {
    background-color: #3b5bdb !important;
    border-color: #3b5bdb !important;
    color: #fff !important;
}
.stats-filter-toggle-btn.active {
    background-color: #364fc7 !important;
    border-color: #364fc7 !important;
    color: #fff !important;
}

/* ===== Collapsible Filter Panel ===== */
.stats-filter-panel {
    border: 1px solid #e3e6ea;
    border-radius: 0.5rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    background-color: #ffffff !important;
}

.stats-filter-panel [data-controller="filter"].row {
    align-items: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem;
}

.stats-filter-panel .col-sm-auto.col-md {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.stats-filter-panel label {
    font-size: 0.73rem;
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.1rem;
    white-space: nowrap;
}

.stats-filter-panel .form-control,
.stats-filter-panel select.form-control {
    font-size: 0.8rem;
    padding: 0.28rem 0.5rem;
    height: 32px;
    border-radius: 0.375rem;
}

/* Apply button */
.btn-filter-apply {
    background-color: #4c6ef5 !important;
    border-color: #4c6ef5 !important;
    color: #fff !important;
    border-radius: 0.375rem !important;
    font-size: 0.8rem;
    height: 32px;
    padding: 0 0.7rem !important;
    white-space: nowrap;
}
.btn-filter-apply:hover {
    background-color: #3b5bdb !important;
    border-color: #3b5bdb !important;
    color: #fff !important;
}

/* Reset button */
.btn-filter-reset {
    background-color: #f8f9fa !important;
    border: 1px solid #dee2e6 !important;
    color: #6c757d !important;
    border-radius: 0.375rem !important;
    font-size: 0.8rem;
    height: 32px;
    padding: 0 0.7rem !important;
    white-space: nowrap;
}
.btn-filter-reset:hover {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

/* ===== Remove extra top spacing ===== */
body.page-platform-overview .command-bar-wrapper,
body.page-platform-payment-analysis .command-bar-wrapper,
body.page-platform-customer-analysis .command-bar-wrapper,
body.page-platform-operations .command-bar-wrapper {
    padding-top: 0 !important;
    margin-bottom: 0.5rem !important;
}

body.page-platform-overview .command-bar-wrapper .layout,
body.page-platform-payment-analysis .command-bar-wrapper .layout,
body.page-platform-customer-analysis .command-bar-wrapper .layout,
body.page-platform-operations .command-bar-wrapper .layout {
    padding-top: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}

/* Reduce workspace top padding */
body.page-platform-overview .workspace,
body.page-platform-payment-analysis .workspace,
body.page-platform-customer-analysis .workspace,
body.page-platform-operations .workspace {
    padding-top: 0.5rem !important;
}

/* Breadcrumb spacing */
body.page-platform-overview .breadcrumb,
body.page-platform-payment-analysis .breadcrumb,
body.page-platform-customer-analysis .breadcrumb,
body.page-platform-operations .breadcrumb {
    margin-bottom: 0.25rem !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    /* Allow filters to wrap on mobile */
    .stats-filter-panel [data-controller="filter"].row {
        flex-wrap: wrap !important;
    }

    .stats-filter-panel .col-sm-auto.col-md {
        flex: 0 0 48% !important;
        max-width: 48%;
    }

    body.page-platform-overview .row .col-sm-4,
    body.page-platform-overview .row .col-sm-6,
    body.page-platform-payment-analysis .row .col-sm-4,
    body.page-platform-payment-analysis .row .col-sm-6,
    body.page-platform-customer-analysis .row .col-sm-4,
    body.page-platform-customer-analysis .row .col-sm-6,
    body.page-platform-operations .row .col-sm-4,
    body.page-platform-operations .row .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .stats-filter-panel .col-sm-auto.col-md {
        flex: 0 0 100% !important;
        max-width: 100%;
    }
}

/* ===== Charts: full width inside columns ===== */
body.page-platform-overview .chart,
body.page-platform-payment-analysis .chart,
body.page-platform-customer-analysis .chart,
body.page-platform-operations .chart {
    width: 100% !important;
}

/* ===== Payment Analysis: clean card layout ===== */
body.page-platform-payment-analysis .table th,
body.page-platform-payment-analysis .table td {
    font-family: 'El Messiri', sans-serif !important;
}


/* ===== Sidebar Dark Navy Background ===== */
.aside, .aside-collapse {
    background-color: #151929 !important;
}
.aside .header-brand, .aside .header-brand p,
.aside .header-brand .h2, .aside .header-brand h2 {
    color: #ffffff !important;
}
.aside .nav-link, .aside a {
    color: rgba(255, 255, 255, 0.75) !important;
}
.aside .nav-link:hover, .aside a:hover {
    color: #ffffff !important;
}
.aside .nav-link.active {
    color: #ffffff !important;
}
.aside .aside-header, .aside .v-center {
    color: rgba(255, 255, 255, 0.9) !important;
}
.aside hr {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.aside footer, .aside footer .bg-dark {
    background-color: #151929 !important;
}

/* ===== Login Button ===== */
#button-login, .form-signin .btn-default {
    background-color: #151929 !important;
    border-color: #151929 !important;
    color: #ffffff !important;
    width: 100%;
}
#button-login:hover, .form-signin .btn-default:hover {
    background-color: #1e2540 !important;
    border-color: #1e2540 !important;
}

/* ===== Orders Table Styling ===== */
.table td, .table th {
    font-size: 0.8rem;
    vertical-align: middle;
    white-space: nowrap;
}
.table th {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #6c757d;
}
.table-responsive {
    overflow-x: auto;
}