/*
 * CloudPay visual refresh — global shell restyle (Phase 1).
 * Overrides the existing Vuexy admin theme's colors/components in place
 * (same HTML structure, same class names) rather than replacing markup, so
 * every page that includes UserTemp/header.php picks this up automatically
 * with no per-view changes. Individual screens get their own detailed
 * rebuild (pills, filter grids, etc.) in later passes — this pass is just
 * the shared chrome: top bar, horizontal nav, buttons, cards, tables.
 */
/*
 * Design pass 2 — deeper/more confident palette (the original pastel blue
 * read as a generic Bootstrap demo, not a purpose-built Qatar payroll
 * product), a restrained gold accent for a touch of Gulf-enterprise
 * character used sparingly, subtle shadows instead of flat borders, and
 * tighter spacing throughout — the recurring "too much white space"
 * complaint traced to Bootstrap's default 24px .card-body padding and
 * chart containers with no explicit height, both addressed below.
 */
:root {
    --cp-blue: #2954e5;
    --cp-blue-dark: #1e3fb8;
    --cp-blue-light: #eef2ff;
    --cp-gold: #b7862c;
    --cp-gold-light: #faf3e3;
    --cp-border: #e2e5ec;
    --cp-text: #101728;
    --cp-muted: #64748b;
    --cp-green: #12875a;
    --cp-green-light: #e7f5ee;
    --cp-red: #c0292b;
    --cp-red-light: #fceaea;
    --cp-amber: #b45309;
    --cp-amber-light: #fbf0e0;
    --cp-bg: #f3f5f9;
    --cp-radius: 10px;
    --cp-shadow: 0 1px 2px rgba(16, 23, 40, 0.04), 0 2px 8px rgba(16, 23, 40, 0.06);
}

body {
    font-family: "Segoe UI", "Rubik", Arial, sans-serif !important;
    background: var(--cp-bg) !important;
    color: var(--cp-text) !important;
    font-variant-numeric: tabular-nums;
}

/* ---- Typography scale ---- see UI_DESIGN_STANDARD.md "Typography" ----
   h1-h3 are rarely used inside the app shell (page titles use .card-title
   at h4), but are styled here so any screen that does need a larger
   heading stays on the same scale instead of falling back to browser
   defaults. */
h1, .cp-h1 { font-size: 28px !important; font-weight: 700 !important; color: var(--cp-text) !important; }
h2, .cp-h2 { font-size: 24px !important; font-weight: 700 !important; color: var(--cp-text) !important; }
h3, .cp-h3 { font-size: 20px !important; font-weight: 700 !important; color: var(--cp-text) !important; }
h4, .card-title { font-size: 17px !important; font-weight: 700 !important; color: var(--cp-text) !important; }
h5 { font-size: 15px !important; font-weight: 700 !important; color: var(--cp-text) !important; }
h6 { font-size: 13px !important; font-weight: 700 !important; color: var(--cp-text) !important; }
small, .small { font-size: 12px !important; color: var(--cp-muted) !important; }
.text-muted { color: var(--cp-muted) !important; }

/* ---- Top bar (brand / company name / user menu) ---- */
.header-navbar.bg-primary,
.header-navbar.navbar-with-menu.bg-primary {
    background: var(--cp-blue) !important;
    box-shadow: none !important;
}
.header-navbar.bg-primary .navbar-nav .nav-link,
.header-navbar.bg-primary .nav-link i {
    color: #fff !important;
}

/* ---- Horizontal main menu (Dashboard / Setup / Maintain / ...) ---- */
.header-navbar.navbar-horizontal {
    background: #fff !important;
    border-bottom: 1px solid var(--cp-border) !important;
    box-shadow: none !important;
}
.header-navbar.navbar-horizontal .nav-link {
    color: var(--cp-text) !important;
    font-size: 14px !important;
}
.header-navbar.navbar-horizontal .nav-link.active,
.header-navbar.navbar-horizontal .sidebar-group-active .nav-link,
.header-navbar.navbar-horizontal .nav-link:hover {
    color: var(--cp-blue) !important;
}
.header-navbar.navbar-horizontal .dropdown-menu .dropdown-item:hover,
.header-navbar.navbar-horizontal .dropdown-menu .dropdown-item:focus {
    background: var(--cp-blue-light) !important;
    color: var(--cp-blue-dark) !important;
}

/* ---- Cards / panels ----
   Subtle shadow + slightly larger radius reads as "designed" rather than
   flat demo boxes; tighter card-body/header padding is the main fix for
   the "too much white space" complaint (Bootstrap's default is 1.5rem/24px
   on every side, which dwarfs small stat/chart content). ---- */
