/* =============================================================================
   CSS VARIABLES
   ============================================================================= */
:root {
    --bt-primary: #688C41;
    --bt-primary-hover: #5A7938;
    --bt-primary-active: #4D6830;
    --bt-primary-light: #EAF3E2;
    --bt-primary-border: #C8DBB4;

    --bt-bg: #F6F8F5;
    --bt-surface: #FFFFFF;
    --bt-surface-subtle: #F1F4EE;
    --bt-surface-hover: #EEF2EA;

    --bt-border: #E3E8DE;
    --bt-border-strong: #D4DCCB;

    --bt-text: #172018;
    --bt-text-secondary: #556155;
    --bt-text-muted: #7A8578;

    --bt-success-bg: #E8F5E3;
    --bt-success-text: #3E7B35;

    --bt-warning-bg: #FFF3E2;
    --bt-warning-text: #C47A1F;

    --bt-info-bg: #E8F0FF;
    --bt-info-text: #3568D4;

    --bt-danger-bg: #FDECEC;
    --bt-danger-text: #C53B3B;

    --bt-radius-sm: 8px;
    --bt-radius-md: 10px;
    --bt-radius-lg: 16px;
    --bt-shadow-soft: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);

    --bs-primary: var(--bt-primary);
    --bs-primary-rgb: 104, 140, 65;
    --bs-secondary: var(--bt-text-secondary);
    --bs-secondary-rgb: 85, 97, 85;
    --bs-success: var(--bt-success-text);
    --bs-success-rgb: 62, 123, 53;
    --bs-body-bg: var(--bt-bg);
    --bs-body-color: var(--bt-text);
    --bs-border-color: var(--bt-border);
    --bs-link-color: var(--bt-primary);
    --bs-link-hover-color: var(--bt-primary-hover);
    --nav-color: var(--bt-primary);
    
    /* Donut chart colors */
    --red: #DC3545;
    --yellow: #FFC107;
    --green: #28A745;
    --blue: #2196F3;
}

/* =============================================================================
   BOOTSTRAP OVERRIDES
   ============================================================================= */
body {
    background: var(--bt-bg);
    color: var(--bt-text);
}

a {
    color: var(--bt-primary);
}

a:hover {
    color: var(--bt-primary-hover);
}

.text-muted {
    color: var(--bt-text-muted) !important;
}

.text-secondary {
    color: var(--bt-text-secondary) !important;
}

.bg-light {
    background-color: var(--bt-surface-subtle) !important;
}

.border,
.border-top,
.border-bottom,
.border-start {
    border-color: var(--bt-border) !important;
}

.btn {
    border-radius: var(--bt-radius-md);
    font-weight: 600;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--bt-primary-hover);
    --bs-btn-hover-border-color: var(--bt-primary-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bt-primary-active);
    --bs-btn-active-border-color: var(--bt-primary-active);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--bt-primary);
    --bs-btn-disabled-border-color: var(--bt-primary);
}

.btn-success {
    --bs-btn-bg: var(--bt-success-text);
    --bs-btn-border-color: var(--bt-success-text);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-bg: var(--bt-surface);
    --bs-btn-color: var(--bt-text);
    --bs-btn-border-color: var(--bt-border-strong);
    --bs-btn-hover-bg: var(--bt-surface-hover);
    --bs-btn-hover-color: var(--bt-text);
    --bs-btn-hover-border-color: var(--bt-border-strong);
    --bs-btn-active-bg: var(--bt-surface-subtle);
    --bs-btn-active-color: var(--bt-text);
    --bs-btn-active-border-color: var(--bt-border-strong);
}

.btn-outline-primary {
    --bs-btn-color: var(--bt-primary);
    --bs-btn-border-color: var(--bt-primary-border);
    --bs-btn-hover-bg: var(--bt-primary-light);
    --bs-btn-hover-border-color: var(--bt-primary);
    --bs-btn-hover-color: var(--bt-primary-active);
    --bs-btn-active-bg: var(--bt-primary);
    --bs-btn-active-border-color: var(--bt-primary);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--bt-border-strong);
    color: var(--bt-text);
    padding: .5rem 1rem;
    border-radius: var(--bt-radius-md);
    cursor: pointer;
}

.btn-outline:hover {
    background: var(--bt-surface-hover);
    color: var(--bt-text);
}

.btn-sm:has(.visually-hidden:only-child),
.btn-sm:has(.bi + .visually-hidden) {
    min-width: 2rem;
}

.btn-muted {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    color: var(--bt-text);
    padding: .5rem 1rem;
    border-radius: var(--bt-radius-md);
    cursor: pointer;
}

.btn-muted:hover {
    background: var(--bt-surface-hover);
}

.navbar-brand {
    color: var(--nav-color) !important;
    font-weight: 700;
}

.card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
}

.card-body {
    padding: 1.25rem;
}

.card-header {
    background: var(--bt-surface);
    border-bottom: 1px solid var(--bt-border);
    border-top-left-radius: var(--bt-radius-lg) !important;
    border-top-right-radius: var(--bt-radius-lg) !important;
}

.form-control,
.form-select {
    color: var(--bt-text);
    background-color: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-md);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--bt-primary);
    box-shadow: 0 0 0 0.2rem rgba(104, 140, 65, .18);
}

.form-check-input:checked {
    background-color: var(--bt-primary);
    border-color: var(--bt-primary);
}

/* Scenario modal: "Applies To" tag pickers */
.scenario-applies-to-title {
    font-weight: 800;
    font-size: .85rem;
    color: var(--bt-text);
    margin: 1rem 0 .75rem;
}

.scenario-applies-to-hint {
    font-size: .78rem;
    color: var(--bt-text-muted);
    margin-top: -.25rem;
}

.tag-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .4rem .6rem;
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface-subtle);
}

.tag-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    color: var(--bt-text);
    font-size: .85rem;
    font-weight: 600;
}

.tag-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--bt-text-muted);
    font-size: .9rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}

.tag-chip-remove:hover {
    color: var(--bt-text);
}

.tag-add-input {
    flex: 1;
    min-width: 120px;
    border: none;
    background: transparent;
    outline: none;
    font-size: .85rem;
    color: var(--bt-text);
    padding: .3rem 0;
}

.tag-add-input::placeholder {
    color: var(--bt-text-muted);
}

.tag-picker-disabled {
    background: var(--bt-surface-subtle);
    opacity: .6;
    cursor: not-allowed;
}

.tag-add-input-disabled {
    color: var(--bt-text-muted);
    font-size: .85rem;
    padding: .3rem 0;
    user-select: none;
}

.scenario-version-badge {
    margin-right: auto;
}

.dropdown-menu {
    border-color: var(--bt-border);
    border-radius: var(--bt-radius-md);
    box-shadow: var(--bt-shadow-soft);
}

.badge.bg-primary {
    background-color: var(--bt-primary-light) !important;
    color: var(--bt-primary-active);
}

/* =============================================================================
   APP LAYOUT
   ============================================================================= */
.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 56px 320px 1fr;
}

.app.primary-hidden {
    grid-template-columns: 1fr;
}

.app.primary-hidden .sb,
.app.primary-hidden .sb-scnbar {
    display: none !important;
}

.main {
    background: var(--bt-bg);
    color: var(--bt-text);
}

/* =============================================================================
   NAVIGATION RAIL
   ============================================================================= */
.rail {
    background: var(--bt-surface);
    border-right: 1px solid var(--bt-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    gap: 10px;
}

.rail-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bt-text);
    text-decoration: none;
}

.rail-btn:hover { background: var(--bt-surface-hover); }
.rail-btn.active { background: var(--bt-primary-light); border-color: var(--bt-primary-border); color: var(--bt-primary-active); }
.rail-ic {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    line-height: 1;
}
.rail-spacer { flex: 1; }

/* =============================================================================
   SIDEBAR
   ============================================================================= */
.sb {
    width: 280px;
    min-height: 100vh;
    background: var(--bt-surface);
    border-right: 1px solid var(--bt-border);
}

.sb-scnbar {
    width: 280px;
    min-height: 100vh;
    background: var(--bt-surface);
    border-right: 1px solid var(--bt-border);
}

.sb-head {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--bt-border);
    font-size: .75rem;
    color: var(--bt-text-secondary);
}

.sb-nav { padding: .5rem; }
.sb-hidden { display: none; }

/* =============================================================================
   PAGE LAYOUT (RecruitDetail)
   ============================================================================= */
.bt-page-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0 1.25rem;
    margin-bottom: .25rem;
}

.bt-page-hero h1 {
    margin: 0 0 .4rem;
    color: var(--bt-text);
    font-size: clamp(1.55rem, 1.6vw, 1.95rem);
    font-weight: 650;
    line-height: 1.15;
}

.bt-page-hero p {
    margin: 0;
    color: var(--bt-text-secondary);
    font-size: .95rem;
    font-weight: 500;
}

.bt-page-hero .btn {
    min-height: auto;
    padding: .5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    box-shadow: var(--bt-shadow-soft);
}

.page-shell {
    max-width: 1400px;
    margin: 0 auto;
}

.page-container {
    padding: .25rem 0 2rem;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .45rem;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.page-title {
    font-size: clamp(1.25rem, 1.25vw, 1.5rem);
    font-weight: 650;
    margin: 0;
    color: var(--bt-text);
    line-height: 1.2;
}

.page-divider {
    height: 1px;
    background: var(--bt-border);
    margin: .875rem 0 1.25rem;
}

/* =============================================================================
   ENTITY HERO (RecruitDetail)
   ============================================================================= */
.entity-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.entity-hero-left {
    flex: 1;
}

.entity-hero-name {
    font-size: clamp(1.5rem, 1.65vw, 1.9rem);
    font-weight: 650;
    color: var(--bt-text);
    line-height: 1.15;
    margin-bottom: .35rem;
}

.entity-hero-meta {
    font-size: .925rem;
    color: var(--bt-text-secondary);
    margin-bottom: .7rem;
}

.entity-hero-pills {
    margin-top: .5rem;
}

/* =============================================================================
   PILLS / BADGES
   ============================================================================= */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .75rem;
    font-weight: 600;
    background: var(--bt-surface-subtle);
    color: var(--bt-text-secondary);
    line-height: 1.2;
}

