/*
    Site Modern Skin
    -----------------
    Presentation-only overrides layered on top of the existing Metronic theme.
    Loaded last, after style.bundle.min.css, so these rules win.
    Nothing here touches markup logic, routes, or data - visuals only.
*/

:root {
    --qcca-primary: #3B5BDB;
    --qcca-primary-dark: #2A43A8;
    --qcca-accent: #14B8A6;
    --qcca-success: #12B76A;
    --qcca-info: #0BA5EC;
    --qcca-warning: #F59E0B;
    --qcca-danger: #F04438;
    --qcca-secondary: #667085;
    --qcca-ink: #1E2430;
    --qcca-muted: #6B7280;
    --qcca-bg: #F4F6FB;
    --qcca-surface: #FFFFFF;
    --qcca-border: #E7EAF3;
    --qcca-radius: 0.85rem;
    --qcca-radius-sm: 0.55rem;
    --qcca-shadow-sm: 0 1px 2px rgba(30, 36, 48, 0.06);
    --qcca-shadow-md: 0 6px 18px rgba(30, 36, 48, 0.08);
    --qcca-shadow-lg: 0 16px 40px rgba(30, 36, 48, 0.12);
}

/* ---------- Base ---------- */

html, body {
    background-color: var(--qcca-bg) !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--qcca-ink);
}

/* Fix bidi/direction for every existing Urdu text run without editing any view file */
[style*="Jameel Noori Nastaleeq"] {
    direction: rtl;
    unicode-bidi: isolate;
    line-height: 1.9;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #C7CEDD;
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #A6AFC6;
}

/* ---------- Sidebar / Aside ---------- */

#kt_aside.aside {
    background: linear-gradient(180deg, #1B2340 0%, #141A30 100%) !important;
    box-shadow: var(--qcca-shadow-lg);
    border-right: 0 !important;
}

/*
    The stock "light" aside skin (themes/layout/aside/light.css) paints its
    own opaque white background on the menu container/wrapper, sized to
    fit the menu items. Left in place, it shows as a white box sitting on
    top of the dark gradient above - with our light menu-text color on
    top of it, that's nearly white-on-white. Forcing these transparent
    lets the dark gradient show through consistently top to bottom.
*/
#kt_aside_menu_wrapper,
#kt_aside_menu,
#kt_aside_menu.aside-menu,
.aside-menu-wrapper {
    background: transparent !important;
}

#kt_aside .brand {
    background: transparent !important;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 1.25rem 1.5rem !important;
}

#kt_aside .brand-logo img {
    max-height: 38px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

#kt_aside_menu .menu-nav > .menu-item > .menu-link {
    border-radius: var(--qcca-radius-sm);
    margin: 0.15rem 0.9rem;
    padding: 0.95rem 1.1rem;
    transition: background-color .15s ease, transform .15s ease;
}

/* A subtle divider between each top-level menu section (> targets only
   the top-level <li> items, not the nested submenu ones). */
#kt_aside_menu .menu-nav > .menu-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 0.2rem;
}

#kt_aside_menu .menu-nav > .menu-item:last-child {
    border-bottom: none;
}

#kt_aside_menu .menu-nav > .menu-item > .menu-link:hover,
#kt_aside_menu .menu-nav > .menu-item.menu-item-open > .menu-link,
#kt_aside_menu .menu-nav > .menu-item.menu-item-active > .menu-link {
    background-color: rgba(59, 91, 219, 0.28) !important;
    transform: translateX(2px);
}

/*
    The theme's whole type scale runs off a 13px root font-size (its
    "compact" baseline), so .menu-text's own 1rem comes out at ~13px -
    genuinely small, worse for a calligraphic Nastaliq typeface that
    needs more size to stay legible. Set an absolute size here instead
    of another rem value, so it doesn't inherit that compression.
*/
#kt_aside_menu .menu-nav .menu-text,
#kt_aside_menu .menu-nav .menu-title {
    color: #E7EAF5 !important;
    font-weight: 500;
    font-size: 15px !important;
    line-height: 2;
}

#kt_aside_menu .menu-nav .menu-submenu .menu-text {
    font-size: 14px !important;
}

/*
    The theme reserves a fixed 35px column for the icon and draws the svg
    at 23px left-aligned within it (with a small negative margin), which
    leaves a dead gap between the icon and the text that starts right
    after that column. Tightening the column and enlarging the icon to
    fill more of it closes that gap without touching the row's own
    padding or the text's position.
*/
#kt_aside_menu .menu-nav > .menu-item > .menu-link .menu-icon {
    flex: 0 0 30px !important;
}

#kt_aside_menu .menu-nav > .menu-item > .menu-link .menu-icon svg {
    width: 26px !important;
    height: 26px !important;
    margin-left: 0 !important;
}

#kt_aside_menu .menu-nav .menu-icon svg g [fill] {
    fill: #AEB7D6 !important;
}

