/* =========================================================================
   Professional UI Refresh - global non-destructive override layer
   Loaded AFTER main.css / main-responsive.css in views/lib/header.php.
   Scoped, additive refinements. Does not fight intentional in-page styles.
   ========================================================================= */

/* ---------- Font faces (self-hosted, OFL licensed) ---------- */
/* Inter: variable font covering weights 400-700 (UI / body / tables). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/inter/Inter-Regular.woff2') format('woff2');
}

/* Space Grotesk: variable font covering weights 400-700 (headings/brand). */
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('../fonts/space-grotesk/SpaceGrotesk-Regular.woff2') format('woff2');
}

:root {
    --prof-brand:        #1f4e78;
    --prof-brand-soft:   #2d6da3;
    --prof-accent:       #0e8a7a;
    --prof-ink:          #17202a;
    --prof-muted:        #5d6b7c;
    --prof-bg:           #eef2f6;
    --prof-line:         #e2e8ef;
    --prof-radius:       0.62rem;
    --prof-shadow-sm:    0 1px 2px rgba(23, 32, 42, .06), 0 2px 6px rgba(23, 32, 42, .05);
    --prof-shadow-md:    0 4px 14px rgba(23, 32, 42, .08);
    --prof-ring:         rgba(31, 78, 120, .18);
    --prof-font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --prof-font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --font-stack:        var(--prof-font-ui);
}

html { scrollbar-gutter: stable; }

body {
    font-family: var(--prof-font-ui);
    background-color: var(--prof-bg);
    color: var(--prof-ink);
    -webkit-font-smoothing: antialiased;
}