.pill.status {
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
}

.pill.status.inverted {
    background: var(--bt-primary);
    color: #fff;
}

.pill.muted {
    background: var(--bt-surface-subtle);
    color: var(--bt-text-secondary);
}

.pill.large {
    padding: .375rem 1rem;
    font-size: .875rem;
}

.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* =============================================================================
   CARDS (RecruitDetail)
   ============================================================================= */
.card-tall {
    min-height: 360px;
}

.recruit-timeline-card {
    min-height: 640px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .875rem 1.25rem;
    color: var(--bt-text);
    font-size: .95rem;
    font-weight: 650;
}

.scrollable {
    max-height: 600px;
    overflow-y: auto;
}

/* =============================================================================
   SUMMARY CARD / DETAIL TABLE (RecruitDetail)
   ============================================================================= */
.summary-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    padding: 1.25rem;
    min-height: 100%;
}

.section-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--bt-text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .875rem;
    border-bottom: 1px solid var(--bt-border);
    padding-bottom: .55rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bt-border);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item label {
    font-size: .85rem;
    color: var(--bt-text-secondary);
    margin: 0;
}

.summary-item strong {
    color: var(--bt-text);
    font-size: .875rem;
    font-weight: 650;
}

/* =============================================================================
   DETAIL TABLE (RecruitDetail)
   ============================================================================= */
.detail-table {
    display: flex;
    flex-direction: column;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--bt-border);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row .label {
    font-size: .85rem;
    color: var(--bt-text-secondary);
    flex: 0 0 40%;
    line-height: 1.35;
}

.detail-row .value {
    font-size: .875rem;
    color: var(--bt-text);
    text-align: right;
    flex: 0 0 55%;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* =============================================================================
   3-COLUMN LAYOUT (RecruitDetail)
   ============================================================================= */
.recruit-detail-header {
    padding-top: .75rem;
    margin-bottom: .75rem;
}

#app[data-page="details"] .page-shell,
#app[data-page="details"] .page-container {
    max-width: none;
}

.recruit-detail-layout {
    display: grid;
    grid-template-columns: minmax(18rem, 1.05fr) minmax(24rem, 1.25fr) minmax(18rem, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.recruit-detail-col {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

@media (max-width: 1199.98px) {
    .recruit-detail-layout {
        grid-template-columns: 1fr;
    }

    .recruit-detail-col-center {
        order: -1;
    }
}

/* =============================================================================
   EVENTS & NOTES (RecruitDetail)
   ============================================================================= */
.event-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.1rem;
    margin-bottom: .75rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
}

.event-row:last-child {
    margin-bottom: 0;
}

.event-actor {
    margin-top: .3rem;
    font-size: .75rem;
    color: var(--bt-text-muted);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--bt-text-secondary);
    white-space: nowrap;
}

.event-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.event-content {
    min-width: 0;
}

.event-name {
    color: var(--bt-text);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.35;
}

.event-description {
    margin-top: .2rem;
    color: var(--bt-text-secondary);
    font-size: .875rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--bt-radius-sm);
    font-size: .85rem;
    flex-shrink: 0;
}

.event-icon.bg-info {
    background-color: var(--bt-info-bg);
    color: var(--bt-info-text);
}

.event-icon.bg-success {
    background-color: var(--bt-success-bg);
    color: var(--bt-success-text);
}

.event-icon.bg-muted {
    background-color: var(--bt-surface-subtle);
    color: var(--bt-text-secondary);
}

.event-icon.bg-warning {
    background-color: var(--bt-warning-bg);
    color: var(--bt-warning-text);
}

.event-icon.bg-danger {
    background-color: var(--bt-danger-bg);
    color: var(--bt-danger-text);
}

@media (max-width: 575.98px) {
    .event-row {
        align-items: flex-start;
        gap: .75rem;
        padding: .9rem;
    }

    .event-main {
        align-items: flex-start;
        gap: .75rem;
    }

    .event-date {
        font-size: .7rem;
    }
}

/* =============================================================================
   RECRUIT DETAILS WORKSPACE
   ============================================================================= */
.recruit-detail-header {
    margin: 0;
    padding: .7rem .9rem .8rem;
    background: var(--bt-surface);
    border-bottom: 1px solid var(--bt-border);
}

.recruit-header-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .45rem;
}

.recruit-header-toolbar .page-header-actions {
    margin-left: auto;
}

.recruit-back-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    color: var(--bt-text);
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.recruit-back-link:hover,
.recruit-back-link:focus-visible {
    color: var(--bt-success-text);
    text-decoration: underline;
}

.recruit-back-link i {
    font-size: 1rem;
}

.recruit-detail-header .entity-hero {
    align-items: center;
    margin: 0;
}

.recruit-created-date {
    display: inline-flex;
    align-items: center;
    align-self: flex-end;
    gap: .35rem;
    min-height: 1.4rem;
    margin-left: auto;
    color: var(--bt-text-secondary);
    font-size: .75rem;
    white-space: nowrap;
}

.recruit-created-date span {
    color: var(--bt-text-muted);
    font-weight: 600;
}

.recruit-created-date time {
    color: var(--bt-text);
    font-weight: 650;
}

.recruit-hero-identity {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
}

.recruit-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bt-success-bg);
    color: var(--bt-success-text);
    font-size: 1.4rem;
    font-weight: 750;
    letter-spacing: .02em;
    user-select: none;
}

.recruit-hero-info {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.recruit-hero-contact {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    color: var(--bt-text-secondary);
    font-size: .82rem;
}

.recruit-hero-contact i {
    color: var(--bt-success-text);
}

.recruit-detail-header .entity-hero-name {
    margin-bottom: .05rem;
    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 750;
}

.recruit-detail-header .entity-hero-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}

.recruit-detail-header .entity-hero-meta .pill {
    padding: .22rem .6rem;
    font-size: .75rem;
}

.recruit-detail-header .page-header-actions {
    gap: .5rem;
}

.recruit-detail-header .page-header-actions .btn {
    min-height: 3rem;
    padding: .65rem 1.2rem;
}

.recruit-header-toolbar .page-header-actions .btn {
    min-height: 2.1rem;
    padding: .3rem .7rem;
    font-size: .82rem;
}

#app[data-page="details"] .main {
    padding: 0;
    background: var(--bt-surface);
}

#app[data-page="details"] .page-container {
    max-width: none;
    padding: 0;
}

.recruit-detail-layout {
    grid-template-columns: minmax(17rem, 28%) minmax(26rem, 43%) minmax(18rem, 29%);
    gap: 0;
    align-items: stretch;
    min-height: 44rem;
    background: var(--bt-surface);
}

.recruit-detail-col {
    min-width: 0;
    gap: 0;
}

.recruit-detail-col-left,
.recruit-detail-col-center {
    border-right: 1px solid var(--bt-border);
}

.recruit-column-header,
.recruit-timeline-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 4rem;
    padding: .75rem 1.1rem;
    background: var(--bt-surface);
    border-bottom: 1px solid var(--bt-border);
}

.recruit-column-header h2,
.recruit-activity-heading h2,
.recruit-attention-heading h2 {
    margin: 0;
    color: var(--bt-text);
    font-size: 1.25rem;
    font-weight: 750;
}

.recruit-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--bt-radius-sm);
    background: transparent;
    color: var(--bt-text-secondary);
    text-decoration: none;
}

.recruit-icon-button:hover {
    background: var(--bt-surface-hover);
    color: var(--bt-text);
}

.recruit-details-edit-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
}

.recruit-icon-button-save {
    color: var(--bt-primary);
}

.recruit-icon-button-save:hover {
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
}

.recruit-profile-body {
    padding: .35rem .95rem .65rem;
}

.recruit-profile-body:not(.is-editing) .detail-row {
    gap: .75rem;
    padding: .48rem 0;
}

.recruit-profile-body .detail-row .value {
    font-weight: 600;
}

.recruit-profile-body .detail-row .value:empty::after {
    content: "Not provided";
    color: var(--bt-text-muted);
    font-style: italic;
    font-weight: 500;
}

.recruit-profile-body.is-editing .detail-row-editable {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
}

.recruit-profile-body.is-editing .detail-row-editable .label {
    flex: none;
}

.recruit-profile-body.is-editing .detail-row-editable .value {
    flex: none;
    width: 100%;
    text-align: left;
}

.recruit-profile-body .value-input {
    width: 100%;
}

.recruit-profile-body .value-error {
    display: block;
    font-size: .8rem;
    margin: -.35rem 0 .6rem;
}

.recruit-supporting-details {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}

.recruit-subdetail-section {
    border-top: 1px solid var(--bt-border);
    background: var(--bt-surface);
}

.recruit-subdetail-header {
    border-bottom: 1px solid var(--bt-border);
}

.recruit-subdetail-body {
    padding: .75rem 1.1rem 1.1rem;
}

.recruit-subdetail-body .detail-row {
    padding: .72rem 0;
}

.recruit-subdetail-body .detail-row .value {
    font-weight: 600;
}

.recruit-subdetail-body > .text-muted {
    margin: .5rem .95rem .65rem;
    font-size: .85rem;
    font-style: italic;
}

.recruit-subdetail-body .address-item {
    margin: 0;
}

.recruit-subdetail-body .address-name {
    display: block;
    margin: 0;
}

