/* ============================================================
   Kheldwar admin — custom overrides (DataTables + misc)
   SOURCE FILE. Compiled/copied to public/assets/css/admin-custom.css
   by webpack mix (the resources/assets/css copy glob in webpack.mix.js).
   Edit THIS file, then run `npm run dev` — do NOT edit the public copy.
   Loaded last in layouts/sections/styles.blade.php so it wins.
   ============================================================ */

:root {
    --kd-brand: #1A5DB7;
    --kd-brand-soft: #eaf1fb;
    --kd-brand-softer: #f4f8fd;
    --kd-row-border: #eef0f4;
    --kd-row-hover: rgba(26, 93, 183, .05);
}

/* ---- Sidebar: collapsed-state logo ----
   The 180px wordmark doesn't fit the ~84px rail — show the square mark instead;
   full wordmark returns on expand/hover. */
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
}
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-link {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
}
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo img {
    display: none;
}
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand-logo {
    width: 72px;
    height: 40px;
    flex: 0 0 72px;
    margin: 0 auto;
    background: url('/android-chrome-192x192.png?v=3') center / contain no-repeat;
    display: inline-block;
}
.layout-menu-collapsed:not(.layout-menu-hover) #layout-menu .app-brand .layout-menu-toggle {
    display: none;
}

/* ---- Sidebar: unify ALL active menu states — solid brand blue ----
   (theme ships an old indigo #2b3491 gradient for active submenu items) */
.bg-menu-theme .menu-inner .menu-item.active > .menu-link {
    background: var(--kd-brand) !important;
    color: #fff !important;
}
.bg-menu-theme .menu-inner .menu-item.active > .menu-link i,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link .menu-icon,
.bg-menu-theme .menu-inner .menu-item.active > .menu-link::before {
    color: #fff !important;
}

/* ---- Initials avatar (navbar + user dropdown) ---- */
.kd-avatar-initials,
.kd-avatar-initials-drop {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .5px;
    border-radius: 50%;
}
/* On the blue navbar: white circle, brand-blue text */
.kd-avatar-initials {
    background: #ffffff;
    color: var(--kd-brand) !important;
    border: 2px solid rgba(255, 255, 255, .6);
}
/* In the white dropdown: soft brand chip */
.kd-avatar-initials-drop {
    background: var(--kd-brand-soft);
    color: var(--kd-brand) !important;
}

/* ---- Compact breadcrumb / action bar (title lives in the top navbar) ---- */
/* Theme rule is `.container-p-y:not([class^=pt-]):not([class*=" pt-"])` — match its specificity to win */
.content-wrapper .container-p-y:not([class^=pt-]):not([class*=" pt-"]) {
    padding-top: 0 !important;
}
/* Fixed-navbar offset: demo.css reserves 78px but the navbar is 60px — trim the dead space.
   Selector matches demo.css exactly (with both :not()) so source order lets us win. */
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
    padding-top: 62px !important;
}
.kd-breadcrumbs-bar {
    padding-top: .5rem;
}
.kd-breadcrumbs-bar {
    margin-bottom: .75rem;
}
.kd-breadcrumbs-bar .breadcrumb {
    margin-bottom: 0;
    font-size: .95rem;
}
/* Neutralize old title-page spacing rules if still present */
.kd-breadcrumbs-bar .card-header { padding: 0 !important; }

/* ---- Table shell ---- */
.card-datatable {
    padding: .25rem;
}
.card-datatable table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* ---- Header (brand blue, white labels, column dividers) ----
   The theme forces header text white + a dark bg via very
   high-specificity rules; we match that specificity to override. */

/* Background: brand blue (beats `.layout-page ... thead.border-top tr {background:#2b3491}`) */
.layout-page .content-wrapper .container-fluid .card-datatable .datatables-users thead.border-top tr,
.layout-page .content-wrapper .container-fluid .card-datatable table thead tr,
.layout-page .content-wrapper .container-fluid .card-datatable table thead th,
.card-datatable table thead tr,
.card-datatable table thead th {
    background: var(--kd-brand) !important;
    background-image: none !important;
}

