/* ==========================================================================
   KikPay – Professional UI theme (Admin + Agent panels share these tokens)
   Loaded LAST in every layout / login page so it wins the cascade.
   UI only: colours, contrast, sizing, switches. No behaviour changes.
   ========================================================================== */

:root {
    /* Brand */
    --kp-navy-950: #061633;
    --kp-navy-900: #0A1F44;
    --kp-navy-800: #0F2D63;
    --kp-primary: #0F3D8A;
    --kp-primary-hover: #0B2E6B;
    --kp-primary-soft: #E7EEFA;
    --kp-link: #1D4ED8;
    --kp-accent: #F2A93B;

    /* Surfaces & text (all text/background pairs below are >= WCAG AA) */
    --kp-bg: #F1F5F9;
    --kp-surface: #FFFFFF;
    --kp-border: #CBD5E1;
    --kp-border-strong: #94A3B8;
    --kp-text: #0F172A;
    --kp-text-2: #334155;
    --kp-text-3: #475569;

    /* Status */
    --kp-success: #047857;
    --kp-danger: #B91C1C;
    --kp-warning: #B45309;
    --kp-switch-on: #047857;
    --kp-switch-off: #64748B;

    /* Existing variable names re-pointed at the new palette */
    --slds-brand-primary: var(--kp-primary);
    --slds-brand-primary-light: #2563C9;
    --slds-brand-primary-dark: var(--kp-primary-hover);
    --slds-brand-accent: var(--kp-accent);
    --slds-brand-accent-light: #F7C46B;
    --slds-text: var(--kp-text);
    --slds-text-secondary: var(--kp-text-3);
    --slds-background: var(--kp-bg);
    --slds-border: var(--kp-border);

    /* Agent panel variables */
    --brand-blue: #0F3D8A;
    --brand-blue-dark: #0B2E6B;
    --brand-vibrant-blue: #2563C9;
    --brand-orange: #0F3D8A;
    --brand-red: #2563C9;
    --brand-yellow: #F2A93B;
    --sidebar-bg: #0A1F44;

    /* Login page variables (admin + agent) */
    --navy: #0A1F44;
    --navy-dark: #061633;
    --blue: #0F3D8A;
    --red: #B91C1C;
    --amber: #F2A93B;
}

/* ------------------------------------------------------------------ base */
body.kp-app,
body.kp-app .slds-main-container {
    background-color: var(--kp-bg) !important;
    color: var(--kp-text);
}

.kp-app .slds-page-header__title { color: var(--kp-text); }

.kp-app .slds-text-color_weak,
.kp-app .slds-text-body_small,
.kp-app .slds-form-element__help,
.kp-app .slds-page-header__name-meta {
    color: var(--kp-text-3) !important;
}
.kp-app .slds-text-color_default { color: var(--kp-text) !important; }
.kp-app .slds-text-color_success { color: var(--kp-success) !important; }
.kp-app .slds-text-color_error   { color: var(--kp-danger) !important; }
.kp-app .slds-text-color_warning { color: var(--kp-warning) !important; }
.kp-app .slds-text-title_caps    { color: var(--kp-text-2); font-weight: 700; letter-spacing: .04em; }