.card {
    border: 1px solid var(--cp-border) !important;
    border-radius: var(--cp-radius) !important;
    box-shadow: var(--cp-shadow) !important;
}
.card .card-header {
    border-bottom: none !important;
    background: transparent !important;
    padding: 14px 18px 8px !important;
}
.card .card-body,
.card .card-content .card-body {
    padding: 14px 18px 18px !important;
}
/* .card-title size/weight/color are set in the typography scale above,
   alongside h4 (same visual role). */

/* ---- Compact KPI stat cards (dashboard) ----
   Horizontal chip layout with a colored left accent bar instead of a
   generic bordered box with an avatar floating in empty space — half the
   height of the original for the same information. ---- */
.cp-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px !important;
    border-left: 4px solid var(--cp-blue) !important;
}
.cp-kpi-card.cp-kpi-gold { border-left-color: var(--cp-gold) !important; }
.cp-kpi-card.cp-kpi-green { border-left-color: var(--cp-green) !important; }
.cp-kpi-card.cp-kpi-red { border-left-color: var(--cp-red) !important; }
.cp-kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 19px;
}
.cp-kpi-value {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--cp-text);
}
.cp-kpi-label {
    font-size: 12px;
    color: var(--cp-muted);
    font-weight: 600;
}

/* ---- Compact chart cards ----
   Fixes the specific complaint: a lone bar or small donut stretched to
   fill a tall card via Bootstrap's row `h-100` equal-height columns,
   leaving huge dead space. Chart containers get a fixed, moderate height
   instead of stretching to their tallest sibling. ---- */
.cp-chart-card .card-body { min-height: 0 !important; }
.cp-chart-sm { height: 190px !important; }

/* ---- Buttons ----
   colors.css defines solid .btn-primary/.btn-success/etc with a shorthand
   `background: linear-gradient(...) !important`. Overriding only
   `background-color` (a longhand) leaves that gradient's background-image
   layer painted on top regardless of !important — so these use the
   `background` shorthand too, to actually clear it. */
.btn-primary {
    background: var(--cp-blue) !important;
    border-color: var(--cp-blue) !important;
}
.btn-primary:hover {
    background: var(--cp-blue-dark) !important;
    border-color: var(--cp-blue-dark) !important;
}
.btn-outline-primary {
    color: var(--cp-blue) !important;
    border-color: var(--cp-blue) !important;
    background: #fff !important;
}
.btn-outline-primary:hover {
    background: var(--cp-blue) !important;
    color: #fff !important;
}
.btn-outline-success {
    color: #fff !important;
    background: var(--cp-green) !important;
    border-color: var(--cp-green) !important;
    font-weight: 600 !important;
}
.btn-outline-success:hover {
    background: #1c8a4b !important;
    border-color: #1c8a4b !important;
}
.btn-light-secondary {
    background: #eef0f4 !important;
    color: #444 !important;
    border-color: #eef0f4 !important;
}

/* ---- Tables (report grids) ---- */
.table thead {
    /* Vuexy's bootstrap-extended.css forces ALL CAPS on every table header
       (".table thead { text-transform: uppercase }") — the app's own
       labels/headers are already written in normal case ("Branch Name"),
       so undo it here rather than editing every view. */
    text-transform: none !important;
}
.table thead th,
table thead th {
    background: var(--cp-blue-light) !important;
    color: var(--cp-blue-dark) !important;
    border-bottom: 2px solid var(--cp-border) !important;
    font-weight: 700 !important;
    white-space: nowrap;
}
.table tbody tr:hover,
table tbody tr:hover {
    background: #fafbff !important;
}

/* ---- DataTables export buttons (PDF/CSV/Print) — shared by every listing
   screen built on custom_datatable_helper(), so this one fix lands
   everywhere those screens appear. Rendered as icons (see
   custom_datatable_helper.php) grouped into one bordered, segmented
   control — matches the look of the adjacent search box rather than
   standing out as solid blue squares. ---- */
.dt-buttons {
    display: inline-flex !important;
    border: 1px solid var(--cp-border) !important;
    border-radius: 4px !important;
    overflow: hidden;
}
.cp-dt-icon-btn,
.dt-buttons .btn,
.dt-button {
    background: #fff !important;
    border: none !important;
    border-right: 1px solid var(--cp-border) !important;
    border-radius: 0 !important;
    color: var(--cp-muted) !important;
}
.dt-buttons .btn:last-child,
.dt-button:last-child {
    border-right: none !important;
}
.cp-dt-icon-btn:hover,
.dt-buttons .btn:hover,
.dt-button:hover {
    background: var(--cp-blue-light) !important;
    color: var(--cp-blue-dark) !important;
}

