/* ==========================================================================
   AFKAR ERP - ACCOUNTING REPORTS DESIGN SYSTEM
   Unified styles for all financial reports (screen + print + dark mode)
   Uses tokens from afkar-theme-tokens.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. REPORT FILTER SECTION
   -------------------------------------------------------------------------- */
.afkar-report-filter {
    position: relative;
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: 2px;
    margin-bottom: 24px;
    box-shadow: var(--erp-shadow);
    overflow: hidden;
}

.afkar-report-filter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--erp-primary), var(--erp-secondary));
}

.afkar-report-filter-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
    border-bottom: 1px solid transparent;
}

.afkar-report-filter-header:hover {
    background: var(--erp-bg-hover);
}

.afkar-report-filter-header.is-open {
    border-bottom-color: var(--erp-border);
}

.afkar-report-filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--erp-primary);
    color: var(--erp-text-on-primary);
    border-radius: 2px;
    font-size: 14px;
    flex-shrink: 0;
}

.afkar-report-filter-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--erp-text-primary);
    margin: 0;
    letter-spacing: 0.2px;
}

.afkar-report-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    font-size: 11px;
    font-weight: 700;
    color: var(--erp-text-on-primary);
    background: var(--erp-secondary);
    border-radius: 2px;
}

.afkar-report-filter-chevron {
    color: var(--erp-text-muted);
    font-size: 13px;
    transition: transform 0.25s ease;
}

.afkar-report-filter-header.is-open .afkar-report-filter-chevron {
    transform: rotate(180deg);
}

.afkar-report-filter-body {
    display: none;
    padding: 20px;
    background: var(--erp-bg-surface-soft);
    animation: afkarFilterFadeIn 0.2s ease;
}

.afkar-report-filter-body.is-open {
    display: block;
}

@keyframes afkarFilterFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.afkar-report-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.afkar-report-filter-item label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--erp-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.afkar-report-filter-item label i {
    margin-left: 6px;
    color: var(--erp-text-muted);
    font-size: 12px;
}

[dir="ltr"] .afkar-report-filter-item label i {
    margin-left: 0;
    margin-right: 6px;
}

.afkar-report-filter-item .form-control,
.afkar-report-filter-item select,
.afkar-report-filter-item input[type="text"] {
    background: var(--erp-input-bg);
    border: 1px solid var(--erp-input-border);
    color: var(--erp-input-text);
    border-radius: 1px;
    padding: 8px 12px;
    font-size: 13px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.afkar-report-filter-item .form-control:focus,
.afkar-report-filter-item select:focus,
.afkar-report-filter-item input[type="text"]:focus {
    border-color: var(--erp-secondary);
    box-shadow: 0 0 0 3px var(--erp-focus-ring);
    outline: none;
}

/* --------------------------------------------------------------------------
   2. REPORT TABLE HEADER (Title + Date Range + Actions)
   -------------------------------------------------------------------------- */
.afkar-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-bottom: none;
    border-radius: 2px 2px 0 0;
}

.afkar-report-header-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.afkar-report-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-secondary));
    color: var(--erp-text-on-primary);
    border-radius: 2px;
    font-size: 18px;
    flex-shrink: 0;
}

.afkar-report-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--erp-text-primary);
    margin: 0;
    line-height: 1.3;
}

.afkar-report-date-range {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--erp-text-muted);
    margin-top: 2px;
}

.afkar-report-date-range i {
    font-size: 12px;
    color: var(--erp-secondary);
}

.afkar-report-date-value {
    font-weight: 600;
    color: var(--erp-text-secondary);
}

.afkar-report-date-separator {
    color: var(--erp-text-muted);
    margin: 0 4px;
}

.afkar-report-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.afkar-report-actions .btn {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 2px;
    border: 1px solid var(--erp-border);
    background: var(--erp-bg-surface);
    color: var(--erp-text-primary);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.afkar-report-actions .btn:hover {
    background: var(--erp-bg-hover);
    border-color: var(--erp-border-strong);
}

.afkar-report-actions .btn-excel {
    color: #217346;
    border-color: #217346;
}

.afkar-report-actions .btn-excel:hover {
    background: #217346;
    color: #fff;
}

.afkar-report-actions .btn-pdf {
    color: var(--erp-danger);
    border-color: var(--erp-danger);
}

.afkar-report-actions .btn-pdf:hover {
    background: var(--erp-danger);
    color: #fff;
}

.afkar-report-actions .btn-reconcile {
    color: var(--erp-primary);
    border-color: var(--erp-primary);
}

.afkar-report-actions .btn-reconcile:hover {
    background: var(--erp-primary);
    color: #fff;
}

/* --------------------------------------------------------------------------
   3. REPORT TABLE
   -------------------------------------------------------------------------- */
.afkar-report-table-wrapper {
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: 0 0 2px 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

.afkar-report-table-scroll {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
}

.afkar-report-table {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--erp-text-primary);
    font-variant-numeric: tabular-nums;
}

.afkar-report-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.afkar-report-table thead th,
.reports-module table.dataTable thead th {
    background: #0C306A !important;
    color: #ffffff !important;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 11px 12px;
    border: 1px solid #154284 !important;
    text-align: center;
    white-space: nowrap;
}

/* Column group headers (Opening Balance, Period Movement, Closing Balance) */
.afkar-report-table .column-group-header {
    background: var(--erp-primary);
    color: var(--erp-text-on-primary);
    font-size: 11px;
    padding: 8px 14px;
    letter-spacing: 0.8px;
}

.afkar-report-table .column-group-header-alt {
    background: var(--erp-secondary);
    color: var(--erp-text-on-primary);
}

.afkar-report-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--erp-border);
    vertical-align: middle;
    transition: background-color 0.1s ease;
}

.afkar-report-table tbody tr:hover td {
    background: var(--erp-table-row-hover);
    cursor: pointer;
}

.afkar-report-table tbody tr:last-child td {
    border-bottom: none;
}

/* Text alignment utilities */
.afkar-report-table .text-center { text-align: center; }
.afkar-report-table .text-right { text-align: right; }
.afkar-report-table .text-left { text-align: left; }

/* Numeric columns */
.afkar-report-table .col-amount {
    text-align: center;
    font-variant-numeric: tabular-nums;
    min-width: 110px;
}

/* GL Code column */
.afkar-report-table .col-gl-code {
    font-weight: 600;
    white-space: nowrap;
    min-width: 80px;
}

.afkar-report-table .col-gl-code a {
    color: var(--erp-link);
    text-decoration: none;
    transition: color 0.15s ease;
}

.afkar-report-table .col-gl-code a:hover {
    color: var(--erp-link-hover);
    text-decoration: underline;
}

/* Amount links */
.afkar-report-table .col-amount a {
    color: var(--erp-link);
    text-decoration: none;
}

.afkar-report-table .col-amount a:hover {
    color: var(--erp-link-hover);
    text-decoration: underline;
}

/* Account name column */
.afkar-report-table .col-account-name {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. ACCOUNT LEVEL STYLES (Hierarchy)
   -------------------------------------------------------------------------- */
.afkar-report-table .level-1 td {
    font-weight: 700;
    background: var(--erp-bg-surface-soft);
    border-bottom: 2px solid var(--erp-border);
    color: var(--erp-text-primary);
}

.afkar-report-table .level-2 td {
    font-weight: 600;
    padding-left: 15px;
}

[dir="rtl"] .afkar-report-table .level-2 td:nth-child(2) {
    padding-right: 15px;
    padding-left: 14px;
}

.afkar-report-table .level-3 td {
    padding-left: 30px;
}

[dir="rtl"] .afkar-report-table .level-3 td:nth-child(2) {
    padding-right: 30px;
    padding-left: 14px;
}

.afkar-report-table .level-4 td {
    padding-left: 45px;
    font-size: 12px;
    color: var(--erp-text-secondary);
}

[dir="rtl"] .afkar-report-table .level-4 td:nth-child(2) {
    padding-right: 45px;
    padding-left: 14px;
}

/* Tree toggle icon */
.afkar-report-table .tree-toggle {
    cursor: pointer;
    color: var(--erp-secondary);
    margin-left: 6px;
    font-size: 14px;
    transition: color 0.15s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    user-select: none;
}

[dir="ltr"] .afkar-report-table .tree-toggle {
    margin-left: 0;
    margin-right: 6px;
}

.afkar-report-table .tree-toggle:hover {
    color: var(--erp-primary);
    transform: scale(1.2);
}

/* --------------------------------------------------------------------------
   5. TOTAL ROWS
   -------------------------------------------------------------------------- */
.afkar-report-table tfoot th,
.afkar-report-table tfoot td,
.afkar-report-table .total-row td,
.afkar-report-table .total-row th {
    background: var(--erp-bg-surface-soft);
    font-weight: 800;
    color: var(--erp-text-primary);
    border-top: 2px solid var(--erp-border-strong);
    padding: 12px 14px;
    font-size: 13px;
}

.afkar-report-table .grand-total-row td,
.afkar-report-table .grand-total-row th {
    background: var(--erp-bg-active);
    font-weight: 900;
    color: var(--erp-text-primary);
    border-top: 3px double var(--erp-border-strong);
    font-size: 14px;
}

/* Sub-total row (Income Statement) */
.afkar-report-table .sub-total-row td {
    background: var(--erp-bg-surface-soft);
    font-weight: 700;
    border-top: 1px solid var(--erp-border-strong);
}

/* --------------------------------------------------------------------------
   6. SECTION HEADERS & SPECIAL ROWS (Balance Sheet, Income Statement)
   -------------------------------------------------------------------------- */
.afkar-report-table .section-header td,
.afkar-report-section-header {
    background: var(--erp-primary) !important;
    color: var(--erp-text-on-primary) !important;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    padding: 10px 16px;
    text-align: right;
    text-transform: uppercase;
    border: none !important;
}

[dir="ltr"] .afkar-report-table .section-header td,
[dir="ltr"] .afkar-report-section-header {
    text-align: left;
}

.afkar-report-table .assembly-header td {
    background: var(--erp-secondary) !important;
    color: var(--erp-text-on-primary) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 1px;
    text-align: center !important;
    padding: 12px !important;
    border: none !important;
}

.afkar-report-table .assembly-final-total td {
    background: var(--erp-primary) !important;
    color: var(--erp-text-on-primary) !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    border-top: 3px double var(--erp-secondary) !important;
    padding: 12px 14px !important;
}

.afkar-report-table .net-income-row td {
    background-color: var(--erp-secondary-soft) !important;
    font-weight: 700;
    color: var(--erp-primary-dark);
}

[dir="rtl"] .afkar-report-table .net-income-row td:first-child {
    border-right: 4px solid var(--erp-secondary);
}

[dir="ltr"] .afkar-report-table .net-income-row td:first-child {
    border-left: 4px solid var(--erp-secondary);
}

.afkar-report-table .balance-col {
    min-width: 110px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Group start borders between column groupings */
[dir="rtl"] .afkar-report-table .group-start {
    border-right: 2px solid var(--erp-border-strong) !important;
}

[dir="ltr"] .afkar-report-table .group-start {
    border-left: 2px solid var(--erp-border-strong) !important;
}


/* --------------------------------------------------------------------------
   7. ALERT / UNBALANCED WARNING
   -------------------------------------------------------------------------- */
.afkar-report-alert {
    padding: 12px 16px;
    border-radius: 2px;
    font-weight: 600;
    text-align: center;
    font-size: 13px;
}

.afkar-report-alert-danger {
    background: var(--erp-validation-error-bg);
    color: var(--erp-validation-error-text);
    border: 1px solid var(--erp-danger);
}

.afkar-report-alert-success {
    background: var(--erp-validation-success-bg);
    color: var(--erp-validation-success-text);
    border: 1px solid var(--erp-success);
}

/* --------------------------------------------------------------------------
   8. AGEING REPORT TABLE COLUMN SEVERITY
   -------------------------------------------------------------------------- */
.afkar-report-table .ageing-current {
    color: var(--erp-success);
    font-weight: 600;
}

.afkar-report-table .ageing-30 {
    color: var(--erp-info);
    font-weight: 600;
}

.afkar-report-table .ageing-60 {
    color: var(--erp-secondary);
    font-weight: 600;
}

.afkar-report-table .ageing-90 {
    color: var(--erp-danger);
    font-weight: 600;
}

.afkar-report-table .ageing-over90 {
    color: var(--erp-danger);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   8b. REPORT KPI & SUMMARY METRIC CARDS
   -------------------------------------------------------------------------- */
.afkar-report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.afkar-report-kpi-card {
    background: var(--erp-bg-surface);
    border: 1px solid var(--erp-border);
    border-radius: 2px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.afkar-report-kpi-card:hover {
    box-shadow: 0 4px 12px rgba(12, 48, 106, 0.06);
    border-color: var(--erp-border-strong);
}

.afkar-report-kpi-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.afkar-report-kpi-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--erp-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.afkar-report-kpi-value {
    font-size: 19px;
    font-weight: 800;
    color: var(--erp-text-primary);
    font-variant-numeric: tabular-nums;
}

.afkar-report-kpi-icon {
    width: 42px;
    height: 42px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--erp-bg-surface-soft);
    color: var(--erp-primary);
    flex-shrink: 0;
}

.afkar-report-kpi-card.success .afkar-report-kpi-value {
    color: var(--erp-success);
}
.afkar-report-kpi-card.success .afkar-report-kpi-icon {
    background: var(--erp-success-soft, #ecfdf5);
    color: var(--erp-success);
}

.afkar-report-kpi-card.danger .afkar-report-kpi-value {
    color: var(--erp-danger);
}
.afkar-report-kpi-card.danger .afkar-report-kpi-icon {
    background: var(--erp-danger-soft, #fef2f2);
    color: var(--erp-danger);
}

.afkar-report-kpi-card.primary .afkar-report-kpi-icon {
    background: var(--erp-bg-active);
    color: var(--erp-primary);
}

.afkar-report-kpi-card.info .afkar-report-kpi-icon {
    background: var(--erp-secondary-soft, #e0f2fe);
    color: var(--erp-secondary);
}

/* --------------------------------------------------------------------------
   9. REPORT INDEX CARDS
   -------------------------------------------------------------------------- */
.afkar-report-card {
    display: flex;
    flex-direction: column;
    background: var(--erp-bg-card);
    border: 1px solid var(--erp-border);
    border-radius: 2px;
    box-shadow: var(--erp-shadow);
    padding: 24px;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    overflow: hidden;
}

.afkar-report-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--erp-primary), var(--erp-secondary));
    opacity: 0;
    transition: opacity 0.2s ease;
}

.afkar-report-card:hover {
    border-color: var(--erp-secondary);
    box-shadow: 0 6px 24px rgba(12, 48, 106, 0.1);
}

.afkar-report-card:hover::before {
    opacity: 1;
}

.afkar-report-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--erp-bg-active);
    color: var(--erp-primary);
    border-radius: 2px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.afkar-report-card-icon svg {
    width: 24px;
    height: 24px;
}

.afkar-report-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--erp-text-primary);
    margin: 0 0 8px;
    line-height: 1.4;
}