.recruit-subdetail-body .address-actions,
.recruit-subdetail-body .phone-actions {
    margin: .25rem 0 0;
    white-space: nowrap;
}

.recruit-subdetail-body .address-details {
    margin-bottom: .4rem;
}

.recruit-phone-add-button,
.recruit-address-add-button {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.4rem;
    padding: .4rem .8rem;
    white-space: nowrap;
}

.recruit-phone-section .recruit-subdetail-body,
.recruit-address-section .recruit-subdetail-body {
    padding: 0;
}

.recruit-phone-list,
.recruit-address-list {
    display: flex;
    flex-direction: column;
}

.recruit-phone-row,
.recruit-address-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 4rem;
    padding: .65rem .95rem;
    border-bottom: 1px solid var(--bt-border);
}

.recruit-phone-row:last-child,
.recruit-address-row:last-child {
    border-bottom: 0;
}

.recruit-phone-main,
.recruit-address-main {
    min-width: 0;
}

.recruit-phone-number-line,
.recruit-address-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;
}

.recruit-phone-number-line > strong,
.recruit-address-line > strong {
    color: var(--bt-text);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: .01em;
}

.recruit-primary-toggle,
.recruit-primary-badge,
.recruit-current-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
}

.recruit-primary-toggle {
    cursor: pointer;
}

.recruit-primary-toggle:not(.is-primary) {
    opacity: 0;
    background: var(--bt-surface-subtle);
    color: var(--bt-text-secondary);
    transition: opacity .15s ease;
}

.recruit-phone-row:hover .recruit-primary-toggle:not(.is-primary),
.recruit-primary-toggle:focus-within {
    opacity: 1;
}

.recruit-phone-meta,
.recruit-phone-notes,
.recruit-address-meta,
.recruit-address-name {
    margin-top: .15rem;
    color: var(--bt-text-secondary);
    font-size: .78rem;
}

.recruit-phone-notes {
    color: var(--bt-text-muted);
}

.recruit-address-name {
    color: var(--bt-text-muted);
}

.recruit-phone-row .phone-actions,
.recruit-address-row .address-actions {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0;
    flex-shrink: 0;
}

.recruit-phone-row .phone-actions .btn-link,
.recruit-address-row .address-actions .btn-link {
    color: var(--bt-primary-active);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

.recruit-phone-row .phone-actions .text-danger,
.recruit-address-row .address-actions .text-danger {
    color: var(--bt-danger-text) !important;
}

.phone-inline-editor,
.address-inline-editor {
    padding: 1.25rem 1.1rem 1.4rem;
    border-top: 1px dashed var(--bt-border-strong);
    border-bottom: 1px solid var(--bt-border);
    background: var(--bt-surface);
}

.phone-inline-editor .form-label,
.address-inline-editor .form-label {
    margin-bottom: .5rem;
    color: var(--bt-text);
    font-size: .85rem;
    font-weight: 700;
}

.phone-inline-editor .form-control,
.phone-inline-editor .form-select,
.address-inline-editor .form-control,
.address-inline-editor .form-select {
    min-height: 3rem;
}

.phone-editor-primary-field {
    margin: 1rem 0 1.25rem .25rem;
}

.phone-editor-primary-field .form-check-label {
    color: var(--bt-text);
    font-size: .85rem;
}

.phone-editor-secondary-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.phone-editor-secondary-fields .phone-editor-notes-field {
    grid-column: 1 / -1;
}

.phone-editor-secondary-fields .form-label span {
    color: var(--bt-text-muted);
    font-weight: 500;
}

.phone-inline-editor.is-editing .phone-editor-secondary-fields {
    display: none;
}

.phone-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
}

.phone-editor-actions .btn {
    min-width: 5.25rem;
    min-height: 2.75rem;
}

.address-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.address-editor-wide {
    grid-column: 1 / -1;
}

.address-editor-grid .form-label span {
    color: var(--bt-text-muted);
    font-weight: 500;
}

.address-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    margin-top: 1.25rem;
}

.address-editor-actions .btn {
    min-width: 5.25rem;
    min-height: 2.75rem;
}

@media (max-width: 575.98px) {
    .recruit-phone-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .recruit-address-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .recruit-phone-row .phone-actions,
    .recruit-address-row .address-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .recruit-primary-toggle:not(.is-primary) {
        opacity: 1;
    }

    .phone-editor-secondary-fields,
    .address-editor-grid {
        grid-template-columns: 1fr;
    }

    .address-editor-wide {
        grid-column: auto;
    }
}

.recruit-timeline-card {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.recruit-timeline-card > .card-header {
    flex-wrap: nowrap;
}

.recruit-activity-heading,
.recruit-workflow-heading {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}

.recruit-activity-filter {
    width: auto;
    min-width: 9.5rem;
    min-height: 2.5rem;
    padding: .4rem 2.25rem .4rem .8rem;
    border-color: var(--bt-border-strong);
    font-weight: 650;
}

.recruit-add-note-button {
    min-height: 2.5rem;
    padding: .4rem .9rem;
    white-space: nowrap;
}

.recruit-attention-card {
    min-height: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--bt-border);
}

.recruit-attention-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem 1.25rem;
    background: var(--bt-danger-bg);
    border-bottom: 1px solid #f0c0c0;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.recruit-attention-panel {
    padding: .5rem 1.25rem;
}

.recruit-attention-heading {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bt-text);
    font-size: .95rem;
    font-weight: 700;
}

.recruit-attention-heading i {
    color: var(--bt-danger-text);
    font-size: 1.05rem;
}

.recruit-attention-count {
    color: var(--bt-text-secondary);
    font-weight: 600;
}

.recruit-attention-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recruit-attention-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--bt-border);
}

.recruit-attention-item:last-child {
    border-bottom: 0;
}

.recruit-attention-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: .85rem;
}

.recruit-attention-icon-urgent {
    background: var(--bt-danger-bg);
    color: var(--bt-danger-text);
}

.recruit-attention-icon-warning {
    background: var(--bt-warning-bg);
    color: var(--bt-warning-text);
}

.recruit-attention-icon-info {
    background: var(--bt-info-bg);
    color: var(--bt-info-text);
}

.recruit-attention-text {
    flex: 1;
    min-width: 0;
}

.recruit-attention-title {
    color: var(--bt-text);
    font-size: .9rem;
    font-weight: 700;
}

.recruit-attention-description {
    margin-top: .2rem;
    color: var(--bt-text-secondary);
    font-size: .8rem;
}

.recruit-attention-action {
    flex-shrink: 0;
    padding: .5rem 1.1rem;
    border: 1px solid var(--bt-primary);
    border-radius: var(--bt-radius-sm);
    background: transparent;
    color: var(--bt-primary-active);
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.recruit-attention-action:hover {
    background: var(--bt-primary);
    color: #fff;
}

.recruit-timeline-card > .card-body.scrollable {
    max-height: 48rem;
    padding: 1rem 1.25rem;
    background: #f8faf9;
}

.recruit-workflow-panel {
    min-height: 100%;
    background: var(--bt-surface);
}

.recruit-workflow-heading {
    color: var(--bt-text);
    text-decoration: none;
}

.recruit-workflow-heading:hover {
    color: var(--bt-primary-active);
}

.recruit-workflow-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
}

.workflow-summary-card {
    display: block;
    padding: 1rem;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    background: var(--bt-surface);
    color: var(--bt-text);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.workflow-summary-card:hover {
    border-color: var(--bt-primary-border);
    color: var(--bt-text);
    box-shadow: var(--bt-shadow-soft);
    transform: translateY(-1px);
}

.workflow-summary-card-header,
.workflow-summary-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.workflow-summary-card-header {
    font-size: .9rem;
}

.workflow-summary-meta {
    margin-top: .3rem;
    color: var(--bt-text-secondary);
    font-size: .8rem;
}

.workflow-summary-progress {
    height: .45rem;
    margin: .8rem 0 .65rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bt-border);
}

.workflow-summary-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--bt-primary);
}

.workflow-summary-footer {
    color: var(--bt-text-secondary);
    font-size: .78rem;
}

.workflow-summary-footer strong {
    font-weight: 700;
}

.workflow-summary-footer .is-complete {
    color: var(--bt-success-text);
}

.workflow-summary-footer .is-progress {
    color: var(--bt-info-text);
}

.workflow-summary-footer .is-pending {
    color: var(--bt-text-muted);
}

.recruit-workflow-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    padding: 2rem 1rem;
    border: 1px dashed var(--bt-border-strong);
    border-radius: var(--bt-radius-lg);
    color: var(--bt-text-secondary);
    text-align: center;
}

.recruit-workflow-empty i {
    font-size: 1.5rem;
    color: var(--bt-text-muted);
}

.recruit-workflow-empty span {
    max-width: 17rem;
    font-size: .8rem;
}

.recruit-add-workflow {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1rem;
    border-top: 1px solid var(--bt-border);
    background: var(--bt-surface);
}

.recruit-add-workflow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px dashed var(--bt-border-strong);
    border-radius: 50%;
    color: var(--bt-text);
    font-size: 1rem;
}

.recruit-add-workflow-copy {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}

.recruit-add-workflow-copy strong {
    color: var(--bt-text);
    font-size: .875rem;
}

.recruit-add-workflow-copy span {
    color: var(--bt-text-secondary);
    font-size: .78rem;
}