/* ----------------------------------------------------------------- cards */
.kp-app .slds-card,
.kp-app .slds-box {
    background: var(--kp-surface);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
}
.kp-app .slds-card__header { border-bottom: 1px solid #E2E8F0; }
.kp-app .slds-page-header {
    background: var(--kp-surface);
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
/* Navy card headers keep white text */
.kp-app .slds-card__header[style*="--slds-brand-primary"],
.kp-app .slds-card__header[style*="--brand-blue"],
.kp-app .slds-card__header.slds-theme_shade[style*="background"] {
    background: var(--kp-primary) !important;
}
.kp-app .slds-text-color_inverse,
.kp-app .slds-card__header[style*="background: var(--"] .slds-card__header-title,
.kp-app .slds-card__header[style*="background: var(--"] .slds-card__header-title * {
    color: #fff !important;
}

/* --------------------------------------------------------------- buttons */
.kp-app .slds-button { font-weight: 600; }

.kp-app .slds-button_brand,
.kp-app .btn-primary {
    background: var(--kp-primary) !important;
    border: 1px solid var(--kp-primary) !important;
    color: #fff !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .15);
}
.kp-app .slds-button_brand:hover,
.kp-app .slds-button_brand:focus,
.kp-app .btn-primary:hover {
    background: var(--kp-primary-hover) !important;
    border-color: var(--kp-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 61, 138, .35) !important;
}
.kp-app .slds-button_brand:disabled,
.kp-app .slds-button[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.kp-app .slds-button_neutral,
.kp-app .btn-default,
.kp-app .btn-light {
    background: #fff !important;
    border: 1px solid var(--kp-primary) !important;
    color: var(--kp-primary) !important;
    border-radius: 8px !important;
}
.kp-app .slds-button_neutral:hover,
.kp-app .btn-default:hover,
.kp-app .btn-light:hover {
    background: var(--kp-primary-soft) !important;
    border-color: var(--kp-primary-hover) !important;
    color: var(--kp-primary-hover) !important;
}

.kp-app .slds-button_destructive {
    background: var(--kp-danger) !important;
    border-color: var(--kp-danger) !important;
    color: #fff !important;
}
.kp-app .slds-button_success {
    background: var(--kp-success) !important;
    border-color: var(--kp-success) !important;
    color: #fff !important;
}
.kp-app .slds-button_icon,
.kp-app .slds-button_icon-border {
    color: var(--kp-text-2);
}
.kp-app .slds-button_icon-border { border-color: var(--kp-border-strong) !important; background: #fff; }

/* Clear keyboard focus for everyone */
.kp-app :focus-visible {
    outline: 3px solid rgba(37, 99, 201, .45) !important;
    outline-offset: 1px;
}
.kp-app :focus:not(:focus-visible) { outline: none !important; }

/* ----------------------------------------------------------------- forms */
.kp-app .slds-form-element__label {
    color: var(--kp-text-2);
    font-weight: 600;
}
.kp-app .slds-input,
.kp-app .slds-select,
.kp-app .slds-textarea,
.kp-app select,
.kp-app .form-control,
.kp-app .select2-container--default .select2-selection--single,
.kp-app .select2-container--default .select2-selection--multiple {
    background-color: #fff !important;
    color: var(--kp-text) !important;
    border: 1px solid var(--kp-border-strong) !important;
    border-radius: 8px !important;
    font-size: .875rem;
}
.kp-app .slds-input:not(textarea):not([type="checkbox"]):not([type="radio"]),
.kp-app .slds-select,
.kp-app select:not([multiple]),
.kp-app .form-control:not(textarea) {
    height: auto !important;
    min-height: 2.5rem;
}
.kp-app .select2-container--default .select2-selection--single {
    height: 2.5rem !important;
    display: flex;
    align-items: center;
}
.kp-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--kp-text) !important;
    line-height: 2.25rem;
}
.kp-app .select2-container--default .select2-selection--single .select2-selection__arrow { height: 2.25rem; }
.kp-app .slds-input::placeholder,
.kp-app .slds-textarea::placeholder,
.kp-app .form-control::placeholder { color: #64748B !important; opacity: 1; }

.kp-app .slds-input:focus,
.kp-app .slds-select:focus,
.kp-app .slds-textarea:focus,
.kp-app select:focus,
.kp-app .form-control:focus,
.kp-app .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--kp-primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 61, 138, .18) !important;
    outline: none !important;
}
.kp-app .slds-input[disabled],
.kp-app .slds-input[readonly],
.kp-app select[disabled] {
    background-color: #EEF2F7 !important;
    color: var(--kp-text-2) !important;
}
.kp-app .slds-input__icon { color: var(--kp-text-3) !important; fill: var(--kp-text-3); }
.kp-app .select2-results__option--highlighted[aria-selected] { background: var(--kp-primary) !important; color: #fff !important; }
.kp-app .select2-dropdown { border-color: var(--kp-border-strong) !important; }

/* ------------------------------------------------------ switches (toggle) */
.slds-checkbox_toggle .slds-form-element__label { color: var(--kp-text-2); font-weight: 600; }

/* OFF: slate track, white knob, clear border */
.slds-checkbox_toggle .slds-checkbox_faux {
    background-color: var(--kp-switch-off) !important;
    border: 2px solid var(--kp-switch-off) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .25);
    transition: background-color .2s ease, border-color .2s ease;
}
.slds-checkbox_toggle .slds-checkbox_faux:after {
    background-color: #fff !important;
    border: 0 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .45);
}
/* ON: strong green track */
.slds-checkbox_toggle input[type="checkbox"]:checked ~ .slds-checkbox_faux,
.slds-checkbox_toggle input[type="checkbox"]:checked ~ .slds-checkbox_faux_container .slds-checkbox_faux {
    background-color: var(--kp-switch-on) !important;
    border-color: var(--kp-switch-on) !important;
}
.slds-checkbox_toggle input[type="checkbox"]:focus ~ .slds-checkbox_faux,
.slds-checkbox_toggle input[type="checkbox"]:focus ~ .slds-checkbox_faux_container .slds-checkbox_faux {
    box-shadow: 0 0 0 3px rgba(37, 99, 201, .4) !important;
}
.slds-checkbox_toggle input[type="checkbox"][disabled] ~ .slds-checkbox_faux_container { opacity: .5; }