/* Headings, titles and teasers use Space Grotesk for consistent brand tone. */
h1, h2, h3, h4, h5, h6,
.card-title,
.card .card-header .card-title,
.modal-title,
.page-title,
.brand-link .brand-text {
    font-family: var(--prof-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.daterangepicker { font-family: var(--prof-font-ui); }

/* Reset saved table view control (DataTables stateSave) */
.dt-state-reset {
    color: var(--prof-muted);
    font-size: 0.8rem;
    line-height: 1;
    padding: 0.3rem 0.45rem;
    margin-left: 0.6rem;
    text-decoration: none;
    border-left: 1px solid var(--prof-line);
    vertical-align: middle;
}
.dt-state-reset:hover {
    color: var(--prof-brand);
    text-decoration: none;
}
.dt-state-reset:focus { box-shadow: none; }

/* ---------- Cards ---------- */
.card {
    border: 1px solid var(--prof-line);
    border-radius: var(--prof-radius);
    box-shadow: var(--prof-shadow-sm);
    transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.card.card-hover:hover {
    box-shadow: var(--prof-shadow-md);
    border-color: #cfd9e4;
}

.card-header {
    background: linear-gradient(to bottom, #ffffff, #f7f9fc);
    border-bottom: 1px solid var(--prof-line);
    padding: .8rem 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-header:first-child { border-radius: calc(var(--prof-radius) - 1px) calc(var(--prof-radius) - 1px) 0 0; }

.card-header .card-title,
.card-header h3,
.card-header h4,
.card-header h5 {
    margin: 0;
    font-weight: 600;
    color: var(--prof-ink);
}

.card-footer {
    background: #f8fafc;
    border-top: 1px solid var(--prof-line);
}

/* ---------- Buttons ---------- */
.btn { border-radius: .4rem; font-weight: 500; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 .22rem var(--prof-ring); }

.btn-primary { background-color: var(--prof-brand); border-color: var(--prof-brand); }
.btn-primary:hover { background-color: var(--prof-brand-soft); border-color: var(--prof-brand-soft); }
.btn-primary:not(:disabled):active { background-color: #173a5c; border-color: #173a5c; }

.btn-outline-primary { color: var(--prof-brand); border-color: var(--prof-brand); }
.btn-outline-primary:hover { background-color: var(--prof-brand); border-color: var(--prof-brand); }

/* ---------- Forms ---------- */
.form-control {
    border-color: #cfd6df;
    border-radius: .42rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus {
    border-color: var(--prof-brand-soft);
    box-shadow: 0 0 0 .2rem var(--prof-ring);
}
.input-group-text {
    border-color: #cfd6df;
    background-color: #f5f7fa;
    color: var(--prof-muted);
}
select.form-control:not([size]):not([multiple]) { cursor: pointer; }

label { color: #33404f; }

/* ---------- Badges / chips ---------- */
.badge {
    font-weight: 600;
    letter-spacing: .2px;
    border-radius: 6px;
    padding: .38em .62em;
    vertical-align: middle;
}

/* ---------- Tables ---------- */
.table thead th {
    background-color: #f3f6fa;
    color: #33404f;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    border-bottom-width: 1px;
    white-space: nowrap;
}
.table tbody td { vertical-align: middle; }
.table-hover tbody tr:hover { background-color: #f2f7fb; }

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #cfd6df;
    border-radius: .4rem;
    padding: .28rem .6rem;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--prof-brand-soft);
    box-shadow: 0 0 0 .2rem var(--prof-ring);
    outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page-link {
    border-radius: .4rem !important;
    color: var(--prof-brand);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination .page-item.active .page-link {
    background-color: var(--prof-brand);
    border-color: var(--prof-brand);
    color: #fff;
}

/* ---------- Nav tabs ---------- */
.nav-tabs .nav-link {
    border-radius: .4rem .4rem 0 0;
    font-weight: 500;
}
.nav-tabs .nav-link.active { color: var(--prof-brand); }

/* ---------- Dropdown ---------- */
.dropdown-menu {
    border-color: var(--prof-line);
    border-radius: .5rem;
    box-shadow: var(--prof-shadow-md);
    padding: .3rem 0;
}
.dropdown-item { border-radius: .3rem; margin: 0 .3rem; padding: .45rem .7rem; }
.dropdown-item:active { background-color: var(--prof-brand); }

/* ---------- Modals ---------- */
.modal-content { border: none; border-radius: .75rem; box-shadow: var(--prof-shadow-md); }
.modal-header { border-bottom: 1px solid var(--prof-line); }
.modal-footer { border-top: 1px solid var(--prof-line); }

/* ---------- Navbar (dark) ---------- */
.app-header.navbar {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}
.app-header.navbar .brand-link { padding: 0 .8rem; }

/* ---------- Sidebar polish ---------- */
.app-sidebar .sidebar-brand .brand-text { font-weight: 600; letter-spacing: .2px; }

.app-sidebar .sidebar-menu .nav-link {
    border-radius: .35rem;
    margin: 1px 8px;
    padding: .5rem .7rem;
    color: #c6d0db;
    transition: background-color .15s ease, color .15s ease;
}
.app-sidebar .sidebar-menu .nav-link:hover {
    background-color: rgba(255, 255, 255, .07);
    color: #ffffff;
}
.app-sidebar .sidebar-menu .nav-link.active {
    background-color: var(--prof-brand);
    color: #ffffff;
    position: relative;
}
.app-sidebar .sidebar-menu .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #7ec7ff;
}
.app-sidebar .nav-treeview > .nav-item > .nav-link { font-size: .9rem; }
.app-sidebar .nav-treeview .nav-link.active::before { background: #ffd166; }

.app-sidebar .sidebar-menu .nav-item.has-treeview.menu-open > .nav-link {
    background-color: rgba(255, 255, 255, .08);
    color: #ffffff;
}

/* ---------- Dashboard KPI cards ---------- */
.dash-kpi {
    border-radius: var(--prof-radius);
    box-shadow: var(--prof-shadow-sm);
}
.dash-kpi .kpi-icon { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }
.dash-kpi .kpi-value { font-variant-numeric: tabular-nums; }

.dash-section-title { letter-spacing: .2px; }
.dash-section-title .sec-icon { box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12); }

/* page tab bar alignment */
#page-tab-bar { background: #ffffff; }
#page-tab-bar .tab-item.active { color: var(--prof-brand); border-bottom-color: var(--prof-brand); }

/* ---------- Content header / breadcrumb ---------- */
.content-header h1,
.content-header .h1 {
    color: var(--prof-ink);
    letter-spacing: -.2px;
}
.breadcrumb { background: transparent; }
.breadcrumb-item a { color: var(--prof-brand); }

/* ---------- Toastr / sweetalert spacing ---------- */
#toast-container > div { border-radius: .5rem !important; box-shadow: var(--prof-shadow-md) !important; }

/* ---------- Scrollbars (WebKit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #c3ccd6; border: 2px solid transparent; border-radius: 6px; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #a9b4c0; border: 2px solid transparent; background-clip: content-box; }

/* ---------- Focus visible global ---------- */
a:focus-visible { outline: 2px solid var(--prof-brand); outline-offset: 2px; }

/* ---------- Subtle entrance animation for cards ---------- */
@keyframes profFadeUp {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: profFadeUp .28s ease both; }

@media (max-width: 991.98px) {
    .app-sidebar .sidebar-menu .nav-link { margin: 1px 6px; }
    .card-header { padding: .65rem .8rem; }
}

/* ---------- FX auto-refresh widgets ---------- */
.fx-auto-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .3px;
    border-radius: 999px;
    padding: .22rem .55rem;
    margin-left: .35rem;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    color: #0e7a3d;
    background: rgba(14, 138, 122, .12);
    border: 1px solid rgba(14, 138, 122, .3);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.fx-auto-chip:hover { background: rgba(14, 138, 122, .22); }
.fx-auto-chip.is-off { color: #8a5a1a; background: rgba(255, 193, 7, .14); border-color: rgba(255, 193, 7, .3); }

@keyframes fxFlash {
    0%   { background-color: transparent; }
    45%  { background-color: #fff3cd; }
    100% { background-color: transparent; }
}
.fx-changed { animation: fxFlash 1.2s ease; border-radius: .35rem; }

/* ================= UNIFORM FILTER AREAS (PROJECT-WIDE) ================= */
.filter-grid,
.list-filter-grid,
.report-filter,
.filter-bar,
.filter-section,
.filter-box,
.filter-card,
.filter-row,
.filters,
[class*="-filter"]:not(.dataTables_filter) {
    background: #ffffff;
    border: 1px solid var(--prof-line);
    border-radius: var(--prof-radius);
    box-shadow: var(--prof-shadow-sm);
    padding: .8rem .9rem;
    margin-bottom: 1rem;
}

.filter-grid label,
.list-filter-grid label,
.report-filter label,
.filter-bar label,
.filter-section label,
.filter-box label,
.filter-card label,
.filter-row label,
.filters label {
    display: block;
    margin-bottom: .3rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--prof-muted);
    white-space: nowrap;
}

.filter-grid .form-control,
.list-filter-grid .form-control,
.report-filter .form-control,
.filter-bar .form-control,
.filter-section .form-control,
.filter-box .form-control,
.filter-card .form-control,
.filter-row .form-control,
.filters .form-control,
[class*="-filter"] .form-control {
    border-color: #cfd6df;
    border-radius: .42rem;
    min-height: 38px;
}

.filter-grid .select2-container,
.list-filter-grid .select2-container,
.report-filter .select2-container,
.filter-bar .select2-container,
.filter-section .select2-container,
.filter-box .select2-container,
.filter-card .select2-container,
.filter-row .select2-container,
.filters .select2-container,
[class*="-filter"] .select2-container {
    width: 100% !important;
}

.filter-grid .select2-selection,
.list-filter-grid .select2-selection,
.report-filter .select2-selection,
.filter-bar .select2-selection,
.filter-section .select2-selection,
.filter-box .select2-selection,
.filter-card .select2-selection,
.filter-row .select2-selection,
.filters .select2-selection,
[class*="-filter"] .select2-selection {
    min-height: 38px;
    display: flex;
    align-items: center;
}

.filter-grid .btn,
.list-filter-grid .btn,
.report-filter .btn,
.filter-bar .btn,
.filter-section .btn,
.filter-box .btn,
.filter-card .btn,
.filter-row .btn,
.filters .btn {
    align-self: flex-end;
    white-space: nowrap;
    font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* =========================================================================
   DataTables Professional Polish
   Stable, equal-height data tables with a clean loading experience.
   Applies to every DataTables list project-wide; page-specific rules win.
   ========================================================================= */

.dataTables_wrapper {
    position: relative;
}

/* ---------- Loading / processing state ---------- */
.dataTables_wrapper .dataTables_processing {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    z-index: 30;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: .7rem 1.15rem .7rem .5rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .97);
    border: 1px solid var(--prof-line);
    border-radius: 999px;
    box-shadow: var(--prof-shadow-md);
    color: var(--prof-muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .2px;
    text-indent: 0;
    pointer-events: none;
}
.dataTables_wrapper .dataTables_processing::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 2.5px solid #d6dee7;
    border-top-color: var(--prof-brand);
    border-radius: 50%;
    animation: dtProfSpin .7s linear infinite;
}
@keyframes dtProfSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Uniform table geometry ---------- */
.dataTables_wrapper table.dataTable,
table.imp-dt {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    clear: both;
}
/* scrollX tables size their own scroll body - never cap them */
.dataTables_wrapper:has(.dataTables_scroll) table.dataTable { max-width: none; }

.dataTables_wrapper table.dataTable > thead > tr > th,
table.imp-dt > thead > tr > th {
    padding: .55rem .7rem;
    vertical-align: middle;
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .45px;
    text-transform: uppercase;
    color: #44536b;
    background-color: #eef2f7;
    border-bottom: 2px solid #dbe3ec;
    position: sticky;
    top: 0;
    z-index: 6;
}

/* Wrapping, compact cells: text wraps instead of being truncated, and a
   max-width keeps any single column from stretching too wide ("long & small") */
.dataTables_wrapper table.dataTable > tbody > tr > td,
table.imp-dt > tbody > tr > td {
    padding: .48rem .75rem;
    vertical-align: middle;
    line-height: 1.45;
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 360px;
    border-top: 1px solid #eef2f6;
    color: #26313e;
}
/* Keep interactive / composite cells fully visible (dropdowns, buttons,
   in-cell forms, selects/Select2, progress bars) - never clip */
.dataTables_wrapper table.dataTable > tbody > tr > td:has(.btn-group),
table.imp-dt > tbody > tr > td:has(.btn-group),
.dataTables_wrapper table.dataTable > tbody > tr > td:has(.dropdown),
table.imp-dt > tbody > tr > td:has(.dropdown),
.dataTables_wrapper table.dataTable > tbody > tr > td:has(form),
table.imp-dt > tbody > tr > td:has(form),
.dataTables_wrapper table.dataTable > tbody > tr > td:has(select),
table.imp-dt > tbody > tr > td:has(select),
.dataTables_wrapper table.dataTable > tbody > tr > td:has(.select2-container),
table.imp-dt > tbody > tr > td:has(.select2-container),
.dataTables_wrapper table.dataTable > tbody > tr > td:has(.progress),
table.imp-dt > tbody > tr > td:has(.progress) {
    overflow: visible;
    max-width: none;
    white-space: nowrap;
}
.dataTables_wrapper table.dataTable > tbody > tr:nth-of-type(even),
table.imp-dt > tbody > tr:nth-of-type(even) {
    background-color: #fafcfe;
}
.dataTables_wrapper table.dataTable > tbody > tr:hover,
table.imp-dt > tbody > tr:hover {
    background-color: #eef5fc !important;
}
/* Pages that opt into the "tight equal-columns" layout (fixed layout) get
   normal wrapping so no data is hidden inside the fixed grid. */
.dataTables_wrapper table.dataTable.dt-tight > tbody > tr > td {
    white-space: normal;
    overflow: visible;
    max-width: none;
}

/* ---------- Toolbar (search / length / buttons / info) ---------- */
.dataTables_wrapper .dataTables_filter { margin-bottom: .6rem; }
.dataTables_wrapper .dataTables_filter label { margin: 0; }
.dataTables_wrapper .dataTables_filter input {
    height: 34px;
    min-width: 190px;
    padding: .28rem .65rem .28rem 2rem;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235d6b7c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left .55rem center;
}
.dataTables_wrapper .dataTables_length { margin-bottom: .6rem; }
.dataTables_wrapper .dataTables_length select {
    height: 34px;
    padding: .2rem 2rem .2rem .5rem;
}

.dataTables_wrapper .dt-buttons {
    margin-bottom: .6rem;
    display: inline-flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.dataTables_wrapper .dt-buttons .btn {
    height: 34px;
    padding: .25rem .7rem;
    font-size: .78rem;
}

.dataTables_wrapper .dataTables_info {
    padding-top: .65rem;
    font-size: .78rem;
    letter-spacing: .2px;
    color: var(--prof-muted);
}
.dataTables_wrapper .dataTables_paginate { padding-top: .35rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 30px;
    height: 30px;
    padding: 0 .45rem;
    line-height: 28px;
    text-align: center;
    font-size: .8rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
    color: #a9b4c0 !important;
    background: #f8fafc !important;
    cursor: not-allowed;
}

/* ---------- Footer row separation ---------- */
.dataTables_wrapper .row:last-child { margin-top: .2rem; }

/* ---------- Mobile: let responsive card-view tables wrap again ---------- */
@media (max-width: 767.98px) {
    .dataTables_wrapper table.dataTable > tbody > tr > td,
    table.imp-dt > tbody > tr > td {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
    }
}

/* ---------- Print / export copy keeps readable wrapping ---------- */
@media print {
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate,
    .dataTables_wrapper .dt-buttons { display: none !important; }
    .dataTables_wrapper table.dataTable > tbody > tr > td,
    table.imp-dt > tbody > tr > td {
        white-space: normal;
        overflow: visible;
        max-width: none;
        text-overflow: clip;
    }
}