.recruit-add-workflow-button {
    min-height: 2.35rem;
    padding: .4rem .85rem;
    font-size: .82rem;
    font-weight: 650;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .recruit-add-workflow {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .recruit-add-workflow-button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

.card.recruit-attention-card {
    margin-bottom: .75rem;
    background: var(--bt-surface);
    overflow: hidden;
    border-radius: var(--bt-radius-lg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .02);
    border: 1px solid #f0c0c0 !important;
    background: white !important;
}

@media (max-width: 1099.98px) {
    .recruit-detail-layout {
        grid-template-columns: 1fr;
    }

    .recruit-detail-col-left,
    .recruit-detail-col-center {
        border-right: 0;
        border-bottom: 1px solid var(--bt-border);
    }

    .recruit-detail-col-center {
        order: 0;
    }

    .recruit-timeline-card > .card-body.scrollable {
        max-height: 38rem;
    }
}

@media (max-width: 575.98px) {
    .recruit-detail-header .entity-hero {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .recruit-created-date {
        width: 100%;
        justify-content: flex-end;
    }

    .recruit-detail-header .page-header-actions {
        width: 100%;
    }

    .recruit-detail-header .page-header-actions .btn {
        flex: 1;
    }

    .recruit-header-toolbar .page-header-actions {
        width: auto;
        flex-shrink: 0;
    }

    .recruit-header-toolbar .page-header-actions .btn {
        flex: none;
    }

    .recruit-timeline-card > .card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .recruit-timeline-card > .card-header > .d-flex {
        width: 100%;
    }

    .recruit-activity-filter {
        flex: 1;
        min-width: 0;
    }
}

/* =============================================================================
   HOME PAGE
   ============================================================================= */
.space-100 {
    padding-top: 100px;
    padding-bottom: 50px;
}

.button {
    background: var(--bt-primary);
    color: #fff;
    border: none;
    padding: .75rem 1.25rem;
    border-radius: var(--bt-radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button:hover {
    background: var(--bt-primary-hover);
}

.intro-img img {
    max-width: 100%;
    height: auto;
}

.how-it-works {
    padding: 3rem 0;
}

.work-process {
    text-align: center;
    padding: 1rem;
}

.process-icon img {
    max-width: 160px;
    height: auto;
}

/* =============================================================================
   DONUT CHARTS
   ============================================================================= */
.donuts-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    padding: 1rem 1.25rem;
    width: fit-content;
    min-width: 320px;
    margin: .75rem auto 2rem;
    overflow-x: auto;
}

.donuts-bar .conn {
    flex: 1;
    min-width: 160px;
    max-width: 320px;
    height: 2px;
    background: var(--bt-border);
}

.donut {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bt-surface);
    position: relative;
}

.donut-ring {
    width: 124px;
    height: 124px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    position: relative;
}

.donut-ring svg {
    width: 112px;
    height: 112px;
    transform: rotate(-90deg);
}

.donut-inner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    display: grid;
    place-items: center;
    text-align: center;
    font-size: .75rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
}

.donut-step-name { font-size: 0.75rem; }
.donut-task-count { font-size: 0.7rem; color: var(--bt-text-secondary); }
.donut-percentage { font-size: 0.65rem; color: var(--bt-text-secondary); }
.donut-locked { font-size: 0.6rem; color: var(--bt-text-secondary); }
.donut-hidden { opacity: 0.3; filter: grayscale(100%); }
.donut-container { display: flex; flex-direction: column; align-items: center; }

.bt-workflow-progress {
    position: relative;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    padding: 1.25rem 1.5rem 1rem;
    margin: .75rem auto 2rem;
    max-width: 1120px;
    overflow-x: auto;
}

.bt-workflow-progress-track {
    position: absolute;
    top: 2.15rem;
    left: 3rem;
    right: 3rem;
    height: .45rem;
    border-radius: 999px;
    background: var(--bt-surface-subtle);
    overflow: hidden;
}

.bt-workflow-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--bt-primary);
    transition: width .25s ease;
}

.bt-workflow-progress-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(7rem, 1fr);
    gap: .75rem;
    min-width: max-content;
}

.bt-workflow-progress-step {
    display: grid;
    justify-items: center;
    gap: .45rem;
    color: var(--bt-text-secondary);
    text-align: center;
}

.bt-workflow-step-marker {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: 2px solid var(--bt-border-strong);
    background: var(--bt-surface);
    color: var(--bt-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1;
}

.bt-workflow-progress-step.is-complete .bt-workflow-step-marker {
    background: var(--bt-primary);
    border-color: var(--bt-primary);
    color: #fff;
}

.bt-workflow-progress-step.is-current .bt-workflow-step-marker {
    background: var(--bt-primary-light);
    border-color: var(--bt-primary);
    color: var(--bt-primary-active);
}

.bt-workflow-progress-step.is-locked {
    color: var(--bt-text-muted);
}

.bt-workflow-progress-step.is-locked .bt-workflow-step-marker {
    background: var(--bt-surface-subtle);
    color: var(--bt-text-muted);
}

.bt-workflow-step-label {
    max-width: 8.5rem;
    color: var(--bt-text);
    font-size: .8125rem;
    font-weight: 650;
    line-height: 1.2;
}

.bt-workflow-step-meta {
    color: var(--bt-text-muted);
    font-size: .75rem;
    line-height: 1.2;
}

.bt-qualification-header {
    display: grid;
    grid-template-columns: minmax(18rem, 1.05fr) minmax(24rem, 1.25fr) minmax(18rem, 1fr);
    gap: 2rem;
    align-items: center;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    padding: 1.5rem;
    margin-bottom: 1.75rem;
}

.bt-qualification-welcome {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.bt-qualification-icon {
    width: 5.25rem;
    height: 5.25rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

.bt-qualification-welcome h1,
.bt-qualification-progress-panel h2,
.bt-qualification-next h2 {
    margin: 0;
    color: var(--bt-text);
    font-weight: 700;
    line-height: 1.2;
}

.bt-qualification-welcome h1 {
    margin-bottom: .65rem;
    font-size: clamp(1.35rem, 1.5vw, 1.8rem);
}

.bt-qualification-welcome p {
    margin: 0;
    color: var(--bt-text-secondary);
    font-size: .925rem;
    line-height: 1.6;
}

.bt-qualification-progress-panel,
.bt-qualification-next {
    min-width: 0;
    border-left: 1px solid var(--bt-border);
    padding-left: 2rem;
}

.bt-qualification-progress-panel h2,
.bt-qualification-next h2 {
    margin-bottom: 1rem;
    font-size: .95rem;
}

.bt-qualification-header .bt-workflow-progress {
    margin: 0;
    padding: 0;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: visible;
}

.bt-qualification-header .bt-workflow-progress-track {
    top: 1.1rem;
    left: 1.125rem;
    right: 1.125rem;
    height: .4rem;
    background: var(--bt-border-strong);
}

.bt-qualification-header .bt-workflow-progress-steps {
    grid-auto-columns: minmax(6.75rem, 1fr);
    gap: .75rem;
    min-width: 0;
}

.bt-qualification-header .bt-workflow-step-marker {
    width: 2.25rem;
    height: 2.25rem;
    font-size: .9rem;
}

.bt-qualification-header .bt-workflow-step-label {
    font-size: .8125rem;
}

.bt-qualification-header .bt-workflow-step-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.35rem;
    margin-top: .35rem;
    padding: .18rem .65rem;
    border-radius: 999px;
    background: var(--bt-surface-subtle);
    color: var(--bt-text-secondary);
    font-size: .72rem;
    font-weight: 650;
}

.bt-qualification-header .bt-workflow-progress-step.is-current .bt-workflow-step-meta {
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
}

.bt-qualification-next ol {
    display: grid;
    gap: .85rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-qualification-next li {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--bt-text-secondary);
    font-size: .925rem;
    line-height: 1.35;
}

.bt-qualification-next li span {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--bt-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
}

.bt-step-card {
    overflow: hidden;
}

.bt-step-card .table-responsive {
    border: 0;
    border-top: 1px solid var(--bt-border);
    border-radius: 0;
    box-shadow: none;
}

.bt-step-card .table th,
.bt-step-card .table td {
    text-align: left;
}

.bt-task-badges {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: .45rem;
}

.bt-task-badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--bt-radius-sm);
    padding: .25rem .55rem;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.2;
}

.bt-task-badge-blocking {
    background: #FFE5EA;
    color: #D3163A;
}

.bt-task-badge-required {
    background: #DDEEFF;
    color: #1F72CE;
}

.bt-step-header {
    padding: 1.25rem 1.5rem;
    background: var(--bt-surface);
}

.bt-step-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bt-step-title-group {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    min-width: 0;
}

.bt-step-title-icon {
    width: 1.35rem;
    height: 1.35rem;
    flex: 0 0 auto;
    margin-top: .1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
}

.bt-step-title-icon.is-complete {
    background: var(--bt-primary);
    color: #fff;
}

.bt-step-title-icon.is-active {
    background: var(--bt-primary-light);
    color: var(--bt-primary);
}

.bt-step-title-icon.is-locked {
    background: var(--bt-surface-subtle);
    color: var(--bt-text-muted);
}

.bt-step-title-group h2 {
    margin: 0 0 .55rem;
    color: var(--bt-text);
    font-size: clamp(1.25rem, 1.35vw, 1.65rem);
    font-weight: 700;
    line-height: 1.15;
}

.bt-step-title-group p {
    margin: 0;
    color: var(--bt-text-secondary);
    font-size: .925rem;
    line-height: 1.45;
}

.bt-step-header-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
    flex-wrap: wrap;
    white-space: nowrap;
}

.bt-step-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2rem;
    padding: .35rem .8rem;
    border-radius: 999px;
    font-size: .875rem;
    font-weight: 700;
}

.bt-step-status.is-complete {
    background: var(--bt-success-bg);
    color: var(--bt-success-text);
}

.bt-step-status.is-active {
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
}

.bt-step-status.is-locked {
    background: var(--bt-surface-subtle);
    color: var(--bt-text-secondary);
}

.bt-step-required,
.bt-step-blocking {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--bt-text);
    font-size: .875rem;
    font-weight: 650;
}

