/*
|--------------------------------------------------------------------------
| UI Fixes — Minimal patches for SB Admin Pro (HRIS + REALS)
|--------------------------------------------------------------------------
|
| Loaded globally from layouts/partials/head.blade.php,
| AFTER styles.css (SB Admin Pro) & sidenav-v2.css.
|
| IMPORTANT:  Do NOT override SB Admin Pro defaults here.
| styles.css already provides all light-mode styling for buttons, badges,
| cards, tables, modals, forms, alerts, dropdowns, feather icon sizing
| inside .btn / .btn-sm / .btn-xs, etc.
| This file is ONLY for small patches that SB Admin Pro does not cover.
|
| RULE: Never use !important on feather icon sizing — inline styles on
| <i data-feather> carry over to <svg> after feather.replace() and
| must always win over CSS class rules.
|
*/

/* ══════════════════════════════════════════════════════════
   FONT OVERRIDE — System font stack (restore pre-Metropolis look)
   ══════════════════════════════════════════════════════════
   SB Admin Pro ships with "Metropolis" as the primary body font.
   The project previously ran on the system font fallback stack
   when Metropolis font files were missing (404). The team prefers
   the clean system-font look, so we override to the system stack.
*/
:root {
    --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* ══════════════════════════════════════════════════════════
   BOOTSTRAP 5.3 "SUBTLE" UTILITY POLYFILL
   ══════════════════════════════════════════════════════════
   SB Admin Pro v2.0.5 ships Bootstrap 5.2.3 which does NOT
   include the bg-*-subtle, text-body-emphasis, or bg-body
   utility classes introduced in Bootstrap 5.3.
   We polyfill them here using SB Admin Pro's colour palette
   so badges, icons, and background colours render correctly.
*/

/* ── bg-*-subtle (light tinted backgrounds) ── */
.bg-primary-subtle   { background-color: #dae7fb !important; }
.bg-secondary-subtle { background-color: #e4ddf9 !important; }
.bg-success-subtle   { background-color: #daefed !important; }
.bg-info-subtle      { background-color: #daf2f8 !important; }
.bg-warning-subtle   { background-color: #f2eee3 !important; }
.bg-danger-subtle    { background-color: #f1e0e3 !important; }
.bg-dark-subtle      { background-color: #d6d8db !important; }

/* ── text-body-emphasis (dark body text — used in "secondary" badges) ── */
.text-body-emphasis  { color: #212832 !important; }

/* ── bg-body (page background colour — used in step indicator badges) ── */
.bg-body             { background-color: #f2f6fc !important; }

/* ══════════════════════════════════════════════════════════
   SCROLLBAR (global — thin, unobtrusive)
   ══════════════════════════════════════════════════════════ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

/* ══════════════════════════════════════════════════════════
   MOBILE SEARCH + PAGINATION (custom component used in
   several HRIS / REALS mobile card layouts)
   ══════════════════════════════════════════════════════════ */
.mobile-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    flex-wrap: wrap;
}
.mobile-pagination .btn {
    min-width: 36px;
}
.mobile-pagination .page-info {
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   SWEETALERT2 — match SB Admin Pro palette
   ══════════════════════════════════════════════════════════ */
.swal2-popup {
    border-radius: 0.75rem !important;
    font-family: inherit !important;
}
.swal2-title {
    font-size: 1.15rem !important;
    color: #212832 !important;
}
.swal2-html-container {
    font-size: 0.9rem !important;
    color: #69707a !important;
}

/* ══════════════════════════════════════════════════════════
   PRINT — hide non-essential UI when printing
   ══════════════════════════════════════════════════════════ */
@media print {
    .topnav,
    #layoutSidenav_nav,
    .page-header,
    .footer-admin,
    .mobile-pagination {
        display: none !important;
    }
    #layoutSidenav_content {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   FEATHER ICONS — DO NOT OVERRIDE
   ══════════════════════════════════════════════════════════
   SB Admin Pro styles.css already defines feather icon sizing:
     .btn .feather       → 0.875rem
     .btn-sm .feather    → 0.75rem
     .btn-xs .feather    → 0.7rem
   Templates use explicit inline style="width:…;height:…" on
   <i data-feather> tags where a custom size is needed (e.g.
   1.3em for action buttons, 25px for page header icons, etc.).
   feather.replace() copies those inline styles to the <svg>,
   so they naturally win over the CSS class rules.
   DO NOT add !important rules here — they would break inline sizing.
*/

/* ══════════════════════════════════════════════════════════
   CARD HOVER (consistent lift effect for nav cards)
   ══════════════════════════════════════════════════════════ */
a.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08) !important;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════
   ALERT SMALL — compact flash messages (used across HRIS/REALS)
   ══════════════════════════════════════════════════════════
   SB Admin Pro does not define .alert-sm; templates use it
   for compact, inline flash messages.
*/
.alert-sm {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

/* ══════════════════════════════════════════════════════════
   PAGE HEADER — MOBILE FULL-WIDTH DROPDOWN ACTION BUTTON
   ══════════════════════════════════════════════════════════
   On mobile (< xl), the page-header action column (col-12 col-xl-auto)
   spans 100%. This makes the dropdown and its trigger button stretch
   the full header width for easy touch access — matching the
   courier-shipping standard.
*/
@media (max-width: 1199.98px) {
    .page-header .col-12.col-xl-auto .dropdown {
        width: 100%;
    }
    .page-header .col-12.col-xl-auto .dropdown > .btn,
    .page-header .col-12.col-xl-auto .dropdown > .btn.dropdown-toggle {
        width: 100%;
    }
    .page-header .col-12.col-xl-auto .d-flex {
        width: 100%;
    }
}