/* ---- Icon-only PDF/CSV/Print buttons (see custom_datatable_helper.php,
   which sets className: 'cp-dt-icon-btn' and an icon glyph as the button
   text) — compact icon buttons instead of wide text buttons. ---- */
.cp-dt-icon-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

/* ---- Single-row DataTables toolbar ("Show N entries" .... [icons][Search]) ----
   custom_datatable_helper.php's dom string wraps l/B/f in one
   `cp-dt-toolbar` div instead of DataTables' default of stacking each on
   its own line; this lays that div out as one flex row with the export
   icons grouped right next to the search box. ---- */
.cp-dt-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.cp-dt-toolbar .dt-buttons,
.cp-dt-toolbar .dataTables_length,
.cp-dt-toolbar .dataTables_filter {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;
}
.cp-dt-toolbar .dataTables_length {
    margin-right: auto !important;
}
.cp-dt-toolbar .dataTables_length select {
    margin: 0 6px !important;
}
.cp-dt-toolbar .dataTables_filter input {
    margin-left: 8px !important;
}

/* ---- DataTables pagination ---- */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cp-blue) !important;
    border-color: var(--cp-blue) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cp-blue-light) !important;
    border-color: var(--cp-blue-light) !important;
    color: var(--cp-blue-dark) !important;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-color: var(--cp-border) !important;
}

/* ---- Notice-scroller footer banner ----
   See UserTemp/footer.php — kept the same $get_hr_rate PHP variable, but the
   text now lives in an inner .notice-ticker-text span so it can scroll via
   CSS animation. This replaces the old <marquee> tag (which unpredictably
   clipped text mid-scroll depending on browser/timing) with a
   transform-based scroll — same floating effect, without that bug. */
.footer .notice-ticker {
    display: block;
    background: var(--cp-blue-light);
    color: var(--cp-blue-dark);
    font-weight: 600;
    font-size: 12.5px;
    padding: 6px 0;
    border-radius: 4px;
    margin-bottom: 8px;
    overflow: hidden;
    white-space: nowrap;
}
.footer .notice-ticker .notice-ticker-text {
    display: inline-block;
    padding-left: 100%;
    animation: notice-ticker-scroll 18s linear infinite;
}
@keyframes notice-ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .footer .notice-ticker .notice-ticker-text {
        animation: none;
        padding-left: 14px;
    }
}

/* ---- Form fields ---- */
.form-control,
select.form-control {
    border-color: var(--cp-border) !important;
}
.form-control:focus {
    border-color: var(--cp-blue) !important;
    box-shadow: 0 0 0 2px var(--cp-blue-light) !important;
}
label {
    /* Vuexy's bootstrap-extended.css forces ALL CAPS on every <label>
       ("label { text-transform: uppercase }") — form labels are already
       written in normal case ("Branch Name"), so undo it here rather than
       editing every view. */
    text-transform: none !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #333 !important;
}
.mandatory {
    color: var(--cp-red) !important;
}

/* ---- Status badges ---- see UI_DESIGN_STANDARD.md "Badges" ----
   Recolors Bootstrap's existing badge-* classes (already used across the
   app — Apps/employee, onboard/*, cpdashboard.php, etc.) to the CloudPay
   palette rather than introducing new class names, so old and new screens
   render identically. Use badge-success/warning/danger/info/secondary for
   any new status pill (Active/Pending/Rejected/etc.). */