.bt-step-required .bi,
.bt-step-blocking .bi {
    color: var(--bt-warning-text);
}

.bt-step-info {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid #BFD8FF;
    border-radius: var(--bt-radius-sm);
    background: #EFF6FF;
    color: var(--bt-text);
    font-size: .875rem;
    line-height: 1.35;
}

.bt-step-info .bi {
    color: var(--bt-info-text);
    font-size: 1rem;
}

.bt-step-card-locked {
    opacity: .82;
}

@media (max-width: 1199.98px) {
    .bt-qualification-header {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .bt-qualification-progress-panel,
    .bt-qualification-next {
        border-left: 0;
        border-top: 1px solid var(--bt-border);
        padding-left: 0;
        padding-top: 1.5rem;
    }

    .bt-qualification-header .bt-workflow-progress {
        overflow-x: auto;
    }

    .bt-qualification-header .bt-workflow-progress-steps {
        min-width: max-content;
    }

    .workflow-admin-shell {
        grid-template-columns: 56px 220px 1fr;
    }
}

@media (max-width: 991.98px) {
    .workflow-admin-shell {
        grid-template-columns: 1fr;
    }

    .workflow-admin-shell .rail {
        display: flex;
        justify-content: center;
        gap: .5rem;
        border-right: 0;
        border-bottom: 1px solid var(--bt-border);
        padding: .5rem;
    }

    .workflow-admin-shell .rail-spacer {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .bt-qualification-header {
        padding: 1rem;
    }

    .bt-qualification-welcome {
        align-items: flex-start;
    }

    .bt-qualification-icon {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 1.9rem;
    }

    .bt-step-header {
        padding: 1rem;
    }

    .bt-step-header-top {
        flex-direction: column;
    }

    .bt-step-header-meta {
        justify-content: flex-start;
        gap: .75rem;
    }
}

/* =============================================================================
   RECRUIT GRID
   ============================================================================= */
.table-responsive {
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    background: var(--bt-surface);
}

.table {
    --bs-table-bg: var(--bt-surface);
    --bs-table-color: var(--bt-text);
    --bs-table-border-color: var(--bt-border);
    --bs-table-hover-bg: var(--bt-surface-hover);
    --bs-table-hover-color: var(--bt-text);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: 1rem 1.125rem;
    border-bottom-color: var(--bt-border);
    vertical-align: middle;
}

.table thead th,
.table .table-dark th,
.table-dark th {
    background: var(--bt-surface) !important;
    color: var(--bt-text) !important;
    border-color: var(--bt-border) !important;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.2;
}

.table thead th a,
.table thead th .text-white {
    color: var(--bt-text) !important;
}

.bt-sort-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--bt-text);
    text-decoration: none;
}

.bt-sort-link:hover,
.bt-sort-link:focus {
    color: var(--bt-primary);
}

.bt-sort-link .bi {
    color: var(--bt-text-muted);
    font-size: .875rem;
    line-height: 1;
}

.bt-sort-link:hover .bi,
.bt-sort-link:focus .bi {
    color: var(--bt-primary);
}

.table .table-secondary > *,
.table-secondary > * {
    background: var(--bt-surface) !important;
    color: var(--bt-text) !important;
    border-color: var(--bt-border) !important;
}

.table tbody tr {
    min-height: 64px;
}

.table tbody td {
    font-size: .875rem;
    line-height: 1.35;
}

.table-sm > :not(caption) > * > * {
    padding: .9rem 1.125rem;
}

.clickable-row { cursor: pointer; }
.clickable-row:hover { 
    background-color: var(--bt-surface-hover) !important;
    transform: translateY(-1px); 
}

/* Recruit row selection styling */
.recruit-row.selected {
    background-color: var(--bt-primary-light) !important;
    border-left: 3px solid var(--bt-primary) !important;
}

.group-header {
    background: var(--bt-surface-subtle) !important;
    color: var(--bt-text);
}

.group-header > td {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.bt-group-toggle {
    width: 1.75rem;
    height: 1.75rem;
    margin-right: .35rem;
    padding: 0;
    border: 0;
    border-radius: var(--bt-radius-sm);
    background: transparent;
    color: var(--bt-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.bt-group-toggle:hover,
.bt-group-toggle:focus {
    background: var(--bt-surface-hover);
    color: var(--bt-primary);
}

.bt-group-title {
    font-size: .875rem;
    font-weight: 700;
    vertical-align: middle;
}

.progress-container .progress,
.progress {
    background-color: var(--bt-surface-subtle);
}

.progress-bar {
    background-color: var(--bt-primary);
}

.bt-recruit-grid-shell {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    overflow: hidden;
}

.bt-grid-filter-area {
    background: var(--bt-surface);
    border-bottom: 1px solid var(--bt-border);
}

.bt-filter-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .875rem 1rem;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
}

.bt-recruit-grid-shell .bt-filter-toolbar {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.bt-filter-toggle {
    min-height: 44px;
    padding-inline: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    box-shadow: var(--bt-shadow-soft);
}

.bt-filter-count {
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 .4rem;
    border-radius: var(--bt-radius-sm);
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
}

.bt-filter-chevron {
    transition: transform .18s ease;
}

.bt-filter-toggle[aria-expanded="true"] .bt-filter-chevron {
    transform: rotate(180deg);
}

.bt-active-filters {
    display: flex;
    align-items: center;
    flex: 1 1 520px;
    gap: .75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.bt-active-filters-label {
    color: var(--bt-text-secondary);
    font-size: .875rem;
    font-weight: 650;
    white-space: nowrap;
}

.bt-clear-filters {
    color: var(--bt-text);
    font-size: .875rem;
    font-weight: 650;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
}

.bt-clear-filters:hover {
    color: var(--bt-primary-hover);
}

.bt-filter-panel {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.bt-recruit-grid-shell .bt-filter-panel {
    margin-bottom: 0;
    border: 0;
    border-top: 1px solid var(--bt-border);
    border-radius: 0;
    box-shadow: none;
    padding: 1rem 1.25rem 1.25rem;
}

.bt-filter-panel .form-label {
    color: var(--bt-text-secondary);
    font-size: .8125rem;
    font-weight: 650;
    margin-bottom: .4rem;
}

.bt-filter-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 1rem;
}

.bt-filter-field {
    min-width: 0;
}

.bt-filter-field-wide {
    grid-column: span 2;
}

@media (max-width: 1199.98px) {
    .bt-filter-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .workflow-admin-shell {
        grid-template-columns: 56px 220px 1fr;
    }
}

@media (max-width: 767.98px) {
    .bt-filter-grid {
        grid-template-columns: 1fr;
    }

    .bt-filter-field-wide {
        grid-column: span 1;
    }
}

.bt-filter-panel.is-collapsed {
    display: none;
}

.bt-grid-controls {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .875rem 1rem;
    border-top: 1px solid var(--bt-border);
    background: var(--bt-surface);
}

.bt-grid-control-group {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.bt-grid-control-group .form-label {
    margin-bottom: 0;
    color: var(--bt-text-secondary);
    font-size: .8125rem;
    font-weight: 650;
    white-space: nowrap;
}

.bt-grid-control-group .form-select {
    width: auto;
    min-width: 12rem;
}

.bt-grid-control-group-end {
    margin-left: auto;
}

.bt-recruit-grid-shell .table-responsive {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.bt-column-filter-row.is-collapsed {
    display: none;
}

.bt-filter-chip,
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: var(--bt-primary-light);
    color: var(--bt-primary-active);
    border: 1px solid var(--bt-primary-border);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.bt-filter-chip:hover,
.filter-chip:hover {
    background: var(--bt-primary-border);
    color: var(--bt-primary-active);
}

.bt-radio-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 38px;
}

.bt-filter-chip button,
.filter-chip button,
.bt-filter-chip .btn-close,
.filter-chip .btn-close {
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    opacity: .7;
}

.bt-filter-chip button:hover,
.filter-chip button:hover,
.bt-filter-chip .btn-close:hover,
.filter-chip .btn-close:hover {
    opacity: 1;
}

.bt-badge-completed,
.bt-badge-not-started,
.bt-badge-submitted,
.bt-badge-rejected {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.35rem 0.65rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.bt-badge-completed {
    background: var(--bt-success-bg);
    color: var(--bt-success-text);
}

.bt-badge-not-started {
    background: var(--bt-warning-bg);
    color: var(--bt-warning-text);
}

.bt-badge-submitted {
    background: var(--bt-info-bg);
    color: var(--bt-info-text);
}

.bt-badge-rejected {
    background: var(--bt-danger-bg);
    color: var(--bt-danger-text);
}

.table .bg-info.text-white {
    background: var(--bt-info-bg) !important;
    color: var(--bt-info-text) !important;
}

.table .bg-info.text-white .badge.bg-primary {
    background: var(--bt-primary-light) !important;
    border: 1px solid var(--bt-primary-border);
    color: var(--bt-primary-active);
}

/* =============================================================================
   RECRUIT GRID GROUPING
   ============================================================================= */
[data-hide-status="true"] tbody .col-status { display: none !important; }
[data-hide-location="true"] tbody .col-location { display: none !important; }
[data-hide-department="true"] tbody .col-department { display: none !important; }
[data-hide-truck="true"] tbody .col-truck { display: none !important; }
/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 700px) {
    .donuts-bar { display: none !important; }
    .space-100 { padding-top: 50px; }
}

/* =============================================================================
   MOBILE RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
    /* Adjust grid to show rail + main content */
    .app {
        grid-template-columns: 56px 1fr !important;
        display: grid !important;
    }

    /* Workflow Admin has no rail (tab bar instead) - don't leave a 56px gap for it */
    .app.tabs-mode {
        grid-template-columns: 1fr !important;
    }

    /* Keep rail visible on mobile */
    .rail {
        display: flex !important;
        flex-direction: column;
        padding: 8px 4px;
    }

    /* Smaller rail buttons on mobile */
    .rail-btn {
        width: 40px;
        height: 40px;
    }

    .rail-ic {
        width: 22px;
        height: 22px;
        font-size: 1.35rem;
    }

    /* Hide sidebars on mobile */
    .sb,
    .sb-scnbar {
        display: none !important;
    }

    /* Adjust main content */
    .main {
        padding: 0.5rem;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Ensure container doesn't exceed viewport */
    .container-xxl,
    .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        max-width: 100% !important;
    }

    /* Allow table to scroll horizontally */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    /* Prevent cards from causing overflow */
    .card {
        max-width: 100%;
        overflow: hidden;
    }

    /* Smaller text for table on mobile */
    .table {
        font-size: 0.8rem;
        white-space: nowrap;
    }

    .table th,
    .table td {
        padding: 0.5rem 0.25rem;
    }

    /* Smaller buttons on mobile */
    .btn-sm {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Very small screens */
@media (max-width: 576px) {
    /* Stack action buttons on very small screens only */
    .table .d-flex.gap-1 {
        flex-direction: column;
        align-items: center;
    }
}

.group-header {
    cursor: pointer;
}

.group-header .group-indicator {
    cursor: pointer;
    user-select: none;
}

.group-header .group-indicator .bi {
    font-size: .875rem;
    line-height: 1;
}

/* =============================================================================
   LOADING SPINNER
   ============================================================================= */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(246, 248, 245, 0.82);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loading-overlay.active {
    display: flex;
}

.card-body .card {
    background-color: var(--bt-surface-subtle);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-md);
}

/* =============================================================================
   FORM STYLING
   ============================================================================= */
.form-floating {
    position: relative;
}

.form-floating > .form-control {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem 0.75rem;
}

.form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

/* =============================================================================
   ALERT STYLING
   ============================================================================= */
.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: var(--bt-radius-md);
}

.alert-dismissible .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    padding: 0.75rem 1.25rem;
}

/* =============================================================================
   MODAL STYLING
   ============================================================================= */
.modal-content {
    border-radius: var(--bt-radius-lg);
    border: 1px solid var(--bt-border);
    box-shadow: var(--bt-shadow-soft);
}

.modal-header {
    border-bottom: 1px solid var(--bt-border);
    border-top-left-radius: var(--bt-radius-lg);
    border-top-right-radius: var(--bt-radius-lg);
}

.modal-footer {
    border-top: 1px solid var(--bt-border);
    border-bottom-left-radius: var(--bt-radius-lg);
    border-bottom-right-radius: var(--bt-radius-lg);
}

.workflow-renewal-section {
    background: var(--bt-surface-subtle, #f8fafc);
}

.workflow-renewal-days-input {
    width: 7rem;
}

#formRenewalFields {
    transition: opacity .15s ease;
}

#formRenewalFields.is-disabled {
    opacity: .55;
}

/* =============================================================================
   UTILITIES
   ============================================================================= */
.fw-bold {
    font-weight: 700 !important;
}

.fw-semibold {
    font-weight: 600 !important;
}

.border-start {
    border-left: 1px solid var(--bt-border) !important;
}

/* =============================================================================
   PRINT STYLES
   ============================================================================= */
@media print {
    .btn, .pagination, .modal, .toast {
        display: none !important;
    }
    
    .table {
        border-collapse: collapse !important;
    }
    
    .table td, .table th {
        border: 1px solid #000 !important;
    }
}


/* =============================================================================
   TASK STATUS LIGHTS
   ============================================================================= */
.task-status-lights .status-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 10px;
    position: relative;
    cursor: help;
}

.task-status-lights .status-light:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease;
    z-index: 10;
}