.afkar-report-card-description {
    font-size: 13px;
    color: var(--erp-text-muted);
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;
}

.afkar-report-card-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--erp-primary);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid var(--erp-primary);
    border-radius: 2px;
    transition: all 0.15s ease;
    align-self: flex-start;
}

.afkar-report-card-action:hover {
    background: var(--erp-primary);
    color: var(--erp-text-on-primary);
    text-decoration: none;
}

.afkar-report-card-action svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   10. RECONCILE MODAL
   -------------------------------------------------------------------------- */
.afkar-reconcile-summary {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.afkar-reconcile-card {
    flex: 1;
    min-width: 140px;
    padding: 16px;
    border-radius: 2px;
    text-align: center;
    border: 1px solid var(--erp-border);
    background: var(--erp-bg-surface);
}

.afkar-reconcile-card .rc-value {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 4px;
    color: var(--erp-text-primary);
}

.afkar-reconcile-card .rc-label {
    font-size: 12px;
    color: var(--erp-text-muted);
}

.afkar-reconcile-card.rc-total {
    border-color: var(--erp-primary);
    border-top: 3px solid var(--erp-primary);
}

.afkar-reconcile-card.rc-total .rc-value { color: var(--erp-primary); }

.afkar-reconcile-card.rc-matched {
    border-color: var(--erp-success);
    border-top: 3px solid var(--erp-success);
}

.afkar-reconcile-card.rc-matched .rc-value { color: var(--erp-success); }

.afkar-reconcile-card.rc-unbal {
    border-color: var(--erp-danger);
    border-top: 3px solid var(--erp-danger);
}

.afkar-reconcile-card.rc-unbal .rc-value { color: var(--erp-danger); }

.afkar-reconcile-card.rc-orphan {
    border-color: var(--erp-info);
    border-top: 3px solid var(--erp-info);
}

.afkar-reconcile-card.rc-orphan .rc-value { color: var(--erp-info); }

.afkar-reconcile-card.rc-imbal {
    border-color: var(--erp-text-muted);
    border-top: 3px solid var(--erp-text-muted);
}

.afkar-reconcile-card.rc-imbal .rc-value { color: var(--erp-text-muted); }

/* Reconcile Progress */
.afkar-reconcile-progress {
    margin: 24px 0;
    text-align: center;
}

.afkar-reconcile-progress .progress {
    height: 20px;
    border-radius: 2px;
    background: var(--erp-bg-surface-soft);
    border: 1px solid var(--erp-border);
    overflow: hidden;
}

.afkar-reconcile-progress .progress-bar {
    background: linear-gradient(90deg, var(--erp-primary), var(--erp-success));
    transition: width 0.5s ease;
    line-height: 20px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
}

.afkar-reconcile-progress .progress-text {
    margin-top: 8px;
    font-size: 13px;
    color: var(--erp-text-muted);
}

.afkar-reconcile-success-msg {
    padding: 16px;
    background: var(--erp-validation-success-bg);
    border: 1px solid var(--erp-success);
    border-radius: 2px;
    color: var(--erp-validation-success-text);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

/* Reconcile Modal Header */
#reconcile-modal .modal-dialog {
    max-width: 900px;
}

#reconcile-modal .modal-header {
    background: linear-gradient(135deg, var(--erp-primary), var(--erp-secondary));
    color: #fff;
    border-radius: 2px 2px 0 0;
}

#reconcile-modal .modal-header .close {
    color: #fff;
    opacity: 0.8;
}

/* --------------------------------------------------------------------------
   11. PDF EXPORT STYLES (Unified)
   -------------------------------------------------------------------------- */
.afkar-pdf-content {
    display: none;
    background: #fff;
    padding: 20px;
    font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", sans-serif;
    direction: rtl;
}

.afkar-pdf-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 9pt;
}

.afkar-pdf-content th {
    background: #0C306A;
    color: #fff;
    font-weight: bold;
    padding: 8px;
    border: 1px solid #13407F;
    text-align: center;
}

.afkar-pdf-content td {
    border: 1px solid #D1D5DB;
    padding: 6px;
    vertical-align: middle;
}

.afkar-pdf-content tr {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
}

.afkar-pdf-content .pdf-header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 3px solid #0C306A;
    padding-bottom: 15px;
}

.afkar-pdf-content .pdf-header h2 {
    margin: 0;
    color: #0C306A;
    font-size: 20pt;
    font-weight: bold;
}

.afkar-pdf-content .pdf-header h3 {
    margin: 8px 0;
    font-size: 14pt;
    color: #374151;
}

.afkar-pdf-content .pdf-header p {
    margin: 5px 0;
    font-size: 11pt;
    color: #687280;
}

.afkar-pdf-content .total-row {
    background: #E7EEF9;
    font-weight: bold;
}

.afkar-pdf-content .level-1 {
    background: #F3F4F6;
    font-weight: bold;
}

.afkar-pdf-content .level-2 {
    background: #F8F9FA;
}

.afkar-pdf-content .level-3,
.afkar-pdf-content .level-4 {
    background: #FFFFFF;
}

.afkar-pdf-content .level-4 {
    font-size: 8.5pt;
}

.afkar-pdf-content .account-code {
    font-family: "Courier New", monospace;
    font-weight: bold;
}

.afkar-pdf-content .text-center { text-align: center; }
.afkar-pdf-content .text-right { text-align: right; }
.afkar-pdf-content .text-left {
    text-align: left;
    direction: ltr;
    font-family: "Courier New", monospace;
}

.afkar-pdf-content .section-header {
    background: #0C306A;
    color: #fff;
    font-weight: bold;
    padding: 8px;
    font-size: 10pt;
}

/* --------------------------------------------------------------------------
   12. FORECAST CARDS (Cash Flow)
   -------------------------------------------------------------------------- */
.afkar-forecast-card {
    padding: 16px;
    border: 1px solid var(--erp-border);
    border-radius: 2px;
    background: var(--erp-bg-card);
    text-align: center;
}

.afkar-forecast-card-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    font-size: 18px;
}

.afkar-forecast-card-label {
    font-size: 12px;
    color: var(--erp-text-muted);
    margin-bottom: 4px;
}

.afkar-forecast-card-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--erp-text-primary);
}

.afkar-forecast-card.fc-balance .afkar-forecast-card-icon {
    background: var(--erp-bg-active);
    color: var(--erp-primary);
}

.afkar-forecast-card.fc-inflow .afkar-forecast-card-icon {
    background: var(--erp-validation-success-bg);
    color: var(--erp-success);
}

.afkar-forecast-card.fc-inflow .afkar-forecast-card-value {
    color: var(--erp-success);
}

.afkar-forecast-card.fc-outflow .afkar-forecast-card-icon {
    background: var(--erp-validation-error-bg);
    color: var(--erp-danger);
}

.afkar-forecast-card.fc-outflow .afkar-forecast-card-value {
    color: var(--erp-danger);
}

.afkar-forecast-card.fc-forecast .afkar-forecast-card-icon {
    background: var(--erp-bg-active);
    color: var(--erp-info);
}

.afkar-forecast-card.fc-forecast .afkar-forecast-card-value {
    color: var(--erp-info);
}

/* --------------------------------------------------------------------------
   13. CHECKBOX WRAPPER
   -------------------------------------------------------------------------- */
.afkar-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--erp-input-bg);
    border: 1px solid var(--erp-input-border);
    border-radius: 1px;
    cursor: pointer;
    font-size: 13px;
    color: var(--erp-text-primary);
    transition: border-color 0.15s ease;
}

.afkar-checkbox-wrapper:hover {
    border-color: var(--erp-secondary);
}

.afkar-checkbox-wrapper.active {
    border-color: var(--erp-secondary);
    background: var(--erp-bg-active);
}

