/* ================================================================
   KOVRRA TALENT - Global Custom Overrides
   Loaded after CoreUI style.css to enforce consistent styling.
   ================================================================ */

/* ================================================================
   LAYOUT STABILITY - Prevent CLS and horizontal overflow
   ================================================================ */
html {
    scrollbar-gutter: stable;
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

/* ================================================================
   BADGES - Global uniform system
   8 named filled colors. No outlines. Consistent sizing.
   ================================================================ */

/* Base badge */
.badge,
.badge-status {
    font-size: 0.7rem !important;
    padding: 4px 9px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: 0.2px;
    vertical-align: middle;
    white-space: nowrap !important;
    border-radius: 4px !important;
    border: none !important;
    display: inline-block;
}

/* Rounded pill badges */
.badge.rounded-pill {
    border-radius: 50rem !important;
    padding: 4px 10px !important;
}

/* ---------- Badge Color Classes ---------- */

.badge-green,
.badge.badge-green,
.badge-status.badge-green {
    background-color: #2eb85c !important;
    color: #fff !important;
}

.badge-red,
.badge.badge-red,
.badge-status.badge-red {
    background-color: #e55353 !important;
    color: #fff !important;
}

.badge-yellow,
.badge.badge-yellow,
.badge-status.badge-yellow {
    background-color: #f9b115 !important;
    color: #000 !important;
}

.badge-blue,
.badge.badge-blue,
.badge-status.badge-blue {
    background-color: #3399ff !important;
    color: #fff !important;
}

.badge-orange,
.badge.badge-orange,
.badge-status.badge-orange {
    background-color: #f58d42 !important;
    color: #fff !important;
}

.badge-black,
.badge.badge-black,
.badge-status.badge-black {
    background-color: #4f5d73 !important;
    color: #fff !important;
}

.badge-cyan,
.badge.badge-cyan,
.badge-status.badge-cyan {
    background-color: #17a2b8 !important;
    color: #fff !important;
}

.badge-purple,
.badge.badge-purple,
.badge-status.badge-purple {
    background-color: #6f42c1 !important;
    color: #fff !important;
}

/* ---------- Badge Size Variants ---------- */

/* Small badge - notification counts, tiny tags */
.badge-sm,
.badge.badge-sm {
    font-size: 0.6rem !important;
    padding: 2px 6px !important;
}

/* Large badge - score cards, prominent displays */
.badge-lg,
.badge.badge-lg {
    font-size: 0.8rem !important;
    padding: 5px 11px !important;
}

/* Extra large badge - hero score displays */
.badge-xl,
.badge.badge-xl {
    font-size: 1rem !important;
    padding: 6px 14px !important;
    font-weight: 700 !important;
}

/* ---------- Badge Context Overrides ---------- */

/* Notification count badges in header */
.header-nav .badge {
    font-size: 0.55rem !important;
    padding: 2px 5px !important;
    min-width: 16px;
    text-align: center;
}

/* Notification dot indicator */
.header-nav .badge[style*="width: 8px"],
.badge.notification-dot {
    font-size: 0 !important;
    padding: 0 !important;
    width: 8px !important;
    height: 8px !important;
    min-width: 0 !important;
    border-radius: 50% !important;
}

/* Badges inside dropdown menus */
.dropdown-menu .badge {
    font-size: 0.6rem !important;
    padding: 2px 7px !important;
    min-width: 40px;
    text-align: center;
}

/* Badges inside tables */
table .badge,
.table .badge,
table .badge-status,
.table .badge-status {
    font-size: 0.65rem !important;
    padding: 3px 8px !important;
}


/* ================================================================
   BUTTONS - Global uniform system
   Max height 38px. 3px border-radius. 8 colors filled + outline.
   ================================================================ */

/* Base button overrides */
.btn {
    max-height: 38px !important;
    border-radius: 3px !important;
    font-size: 0.8rem !important;
    padding: 7px 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.15s ease;
}

/* Small buttons - same max-height, tighter padding */
.btn-sm,
.btn.btn-sm {
    max-height: 38px !important;
    padding: 7px 10px !important;
    font-size: 0.75rem !important;
}

/* Large buttons - same max-height, wider padding */
.btn-lg,
.btn.btn-lg {
    max-height: 38px !important;
    padding: 7px 18px !important;
    font-size: 0.85rem !important;
}

/* Icon-only button - 38x38 square */
.btn-icon,
.btn.btn-icon {
    width: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.btn-icon .icon {
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
}

/* Circle button - avatar uploads only */
.btn-circle,
.btn.btn-circle {
    border-radius: 50% !important;
    width: 38px !important;
    height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button icon sizing within standard buttons */
.btn .icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ---------- Button Filled Colors ---------- */
/* CoreUI v5 uses CSS custom properties for buttons.
   We must set --cui-btn-* variables AND direct properties for full compatibility. */

.btn-green,
.btn.btn-green {
    --cui-btn-bg: #2eb85c;
    --cui-btn-border-color: #2eb85c;
    --cui-btn-color: #fff;
    --cui-btn-hover-bg: #259b4d;
    --cui-btn-hover-border-color: #259b4d;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-bg: #219344;
    --cui-btn-active-border-color: #219344;
    --cui-btn-active-color: #fff;
    --cui-btn-disabled-bg: #2eb85c;
    --cui-btn-disabled-border-color: #2eb85c;
    --cui-btn-disabled-color: #fff;
    background-color: #2eb85c !important;
    border-color: #2eb85c !important;
    color: #fff !important;
}
.btn-green:hover { background-color: #259b4d !important; border-color: #259b4d !important; color: #fff !important; }

.btn-red,
.btn.btn-red {
    --cui-btn-bg: #e55353;
    --cui-btn-border-color: #e55353;
    --cui-btn-color: #fff;
    --cui-btn-hover-bg: #d93c3c;
    --cui-btn-hover-border-color: #d93c3c;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-bg: #cc2f2f;
    --cui-btn-active-border-color: #cc2f2f;
    --cui-btn-active-color: #fff;
    --cui-btn-disabled-bg: #e55353;
    --cui-btn-disabled-border-color: #e55353;
    --cui-btn-disabled-color: #fff;
    background-color: #e55353 !important;
    border-color: #e55353 !important;
    color: #fff !important;
}
.btn-red:hover { background-color: #d93c3c !important; border-color: #d93c3c !important; color: #fff !important; }

.btn-yellow,
.btn.btn-yellow {
    --cui-btn-bg: #f9b115;
    --cui-btn-border-color: #f9b115;
    --cui-btn-color: #000;
    --cui-btn-hover-bg: #e0a00e;
    --cui-btn-hover-border-color: #e0a00e;
    --cui-btn-hover-color: #000;
    --cui-btn-active-bg: #c98f0c;
    --cui-btn-active-border-color: #c98f0c;
    --cui-btn-active-color: #000;
    --cui-btn-disabled-bg: #f9b115;
    --cui-btn-disabled-border-color: #f9b115;
    --cui-btn-disabled-color: #000;
    background-color: #f9b115 !important;
    border-color: #f9b115 !important;
    color: #000 !important;
}
.btn-yellow:hover { background-color: #e0a00e !important; border-color: #e0a00e !important; color: #000 !important; }

.btn-blue,
.btn.btn-blue {
    --cui-btn-bg: #3399ff;
    --cui-btn-border-color: #3399ff;
    --cui-btn-color: #fff;
    --cui-btn-hover-bg: #1a8cff;
    --cui-btn-hover-border-color: #1a8cff;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-bg: #007fff;
    --cui-btn-active-border-color: #007fff;
    --cui-btn-active-color: #fff;
    --cui-btn-disabled-bg: #3399ff;
    --cui-btn-disabled-border-color: #3399ff;
    --cui-btn-disabled-color: #fff;
    background-color: #3399ff !important;
    border-color: #3399ff !important;
    color: #fff !important;
}
.btn-blue:hover { background-color: #1a8cff !important; border-color: #1a8cff !important; color: #fff !important; }

.btn-orange,
.btn.btn-orange {
    --cui-btn-bg: #f58d42;
    --cui-btn-border-color: #f58d42;
    --cui-btn-color: #fff;
    --cui-btn-hover-bg: #e07a2f;
    --cui-btn-hover-border-color: #e07a2f;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-bg: #d06a20;
    --cui-btn-active-border-color: #d06a20;
    --cui-btn-active-color: #fff;
    --cui-btn-disabled-bg: #f58d42;
    --cui-btn-disabled-border-color: #f58d42;
    --cui-btn-disabled-color: #fff;
    background-color: #f58d42 !important;
    border-color: #f58d42 !important;
    color: #fff !important;
}
.btn-orange:hover { background-color: #e07a2f !important; border-color: #e07a2f !important; color: #fff !important; }

.btn-black,
.btn.btn-black {
    --cui-btn-bg: #4f5d73;
    --cui-btn-border-color: #4f5d73;
    --cui-btn-color: #fff;
    --cui-btn-hover-bg: #434f62;
    --cui-btn-hover-border-color: #434f62;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-bg: #384252;
    --cui-btn-active-border-color: #384252;
    --cui-btn-active-color: #fff;
    --cui-btn-disabled-bg: #4f5d73;
    --cui-btn-disabled-border-color: #4f5d73;
    --cui-btn-disabled-color: #fff;
    background-color: #4f5d73 !important;
    border-color: #4f5d73 !important;
    color: #fff !important;
}
.btn-black:hover { background-color: #3c4a5c !important; border-color: #3c4a5c !important; }

.btn-cyan,
.btn.btn-cyan {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: #fff !important;
}
.btn-cyan:hover { background-color: #128a9e !important; border-color: #128a9e !important; }

.btn-purple,
.btn.btn-purple {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #fff !important;
}
.btn-purple:hover { background-color: #5e37a6 !important; border-color: #5e37a6 !important; }

/* ---------- Button Outline Colors ---------- */

.btn-outline-green,
.btn.btn-outline-green {
    background-color: transparent !important;
    border: 1px solid #2eb85c !important;
    color: #2eb85c !important;
}
.btn-outline-green:hover { background-color: #2eb85c !important; color: #fff !important; }

.btn-outline-red,
.btn.btn-outline-red {
    background-color: transparent !important;
    border: 1px solid #e55353 !important;
    color: #e55353 !important;
}
.btn-outline-red:hover { background-color: #e55353 !important; color: #fff !important; }

.btn-outline-yellow,
.btn.btn-outline-yellow {
    background-color: transparent !important;
    border: 1px solid #f9b115 !important;
    color: #c48a00 !important;
}
.btn-outline-yellow:hover { background-color: #f9b115 !important; color: #000 !important; }

.btn-outline-blue,
.btn.btn-outline-blue {
    background-color: transparent !important;
    border: 1px solid #3399ff !important;
    color: #3399ff !important;
}
.btn-outline-blue:hover { background-color: #3399ff !important; color: #fff !important; }

.btn-outline-orange,
.btn.btn-outline-orange {
    background-color: transparent !important;
    border: 1px solid #f58d42 !important;
    color: #f58d42 !important;
}
.btn-outline-orange:hover { background-color: #f58d42 !important; color: #fff !important; }

.btn-outline-black,
.btn.btn-outline-black {
    background-color: transparent !important;
    border: 1px solid #4f5d73 !important;
    color: #4f5d73 !important;
}
.btn-outline-black:hover { background-color: #4f5d73 !important; color: #fff !important; }

.btn-outline-cyan,
.btn.btn-outline-cyan {
    background-color: transparent !important;
    border: 1px solid #17a2b8 !important;
    color: #17a2b8 !important;
}
.btn-outline-cyan:hover { background-color: #17a2b8 !important; color: #fff !important; }

.btn-outline-purple,
.btn.btn-outline-purple {
    background-color: transparent !important;
    border: 1px solid #6f42c1 !important;
    color: #6f42c1 !important;
}
.btn-outline-purple:hover { background-color: #6f42c1 !important; color: #fff !important; }

/* ---------- Button Special Overrides ---------- */

/* Header toggler (hamburger) */
.header-toggler,
button.header-toggler {
    max-height: 38px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 3px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Close button exception - keep system sizing */
.btn-close {
    max-height: none !important;
    padding: 0.25em !important;
    border-radius: 0 !important;
    display: block !important;
    overflow: visible !important;
}

/* Modal buttons - ensure dismiss works correctly */
.modal-footer .btn,
.modal-header .btn-close {
    overflow: visible !important;
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

/* Ensure modal backdrop doesn't block footer buttons */
.modal-footer {
    position: relative;
    z-index: 1;
}

/* Dropdown toggle caret spacing */
.btn.dropdown-toggle::after {
    margin-left: 4px;
}

/* Ghost buttons follow same sizing */
.btn[class*="btn-ghost-"] {
    max-height: 38px !important;
    border-radius: 3px !important;
}

/* Pagination buttons */
.page-link {
    border-radius: 3px !important;
}

/* CoreUI default: .btn-success uses dark text on green — poor contrast for "Approve" actions */
.btn.btn-success,
.btn-success {
    --cui-btn-color: #fff;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-color: #fff;
    --cui-btn-disabled-color: rgba(255, 255, 255, 0.72);
}

[data-coreui-theme="dark"] .btn.btn-success,
[data-coreui-theme="dark"] .btn-success {
    --cui-btn-color: #fff;
    --cui-btn-hover-color: #fff;
    --cui-btn-active-color: #fff;
    --cui-btn-disabled-color: rgba(255, 255, 255, 0.65);
}

/* ── Native OS select pickers on mobile ──────────────────────────────────────
   Bootstrap sets appearance:none which disables the iOS wheel picker and
   Android dialog. On touch devices we restore native rendering so the OS
   picker (scroll wheel on iOS, radio-list on Android) works as expected.
   Desktop keeps the Bootstrap-styled custom select unchanged.
────────────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    select,
    select.form-select,
    select.form-select-lg,
    select.form-select-sm {
        -webkit-appearance: auto !important;
        -moz-appearance:    auto !important;
        appearance:         auto !important;
        background-image:   none !important;
        padding-right:      0.75rem !important;
    }
}

/* ================================================================
   MOBILE UX HARDENING (≤ 991.98px)
   Larger tap targets, no accidental horizontal page scroll, and
   comfortable spacing for the ATS shell on phones/tablets.
   Loaded last so it wins over CoreUI defaults without !important soup.
   ================================================================ */
@media (max-width: 991.98px) {

    /* Primary mobile navigation: sidebar links need a real tap area */
    .sidebar-nav .nav-link {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }
    .sidebar-nav .nav-group-items .nav-link {
        min-height: 40px;
    }

    /* Header icons (bell / envelope / avatar) — 44px hit target */
    .header-nav .nav-link {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Dropdown rows (notifications, account menu) easier to tap */
    .dropdown-menu .dropdown-item {
        min-height: 42px;
        display: flex;
        align-items: center;
    }

    /* Page header: let title + primary action stack instead of squishing */
    .page-header-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .page-header-row h1 {
        font-size: 1.35rem;
    }

    /* Filter chip bars: horizontal swipe strip instead of wrapping into a
       tall block that pushes results off-screen */
    .filter-chips-container {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.35rem;
        scrollbar-width: none;
    }
    .filter-chips-container::-webkit-scrollbar { display: none; }
    .filter-chip {
        flex: 0 0 auto;
        min-height: 40px;
    }
    .filter-search-input {
        flex: 1 0 60%;
        min-height: 40px;
    }

    /* Any data table keeps its scrolling inside its own container so the
       whole page never scrolls sideways */
    .table-responsive,
    .table-responsive-wrapper {
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* Modals get near-full-width on small screens */
    .modal-dialog {
        margin: 0.5rem;
    }
}

/* Extra-small phones: give action buttons in tables a full tap target */
@media (max-width: 575.98px) {
    .btn-sm,
    .btn.btn-sm {
        min-height: 38px;
    }
}

/* Header bell / envelope badges — anchor count to top-right of each icon */
.header-nav.header-notify-group {
    gap: 0.125rem;
}

.header-nav .header-notify-item {
    position: relative;
}

.header-nav .header-notify-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
}

.header-nav .header-notify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.header-nav .header-notify-badge {
    position: absolute;
    top: 0;
    right: 0;
    transform: none;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.35rem;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.125rem;
    border: 2px solid #fff;
    box-sizing: content-box;
    pointer-events: none;
    z-index: 1;
}