#kt_aside_menu .menu-nav > .menu-item > .menu-link:hover .menu-icon svg g [fill],
#kt_aside_menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon svg g [fill] {
    fill: #FFFFFF !important;
}

#kt_aside_menu .menu-nav .menu-arrow {
    color: #AEB7D6 !important;
}

#kt_aside_menu .menu-nav .menu-bullet-dot span {
    background-color: #6B7BB8 !important;
}

#kt_aside_menu .menu-submenu {
    background: rgba(0,0,0,0.18);
    border-radius: var(--qcca-radius-sm);
    margin: 0 0.9rem;
}

#kt_aside_menu .menu-submenu .menu-link {
    padding: 0.6rem 1.25rem;
}

#kt_aside_menu .menu-submenu .menu-link:hover {
    background-color: rgba(255,255,255,0.06) !important;
}

/* ---------- Header / Topbar ---------- */

#kt_header.header {
    background-color: var(--qcca-surface) !important;
    box-shadow: var(--qcca-shadow-sm);
    border-bottom: 1px solid var(--qcca-border);
}

.wrapper .content {
    padding-top: 1.5rem;
}

/* ---------- Cards ---------- */

.card.card-custom,
.card.card-primary {
    border: 1px solid var(--qcca-border);
    border-radius: var(--qcca-radius) !important;
    box-shadow: var(--qcca-shadow-md);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

a > .card.card-custom:hover {
    box-shadow: var(--qcca-shadow-lg);
    transform: translateY(-2px);
}

.card .card-header {
    border-bottom: 1px solid var(--qcca-border);
    background-color: var(--qcca-surface);
    min-height: 64px !important;
}

.card .card-header.bg-danger,
.card .card-header.bg-primary {
    background: linear-gradient(120deg, var(--qcca-primary) 0%, var(--qcca-primary-dark) 100%) !important;
    border-bottom: 0;
}

.card .card-header .card-title,
.card .card-header .dashboard-title {
    color: inherit;
}

.card-body {
    padding: 1.5rem;
}

/* ---------- Buttons ---------- */

.btn {
    border-radius: var(--qcca-radius-sm);
    font-weight: 600;
    letter-spacing: .01em;
}

.btn.btn-primary {
    background-color: var(--qcca-primary);
    border-color: var(--qcca-primary);
}

.btn.btn-primary:hover {
    background-color: var(--qcca-primary-dark);
    border-color: var(--qcca-primary-dark);
}

.btn.btn-success {
    box-shadow: var(--qcca-shadow-sm);
}

/* ---------- Report list rows ---------- */

/*
    Transaction-line rows (e.g. Reports/_ApprovedEntriesDetails) used a
    solid bg-light-warning wash on every row regardless of content - the
    same "everything is yellow" problem the dashboard tiles had. A
    neutral bordered row plus a small tinted icon badge (matching the
    dashboard tile treatment) reads as a list instead of a wall of color.
*/
.entry-detail-row {
    background-color: #F8F9FD;
    border: 1px solid var(--qcca-border);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.entry-detail-row:hover {
    background-color: #F1F3FA;
    box-shadow: var(--qcca-shadow-sm);
}

.entry-detail-row .svg-icon.svg-icon-lg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-color: rgba(59, 91, 219, 0.12);
}

/* ---------- Forms ---------- */

.form-control {
    border-radius: var(--qcca-radius-sm);
    border-color: var(--qcca-border);
    background-color: #FBFCFE;
}

.form-control:focus {
    border-color: var(--qcca-primary);
    box-shadow: 0 0 0 0.2rem rgba(59, 91, 219, 0.15);
    background-color: #fff;
}

label {
    font-weight: 600;
    color: var(--qcca-muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Select2 dropdowns (party/status pickers on report filter forms) styled
   to match .form-control instead of the plugin's own default look. */
.select2-container--default .select2-selection--single {
    height: 44px !important;
    border-radius: var(--qcca-radius-sm) !important;
    border-color: var(--qcca-border) !important;
    background-color: #FBFCFE !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px !important;
    padding-left: 1rem !important;
    color: var(--qcca-ink) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 8px !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--qcca-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(59, 91, 219, 0.15);
}

.select2-dropdown {
    border-radius: var(--qcca-radius-sm) !important;
    border-color: var(--qcca-border) !important;
    box-shadow: var(--qcca-shadow-md);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--qcca-primary) !important;
}

/* ---------- Tables / DataTables ---------- */

.table {
    margin-bottom: 0;
}

.table thead th {
    background-color: #F5F7FC;
    color: var(--qcca-muted);
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 2px solid var(--qcca-border);
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table.table-striped tbody tr:nth-of-type(odd),
.table tbody tr:hover {
    background-color: #F8F9FD;
}

.dataTables_wrapper {
    padding-top: .25rem;
    overflow-x: auto;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border-radius: var(--qcca-radius-sm);
    border: 1px solid var(--qcca-border);
}

.table-responsive {
    overflow-x: auto;
}

/*
    table.dataTable used to be forced to display:block to keep wide report
    tables from breaking mobile layout, but display:block on a <table>
    breaks its normal column layout (header/body cells stop lining up as
    a grid) and, combined with width:100% !important, actually prevents
    the table from ever growing past its container - so instead of
    overflowing into a horizontal scrollbar on narrow screens, cells just
    got squeezed/wrapped, and on wide screens the table could end up
    narrower than its card instead of filling it (DataTables sometimes
    locks in a computed pixel width).
    Keeping the table a normal table (so columns still line up) and
    forcing white-space:nowrap on cells means it can't be squeezed
    smaller than its content - so it fills the full container when
    there's room, and overflows into the scrolling wrapper's scrollbar
    (.dataTables_wrapper / .table-responsive, both set above) instead of
    wrapping/squishing when there isn't.
*/
table.dataTable {
    width: 100% !important;
}

table.dataTable td,
table.dataTable th {
    white-space: nowrap;
}

/* ---------- Dashboard tiles ---------- */

.dashboard-title {
    font-size: 1.15rem;
}

/*
    Dashboard tiles: a proper card-driven grid instead of Bootstrap's
    "col-5" repeated 3-4x per row (which doesn't divide evenly into the
    12-col grid and has no responsive breakpoints). auto-fit/minmax wraps
    cleanly at every screen size with no manual breakpoint needed.
    Each tile carries a semantic dashboard-tile-{color} class; the color
    only drives a left accent border, a soft icon badge tint, and the
    icon's own fill (via [fill="#000000"], the same convention the rest
    of the Metronic icon set uses) - never the tile's whole background -
    so variety doesn't turn back into a wall of one color.
*/
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.dashboard-tile {
    --tile-accent: var(--qcca-primary);
    --tile-accent-soft: rgba(59, 91, 219, 0.12);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 108px;
    padding: 1.5rem 1.75rem;
    background-color: var(--qcca-surface);
    border: 1px solid var(--qcca-border);
    border-left: 5px solid var(--tile-accent);
    border-radius: var(--qcca-radius-sm);
    box-shadow: var(--qcca-shadow-sm);
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.dashboard-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--qcca-shadow-md);
}

.dashboard-tile-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background-color: var(--tile-accent-soft);
}

.dashboard-tile-icon svg {
    width: 30px;
    height: 30px;
}

.dashboard-tile-icon svg [fill="#000000"] {
    fill: var(--tile-accent);
}

.dashboard-tile-label {
    font-weight: 600;
    color: var(--qcca-ink);
    font-size: 1.1rem;
    line-height: 1.7;
}

.dashboard-tile-primary   { --tile-accent: var(--qcca-primary);   --tile-accent-soft: rgba(59, 91, 219, 0.12); }
.dashboard-tile-success   { --tile-accent: var(--qcca-success);   --tile-accent-soft: rgba(18, 183, 106, 0.12); }
.dashboard-tile-info      { --tile-accent: var(--qcca-info);      --tile-accent-soft: rgba(11, 165, 236, 0.12); }
.dashboard-tile-warning   { --tile-accent: var(--qcca-warning);   --tile-accent-soft: rgba(245, 158, 11, 0.14); }
.dashboard-tile-danger    { --tile-accent: var(--qcca-danger);    --tile-accent-soft: rgba(240, 68, 56, 0.12); }
.dashboard-tile-secondary { --tile-accent: var(--qcca-secondary); --tile-accent-soft: rgba(102, 112, 133, 0.12); }

/* ---------- Footer ---------- */

#kt_footer.footer {
    border-top: 1px solid var(--qcca-border);
}