/* Explicit ON / OFF text beside toggles that don't already show a status word */
.slds-checkbox_toggle .slds-checkbox_faux_container:not(:has(.slds-checkbox_on)) {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.slds-checkbox_toggle .slds-checkbox_faux_container:not(:has(.slds-checkbox_on))::after {
    content: "OFF";
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--kp-text-3);
    min-width: 1.6rem;
}
.slds-checkbox_toggle input[type="checkbox"]:checked ~ .slds-checkbox_faux_container:not(:has(.slds-checkbox_on))::after {
    content: "ON";
    color: var(--kp-success);
}
/* Where SLDS already renders Active/Inactive-style words, make them readable */
.slds-checkbox_toggle .slds-checkbox_on,
.slds-checkbox_toggle .slds-checkbox_off { font-weight: 700; }
.slds-checkbox_toggle .slds-checkbox_on  { color: var(--kp-success) !important; }
.slds-checkbox_toggle .slds-checkbox_off { color: var(--kp-text-3) !important; }

/* Checkboxes & radios – visible borders, strong checked state */
.kp-app .slds-checkbox .slds-checkbox_faux,
.kp-app .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux,
.kp-app .slds-radio .slds-radio_faux,
.kp-app .slds-radio [type="radio"] + .slds-radio__label .slds-radio_faux {
    border: 2px solid var(--kp-border-strong) !important;
    background: #fff !important;
}
.kp-app .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux,
.kp-app .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox__label .slds-checkbox_faux {
    background: var(--kp-primary) !important;
    border-color: var(--kp-primary) !important;
}
.kp-app .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux,
.kp-app .slds-radio [type="radio"]:checked ~ .slds-radio__label .slds-radio_faux {
    border-color: var(--kp-primary) !important;
    background: #fff !important;
}
.kp-app .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux:after,
.kp-app .slds-radio [type="radio"]:checked ~ .slds-radio__label .slds-radio_faux:after {
    background: var(--kp-primary) !important;
}
.kp-app .slds-radio .slds-form-element__label,
.kp-app .slds-radio__label .slds-form-element__label { color: var(--kp-text) !important; }