.status-light.bg-danger {
    background-color: var(--bt-danger-text) !important;
    color: #fff !important;
}

.status-light.bg-success {
    background-color: var(--bt-success-text) !important;
    color: #fff !important;
}

.status-light.bg-warning {
    background-color: var(--bt-warning-text) !important;
    color: #fff !important;
}

.status-light.bg-info {
    background-color: var(--bt-info-text) !important;
    color: #fff !important;
}

.status-light.bg-secondary {
    background-color: var(--bt-text-muted) !important;
    color: #fff !important;
}


/* =============================================================================
   PROGRESS BARS
   ============================================================================= */
.progress-container {
    width: 120px;
}

.bt-progress-cell {
    vertical-align: middle !important;
}

.bt-progress-cell-inner {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
}

.bt-progress-cell-inner .progress-container {
    align-items: center;
    margin: 0;
}

.bt-progress-cell-inner .progress-container .flex-grow-1 {
    display: flex;
    align-items: center;
}

.bt-progress-cell-inner .progress-container .progress {
    flex: 1 1 auto;
    width: 100%;
}

.progress-container .progress {
    height: 6px;
    background-color: var(--bt-surface-subtle);
    border-radius: 8px;
}

.progress-container .progress-bar {
    border-radius: 8px;
    transition: width 0.3s ease;
}

.progress-container .progress-text {
    font-size: 0.75rem;
    color: var(--bt-text-muted);
    min-width: 30px;
    text-align: right;
}

.status-progress {
    width: 200px;
    height: 20px;
}

.status-progress .progress-bar {
    width: var(--progress-width);
}

/* =============================================================================
   AUTHENTICATION LOADING PAGE - STANDALONE
   ============================================================================= */
.loading-container {
    min-height: 100vh;
    background: var(--bt-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    padding: 3rem;
    text-align: center;
    min-width: 350px;
}

.logo {
    color: var(--nav-color);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
}

.spinner-container {
    margin: 2rem 0;
}

.spinner-border-custom {
    width: 4rem;
    height: 4rem;
    border-color: var(--bt-primary);
    border-right-color: transparent;
}

.loading-text {
    color: var(--bt-text-secondary);
    font-size: 1.1rem;
    margin-top: 1rem;
}

.loading-subtext {
    color: var(--bt-text-muted);
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* =============================================================================
   PORTAL CONFIRMATION SCREENS (EmailSent, RegistrationConfirmed)
   ============================================================================= */
.confirmation-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.confirmation-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    max-width: 480px;
    width: 100%;
}

.confirmation-header {
    background: linear-gradient(135deg, var(--bs-primary) 0%, #365675 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    position: relative;
}

    .confirmation-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    }

.confirmation-header .brand-logo {
    position: relative;
    z-index: 1;
    max-height: 48px;
    max-width: 80%;
    margin-bottom: 1rem;
}

.confirmation-header .header-icon {
    position: relative;
    z-index: 1;
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.confirmation-header h3 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-weight: 600;
    font-size: 1.75rem;
}

.confirmation-header .subtitle {
    position: relative;
    z-index: 1;
    margin-top: 0.5rem;
    opacity: 0.9;
    font-size: 1rem;
}

.confirmation-body {
    padding: 2rem;
    text-align: center;
}

.confirmation-email {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1) 0%, rgba(var(--bs-primary-rgb), 0.05) 100%);
    border: 2px solid rgba(var(--bs-primary-rgb), 0.2);
    border-radius: 12px;
    padding: 1rem;
    color: var(--bs-primary);
    font-weight: 600;
    margin: 1.25rem 0;
}

.confirmation-note {
    background: rgba(var(--bs-primary-rgb), 0.1);
    border-left: 4px solid var(--bs-primary);
    padding: 0.75rem 1rem;
    border-radius: 0 8px 8px 0;
    font-size: 0.875rem;
    color: #495057;
    text-align: left;
    margin-top: 1.5rem;
}

@media (max-width: 576px) {
    .confirmation-container {
        padding: 1rem;
    }

    .confirmation-card {
        border-radius: 15px;
    }

    .confirmation-header,
    .confirmation-body {
        padding: 1.5rem;
    }
}

/* =============================================================================
   FILE PREVIEW STYLING
   ============================================================================= */
.preview-image {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-sm);
}

/* =============================================================================
   CONTEXT MENU
   ============================================================================= */
.context-menu {
    position: fixed;
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-md);
    box-shadow: var(--bt-shadow-soft);
    z-index: 10000;
    min-width: 200px;
    padding: 0.5rem 0;
}

.context-menu ul {
    margin: 0;
    padding: 0;
}

.context-menu-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--bt-text);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.context-menu-item:hover {
    background-color: var(--bt-surface-hover);
    color: var(--bt-primary);
}

.context-menu-item i {
    width: 20px;
}

.context-menu-item.disabled {
    color: var(--bt-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}

/* =============================================================================
   WORKFLOW ADMIN PAGE
   ============================================================================= */
.workflow-admin-shell {
    min-height: calc(100vh - 7rem);
    display: grid;
    grid-template-columns: 56px 1fr;
    background: var(--bt-bg);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    overflow: hidden;
}

.workflow-admin-shell .rail {
    border-right: 1px solid var(--bt-border);
    background: var(--bt-surface);
}

.workflow-admin-content-wrap {
    padding: 1rem 1.25rem 1.5rem;
}

.workflow-admin-content {
    max-width: 100%;
}

.workflow-admin-panel {
    display: none;
}

.workflow-admin-panel.active {
    display: block;
}

.workflow-admin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.workflow-admin-card {
    overflow: hidden;
}

.workflow-admin-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.25rem;
    background: var(--bt-surface);
}

.workflow-admin-table thead th {
    background: var(--bt-surface-subtle);
}

.workflow-admin-table .btn {
    margin-left: .25rem;
}

.workflow-documents-shell {
    max-width: 100%;
    margin: 0;
}

