/*
 * Organisation theme layered over the UBold admin template used by the
 * admin, applicant and panelist layouts. Colours come from System Settings
 * via the CSS variables set in resources/views/partials/brand-head.blade.php.
 */

body, .btn, .form-control, .form-select, h1, h2, h3, h4, h5, h6 {
    font-family: 'Mulish', 'Segoe UI', Roboto, sans-serif;
}

/* Top bar */
.navbar-custom,
body[data-topbar-color="dark"] .navbar-custom {
    background-color: var(--brand-primary) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.navbar-custom .topnav-menu .nav-link,
.navbar-custom .button-menu-mobile { color: rgba(255, 255, 255, .92) !important; }

/* Logo box: the organisation logo has dark text, keep it on white. */
.logo-box,
body[data-topbar-color="dark"] .logo-box {
    background-color: #fff !important;
    border-bottom: 3px solid var(--brand-accent);
}
.logo-box .logo-lg img { max-height: 54px; max-width: 220px; width: auto; height: auto; object-fit: contain; }
.logo-box .logo-sm img { max-height: 40px; width: auto; }
.logo-box .logo-light { display: none !important; }
.logo-box .logo-dark { display: block !important; }

/* Sidebar highlights */
#sidebar-menu > ul > li > a:hover,
#sidebar-menu > ul > li > a:focus,
#sidebar-menu > ul > li > a.active,
#sidebar-menu .menuitem-active > a,
#sidebar-menu .nav-second-level li a:hover,
#sidebar-menu .nav-second-level li.menuitem-active > a { color: var(--brand-primary) !important; }
#sidebar-menu .menu-title { color: var(--brand-primary-dark); font-weight: 700; }

/* Bootstrap primary -> brand primary */
.btn-primary, .btn-success {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-outline-primary { color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; }
.btn-outline-primary:hover { background-color: var(--brand-primary) !important; color: #fff !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.text-primary { color: var(--brand-primary-dark) !important; }
.border-primary { border-color: var(--brand-primary) !important; }
.page-item.active .page-link { background-color: var(--brand-primary); border-color: var(--brand-primary); }
.form-control:focus, .form-select:focus { border-color: var(--brand-primary); }
a:focus-visible, .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
    outline: 3px solid var(--brand-accent);
    outline-offset: 2px;
}

.footer { font-size: .85rem; }

/* ---------- Shared components used by the redesigned pages ---------- */

.kvb-page-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; padding: 1.25rem 0 .75rem;
}
.kvb-page-header h4 { margin: 0; font-weight: 800; }
.kvb-page-header p { margin: .15rem 0 0; color: #6c757d; }

.kvb-stat {
    display: flex; align-items: center; gap: 1rem;
    background: #fff; border-radius: .75rem; padding: 1.1rem 1.25rem;
    border: 1px solid #e9ecef; height: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    text-decoration: none;
}
.kvb-stat .kvb-stat-icon {
    flex: 0 0 48px; height: 48px; border-radius: .75rem;
    display: grid; place-items: center; font-size: 1.5rem;
    background: var(--brand-primary-soft); color: var(--brand-primary-dark);
}
.kvb-stat .kvb-stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: #212529; }
.kvb-stat .kvb-stat-label { color: #6c757d; font-size: .85rem; font-weight: 600; }
a.kvb-stat { color: inherit; transition: box-shadow .15s, transform .15s; }
a.kvb-stat:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-1px); }

/* Status badges: text + icon, never colour alone */
.kvb-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .25rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
    border: 1px solid transparent; white-space: nowrap;
}
.kvb-badge-applied { background: #e7f1ff; color: #0b4fa3; border-color: #b6d4fe; }
.kvb-badge-shortlisted { background: #e6f4ea; color: #1e6b2c; border-color: #a3d9b1; }
.kvb-badge-dropped { background: #f1f3f5; color: #495057; border-color: #dee2e6; }
.kvb-badge-open { background: #e6f4ea; color: #1e6b2c; border-color: #a3d9b1; }
.kvb-badge-closed { background: #fdecea; color: #a61b1b; border-color: #f5c2c0; }
.kvb-badge-pending { background: #fff4e5; color: #8a4b00; border-color: #ffd59e; }

/* Applicant profile stepper */
.kvb-stepper {
    list-style: none; margin: 0; padding: 0 0 .25rem;
    display: flex; gap: .25rem;
    overflow-x: auto; scrollbar-width: thin;
}
.kvb-stepper li { flex: 1 1 0; min-width: 92px; position: relative; }
.kvb-stepper li::before {
    content: ""; position: absolute; top: 18px; left: calc(-50% + 22px); right: calc(50% + 22px);
    height: 3px; background: #dee2e6; border-radius: 2px;
}
.kvb-stepper li:first-child::before { display: none; }
.kvb-stepper li.is-done::before, .kvb-stepper li.is-current::before { background: var(--brand-primary); }
.kvb-stepper a, .kvb-stepper .kvb-step-inner {
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    text-align: center; text-decoration: none; color: #6c757d; font-size: .78rem; font-weight: 600;
    padding: 0 .25rem .25rem; border-radius: .5rem;
}
.kvb-stepper .kvb-step-dot {
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 800; font-size: .95rem;
    background: #fff; border: 2px solid #ced4da; color: #6c757d; position: relative; z-index: 1;
}
.kvb-stepper li.is-done .kvb-step-dot { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.kvb-stepper li.is-current .kvb-step-dot {
    border-color: var(--brand-primary); color: var(--brand-primary-dark);
    box-shadow: 0 0 0 4px var(--brand-primary-soft);
}
.kvb-stepper li.is-current a, .kvb-stepper li.is-current .kvb-step-inner { color: #212529; }
.kvb-stepper-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; }
.kvb-progress { height: 8px; border-radius: 99px; background: #e9ecef; overflow: hidden; }
.kvb-progress > span { display: block; height: 100%; background: var(--brand-primary); border-radius: 99px; }

@media (max-width: 575.98px) {
    .kvb-stepper li { min-width: 56px; }
    .kvb-stepper .kvb-step-label { display: none; }
    .kvb-stepper li.is-current .kvb-step-label { display: block; }
}

.kvb-step-nav {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
    border-top: 1px solid #e9ecef; padding-top: 1rem; margin-top: 1rem;
}

.kvb-empty { text-align: center; padding: 2.5rem 1rem; color: #6c757d; }
.kvb-empty i { font-size: 2.5rem; color: #adb5bd; display: block; margin-bottom: .5rem; }

/* Review page */
.kvb-review-section { border: 1px solid #e9ecef; border-radius: .75rem; margin-bottom: 1rem; background: #fff; }
.kvb-review-section > header {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap;
    padding: .75rem 1rem; border-bottom: 1px solid #e9ecef; background: #f8f9fa; border-radius: .75rem .75rem 0 0;
}
.kvb-review-section > header h5 { margin: 0; font-weight: 800; font-size: 1rem; }
.kvb-review-section > .kvb-review-body { padding: 1rem; }
.kvb-dl { display: grid; grid-template-columns: minmax(140px, 35%) 1fr; gap: .4rem 1rem; margin: 0; }
.kvb-dl dt { color: #6c757d; font-weight: 600; }
.kvb-dl dd { margin: 0; word-break: break-word; }
@media (max-width: 575.98px) { .kvb-dl { grid-template-columns: 1fr; } .kvb-dl dd { margin-bottom: .5rem; } }

.list-group-item.active { background-color: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff !important; }
.list-group-item.active i { color: #fff; }

.content-page a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.kvb-stat) { color: var(--brand-primary-dark); }
.content-page a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item):not(.kvb-stat):hover { color: var(--brand-accent); }

.kvb-stepper li.is-done.is-current .kvb-step-dot { background: var(--brand-primary); color: #fff; }
.kvb-stepper a[aria-current="step"] .kvb-step-label { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 575.98px) {
    .kvb-stepper { gap: 0; }
    .kvb-stepper li { min-width: 0; }
    .kvb-stepper .kvb-step-dot { width: 32px; height: 32px; font-size: .85rem; }
    .kvb-stepper li::before { top: 15px; left: calc(-50% + 17px); right: calc(50% + 17px); }
    .kvb-stepper-meta > div:last-child { width: 100%; text-align: left !important; }
}