/* PulseKonnect — components.css — cards, hero, KPI, pills, badges, forms, buttons, tables, bootstrap overrides
   Extracted verbatim from partials/design-system.blade.php (production-safe CSS refactor).
   Load order preserved; do not reorder relative to the other pk stylesheets. */

/* ═══ CARDS & SECTIONS ═══ */
.pk-card, .pk-section {
    background: var(--pk-card-bg) !important;
    border-radius: var(--pk-radius-xl) !important;
    border: 1px solid var(--pk-border) !important;
    box-shadow: var(--pk-shadow-sm) !important;
    overflow: hidden;
}
.pk-card-header, .pk-section-head {
    padding: .9rem 1.25rem !important;
    border-bottom: 1px solid var(--pk-border) !important;
    display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
    background: #fff;
}
.pk-card-header h6, .pk-section-head h6 { font-size: .875rem; font-weight: 700; color: var(--pk-heading); margin: 0; display: flex; align-items: center; gap: .5rem; }
.pk-section-ico {
    width: 28px; height: 28px; border-radius: var(--pk-radius); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
    background: var(--pk-primary-50) !important; color: var(--pk-primary) !important;
}
.pk-card-body, .pk-section-body { padding: 1.25rem; }

.pk-stat-card {
    background: var(--pk-card-bg); border-radius: var(--pk-radius-xl);
    padding: 1.25rem; border: 1px solid var(--pk-border);
    box-shadow: var(--pk-shadow-sm);
    transition: box-shadow .18s, border-color .18s; transform: none !important;
}
.pk-stat-card:hover { box-shadow: var(--pk-shadow-md); border-color: var(--pk-primary-200); }
.pk-stat-card .stat-icon { width: 46px; height: 46px; border-radius: var(--pk-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.pk-stat-card .stat-value { font-size: 1.7rem; font-weight: 800; line-height: 1; color: var(--pk-heading); letter-spacing: -.02em; }
.pk-stat-card .stat-label { font-size: .78rem; color: var(--pk-text-muted); margin-top: .3rem; font-weight: 500; }

/* ═══ HERO BANNER — unified enterprise navy/blue for every variant ═══ */
.pk-hero {
    background: var(--pk-hero-grad) !important;
    border-radius: var(--pk-radius-xl) !important;
    padding: 1.5rem 1.9rem !important; margin-bottom: 1.5rem;
    position: relative; overflow: hidden; color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(26,86,219,.25);
}
.pk-hero::before { content: ''; position: absolute; top: -70px; right: -70px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); border-radius: 50%; }
.pk-hero::after  { content: ''; position: absolute; bottom: -90px; left: 32%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); border-radius: 50%; }
.pk-hero .hc { position: relative; z-index: 2; }
.pk-hero.h-emerald, .pk-hero.h-rose, .pk-hero.h-amber, .pk-hero.h-sky,
.pk-hero.h-pink, .pk-hero.h-purple, .pk-hero.h-teal {
    background: var(--pk-hero-grad) !important;
}
.pk-hero h4 { font-weight: 800; font-size: 1.32rem; margin: 0 0 .35rem; color: #fff !important; letter-spacing: -.02em; }
.pk-hero p  { margin: 0; font-size: .82rem; opacity: .92; color: rgba(255,255,255,.88) !important; }

/* ── Canonical banner enforced on every page-level hero class ──
   Any page that ships its own hero container gets the exact same
   enterprise banner: one gradient, one radius, white text. */
.ai-hero, .an-hero, .anom-hero, .fp-hero, .hm-hero, .ins-hero, .loc-hero,
.m-hero, .pc-list-hero, .plans-hero, .pred-hero, .sp-hero,
.sub-detail-hero, .sub-hero, .usage-hero, .list-header, .anom-header,
.anom-hero.threat-normal, .anom-hero.threat-moderate,
.anom-hero.threat-elevated, .anom-hero.threat-critical {
    background: var(--pk-hero-grad) !important;
    border-radius: var(--pk-radius-xl) !important;
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(26,86,219,.25);
}

.pk-h-chip { display: flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: var(--pk-radius-lg) !important; padding: .5rem .85rem; backdrop-filter: blur(4px); }
.pk-h-chip .cv { font-size: 1.15rem; font-weight: 800; line-height: 1; color: #fff; }
.pk-h-chip .cl { font-size: .62rem; opacity: .78; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #d7e1f0; }
.pk-h-chip .ci { width: 28px; height: 28px; border-radius: var(--pk-radius); display: flex; align-items: center; justify-content: center; font-size: .85rem; background: rgba(255,255,255,.14) !important; color: #fff; }

.pk-hero-actions { display: flex; gap: .5rem; align-self: flex-start; flex-wrap: wrap; }
.pk-btn-hero {
    background: #fff !important; color: var(--pk-primary) !important;
    border: none; border-radius: var(--pk-radius) !important;
    padding: .5rem 1.05rem !important; font-size: .78rem !important; font-weight: 700;
    display: inline-flex; align-items: center; gap: .4rem;
    text-decoration: none; transition: all .15s;
    box-shadow: 0 2px 8px rgba(7,26,53,.3) !important; white-space: nowrap;
}
.pk-btn-hero:hover { transform: none !important; background: var(--pk-primary-50) !important; color: var(--pk-primary-hover) !important; box-shadow: 0 3px 12px rgba(7,26,53,.35) !important; }
.pk-btn-hero-ghost {
    background: rgba(255,255,255,.08) !important; color: #fff !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: var(--pk-radius) !important; padding: .5rem 1.05rem !important;
    font-size: .78rem !important; font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: .4rem; transition: all .15s; white-space: nowrap;
}
.pk-btn-hero-ghost:hover { background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.4) !important; color: #fff !important; transform: none !important; }

/* ═══ KPI CARDS — white enterprise cards with accent icons ═══ */
.pk-kpi {
    border-radius: var(--pk-radius-xl) !important;
    padding: 1.2rem 1.3rem !important;
    color: var(--pk-heading) !important;
    position: relative; overflow: hidden; height: 100%;
    display: flex; align-items: center; gap: 1rem;
    background: #fff !important;
    border: 1px solid var(--pk-border) !important;
    box-shadow: var(--pk-shadow-sm) !important;
    transition: box-shadow .18s, border-color .18s; transform: none !important;
}
.pk-kpi:hover { transform: none !important; box-shadow: var(--pk-shadow-md) !important; border-color: var(--pk-primary-200) !important; }
.pk-kpi::before { display: none !important; }
.pk-kpi::after {
    content: ''; position: absolute; top: 0; left: 0; right: auto; bottom: 0;
    width: 4px; border-radius: 0; background: var(--pk-accent, var(--pk-primary));
}
.pk-kpi-ico {
    width: 46px; height: 46px; border-radius: var(--pk-radius-lg) !important;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
    flex-shrink: 0; position: relative; z-index: 2;
    background: var(--pk-accent-bg, var(--pk-primary-50)) !important;
    color: var(--pk-accent, var(--pk-primary)) !important;
}
.pk-kpi-val { font-size: 1.65rem; font-weight: 800 !important; line-height: 1; letter-spacing: -.02em; position: relative; z-index: 2; color: var(--pk-heading) !important; }
.pk-kpi-lbl { font-size: .74rem; opacity: 1 !important; margin-top: .25rem; font-weight: 600; position: relative; z-index: 2; color: var(--pk-text-muted) !important; }
.pk-kpi-sub { font-size: .66rem; opacity: 1 !important; margin-top: .3rem; font-weight: 600; position: relative; z-index: 2; color: var(--pk-text-faint) !important; }

.pk-kpi-indigo  { --pk-accent: var(--pk-primary);      --pk-accent-bg: var(--pk-primary-50); background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }
.pk-kpi-sky     { --pk-accent: var(--pk-info);         --pk-accent-bg: var(--pk-info-bg);    background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }
.pk-kpi-purple  { --pk-accent: #3f5fd0;                --pk-accent-bg: var(--pk-primary-50); background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }
.pk-kpi-teal    { --pk-accent: #0d9488;                --pk-accent-bg: #effcfa;              background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }
.pk-kpi-emerald { --pk-accent: var(--pk-success);      --pk-accent-bg: var(--pk-success-bg); background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }
.pk-kpi-amber   { --pk-accent: var(--pk-warning);      --pk-accent-bg: var(--pk-warning-bg); background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }
.pk-kpi-rose    { --pk-accent: var(--pk-danger);       --pk-accent-bg: var(--pk-danger-bg);  background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }
.pk-kpi-pink    { --pk-accent: var(--pk-danger);       --pk-accent-bg: var(--pk-danger-bg);  background: #fff !important; box-shadow: var(--pk-shadow-sm) !important; }

/* ═══ PILLS / BADGES / DOTS ═══ */
.pk-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; padding: .26rem .68rem; border-radius: 50px; letter-spacing: .03em; white-space: nowrap; }
.pk-pill-active   { background: var(--pk-success-bg) !important; color: var(--pk-success-text) !important; }
.pk-pill-inactive { background: #f1f5f9 !important; color: #64748b !important; }
.pk-pill-pending  { background: var(--pk-warning-bg) !important; color: var(--pk-warning-text) !important; }
.pk-pill-failed   { background: var(--pk-danger-bg) !important; color: var(--pk-danger-text) !important; }
.pk-pill-info     { background: var(--pk-info-bg) !important; color: var(--pk-info-text) !important; }
.pk-pill-warning  { background: var(--pk-warning-bg) !important; color: var(--pk-warning-text) !important; }
.pk-pill-danger   { background: var(--pk-danger-bg) !important; color: var(--pk-danger-text) !important; }
.pk-pill-purple   { background: var(--pk-primary-50) !important; color: var(--pk-primary) !important; }
.pk-dot { width: 6px; height: 6px; border-radius: 50%; }
.pk-dot-g { background: var(--pk-success); }
.pk-dot-y { background: var(--pk-warning); }
.pk-dot-r { background: var(--pk-danger); }
.pk-dot-b { background: var(--pk-primary); }
.pk-dot-s { background: var(--pk-text-faint); }

.pk-badge { padding: .25rem .7rem; border-radius: 50px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pk-badge-success { background: var(--pk-success-bg) !important; color: var(--pk-success-text) !important; }
.pk-badge-warning { background: var(--pk-warning-bg) !important; color: var(--pk-warning-text) !important; }
.pk-badge-danger  { background: var(--pk-danger-bg) !important; color: var(--pk-danger-text) !important; }
.pk-badge-info    { background: var(--pk-info-bg) !important; color: var(--pk-info-text) !important; }
.pk-badge-muted   { background: #f1f5f9 !important; color: #64748b !important; }

.pk-code-chip {
    font-size: .72rem; font-weight: 700;
    color: var(--pk-primary) !important; background: var(--pk-primary-50) !important;
    border: 1px solid var(--pk-primary-100);
    padding: .18rem .5rem; border-radius: var(--pk-radius-sm);
    font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace; letter-spacing: .03em; display: inline-block;
}

/* ═══ FORMS ═══ */
.pk-label { display: block; font-size: .74rem; font-weight: 700; color: var(--pk-text); margin-bottom: .38rem; letter-spacing: .01em; }
.pk-label .req { color: var(--pk-danger); margin-left: 2px; }
.pk-hint { font-size: .7rem; color: var(--pk-text-faint); margin-top: .3rem; }
.pk-input-wrap { position: relative; }
.pk-input-wrap .pk-input-ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--pk-text-faint); font-size: .9rem; pointer-events: none; z-index: 2; }
.pk-input-wrap .pk-input, .pk-input-wrap .form-control, .pk-input-wrap .form-select,
.pk-input-wrap input, .pk-input-wrap select, .pk-input-wrap textarea { padding-left: 2.4rem !important; }

.pk-input, .form-control, .form-select {
    border-radius: var(--pk-radius) !important;
    border: 1px solid var(--pk-border-strong) !important;
    padding: .58rem .85rem;
    font-size: .85rem !important; color: var(--pk-heading) !important; background: #fff !important;
    transition: border-color .15s, box-shadow .15s;
}
.pk-input { width: 100%; }
.pk-input:focus, .form-control:focus, .form-select:focus {
    border-color: var(--pk-primary) !important; background: #fff !important;
    box-shadow: 0 0 0 3px rgba(26,86,219,.14) !important; outline: none;
}
.pk-input::placeholder, .form-control::placeholder { color: #a9b6c8 !important; }
.pk-input.is-invalid, .form-control.is-invalid, .form-select.is-invalid { border-color: var(--pk-danger) !important; }

/* Native single <select> dropdowns get one consistent themed chevron across
   browsers, with room so long option text (e.g. long location names) never
   collides with the arrow. Multi-selects keep their native rendering. */
select.pk-input:not([multiple]), select.form-control:not([multiple]), .form-select:not([multiple]) {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 2rem !important;
    text-overflow: ellipsis;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .7rem center !important;
}
.pk-input.is-invalid:focus, .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(224,36,36,.12) !important; }
.invalid-feedback { font-size: .72rem; margin-top: .3rem; color: var(--pk-danger) !important; }

.form-check-input { border: 1px solid var(--pk-border-strong); }
.form-check-input:checked { background-color: var(--pk-primary) !important; border-color: var(--pk-primary) !important; }
.form-check-input:focus { border-color: var(--pk-primary); box-shadow: 0 0 0 3px rgba(26,86,219,.14); }
.pk-section .form-check-input[type="checkbox"] { width: 2.4rem; height: 1.3rem; border-radius: 50px; cursor: pointer; border: 2px solid #cbd5e1; background-color: #cbd5e1; transition: all .2s; }
.pk-section .form-check-input[type="checkbox"]:checked { background-color: var(--pk-primary) !important; border-color: var(--pk-primary) !important; }

/* ═══ BUTTONS ═══ */
.pk-btn-primary, .btn-primary {
    background: var(--pk-primary) !important; color: #fff !important;
    border: 1px solid var(--pk-primary) !important; border-radius: var(--pk-radius) !important;
    padding: .55rem 1.3rem; font-size: .84rem; font-weight: 600 !important;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none;
    transition: background .15s, box-shadow .15s;
    box-shadow: 0 1px 2px rgba(16,30,54,.12) !important; cursor: pointer;
}
.pk-btn-primary:hover, .btn-primary:hover { background: var(--pk-primary-hover) !important; border-color: var(--pk-primary-hover) !important; color: #fff !important; transform: none !important; box-shadow: 0 2px 6px rgba(26,86,219,.3) !important; }
.pk-btn-primary:active, .btn-primary:active { background: var(--pk-primary-active) !important; }

.pk-btn-success, .btn-success {
    background: var(--pk-success) !important; color: #fff !important;
    border: 1px solid var(--pk-success) !important; border-radius: var(--pk-radius) !important;
    padding: .55rem 1.3rem; font-size: .84rem; font-weight: 600 !important;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none;
    transition: all .15s; box-shadow: 0 1px 2px rgba(16,30,54,.12) !important; cursor: pointer;
}
.pk-btn-success:hover, .btn-success:hover { background: #0b8a5f !important; border-color: #0b8a5f !important; color: #fff !important; transform: none !important; }

.pk-btn-secondary, .btn-secondary, .btn-light {
    background: #fff !important; color: var(--pk-text) !important;
    border: 1px solid var(--pk-border-strong) !important; border-radius: var(--pk-radius) !important;
    padding: .55rem 1.15rem; font-size: .84rem; font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none;
    transition: all .15s; cursor: pointer; box-shadow: var(--pk-shadow-xs);
}
.pk-btn-secondary:hover, .btn-secondary:hover, .btn-light:hover { background: #f6f8fb !important; color: var(--pk-heading) !important; border-color: var(--pk-border-strong) !important; }

.pk-btn-danger, .btn-danger {
    background: var(--pk-danger) !important; color: #fff !important;
    border: 1px solid var(--pk-danger) !important; border-radius: var(--pk-radius) !important;
    padding: .55rem 1.15rem; font-size: .84rem; font-weight: 600 !important;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    transition: all .15s; box-shadow: 0 1px 2px rgba(16,30,54,.12) !important; cursor: pointer;
}
.pk-btn-danger:hover, .btn-danger:hover { background: #c81e1e !important; border-color: #c81e1e !important; color: #fff !important; transform: none !important; }

.btn-outline-primary { color: var(--pk-primary) !important; border-color: var(--pk-primary-200) !important; border-radius: var(--pk-radius) !important; font-weight: 600; }
.btn-outline-primary:hover { background: var(--pk-primary) !important; border-color: var(--pk-primary) !important; color: #fff !important; }
.btn-outline-secondary { border-radius: var(--pk-radius) !important; }
.btn-warning { border-radius: var(--pk-radius) !important; font-weight: 600 !important; }

.pk-btn-soft {
    background: var(--pk-primary-50) !important; color: var(--pk-primary) !important;
    border: 1px solid var(--pk-primary-100) !important; border-radius: var(--pk-radius-sm) !important;
    padding: .3rem .75rem; font-size: .72rem; font-weight: 700; text-decoration: none;
    display: inline-flex; align-items: center; gap: .3rem; transition: all .15s; white-space: nowrap;
}
.pk-btn-soft:hover { background: var(--pk-primary) !important; color: #fff !important; border-color: var(--pk-primary) !important; }

.pk-act-btn, .btn-icon { width: 31px; height: 31px; border-radius: var(--pk-radius-sm) !important; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; border: 1px solid transparent; cursor: pointer; transition: all .15s; text-decoration: none; padding: 0; }
.pk-act-view, .btn-light-info    { background: var(--pk-info-bg) !important; color: var(--pk-info) !important; }
.pk-act-view:hover, .btn-light-info:hover { background: var(--pk-info) !important; color: #fff !important; }
.pk-act-edit, .btn-light-primary { background: var(--pk-primary-50) !important; color: var(--pk-primary) !important; }
.pk-act-edit:hover, .btn-light-primary:hover { background: var(--pk-primary) !important; color: #fff !important; }
.pk-act-del, .btn-light-danger   { background: var(--pk-danger-bg) !important; color: var(--pk-danger) !important; }
.pk-act-del:hover, .btn-light-danger:hover { background: var(--pk-danger) !important; color: #fff !important; }
.btn-light-success { background: var(--pk-success-bg) !important; color: var(--pk-success) !important; }
.btn-light-success:hover { background: var(--pk-success) !important; color: #fff !important; }

/* ═══ TABLES ═══ */
.pk-table, .pk-table-new { font-size: .83rem; width: 100%; border-collapse: collapse; }
.pk-table thead th, .pk-table-new thead th {
    font-size: .66rem !important; text-transform: uppercase; letter-spacing: .07em;
    color: var(--pk-text-muted) !important; font-weight: 700 !important;
    background: #f8fafd !important; padding: .7rem 1.25rem !important;
    border: none !important; border-bottom: 1px solid var(--pk-border) !important;
}
.pk-table tbody tr, .pk-table-new tbody tr { border-bottom: 1px solid #f0f3f8; transition: background .12s; }
.pk-table tbody tr:last-child, .pk-table-new tbody tr:last-child { border-bottom: none; }
.pk-table tbody tr:hover td, .pk-table-new tbody tr:hover td { background: var(--pk-primary-50) !important; }
.pk-table tbody td, .pk-table-new tbody td { padding: .85rem 1.25rem !important; vertical-align: middle; border-color: var(--pk-border) !important; }
.table { color: var(--pk-text); }
.table thead th { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--pk-text-muted); font-weight: 700; background: #f8fafd; }

.pk-avatar-sm { width: 34px; height: 34px; border-radius: var(--pk-radius) !important; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; color: #fff; flex-shrink: 0; }

/* ═══ EMPTY STATES ═══ */
.pk-empty { text-align: center; padding: 3.5rem 2rem; }
.pk-empty-ico {
    width: 76px; height: 76px; border-radius: var(--pk-radius-xl) !important;
    background: var(--pk-primary-50) !important;
    border: 1px dashed var(--pk-primary-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--pk-primary-300) !important; margin: 0 auto 1.2rem;
}
.pk-empty h5 { font-weight: 800; color: var(--pk-heading); font-size: 1.02rem; margin-bottom: .4rem; }
.pk-empty p { font-size: .82rem; color: var(--pk-text-faint); margin-bottom: 1rem; max-width: 380px; margin-left: auto; margin-right: auto; }

/* ═══ FILTER / ACTION BARS ═══ */
.pk-filter-bar, .pk-action-bar {
    background: #fff !important; border-radius: var(--pk-radius-xl) !important;
    border: 1px solid var(--pk-border) !important; box-shadow: var(--pk-shadow-sm) !important;
    padding: .95rem 1.25rem;
}
.pk-filter-bar { margin-bottom: 1.25rem; }
.pk-action-bar { display: flex; align-items: center; gap: .75rem; }
.pk-search-wrap { position: relative; flex: 1; min-width: 220px; }
.pk-search-ico { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--pk-text-faint); font-size: .9rem; pointer-events: none; }
.pk-search-wrap .form-control, .pk-search-wrap .pk-input { padding-left: 2.4rem !important; }

/* ═══ PAGE HERO (form pages) ═══ */
.pk-page-hero { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.pk-page-hero-ico {
    width: 46px; height: 46px; border-radius: var(--pk-radius-lg) !important; flex-shrink: 0;
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    background: linear-gradient(135deg, var(--pk-primary), var(--pk-secondary)) !important;
    box-shadow: 0 4px 12px rgba(26,86,219,.3);
}
.pk-page-hero h4 { font-weight: 800; font-size: 1.22rem; margin: 0 0 .15rem; color: var(--pk-heading); letter-spacing: -.02em; }
.pk-page-hero p { margin: 0; font-size: .78rem; color: var(--pk-text-faint); }
.pk-fsec-num {
    width: 28px; height: 28px; border-radius: var(--pk-radius) !important;
    display: flex; align-items: center; justify-content: center;
    font-size: .76rem; font-weight: 800; color: #fff; flex-shrink: 0;
    background: var(--pk-primary) !important;
}

/* ═══ PAGINATION ═══ */
.pagination { gap: .3rem; margin: 0; }
.page-link { border-radius: var(--pk-radius-sm) !important; border: 1px solid var(--pk-border-strong) !important; color: var(--pk-text-muted) !important; font-size: .78rem; font-weight: 600; padding: .38rem .72rem; transition: all .15s; }
.page-link:hover { background: var(--pk-primary-50) !important; border-color: var(--pk-primary-200) !important; color: var(--pk-primary) !important; }
.page-item.active .page-link { background: var(--pk-primary) !important; border-color: var(--pk-primary) !important; color: #fff !important; }
.page-item.disabled .page-link { background: #f8fafd !important; color: #b9c4d3 !important; }

/* ═══ BOOTSTRAP COMPONENT OVERRIDES ═══ */
.alert { border-radius: var(--pk-radius-lg) !important; border: 1px solid transparent; font-size: .84rem; font-weight: 500; }
.alert-success { background: var(--pk-success-bg) !important; color: var(--pk-success-text) !important; border-color: #c3ecd8 !important; }
.alert-danger  { background: var(--pk-danger-bg) !important; color: var(--pk-danger-text) !important; border-color: #f5cccc !important; }
.alert-warning { background: var(--pk-warning-bg) !important; color: var(--pk-warning-text) !important; border-color: #f2e2b3 !important; }
.alert-info    { background: var(--pk-info-bg) !important; color: var(--pk-info-text) !important; border-color: #c4dff5 !important; }

.modal-content { border-radius: var(--pk-radius-xl) !important; border: 1px solid var(--pk-border) !important; box-shadow: var(--pk-shadow-lg) !important; }
.modal-header { border-bottom: 1px solid var(--pk-border) !important; padding: 1rem 1.4rem; }
.modal-header .modal-title { font-weight: 700; font-size: .95rem; color: var(--pk-heading); }
.modal-footer { border-top: 1px solid var(--pk-border) !important; padding: .9rem 1.4rem; }
.modal-backdrop.show { opacity: .4; }

.dropdown-menu { border-radius: var(--pk-radius-lg) !important; border: 1px solid var(--pk-border) !important; box-shadow: var(--pk-shadow-lg) !important; font-size: .83rem; }
.dropdown-item { font-weight: 500; color: var(--pk-text); }
.dropdown-item:hover { background: var(--pk-primary-50); color: var(--pk-primary-hover); }

.nav-tabs { border-bottom: 1px solid var(--pk-border); gap: .25rem; }
.nav-tabs .nav-link { border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--pk-text-muted); font-weight: 600; font-size: .84rem; padding: .6rem 1rem; }
.nav-tabs .nav-link:hover { color: var(--pk-primary); }
.nav-tabs .nav-link.active { color: var(--pk-primary) !important; border-bottom-color: var(--pk-primary) !important; background: transparent !important; }
.nav-pills .nav-link { border-radius: var(--pk-radius) !important; color: var(--pk-text-muted); font-weight: 600; font-size: .84rem; }
.nav-pills .nav-link.active { background: var(--pk-primary) !important; color: #fff !important; }

.badge.bg-primary, .bg-primary { background-color: var(--pk-primary) !important; }
.text-primary { color: var(--pk-primary) !important; }
.border-primary { border-color: var(--pk-primary) !important; }
.progress { border-radius: 50px; background: #edf1f7; }
.progress-bar { background-color: var(--pk-primary); }
.spinner-border.text-primary { color: var(--pk-primary) !important; }

.card { border-radius: var(--pk-radius-xl); border: 1px solid var(--pk-border); box-shadow: var(--pk-shadow-sm); }
.card-header { background: #fff; border-bottom: 1px solid var(--pk-border); font-weight: 700; }

.toast { border-radius: var(--pk-radius-lg) !important; border: none; box-shadow: var(--pk-shadow-lg) !important; }
.tooltip-inner { border-radius: var(--pk-radius-sm); background: var(--pk-navy-900); font-size: .72rem; font-weight: 600; }