.workflow-documents-status-wrap {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.workflow-documents-status-bar {
    width: 230px;
    height: .65rem;
    border-radius: 999px;
    display: inline-flex;
    overflow: hidden;
    background: #d1d5db;
}

.workflow-documents-status-bar > span {
    display: inline-flex;
    width: 100%;
    height: 100%;
}

.workflow-documents-status-bar > span > div {
    height: 100%;
}

.donuts-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.conn {
    width: 36px;
    height: 2px;
    background: var(--bt-border-strong);
}

.donut {
    width: 112px;
    height: 112px;
}

.donut-ring {
    position: relative;
    width: 112px;
    height: 112px;
}

.card-table {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-soft);
    overflow: hidden;
}

.table-header {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--bt-border);
    background: var(--bt-surface);
}

.table-header h4 {
    margin: 0;
    font-size: .95rem;
    font-weight: 650;
}

.config-table {
    width: 100%;
    border-collapse: collapse;
}

.config-table th,
.config-table td {
    padding: .875rem 1rem;
    border-bottom: 1px solid var(--bt-border);
    font-size: .875rem;
    vertical-align: middle;
}

.config-table thead th {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--bt-text);
    background: var(--bt-surface-subtle);
}

.workflow-forms-shell {
    max-width: 100%;
    margin: 0;
}

.workflow-workflow-shell {
    max-width: 100%;
    margin: 0;
}

.workflow-tree {
    width: 100%;
}

.wfb-wrap {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wfb-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.wfb-title .h {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bt-text);
}

.wfb-title .sub {
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--bt-text-secondary);
}

.wfb-top-rightcol {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .45rem;
}

.wfb-top-right {
    display: flex;
    justify-content: flex-end;
}

.wfb-scenario-select {
    min-width: 300px;
}

.wf-meta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .78rem;
    color: var(--bt-text-secondary);
    font-weight: 700;
}

.wfb-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .9rem;
}