/* --------------------------------------------------------------------------
   14. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
    .afkar-report-filter,
    .afkar-report-actions,
    .sidebar,
    .main-header,
    .content-header,
    .main-footer,
    .no-print,
    .box-tools,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dataTables_info,
    .dt-buttons,
    .btn,
    .btn-group {
        display: none !important;
    }

    .afkar-report-table-wrapper {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        background: #ffffff !important;
    }

    .afkar-report-table-scroll {
        max-height: none !important;
        overflow: visible !important;
    }

    /* KPI Cards in Print */
    #kpi-cards-row,
    .cash-banks-kpi-grid,
    .report-summary-kpis {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        page-break-inside: avoid !important;
    }

    .financial-card,
    .cash-banks-kpi-card {
        flex: 1 !important;
        padding: 8px 10px !important;
        border: 1px solid #cbd5e1 !important;
        border-top: 3px solid #0c306a !important;
        border-radius: 4px !important;
        background: #ffffff !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Charts & Visual Analytics in Print */
    .chart-container,
    .erp-table-card:has(canvas),
    .report-visual-chart-box {
        page-break-inside: avoid !important;
        margin-bottom: 12px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
        background: #ffffff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    canvas {
        max-width: 100% !important;
        max-height: 220px !important;
        display: block !important;
        margin: 0 auto !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .afkar-report-table {
        width: 100% !important;
        border-collapse: collapse !important;
        font-size: 9.5px !important;
        margin: 6px 0 !important;
    }

    .afkar-report-table thead th {
        background-color: #0c306a !important;
        color: #ffffff !important;
        border: 1px solid #0c306a !important;
        padding: 6px 6px !important;
        font-size: 9.5px !important;
        font-weight: 700 !important;
        text-align: center !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .afkar-report-table td {
        border: 1px solid #cbd5e1 !important;
        padding: 5px 6px !important;
        font-size: 9px !important;
        color: #1e293b !important;
    }

    .afkar-report-table tr:nth-child(even) td,
    .afkar-report-table .level-1 td {
        background-color: #f8fafc !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .afkar-report-table tfoot th,
    .afkar-report-table tfoot td {
        background-color: #f1f5f9 !important;
        color: #0c306a !important;
        font-weight: 800 !important;
        border-top: 2px solid #0c306a !important;
        border-bottom: 3px double #0c306a !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .afkar-report-table tr {
        page-break-inside: avoid !important;
    }

    .afkar-report-header {
        border: none !important;
        padding: 0 0 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 2px solid #0c306a !important;
    }

    .afkar-report-header-icon {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 9.5px !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .afkar-report-filter-grid {
        grid-template-columns: 1fr;
    }

    .afkar-report-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .afkar-report-actions {
        width: 100%;
    }

    .afkar-report-actions .btn {
        flex: 1;
        justify-content: center;
    }

    .afkar-report-card {
        margin-bottom: 16px;
    }
}

@media (max-width: 576px) {
    .afkar-report-table {
        font-size: 11px;
    }

    .afkar-report-table thead th {
        padding: 8px 6px;
        font-size: 10px;
    }

    .afkar-report-table tbody td {
        padding: 8px 6px;
    }

    .afkar-reconcile-summary {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   16. AGEING COLLAPSIBLE GROUPS & DETAILS
   -------------------------------------------------------------------------- */
.afkar-report-table .toggle-tr {
    background: var(--erp-bg-surface-soft) !important;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.afkar-report-table .toggle-tr:hover {
    background: var(--erp-bg-active) !important;
}

.afkar-report-table .toggle-tr th {
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    border-top: 1px solid var(--erp-border-strong) !important;
    border-bottom: 1px solid var(--erp-border) !important;
}

.afkar-report-table .collapse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-end: 8px;
    color: var(--erp-primary);
    transition: transform 0.2s ease;
}

.afkar-report-table tbody.collapsed .collapse-tr {
    display: none !important;
}

.afkar-report-table .subtotal-tr th {
    background: var(--erp-bg-surface-soft) !important;
    font-weight: 700;
    font-size: 12px;
    color: var(--erp-text-primary);
    border-top: 1px solid var(--erp-border-strong) !important;
    border-bottom: 2px solid var(--erp-border-strong) !important;
    padding: 10px 14px;
}

/* Tree Toggle Buttons (+ and -) in Account Column */
.tree-toggle {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-end: 8px;
    color: var(--erp-primary, #0c306a) !important;
    font-size: 14px;
    vertical-align: middle;
    transition: transform 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    user-select: none;
    border-radius: 4px;
}

.tree-toggle:hover {
    color: #1e40af !important;
    background-color: rgba(12, 48, 106, 0.08);
    transform: scale(1.15);
}

.account-row[style*="display: none"],
.account-row[style*="display:none"] {
    display: none !important;
}

/* ==========================================================================
   AFKAR SYSTEMS UNIVERSAL PRINT ENGINE FOR FINANCIAL & ACCOUNTING REPORTS
   ========================================================================== */
@media print {
    @page {
        size: auto;
        margin: 7mm 8mm 8mm 8mm;
    }

    /* Hide non-printable navigation & chrome */
    .main-header,
    .main-sidebar,
    .control-sidebar,
    .content-header,
    .afkar-report-filter-wrapper,
    #filter-header,
    #filter-grid-container,
    .afkar-report-actions,
    .tree-toggle,
    .btn,
    .btn-excel,
    .btn-pdf,
    .btn-reconcile,
    .no-print,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_info,
    .dataTables_paginate,
    .modal,
    #pdf-content {
        display: none !important;
    }

    /* Reset background & base fonts */
    html, body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-family: 'IBM Plex Sans Arabic', 'DejaVu Sans', 'Cairo', sans-serif !important;
        font-size: 8.5pt !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        direction: rtl !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Full-width container unwrapping (Removes horizontal scroll and table clipping) */
    .thetop,
    .thetop > main,
    main,
    #scrollable-container,
    #scrollable-container > div,
    .wrapper,
    .content-wrapper,
    .content,
    .afkar-report-table-wrapper,
    .afkar-report-table-scroll,
    #table-container,
    .table-responsive {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    /* Elegant official print header */
    .afkar-report-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        margin-bottom: 12px !important;
        border-bottom: 2.5px solid #0C306A !important;
        padding-bottom: 8px !important;
        background: transparent !important;
    }

    .afkar-report-header-info {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .afkar-report-header-icon {
        display: none !important;
    }

    .afkar-report-title {
        font-size: 14pt !important;
        font-weight: 800 !important;
        color: #0C306A !important;
        margin: 0 0 4px 0 !important;
    }

    .afkar-report-date-range {
        font-size: 8.5pt !important;
        color: #475569 !important;
        margin: 0 !important;
    }

    .afkar-report-date-value {
        color: #0C306A !important;
        font-weight: 700 !important;
    }

    /* KPI Summary Cards in Print */
    .afkar-report-kpi-grid {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        margin-bottom: 10px !important;
        width: 100% !important;
    }

    .afkar-report-kpi-card {
        flex: 1 1 0 !important;
        padding: 5px 8px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 2px !important;
        background: #f8fafc !important;
        box-shadow: none !important;
    }

    .afkar-report-kpi-label {
        font-size: 7pt !important;
        color: #475569 !important;
        font-weight: 600 !important;
    }

    .afkar-report-kpi-value {
        font-size: 9pt !important;
        font-weight: 800 !important;
        color: #0C306A !important;
    }

    .afkar-report-kpi-icon {
        display: none !important;
    }

    /* Table perfection: Fixed Layout, Proportional Widths, Zero Overflow */
    table.afkar-report-table,
    .table-responsive > table,
    table.dataTable {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        margin: 0 0 10px 0 !important;
        page-break-inside: auto !important;
    }

    table.afkar-report-table tr {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }

    table.afkar-report-table thead {
        display: table-header-group !important;
    }

    table.afkar-report-table tfoot {
        display: table-footer-group !important;
    }

    table.afkar-report-table th,
    table.afkar-report-table td {
        font-size: 8pt !important;
        padding: 4px 5px !important;
        border: 1px solid #cbd5e1 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.25 !important;
    }

    table.afkar-report-table th,
    .reports-module table.dataTable thead th {
        background-color: #0C306A !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        border: 1px solid #061838 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .column-group-header {
        background-color: #0C306A !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        font-size: 8.5pt !important;
        border: 1px solid #154284 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .column-group-header-alt {
        background-color: #154284 !important;
        color: #ffffff !important;
        border: 1px solid #154284 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    table.afkar-report-table tbody tr:nth-child(even) {
        background-color: #f8fafc !important;
    }

    /* Section & Total Rows */
    .section-header td {
        background-color: #0C306A !important;
        color: #ffffff !important;
        font-weight: 700 !important;
        font-size: 8.5pt !important;
        text-align: right !important;
        padding: 5px 8px !important;
    }

    .total-row td,
    .sub-total-row td,
    .grand-total-row td {
        background-color: #e8eef8 !important;
        color: #0C306A !important;
        font-weight: 800 !important;
        border-top: 2px solid #0C306A !important;
        border-bottom: 2px solid #0C306A !important;
    }

    /* Specific column alignments */
    .col-gl-code {
        width: 10% !important;
        text-align: center !important;
    }

    .col-account-name {
        text-align: right !important;
    }

    .col-amount {
        text-align: center !important;
        direction: ltr !important;
        font-family: 'IBM Plex Sans Arabic', 'DejaVu Sans', sans-serif !important;
    }
}

/* ==========================================================================
   AFKAR REPORT HUB & CARDS COMPONENT
   ========================================================================== */

.afkar-report-hub-banner {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.afkar-report-hub-info h1 {
    font-size: 19px;
    font-weight: 800;
    color: #0C306A;
    margin: 0 0 6px 0;
    font-family: 'IBM Plex Sans Arabic', 'Cairo', sans-serif;
    display: flex;
    align-items: center;
    gap: 10px;
}

.afkar-report-hub-info p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

.afkar-report-hub-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.afkar-report-search-wrapper {
    position: relative;
    width: 280px;
}

.afkar-report-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
}

.afkar-report-search-input {
    width: 100%;
    padding: 8px 36px 8px 12px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    background: #f8fafc;
    color: #0f172a;
    transition: all 0.15s ease;
}

.afkar-report-search-input:focus {
    outline: none;
    background: #ffffff;
    border-color: #0C306A;
    box-shadow: 0 0 0 3px rgba(12, 48, 106, 0.08);
}

.afkar-report-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.afkar-report-filter-tab {
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    border-radius: 3px;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
}

.afkar-report-filter-tab .count-badge {
    font-size: 10.5px;
    padding: 1px 6px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
}

.afkar-report-filter-tab:hover {
    background: #f8fafc;
    color: #0C306A;
    border-color: #cbd5e1;
}

.afkar-report-filter-tab.active {
    background: #0C306A;
    color: #ffffff;
    border-color: #0C306A;
}

.afkar-report-filter-tab.active .count-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.afkar-reports-section-header {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-inline-start: 4px solid #0C306A;
    border-radius: 4px;
    padding: 12px 18px;
    margin: 28px 0 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
}

.afkar-reports-section:first-child .afkar-reports-section-header {
    margin-top: 0;
}

.afkar-reports-section-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.afkar-reports-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: rgba(12, 48, 106, 0.07);
    color: #0C306A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.afkar-reports-section-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.afkar-report-filter-tab svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    flex-shrink: 0;
}

.afkar-reports-section-title {
    font-size: 16.5px;
    font-weight: 800;
    color: #0C306A;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.afkar-reports-section-count {
    font-size: 12px;
    font-weight: 700;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 4px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.afkar-reports-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -10px -10px 24px -10px;
}

.report-item-col {
    padding: 10px;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

@media (min-width: 768px) {
    .report-item-col {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}

@media (min-width: 992px) {
    .report-item-col {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
        width: 33.333333%;
    }
}

.report-item-col.hidden-by-filter {
    display: none !important;
}

.afkar-reports-section.hidden-by-filter {
    display: none !important;
}

.afkar-report-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-right: 6px solid #0C306A !important;
    border-radius: 4px;
    padding: 22px 20px 18px 20px;
    display: flex;
    flex-direction: column;
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.afkar-report-card::before {
    display: none !important;
}

.afkar-report-card:hover {
    transform: translateY(-4px);
    border-color: #cbd5e1;
    border-right-color: #1e40af !important;
    box-shadow: 0 10px 25px rgba(12, 48, 106, 0.08);
}

.afkar-report-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.afkar-report-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #0C306A;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.afkar-report-card:hover .afkar-report-card-icon {
    background: #0C306A;
    color: #ffffff;
    border-color: #0C306A;
}

.afkar-report-card-icon svg {
    width: 22px;
    height: 22px;
}

.afkar-report-card-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 3px;
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.afkar-report-card-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.afkar-report-card:hover .afkar-report-card-title {
    color: #0C306A;
}

.afkar-report-card-description {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 16px 0;
    flex-grow: 1;
}



.afkar-report-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #0C306A;
    border: 1px solid #0C306A;
    border-radius: 3px;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.15s ease;
    margin-top: auto;
    box-shadow: 0 2px 4px rgba(12, 48, 106, 0.15);
}

.afkar-report-card-action span {
    color: #ffffff !important;
    font-weight: 700;
}

.afkar-report-card-action i {
    font-size: 12px;
    color: #ffffff !important;
    transition: transform 0.15s ease;
}

.afkar-report-card-action:hover {
    background: #1e40af;
    border-color: #1e40af;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(12, 48, 106, 0.25);
}

.afkar-report-card-action:hover i {
    transform: translateX(-4px);
}

.afkar-report-empty-state {
    display: none;
    text-align: center;
    padding: 48px 20px;
    background: #ffffff;
    border: 1px dashed #cbd5e1;
    border-radius: 4px;
    margin: 20px 0;
}

.afkar-report-empty-state i {
    font-size: 36px;
    color: #94a3b8;
    margin-bottom: 12px;
}

.afkar-report-empty-state h4 {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    margin: 0 0 6px 0;
}

.afkar-report-empty-state p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Dark Mode Overrides */
html.dark-mode .afkar-report-hub-banner,
[data-theme="dark"] .afkar-report-hub-banner {
    background: #1e293b;
    border-color: #334155;
}

html.dark-mode .afkar-report-hub-info h1,
[data-theme="dark"] .afkar-report-hub-info h1 {
    color: #93c5fd;
}

html.dark-mode .afkar-report-search-input,
[data-theme="dark"] .afkar-report-search-input {
    background: #0f172a;
    border-color: #334155;
    color: #f8fafc;
}

html.dark-mode .afkar-report-filter-tab,
[data-theme="dark"] .afkar-report-filter-tab {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

html.dark-mode .afkar-report-filter-tab.active,
[data-theme="dark"] .afkar-report-filter-tab.active {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

html.dark-mode .afkar-reports-section-header,
[data-theme="dark"] .afkar-reports-section-header {
    background: #1e293b;
    border-color: #334155;
    border-inline-start-color: #3b82f6;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

html.dark-mode .afkar-reports-section-icon,
[data-theme="dark"] .afkar-reports-section-icon {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

html.dark-mode .afkar-reports-section-title,
[data-theme="dark"] .afkar-reports-section-title {
    color: #f8fafc;
}

html.dark-mode .afkar-reports-section-count,
[data-theme="dark"] .afkar-reports-section-count {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

html.dark-mode .afkar-report-card,
[data-theme="dark"] .afkar-report-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-right: 6px solid #3b82f6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark-mode .afkar-report-card:hover,
[data-theme="dark"] .afkar-report-card:hover {
    border-color: #475569;
    border-right-color: #60a5fa !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.dark-mode .afkar-report-card-icon,
[data-theme="dark"] .afkar-report-card-icon {
    background: #0f172a;
    border-color: #334155;
    color: #93c5fd;
}

html.dark-mode .afkar-report-card:hover .afkar-report-card-icon,
[data-theme="dark"] .afkar-report-card:hover .afkar-report-card-icon {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

html.dark-mode .afkar-report-card-badge,
[data-theme="dark"] .afkar-report-card-badge {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

html.dark-mode .afkar-report-card-title,
[data-theme="dark"] .afkar-report-card-title {
    color: #f8fafc;
}

html.dark-mode .afkar-report-card:hover .afkar-report-card-title,
[data-theme="dark"] .afkar-report-card:hover .afkar-report-card-title {
    color: #93c5fd;
}

html.dark-mode .afkar-report-card-description,
[data-theme="dark"] .afkar-report-card-description {
    color: #94a3b8;
}



html.dark-mode .afkar-report-card-action,
[data-theme="dark"] .afkar-report-card-action {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

html.dark-mode .afkar-report-card-action:hover,
[data-theme="dark"] .afkar-report-card-action:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #ffffff !important;
}

html.dark-mode .afkar-report-empty-state,
[data-theme="dark"] .afkar-report-empty-state {
    background: #1e293b;
    border-color: #334155;
}

/* Report content only; the navigation and other ERP screens keep their own styles. */
.reports-module {
    min-width: 0;
    color: var(--erp-text-primary);
}

.reports-module .report-kpi-grid,
.reports-module .afkar-report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-block: 0 20px;
}

.reports-module .report-kpi-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reports-module .report-kpi-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reports-module .afkar-report-kpi-card {
    min-width: 0;
    min-height: 118px;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14px;
    border-radius: 6px;
    border-inline-start: 3px solid var(--erp-primary);
    padding: 18px;
}

.reports-module .afkar-report-kpi-card.success { border-inline-start-color: var(--erp-success); }
.reports-module .afkar-report-kpi-card.danger { border-inline-start-color: var(--erp-danger); }
.reports-module .afkar-report-kpi-card.warning { border-inline-start-color: var(--erp-warning); }
.reports-module .afkar-report-kpi-card.info { border-inline-start-color: var(--erp-info); }

.reports-module .afkar-report-kpi-icon {
    width: 44px;
    height: 44px;
    font-size: 25px;
    border-radius: 6px;
}

.reports-module .afkar-report-kpi-card.warning .afkar-report-kpi-icon {
    background: var(--erp-warning-soft, var(--erp-bg-surface-soft));
    color: var(--erp-warning);
}

.reports-module .afkar-report-kpi-info { min-width: 0; flex: 1; }
.reports-module .afkar-report-kpi-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}
.reports-module .afkar-report-kpi-value {
    font-size: clamp(24px, 2rem, 30px);
    line-height: 1.3;
    overflow-wrap: anywhere;
}
.reports-module .afkar-report-kpi-value bdi { unicode-bidi: isolate; }
.reports-module .afkar-report-kpi-subtitle {
    color: var(--erp-text-secondary);
    font-size: 13px;
}

.reports-module .report-header-clean h1,
.reports-module .inventory-report-shell > div:first-child h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--erp-text-primary);
}

.reports-module .report-filter-bar,
.reports-module .afkar-report-filter {
    background: var(--erp-bg-surface);
    border-color: var(--erp-border);
}

.reports-module .report-filter-bar .form-group label,
.reports-module .afkar-report-filter-item label {
    color: var(--erp-text-primary);
    font-size: 14px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
}

.reports-module .report-filter-bar .row > [class*="col-"] { min-width: 0; margin-block-end: 10px; }
.reports-module .report-filter-bar .select2-container { max-width: 100%; }

.reports-module .report-section-heading,
.reports-module .erp-table-card__title,
.reports-module .box-header > .box-title {
    color: var(--erp-text-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.reports-module .report-section-heading {
    border-inline-start: 3px solid var(--erp-primary);
    padding-inline-start: 10px;
    margin-block: 0 14px;
}

.reports-module .report-analysis-menu .dropdown-menu a {
    font-size: 14px;
    font-weight: 600;
    color: var(--erp-text-primary);
    padding: 9px 14px;
}
.reports-module .report-analysis-menu .dropdown-menu a:hover,
.reports-module .report-analysis-menu .dropdown-menu a:focus {
    color: var(--erp-primary);
    background: var(--erp-bg-hover);
}
.reports-module .report-analysis-menu .dropdown-menu a i { margin-inline-end: 8px; }

.reports-module .erp-table-card,
.reports-module .afkar-report-table-wrapper { min-width: 0; }
.reports-module .dataTables_wrapper { min-width: 0; }
.reports-module .dataTables_wrapper .dataTables_filter,
.reports-module .dataTables_wrapper .dataTables_length { margin-block: 8px; }
.reports-module .dataTables_wrapper .dataTables_processing {
    top: 50%;
    margin-top: 0;
    transform: translateY(-50%);
}

.reports-module .inventory-report-shell { min-width: 0; }
.reports-module .inventory-report-shell .chart-container {
    position: relative;
    width: min(100%, 560px);
    height: 300px;
    margin-inline: auto;
}
.reports-module .inventory-report-shell .chart-container canvas {
    max-width: 100%;
    max-height: 100%;
}
.reports-module #inventory-table { width: 100%; }
.reports-module #inventory-table tbody td { padding: 10px 12px; }
.reports-module #inventory-filters-form .form-group { margin-block-end: 10px; }
.reports-module .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.reports-module .status-badge.low-stock { color: var(--erp-danger); background: var(--erp-danger-soft, var(--erp-bg-surface-soft)); }
.reports-module .status-badge.slow-moving { color: var(--erp-warning); background: var(--erp-warning-soft, var(--erp-bg-surface-soft)); }
.reports-module .status-badge.normal { color: var(--erp-success); background: var(--erp-success-soft, var(--erp-bg-surface-soft)); }

@media (max-width: 991px) {
    .reports-module .report-kpi-grid,
    .reports-module .afkar-report-kpi-grid,
    .reports-module .report-kpi-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .reports-module .report-kpi-grid,
    .reports-module .afkar-report-kpi-grid,
    .reports-module .report-kpi-grid--three,
    .reports-module .report-kpi-grid--two { grid-template-columns: minmax(0, 1fr); }
    .reports-module .report-header-clean h1 { font-size: 22px; }
    .reports-module .report-filter-bar .row > [class*="col-"] { width: 100%; }
    .reports-module .report-export-actions { max-width: 100%; }
}

/* ==========================================================================
   AFKAR UNIFIED REPORT PRIMITIVES & COMPONENTS
   ========================================================================== */

/* Global Report Shell */
.financial-report-shell,
.inventory-report-shell {
    padding: 16px 20px 24px 20px !important;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Unified Clean Header */
.report-header-clean,
.op-center-header-clean {
    position: relative;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    background: var(--erp-bg-surface, #ffffff);
    border: 1px solid var(--erp-border, #e2e8f0);
    border-radius: 4px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(12, 48, 106, 0.04);
}

.report-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
}

.report-title-text h1,
.op-center-header-clean-title {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--erp-text-primary, #0f172a) !important;
    margin: 0 !important;
    line-height: 1.35 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-title-text p,
.op-center-header-clean-desc {
    font-size: 13px !important;
    color: var(--erp-text-secondary, #64748b) !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.5 !important;
}

.report-header-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.report-header-actions .btn-group,
.report-header-actions .report-export-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    width: auto !important;
}

/* Unified Export Dropdown Button */
.afkar-report-export-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 38px !important;
    padding: 0 16px !important;
    background: var(--erp-primary, #0C306A) !important;
    color: #ffffff !important;
    border: 1px solid var(--erp-primary, #0C306A) !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(12, 48, 106, 0.08) !important;
}

.afkar-report-export-btn:hover,
.afkar-report-export-btn:focus {
    background: var(--erp-blue-800, #13407F) !important;
    border-color: var(--erp-blue-800, #13407F) !important;
    color: #ffffff !important;
}

.afkar-report-print-btn {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0c306a !important;
    font-weight: 600 !important;
}

.afkar-report-print-btn:hover,
.afkar-report-print-btn:focus {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0c306a !important;
}

.afkar-export-caret {
    transition: transform 0.2s ease;
}

.open > .afkar-report-export-btn .afkar-export-caret {
    transform: rotate(180deg);
}

.report-export-actions {
    position: relative !important;
}

.afkar-report-export-menu {
    position: absolute !important;
    top: 100% !important;
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    border-radius: 8px !important;
    border: 1px solid var(--erp-border, #e2e8f0) !important;
    background: var(--erp-bg-surface, #ffffff) !important;
    box-shadow: 0 10px 25px rgba(12, 48, 106, 0.15) !important;
    padding: 6px !important;
    min-width: 180px !important;
    margin-top: 6px !important;
    z-index: 1260 !important;
}

.afkar-report-export-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 3px !important;
    color: var(--erp-text-primary, #1e293b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background-color 0.12s ease !important;
}

.afkar-report-export-menu > li > a:hover {
    background: var(--erp-bg-hover, #f1f5f9) !important;
    color: var(--erp-primary, #0C306A) !important;
}

/* Unified Filter Bar */
.report-filter-bar {
    background: var(--erp-bg-surface, #ffffff) !important;
    border: 1px solid var(--erp-border, #e2e8f0) !important;
    border-radius: 4px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(12, 48, 106, 0.04) !important;
    position: relative;
    z-index: 90;
}

.report-filter-bar label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--erp-text-secondary, #475569) !important;
    margin-bottom: 6px !important;
    text-transform: none !important;
    width: 100% !important;
}

html[dir="rtl"] .report-filter-bar label,
.rtl .report-filter-bar label {
    text-align: right !important;
    direction: rtl !important;
}

.report-filter-bar .form-control,
.report-filter-bar .select2-container--default .select2-selection--single {
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid var(--erp-border, #cbd5e1) !important;
    border-radius: 3px !important;
    background: var(--erp-bg-surface, #ffffff) !important;
    color: var(--erp-text-primary, #1e293b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    padding: 6px 12px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.report-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: var(--erp-text-primary, #1e293b) !important;
    font-weight: 600 !important;
}

.report-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
}

.report-filter-bar .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

[dir="rtl"] .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 8px !important;
    right: auto !important;
}

[dir="rtl"] .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 24px !important;
    padding-right: 4px !important;
    text-align: right !important;
}

.report-filter-bar .form-control:focus,
.report-filter-bar .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--erp-secondary, #2D7DD2) !important;
    box-shadow: 0 0 0 3px rgba(45, 125, 210, 0.12) !important;
    outline: none !important;
}

/* Date Range Button & Pickers */
.report-filter-bar .btn-date-filter,
#profit_loss_date_filter,
#trending_product_date_range,
#scr_date_filter,
#ir_purchase_date_filter,
#ir_sale_date_filter,
#product_pr_date_filter,
#stock_adjustment_date_filter {
    height: 38px !important;
    min-height: 38px !important;
    border: 1px solid var(--erp-border, #cbd5e1) !important;
    border-radius: 3px !important;
    background: var(--erp-bg-surface, #ffffff) !important;
    color: var(--erp-text-primary, #1e293b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
}
/* ==========================================================================
   UNIFIED REPORT BREADCRUMB & HEADER HELPERS
   ========================================================================== */
.report-breadcrumb-line {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: var(--erp-text-muted, #64748b) !important;
    margin-bottom: 4px !important;
    flex-wrap: wrap !important;
}

.report-breadcrumb-line a {
    color: var(--erp-text-secondary, #64748b) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}

.report-breadcrumb-line a:hover {
    color: var(--erp-primary, #0C306A) !important;
}

.report-header-icon-box {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    background: #EBF3FC !important;
    color: #0C306A !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.afkar-filter-apply-btn {
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    background: var(--erp-primary, #0C306A) !important;
    border-color: var(--erp-primary, #0C306A) !important;
    color: #ffffff !important;
    border-radius: 3px !important;
    width: 100% !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(12, 48, 106, 0.08) !important;
}

.afkar-filter-apply-btn:hover {
    background: var(--erp-blue-800, #13407F) !important;
    border-color: var(--erp-blue-800, #13407F) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   UNIFIED REPORT KPI STATS & GRIDS (CENTRALIZED)
   ========================================================================== */
.report-kpi-grid,
.today-kpi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.report-kpi-card,
.today-kpi-card {
    background: var(--erp-bg-surface, #ffffff) !important;
    border: 1px solid var(--erp-border, #e2e8f0) !important;
    border-radius: 6px !important;
    padding: 16px 18px !important;
    box-shadow: 0 1px 3px rgba(12, 48, 106, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.report-kpi-card::before,
.today-kpi-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 3.5px !important;
    height: 100% !important;
    background: var(--erp-primary, #0C306A) !important;
}

[dir="ltr"] .report-kpi-card::before,
[dir="ltr"] .today-kpi-card::before {
    right: auto !important;
    left: 0 !important;
}

.report-kpi-card.count::before,
.today-kpi-card.count::before { background: var(--erp-secondary, #2D7DD2) !important; }

.report-kpi-card.sales::before,
.today-kpi-card.sales::before { background: var(--erp-primary, #0C306A) !important; }

.report-kpi-card.paid::before,
.today-kpi-card.paid::before { background: var(--erp-success, #10B981) !important; }

.report-kpi-card.due::before,
.today-kpi-card.due::before { background: var(--erp-danger, #EF4444) !important; }

.report-kpi-card:hover,
.today-kpi-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(12, 48, 106, 0.08) !important;
}

.report-kpi-header,
.today-kpi-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
    gap: 8px !important;
}

.report-kpi-label,
.today-kpi-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--erp-text-secondary, #64748b) !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.report-kpi-icon-badge,
.today-kpi-icon-badge {
    width: 34px !important;
    height: 34px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.report-kpi-card.count .report-kpi-icon-badge,
.today-kpi-card.count .today-kpi-icon-badge { background: #EBF3FC !important; color: #0C306A !important; }

.report-kpi-card.sales .report-kpi-icon-badge,
.today-kpi-card.sales .today-kpi-icon-badge { background: #EBF3FC !important; color: #2D7DD2 !important; }

.report-kpi-card.paid .report-kpi-icon-badge,
.today-kpi-card.paid .today-kpi-icon-badge { background: #ECFDF5 !important; color: #065F46 !important; }

.report-kpi-card.due .report-kpi-icon-badge,
.today-kpi-card.due .today-kpi-icon-badge { background: #FEF2F2 !important; color: #991B1B !important; }

.report-kpi-value,
.today-kpi-value {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--erp-text-primary, #0f172a) !important;
    margin: 0 !important;
    direction: ltr !important;
    unicode-bidi: isolate;
    text-align: start !important;
    line-height: 1.2 !important;
}

/* ==========================================================================
   UNIFIED REPORT CHARTS (CENTRALIZED)
   ========================================================================== */
.report-charts-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}

.report-chart-card {
    background: var(--erp-bg-surface, #ffffff) !important;
    border: 1px solid var(--erp-border, #e2e8f0) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    box-shadow: 0 1px 3px rgba(12, 48, 106, 0.04) !important;
    overflow: hidden !important;
}

.report-chart-card__header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid var(--erp-border, #e2e8f0) !important;
    padding-bottom: 10px !important;
}

.report-chart-card__title {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--erp-primary, #0C306A) !important;
    line-height: 1.3 !important;
}

.chart-container {
    position: relative !important;
    height: 280px !important;
    width: 100% !important;
}

/* Unified Table Card */
.erp-table-card {
    background: var(--erp-bg-surface, #ffffff) !important;
    border: 1px solid var(--erp-border, #e2e8f0) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(12, 48, 106, 0.05), 0 2px 4px -1px rgba(12, 48, 106, 0.03) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    transition: box-shadow 0.2s ease-in-out !important;
}
.erp-table-card:hover {
    box-shadow: 0 10px 15px -3px rgba(12, 48, 106, 0.08), 0 4px 6px -2px rgba(12, 48, 106, 0.04) !important;
}

.erp-table-card__header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 20px 24px !important;
    border-bottom: 1px solid var(--erp-border, #f1f5f9) !important;
    background: var(--erp-bg-surface, #ffffff) !important;
}

.erp-table-card__title {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--erp-text-primary, #0f172a) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.erp-table-card__body {
    padding: 20px 24px !important;
}

/* Tables inside reports - Official Afkar Brand Identity Header */
.financial-report-shell table thead,
.financial-report-shell table.dataTable thead,
.inventory-report-shell table thead,
.inventory-report-shell table.dataTable thead,
.erp-table-card table thead,
.erp-table-card table.dataTable thead,
.financial-report-shell .dataTables_scrollHead thead,
.inventory-report-shell .dataTables_scrollHead thead,
.erp-table-card .dataTables_scrollHead thead,
.dataTables_scrollHead table thead {
    background-color: #0C306A !important;
    background: #0C306A !important;
}

.financial-report-shell table thead th,
.financial-report-shell table.dataTable thead th,
.inventory-report-shell table thead th,
.inventory-report-shell table.dataTable thead th,
.erp-table-card table thead th,
.erp-table-card table.dataTable thead th,
.financial-report-shell .dataTables_scrollHead thead th,
.inventory-report-shell .dataTables_scrollHead thead th,
.erp-table-card .dataTables_scrollHead thead th,
.financial-report-shell .dataTables_scrollHeadInner table thead th,
.inventory-report-shell .dataTables_scrollHeadInner table thead th,
.erp-table-card .dataTables_scrollHeadInner table thead th,
.dataTables_scrollHead table thead th {
    background-color: #f8fafc !important; /* Soft Slate 50 */
    background: #f8fafc !important;
    color: #334155 !important; /* Slate 700 */
    -webkit-text-fill-color: #334155 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: capitalize !important;
    border: 1px solid #e2e8f0 !important; /* Add subtle vertical borders back for organization */
    border-bottom: 2px solid #cbd5e1 !important; /* Stronger bottom border */
    padding: 12px 14px !important;
    padding-inline-end: 24px !important; /* Space for sorting arrows */
    white-space: nowrap !important;
    vertical-align: middle !important;
    letter-spacing: 0.3px;
    text-align: right !important; /* Force text alignment for better organization */
}

.financial-report-shell table thead th :is(a, span, div, strong, b, p, label),
.inventory-report-shell table thead th :is(a, span, div, strong, b, p, label),
.erp-table-card table thead th :is(a, span, div, strong, b, p, label),
.financial-report-shell .dataTables_scrollHead thead th :is(a, span, div, strong, b, p, label),
.inventory-report-shell .dataTables_scrollHead thead th :is(a, span, div, strong, b, p, label),
.erp-table-card .dataTables_scrollHead thead th :is(a, span, div, strong, b, p, label),
.dataTables_scrollHead thead th :is(a, span, div, strong, b, p, label) {
    color: #334155 !important;
    -webkit-text-fill-color: #334155 !important;
}

.financial-report-shell table thead th small,
.inventory-report-shell table thead th small,
.erp-table-card table thead th small,
.dataTables_scrollHead thead th small {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b !important;
    font-weight: 500;
}

.financial-report-shell table.dataTable tbody td,
.inventory-report-shell table.dataTable tbody td,
.erp-table-card table tbody td {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    color: var(--erp-text-primary, #334155) !important;
    border: 1px solid var(--erp-border, #e2e8f0) !important; /* Subtle grid lines */
    vertical-align: middle !important;
}
/* Ensure the last row has no bottom border if desired, or soften striped rows */
.erp-table-card table.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc !important; /* Extremely subtle striping */
}

.financial-report-shell table tfoot tr.footer-total,
.inventory-report-shell table tfoot tr.footer-total {
    background: var(--erp-bg-surface-soft, #f1f5f9) !important;
    font-weight: 800 !important;
    color: var(--erp-text-primary, #0f172a) !important;
    border-top: 2px solid var(--erp-border, #cbd5e1) !important;
}

/* Dark Mode Overrides */
html.dark-mode .report-header-clean,
html.dark-mode .op-center-header-clean,
html.dark-mode .report-filter-bar,
html.dark-mode .erp-table-card,
html.dark-mode .erp-table-card__header {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-mode .report-title-text h1,
html.dark-mode .op-center-header-clean-title,
html.dark-mode .erp-table-card__title {
    color: #f8fafc !important;
}

html.dark-mode .report-title-text p,
html.dark-mode .op-center-header-clean-desc,
html.dark-mode .report-filter-bar label {
    color: #94a3b8 !important;
}

html.dark-mode .report-filter-bar .form-control,
html.dark-mode .report-filter-bar .select2-container--default .select2-selection--single {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f8fafc !important;
}

html.dark-mode .financial-report-shell table thead,
html.dark-mode .financial-report-shell table.dataTable thead,
html.dark-mode .inventory-report-shell table thead,
html.dark-mode .inventory-report-shell table.dataTable thead,
html.dark-mode .erp-table-card table thead,
html.dark-mode .erp-table-card table.dataTable thead,
html.dark-mode .financial-report-shell .dataTables_scrollHead thead,
html.dark-mode .inventory-report-shell .dataTables_scrollHead thead,
html.dark-mode .erp-table-card .dataTables_scrollHead thead {
    background-color: #0f172a !important;
    background: #0f172a !important;
}

html.dark-mode .financial-report-shell table thead th,
html.dark-mode .financial-report-shell table.dataTable thead th,
html.dark-mode .inventory-report-shell table thead th,
html.dark-mode .inventory-report-shell table.dataTable thead th,
html.dark-mode .erp-table-card table thead th,
html.dark-mode .erp-table-card table.dataTable thead th,
html.dark-mode .financial-report-shell .dataTables_scrollHead thead th,
html.dark-mode .inventory-report-shell .dataTables_scrollHead thead th,
html.dark-mode .erp-table-card .dataTables_scrollHead thead th,
html.dark-mode .financial-report-shell .dataTables_scrollHeadInner table thead th,
html.dark-mode .inventory-report-shell .dataTables_scrollHeadInner table thead th,
html.dark-mode .erp-table-card .dataTables_scrollHeadInner table thead th {
    background-color: #0f172a !important;
    background: #0f172a !important;
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
    border-color: #1e293b !important;
}

html.dark-mode .financial-report-shell table thead th :is(a, span, div, strong, b, p, label),
html.dark-mode .inventory-report-shell table thead th :is(a, span, div, strong, b, p, label),
html.dark-mode .erp-table-card table thead th :is(a, span, div, strong, b, p, label) {
    color: #f8fafc !important;
    -webkit-text-fill-color: #f8fafc !important;
}

html.dark-mode .financial-report-shell table.dataTable tbody td,
html.dark-mode .inventory-report-shell table.dataTable tbody td,
html.dark-mode .erp-table-card table tbody td {
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

html.dark-mode .financial-report-shell table tfoot tr.footer-total,
html.dark-mode .inventory-report-shell table tfoot tr.footer-total {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

@media screen {
    #afkar-dedicated-print-document,
    .afkar-dedicated-print-document {
        display: none !important;
    }
}

/* ==========================================================================
   GLOBAL PRINT STYLES FOR FINANCIAL & OPERATIONAL REPORTS
   ========================================================================== */
@media print {
    @page {
        margin: 8mm 8mm 10mm 8mm;
        size: auto;
    }

    /* Suppress scrollbars completely on all elements in print */
    *, *::before, *::after {
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        background: transparent !important;
    }

    .screen-view-container,
    .no-print,
    .main-header,
    .main-sidebar,
    .sidebar,
    .control-sidebar,
    .content-header,
    .report-header-clean,
    .report-filter-bar,
    .afkar-report-filter,
    .report-mode-select,
    .report-header-actions,
    .afkar-report-export-btn,
    .report-export-actions,
    .dataTables_filter,
    .dataTables_length,
    .dataTables_paginate,
    .dataTables_info,
    .dt-buttons,
    .btn,
    .btn-group,
    .box-header,
    .box-tools,
    .form-group,
    .input-group,
    .select2,
    .select2-container,
    form,
    input,
    select,
    button,
    footer.main-footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .print-only-block,
    #afkar-dedicated-print-document,
    .afkar-dedicated-print-document {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        background: #ffffff !important;
    }

    #afkar-dedicated-print-document *,
    .afkar-dedicated-print-document * {
        visibility: visible !important;
    }

    html, body,
    body.eh-app-layout,
    .thetop,
    .thetop > main,
    main,
    #scrollable-container,
    #scrollable-container > div,
    .tw-w-full,
    .reports-module,
    .wrapper,
    .content-wrapper,
    .financial-report-shell,
    section.content {
        background: #ffffff !important;
        color: #0f172a !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        position: static !important;
        display: block !important;
        float: none !important;
        isolation: auto !important;
        transform: none !important;
        contain: none !important;
        box-shadow: none !important;
        border: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .erp-table-card,
    .afkar-report-table-wrapper {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .table-responsive,
    .afkar-report-table-scroll {
        overflow: visible !important;
        display: block !important;
        width: 100% !important;
        max-height: none !important;
        border: none !important;
    }

    .chart-container,
    #performance-chart-container,
    .report-visual-chart-box {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        max-height: 220px !important;
        margin: 8px 0 !important;
    }

    canvas {
        max-height: 200px !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    #kpi-cards-row,
    .report-kpi-grid,
    .cash-banks-kpi-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        margin-bottom: 12px !important;
    }

    .financial-card,
    .kpi-card,
    .report-kpi-card,
    .cash-banks-kpi-card {
        flex: 1 1 0 !important;
        width: auto !important;
        border: 1px solid #cbd5e1 !important;
        border-top: 3px solid #0c306a !important;
        background: #ffffff !important;
        box-shadow: none !important;
        padding: 8px 10px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    table.dataTable,
    table.table,
    table.report-table,
    table.afkar-report-table {
        width: 100% !important;
        border-collapse: collapse !important;
        border: 1px solid #cbd5e1 !important;
        font-size: 8.5px !important;
        page-break-inside: auto;
    }

    table.dataTable tr,
    table.table tr,
    table.report-table tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    table.dataTable thead th,
    table.table thead th,
    table.report-table thead th {
        background-color: #0c306a !important;
        color: #ffffff !important;
        font-size: 8.5px !important;
        font-weight: 700 !important;
        padding: 6px 7px !important;
        border: 1px solid #0c306a !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    table.dataTable tbody td,
    table.table tbody td,
    table.report-table tbody td {
        padding: 5px 6px !important;
        font-size: 8px !important;
        border: 1px solid #cbd5e1 !important;
        color: #1e293b !important;
    }

    table.dataTable tr:nth-child(even) td,
    table.table tr:nth-child(even) td {
        background-color: #f8fafc !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td,
    table.table tfoot th,
    table.table tfoot td {
        background-color: #f1f5f9 !important;
        color: #0c306a !important;
        font-weight: 800 !important;
        border-top: 2px solid #0c306a !important;
        border-bottom: 3px double #0c306a !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ==========================================================
   Clean & Unified DataTables Pagination Design
========================================================== */
.dataTables_wrapper .pagination,
.dataTables_wrapper .dataTables_paginate {
    margin: 20px 0 10px 0 !important;
    display: flex !important;
    gap: 6px !important;
    justify-content: flex-end;
    align-items: center;
}

/* Strip outer li styles to prevent double borders in Bootstrap DataTables */
html body.eh-app-layout .dataTables_wrapper .pagination > li,
.dataTables_wrapper .pagination > li {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Beautiful modern buttons */
html body.eh-app-layout :is(.pagination > li > a, .pagination > li > span, .dataTables_wrapper .paginate_button),
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span,
.dataTables_wrapper .dataTables_paginate > .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important; /* Subtle gray border */
    background: #ffffff !important;
    color: #475569 !important; /* Slate text */
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

/* Hover state */
html body.eh-app-layout :is(.pagination > li > a, .pagination > li > span, .dataTables_wrapper .paginate_button):is(:hover, :focus),
.dataTables_wrapper .pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate > .paginate_button:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Active State */
html body.eh-app-layout :is(.pagination > li.active > a, .pagination > li.active > span, .dataTables_wrapper .paginate_button.current),
.dataTables_wrapper .pagination > li.active > a,
.dataTables_wrapper .pagination > li.active > span,
.dataTables_wrapper .dataTables_paginate > .paginate_button.current {
    background: #0C306A !important; /* Afkar primary */
    border-color: #0C306A !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(12, 48, 106, 0.2) !important;
}

/* Disabled state */
html body.eh-app-layout :is(.pagination > li.disabled > a, .pagination > li.disabled > span, .dataTables_wrapper .paginate_button.disabled),
.dataTables_wrapper .pagination > li.disabled > a,
.dataTables_wrapper .pagination > li.disabled > span,
.dataTables_wrapper .dataTables_paginate > .paginate_button.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}

/* ==========================================================
   Clean & Elegant Footer & Bottom Section
========================================================== */
table tfoot th,
table tfoot td,
.dataTables_scrollFoot table tfoot th,
.dataTables_scrollFoot table tfoot td,
table tfoot tr.footer-total td,
table tfoot tr.footer-total th {
    background: #f8fafc !important; /* Soft slate background */
    color: #1e293b !important; /* Dark slate text */
    font-weight: 700 !important;
    font-size: 13.5px !important;
    border: 1px solid #e2e8f0 !important; /* Match body subtle grid */
    border-top: 2px solid #94a3b8 !important; /* Stronger top border to separate from body */
    padding: 12px 14px !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Info text (e.g. Showing 1 to 10 of 100 entries) */
.dataTables_info {
    padding-top: 26px !important;
    color: #64748b !important; /* Slate 500 */
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

/* Unified wrapper for bottom controls */
.dataTables_wrapper > .row:last-child {
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 15px !important;
    padding-top: 5px !important;
}

/* ==========================================================
   Elegant MacOS-style Scrollbars for Tables
========================================================== */
.dataTables_scrollBody::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 8px !important;
    width: 8px !important;
}
.dataTables_scrollBody::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #f1f5f9 !important; /* Very light slate */
    border-radius: 4px !important;
    margin: 0 4px !important; /* Prevent it from touching edges completely */
}
.dataTables_scrollBody::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important; /* Slate 300 */
    border-radius: 4px !important;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important; /* Slate 400 on hover */
}

/* ==========================================================
/* ==========================================================
   Fix Double Scrollbar & Bottom Controls Layout
========================================================== */
/* Fix outer table-responsive from showing a second scrollbar */
.table-responsive {
    overflow-x: visible !important;
    overflow-y: visible !important;
    border: none !important;
}

/* Force Flexbox layout for the bottom row (if wrapped in .row) */
.dataTables_wrapper > .row:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    width: 100% !important;
}

/* Reset col classes since we are using flexbox */
.dataTables_wrapper > .row:last-child > [class*="col-"] {
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Make sure pagination list is centered vertically */
.dataTables_paginate ul.pagination {
    margin: 0 !important;
    align-items: center !important;
}

/* ==========================================================
   Fallback if bottom controls are NOT wrapped in .row 
   (direct children of .dataTables_wrapper)
========================================================== */
.dataTables_wrapper::after {
    content: "";
    display: table;
    clear: both;
}
.dataTables_wrapper > .dataTables_info {
    float: right !important; /* Right side in RTL */
    clear: both !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e2e8f0 !important;
    width: 50% !important;
    text-align: right !important;
}
.dataTables_wrapper > .dataTables_paginate {
    float: left !important; /* Left side in RTL */
    margin-top: 15px !important;
    padding-top: 15px !important;
    border-top: 1px solid #e2e8f0 !important;
    width: 50% !important;
    text-align: left !important;
}
.dataTables_wrapper > .dataTables_paginate ul.pagination {
    justify-content: flex-end !important;
}

/* ==========================================================================
   MOBILE COMPACT TABLES OVERRIDE FOR ERP REPORT & TABLE CARDS
   ========================================================================== */
@media (max-width: 767.98px) {
    .financial-report-shell table thead th,
    .financial-report-shell table.dataTable thead th,
    .inventory-report-shell table thead th,
    .inventory-report-shell table.dataTable thead th,
    .erp-table-card table thead th,
    .erp-table-card table.dataTable thead th,
    .financial-report-shell .dataTables_scrollHead thead th,
    .inventory-report-shell .dataTables_scrollHead thead th,
    .erp-table-card .dataTables_scrollHead thead th,
    .financial-report-shell .dataTables_scrollHeadInner table thead th,
    .inventory-report-shell .dataTables_scrollHeadInner table thead th,
    .erp-table-card .dataTables_scrollHeadInner table thead th,
    .dataTables_scrollHead table thead th {
        padding: 5px 6px !important;
        font-size: 10.5px !important;
        line-height: 1.2 !important;
    }

    .financial-report-shell table.dataTable tbody td,
    .inventory-report-shell table.dataTable tbody td,
    .erp-table-card table tbody td,
    .erp-table-card table.dataTable tbody td {
        padding: 4px 6px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
}

/* ==========================================================================
   AFKAR ERP - MOBILE DATEPICKER & DATERANGEPICKER RESPONSIVE CONTAINMENT
   Fixes date filter popups extending off-screen on mobile devices
   ========================================================================== */
@media (max-width: 767.98px) {
    /* 1. Bootstrap Datepicker Popup (.datepicker-dropdown in Trial Balance, Balance Sheet, etc.) */
    .datepicker.datepicker-dropdown,
    div.datepicker.dropdown-menu,
    .datepicker.dropdown-menu {
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        width: min(320px, calc(100vw - 20px)) !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
        padding: 10px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 12px 30px rgba(12, 48, 106, 0.18) !important;
        z-index: 99999999 !important;
    }

    .datepicker-dropdown:before,
    .datepicker-dropdown:after {
        display: none !important;
    }

    .datepicker.datepicker-dropdown .datepicker-days,
    .datepicker.datepicker-dropdown .datepicker-months,
    .datepicker.datepicker-dropdown .datepicker-years,
    .datepicker.datepicker-dropdown .datepicker-decades,
    .datepicker.datepicker-dropdown .datepicker-centuries {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .datepicker.datepicker-dropdown table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        box-sizing: border-box !important;
        margin-bottom: 0 !important;
    }

    .datepicker.datepicker-dropdown table tr th {
        font-size: 12px !important;
        font-weight: 700 !important;
        color: #475569 !important;
        padding: 4px 1px !important;
        text-align: center !important;
        height: 32px !important;
    }

    .datepicker.datepicker-dropdown table tr th.datepicker-switch {
        font-size: 13px !important;
        color: #0C306A !important;
    }

    .datepicker.datepicker-dropdown table tr td {
        width: auto !important;
        height: 34px !important;
        padding: 2px 1px !important;
        font-size: 13px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        border-radius: 6px !important;
    }

    .datepicker.datepicker-dropdown table tr td.active,
    .datepicker.datepicker-dropdown table tr td.active:hover {
        background: #0C306A !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* 2. Bootstrap Daterangepicker Popup (.daterangepicker) */
    .daterangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
        max-height: 88vh !important;
        box-sizing: border-box !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 12px !important;
        border-radius: 10px !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 25px 60px rgba(12, 48, 106, 0.35) !important;
        z-index: 99999999 !important;
        background: #ffffff !important;
    }

    .daterangepicker:before,
    .daterangepicker:after {
        display: none !important;
    }

    .daterangepicker .drp-calendar {
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
        padding: 4px !important;
        box-sizing: border-box !important;
    }

    .daterangepicker .drp-calendar.left,
    .daterangepicker .drp-calendar.right {
        clear: both !important;
        float: none !important;
        width: 100% !important;
    }

    .daterangepicker .drp-calendar .calendar-table {
        width: 100% !important;
        max-width: 100% !important;
        background: transparent !important;
        border: 0 !important;
    }

    .daterangepicker .drp-calendar .calendar-table table {
        width: 100% !important;
        table-layout: fixed !important;
        border-collapse: separate !important;
    }

    .daterangepicker .drp-calendar .calendar-table table tr td,
    .daterangepicker .drp-calendar .calendar-table table tr th {
        padding: 2px 1px !important;
        font-size: 12px !important;
        width: auto !important;
        height: 30px !important;
        text-align: center !important;
    }

    .daterangepicker .ranges {
        float: none !important;
        width: 100% !important;
        margin: 0 0 10px 0 !important;
    }

    .daterangepicker .ranges ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .daterangepicker .ranges li {
        text-align: right !important;
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        background: #f8fafc !important;
        color: #334155 !important;
        border: 1px solid #e2e8f0 !important;
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
    }

    html[dir="ltr"] .daterangepicker .ranges li {
        text-align: left !important;
    }

    .daterangepicker .ranges li:hover {
        background: #f1f5f9 !important;
        color: #0C306A !important;
    }

    .daterangepicker .ranges li.active {
        background: #0C306A !important;
        color: #ffffff !important;
        border-color: #0C306A !important;
    }

    .daterangepicker .drp-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 0 0 0 !important;
        width: 100% !important;
        border-top: 1px solid #e2e8f0 !important;
        box-sizing: border-box !important;
    }

    .daterangepicker .drp-buttons .drp-selected {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 4px !important;
        font-size: 11px !important;
        color: #64748b !important;
    }

    .daterangepicker .drp-buttons .btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 6px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
    }

    .daterangepicker .drp-buttons .applyBtn {
        background: #0C306A !important;
        border-color: #0C306A !important;
        color: #ffffff !important;
    }

    .daterangepicker .drp-buttons .cancelBtn {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #475569 !important;
    }

    /* 3. Full Edge-to-Edge Mobile View for Report Tables & Cards */
    body.eh-app-layout:is(:has(.reports-module), :has(.financial-report-shell), :has(.inventory-report-shell)) .content-wrapper,
    body.eh-app-layout:is(:has(.reports-module), :has(.financial-report-shell), :has(.inventory-report-shell)) .thetop > main,
    body.eh-app-layout:is(:has(.reports-module), :has(.financial-report-shell), :has(.inventory-report-shell)) section.content,
    body.eh-app-layout:is(:has(.reports-module), :has(.financial-report-shell), :has(.inventory-report-shell)) .content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .financial-report-shell,
    .inventory-report-shell,
    .reports-module {
        padding: 6px 2px 14px 2px !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .financial-report-shell .screen-view-container,
    .inventory-report-shell .screen-view-container {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .financial-report-shell .row,
    .inventory-report-shell .row,
    .reports-module .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .financial-report-shell [class*="col-"],
    .inventory-report-shell [class*="col-"],
    .reports-module [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .erp-table-card,
    .reports-module .erp-table-card,
    .box.box-solid,
    .box.box-primary {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 12px !important;
        border-radius: 4px !important;
        border-left: 1px solid var(--erp-border, #e2e8f0) !important;
        border-right: 1px solid var(--erp-border, #e2e8f0) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .erp-table-card__header {
        padding: 10px 10px !important;
        border-radius: 4px 4px 0 0 !important;
    }

    .erp-table-card__body,
    .box-body {
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .erp-table-card__body .table-responsive,
    .box-body .table-responsive,
    .table-responsive {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .erp-table-card table.dataTable,
    .erp-table-card table.table,
    .table-responsive > table {
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .erp-dt-tools-outside,
    .tab-pane .erp-dt-tools-outside,
    .pjt-timelog-view-container .erp-dt-tools-outside,
    .pjt-timelog-table-card .erp-dt-tools-outside,
    .erp-table-card .erp-dt-tools-outside,
    .erp-table-card__body .erp-dt-tools-outside {
        margin: 0 0 8px 0 !important;
        padding: 6px 8px !important;
        width: 100% !important;
        border-radius: 4px !important;
        box-sizing: border-box !important;
    }

    .report-header-clean,
    .op-center-header-clean,
    .report-filter-bar {
        padding: 10px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
        border-radius: 4px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Mobile Header Layout */
    .report-title-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .report-title-text {
        width: 100% !important;
    }

    .report-title-text h1,
    .op-center-header-clean-title {
        font-size: 17px !important;
    }

    .report-header-actions {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
    }

    .report-header-actions .btn-group,
    .report-header-actions .report-export-actions {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
        width: auto !important;
        flex-wrap: nowrap !important;
    }

    .report-header-actions .actions-wrap {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .report-header-actions .btn,
    .report-header-actions .afkar-report-export-btn,
    .report-header-actions .btn-group > .afkar-report-export-btn,
    .report-header-actions .btn-group > .btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 36px !important;
        height: 36px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Mobile Filter Bar & Form */
    .report-filter-bar {
        padding: 12px 14px !important;
    }

    .report-filter-bar .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .report-filter-bar [class*="col-"],
    .report-filter-bar .filter-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .report-filter-bar [class*="col-"]:last-child,
    .report-filter-bar .filter-col:last-child {
        margin-bottom: 0 !important;
    }

    .report-filter-bar label {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        color: #334155 !important;
    }

    .report-filter-bar .form-group {
        margin-bottom: 0 !important;
        width: 100% !important;
    }

    .report-filter-bar .select2-container,
    .report-filter-bar .select2-container--default {
        width: 100% !important;
        display: block !important;
    }

    .report-filter-bar .select2-container--default .select2-selection--single {
        height: 42px !important;
        min-height: 42px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        background-color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 12px !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    }

    .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
        font-size: 13.5px !important;
        color: #1e293b !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
        top: 20px !important;
        width: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    [dir="rtl"] .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
        left: 8px !important;
        right: auto !important;
    }

    [dir="rtl"] .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
        text-align: right !important;
        padding-left: 28px !important;
        padding-right: 0 !important;
    }

    [dir="ltr"] .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow {
        right: 8px !important;
        left: auto !important;
    }

    [dir="ltr"] .report-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered {
        text-align: left !important;
        padding-right: 28px !important;
        padding-left: 0 !important;
    }

    .report-filter-bar .input-group,
    .report-filter-bar .afkar-input-group {
        width: 100% !important;
        display: flex !important;
        align-items: stretch !important;
    }

    .report-filter-bar .input-group-addon,
    .report-filter-bar .afkar-addon {
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        flex-shrink: 0 !important;
        color: #64748b !important;
    }

    [dir="rtl"] .report-filter-bar .input-group-addon,
    [dir="rtl"] .report-filter-bar .afkar-addon {
        border-radius: 0 6px 6px 0 !important;
        border-left: none !important;
    }

    [dir="rtl"] .report-filter-bar .input-group input.form-control,
    [dir="rtl"] .report-filter-bar .afkar-input-group input.form-control {
        border-radius: 6px 0 0 6px !important;
        border-right: 1px solid #cbd5e1 !important;
    }

    [dir="ltr"] .report-filter-bar .input-group-addon,
    [dir="ltr"] .report-filter-bar .afkar-addon {
        border-radius: 6px 0 0 6px !important;
        border-right: none !important;
    }

    [dir="ltr"] .report-filter-bar .input-group input.form-control,
    [dir="ltr"] .report-filter-bar .afkar-input-group input.form-control {
        border-radius: 0 6px 6px 0 !important;
        border-left: 1px solid #cbd5e1 !important;
    }

    .report-filter-bar .input-group input.form-control,
    .report-filter-bar input.form-control {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 13.5px !important;
        color: #1e293b !important;
        background: #ffffff !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important;
    }

    .report-filter-bar .btn-col {
        width: 100% !important;
        margin-top: 4px !important;
    }

    .report-filter-bar .afkar-filter-apply-btn,
    .report-filter-bar #apply_filters,
    .report-filter-bar #apply_invoice_filters {
        margin-top: 4px !important;
        width: 100% !important;
        height: 42px !important;
        font-size: 14px !important;
        font-weight: 700 !important;
        border-radius: 6px !important;
        background-color: #0C306A !important;
        border-color: #0C306A !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* Mobile Select2 Dropdown Menus */
    .select2-dropdown {
        border: 1px solid #cbd5e1 !important;
        border-radius: 8px !important;
        box-shadow: 0 14px 30px rgba(12, 48, 106, 0.16) !important;
        background: #ffffff !important;
        z-index: 9999999 !important;
        overflow: hidden !important;
        max-width: 100vw !important;
    }

    .select2-search--dropdown {
        padding: 8px 10px !important;
        background: #f8fafc !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    .select2-search--dropdown .select2-search__field {
        height: 38px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        font-size: 13.5px !important;
        background: #ffffff !important;
        width: 100% !important;
        box-sizing: border-box !important;
        outline: none !important;
    }

    .select2-results__options {
        max-height: 240px !important;
        padding: 4px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .select2-results__option {
        padding: 10px 14px !important;
        font-size: 13.5px !important;
        line-height: 1.4 !important;
        border-radius: 4px !important;
        margin-bottom: 2px !important;
        color: #334155 !important;
        cursor: pointer !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        transition: background-color 0.15s ease !important;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #0C306A !important;
        color: #ffffff !important;
    }

    .select2-container--default .select2-results__option[aria-selected="true"] {
        background-color: #e0f2fe !important;
        color: #0C306A !important;
        font-weight: 600 !important;
    }

    /* Mobile KPI Grid & Cards - 2 compact columns */
    .report-kpi-grid,
    .today-kpi-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .report-kpi-card,
    .today-kpi-card {
        padding: 10px 12px !important;
        border-radius: 4px !important;
    }

    .report-kpi-header,
    .today-kpi-header {
        margin-bottom: 6px !important;
    }

    .report-kpi-label,
    .today-kpi-label {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }

    .report-kpi-icon-badge,
    .today-kpi-icon-badge {
        width: 28px !important;
        height: 28px !important;
        border-radius: 4px !important;
    }

    .report-kpi-icon-badge svg,
    .today-kpi-icon-badge svg {
        width: 14px !important;
        height: 14px !important;
    }

    .report-kpi-value,
    .today-kpi-value {
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    /* Mobile Charts - 1 column stacked */
    .report-charts-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }

    .report-chart-card {
        padding: 12px !important;
        border-radius: 6px !important;
    }

    .report-chart-card__header {
        margin-bottom: 8px !important;
        padding-bottom: 8px !important;
    }

    .report-chart-card__title {
        font-size: 13px !important;
    }

    .chart-container {
        height: 230px !important;
    }
}

@media (max-width: 480px) {
    .report-kpi-value,
    .today-kpi-value {
        font-size: 15px !important;
    }
}

/* ==========================================================================
   AFKAR ERP - UNIFIED SINGLE DATE PICKER POPUP STYLES
   Ensures single datepickers appear clean, never scrambled, and never flicker
   ========================================================================== */
.daterangepicker.single .ranges {
    display: none !important;
}

.daterangepicker.single {
    width: auto !important;
    max-width: 320px !important;
    min-width: 270px !important;
    padding: 8px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(12, 48, 106, 0.18) !important;
    z-index: 99999999 !important;
}

.daterangepicker.single .drp-calendar {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2px !important;
}

.daterangepicker.single .drp-calendar.left,
.daterangepicker.single .drp-calendar.right {
    float: none !important;
    clear: both !important;
}

.daterangepicker.single .drp-buttons {
    display: none !important;
}

/* Bootstrap Datepicker Dropdown (.datepicker-dropdown) */
.datepicker.datepicker-dropdown {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(12, 48, 106, 0.18) !important;
    z-index: 99999999 !important;
    padding: 8px !important;
    background: #ffffff !important;
}

.datepicker.datepicker-dropdown table tr th {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    padding: 4px !important;
}

.datepicker.datepicker-dropdown table tr th.datepicker-switch {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0C306A !important;
    cursor: pointer !important;
}

.datepicker.datepicker-dropdown table tr td {
    border-radius: 6px !important;
    padding: 3px !important;
    font-size: 12.5px !important;
}

.datepicker.datepicker-dropdown table tr td.active,
.datepicker.datepicker-dropdown table tr td.active:hover {
    background: #0C306A !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.datepicker.datepicker-dropdown table tr td.today {
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
}

/* ==========================================================================
   AFKAR ERP - UNIFIED GLOBAL DARK MODE FOR SELECT2 & DATEPICKERS
   ========================================================================== */
html.dark-mode .select2-dropdown,
body.dark-mode .select2-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .select2-search--dropdown,
body.dark-mode .select2-search--dropdown {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
}

html.dark-mode .select2-search--dropdown .select2-search__field,
body.dark-mode .select2-search--dropdown .select2-search__field {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

html.dark-mode .select2-results__option,
body.dark-mode .select2-results__option {
    color: #cbd5e1 !important;
}

html.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #2D7DD2 !important;
    color: #ffffff !important;
}

html.dark-mode .select2-container--default .select2-results__option[aria-selected="true"],
body.dark-mode .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #334155 !important;
    color: #60a5fa !important;
}

html.dark-mode .daterangepicker,
body.dark-mode .daterangepicker {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important;
}

html.dark-mode .daterangepicker .ranges li,
body.dark-mode .daterangepicker .ranges li {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark-mode .daterangepicker .ranges li.active,
body.dark-mode .daterangepicker .ranges li.active {
    background: #2D7DD2 !important;
    border-color: #2D7DD2 !important;
    color: #ffffff !important;
}

html.dark-mode .daterangepicker .calendar-table,
body.dark-mode .daterangepicker .calendar-table {
    background: #1e293b !important;
}

html.dark-mode .daterangepicker td.off,
body.dark-mode .daterangepicker td.off {
    color: #475569 !important;
}

html.dark-mode .daterangepicker td.in-range,
body.dark-mode .daterangepicker td.in-range {
    background-color: #1e3a8a !important;
    color: #93c5fd !important;
}

html.dark-mode .daterangepicker td.active,
body.dark-mode .daterangepicker td.active {
    background-color: #2D7DD2 !important;
    color: #ffffff !important;
}

html.dark-mode .daterangepicker .drp-buttons,
body.dark-mode .daterangepicker .drp-buttons {
    border-top-color: #334155 !important;
}

html.dark-mode .daterangepicker .cancelBtn,
body.dark-mode .daterangepicker .cancelBtn {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark-mode .daterangepicker .applyBtn,
body.dark-mode .daterangepicker .applyBtn {
    background: #2D7DD2 !important;
    border-color: #2D7DD2 !important;
    color: #ffffff !important;
}

html.dark-mode .datepicker.datepicker-dropdown,
body.dark-mode .datepicker.datepicker-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .datepicker.datepicker-dropdown table tr th {
    color: #94a3b8 !important;
}

html.dark-mode .datepicker.datepicker-dropdown table tr th.datepicker-switch {
    color: #60a5fa !important;
}

html.dark-mode .datepicker.datepicker-dropdown table tr td.day {
    color: #cbd5e1 !important;
}

html.dark-mode .datepicker.datepicker-dropdown table tr td.day:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
}

html.dark-mode .datepicker.datepicker-dropdown table tr td.today {
    background-color: #1e3a8a !important;
    border-color: #2563eb !important;
    color: #93c5fd !important;
}

html.dark-mode .datepicker.datepicker-dropdown table tr td.active,
html.dark-mode .datepicker.datepicker-dropdown table tr td.active:hover {
    background: #2D7DD2 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   AFKAR ERP - UNIFIED DATERANGEPICKER COMPONENT (ALL REPORTS)
   Ensures identical, premium date-range popup styling across all ERP reports
   ========================================================================== */
.daterangepicker {
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 12px 30px rgba(12, 48, 106, 0.18) !important;
    z-index: 9999999 !important;
    padding: 8px !important;
    background: #ffffff !important;
    font-family: inherit !important;
}

.daterangepicker .ranges {
    margin: 0 !important;
    padding: 0 !important;
}

.daterangepicker .ranges ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 215px !important;
    min-width: 200px !important;
}

.daterangepicker .ranges li {
    padding: 8px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    border-radius: 6px !important;
    color: #334155 !important;
    margin-bottom: 2px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s ease !important;
}

[dir="rtl"] .daterangepicker .ranges li {
    text-align: right !important;
    justify-content: flex-start !important;
}

[dir="ltr"] .daterangepicker .ranges li {
    text-align: left !important;
    justify-content: flex-start !important;
}

.daterangepicker .ranges li:hover {
    background: #f1f5f9 !important;
    color: #0C306A !important;
}

.daterangepicker .ranges li.active {
    background: #0C306A !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.daterangepicker .calendar-table {
    background: transparent !important;
    border: none !important;
    padding: 4px !important;
}

.daterangepicker .calendar-table table {
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

.daterangepicker .calendar-table th {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #475569 !important;
    height: 30px !important;
    text-align: center !important;
    border-radius: 4px !important;
}

.daterangepicker .calendar-table td {
    font-size: 12.5px !important;
    height: 32px !important;
    width: 32px !important;
    text-align: center !important;
    border-radius: 6px !important;
    color: #1e293b !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #f1f5f9 !important;
    color: #0C306A !important;
}

.daterangepicker td.in-range {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
    border-radius: 0 !important;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #0C306A !important;
    color: #ffffff !important;
    font-weight: 700 !important;
}

.daterangepicker td.off,
.daterangepicker td.off.in-range {
    background-color: transparent !important;
    color: #94a3b8 !important;
}

.daterangepicker .drp-buttons {
    clear: both !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 8px 4px 4px 4px !important;
    border-top: 1px solid #e2e8f0 !important;
    margin-top: 6px !important;
}

.daterangepicker .drp-buttons .drp-selected {
    font-size: 12px !important;
    color: #64748b !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    font-weight: 500 !important;
}

[dir="rtl"] .daterangepicker .drp-buttons .drp-selected {
    margin-right: auto !important;
    margin-left: 0 !important;
}

.daterangepicker .drp-buttons .btn {
    cursor: pointer !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.daterangepicker .drp-buttons .applyBtn {
    background: #0C306A !important;
    border: 1px solid #0C306A !important;
    color: #ffffff !important;
}

.daterangepicker .drp-buttons .applyBtn:hover {
    background: #08214a !important;
    border-color: #08214a !important;
}

.daterangepicker .drp-buttons .cancelBtn {
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
}

.daterangepicker .drp-buttons .cancelBtn:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

@media (min-width: 769px) {
    .daterangepicker {
        max-width: calc(100vw - 24px) !important;
    }
    [dir="rtl"] .daterangepicker .ranges {
        float: right !important;
    }
    [dir="ltr"] .daterangepicker .ranges {
        float: left !important;
    }
    [dir="rtl"] .daterangepicker .drp-calendar {
        float: right !important;
    }
    [dir="ltr"] .daterangepicker .drp-calendar {
        float: left !important;
    }
    [dir="rtl"] .daterangepicker.show-calendar .drp-calendar.left {
        border-right: 1px solid #e2e8f0 !important;
        border-left: none !important;
    }
    [dir="ltr"] .daterangepicker.show-calendar .drp-calendar.left {
        border-left: 1px solid #e2e8f0 !important;
        border-right: none !important;
    }
}

@media (max-width: 768px) {
    .daterangepicker {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        width: calc(100vw - 24px) !important;
        max-width: 360px !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 99999999 !important;
        border-radius: 10px !important;
        border: 1px solid #cbd5e1 !important;
        box-shadow: 0 25px 60px rgba(12, 48, 106, 0.35) !important;
        background: #ffffff !important;
        padding: 12px !important;
    }
    .daterangepicker .ranges {
        float: none !important;
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    .daterangepicker .ranges ul {
        display: flex !important;
        flex-direction: column !important;
        gap: 5px !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .daterangepicker .ranges li {
        padding: 10px 14px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        border-radius: 6px !important;
        text-align: right !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #334155 !important;
        min-height: 38px !important;
        display: flex !important;
        align-items: center !important;
        cursor: pointer !important;
    }
    .daterangepicker .ranges li:hover {
        background: #f1f5f9 !important;
        color: #0C306A !important;
    }
    .daterangepicker .ranges li.active {
        background: #0C306A !important;
        border-color: #0C306A !important;
        color: #ffffff !important;
    }
    .daterangepicker .drp-calendar {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        float: none !important;
    }
    .daterangepicker .drp-calendar.left,
    .daterangepicker .drp-calendar.right {
        float: none !important;
        width: 100% !important;
    }
    .daterangepicker .drp-buttons {
        display: flex !important;
        gap: 8px !important;
        padding-top: 10px !important;
        margin-top: 8px !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    .daterangepicker .drp-buttons .btn {
        flex: 1 !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
    }
}