/* ---------------------------------------------------------------- tables */
.kp-app .slds-table {
    background: #fff;
    color: var(--kp-text);
    border-color: #E2E8F0;
}
.kp-app .slds-table thead th,
.kp-app .slds-table thead th .slds-truncate,
.kp-app .slds-table_bordered thead th,
.kp-app table.dataTable thead th {
    background: #E9EEF6 !important;
    color: var(--kp-text) !important;
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--kp-border) !important;
}
.kp-app .slds-table tbody td,
.kp-app .slds-table tbody th {
    color: var(--kp-text);
    border-top: 1px solid #E2E8F0;
}
.kp-app .slds-table tbody tr:hover > td,
.kp-app .slds-table tbody tr:hover > th,
.kp-app .slds-table_striped tbody tr:nth-of-type(even):hover > td { background: var(--kp-primary-soft) !important; }
.kp-app .slds-table_striped tbody tr:nth-of-type(even) > td { background: #F8FAFC; }

/* DataTables chrome */
.kp-app .dataTables_wrapper .dataTables_info,
.kp-app .dataTables_wrapper .dataTables_length,
.kp-app .dataTables_wrapper .dataTables_filter { color: var(--kp-text-2); }
.kp-app .page-item .page-link { color: var(--kp-primary); border-color: var(--kp-border); }
.kp-app .page-item.active .page-link { background: var(--kp-primary) !important; border-color: var(--kp-primary) !important; color: #fff !important; }
.kp-app .page-item.disabled .page-link { color: #64748B; }

/* ------------------------------------------------------- badges / status */
.kp-app .slds-badge { font-weight: 700; }
.kp-app .slds-theme_success { background: var(--kp-success) !important; color: #fff !important; }
.kp-app .slds-theme_error   { background: var(--kp-danger)  !important; color: #fff !important; }
.kp-app .slds-theme_warning { background: #FBBF24 !important; color: #3B2300 !important; }
.kp-app .slds-theme_info    { background: var(--kp-primary) !important; color: #fff !important; }

/* ---------------------------------------------------------------- modals */
.kp-app .slds-modal__header {
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 12px 12px 0 0;
}
.kp-app .slds-modal__title { color: var(--kp-text) !important; font-weight: 700; }
.kp-app .slds-modal__container { border-radius: 12px; overflow: hidden; }
.kp-app .slds-modal__footer { background: #F8FAFC; border-top: 1px solid #E2E8F0; }
.kp-app .slds-modal__content { color: var(--kp-text); }

/* SweetAlert2 */
.swal2-popup { border-radius: 14px !important; font-family: inherit; }
.swal2-title { color: var(--kp-text) !important; }
.swal2-html-container { color: var(--kp-text-2) !important; }
.swal2-styled.swal2-confirm {
    background: var(--kp-primary) !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.swal2-styled.swal2-cancel { background: #475569 !important; border-radius: 8px !important; }
.swal2-styled.swal2-deny   { background: var(--kp-danger) !important; border-radius: 8px !important; }

/* ------------------------------------------------- transaction side drawer */
.sidebar-header {
    background: linear-gradient(135deg, var(--kp-navy-950) 0%, var(--kp-navy-800) 100%) !important;
    color: #fff;
}
.sidebar-header * { color: #fff; }
.detail-card { border: 1px solid #E2E8F0; border-radius: 10px; }
.detail-card:hover { border-color: var(--kp-primary) !important; box-shadow: 0 4px 12px rgba(15, 61, 138, .12) !important; }
.detail-label { color: var(--kp-text-3) !important; font-size: 11px !important; font-weight: 700 !important; }
.detail-value { color: var(--kp-text) !important; font-size: 13px !important; font-weight: 700 !important; word-break: break-word; }
.sidebar-footer { border-top: 1px solid #E2E8F0; }

/* Transaction receipt */
.receipt-card-primary, .receipt-total-card { background: var(--kp-navy-900) !important; }
.receipt-subtitle, .receipt-footer-text, .receipt-footer-link,
.receipt-card-text-muted, .receipt-table th { color: var(--kp-text-3) !important; }
.receipt-card-primary .receipt-card-text-muted,
.receipt-total-card-label { color: #BFD3F5 !important; }
.receipt-title { color: var(--kp-text) !important; }

/* ===================================================================
   ADMIN PANEL – header, sidebar, logo
   =================================================================== */
.kp-admin .slds-global-header_container {
    background: #fff;
    border-bottom: 1px solid var(--kp-border);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.kp-admin .slds-global-header {
    background: #fff !important;
    height: 4rem;
    padding: 0 1rem;
    border: 0;
}
.kp-admin .slds-global-header .slds-button_icon,
.kp-admin .slds-global-header .slds-button_icon-container,
.kp-admin .slds-global-header .fas {
    color: var(--kp-navy-800);
}
.kp-admin .slds-global-header .slds-button_icon-border { border-color: var(--kp-border-strong) !important; }
.kp-admin .slds-global-header .slds-button_icon:hover { background: var(--kp-primary-soft); }
.kp-admin .slds-brand-logo {
    height: 2.75rem !important;           /* was 2rem – larger, clearly visible */
    max-width: 11rem;
    flex-shrink: 0;
    width: auto;
    object-fit: contain;
    margin-right: .85rem;
}
.kp-admin #headerCompanyName { color: var(--kp-navy-800) !important; font-size: 1.1rem; font-weight: 800; }
.kp-admin .slds-dropdown { border: 1px solid var(--kp-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); }
.kp-admin .slds-dropdown__item a { color: var(--kp-text) !important; }
.kp-admin .slds-dropdown__item a:hover { background: var(--kp-primary-soft); }
.kp-admin .slds-dropdown__item a.slds-text-color_error { color: var(--kp-danger) !important; }

.kp-admin .slds-sidebar-container {
    background: linear-gradient(180deg, var(--kp-navy-900) 0%, var(--kp-navy-950) 100%) !important;
    border-right: 0 !important;
    box-shadow: 2px 0 12px rgba(6, 22, 51, .25) !important;
}
.kp-admin .slds-sidebar-container .slds-nav-vertical,
.kp-admin .slds-sidebar-container .slds-nav-vertical_shade { background: transparent !important; }
.kp-admin .slds-sidebar-container .slds-nav-vertical__title {
    color: #9FB6DD !important;
    font-size: .7rem !important;
    font-weight: 800 !important;
    letter-spacing: .08em !important;
}
.kp-admin .slds-sidebar-container .slds-nav-vertical__action,
.kp-admin .slds-sidebar-container .premium-nav-action {
    color: #E6EEFB !important;
    background: transparent !important;
}
.kp-admin .slds-sidebar-container .slds-nav-vertical__action i,
.kp-admin .slds-sidebar-container .slds-icon-text-default,
.kp-admin .slds-sidebar-container .text-primary { color: #BFD3F5 !important; }
.kp-admin .slds-sidebar-container .premium-nav-action:hover,
.kp-admin .slds-sidebar-container .submenu-action:hover {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}
.kp-admin .slds-sidebar-container .slds-nav-vertical__action:hover i { color: #fff !important; }
.kp-admin .slds-sidebar-container .submenu-list {
    background: rgba(255, 255, 255, .04) !important;
    border-left: 2px solid rgba(191, 211, 245, .35) !important;
}
.kp-admin .slds-sidebar-container .submenu-action { color: #D3E0F7 !important; }
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active > .premium-nav-action,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active > .submenu-action,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active .premium-nav-action {
    background: var(--kp-primary) !important;
    border-color: var(--kp-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--kp-accent);
}
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active .premium-nav-action i,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active .submenu-action i { color: #fff !important; }
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active::before { background: transparent !important; }
.kp-admin .slds-sidebar-container::-webkit-scrollbar-thumb { background: rgba(191, 211, 245, .35); }

.kp-admin .slds-main-container footer {
    background: transparent !important;
    border-top: 1px solid var(--kp-border);
}

/* ===================================================================
   AGENT PANEL – header, sidebar, logo
   =================================================================== */
.kp-agent .slds-brand-header {
    background: #fff;
    height: 68px;
    border-bottom: 1px solid var(--kp-border);
    box-shadow: 0 1px 4px rgba(15, 23, 42, .08);
}
.kp-agent .slds-brand-header .slds-text-heading_small { color: var(--kp-navy-800) !important; font-weight: 800; font-size: 1.05rem; }
.kp-agent .slds-main-container { padding-top: 68px; }
.kp-agent .slds-brand-header .slds-badge {
    background: var(--kp-primary) !important;
    color: #fff !important;
    font-size: .85rem;
    height: 36px !important;
}
.kp-agent .user-profile-badge,
.kp-agent #userMenuBtn { border: 1px solid var(--kp-border-strong) !important; background: #fff !important; }
.kp-agent #userMenuBtn .slds-text-body_small { color: var(--kp-text) !important; }
.kp-agent #userMenuBtn .slds-avatar__initials { background: var(--kp-primary) !important; color: #fff !important; }
.kp-agent #userDropdown a { color: var(--kp-text-2) !important; font-size: 13px !important; }
.kp-agent #userDropdown a:hover { background: var(--kp-primary-soft) !important; color: var(--kp-primary) !important; }
.kp-agent #userDropdown a[href*="LogOff"] { color: var(--kp-danger) !important; }

.kp-agent .slds-brand-sidebar {
    background: linear-gradient(180deg, var(--kp-navy-900) 0%, var(--kp-navy-950) 100%) !important;
    box-shadow: 2px 0 12px rgba(6, 22, 51, .25);
}
/* Logo block: larger, on a white plate so any logo colour is clearly visible */
.kp-agent .brand-logo-container {
    background: var(--kp-navy-950) !important;
    height: 92px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.kp-agent .brand-logo-container .brand-logo-img {
    max-height: 64px;                     /* was 40px */
    max-width: 100%;
    width: auto;
    object-fit: contain;
    background: #fff;
    padding: 6px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.kp-agent .slds-brand-sidebar > .slds-scrollable_y { height: calc(100vh - 92px - 76px) !important; }

.kp-agent .slds-brand-sidebar .slds-nav-vertical__title { color: #9FB6DD !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .08em !important; }
.kp-agent .slds-brand-sidebar .slds-nav-vertical__action {
    color: #E6EEFB !important;
    font-weight: 500;
    border-radius: 8px;
}
.kp-agent .slds-brand-sidebar .slds-nav-vertical__action i,
.kp-agent .slds-brand-sidebar .slds-icon_container i { color: #BFD3F5; }
.kp-agent .slds-brand-sidebar .slds-nav-vertical__action:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .12) !important;
}
.kp-agent .slds-brand-sidebar .slds-nav-vertical__action:hover i { color: #fff; }
.kp-agent .slds-brand-sidebar .slds-is-active .slds-nav-vertical__action {
    background: var(--kp-primary) !important;
    color: #fff !important;
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--kp-accent) !important;
}
.kp-agent .slds-brand-sidebar .slds-is-active .slds-nav-vertical__action i { color: #fff; }
.kp-agent .slds-brand-sidebar > .slds-p-around_medium { background: var(--kp-navy-950) !important; border-top: 1px solid rgba(255, 255, 255, .12); }
.kp-agent .slds-brand-sidebar > .slds-p-around_medium .slds-button {
    background: transparent !important;
    border: 1px solid #BFD3F5 !important;
    color: #fff !important;
    border-radius: 8px;
    height: 40px;
}
.kp-agent .slds-brand-sidebar > .slds-p-around_medium .slds-button:hover { background: #fff !important; color: var(--kp-navy-900) !important; }

/* Breadcrumb banner (agent) */
.kp-agent .slds-breadcrumb a { color: var(--kp-text-3) !important; }
.kp-agent .slds-breadcrumb .slds-text-title_caps { color: var(--kp-primary) !important; }
.kp-agent .slds-main-container h1.slds-text-heading_medium { color: var(--kp-navy-800) !important; }

/* ===================================================================
   LOGIN PAGES (admin + agent)
   =================================================================== */
body.kp-auth { background: var(--kp-navy-950) !important; }
body.kp-auth .bg-layer {
    background:
        radial-gradient(ellipse at 15% 85%, rgba(15, 61, 138, .85) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(37, 99, 201, .55) 0%, transparent 50%),
        var(--kp-navy-950) !important;
    animation: none !important;
}
body.kp-auth .card-header-gradient { background: linear-gradient(90deg, var(--kp-navy-900), var(--kp-primary), #2563C9) !important; }
body.kp-auth .auth-shell { box-shadow: 0 30px 70px -15px rgba(0, 0, 0, .55) !important; }
body.kp-auth .brand-panel {
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .08) 0, transparent 45%),
        linear-gradient(155deg, var(--kp-navy-950) 0%, var(--kp-navy-900) 50%, var(--kp-primary) 125%) !important;
}
/* Larger logo on a white plate (works for any logo colour) */
body.kp-auth .brand-mark { gap: 1rem; flex-wrap: wrap; }
body.kp-auth .brand-mark img {
    height: 64px !important;              /* was 34px */
    max-width: 220px;
    width: auto;
    object-fit: contain;
    filter: none !important;
    background: #fff;
    padding: 8px 14px;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
body.kp-auth .brand-mark span { font-size: 1.2rem; font-weight: 800; color: #fff; }
body.kp-auth .brand-copy p { color: rgba(255, 255, 255, .88) !important; }
body.kp-auth .brand-feature { color: #fff !important; }
body.kp-auth .brand-foot { color: rgba(255, 255, 255, .72) !important; }
body.kp-auth .brand-badge { background: rgba(242, 169, 59, .18) !important; border-color: rgba(242, 169, 59, .6) !important; color: #FFD99A !important; }

/* Logo shown on top of the form when the brand panel is hidden (small screens) */
body.kp-auth .kp-mobile-logo { display: none; text-align: center; margin-bottom: 1.25rem; }
body.kp-auth .kp-mobile-logo img { height: 60px; max-width: 220px; width: auto; object-fit: contain; }
@media (max-width: 900px) {
    body.kp-auth .kp-mobile-logo { display: block; }
}

body.kp-auth .form-head h2 { color: var(--kp-text) !important; }
body.kp-auth .form-head p,
body.kp-auth .footer-text { color: var(--kp-text-3) !important; }
body.kp-auth .slds-form-element__label,
body.kp-auth label.slds-form-element__label { color: var(--kp-text-2) !important; }
body.kp-auth .slds-input {
    background-color: #fff !important;
    border: 1px solid var(--kp-border-strong) !important;
    color: var(--kp-text) !important;
}
body.kp-auth .slds-input::placeholder { color: #64748B !important; opacity: 1; }
body.kp-auth .slds-input:focus {
    border-color: var(--kp-primary) !important;
    box-shadow: 0 0 0 3px rgba(15, 61, 138, .2) !important;
}
body.kp-auth .slds-input-has-icon .slds-input__icon { color: var(--kp-text-3) !important; }
body.kp-auth .btn-login,
body.kp-auth .slds-button_brand {
    background: var(--kp-primary) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 20px -6px rgba(15, 61, 138, .6) !important;
}
body.kp-auth .btn-login:hover,
body.kp-auth .slds-button_brand:hover { background: var(--kp-primary-hover) !important; }
body.kp-auth a,
body.kp-auth .forgot-link { color: var(--kp-link) !important; font-weight: 600; }
body.kp-auth .resend-link { color: var(--kp-link) !important; }
body.kp-auth .error-summary { background: #FEF2F2 !important; border: 1px solid #FCA5A5 !important; color: #991B1B !important; }
body.kp-auth .success-summary { background: #ECFDF5 !important; border: 1px solid #6EE7B7 !important; color: #065F46 !important; }
body.kp-auth .slds-checkbox .slds-form-element__label { color: var(--kp-text-2) !important; }
body.kp-auth .slds-checkbox_faux { border: 2px solid var(--kp-border-strong) !important; background: #fff !important; }
body.kp-auth .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux {
    background: var(--kp-primary) !important;
    border-color: var(--kp-primary) !important;
}
body.kp-auth .footer-links i { color: var(--kp-text-3) !important; }
body.kp-auth .footer-links i:hover { color: var(--kp-primary) !important; }
body.kp-auth .otp-container {
    background: var(--kp-primary-soft) !important;
    border: 1px solid #B6C9EC !important;
}
body.kp-auth .otp-container label.slds-form-element__label { color: var(--kp-primary) !important; }
body.kp-auth #locationStatus { color: var(--kp-text-3) !important; }

/* Password-reset pages: logo sits on the white card, make it clearly visible */
body.kp-auth .login-card .brand-logo { max-height: 72px !important; max-width: 240px; width: auto; object-fit: contain; }
body.kp-auth .form-panel .form-head > img { max-height: 64px !important; max-width: 220px; width: auto; object-fit: contain; }
body.kp-auth .info-summary { background: #EFF6FF !important; border: 1px solid #93C5FD !important; color: #1E3A8A !important; }
body.kp-auth .btn-submit { background: var(--kp-primary) !important; color: #fff !important; }
body.kp-auth .btn-submit:hover { background: var(--kp-primary-hover) !important; }
body.kp-auth .back-link a { color: var(--kp-link) !important; }

/* Agent: the fixed sidebar (z-index 102) sits over the fixed header (101) on desktop,
   which hides the page title – start the header content to the right of the sidebar. */
@media (min-width: 1025px) {
    .kp-agent .slds-brand-header { padding-left: calc(var(--sidebar-width, 260px) + 1.5rem); }
}

/* Sidebar hover fix: SLDS paints the whole <li> white on hover/focus, which hid the
   light sidebar text. Keep list items transparent; the link itself carries the hover. */
.kp-admin .slds-sidebar-container .slds-nav-vertical__item,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item:hover,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item:focus,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item:focus-within,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item:hover,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item:focus,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item:focus-within,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item.slds-is-active {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.kp-admin .slds-sidebar-container .slds-nav-vertical__item::before,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item::before { display: none !important; }

/* Hover/focus text stays light on the dark sidebar, in every state */
.kp-admin .slds-sidebar-container .slds-nav-vertical__action:hover,
.kp-admin .slds-sidebar-container .slds-nav-vertical__action:focus,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item:hover > .slds-nav-vertical__action,
.kp-admin .slds-sidebar-container .slds-nav-vertical__item:hover > .slds-nav-vertical__action *,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__action:hover,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__action:focus,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item:hover > .slds-nav-vertical__action,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item:hover > .slds-nav-vertical__action * {
    color: #fff !important;
}
.kp-admin .slds-sidebar-container .slds-nav-vertical__item:hover > .slds-nav-vertical__action,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item:hover > .slds-nav-vertical__action {
    background: rgba(255, 255, 255, .12) !important;
}
/* Active item keeps its solid blue even while hovered */
.kp-admin .slds-sidebar-container .slds-nav-vertical__item.slds-is-active:hover > .slds-nav-vertical__action,
.kp-agent .slds-brand-sidebar .slds-nav-vertical__item.slds-is-active:hover > .slds-nav-vertical__action {
    background: var(--kp-primary) !important;
}