.badge-primary { background-color: var(--cp-blue) !important; color: #fff !important; }
.badge-success { background-color: var(--cp-green) !important; color: #fff !important; }
.badge-danger  { background-color: var(--cp-red) !important; color: #fff !important; }
.badge-warning { background-color: var(--cp-amber) !important; color: #fff !important; }
.badge-info    { background-color: var(--cp-blue-dark) !important; color: #fff !important; }
.badge-secondary,
.badge-light   { background-color: #eef0f4 !important; color: var(--cp-text) !important; }
.badge { font-weight: 600 !important; font-size: 11px !important; padding: 4px 9px !important; border-radius: 10px !important; }

/* ---- Semantic helpers for report screens (balance-ok / balance-low / cycle-tag) ---- */
.cp-balance-ok { color: var(--cp-green) !important; font-weight: 600; }
.cp-balance-low { color: var(--cp-red) !important; font-weight: 600; }
.cp-cycle-tag {
    display: inline-block;
    font-size: 11px;
    background: var(--cp-blue-light);
    color: var(--cp-blue-dark);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ---- Dashboard "HR At a Glance" quick-link rows ---- */
.cp-glance-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cp-border);
    transition: background 0.15s;
}
.cp-glance-row:hover {
    background: var(--cp-blue-light);
}
.cp-glance-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
}
.cp-glance-text {
    margin-left: 12px;
    flex: 1;
}
.cp-glance-label {
    font-size: 11px;
    color: var(--cp-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.cp-glance-sub {
    text-transform: none;
    font-size: 10px;
}
.cp-glance-value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.cp-glance-chevron {
    color: var(--cp-border);
    font-size: 18px;
}

/* ---- Dashboard "Quick Actions" tiles ---- */
.cp-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.cp-quick-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 8px;
    border: 1px solid var(--cp-border);
    border-radius: 8px;
    text-decoration: none !important;
    color: var(--cp-text);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.cp-quick-tile i {
    font-size: 22px;
}
.cp-quick-tile:hover {
    background: var(--cp-blue-light);
    border-color: var(--cp-blue);
    color: var(--cp-text);
}

/* ==== Dark mode ====
   UserTemp/footer.php's Light/Dark switch toggles `body.dark-layout`,
   which activates the Vuexy theme's own theme/app-assets/css/themes/
   dark-layout.css. Most rules above read colors from the --cp-* custom
   properties, so redefining the tokens here re-themes cards/buttons/
   badges/tables automatically. A few rules use a hardcoded light-mode
   color instead of a token (white button fills, #333 labels, raw
   DataTables length/filter fields Vuexy doesn't style) — those are
   restated explicitly below, matched to Vuexy's own dark palette
   (#1a233a page bg / #272e48 card bg / #464d5c border / #bdd1f8
   heading text / #8a99b5 muted text) so CloudPay elements blend with
   the rest of the dark theme instead of clashing with it. */
body.dark-layout {
    --cp-text: #bdd1f8;
    --cp-muted: #8a99b5;
    --cp-border: #464d5c;
    --cp-bg: #1a233a;
    --cp-blue-light: #2c3654;
    --cp-green-light: #1d3a2c;
    --cp-red-light: #402323;
    --cp-amber-light: #3f2f1c;
}
body.dark-layout .card {
    background: #272e48 !important;
}
body.dark-layout label {
    color: #cfd8ea !important;
}
body.dark-layout .btn-outline-primary {
    background: transparent !important;
}
body.dark-layout .btn-light-secondary {
    background: #2c3654 !important;
    color: #cfd8ea !important;
    border-color: #2c3654 !important;
}
body.dark-layout .table thead th,
body.dark-layout table thead th {
    background: transparent !important;
    color: var(--cp-text) !important;
    border-bottom: 2px solid var(--cp-border) !important;
}
body.dark-layout .table tbody tr:hover,
body.dark-layout table tbody tr:hover {
    background: #2c3654 !important;
}
body.dark-layout .dt-buttons,
body.dark-layout .cp-dt-icon-btn,
body.dark-layout .dt-button {
    background: transparent !important;
    border-color: var(--cp-border) !important;
}
body.dark-layout .cp-dt-icon-btn:hover,
body.dark-layout .dt-buttons .btn:hover,
body.dark-layout .dt-button:hover {
    background: var(--cp-blue-light) !important;
    color: #fff !important;
}
body.dark-layout .dataTables_wrapper .dataTables_length select,
body.dark-layout .dataTables_wrapper .dataTables_filter input,
body.dark-layout .cp-dt-toolbar select,
body.dark-layout .cp-dt-toolbar input,
body.dark-layout .form-control,
body.dark-layout select.form-control {
    background-color: #1a233a !important;
    color: var(--cp-text) !important;
    border-color: var(--cp-border) !important;
    -webkit-appearance: none;
    appearance: none;
}
body.dark-layout .dt-buttons .btn,
body.dark-layout .dt-buttons .buttons-pdf,
body.dark-layout .dt-buttons .buttons-csv,
body.dark-layout .dt-buttons .buttons-print {
    background-color: transparent !important;
    color: var(--cp-muted) !important;
}
body.dark-layout .footer .notice-ticker {
    background: var(--cp-blue-light);
    color: #cfe0ff;
}
body.dark-layout .cp-cycle-tag {
    background: var(--cp-blue-light);
    color: #cfe0ff;
}
body.dark-layout .badge-secondary,
body.dark-layout .badge-light {
    background-color: #2c3654 !important;
    color: var(--cp-text) !important;
}