.wfb-lane {
    border: 1px solid var(--bt-border);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.wfb-lane-head {
    padding: .75rem .85rem;
    border-bottom: 1px solid var(--bt-border);
    background: var(--bt-surface-subtle);
}

.wfb-lane-title {
    font-weight: 700;
    font-size: .9rem;
    color: var(--bt-text);
}

.wfb-lane-sub {
    font-size: .76rem;
    color: var(--bt-text-secondary);
}

.wfb-lane-body {
    padding: .75rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

@media (max-width: 900px) {
    .wfb-top {
        flex-direction: column;
    }

    .wfb-top-rightcol {
        width: 100%;
        align-items: flex-start;
    }

    .wfb-scenario-select {
        min-width: 0;
        width: 100%;
    }
}

/* =============================================================================
   WORKFLOW TREE BUILDER STYLES (Replicated from TalentMvcBootstrap)
   ============================================================================= */

/* Workflow Builder Wrapper */
.wfb-wrap {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.wfb-top {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.wfb-title {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.wfb-title-row {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.wfb-title .h {
    font-size: 1.4rem;
    font-weight: 800;
    color: #111827;
}

.wfb-title-edit {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.wfb-title-edit:hover {
    background: rgba(17, 24, 39, .06);
    color: #111827;
}

.wfb-title .sub {
    font-size: .8125rem;
    color: #6b7280;
    max-width: 900px;
    line-height: 1.35;
}

.wfb-top-rightcol {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-end;
}

/* Workflow Board */
.wfb-board {
    display: flex;
    align-self: flex-start;
    max-width: 100%;
    gap: .75rem;
    overflow: auto;
    padding: .5rem;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #f9fafb;
}

/* Workflow Step Column */
.wfb-step {
    min-width: 310px;
    max-width: 360px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    flex: 0 0 auto;
    transition: all 0.2s ease;
}

.wfb-step.dragging {
    opacity: .7;
    transform: scale(0.98) rotate(1deg);
    z-index: 1000;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.wfb-step.drag-over {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

.wfb-step-header {
    padding: .85rem .75rem;
    background: #fff;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: .55rem;
    cursor: grab;
    transition: background 0.2s ease;
}

.wfb-step-header:hover {
    background: #f9fafb;
}

.wfb-step-header:active {
    cursor: grabbing;
}

.wfb-step-handle {
    cursor: grab;
    color: #9ca3af;
    transition: color 0.2s ease;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.wfb-step-header:hover .wfb-step-handle {
    color: #6366f1;
}

.wfb-step-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bt-primary);
    color: #fff;
    font-weight: 800;
    font-size: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wfb-step-meta {
    flex: 1;
    min-width: 0;
}

.wfb-step-title {
    font-weight: 800;
    color: #111827;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wfb-step-sub {
    font-size: .75rem;
    color: #6b7280;
    margin-top: .1rem;
}

.wfb-kebab-wrap {
    flex-shrink: 0;
}

.wfb-kebab {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
}

.wfb-kebab:hover {
    background: rgba(17, 24, 39, .06);
    color: #111827;
}

.wfb-kebab-wrap .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.wfb-step-body {
    padding: .5rem .5rem .75rem;
}

.wfb-add-task-btn {
    text-decoration: none;
    padding: .3rem .5rem;
}

.wfb-add-task-btn:hover {
    text-decoration: underline;
}

.wfb-drop {
    outline: 2px dashed transparent;
    border-radius: 10px;
    min-height: 24px;
    transition: outline-color 0.2s ease;
}

.wfb-drop.over {
    outline-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

/* Workflow Task Card */
.wfb-task {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    border: 1px solid #e5e7eb;
    border-left: 4px solid var(--bt-primary);
    border-radius: 10px;
    padding: .6rem .65rem .6rem .55rem;
    background: #fff;
    margin: .35rem 0;
    position: relative;
    transition: all 0.2s ease;
    pointer-events: auto;
}

.wfb-task[draggable="true"] {
    cursor: grab;
    user-select: none;
}

.wfb-task.dragging {
    opacity: .7;
    transform: scale(0.95) rotate(2deg);
    z-index: 1000;
    cursor: grabbing;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #6366f1;
    background: #f8faff;
}

.wfb-task.drag-over {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(-1px);
}

.wfb-task.drag-over::before {
    content: '';
    position: absolute;
    top: -3px;
    left: 8px;
    right: 8px;
    height: 3px;
    background: #6366f1;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.4);
}

.wfb-task.drag-over-bottom {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
    transform: translateY(1px);
}

.wfb-task.drag-over-bottom::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 8px;
    right: 8px;
    height: 3px;
    background: #6366f1;
    border-radius: 3px;
    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.4);
}

.wfb-task .handle {
    width: 18px;
    text-align: center;
    color: #9ca3af;
    margin-top: 2px;
    cursor: grab;
    transition: color 0.2s ease;
    line-height: 1;
    font-size: 1rem;
}

.wfb-task .handle:hover {
    color: #6366f1;
}

.wfb-task.dragging .handle {
    color: #6366f1;
    cursor: grabbing;
}

.wfb-task .meta {
    pointer-events: none;
    flex: 1;
    min-width: 0;
}

.wfb-task .name {
    font-weight: 700;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .85rem;
}

.wfb-task .type {
    font-size: .7rem;
    color: #6b7280;
    margin-top: .1rem;
}

.wfb-task .type .badge {
    font-size: .7rem;
    padding: .12rem .45rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    color: #6b7280;
    font-weight: 600;
}

.iconbtn {
    border: 1px solid #cbd5e1;
    background: #fff;
    border-radius: .5rem;
    width: 28px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #374151;
    font-size: .9rem;
    transition: all 0.15s ease;
}

.iconbtn:hover {
    background: #f3f4f6;
    transform: translateY(-1px);
}

.iconbtn.danger {
    border-color: #fecaca;
    color: #991b1b;
}

.iconbtn.danger:hover {
    background: #fee2e2;
}

.iconbtn.muted {
    color: #6b7280;
}

.iconbtn.active {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
}

/* Add Step Column */
.wfb-add-step-col {
    background: #fff;
    border: 1.5px dashed #d1d5db;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    min-height: 320px;
}

.wfb-add-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1.5px solid var(--bt-primary);
    color: var(--bt-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1rem;
}

.wfb-add-step-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: #111827;
}

.wfb-add-step-sub {
    font-size: .8125rem;
    color: #6b7280;
    line-height: 1.5;
    max-width: 220px;
    margin: .5rem 0 1.25rem;
}

/* Modal Styles */
.modal-backdrop-custom {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-custom {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow: auto;
}

.modal-h {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 900;
    font-size: 1.1rem;
    color: #111827;
}

.modal-f {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

.modal-custom .btn {
    padding: .5rem 1rem;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.modal-custom .btn-approve {
    background: var(--bt-primary);
    color: #fff;
    border: none;
}

.modal-custom .btn-approve:hover {
    background: var(--bt-primary-hover);
}

/* Responsive */
@media (max-width: 900px) {
    .wfb-top {
        flex-direction: column;
    }

    .wfb-top-rightcol {
        width: 100%;
        align-items: flex-start;
    }

    .wfb-board {
        overflow-x: auto;
    }

    .wfb-step {
        min-width: 280px;
    }
}

/* =============================================================================
   APP LAYOUT WITH RAIL + SIDEBARS (Replicated from TalentMvcBootstrap)
   ============================================================================= */

/* App grid: rail + primary sidebar + scenario sidebar + main */
.app {
    min-height: 100vh;
    display: grid;
}

.app.rail-mode {
    grid-template-columns: 56px 320px 1fr;
}

.workflow-admin-page-header {
    padding-top: .75rem;
}

.workflow-admin-page-header .page-title {
    margin-bottom: .35rem;
}

.workflow-admin-page-header .entity-hero-meta {
    margin-bottom: .75rem;
}

.recruit-page-header {
    padding-top: .75rem;
}

.wf-tabs {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    border-bottom: 1px solid var(--bt-border);
}

.wf-tab {
    appearance: none;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0 .1rem .65rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--bt-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.wf-tab:hover {
    color: var(--bt-text);
}

.wf-tab.active {
    color: var(--bt-text);
    font-weight: 800;
    border-bottom-color: var(--bt-primary);
}

.app.tabs-mode {
    grid-template-columns: 320px 1fr;
}

.workflow-admin-app.tabs-mode {
    grid-template-columns: 260px 1fr;
}

.app.tabs-mode.primary-hidden {
    grid-template-columns: 1fr;
}

/* Manually collapsing the Workflows sidebar (separate from the Forms-tab
   .primary-hidden case above) shrinks it to a slim white strip with just an
   expand icon, instead of removing it entirely. */
.app.tabs-mode.sidebar-collapsed {
    grid-template-columns: 56px 1fr;
}

/* If both states are ever present at once (sidebar was collapsed, then the
   Forms tab was selected), the Forms tab always wins - no sidebar at all. */
.app.tabs-mode.primary-hidden.sidebar-collapsed {
    grid-template-columns: 1fr;
}

.app.tabs-mode.sidebar-collapsed .sb-head,
.app.tabs-mode.sidebar-collapsed .workflow-sidebar-search,
.app.tabs-mode.sidebar-collapsed .wf-add-btn-wrap,
.app.tabs-mode.sidebar-collapsed .sb-nav,
.app.tabs-mode.sidebar-collapsed .sb-foot {
    display: none;
}

.sb-expand-btn {
    display: none;
    width: 34px;
    height: 34px;
    margin: 1rem auto 0;
    border-radius: 50%;
    border: 1px solid var(--bt-border);
    background: #fff;
    color: #4b5563;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sb-expand-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

.app.tabs-mode.sidebar-collapsed .sb-expand-btn {
    display: flex;
}

/* When Documents or Forms is selected, hide sidebars (rail-only) */
.app.primary-hidden {
    grid-template-columns: 1fr;
}

.app.primary-hidden .sb {
    display: none !important;
}

.sb-hidden {
    display: none !important;
}

/* Icon rail */
.rail {
    background: #f8fafc;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .6rem .4rem;
    gap: .5rem;
}

.rail-btn {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
}

.rail-btn:hover {
    background: #eef2ff;
}

.rail-btn.active {
    background: #e0e7ff;
    border-color: #c7d2fe;
}

.rail-ic {
    width: 28px;
    height: 28px;
    display: block;
    color: #64748b;
}

.rail-btn.active .rail-ic {
    color: #4338ca;
}

.rail-spacer {
    flex: 1;
}

/* Primary sidebar */
.sb {
    width: 100%;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sb-head {
    padding: .75rem .85rem;
    border-bottom: 1px solid #e5e7eb;
    font-size: .75rem;
    color: #6b7280;
    font-weight: 800;
    letter-spacing: 0.05em;
}

#primarySb > .sb-head {
    border-bottom: none;
    padding: 1rem 1rem .5rem;
}

.sb-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.sb-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--bt-text);
    letter-spacing: normal;
    text-transform: none;
}

.sb-collapse-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: all 0.15s ease;
}

.sb-collapse-icon:hover {
    background: rgba(17, 24, 39, .06);
    color: #111827;
}

.sb-head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.sb-head-title {
    font-size: .75rem;
    color: #6b7280;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.sb-head-tools {
    display: flex;
    gap: .35rem;
}

.sb-head-tools .iconbtn {
    width: 28px;
    height: 26px;
    font-size: .9rem;
}

.workflow-sidebar-search {
    position: relative;
    padding: .6rem .6rem 0;
}

.workflow-sidebar-search .bi-search {
    position: absolute;
    left: 1.15rem;
    top: calc(.6rem + 18px);
    transform: translateY(-50%);
    color: var(--bt-text-muted);
    font-size: .875rem;
    pointer-events: none;
}

.workflow-sidebar-search input {
    width: 100%;
    min-height: 36px;
    padding: .45rem .7rem .45rem 2rem;
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-md);
    background: var(--bt-surface);
    color: var(--bt-text);
    font-size: .8125rem;
}

.workflow-sidebar-search input:focus {
    border-color: var(--bt-primary);
    box-shadow: 0 0 0 .18rem rgba(104, 140, 65, .15);
    outline: 0;
}

.wf-add-btn-wrap {
    padding: .6rem .6rem 0;
}

.sb-nav {
    padding: .6rem;
    overflow-y: auto;
    flex: 1;
}

.wf-list {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* Sidebar item (workflow rows) */
.sb-item {
    background: transparent;
    border-radius: 10px;
    padding: .55rem .65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    transition: all 0.15s ease;
}

.sb-item:hover {
    background: rgba(17, 24, 39, .04);
}

.sb-item.active {
    background: var(--bt-primary-light);
}

.sb-mid {
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.sb-lbl {
    font-weight: 800;
    font-size: 13px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Workflow row kebab (3-dot) action menu */
.sb-kebab-wrap {
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.sb-item:hover .sb-kebab-wrap,
.sb-item.active .sb-kebab-wrap,
.sb-item:focus-within .sb-kebab-wrap,
.sb-kebab-wrap.show {
    opacity: 1;
}

.sb-kebab {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
}

.sb-kebab:hover {
    background: rgba(17, 24, 39, .06);
    color: #111827;
}

.sb-kebab-wrap .dropdown-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
}

.sb-actbtn {
    width: 28px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    transition: all 0.15s ease;
}

.sb-actbtn:hover {
    background: #f3f4f6;
}

.sb-empty {
    padding: 1rem;
    text-align: center;
    color: #9ca3af;
}

/* Workflow sidebar footer: collapse button */
.sb-foot {
    padding: .6rem .85rem .85rem;
    border-top: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .65rem;
}

/* "Show archived" toggle, rendered as the last row in the workflow list */
.sb-archived-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    cursor: pointer;
    margin-top: .5rem;
    padding: .55rem .65rem 0;
    border-top: 1px solid #e5e7eb;
}

.sb-archived-label {
    font-size: .8125rem;
    font-weight: 600;
    color: #374151;
}

.wf-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    flex-shrink: 0;
}

.wf-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.wf-switch-track {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 999px;
    transition: background 0.15s ease;
}

.wf-switch-track::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform 0.15s ease;
}

.wf-switch input:checked + .wf-switch-track {
    background: var(--bt-primary);
}

.wf-switch input:checked + .wf-switch-track::before {
    transform: translateX(16px);
}

.sb-collapse-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
    transition: all 0.15s ease;
}

.sb-collapse-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

/* Workflow row: expand/collapse chevron + scenario count pill */
.sb-chevron {
    width: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: .8rem;
}

.wf-count-badge {
    flex-shrink: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #f1f4ee;
    color: #6b7280;
    font-size: .7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wf-group {
    margin-bottom: .15rem;
}

/* Nested scenario list under an expanded workflow */
.wf-scn-list {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .2rem 0 .35rem 2.1rem;
}

.wf-scn-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.wf-scn-row:hover {
    background: rgba(17, 24, 39, .04);
}

.wf-scn-row.active .wf-scn-name {
    text-decoration: underline;
    text-decoration-color: var(--bt-primary);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.wf-scn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
}

.wf-scn-dot.on {
    background: var(--bt-primary);
}

.wf-scn-name {
    flex: 1;
    min-width: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wf-scn-row .sb-kebab-wrap {
    opacity: 0;
}

.wf-scn-row:hover .sb-kebab-wrap,
.wf-scn-row:focus-within .sb-kebab-wrap,
.wf-scn-row .sb-kebab-wrap.show {
    opacity: 1;
}

.wf-add-scn-btn {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .5rem;
    margin-top: .1rem;
    border: none;
    background: transparent;
    color: var(--bt-primary);
    font-size: .8125rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.wf-add-scn-btn:hover {
    background: var(--bt-primary-light);
}

/* Main content area */
.main {
    position: relative;
    background: #fff;
    overflow: auto;
    padding: 1rem;
}

.workflow-tree {
    min-height: 400px;
}

/* Content panels for different views */
.content-panel {
    display: none;
    width: 100%;
    height: 100%;
}

.content-panel.active {
    display: block;
}

.workflow-admin-app .main,
.workflow-admin-app .content-panel {
    background: var(--bt-bg);
}

/* Page structure for Documents and Forms */
.page-shell {
    width: 100%;
}

.page-container {
    max-width: 1400px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.page-header-left {
    flex: 1;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--bt-text);
    margin: 0;
}

.page-divider {
    height: 1px;
    background: var(--bt-border);
    margin: 1rem 0 1.5rem;
}

.workflow-documents-status-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.workflow-library-section-header .bt-step-header-top {
    align-items: center;
    margin-bottom: 0;
}

.workflow-forms-card {
    margin-bottom: 0;
}

#formsPanel .page-shell,
#formsPanel .page-container {
    max-width: none;
}

.wfb-used-by-tooltip .tooltip-inner {
    text-align: left;
    max-width: 260px;
}

.workflow-documents-status-bar {
    display: inline-block;
    width: 200px;
    height: 8px;
    background: #e5e7eb;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.workflow-documents-status-bar span {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--bt-primary);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .app.rail-mode {
        grid-template-columns: 56px 280px 1fr;
    }

    .app.tabs-mode {
        grid-template-columns: 280px 1fr;
    }

    .workflow-admin-app.tabs-mode {
        grid-template-columns: 240px 1fr;
    }
}

@media (max-width: 900px) {
    .app.rail-mode {
        grid-template-columns: 56px 1fr;
    }

    .app.rail-mode .sb {
        position: fixed;
        left: 56px;
        top: 0;
        bottom: 0;
        z-index: 1000;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }

    .app.tabs-mode {
        grid-template-columns: 1fr;
    }

    .app.tabs-mode .sb {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
}