/* Text: white (beats `... :not(.table-dark) thead:not(.table-dark) th {color:#fff}`) */
.layout-page .content-wrapper .container-fluid .card-datatable .datatables-users:not(.table-dark) thead:not(.table-dark) th,
.layout-page .content-wrapper .container-fluid .card-datatable table thead th,
.card-datatable table thead th {
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    padding: 15px 18px !important;
    vertical-align: middle;
    white-space: nowrap;
    border-top: none !important;
    border-bottom: none !important;
    border-right: 1px solid rgba(255, 255, 255, .15) !important;   /* column divider */
}
.card-datatable table thead th:first-child {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.card-datatable table thead th:last-child {
    border-right: none !important;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
/* Sort arrows, subtle white */
.card-datatable table.dataTable thead .sorting:before,
.card-datatable table.dataTable thead .sorting:after,
.card-datatable table.dataTable thead .sorting_asc:before,
.card-datatable table.dataTable thead .sorting_asc:after,
.card-datatable table.dataTable thead .sorting_desc:before,
.card-datatable table.dataTable thead .sorting_desc:after {
    color: #ffffff !important;
    opacity: .65;
}

/* ---- Body: solid white, NO striped rows ----
   Bootstrap 5.3 draws stripes with an inset box-shadow + --bs-table-* vars,
   so plain `background: transparent` is not enough — kill all three. */
.card-datatable table.dataTable tbody tr,
.card-datatable table.dataTable tbody tr td,
.card-datatable table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: transparent !important;
    --bs-table-bg-type: transparent !important;
    --bs-table-striped-bg: transparent !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
}
.card-datatable table.dataTable tbody td {
    padding: 14px 16px !important;
    font-size: 14px !important;
    color: #4b586b !important;
    vertical-align: middle;
    border-bottom: 1px solid var(--kd-row-border) !important;
}
.card-datatable table.dataTable tbody tr:last-child td {
    border-bottom: none !important;
}
.card-datatable table.dataTable tbody tr {
    transition: background-color .15s ease;
}
/* Subtle odd/even striping — odd stays white, even gets a light tint.
   `.even`/nth-of-type give higher specificity than the white-forcing rule above. */
.card-datatable table.dataTable tbody tr.even td,
.card-datatable table.dataTable tbody tr:nth-of-type(even) td {
    background-color: #f5f8fc !important;
}
/* Row hover / selected — soft brand-blue highlight (full row, wins over stripe) */
.card-datatable table.dataTable tbody tr:hover td,
.card-datatable table.dataTable tbody tr.selected td,
.card-datatable table.dataTable tbody tr.active td {
    background-color: #e9f2fc !important;
}

/* ---- Action buttons: breathing room ---- */
.card-datatable table.dataTable tbody td .btn,
.card-datatable table.dataTable tbody td > a {
    margin: 2px 3px;
}
.card-datatable table.dataTable tbody td .btn {
    border-radius: 8px !important;
}

/* ---- Length + search controls ---- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e3e7ee !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--kd-brand) !important;
    box-shadow: 0 0 0 .15rem rgba(26, 93, 183, .15) !important;
}
.dataTables_wrapper .dataTables_filter input {
    min-width: 220px;
}

/* ---- Info text ---- */
.dataTables_wrapper .dataTables_info {
    color: #8a93a3 !important;
    font-size: 13px;
    padding-top: 1rem;
}

/* ---- Pagination ---- */
.dataTables_wrapper .pagination .page-link {
    border: none !important;
    color: #5b6675 !important;
    background: transparent !important;
    border-radius: 8px !important;
    margin: 0 2px;
    min-width: 34px;
    text-align: center;
    transition: all .15s ease;
}
.dataTables_wrapper .pagination .page-link:hover {
    background: var(--kd-brand-soft) !important;
    color: var(--kd-brand) !important;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
    background: var(--kd-brand) !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(26, 93, 183, .3);
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    color: #c3c9d3 !important;
    background: transparent !important;
}

/* ============================================================
   Dark mode  (header stays brand blue; body switches to dark)
   ============================================================ */
.dark-style .card-datatable table.dataTable tbody tr,
.dark-style .card-datatable table.dataTable tbody tr td {
    background-color: #2b2c40 !important;
    color: #b6bee0 !important;
    border-bottom-color: rgba(255, 255, 255, .06) !important;
}
.dark-style .card-datatable table.dataTable tbody tr.even td,
.dark-style .card-datatable table.dataTable tbody tr:nth-of-type(even) td {
    background-color: #30313f !important;
}
.dark-style .card-datatable table.dataTable tbody tr:hover td {
    background-color: rgba(26, 93, 183, .18) !important;
}
.dark-style .dataTables_wrapper .dataTables_length select,
.dark-style .dataTables_wrapper .dataTables_filter input {
    border-color: rgba(255, 255, 255, .12) !important;
}
.dark-style .dataTables_wrapper .pagination .page-link:hover {
    background: rgba(26, 93, 183, .25) !important;
    color: #cfe0f7 !important;
}

/* ============================================================
   Filter side panel (offcanvas) — brand themed
   ============================================================ */

/* Old inline filter card is replaced by the slide-in panel.
   Kept in the DOM (its select/buttons still drive the DataTable) but hidden. */
.togglefilter { display: none !important; }
.kd-filter-offcanvas {
    width: 560px !important;
    max-width: 94vw;
    display: flex;
    flex-direction: column;
}
.kd-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Header */
.kd-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eef0f4;
}
.kd-filter-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: #384252;
    margin: 0;
}
.kd-filter-title .accent { color: var(--kd-brand); }
.kd-filter-title .ti { color: var(--kd-brand); font-size: 1.4rem; }
.kd-filter-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 9px;
    background: var(--kd-brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}