/* ---------- Responsive ---------- */

@media (max-width: 991.98px) {
    .card-body {
        padding: 1.1rem;
    }

    .wrapper .content {
        padding-top: 1rem;
    }

    .container, .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 575.98px) {
    .card .card-header {
        min-height: auto !important;
        padding: 1rem 1.25rem;
    }

    .card-body {
        padding: 0.9rem;
    }

    .btn {
        width: 100%;
    }

    .form-group.row .col-lg-3.mt-12 .btn {
        width: 100%;
    }
}

/* ---------- Login page ---------- */

/*
    The login page's background image (assets/media/bg/bg-3.jpg) is
    referenced with a path that 404s under the /Authenticate/Index route,
    leaving a blank canvas. Overriding with a gradient here (rather than
    editing the view) fixes the visual without touching the page markup.
*/
.login.login-4 .bgi-size-cover {
    background: radial-gradient(circle at 20% 20%, #4A63D6 0%, transparent 55%),
                linear-gradient(135deg, var(--qcca-primary) 0%, var(--qcca-primary-dark) 55%, #10163A 100%) !important;
}

.login.login-4 .login-form {
    border-radius: var(--qcca-radius) !important;
    box-shadow: var(--qcca-shadow-lg);
    max-width: 420px;
    width: 92vw;
}

.login.login-4 .login-form .btn.btn-primary {
    background-color: var(--qcca-primary);
    border-color: var(--qcca-primary);
    width: 100%;
}