.kd-filter-close:hover { background: #14498f; }

/* Body: two columns */
.kd-filter-body {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
.kd-filter-cats {
    width: 210px;
    flex-shrink: 0;
    background: #f6f7f9;
    border-right: 1px solid #eef0f4;
    overflow-y: auto;
}
.kd-filter-cats-head {
    text-align: center;
    font-weight: 600;
    color: #6b7280;
    padding: 14px;
    background: #ecedf1;
}
.kd-filter-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    cursor: pointer;
    color: #5b6675;
    font-weight: 500;
    border-bottom: 1px solid #eef0f3;
    transition: background .15s ease, color .15s ease;
}
.kd-filter-cat:hover { background: #eef3fb; }
.kd-filter-cat.active {
    color: var(--kd-brand);
    font-weight: 700;
    background: #eaf1fb;
    box-shadow: inset 4px 0 0 var(--kd-brand);   /* left accent bar */
}
.kd-filter-cat .kd-cat-meta { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--kd-brand); }
.kd-filter-cat .kd-cat-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kd-brand); display: inline-block; }

/* Options */
.kd-filter-options {
    flex: 1 1 auto;
    padding: 18px 22px;
    overflow-y: auto;
}
.kd-filter-search { position: relative; margin-bottom: 6px; }
.kd-filter-search .ti {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #9aa2b1;
}
.kd-filter-search input {
    width: 100%;
    background: #f2f3f5;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 14px 12px 42px;
    outline: none;
    transition: border-color .15s ease, background .15s ease;
}
.kd-filter-search input:focus { background: #fff; border-color: var(--kd-brand); }
.kd-opt-group { display: none; }
.kd-opt-group.active { display: block; }
.kd-opt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 2px;
    border-bottom: 1px solid #f0f1f4;
    color: #4b586b;
    cursor: pointer;
}
.kd-opt-row:last-child { border-bottom: none; }
.kd-opt-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--kd-brand);
    cursor: pointer;
    flex-shrink: 0;
}
.kd-opt-row.kd-select-all { font-weight: 600; color: #384252; }

/* Footer */
.kd-filter-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-top: 1px solid #eef0f4;
    gap: 12px;
}
.kd-filter-applied { color: #6b7280; }
.kd-filter-applied .num { color: var(--kd-brand); font-weight: 700; }
.kd-filter-footer .kd-reset {
    background: #fff;
    border: 1px solid #d9dee6;
    color: #5b6675;
    font-weight: 600;
    padding: 9px 24px;
    border-radius: 9px;
    margin-right: 10px;
    transition: all .15s ease;
}
.kd-filter-footer .kd-reset:hover { background: #f3f5f8; border-color: #c4ccd8; color: #384252; }
.kd-filter-footer .kd-apply {
    background: var(--kd-brand);
    border: 1px solid var(--kd-brand);
    color: #fff;
    font-weight: 600;
    padding: 9px 32px;
    border-radius: 9px;
    box-shadow: 0 4px 12px rgba(26, 93, 183, .3);
    transition: all .15s ease;
}
.kd-filter-footer .kd-apply:hover {
    background: #14498f;
    border-color: #14498f;
    box-shadow: 0 6px 16px rgba(26, 93, 183, .42);
}
.dark-style .kd-filter-footer .kd-reset {
    background: transparent; border-color: rgba(255,255,255,.18); color: #b6bee0;
}
.dark-style .kd-filter-footer .kd-reset:hover { background: rgba(255,255,255,.06); }

/* Dark mode */
.dark-style .kd-filter-cats { background: #232333; border-right-color: rgba(255,255,255,.06); }
.dark-style .kd-filter-cats-head { background: #2b2c40; color: #a7b0cf; }
.dark-style .kd-filter-cat { color: #b6bee0; border-bottom-color: rgba(255,255,255,.05); }
.dark-style .kd-filter-cat:hover { background: rgba(26,93,183,.15); }
.dark-style .kd-filter-search input { background: #2b2c40; color: #cfd3ec; }
.dark-style .kd-filter-header, .dark-style .kd-filter-footer { border-color: rgba(255,255,255,.06); }
.dark-style .kd-opt-row { color: #b6bee0; border-bottom-color: rgba(255,255,255,.05); }

/* ---- Fix text color for active dropdown items in navbar ---- */
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active i,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active i,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active span,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active span,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active small,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active small,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active h6,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active h6,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active .text-muted,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active .text-muted,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active .fw-medium,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active .fw-medium {
    color: #fff !important;
}

#layout-navbar.brand-navbar .dropdown-menu .dropdown-item.active .kd-avatar-initials-drop,
#layout-navbar.brand-navbar .dropdown-menu .dropdown-item:active .kd-avatar-initials-drop {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}