* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Checkout-style palette: clean, modern */
    --primary-color: #0066cc;
    --primary-hover: #0052a3;
    --secondary-color: #666666;
    --success-color: #00854d;
    --warning-color: #e67e00;
    --danger-color: #c00;
    --required-color: #c00;
    --background: #f7f7f7;
    --surface: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --border-color: #d9d9d9;
    --radius: 4px;
    --radius-lg: 8px;
    --shadow: 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --section-header-color: #7b68a8;
    --placeholder-color: #787878;
    /* Soothing nav icon palette */
    --nav-dashboard: #5b8fc9;
    --nav-jobs: #5a9b8e;
    --nav-candidates: #b87a8a;
    --nav-interviews: #8b7aa8;
    --nav-specials: #c49a5a;
    --nav-customers: #6a9e6a;
    --nav-reports: #7a8fb8;
    --nav-chat: #6b8fb8;
    --nav-settings: #7a8a9e;
    --nav-logout: #a87a7a;
    --nav-sub: #7a8f9e;
    --nav-menu: #6b7a8a;
    /* Candidate card accent colors (modern UI only) */
    --card-accent-0: #0066cc;
    --card-accent-0-bg: linear-gradient(135deg, #e6f0fa 0%, #ffffff 45%, #cce0f5 100%);
    --card-accent-0-hover: #0052a3;
    --card-accent-1: #5a9b8e;
    --card-accent-1-bg: linear-gradient(135deg, #e8f4f2 0%, #ffffff 45%, #d1eae5 100%);
    --card-accent-1-hover: #4a8579;
    --card-accent-2: #7b68a8;
    --card-accent-2-bg: linear-gradient(135deg, #efeef4 0%, #ffffff 45%, #e0dce8 100%);
    --card-accent-2-hover: #6a5a92;
    --card-accent-3: #e67e00;
    --card-accent-3-bg: linear-gradient(135deg, #fdf5eb 0%, #ffffff 45%, #fae8d0 100%);
    --card-accent-3-hover: #c26900;
    --card-accent-4: #00854d;
    --card-accent-4-bg: linear-gradient(135deg, #e6f5ee 0%, #ffffff 45%, #cceadd 100%);
    --card-accent-4-hover: #006b3d;
    --card-accent-5: #b87a8a;
    --card-accent-5-bg: linear-gradient(135deg, #f9f0f2 0%, #ffffff 45%, #f0e0e5 100%);
    --card-accent-5-hover: #9d6674;
}

/* Required field asterisk: red for visibility across all pages */
.required-asterisk {
    color: var(--required-color);
    font-weight: 600;
}

/* Placeholder text: light gray but readable; typed/selected values stay dark */
.form-group input::placeholder,
.form-group textarea::placeholder,
.select-search-input::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--placeholder-color);
}
.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder,
.select-search-input:focus::placeholder {
    color: #aaa;
}
/* Native select placeholder option (when not using select-search) */
.form-group select option[value=""] {
    color: var(--placeholder-color);
}
.form-group select option:not([value=""]) {
    color: var(--text-primary);
}
/* Select-search input: placeholder gray when empty; typed/selected value visible (default text color) */
.select-search-input {
    color: var(--text-primary);
}

/* Success toast: top-right, auto-dismiss */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
}
.toast {
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    font-size: 0.95rem;
    font-weight: 500;
    max-width: 320px;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    pointer-events: auto;
}
.toast::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.toast-success,
.toast-message {
    background: #ecfdf3;
    color: #14532d;
    border-left: 4px solid var(--success-color);
}
.toast-success::before,
.toast-message::before {
    content: "✔";
    background: rgba(22, 163, 74, 0.12);
}
.toast-error {
    background: #fef2f2;
    color: #b91c1c;
    border-left: 4px solid var(--danger-color);
}
.toast-error::before {
    content: "!";
    font-weight: 700;
    background: rgba(220, 38, 38, 0.12);
}
.toast-warning {
    background: #fffbeb;
    color: #92400e;
    border-left: 4px solid var(--warning-color);
}
.toast-warning::before {
    content: "!";
    font-weight: 700;
    background: rgba(245, 158, 11, 0.12);
}
.toast-info {
    background: #eff6ff;
    color: #1d4ed8;
    border-left: 4px solid #3b82f6;
}
.toast-info::before {
    content: "i";
    font-weight: 700;
    background: rgba(59, 130, 246, 0.12);
}
.toast-success_light {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
    font-weight: 500;
}
.toast-fade-out {
    opacity: 0;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.5;
    font-size: 14px;
    /* Stack chrome + footer so the site footer stays below content, not overlapping tall pages */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Top bar: logo + search only – fixed so it always stays at top when scrolling.
   z-index above job-detail sticky header (200) so profile/Admin dropdown appears on top. */
.topbar {
    background-color: var(--surface);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.topbar-inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
/* Mobile: menu control lives in topbar because the in-sidebar toggle is off-screen until the drawer opens */
.topbar-nav-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--text-primary);
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
}
.topbar-nav-menu-btn:hover {
    background: var(--surface);
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.topbar-nav-menu-btn .nav-icon-menu {
    color: var(--nav-menu, #64748b);
}
@media (max-width: 768px) {
    .topbar-nav-menu-btn {
        display: inline-flex;
    }
}
/* Full-viewport overlay; lives outside .app-layout (see base.html) */
.sidebar-mobile-backdrop {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 65px;
    bottom: 0;
    z-index: 140;
    margin: 0;
    padding: 0;
    border: none;
    background: rgba(15, 23, 42, 0.4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.sidebar-mobile-backdrop:not([hidden]) {
    display: block;
}
@media (min-width: 769px) {
    .sidebar-mobile-backdrop {
        display: none !important;
    }
}
/* Prevent background scroll when mobile nav drawer is open (iOS/Android) */
body.sidebar-mobile-drawer-open {
    overflow: hidden;
}
.topbar-back {
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.9rem;
    flex-shrink: 0;
}
.topbar-back:hover { text-decoration: underline; }
.topbar-logo {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
}
.topbar-logo:hover {
    color: inherit;
}
.topbar-logo .nav-logo {
    display: block;
}
.topbar-logo .topbar-app-name {
    margin-left: 0.75rem;
    padding-left: 0.75rem;
    border-left: 1px solid var(--border-color);
}
.nav-logo {
    height: 40px;
    width: auto;
}
.topbar-app-name {
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.topbar-logo:hover .topbar-app-name {
    color: var(--primary-color);
}
.topbar-search-wrap {
    flex: 1;
    max-width: 500px;
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
}
.topbar-search-wrap .topbar-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary, #64748b);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.topbar-search-wrap .topbar-search-input {
    width: 100%;
    padding: 0.6rem 2.5rem 0.6rem 2.75rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    font-size: 0.9375rem;
    background: var(--background);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.topbar-search-wrap .topbar-search-input::placeholder {
    color: var(--text-secondary, #94a3b8);
}
.topbar-search-wrap .topbar-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.topbar-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.topbar-search-clear:hover {
    color: var(--text-primary, #0f172a);
    background: var(--border-color, #e2e8f0);
}
.topbar-search-clear.topbar-search-clear-visible {
    display: flex;
}

/* Topbar right group: bell + profile side by side */
.topbar-right-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* Topbar notifications bell (next to profile) */
.topbar-notifications-wrap {
    position: relative;
}
.topbar-notifications-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(202, 138, 4, 0.4);
    background: linear-gradient(145deg, #fef08a 0%, #facc15 50%, #eab308 100%);
    cursor: pointer;
    color: #854d0e;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(202, 138, 4, 0.25);
}
.topbar-notifications-trigger:hover {
    background: linear-gradient(145deg, #fef9c3 0%, #fde047 50%, #facc15 100%);
    border-color: #ca8a04;
    color: #713f12;
    box-shadow: 0 2px 8px rgba(202, 138, 4, 0.35);
}
.topbar-notifications-icon {
    display: block;
    line-height: 0;
}
.topbar-notifications-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.4);
}
.topbar-notifications-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 420px;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    background: var(--surface);
    border-radius: 12px;
    box-shadow: var(--shadow-md), 0 12px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color);
    z-index: 1001;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.topbar-notifications-panel[hidden] {
    display: none !important;
}
.topbar-notifications-header {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(253, 224, 71, 0.12) 0%, transparent 100%);
    flex-shrink: 0;
}
.topbar-notifications-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.topbar-notifications-list {
    overflow-y: auto;
    padding: 0.75rem;
    flex: 1;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.topbar-notifications-empty {
    margin: 0;
    padding: 1.25rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-align: center;
}
.topbar-notifications-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    font-size: 0.7875rem;
    transition: background 0.15s, box-shadow 0.15s;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: #fafafa;
}
.topbar-notifications-item:hover {
    background: #fefce8;
    box-shadow: 0 1px 6px rgba(202, 138, 4, 0.12);
}
.topbar-notifications-item.read {
    opacity: 0.85;
    background: #f8f8f8;
}
.topbar-notifications-item.read:hover {
    background: #fef9c3;
}
.topbar-notifications-item-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.topbar-notifications-item-link:hover {
    color: inherit;
}
.topbar-notifications-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.topbar-notifications-item-title {
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
}
.topbar-notifications-item-message {
    color: var(--text-secondary);
    line-height: 1.35;
    font-size: 0.75rem;
}
.topbar-notifications-item-time {
    font-size: 0.6875rem;
    color: var(--placeholder-color);
    margin-top: auto;
    align-self: flex-end;
}
.topbar-notifications-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.topbar-notifications-dismiss:hover {
    background: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}
.topbar-notifications-dismiss svg {
    width: 14px;
    height: 14px;
}

/* Topbar profile trigger (inside right group) */
.topbar-profile-wrap {
    position: relative;
}
.topbar-profile-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--surface);
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.topbar-profile-trigger:hover {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}
.topbar-profile-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--section-header-color), #9b87c4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.topbar-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.topbar-profile-initials {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.topbar-profile-name {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.topbar-profile-caret {
    font-size: 0.65rem;
    color: var(--text-secondary);
    transition: transform 0.2s;
}
.topbar-profile-trigger[aria-expanded="true"] .topbar-profile-caret {
    transform: rotate(180deg);
}

/* Profile dropdown panel (Admin / profile) – above sticky headers when open */
.topbar-profile-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 420px;
    max-width: calc(100vw - 2rem);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color);
    z-index: 501;
    overflow: hidden;
}
.topbar-profile-panel[hidden] {
    display: none !important;
}

.profile-panel-header {
    padding: 1.25rem 1.25rem 0.75rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, rgba(123, 104, 168, 0.06) 0%, transparent 100%);
}
.profile-panel-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--section-header-color), #9b87c4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-panel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-initials {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}
.profile-panel-title {
    margin: 0 0 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.profile-edit-btn {
    margin-bottom: 0.25rem;
}

/* Profile view body – do not change header above */
.profile-panel-view .profile-dl {
    margin: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0 1.25rem;
    font-size: 0.9rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
}
/* Row presentation: each label-value pair has a subtle separator */
.topbar-profile-panel .profile-dl dt {
    margin: 0;
    padding: 0.5rem 0 0.45rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.topbar-profile-panel .profile-dl dd {
    margin: 0;
    padding: 0.5rem 0 0.45rem;
    color: var(--text-primary);
    font-weight: 500;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
}
.profile-dl dd:empty::before {
    content: "—";
    color: var(--text-secondary);
}

/* Profile edit form */
.profile-panel-edit {
    padding: 1.25rem 1.5rem 1.5rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.02) 100%);
}
.profile-form-photo {
    text-align: center;
    margin-bottom: 1.25rem;
}
.profile-edit-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 0.75rem;
    overflow: hidden;
    background: linear-gradient(135deg, var(--section-header-color), #9b87c4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-edit-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.profile-photo-input {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}
.topbar-profile-panel .profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}
.topbar-profile-panel .profile-form-grid .form-group {
    margin-bottom: 0;
}
.topbar-profile-panel .profile-form-grid .form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.topbar-profile-panel .profile-form-grid .form-group input.form-control {
    padding: 0.5rem 0.65rem;
    font-size: 0.9rem;
    border-radius: var(--radius-md, 6px);
}
/* Profile Save & Cancel – modern buttons */
.topbar-profile-panel .profile-form-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--border-color);
}
.topbar-profile-panel .profile-form-actions .btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: var(--radius-md, 6px);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.topbar-profile-panel .profile-form-actions .btn-secondary {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.topbar-profile-panel .profile-form-actions .btn-secondary:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
}
.topbar-profile-panel .profile-form-actions .btn-primary {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
    box-shadow: 0 1px 3px rgba(123, 104, 168, 0.25);
}
.topbar-profile-panel .profile-form-actions .btn-primary:hover {
    background: var(--primary-hover);
    box-shadow: 0 3px 10px rgba(123, 104, 168, 0.3);
    transform: translateY(-1px);
}
@media (max-width: 460px) {
    .topbar-profile-panel { width: calc(100vw - 2rem); }
    .topbar-profile-panel .profile-form-grid { grid-template-columns: 1fr; }
    .topbar-profile-panel .profile-dl { grid-template-columns: 1fr; }
}

/* Back link (e.g. "< Back to Cart") */
.page-back {
    display: inline-block;
    margin-bottom: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.95rem;
}
.page-back:hover {
    text-decoration: underline;
}

/* Settings sub-pages: same layout as Create candidate (back link + title + subtitle) */
.settings-subpage {
    max-width: 1200px;
    padding: 0;
}
.settings-subpage .page-back.back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.95rem;
}
.settings-subpage .page-back.back-link:hover {
    text-decoration: underline;
}
.settings-subpage .settings-subpage-title {
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
    color: var(--text-primary);
}
.settings-subpage .settings-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
/* Override Users/Groups page-header gradient when inside settings-subpage – match Create candidate plain header */
.settings-subpage .page-header.users-page-header,
.settings-subpage .page-header.groups-page-header {
    background: transparent;
    border: none;
    border-left: none;
    padding: 0;
    margin-bottom: 1rem;
}
.settings-subpage .page-header.users-page-header h1,
.settings-subpage .page-header.groups-page-header h1 {
    color: var(--text-primary);
    font-size: 1.5rem;
}

/* Settings index: two-section layout (left: packages + tech stack, right: tiles) */
.settings-index-split .settings-index-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
    align-items: start;
    margin-top: 0.5rem;
}
/* When there is no left column (no packages/tech stack), let tiles span full width */
.settings-index-split .settings-index-layout.settings-index-layout--single {
    grid-template-columns: 1fr;
}
@media (max-width: 900px) {
    .settings-index-split .settings-index-layout {
        grid-template-columns: 1fr;
    }
}
.settings-left-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
    padding-right: 0.5rem;
}

/* Modern card shell (packages + tech stack) */
.settings-modern-card {
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.settings-modern-card:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 102, 204, 0.2);
}
.settings-card-header {
    padding: 1rem 1.35rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.settings-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0;
    letter-spacing: -0.01em;
}
.settings-card-title-icon {
    font-size: 1.25rem;
    line-height: 1;
}

/* Packages section */
.settings-packages-section {
    min-width: 0;
}
.settings-packages-card .settings-packages-search-wrap {
    padding: 0.85rem 1.35rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}
.settings-packages-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.5rem;
}
.settings-packages-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.settings-packages-search-icon svg {
    display: block;
}
.settings-packages-search-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 2.25rem 0 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-packages-search-input::placeholder {
    color: #94a3b8;
}
.settings-packages-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.settings-packages-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.settings-packages-search-inner.has-text .settings-packages-search-clear {
    display: flex;
}
.settings-packages-search-clear:hover {
    color: var(--primary-color);
    background: rgba(0, 102, 204, 0.08);
}
.settings-packages-table-wrap {
    overflow-x: auto;
    max-height: 380px;
    overflow-y: auto;
    padding: 0 1.35rem 1rem;
}
.settings-packages-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.settings-packages-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
}
.settings-packages-table th {
    text-align: left;
    padding: 0.7rem 1.35rem;
    font-weight: 600;
    color: #475569;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.settings-packages-table td {
    padding: 0.65rem 1.35rem;
    border-bottom: 1px solid #f1f5f9;
    color: var(--text-primary);
}
.settings-packages-table tbody tr:hover {
    background: rgba(0, 102, 204, 0.05);
}
.settings-packages-name {
    font-weight: 500;
    color: #334155;
}
.settings-packages-version {
    color: #64748b;
    font-family: ui-monospace, "SF Mono", Monaco, monospace;
    font-size: 0.8125rem;
}
.settings-packages-group {
    font-size: 0.8125rem;
    color: #475569;
    white-space: nowrap;
}
.settings-packages-no-results {
    margin: 0;
    padding: 1rem 1.35rem;
    font-size: 0.875rem;
    color: #64748b;
}
.settings-packages-no-results.hide {
    display: none;
}
.settings-packages-empty {
    color: #64748b;
    font-style: italic;
    padding: 1rem 1.35rem !important;
}

/* Runtime & services card — Python, PostgreSQL, Ollama */
.settings-runtime-section {
    min-width: 0;
}
.settings-runtime-card .settings-card-header {
    padding: 1rem 1.35rem;
}
.settings-runtime-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    padding: 1rem 1.35rem 1.25rem;
}
.settings-runtime-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1rem 1.1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-runtime-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.settings-runtime-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.settings-runtime-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    word-break: break-word;
    line-height: 1.4;
}
.settings-runtime-value--server {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
}
.settings-runtime-value--server .settings-server-cores:not(:last-child)::after,
.settings-runtime-value--server .settings-server-ram:not(:last-child)::after {
    content: " · ";
    margin-left: 0.25rem;
    color: #64748b;
    font-weight: 400;
}
.settings-runtime-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 6px;
}
.settings-runtime-badge--ok,
.settings-runtime-badge--Runtime,
.settings-runtime-badge--connected,
.settings-runtime-badge--available {
    background: #dcfce7;
    color: #166534;
}
.settings-runtime-badge--unconfigured,
.settings-runtime-badge--disabled {
    background: #f1f5f9;
    color: #475569;
}
.settings-runtime-badge--unavailable {
    background: #fef3c7;
    color: #92400e;
}
.settings-runtime-badge--error {
    background: #fee2e2;
    color: #991b1b;
}
.settings-runtime-badges-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.settings-runtime-badge--live {
    background: #dbeafe;
    color: #1d4ed8;
    animation: settings-live-pulse 2s ease-in-out infinite;
}
@keyframes settings-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* Tech stack section */
.settings-techstack-section {
    min-width: 0;
}
.settings-techstack-card .settings-card-header {
    padding: 1rem 1.35rem;
}
.settings-techstack-body {
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.settings-techstack-block {
    padding: 0;
}
.settings-techstack-subtitle {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.6rem 0;
}
.settings-techstack-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.7;
}
.settings-techstack-list li {
    margin-bottom: 0.35rem;
}
.settings-techstack-list strong {
    color: #1e293b;
    font-weight: 600;
}
.settings-techstack-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    font-size: 0.875rem;
    color: #334155;
}
.settings-flow-node {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    background: #f1f5f9;
    border-radius: 6px;
    font-weight: 500;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.settings-flow-arrow {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.75rem;
}
.settings-techstack-hint {
    margin: 0.6rem 0 0 0;
    font-size: 0.8125rem;
    color: #64748b;
    font-style: italic;
}

/* Data flow — separate section (like Application components) */
.settings-dataflow-section {
    min-width: 0;
}
.settings-dataflow-card .settings-card-header {
    padding: 1rem 1.35rem;
}
.settings-dataflow-intro {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    color: #64748b;
}
.settings-dataflow-body {
    padding: 1.25rem 1.35rem;
}

/* Chat query handle — Intent extraction to RAG */
.settings-chatflow-section {
    min-width: 0;
}
.settings-chatflow-card .settings-card-header {
    padding: 1rem 1.35rem;
}
.settings-chatflow-intro {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    color: #64748b;
}
.settings-chatflow-body {
    padding: 1.25rem 1.35rem;
}
.settings-chatflow-steps {
    margin: 0 0 0 1.25rem;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-primary, #1e293b);
}
.settings-chatflow-steps li {
    margin-bottom: 0.5rem;
}
.settings-chatflow-steps li:last-child {
    margin-bottom: 0;
}
.settings-chatflow-steps strong {
    color: #1e293b;
}
.settings-chatflow-body .settings-techstack-hint {
    margin-top: 1rem;
}

/* Application components — grouped by layer */
.settings-components-intro {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 400;
}

/* Application components — search bar (modern UI) */
.settings-techstack-card .settings-components-search-wrap {
    padding: 0.85rem 1.35rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
}
.settings-components-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.5rem;
}
.settings-components-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.settings-components-search-icon svg {
    display: block;
}
.settings-components-search-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 2.25rem 0 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-components-search-input::placeholder {
    color: #94a3b8;
}
.settings-components-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.settings-components-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.settings-components-search-inner.has-text .settings-components-search-clear {
    display: flex;
}
.settings-components-search-clear:hover {
    color: var(--primary-color);
    background: rgba(0, 102, 204, 0.08);
}

/* Application components — scrollable body with auto scroll */
.settings-components-body-scroll {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 1rem 1.35rem 1.25rem;
}
.settings-components-body-scroll::-webkit-scrollbar {
    width: 8px;
}
.settings-components-body-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}
.settings-components-body-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
.settings-components-body-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.settings-components-no-results {
    margin: 0 0 1rem 0;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    color: #64748b;
}
.settings-components-no-results.hide {
    display: none;
}

.settings-components-group {
    margin-bottom: 1.25rem;
    padding: 0;
}
.settings-components-group:last-of-type {
    margin-bottom: 0.5rem;
}
.settings-components-group-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #e2e8f0;
}
.settings-components-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.settings-components-list .settings-component-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    border: none;
    background: transparent;
    margin-bottom: 0.25rem;
}
.settings-components-list .settings-component-item:hover {
    background: #f8fafc;
}
.settings-components-list .settings-component-name {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}
.settings-components-list .settings-component-detail {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
}
/* Legacy grid (if used elsewhere) */
.settings-components-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.settings-components-grid .settings-component-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.65rem 0.85rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
}
.settings-component-layer {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.settings-component-name {
    font-weight: 600;
    color: #1e293b;
}
.settings-component-detail {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.35;
}

/* Right: Tiles section */
.settings-tiles-section {
    min-width: 0;
}
.settings-tiles-heading-visible {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    margin: 0 0 1rem 0;
    letter-spacing: -0.01em;
}

.settings-tiles-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.settings-flash {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    border: 1px solid rgba(248, 113, 113, 0.5);
    background: #fef2f2;
    color: #991b1b;
    white-space: nowrap;
}

.settings-flash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: rgba(248, 113, 113, 0.15);
    color: #b91c1c;
    font-weight: 700;
    font-size: 0.75rem;
}

/* Settings Configuration (email config): labels subtle, values stand out */
.settings-configuration-form .job-form-section .form-group > label:first-child:not([for]) {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.01em;
}
.settings-configuration-form .job-form-section .form-group > label[for] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    letter-spacing: 0.01em;
}
.settings-configuration-form .job-form-section .form-group label:has(input[type="checkbox"]) {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}
.settings-configuration-form .job-form-section .form-control,
.settings-configuration-form .job-form-section input[type="text"],
.settings-configuration-form .job-form-section input[type="number"],
.settings-configuration-form .job-form-section input[type="email"],
.settings-configuration-form .job-form-section input[type="password"] {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
}
.settings-configuration-form .job-form-section .form-control::placeholder,
.settings-configuration-form .job-form-section input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}
.settings-configuration-form .form-hint {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #64748b;
}

/* Test email + Save: all in one row */
.settings-configuration-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.settings-configuration-actions-single-row {
    flex-wrap: nowrap;
}
@media (max-width: 720px) {
    .settings-configuration-actions-single-row {
        flex-wrap: wrap;
    }
}
.settings-configuration-form .test-email-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    margin: 0;
    white-space: nowrap;
}
.settings-configuration-form .settings-configuration-actions .test-email-input {
    width: 100%;
    max-width: 260px;
    min-width: 180px;
    padding: 0.5rem 0.85rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    background: var(--surface, #fff);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-configuration-form .test-email-input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}
.settings-configuration-form .test-email-input:hover {
    border-color: #cbd5e1;
}
.settings-configuration-form .test-email-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.settings-configuration-form .test-email-btn {
    flex-shrink: 0;
}
.settings-configuration-actions .btn-primary {
    margin-left: auto;
}

/* Configuration page – modern UI */
.config-page-modern .config-page-header .page-header-desc {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}
.config-page-modern .config-section {
    max-width: 720px;
}

/* Email template form: use full width of main content area */
.config-page-modern .config-section-email-template-form {
    max-width: 100%;
}
.config-page-modern .config-card {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.config-page-modern .config-card-header {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 1.25rem;
}
.config-page-modern .config-card-header .card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.config-page-modern .config-card-header-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Email templates list */
.config-email-templates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.config-email-templates-new-btn {
    flex-shrink: 0;
}

.config-email-templates-table-wrap {
    overflow-x: auto;
    margin-top: 0.5rem;
}

.config-email-templates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.config-email-templates-table th,
.config-email-templates-table td {
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.config-email-templates-table th {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    background: #f8fafc;
}

.config-email-templates-table td code {
    font-size: 0.8125rem;
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
}

.config-email-templates-actions-col {
    width: 140px;
}

.config-email-templates-actions .btn {
    margin-right: 0.35rem;
}

.config-email-templates-copy-form {
    display: inline;
}

.config-email-templates-empty {
    margin: 0.75rem 0 0;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 8px;
}

.config-email-template-form .config-email-template-textarea {
    font-family: inherit;
    min-height: 120px;
}

.config-email-template-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Email template: Insert parameter (Job / Candidate / Interview) */
.email-template-insert-params-wrap {
    padding: 0.75rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}
.email-template-params-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    margin-top: 0.5rem;
}
.email-template-params-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
}
.email-template-params-group-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    width: 100%;
    margin-bottom: 0.15rem;
}
.email-template-params-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.email-template-param-btn {
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Pre-onboarding config: Save button at bottom right of block */
.config-pre-onboarding-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

/* Pre-onboarding configuration page (modern layout) */
.config-page-modern .config-section-pre-onboarding {
    max-width: 820px;
}

.config-po-hero-card.config-card {
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.config-po-hero-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 55%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.config-po-hero-title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.config-po-hero-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #fff;
    color: #4f46e5;
    border: 1px solid #e0e7ff;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.08);
}

.config-po-hero-title {
    margin: 0 0 0.35rem;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary, #0f172a);
}

.config-po-hero-sub {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary, #64748b);
    max-width: 52ch;
}

.config-po-card-body {
    padding-top: 1.5rem;
}

.config-po-settings-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.config-po-panel {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.config-po-panel:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
}

.config-po-panel--accent {
    border-color: #c7d2fe;
    background: linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
}

.config-po-panel-header {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.15rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.config-po-panel--accent .config-po-panel-header {
    background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);
    border-bottom-color: #e0e7ff;
}

.config-po-panel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.config-po-panel-icon--accent {
    color: #4f46e5;
    border-color: #c7d2fe;
    background: #fff;
}

.config-po-panel-title {
    margin: 0 0 0.2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

.config-po-panel-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-secondary, #64748b);
}

.config-po-inline-link {
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
}

.config-po-inline-link:hover {
    text-decoration: underline;
}

.config-po-panel-body {
    padding: 1.1rem 1.15rem 1.2rem;
}

.config-po-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #334155);
    margin-bottom: 0.4rem;
}

.config-po-input,
.config-po-select {
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    padding: 0.55rem 0.75rem;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.config-po-input:focus,
.config-po-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
}

.config-po-select-wrap {
    position: relative;
}

.config-po-select-wrap::after {
    content: "";
    position: absolute;
    right: 0.85rem;
    top: 50%;
    margin-top: -2px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #64748b;
    pointer-events: none;
}

/* select-search adds its own control; hide duplicate chevron */
.config-po-select-wrap:has(.select-search-wrap)::after {
    display: none;
}

.config-po-select {
    width: 100%;
    max-width: 100%;
    appearance: none;
    padding-right: 2.25rem;
    cursor: pointer;
    background-color: #fff;
}

.config-po-panel-body .select-search-wrap .select-search-input {
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    padding: 0.55rem 0.75rem;
    font-size: 0.9375rem;
}

.config-po-panel-body .select-search-wrap .select-search-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    outline: none;
}

.config-po-hint {
    margin: 0.65rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #64748b;
}

.config-po-hint code {
    font-size: 0.78rem;
    background: #f1f5f9;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.config-po-empty-templates {
    margin-top: 0.75rem;
    padding: 1rem 1.1rem;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
}

.config-po-empty-text {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    color: #64748b;
}

.config-po-empty-btn {
    font-size: 0.875rem;
}

.config-po-actions {
    border-top: 1px solid #e2e8f0;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
}

.config-po-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 10px;
    font-weight: 600;
}

.config-po-save-icon {
    display: flex;
    opacity: 0.95;
}

@media (min-width: 640px) {
    .config-po-settings-grid {
        gap: 1.5rem;
    }
}

.config-page-modern .config-card-body {
    padding: 1.25rem 1.25rem 1.5rem;
}

/* Email config: Connect / Disconnect status row */
.config-email-status-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.config-email-status-label {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-size: 0.9375rem;
}

.config-email-status-badge {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
}

.config-email-status-badge--connected {
    background: #dcfce7;
    color: #166534;
}

.config-email-status-badge--disconnected {
    background: #fef3c7;
    color: #92400e;
}

.config-email-status-badge--none {
    background: #f1f5f9;
    color: #64748b;
}

.config-email-status-hint {
    font-size: 0.875rem;
}

.config-email-toggle-form {
    margin-left: 0.25rem;
}

.config-email-toggle-btn {
    font-size: 0.875rem;
    padding: 0.35rem 0.85rem;
}

.config-page-modern .form-section-divider {
    border: 0;
    height: 1px;
    background: #e2e8f0;
    margin: 1.5rem 0;
}
.config-page-modern .form-subsection-title {
    color: var(--text-primary);
    font-weight: 600;
}
.config-page-modern .config-masked-input::placeholder {
    letter-spacing: 0.02em;
}

/* Configuration page – sidebar layout (Email / Pre-onboarding / Email Templates) */
.config-page-with-sidebar .config-layout {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.config-page-with-sidebar .config-sidebar {
    flex-shrink: 0;
    width: 220px;
}

.config-page-with-sidebar .config-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.config-page-with-sidebar .config-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    text-decoration: none;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.config-page-with-sidebar .config-nav-link:hover {
    color: var(--primary-color, #0066cc);
    background: rgba(0, 102, 204, 0.06);
    text-decoration: none;
}

.config-page-with-sidebar .config-nav-link.active {
    color: var(--primary-color, #0066cc);
    background: rgba(0, 102, 204, 0.1);
    border-color: rgba(0, 102, 204, 0.25);
}

.config-page-with-sidebar .config-nav-icon {
    font-size: 1.1rem;
}

.config-page-with-sidebar .config-main {
    flex: 1;
    min-width: 0;
}

.config-page-with-sidebar .config-main .config-section {
    max-width: 720px;
}

.config-page-with-sidebar .config-main .config-section-email-template-form {
    max-width: 100%;
}

.config-page-with-sidebar .config-welcome {
    padding: 2rem 0;
}

.config-page-with-sidebar .config-welcome-text {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary, #64748b);
}

@media (max-width: 768px) {
    .config-page-with-sidebar .config-layout {
        flex-direction: column;
    }
    .config-page-with-sidebar .config-sidebar {
        width: 100%;
    }
    .config-page-with-sidebar .config-nav-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Configuration page – modern users-page layout (grid + sidebar card + SVG icons) */
.config-page-users-style.users-page .config-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.5rem;
    margin-top: 0;
}
.config-page-users-style.users-page .config-layout.config-layout-sidebar-left {
    grid-template-columns: 300px 1fr;
}
@media (max-width: 768px) {
    .config-page-users-style.users-page .config-layout {
        grid-template-columns: 1fr;
    }
    .config-page-users-style.users-page .config-layout.config-layout-sidebar-left {
        grid-template-columns: 1fr;
    }
}
.config-page-users-style .config-sidebar {
    width: auto;
}
.config-page-users-style .config-nav-card .config-nav-card-body {
    padding: 0.75rem 1rem 1rem;
}
.config-page-users-style .config-nav-list {
    gap: 0.5rem;
}
.config-page-users-style .config-nav-link {
    padding: 0.65rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.config-page-users-style .config-nav-link:hover {
    border-color: #cbd5e1;
}
.config-page-users-style .config-nav-link.active {
    border-color: rgba(0, 102, 204, 0.35);
}
.config-page-users-style .config-nav-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-secondary, #64748b);
}
.config-page-users-style .config-nav-link:hover .config-nav-icon-svg,
.config-page-users-style .config-nav-link.active .config-nav-icon-svg {
    color: var(--primary-color, #0066cc);
}
.config-page-users-style .config-nav-icon-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}
.config-page-users-style .config-nav-label {
    flex: 1;
    min-width: 0;
}

/* Configuration page – full-page modern UI */
.config-page-modern .back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.config-page-modern .back-link:hover {
    color: var(--primary-color, #0066cc);
    background: rgba(0, 102, 204, 0.06);
    text-decoration: none;
}
.config-page-modern .config-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #eef2ff 100%);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    border-left: 4px solid var(--primary-color, #0066cc);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.config-page-modern .config-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.config-page-modern .job-form-section .form-group {
    margin-bottom: 1rem;
}
.config-page-modern .job-form-section .form-row-2 {
    gap: 1rem;
}
.config-page-modern .job-form-section .form-control,
.config-page-modern .job-form-section input[type="text"],
.config-page-modern .job-form-section input[type="number"],
.config-page-modern .job-form-section input[type="email"],
.config-page-modern .job-form-section input[type="password"] {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.config-page-modern .job-form-section .form-control:hover,
.config-page-modern .job-form-section input:hover {
    border-color: #cbd5e1;
}
.config-page-modern .job-form-section .form-control:focus,
.config-page-modern .job-form-section input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.config-page-modern .job-form-section input[type="checkbox"] {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 4px;
    accent-color: var(--primary-color, #0066cc);
}
.config-page-modern .form-help-details {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    background: #f8fafc;
}
.config-page-modern .form-help-details summary {
    color: var(--primary-color, #0066cc);
    font-weight: 500;
}
.config-page-modern .form-help-details[open] summary {
    margin-bottom: 0.5rem;
}
.config-page-modern .form-help-details .text-muted {
    color: #64748b;
}
.config-page-modern .config-help-details {
    margin: 0.5rem 0;
}
.config-page-modern .config-help-details summary {
    cursor: pointer;
    font-size: 0.9rem;
}
.config-page-modern .config-help-details-body {
    font-size: 0.85rem;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}
.config-page-modern .config-help-details-body p {
    margin-bottom: 0.35rem;
}
.config-page-modern .config-help-details-body ol {
    margin: 0.35rem 0 0 1rem;
    padding-left: 0.5rem;
}
.config-page-modern .config-help-details-body p:last-child {
    margin-bottom: 0;
}
.config-page-modern .config-hint {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}
.config-page-modern .config-oauth-label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}
.config-page-modern .config-oauth-uri-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-family: ui-monospace, monospace;
    font-size: 0.85rem;
    word-break: break-all;
}
.config-page-modern .config-oauth-uri-box .config-oauth-uri-text {
    flex: 1;
    min-width: 0;
    color: var(--text-primary, #1e293b);
}
.config-page-modern .config-oauth-uri-box .config-oauth-copy-success {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: #059669;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.config-page-modern .config-oauth-uri-box .config-oauth-copy-success.is-visible {
    opacity: 1;
}
.config-page-modern .config-oauth-uri-box .config-oauth-copy-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.config-page-modern .config-oauth-uri-box .config-oauth-copy-btn:hover {
    background: #f1f5f9;
    color: #334155;
}
.config-page-modern .config-oauth-uri-box .config-oauth-copy-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.3);
}
.config-page-modern .config-oauth-uri-box .config-oauth-copy-btn svg {
    display: block;
}
.config-page-modern .config-connected-bubble {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #059669;
    border-radius: 9999px;
    white-space: nowrap;
}
.config-page-modern .job-form-section .form-control[readonly],
.config-page-modern .job-form-section .form-control[style*="monospace"] {
    background: #f1f5f9;
    font-family: ui-monospace, monospace;
}
.config-page-modern .settings-configuration-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
}
.config-page-modern .settings-configuration-actions .test-email-label {
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
    flex-shrink: 0;
}
.config-page-modern .settings-configuration-actions .test-email-input {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    height: 2.5rem;
    width: 220px;
    min-width: 180px;
    flex-shrink: 0;
}
.config-page-modern .settings-configuration-actions .test-email-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
@media (max-width: 640px) {
    .config-page-modern .settings-configuration-actions {
        flex-wrap: wrap;
    }
}
/* Configuration page – modern buttons */
.config-page-modern .btn {
    min-height: 2.5rem;
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.config-page-modern .btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.25);
}
.config-page-modern .btn-primary,
.config-page-modern #btn-save-config {
    background: var(--primary-color, #0066cc);
    color: #fff;
    border: 1px solid var(--primary-color, #0066cc);
    box-shadow: 0 1px 3px rgba(0, 102, 204, 0.2);
}
.config-page-modern .btn-primary:hover,
.config-page-modern #btn-save-config:hover {
    background: var(--primary-hover, #0052a3);
    border-color: var(--primary-hover, #0052a3);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.28);
    transform: translateY(-1px);
}
.config-page-modern .btn-soft,
.config-page-modern .test-email-btn {
    background: #fff;
    color: var(--text-primary, #334155);
    border: 1px solid #e2e8f0;
}
.config-page-modern .btn-soft:hover,
.config-page-modern .test-email-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: var(--text-primary, #1e293b);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.config-page-modern .test-email-btn .config-test-email-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    border: 2px solid rgba(0, 102, 204, 0.2);
    border-top-color: var(--primary-color, #0066cc);
    border-radius: 50%;
    animation: parse-spin 0.6s linear infinite;
    flex-shrink: 0;
    vertical-align: middle;
}
.config-page-modern .test-email-btn.is-loading .config-test-email-spinner {
    display: inline-block;
}
.config-page-modern .test-email-btn.is-loading {
    pointer-events: none;
    opacity: 0.9;
}
.config-page-modern .settings-configuration-actions .btn-primary,
.config-page-modern .settings-configuration-actions #btn-save-config {
    flex-shrink: 0;
}

.settings-tiles-section .settings-index-grid {
    margin-top: 0;
}

/* Settings index: grid of cards (Dashboard → Settings) */
.settings-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}
.settings-index-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.5rem;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--border-color);
    background: var(--surface);
    box-shadow: var(--shadow, 0 1px 2px rgba(0,0,0,0.06));
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.settings-index-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.08));
    color: var(--text-primary);
}
/* Modern tile styling (settings page right column) */
.settings-modern-tile {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.settings-modern-tile:hover {
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.12);
    transform: translateY(-1px);
}
.settings-modern-tile .settings-index-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1;
    opacity: 0.9;
}
.settings-modern-tile .settings-index-title {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 0 0 0.4rem 0;
    color: #1e293b;
    letter-spacing: -0.01em;
}
.settings-modern-tile .settings-index-desc {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}
.settings-index-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}
.settings-index-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 0.35rem 0;
    color: var(--text-primary);
}
.settings-index-desc {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.45;
}

/* Dropdowns page: spacing below subtitle before search */
.settings-subpage.dropdowns-page .open-pool-search-wrap {
    margin-bottom: 1.5rem;
}
.settings-subpage.dropdowns-page .dropdowns-list {
    margin-top: 0;
}

/* Promo / info banner below header */
.promo-banner {
    background: #fff8e6;
    border-bottom: 1px solid #ffe4a0;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    color: var(--text-primary);
    text-align: center;
}
.promo-banner a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}
.promo-banner a:hover { text-decoration: underline; }

/* Checkout-style stepper */
.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 0 1rem;
}
.stepper-step {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.stepper-step.active {
    color: var(--primary-color);
    font-weight: 600;
}
.stepper-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-secondary);
    margin-right: 0.5rem;
    font-size: 0.8rem;
}
.stepper-step.active .step-num {
    background: var(--primary-color);
    color: #fff;
}
.stepper-connector {
    width: 40px;
    height: 2px;
    background: var(--border-color);
    margin: 0 0.5rem;
}
.stepper-step.active + .stepper-connector,
.stepper-connector.done { background: var(--primary-color); }

/* Form sections: Delivery Address / Contact Info style */
.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    text-transform: none;
    letter-spacing: 0;
    border: none;
    padding: 0;
}
.form-section .card-header {
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
}
.form-section .card-header .form-section-title {
    margin-bottom: 0;
}
.label-required::after {
    content: " *";
    color: var(--required-color);
}
/* Input error state: red border + optional icon */
input.field-invalid,
select.field-invalid,
textarea.field-invalid {
    border-color: var(--danger-color);
    background: #fff5f5;
}
input.field-readonly,
select.field-readonly,
textarea.field-readonly {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    border-color: #cbd5e1;
}
.form-group .field-readonly-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin-top: 0.25rem;
}
.input-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}
.input-wrap .field-invalid + .input-error-icon,
.input-error-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--danger-color);
    font-size: 1rem;
    pointer-events: none;
}

/* Two-column layout: form left, summary right */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.checkout-main { min-width: 0; }
.checkout-sidebar {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    height: fit-content;
    position: sticky;
    top: 90px;
}
.checkout-sidebar h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-sidebar { position: static; }
}

/* App layout: sidebar + main (padding-top so content starts below fixed topbar) */
.app-layout {
    display: flex;
    flex: 1 0 auto;
    min-height: calc(100vh - 65px);
    overflow: visible;
    padding-top: 65px;
}
/* Let dashboard filter dropdowns extend past main content */
main.container:has(.dashboard-filters-form) {
    overflow: visible;
}
.container {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem 2rem;
    min-height: calc(100vh - 200px);
}

/* Vertical sidebar – sticky so it stays at top when page scrolls (below fixed topbar) */
.sidebar {
    width: 220px;
    min-width: 220px;
    background: var(--surface);
    border-right: 1px solid var(--border-color);
    padding: 1rem 0.5rem;
    position: sticky;
    top: 65px;
    align-self: flex-start;
    max-height: calc(100vh - 65px);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.2s ease, min-width 0.2s ease, max-width 0.2s ease;
    flex-shrink: 0;
}
.sidebar-collapsed {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.sidebar-collapsed .nav-label,
.sidebar-collapsed .submenu-caret {
    display: none !important;
    width: 0;
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
}
.sidebar-collapsed .sidebar-menu a,
.sidebar-collapsed .sidebar-parent {
    justify-content: center;
    padding: 0.5rem;
    min-width: 0;
}
.sidebar-collapsed .sidebar-menu > li {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
/* When collapsed: hide all submenus so no text is visible during/after collapse */
.sidebar-collapsed .sidebar-submenu {
    display: none !important;
    overflow: hidden;
    opacity: 0;
    max-height: 0;
}
/* When collapsed but hovering: show only the open submenu */
.sidebar:hover.sidebar-collapsed .sidebar-submenu.open {
    display: block !important;
    opacity: 1;
    max-height: none;
}
/* Expand sidebar on mouseover and show menu titles */
.sidebar:hover.sidebar-collapsed {
    width: 220px;
    min-width: 220px;
    max-width: 220px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.sidebar:hover.sidebar-collapsed .nav-label,
.sidebar:hover.sidebar-collapsed .submenu-caret {
    display: inline-block !important;
    width: auto !important;
    overflow: visible !important;
    opacity: 1;
    white-space: nowrap;
}
.sidebar:hover.sidebar-collapsed .sidebar-menu a,
.sidebar:hover.sidebar-collapsed .sidebar-parent {
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
}
.sidebar:hover.sidebar-collapsed .sidebar-menu > li {
    justify-content: flex-start;
    align-items: stretch;
}
.sidebar .nav-label {
    transition: opacity 0.15s ease;
}
.sidebar-toggle {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 1.1rem;
}
/* Desktop: show menu icon when sidebar is collapsed, hide when expanded */
@media (min-width: 769px) {
    .sidebar-toggle {
        display: none;
    }
    .sidebar-collapsed .sidebar-toggle {
        display: block;
    }
}
@media (max-width: 768px) {
    .sidebar-toggle {
        display: block;
    }
}
.sidebar-menu {
    list-style: none;
}
.sidebar-menu > li {
    margin-bottom: 0.25rem;
}
/* Submenu must sit below parent; stack vertically with small indent */
.sidebar-menu > li.sidebar-item-has-children {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.sidebar-menu a,
.sidebar-parent {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    color: var(--text-secondary);
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 0.95rem;
    text-decoration: none;
}
.sidebar-menu a:hover,
.sidebar-parent:hover {
    background: var(--background);
    color: var(--primary-color);
}
.nav-icon {
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nav-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
    color: inherit;
}
.nav-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
    color: inherit;
    fill: currentColor;
    stroke: none;
}
/* Soothing colorful nav icons (default state) */
.sidebar-toggle .nav-icon-menu { color: var(--nav-menu); }
.nav-icon-dashboard { color: var(--nav-dashboard); }
.nav-icon-jobs { color: var(--nav-jobs); }
.nav-icon-candidates { color: var(--nav-candidates); }
.nav-icon-interviews { color: var(--nav-interviews); }
.nav-icon-specials { color: var(--nav-specials); }
.nav-icon-customers { color: var(--nav-customers); }
.nav-icon-reports { color: var(--nav-reports); }
.nav-icon-chat { color: var(--nav-chat); }
.nav-icon-settings { color: var(--nav-settings); }
.nav-icon-logout { color: var(--nav-logout); }
.sidebar-submenu .nav-icon-sub { color: var(--nav-sub); }
.sidebar-menu a:hover .nav-icon-svg,
.sidebar-parent:hover .nav-icon-svg {
    color: var(--primary-color);
}
.sidebar-submenu a:hover .nav-icon-svg {
    color: var(--primary-color);
}
/* Ensure labels are visible when sidebar is expanded (not collapsed) */
.sidebar:not(.sidebar-collapsed) .nav-label,
.sidebar:not(.sidebar-collapsed) .submenu-caret {
    display: inline;
    width: auto;
    visibility: visible;
    color: inherit;
}
.sidebar:not(.sidebar-collapsed) .sidebar-menu a,
.sidebar:not(.sidebar-collapsed) .sidebar-parent {
    color: var(--text-secondary);
}
.sidebar:not(.sidebar-collapsed) .sidebar-menu a:hover,
.sidebar:not(.sidebar-collapsed) .sidebar-parent:hover {
    color: var(--primary-color);
}
.sidebar-submenu {
    list-style: none;
    padding-left: 0.75rem;
    margin-top: 0.15rem;
    margin-bottom: 0.5rem;
    display: none;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.sidebar-submenu.open {
    display: block;
}
.sidebar-submenu li {
    width: 100%;
    min-width: 0;
}
.sidebar-submenu a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-width: 0;
    padding: 0.3rem 0.5rem;
    padding-left: 1rem;
    font-size: 0.9rem;
    box-sizing: border-box;
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.sidebar-submenu a:hover {
    background: var(--background);
    color: var(--primary-color);
}
.sidebar-submenu .nav-icon {
    flex-shrink: 0;
}
.sidebar-submenu a .nav-icon-svg {
    flex-shrink: 0;
}
.sidebar-submenu .nav-label {
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}
.sidebar-parent .submenu-caret {
    margin-left: auto;
    transition: transform 0.2s;
}
.sidebar-item-has-children.open .submenu-caret {
    transform: rotate(90deg);
}

/* Responsive: mobile/tablet */
@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }
    .sidebar {
        position: fixed;
        top: 65px;
        left: 0;
        height: calc(100vh - 65px);
        transform: translateX(-100%);
        width: 220px !important;
        z-index: 150;
        box-shadow: 4px 0 12px rgba(0,0,0,0.1);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .sidebar-collapsed {
        width: 220px !important;
    }
    .sidebar:hover.sidebar-collapsed {
        width: 220px !important;
    }
    /*
     * Mobile drawer: keep HTML class sidebar-collapsed for desktop resize, but NEVER hide labels here.
     * Collapsed rules use display:none on .nav-label; desktop recovers them via :hover — touch has no hover,
     * so icons-only / "late" text was a real bug. Submenus must follow .open only, not collapsed global hide.
     */
    .sidebar.sidebar-collapsed .nav-label,
    .sidebar.sidebar-collapsed .submenu-caret {
        display: inline !important;
        width: auto !important;
        max-width: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    .sidebar.sidebar-collapsed .sidebar-menu a,
    .sidebar.sidebar-collapsed .sidebar-parent {
        justify-content: flex-start !important;
        padding: 0.5rem 0.75rem !important;
    }
    .sidebar.sidebar-collapsed .sidebar-menu > li {
        align-items: stretch !important;
        justify-content: flex-start !important;
    }
    .sidebar.sidebar-collapsed .sidebar-submenu:not(.open) {
        display: none !important;
        max-height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }
    .sidebar.sidebar-collapsed .sidebar-submenu.open {
        display: block !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    .sidebar .nav-label {
        transition: none;
    }
    /* Slide only — avoid animating width/min/max from collapsed (56px) which feels sluggish on open */
    .sidebar {
        transition: transform 0.22s ease, box-shadow 0.2s ease !important;
    }
    /* Hamburger is in the top bar on small screens; in-drawer copy is off-screen until open */
    .sidebar .sidebar-toggle {
        display: none !important;
    }
    .container {
        padding: 1rem;
    }
    .topbar-inner {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .topbar-app-launcher {
        display: none;
    }
    .topbar-search-wrap {
        order: 10;
        flex: 1 1 100%;
        min-width: 0;
        margin-left: 0;
        max-width: none;
    }
    .topbar-profile-name,
    .topbar-profile-trigger .topbar-profile-caret {
        display: none;
    }
    .topbar-profile-trigger {
        min-width: 2.75rem;
        min-height: 2.75rem;
        padding: 0.35rem;
        justify-content: center;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .sidebar.sidebar-collapsed {
        width: 72px;
        min-width: 72px;
        max-width: 72px;
    }
    .sidebar:not(.sidebar-collapsed) {
        width: 220px;
        min-width: 220px;
    }
    .sidebar-collapsed .nav-label,
    .sidebar-collapsed .submenu-caret {
        display: none;
    }
}

/* Hero Section */
.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 12px;
    margin-bottom: 3rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* Features */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--surface);
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--text-secondary);
}

/* Candidate detail: top section (sky blue theme) */
.candidate-hero-tile {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 4px solid #0ea5e9;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem 0.5rem 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(14, 165, 233, 0.1);
}
.candidate-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(400px, 620px);
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
}
.candidate-hero-tile,
.candidate-hero,
.candidate-hero-top-bar,
.candidate-hero-avatar-wrap,
.candidate-hero-footer,
.candidate-hero-meta-row2 {
    transition: opacity 0.22s ease, max-height 0.22s ease, margin 0.22s ease, padding 0.22s ease;
}
.candidate-hero-top-bar {
    max-height: 72px;
    opacity: 1;
    overflow: hidden;
}
.candidate-hero-avatar-wrap {
    max-width: 84px;
    max-height: 84px;
    opacity: 1;
    overflow: hidden;
}
.candidate-hero-meta-row2 {
    max-height: 120px;
    opacity: 1;
    overflow: hidden;
}
.candidate-hero-footer {
    max-height: 56px;
    opacity: 1;
    overflow: hidden;
}
/* Compact on scroll only: sticky bar + hide top bar/avatar, single row. No UI change when not scrolled. */
#candidate-detail-sticky-bar.candidate-hero-compact {
    position: sticky;
    top: 0;
    z-index: 99;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: visible;
}
body:has(.topbar) #candidate-detail-sticky-bar.candidate-hero-compact {
    top: calc(65px + 5px);
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-top-bar {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-avatar-wrap {
    max-width: 0;
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-tile {
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    margin-bottom: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: visible;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 0 0;
    margin-top: 0;
    grid-template-columns: unset;
    min-height: 0;
    overflow: visible;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-name-block {
    flex: 0 0 auto;
    order: 0;
    margin-right: 1rem;
    min-width: 0;
    display: flex;
    align-items: center;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-name-block .candidate-hero-top {
    gap: 0;
    align-items: center;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-name-inner {
    min-width: 0;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-name {
    font-size: 1.0625rem;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12em;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-aka {
    display: none;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-card {
    flex: 0 1 auto;
    min-width: min-content;
    order: 1;
    margin-left: auto;
    border-left: none;
    padding-left: 0;
    overflow: visible;
    display: flex;
    align-items: center;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    overflow: visible;
    min-height: 0;
}
/* Compact bar: hide row2 (Location, CTC, Notice, Resume) */
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta-row2 {
    max-height: 0;
    opacity: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    border: none;
    border-left: none;
    border-top: none;
    border-bottom: none;
    padding: 0;
    margin: 0 0.35rem;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta-item:first-child {
    margin-left: 0;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta-item:last-child {
    margin-right: 0;
}
/* Last visible item in compact row is Stage (3rd direct child) */
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta > .candidate-hero-meta-item:nth-child(3) {
    margin-right: 0;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta-item:nth-child(2) {
    display: none;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta-item::after {
    content: ' \007c ';
    margin: 0 0.4rem;
    color: var(--text-secondary, #64748b);
    font-weight: 400;
    flex-shrink: 0;
}
/* No separator after last visible item (Stage = 3rd direct child of meta) */
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta > .candidate-hero-meta-item:nth-child(3)::after {
    content: none;
    margin: 0;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta dt {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #64748b);
    flex-shrink: 0;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta dd {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary, #0f172a);
    margin: 0;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-meta dd a {
    color: var(--primary-color, #0284c7);
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-badge {
    font-size: 0.6875rem;
    padding: 0.15rem 0.4rem;
}
#candidate-detail-sticky-bar.candidate-hero-compact .candidate-hero-footer {
    max-height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.candidate-hero-compact-spacer {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    min-height: 0;
}
/* Candidate detail: main hero stays in normal flow; compact sticky uses separate bar. */
#candidate-detail-sticky-bar {
    position: relative;
    z-index: 1;
}
.candidate-compact-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 260;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    pointer-events: none;
}
body:has(.topbar) .candidate-compact-sticky {
    top: calc(65px + 5px);
}
.candidate-compact-sticky.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.candidate-compact-sticky-inner {
    margin: 0;
    padding: 0.72rem 0.95rem;
    border: 1px solid rgba(125, 105, 255, 0.18);
    border-radius: 14px;
    background: linear-gradient(92deg, rgba(239, 246, 255, 0.96) 0%, rgba(244, 242, 255, 0.96) 40%, rgba(236, 253, 245, 0.96) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 26px rgba(30, 41, 59, 0.14);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
    overflow: hidden;
}
.candidate-compact-top-row {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    overflow: hidden;
}
.candidate-compact-back {
    color: #64748b;
    text-decoration: none;
    font-size: 0.9rem;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(148, 163, 184, 0.3);
    white-space: nowrap;
}
.candidate-compact-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1d4ed8;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.candidate-compact-item {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.28);
    color: #334155;
    border-radius: 999px;
    padding: 0.12rem 0.5rem;
    font-size: 0.96rem;
    line-height: 1.2;
    max-width: 290px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.candidate-compact-stage .badge {
    font-size: 0.9rem;
    padding: 0.28rem 0.66rem;
    border-radius: 999px;
}
.candidate-compact-phone {
    text-decoration: none;
    color: #0f172a;
}
.candidate-compact-phone:hover {
    border-color: rgba(14, 165, 233, 0.45);
    background: #eef6ff;
}
.candidate-compact-dot {
    opacity: 0.55;
    color: #64748b;
    font-size: 1.05rem;
}
.candidate-compact-search-wrap {
    margin-left: auto;
    position: relative;
    min-width: 210px;
    max-width: 280px;
    flex: 0 1 240px;
}
.candidate-compact-skills-row {
    display: flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.candidate-compact-skills-label {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2563eb;
    flex-shrink: 0;
}
.candidate-compact-skill-chip {
    font-size: 0.78rem;
    line-height: 1.2;
    color: #1e3a8a;
    background: rgba(219, 234, 254, 0.8);
    border: 1px solid rgba(59, 130, 246, 0.24);
    border-radius: 999px;
    padding: 0.12rem 0.48rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.candidate-compact-skill-empty {
    font-size: 0.8rem;
    color: #64748b;
}
.candidate-compact-search-input {
    width: 100%;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(14, 165, 233, 0.35);
    background: #fff;
    padding: 0.25rem 2rem 0.25rem 0.75rem;
    font-size: 0.78rem;
    color: #0f172a;
}
.candidate-compact-search-clear {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 0.95rem;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
}
.candidate-compact-search-wrap.has-text .candidate-compact-search-clear {
    opacity: 1;
    pointer-events: auto;
}
.candidate-compact-edit-btn {
    margin-left: 0.2rem;
    background: #0ea5e9;
    color: #fff;
    border-color: #0ea5e9;
}
.candidate-compact-edit-btn:hover {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
}
/* Candidate detail: smooth scroll polish without layout changes */
#candidate-detail-sticky-bar .candidate-hero-top-bar,
#candidate-detail-sticky-bar .candidate-hero-meta {
    transition: opacity 0.22s ease;
}
#candidate-detail-sticky-bar.candidate-sticky-bar-scrolled .candidate-hero-top-bar {
    opacity: 0.78;
}
#candidate-detail-sticky-bar.candidate-sticky-bar-scrolled .candidate-hero-meta {
    opacity: 0.92;
}
/* Candidate detail: sections with internal scroll – sticky small header, no padding, scroll after header */
.candidate-detail-section-scroll {
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.candidate-detail-section-scroll .candidate-detail-section-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    position: relative;
}
.candidate-detail-section-scroll .detail-notes-block,
.candidate-detail-section-scroll .detail-qa-list,
.candidate-detail-section-scroll .detail-interviews,
.candidate-detail-section-scroll .detail-timeline,
.candidate-detail-section-scroll .log-notes-list,
.candidate-detail-section-scroll .candidate-info-groups {
    min-height: 0;
}
.candidate-detail-section-scroll > h4,
.candidate-detail-section-scroll > .section-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface);
    margin: 0;
    padding: 0.35rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0369a1;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    box-shadow: 0 1px 0 0 var(--surface);
}
.candidate-detail-section-scroll > .section-head h4 {
    margin: 0;
    font-size: 0.75rem;
    padding: 0;
    border-bottom: none;
}
/* Content starts after header with clear gap so scroll is from after the header */
.candidate-detail-section-scroll > .section-head + *,
.candidate-detail-section-scroll > h4 + * {
    margin-top: 0.5rem;
}
/* Interview Scheduled banner */
.candidate-interview-scheduled-banner {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: var(--radius);
    border-left: 4px solid #0ea5e9;
}
.candidate-detail-search-wrap {
    flex: 0 1 280px;
    min-width: 0;
    position: relative;
}
.candidate-page-search-input {
    width: 100%;
    padding: 0.4rem 2.25rem 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
}
.candidate-detail-search-clear {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.candidate-detail-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.candidate-detail-search-clear svg { display: block; }
.candidate-detail-search-wrap .candidate-detail-search-clear { display: none; }
.candidate-detail-search-wrap.candidate-detail-search-has-text .candidate-detail-search-clear { display: flex !important; }
.candidate-page-search-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.25);
}
.candidate-searchable-section.candidate-search-hidden {
    display: none !important;
}

/* Top bar attached to card: back left, search right, thin line below */
.candidate-hero-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -1.25rem -1.5rem 0 -1.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-alt, #f8fafc);
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.candidate-hero-back-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--primary-color, #0284c7);
    text-decoration: none;
    flex-shrink: 0;
}
.candidate-hero-back-link:hover {
    text-decoration: underline;
}
.candidate-hero-search-wrap {
    position: relative;
    min-width: 0;
    width: 100%;
    max-width: 280px;
}
.candidate-hero-search-wrap .candidate-page-search-input {
    width: 100%;
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--surface, #fff);
    color: var(--text-primary, #0f172a);
}
.candidate-hero-search-wrap .candidate-page-search-input::placeholder {
    color: var(--text-secondary, #94a3b8);
}
.candidate-hero-search-wrap .candidate-page-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0284c7);
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.15);
}
.candidate-hero-search-wrap .candidate-detail-search-clear {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.candidate-hero-search-wrap.candidate-detail-search-has-text .candidate-detail-search-clear {
    display: flex;
}
.candidate-hero-search-wrap .candidate-detail-search-clear:hover {
    color: var(--text-primary, #0f172a);
    background: var(--border-color, #e2e8f0);
}
.candidate-hero-name-block {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
.candidate-hero-name-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.candidate-hero-top {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.candidate-hero-avatar-wrap {
    flex-shrink: 0;
}
.candidate-hero-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: var(--surface-alt, #f1f5f9);
}
.candidate-hero-avatar-initials {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-secondary, #64748b);
    background: var(--surface-alt, #e2e8f0);
    line-height: 1;
}
.candidate-hero-name-inner {
    min-width: 0;
}
.candidate-hero-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.02em;
}
.candidate-hero-aka {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
}
.candidate-hero-aka-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.candidate-hero-aka-value {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(123, 104, 168, 0.12);
    border: 1px solid rgba(123, 104, 168, 0.25);
    border-radius: var(--radius-md, 6px);
}
.candidate-hero-linkedin {
    display: inline-flex;
    align-items: center;
    color: #0a66c2;
    transition: opacity 0.2s;
}
.candidate-hero-linkedin:hover { opacity: 0.85; }
.linkedin-icon { display: block; }

/* Key info: right side – Row 1: Mobile, Email, Stage; Row 2: Resume icon, Location, CTC→ECTC, Notice period */
.candidate-hero-card {
    min-width: 0;
    width: 100%;
    max-width: 620px;
    padding: 0;
    border-left: 1px solid var(--border-color, #e2e8f0);
    padding-left: 1.5rem;
    align-self: stretch;
    display: flex;
    align-items: center;
}
/* Row 1: thin line top + bottom. Row 2: thin line bottom only; vertical dividers inset (don’t touch top/bottom). */
.candidate-hero-tile .candidate-hero-meta {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-template-rows: auto auto;
    gap: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
.candidate-hero-tile .candidate-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0.55rem;
    border-left: 1px solid var(--border-color, #e2e8f0);
    min-width: 0;
}
.candidate-hero-tile .candidate-hero-meta-item:first-child {
    border-left: none;
    padding-left: 0;
    padding-right: 0.55rem;
}
/* Row 1: top + bottom thin lines (Mobile, Email, Stage) */
.candidate-hero-tile .candidate-hero-meta-item:nth-child(1),
.candidate-hero-tile .candidate-hero-meta-item:nth-child(2),
.candidate-hero-tile .candidate-hero-meta-item:nth-child(3) {
    grid-row: 1;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.candidate-hero-tile .candidate-hero-meta-item:nth-child(1) { grid-column: 1; }
.candidate-hero-tile .candidate-hero-meta-item:nth-child(2) { grid-column: 2; }
.candidate-hero-tile .candidate-hero-meta-item:nth-child(3) { grid-column: 3; }
/* Row 2: meta-row2 (Location, CTC, Notice, Resume) full width */
.candidate-hero-tile .candidate-hero-meta-row2 {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding-top: 0.75rem;
    padding-bottom: 0.05rem;
    border-left: none;
    padding-left: 0;
    border-bottom: none;
    position: relative;
}
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    border-left: none;
    position: relative;
    min-width: 0;
}
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item:first-child {
    padding-left: 0;
}
/* Same dt/dd look for all row2 blocks (including Resume) */
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item dt {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
}
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color, #0284c7);
}
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item dd a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item dd a:hover {
    text-decoration: underline;
}
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item:nth-child(4) dt {
    margin-top: 0.8rem;
}
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item:nth-child(2)::before,
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item:nth-child(3)::before,
.candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item:nth-child(4)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 1px;
    background: var(--border-color, #e2e8f0);
}
.candidate-hero-meta dt {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #64748b);
}
.candidate-hero-meta dd {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary-color, #0284c7);
}
.candidate-hero-meta dd a {
    color: var(--primary-color, #0284c7);
    text-decoration: none;
}
.candidate-hero-meta dd a:hover {
    color: #0ea5e9;
    text-decoration: underline;
}
.candidate-hero-resume-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.candidate-hero-resume-link:hover {
    text-decoration: none;
    opacity: 0.85;
}
.candidate-hero-resume-icon {
    display: block;
    vertical-align: middle;
}
.candidate-hero-badge { display: inline-block; }

/* Open Pool seal — light “pool water” center, soft metallic rim (no dark/black fill) */
.candidate-open-pool-seal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.35rem;
    height: 3.35rem;
    flex-shrink: 0;
    transform: rotate(-8deg);
    border-radius: 50%;
    padding: 0.22rem;
    background: linear-gradient(150deg, #e0f2fe 0%, #7dd3fc 38%, #38bdf8 62%, #22d3ee 88%, #a5f3fc 100%);
    box-shadow:
        0 2px 10px rgba(14, 165, 233, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.65) inset,
        0 -1px 0 rgba(8, 145, 178, 0.12) inset;
    filter: drop-shadow(0 2px 4px rgba(14, 165, 233, 0.22));
    vertical-align: middle;
}
.candidate-open-pool-seal__inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
    gap: 0.06rem;
    background: radial-gradient(ellipse 105% 100% at 50% 32%, #ffffff 0%, #ecfeff 28%, #cffafe 55%, #a5f3fc 92%, #7dd3fc 100%);
    box-shadow:
        inset 0 2px 14px rgba(255, 255, 255, 0.95),
        inset 0 -3px 10px rgba(6, 182, 212, 0.14);
    border: 1px solid rgba(34, 211, 238, 0.55);
}
.candidate-open-pool-seal__line {
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0f766e;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    line-height: 1;
}
.candidate-open-pool-seal__line--top { margin-top: 0.1rem; }
.candidate-open-pool-seal__line--bottom { margin-bottom: 0.1rem; }
.candidate-open-pool-seal__glyph {
    font-size: 0.42rem;
    color: #0891b2;
    line-height: 1;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(34, 211, 238, 0.5));
}
.candidate-open-pool-seal--compact {
    width: 2.15rem;
    height: 2.15rem;
    transform: rotate(-6deg);
    padding: 0.12rem;
}
.candidate-open-pool-seal--compact .candidate-open-pool-seal__line {
    font-size: 0.32rem;
    letter-spacing: 0.08em;
}
.candidate-open-pool-seal--compact .candidate-open-pool-seal__glyph {
    font-size: 0.28rem;
}
.candidate-open-pool-seal--compact .candidate-open-pool-seal__line--top { margin-top: 0.05rem; }
.candidate-open-pool-seal--compact .candidate-open-pool-seal__line--bottom { margin-bottom: 0.05rem; }

@media (max-width: 1024px) {
    .candidate-hero-tile .candidate-hero-meta {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .candidate-hero-tile .candidate-hero-meta-item:nth-child(n) {
        grid-row: auto;
        grid-column: auto;
        padding: 0 0.75rem;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        border-top: 1px solid var(--border-color, #e2e8f0);
        border-left: 1px solid var(--border-color, #e2e8f0);
        border-bottom: none;
    }
    .candidate-hero-tile .candidate-hero-meta-item:nth-child(n)::before { content: none; display: none; }
    .candidate-hero-tile .candidate-hero-meta-item:nth-child(odd) { border-left: none; padding-left: 0; padding-right: 0.75rem; }
    .candidate-hero-tile .candidate-hero-meta-item:nth-child(1),
    .candidate-hero-tile .candidate-hero-meta-item:nth-child(2) { border-top: none; padding-top: 0.75rem; }
    .candidate-hero-tile .candidate-hero-meta-row2 {
        grid-column: auto;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.75rem;
        border-left: 1px solid var(--border-color, #e2e8f0);
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        padding: 0.75rem;
    }
    .candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item::before { content: none; display: none; }
    .candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item { border: none; padding: 0; }
}
@media (max-width: 600px) {
    .candidate-hero-tile .candidate-hero-meta {
        grid-template-columns: 1fr;
    }
    .candidate-hero-tile .candidate-hero-meta-item:nth-child(n) {
        border-left: none;
        padding-left: 0;
        padding-right: 0;
        border-top: 1px solid var(--border-color, #e2e8f0);
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: none;
    }
    .candidate-hero-tile .candidate-hero-meta-item:nth-child(n)::before { content: none; display: none; }
    .candidate-hero-tile .candidate-hero-meta-item:first-child { border-top: none; padding-top: 0.75rem; }
    .candidate-hero-tile .candidate-hero-meta-row2 {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        border-top: 1px solid var(--border-color, #e2e8f0);
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        padding: 0.75rem 0;
    }
    .candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item::before { content: none; display: none; }
    .candidate-hero-tile .candidate-hero-meta-row2 .candidate-hero-meta-item { border: none; padding: 0.5rem 0; }
}
.candidate-hero-footer {
    grid-column: 1 / -1;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    align-items: center;
    min-height: 0;
}
.candidate-hero-footer-line {
    display: block;
}
.candidate-hero-footer-line.candidate-hero-sourced {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
    font-size: 0.9375rem;
    line-height: 1.4;
    padding: 0.15rem 0;
    color: var(--text-primary);
    font-weight: 400;
    padding: 0.5rem 0;
}
.candidate-hero-footer-left {
    flex: 0 0 auto;
}
.candidate-hero-footer-right {
    flex: 0 0 auto;
    margin-left: auto;
}
.candidate-hero-sourced-label {
    color: var(--text-secondary, #64748b);
    font-weight: 600;
    margin-right: 0.35rem;
}
.candidate-hero-footer-value {
    font-weight: 700;
    color: var(--text-primary);
    font-size: inherit;
}
.candidate-hero-footer-sep {
    margin: 0 0.5rem;
    color: var(--text-secondary, #64748b);
    font-weight: 400;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .candidate-hero {
        grid-template-columns: 1fr;
    }
    .candidate-hero-card {
        border-left: none;
        padding-left: 0;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color, #e2e8f0);
    }
}
@media (max-width: 600px) {
    .candidate-hero-meta {
        grid-template-columns: 1fr;
    }
    .candidate-hero-meta-item {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0.5rem;
    }
}

/* Candidate detail: Primary Skills row (tags) — button always at right; skills wrap in remaining space */
.candidate-skills-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.candidate-skills-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    min-width: 0;
    flex: 1 1 auto;
}
.candidate-skills-right {
    flex-shrink: 0;
    margin-left: auto;
}
.candidate-fav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.candidate-fav-icon {
    font-size: 1.1rem;
    color: var(--primary-color);
}
.candidate-fav-btn[aria-pressed="true"] .candidate-fav-icon { opacity: 1; }
.candidate-fav-btn[aria-pressed="false"] .candidate-fav-icon { opacity: 0.85; }

.fev-note-cell { max-width: 240px; }
.fev-note-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.candidate-skills-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
}
.candidate-skills-row .detail-skills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.candidate-skills-row .skill-tag { font-size: 0.8rem; padding: 0.25rem 0.6rem; border: none; color: #fff; }
/* Colorful skill bubbles (same as Top 5 Skills / Skills on edit page): .skill-tag-0..4 from base styles */
.candidate-detail-page .detail-action-btns .btn-primary,
.candidate-detail-page .btn-schedule-interview { background: #0ea5e9; color: #fff; border-color: #0ea5e9; }
.candidate-detail-page .detail-action-btns .btn-primary:hover,
.candidate-detail-page .btn-schedule-interview:hover { background: #0284c7; border-color: #0284c7; color: #fff; }

/* Section header with action (e.g. Edit on top right) */
.job-form-section .section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.job-form-section .section-head h4 { margin: 0; }
.job-form-section .section-head .btn { flex-shrink: 0; }

/* Candidate detail: 70/30 layout for main vs side info panel */
/* Candidate detail: wider main area */
.candidate-detail-page .form-container.job-form-layout { max-width: 1600px; }
.detail-company-value { color: #e67e00; font-weight: 600; }
.edit-candidate-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.edit-candidate-header .edit-candidate-actions { flex-shrink: 0; }
.detail-status-sidebar .detail-status-form { flex-direction: column; align-items: stretch; }
.detail-status-sidebar .detail-status-note-input { min-height: 70px; }
.detail-qa-list { display: flex; flex-direction: column; gap: 1rem; }
.detail-qa-item {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
}
.detail-qa-q { margin: 0 0 0.35rem 0; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.detail-qa-a { margin: 0; font-size: 0.95rem; color: var(--text-primary); white-space: pre-wrap; }
.candidate-detail-layout {
    display: grid;
    /* Wider left (main) section; right sidebar narrow fixed width */
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 1.5rem;
    align-items: flex-start;
}
/* All candidate detail sections: card max-height + body padding + scrollable body (same pattern as Resume Extract) */
.candidate-detail-page .candidate-detail-card .card-body {
    padding: 1rem 1.5rem 1.25rem;
}
.candidate-detail-section-scroll {
    max-height: 480px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.candidate-detail-section-scroll .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.candidate-detail-section-scroll .candidate-detail-section-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    position: relative;
}
@keyframes scroll-hint-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.9; }
    50% { transform: translateY(5px); opacity: 0.6; }
}
/* Scroll hint outside scroll container: sits below the scroll area (sibling of .candidate-detail-section-body or .detail-resume-extract) */
.candidate-detail-section-scroll .card-body > .scroll-hint-indicator,
.candidate-detail-section-resume-extract .card-body .candidate-detail-section-body > .scroll-hint-indicator {
    flex-shrink: 0;
    text-align: center;
    padding: 6px 0 8px;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.candidate-detail-section-scroll .card-body > .scroll-hint-indicator.hidden,
.candidate-detail-section-resume-extract .card-body .candidate-detail-section-body > .scroll-hint-indicator.hidden {
    opacity: 0;
    pointer-events: none;
}
.scroll-hint-indicator.scroll-hint-outside span {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--text-muted, #64748b);
    animation: scroll-hint-bounce 1.8s ease-in-out infinite;
}
.candidate-detail-section-scroll .detail-notes-block,
.candidate-detail-section-scroll .detail-qa-list,
.candidate-detail-section-scroll .detail-interviews,
.candidate-detail-section-scroll .detail-timeline,
.candidate-detail-section-scroll .log-notes-list,
.candidate-detail-section-scroll .candidate-info-groups {
    min-height: 0;
}
.candidate-detail-section-interviews {
    max-height: 480px;
}
.candidate-detail-section-resume-extract {
    max-height: 520px;
}
.candidate-detail-section-resume-extract .detail-notes-block.detail-resume-extract {
    min-height: 0;
    overflow-y: auto;
    scroll-behavior: smooth;
    position: relative;
    /* Leave room for card header + body padding so bottom padding is not clipped (card has overflow:hidden) */
    max-height: 420px;
    font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--text-primary, #1a1a1a);
    /* equal breathing room top and bottom inside the scroll area */
    padding: 1.0rem 1.25rem 1.5rem;
    /* tiny outer gap so the inner border never touches the card border */
    margin: 0 0 0.75rem;
    border-radius: var(--radius, 8px);
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--resume-extract-bg, #fafbfc);
    max-width: 52em;
}
.tagged-job-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    scroll-margin-top: 5rem; /* so Add Job redirect scrolls into view below sticky header */
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--border-color);
}
.tagged-job-row:last-child {
    border-bottom: none;
}
.tagged-job-main {
    flex: 1;
    min-width: 0;
}
.tagged-job-title-line a {
    font-weight: 600;
    color: var(--text-primary);
}
.tagged-job-title-line a:hover {
    text-decoration: underline;
}
.tagged-job-meta-line {
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.tagged-job-sep {
    margin: 0 0.25rem;
    color: var(--text-muted);
}
.tagged-job-row .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    font-size: 16px;
    line-height: 1;
    color: var(--text-secondary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.tagged-job-row .btn-icon:hover {
    border-color: rgba(220, 38, 38, 0.6);
    background: rgba(248, 113, 113, 0.08);
    color: #dc2626;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.45);
}
.candidate-detail-card .select-search {
    width: 100%;
}
.candidate-detail-card .select-search-wrap,
.candidate-detail-card .select-search-dropdown {
    max-width: 100%;
}
.candidate-detail-card .select-search-wrap {
    position: relative;
}
.candidate-detail-card[data-section-title="Add to job"] {
    /* Allow the select-search dropdown to overflow beyond the card bounds (do not clip) */
    overflow: visible;
    position: relative;
    z-index: 1;
}
.candidate-detail-card[data-section-title="Add to job"] .card-body,
.candidate-detail-card[data-section-title="Add to job"] .candidate-detail-section-body {
    overflow: visible;
}
.candidate-detail-card[data-section-title="Add to job"] .select-search-dropdown {
    z-index: 500;
}
.candidate-detail-card[data-section-title="Key information"] {
    border-left-color: #0ea5e9;
}
.candidate-detail-card[data-section-title="Tagged jobs"] {
    border-left-color: #f97316;
}
.candidate-detail-card[data-section-title="Add to job"] {
    border-left-color: #22c55e;
}

/* Qualifying questions page (/candidates/…/add-job/…) — search-and-select answers must stay visible (no clip, dropdown on top) */
.candidate-add-job-page .card.card-modern,
.candidate-add-job-page .card.card-modern .card-body {
    overflow: visible;
}
.candidate-add-job-page .form-group .select-search-wrap {
    position: relative;
    overflow: visible;
    z-index: 1;
}
.candidate-add-job-page .form-group .select-search-dropdown {
    z-index: 500;
    pointer-events: auto;
}
.candidate-add-job-page .form-group .select-search-dropdown .select-search-option {
    pointer-events: auto;
    cursor: pointer;
}
.candidate-add-job-page .form-group .select-search-input {
    min-height: 2.75rem;
    background: #fff;
}
.candidate-detail-card[data-section-title="Initial notes"] {
    border-left-color: #6366f1;
}
.candidate-detail-card[data-section-title="Resume extract"] {
    border-left-color: #a855f7;
}
.candidate-detail-card[data-section-title="Questions answered"] {
    border-left-color: #ec4899;
}
.candidate-detail-card[data-section-title="Interview history"] {
    border-left-color: #facc15;
}
.candidate-detail-card[data-section-title="Status history"] {
    border-left-color: #0d9488;
}
.candidate-detail-card[data-section-title="Log Notes Details"] {
    border-left-color: #ef4444;
}

/* —— Candidate detail page: modernized aesthetics (readability + polish) —— */
.candidate-detail-page .form-container.job-form-layout {
    padding-top: 0.5rem;
}
.candidate-detail-page .candidate-hero-tile {
    border-radius: 14px;
    padding: 1.5rem 1.75rem 0.75rem 1.75rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, var(--surface) 18%);
    border: 1px solid rgba(14, 165, 233, 0.12);
    border-left-width: 5px;
}
.candidate-detail-page .candidate-hero-name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary, #0f172a);
    line-height: 1.25;
}
.candidate-detail-page .candidate-hero-meta-item dt {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
}
.candidate-detail-page .candidate-hero-meta-item dd {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-primary);
}
.candidate-detail-page .candidate-hero-footer {
    padding: 0.6rem 0 0;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}
.candidate-detail-page .candidate-hero-footer-value {
    color: var(--text-primary);
}

.candidate-detail-page .candidate-skills-row {
    padding: 1rem 1.35rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.candidate-detail-page .candidate-skills-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #64748b);
    margin-right: 0.75rem;
}
.candidate-detail-page .detail-skills .skill-tag {
    font-size: 0.8125rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.candidate-detail-page .candidate-detail-card {
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
    border-left-width: 5px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.candidate-detail-page .candidate-detail-card[data-section-title="Add to job"] {
    overflow: visible;
}
.candidate-detail-page .candidate-detail-card:last-child {
    margin-bottom: 0;
}
.candidate-detail-page .candidate-detail-card .card-header {
    padding: 0.9rem 1.35rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface);
}
.candidate-detail-page .candidate-detail-card .card-header h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-transform: none;
}
.candidate-detail-page .candidate-detail-card[data-section-title="Key information"] .card-header {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Tagged jobs"] .card-header {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Add to job"] .card-header {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Initial notes"] .card-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Resume extract"] .card-header {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Questions answered"] .card-header {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Interview history"] .card-header {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.08) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Status history"] .card-header {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card[data-section-title="Log Notes Details"] .card-header {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06) 0%, transparent 100%);
}
.candidate-detail-page .candidate-detail-card .card-body {
    padding: 1.15rem 1.5rem 1.35rem;
}

.candidate-detail-page .detail-inline-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    letter-spacing: 0.01em;
}
.candidate-detail-page .detail-inline-row > span:not(.detail-inline-label),
.candidate-detail-page .detail-inline-row .detail-company-value {
    font-size: 0.9375rem;
    color: var(--text-primary);
}
.candidate-detail-page .detail-key-grid {
    gap: 0.6rem 1.75rem;
}
.candidate-detail-page .detail-key-grid .detail-inline-row {
    min-height: 2rem;
}

.candidate-detail-page .tagged-job-row {
    padding: 0.65rem 0;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.candidate-detail-page .tagged-job-row:hover {
    background: rgba(0, 0, 0, 0.02);
}
.candidate-detail-page .tagged-job-title-line a {
    font-weight: 600;
    font-size: 0.9375rem;
}
.candidate-detail-page .tagged-job-meta-line {
    font-size: 0.8125rem;
    margin-top: 0.2rem;
    color: var(--text-muted);
}

.candidate-detail-page .candidate-interview-scheduled-banner {
    border-radius: 10px;
    padding: 0.65rem 1.1rem;
    font-size: 0.9rem;
    box-shadow: 0 2px 6px rgba(14, 165, 233, 0.12);
}

.candidate-detail-page .detail-interview-card {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    transition: background 0.15s ease;
}
.candidate-detail-page .detail-interview-card:hover {
    background: rgba(0, 0, 0, 0.02);
}
.candidate-detail-page .detail-interview-feedback-btn {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    line-height: 1.3;
    min-height: auto;
}
.candidate-detail-page .detail-interview-at-by {
    font-size: 0.875rem;
    color: var(--text-primary);
}
.candidate-detail-page .detail-interview-row2 {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.candidate-detail-page .detail-interview-fn-box {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--surface);
}

.candidate-detail-page .detail-main + .detail-side .job-form-section,
.candidate-detail-page .candidate-detail-side .job-form-section {
    border-radius: 12px;
    padding: 1.15rem 1.35rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-color);
    border-left-width: 4px;
}
.candidate-detail-page .candidate-detail-side .candidate-info-panel-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.candidate-detail-page .candidate-detail-side .candidate-info-subheader {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0.75rem 0 0.4rem 0;
    padding-bottom: 0.25rem;
}
.candidate-detail-page .candidate-detail-side .candidate-info-subheader:first-child {
    margin-top: 0;
}
.candidate-detail-page .candidate-detail-side .candidate-info-label {
    font-size: 0.8125rem;
    color: var(--text-muted);
}
.candidate-detail-page .candidate-detail-side .candidate-info-value {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.candidate-detail-page .detail-layout {
    gap: 1.75rem;
}
.candidate-detail-page .log-notes-entry {
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-color);
    background: var(--surface);
}
.candidate-detail-page .log-notes-entry-content {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-primary);
}
.candidate-detail-page .detail-timeline-item {
    border-radius: 10px;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--border-color);
    background: var(--surface);
}
.candidate-detail-page .candidate-detail-section-resume-extract .detail-notes-block.detail-resume-extract {
    border-radius: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.detail-resume-extract p {
    margin: 0 0 0.75em 0;
}
.detail-resume-extract p:last-child {
    margin-bottom: 0.75em;
}
.detail-resume-extract br + br {
    display: block;
    content: '';
    margin-top: 0.25em;
}
/* Ensure a bit of breathing room at the very bottom of Resume Extract,
   even when the last element has no margin. */
.detail-resume-extract::after {
    content: '';
    display: block;
    height: 0.75rem;
}
/* Card body padding: space around the bordered resume box so it never touches the card edge. */
.candidate-detail-section-resume-extract > .card-body {
    padding: 1rem 1.5rem 1.25rem;
}
/* Create/Edit: Resume Extract section and editor wrapper */
.resume-extract-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Extract skills (AI) status — modern prominent "Extracting skills…" without shifting layout */
.extract-skills-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.25rem;
    font-size: 0.8125rem;
    min-height: 0;
}
.extract-skills-status-wrap .extract-skills-status-spinner { display: none; }
.extract-skills-status-wrap.is-extracting {
    padding: 0.4rem 0.75rem;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color, #0ea5e9) 0%, #0284c7 100%);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
    min-height: 2rem;
}
.extract-skills-status-wrap.is-extracting .extract-skills-status-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: parse-spin 0.6s linear infinite;
    flex-shrink: 0;
}
.extract-skills-status-wrap.is-extracting .extract-skills-status-text {
    color: #fff;
}

.resume-extract-editor-wrap + .tox-tinymce,
.form-group .resume-extract-editor-wrap {
    border-radius: var(--radius, 8px);
    overflow: hidden;
    border: 1px solid var(--border-color, #e0e0e0);
}
.resume-extract-form-group .tox .tox-edit-area__iframe {
    background: var(--resume-extract-bg, #fafbfc);
}

/* 9. Resume Extract — modern card and editor */
.resume-extract-modern-card {
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    background: var(--surface-alt, #fafbfc);
}
.resume-extract-modern-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
}
.resume-extract-modern-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}
.resume-extract-modern-desc {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.45;
}
.resume-extract-modern-body {
    padding: 1.25rem;
}
.resume-extract-modern-body .resume-extract-form-group {
    margin-bottom: 0;
}
.resume-extract-label {
    display: block;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}
.resume-extract-editor-container {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.resume-extract-editor-container .tox-tinymce {
    border: none;
    border-radius: 0;
}
.resume-extract-section .resume-extract-editor-wrap + .tox-tinymce,
.resume-extract-section .form-group .resume-extract-editor-wrap {
    border: none;
    border-radius: 0;
}
.resume-extract-form-group .tox .tox-edit-area__iframe {
    background: linear-gradient(180deg, #fefefe 0%, #f8fafc 100%) !important;
}
.resume-extract-section .tox .tox-toolbar-overlord {
    background: #fff;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.resume-extract-section .tox .tox-edit-area {
    padding: 0;
}
.resume-extract-section .tox .tox-edit-area__iframe {
    padding: 12px 14px;
}

.detail-interview-fn-box {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: transparent;
}
.detail-interview-fn-box:first-child { margin-top: 0.5rem; }
.detail-interview-fn-header {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
    line-height: 1.35;
}
.detail-interview-fn-box .detail-interview-notes { margin-top: 0; margin-bottom: 0; }
.detail-interview-feedback-sep {
    margin: 0.5rem 0 0;
    border: 0;
    border-top: 1px solid var(--border-color, #e0e0e0);
}
.detail-interview-no-feedback { font-size: 0.85rem; margin: 0.5rem 0 0; }
.detail-interview-card .btn-xs { font-size: 0.7rem; padding: 0.2rem 0.5rem; }

.candidate-detail-main,
.candidate-detail-side {
    min-width: 0;
    position: sticky;
    top: 3.5rem;
}
/* Right panel: Candidate information strip — grouped, single column */
.candidate-detail-side .job-form-section { padding: 1rem 1.25rem; }
/* Change application status dropdown: ensure visible and clickable (select-search) */
.candidate-detail-page .candidate-detail-side .detail-status-sidebar .select-search-wrap {
    overflow: visible;
    position: relative;
}
.candidate-detail-page .candidate-detail-side .detail-status-sidebar .select-search-dropdown {
    z-index: 500;
    pointer-events: auto;
}
.candidate-detail-page .candidate-detail-side .detail-status-sidebar .select-search-dropdown .select-search-option {
    pointer-events: auto;
    cursor: pointer;
}
.candidate-detail-page .candidate-detail-side .detail-status-sidebar .select-search-dropdown .select-search-optgroup-label {
    padding: 0.35rem 0.75rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    pointer-events: none;
    cursor: default;
    border-top: 1px solid #e2e8f0;
    margin-top: 0.15rem;
}
.candidate-detail-page .candidate-detail-side .detail-status-sidebar .select-search-dropdown .select-search-optgroup-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0.25rem;
}
.candidate-detail-page .candidate-detail-side .detail-status-sidebar .detail-status-select.form-control {
    width: 100%;
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.9375rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}
.candidate-info-panel-title {
    margin: 0 0 1rem 0;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--section-header-color);
}
.favorite-note-section .candidate-info-panel-title-fev {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0 0.5rem 0;
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: #b45309;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(251, 191, 36, 0.15);
}
.favorite-note-section .candidate-info-panel-title-fev-icon {
    color: #d97706;
    flex-shrink: 0;
}
.favorite-note-section-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}
.favorite-note-section .detail-status-note-input-fev {
    border-color: #fcd34d;
    background: #fffbeb;
}
.favorite-note-section .detail-status-note-input-fev:focus {
    border-color: #d97706;
    box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.2);
}
.candidate-info-groups {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.candidate-info-group {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
.candidate-info-group:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.candidate-info-subheader {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.candidate-detail-side .candidate-info-table {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: 1fr;
}
.candidate-detail-side .candidate-info-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 0.5rem 0.75rem;
    min-height: auto;
    padding: 0.35rem 0;
    border-bottom: none;
    align-items: baseline;
}
.candidate-detail-side .candidate-info-row:last-child { border-bottom: none; }
.candidate-detail-side .candidate-info-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
}
.candidate-detail-side .candidate-info-value {
    font-size: 0.875rem;
    line-height: 1.35;
    word-break: break-word;
}

/* Candidate ownership: edit form section */
.candidate-ownership-section .form-row-ownership {
    align-items: start;
}
.candidate-ownership-section .ownership-comment-required {
    font-weight: normal;
}
#ownership_comment_error {
    display: none;
    font-size: 0.8125rem;
    color: var(--danger, #dc2626);
    margin-top: 0.25rem;
}

/* Candidate ownership history: right panel card (after Candidate information) */
.candidate-ownership-history-panel {
    margin-top: 1rem;
}
.candidate-ownership-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.candidate-ownership-entry {
    padding: 0.65rem 0.75rem;
    background: var(--surface-alt, #f8fafc);
    border-radius: var(--radius-md, 6px);
    border-left: 3px solid var(--primary-color, #0ea5e9);
}
.candidate-ownership-entry:nth-child(1) { border-left-color: #0ea5e9; }
.candidate-ownership-entry:nth-child(2) { border-left-color: #8b5cf6; }
.candidate-ownership-entry:nth-child(3) { border-left-color: #059669; }
.candidate-ownership-entry:nth-child(4) { border-left-color: #d97706; }
.candidate-ownership-entry:nth-child(5) { border-left-color: #dc2626; }
.candidate-ownership-entry:nth-child(6) { border-left-color: #0891b2; }
.candidate-ownership-entry:nth-child(7) { border-left-color: #7c3aed; }
.candidate-ownership-entry:nth-child(8) { border-left-color: #ca8a04; }
.candidate-ownership-entry:nth-child(n+9) { border-left-color: #64748b; }
.candidate-ownership-from-to {
    margin: 0 0 0.25rem 0;
    font-size: 0.9375rem;
    color: var(--text-primary);
}
.candidate-ownership-meta {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.35;
}
.candidate-ownership-user {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.candidate-ownership-datetime {
    display: block;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-top: 0.2rem;
}
.candidate-ownership-comment {
    margin: 0.35rem 0 0 0;
    font-size: 0.9375rem;
    font-weight: normal;
    color: var(--text-primary);
    line-height: 1.45;
}

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

/* Candidates list: filters + layout */
.candidates-card { margin-top: 1rem; }
.candidates-filters {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.candidates-search-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.candidates-search-wrap {
    flex: 1;
    min-width: 0;
}
.candidates-search-wrap .candidates-search-input {
    width: 100%;
}
.candidates-search-hint {
    display: block;
    margin-top: 0.25rem;
}
.candidates-filter-panel {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.candidates-filter-panel.hide {
    display: none !important;
}
.candidates-filters-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1rem;
}
.candidates-exp-range .candidates-exp-inputs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.candidates-exp-inputs input[type="number"] {
    width: 100%;
}
.candidates-filters-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Modern pagination & per-page bar */
.table-footer-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.table-footer-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.table-footer-left .pagination-per-page-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
}
.table-footer-left .table-per-page,
.table-footer-pagination .table-per-page {
    min-width: 4.5rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    background: #fff;
    color: var(--text-primary, #1a1a1f);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.table-footer-left .table-per-page:hover,
.table-footer-pagination .table-per-page:hover {
    border-color: var(--primary-color, #2563eb);
}
.table-footer-left .table-per-page:focus,
.table-footer-pagination .table-per-page:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.pagination-info {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}
.table-footer-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.table-footer-right nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.table-footer-pagination .btn.btn-soft.btn-sm {
    min-width: 2.25rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e5e7eb);
    background: #fff;
    color: var(--text-primary, #1a1a1f);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.table-footer-pagination .btn.btn-soft.btn-sm:hover:not(.disabled) {
    background: var(--color-bg-soft, #f1f5f9);
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
}
.table-footer-pagination .btn.btn-soft.btn-sm.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.table-footer-right .pagination-page {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    padding: 0 0.5rem;
    min-width: 5rem;
    text-align: center;
}

@media (max-width: 640px) {
    .table-footer-pagination {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .table-footer-left {
        justify-content: center;
    }
    .table-footer-right,
    .table-footer-right nav {
        justify-content: center;
    }
}

@media (max-width: 900px) {
    .candidates-filters-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Candidate Open Pool page: modern presentation */
.open-pool-page .back-link { margin-bottom: 0.75rem; }
.open-pool-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f5f3ff 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid var(--primary-color, #0066cc);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.06);
}
.open-pool-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.open-pool-page .page-header-desc {
    font-size: 0.9375rem;
    color: #6366f1;
    margin: 0;
    opacity: 0.85;
}

/* Candidates page: same layout as Open Pool, soothing header color */
.candidates-page .page-header.candidates-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 35%, #bae6fd 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-left: 4px solid #0ea5e9;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12);
}
.candidates-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0369a1;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.candidates-page .page-header-desc {
    font-size: 0.9375rem;
    color: #0284c7;
    margin: 0;
    opacity: 0.95;
}
.candidates-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Fev Candidates page: same layout as Open Pool, different header color */
.fev-candidates-page .back-link { margin-bottom: 0.75rem; }
.fev-candidates-page .page-header.fev-candidates-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fef9c3 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-left: 4px solid #d97706;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.08);
}
.fev-candidates-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #b45309;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.fev-candidates-page .page-header-desc {
    font-size: 0.9375rem;
    color: #a16207;
    margin: 0;
    opacity: 0.85;
}

/* Job candidates by loop – modern header */
.job-candidates-page .page-header.job-candidates-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 40%, #c7d2fe 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-left: 4px solid #6366f1;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
}
.job-candidates-page-header .back-link {
    margin-bottom: 0.5rem;
}
.job-candidates-page-header h1.job-candidates-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #4338ca;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.job-candidates-loop-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.875rem;
    font-weight: 600;
    background: rgba(99, 102, 241, 0.2);
    color: #4f46e5;
    border-radius: 6px;
    border: 1px solid rgba(99, 102, 241, 0.4);
}
.job-candidates-page .page-header.job-candidates-page-header .page-header-desc {
    font-size: 0.9375rem;
    color: #4f46e5;
    margin: 0;
    opacity: 0.95;
}

/* Job Postings page: same layout as Candidates, different header color */
.jobs-page .page-header.jobs-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 50%, #e9e5ff 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-left: 4px solid #7c3aed;
    box-shadow: 0 1px 2px rgba(124, 58, 237, 0.06);
}
.jobs-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #5b21b6;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.jobs-page .page-header-desc {
    font-size: 0.9375rem;
    color: #6d28d9;
    margin: 0;
    opacity: 0.9;
}
.jobs-page .jobs-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Create Job page: modern header – compact height */
.create-job-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 35%, #e9e5ff 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-left: 4px solid #7c3aed;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
}
.create-job-page-header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #5b21b6;
    letter-spacing: -0.02em;
    margin: 0 0 0.15rem 0;
}
.create-job-page .page-header-desc {
    font-size: 0.875rem;
    color: #6d28d9;
    margin: 0;
    opacity: 0.95;
}
.create-job-page .create-job-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.create-job-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6d28d9;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(124, 58, 237, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.create-job-clear-btn:hover {
    color: #b91c1c;
    background: #fef2f2;
    border-color: rgba(185, 28, 28, 0.5);
    box-shadow: 0 2px 6px rgba(185, 28, 28, 0.15);
}
.create-job-clear-btn:active {
    transform: scale(0.98);
}
.create-job-page .page-back { margin-bottom: 0.35rem; }
.create-job-page .page-back.back-link { font-size: 0.8125rem; padding: 0.25rem 0.5rem; }

/* Create Candidate page: compact modern header */
.create-candidate-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 35%, #bae6fd 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-left: 4px solid #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}
.create-candidate-page-header h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #0369a1;
    letter-spacing: -0.02em;
    margin: 0 0 0.15rem 0;
}
.create-candidate-page .page-header-desc {
    font-size: 0.875rem;
    color: #0284c7;
    margin: 0;
    opacity: 0.95;
}
.create-candidate-page .create-candidate-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.create-candidate-page .create-candidate-clear-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    color: var(--text-secondary, #64748b);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.create-candidate-page .create-candidate-clear-btn:hover {
    background: #f8fafc;
    color: var(--danger-color, #dc2626);
    border-color: rgba(220, 38, 38, 0.35);
}
.create-candidate-mode-toggle {
    display: inline-flex;
    align-items: stretch;
    border-radius: 10px;
    border: 1px solid rgba(2, 132, 199, 0.4);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.create-candidate-mode-btn {
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0369a1;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.create-candidate-mode-btn:hover {
    background: rgba(2, 132, 199, 0.08);
}
.create-candidate-mode-btn.active {
    background: #0284c7;
    color: #fff;
}
.create-candidate-mode-btn + .create-candidate-mode-btn {
    border-left: 1px solid rgba(2, 132, 199, 0.25);
}
.create-candidate-mode-btn.active + .create-candidate-mode-btn,
.create-candidate-mode-btn + .create-candidate-mode-btn.active {
    border-left-color: rgba(255, 255, 255, 0.3);
}
.create-candidate-mode-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.5);
}
/* Quick Add page: "Add with full form instead" – modern link with icon */
.create-candidate-full-form-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0369a1;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(2, 132, 199, 0.4);
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.1);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.create-candidate-full-form-link:hover {
    background: #fff;
    border-color: #0284c7;
    color: #0c4a6e;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.2);
}
.create-candidate-full-form-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.35);
}
.create-candidate-full-form-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0284c7;
    flex-shrink: 0;
}
.create-candidate-full-form-link:hover .create-candidate-full-form-link-icon {
    color: #0c4a6e;
}
.create-candidate-full-form-link-icon svg {
    display: block;
}
.create-candidate-full-form-link-text {
    white-space: nowrap;
}
.create-candidate-page .page-back { margin-bottom: 0.35rem; }
.create-candidate-page .page-back.back-link { font-size: 0.8125rem; padding: 0.25rem 0.5rem; }
.create-candidate-page .stepper { margin-bottom: 1rem; }

/* Quick Add: duplicate found – same candidate card as /candidates list */
.create-candidate-found-wrap {
    margin-bottom: 1rem;
}
.create-candidate-found-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 0.5rem 0;
}
.create-candidate-page .create-candidate-found-wrap .found-record-candidate-card {
    border: 1px solid #e2e8f0;
    border-left: 4px solid #7dd3fc;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    padding: 0;
    overflow: visible;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem 0.6rem;
    flex-wrap: wrap;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-title a {
    color: var(--primary-color, #0369a1);
    text-decoration: none;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-title a:hover {
    text-decoration: underline;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
    padding: 0 1.4rem 0.5rem;
    font-size: 0.875rem;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-meta-item {
    color: #334155;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-meta-label {
    font-weight: 500;
    color: #64748b;
    margin-right: 0.2rem;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-meta-sep {
    color: #cbd5e1;
    user-select: none;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-meta-link-wrap a.candidates-grid-meta-link {
    color: var(--primary-color);
    text-decoration: none;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-meta-link-wrap a.candidates-grid-meta-link:hover {
    text-decoration: underline;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-row3 {
    padding: 0.4rem 1.4rem 1rem;
    font-size: 0.75rem;
}
.create-candidate-page .create-candidate-found-wrap .candidate-row-extra-right {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.create-candidate-page .create-candidate-found-wrap .candidate-row-extra-cand-id,
.create-candidate-page .create-candidate-found-wrap .candidate-row-extra-meta-secondary {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}
/* Modern found card: fev icon, loop bubble, jobs, notes, feedback (match /candidates page) */
.create-candidate-page .create-candidate-found-wrap .candidates-grid-fev-icon {
    display: inline-block;
    margin-right: 0.35rem;
    vertical-align: middle;
    color: #eab308;
}
.create-candidate-page .create-candidate-found-wrap .candidates-row1-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.create-candidate-page .create-candidate-found-wrap .candidates-loop-bubble {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.create-candidate-page .create-candidate-found-wrap .candidates-loop-internal { background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%); color: #6d28d9; }
.create-candidate-page .create-candidate-found-wrap .candidates-loop-customer { background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%); color: #1d4ed8; }
.create-candidate-page .create-candidate-found-wrap .candidates-loop-hr { background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; }
.create-candidate-page .create-candidate-found-wrap .candidates-loop-added { background: linear-gradient(145deg, #fef3c7 0%, #fde68a 100%); color: #b45309; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-jobs {
    padding: 0.75rem 1.4rem 1.1rem;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-top: 1px solid #bae6fd;
    border-radius: 0 0 14px 14px;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    overflow: visible;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-row .candidates-grid-job-title-link {
    color: #0c4a6e;
    text-decoration: none;
    font-weight: 600;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-row .candidates-grid-job-title-link:hover {
    color: #0284c7;
    text-decoration: underline;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-meta { color: #475569; font-weight: 500; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-row + .candidates-grid-job-row {
    border-top: 1px solid rgba(14, 165, 233, 0.2);
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-status-bubble {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.6rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-status-bubble.badge-active { background: #dcfce7; color: #15803d; border-color: #86efac; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-status-bubble.badge-hold { background: #fef9c3; color: #b45309; border-color: #fde047; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-status-bubble.badge-hired { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-job-status-bubble.badge-closed { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-card-bubbles {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-bubble-wrap { position: relative; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.08);
    cursor: help;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-popup-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.35rem;
    padding: 0.75rem 1rem;
    max-width: 320px;
    max-height: 240px;
    overflow: auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid #e2e8f0;
    z-index: 20;
    display: none;
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: left;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-bubble-wrap:hover .candidates-grid-popup-tooltip { display: block; }
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-view {
    flex-shrink: 0;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: #fff;
    text-decoration: none;
}
.create-candidate-page .create-candidate-found-wrap .candidates-grid-item-view:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.jobs-page .open-pool-filter-panel .jobs-filters-bottom {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

/* Customers page: enriched header, search, table */
.customers-page .back-link { margin-bottom: 0.75rem; }
.customers-page .page-header.customers-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-left: 4px solid #2563eb;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
}
.customers-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1d4ed8;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.customers-page .page-header-desc {
    font-size: 0.9375rem;
    color: #2563eb;
    margin: 0;
    opacity: 0.9;
}
.customers-page .table-responsive {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}
.customers-page #customers-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}
.customers-page #customers-table thead th {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.customers-page #customers-table tbody tr { border-bottom: 1px solid #eef2f7; }
.customers-page #customers-table tbody tr:hover { background: #f8fafc; }
.customers-page #customers-table tbody td { padding: 0.875rem 1rem; font-size: 0.9375rem; }
.customers-page #customers-table tbody tr td:first-child a { font-weight: 600; color: var(--primary-color); }
.customers-page #customers-table .customer-code { font-size: 0.8125rem; color: #64748b; }
.customers-page #customers-table .contacts-count-badge { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; }
.customers-page .empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-secondary); }
.customers-page .empty-state a { color: var(--primary-color); font-weight: 500; }
.customers-page .table-footer-pagination { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; }

.customers-page .customer-form-card .card-body { padding: 1.5rem 1.75rem; }
.customers-page .customer-form .form-section-inner { margin-bottom: 1.5rem; }
.customers-page .customer-form .form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    margin-bottom: 0;
}
.customers-page .customer-form .form-row-2 .form-group { margin-bottom: 1.25rem; }
.customers-page .customer-form .form-row-2:last-child .form-group,
.customers-page .customer-form .form-group:last-of-type { margin-bottom: 0; }
.customers-page .customer-form .form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}
@media (max-width: 640px) {
    .customers-page .customer-form .form-row-2 { grid-template-columns: 1fr; }
}

/* Searchable contact-type + customer dropdowns: avoid clipping inside open-pool-card */
.customers-page .customer-form-card.open-pool-card { overflow: visible; }
.contacts-page .open-pool-card.card-modern:has(.customer-form) { overflow: visible; }
.customers-page .customer-form .contact-type-role-row .select-search-wrap .select-search-dropdown,
.contacts-page .customer-form .contact-type-role-row .select-search-wrap .select-search-dropdown {
    z-index: 100;
}
.customers-page .customer-form .contact-edit-customer-row {
    margin-top: 0.35rem;
}
.customers-page .customer-form .contact-edit-customer-row .form-group.full-width {
    grid-column: 1 / -1;
    max-width: 100%;
    margin-bottom: 0;
}
.customers-page .customer-form .contact-edit-customer-row .select-search-wrap .select-search-input {
    min-height: 2.75rem;
    font-size: 0.9375rem;
    border-radius: 10px;
}
.customers-page .customer-form .contact-edit-customer-row .select-search-wrap .select-search-dropdown,
.contacts-page .customer-form .contact-edit-customer-row .select-search-wrap .select-search-dropdown {
    z-index: 120;
    max-height: min(18rem, 55vh);
}

/* Contact form: customer in first column (row 1); same styling as former full-width customer row */
.customers-page .customer-form .contact-form-customer-field .select-search-wrap .select-search-input,
.contacts-page .customer-form .contact-form-customer-field .select-search-wrap .select-search-input {
    min-height: 2.75rem;
    font-size: 0.9375rem;
    border-radius: 10px;
}
.customers-page .customer-form .contact-form-customer-field .select-search-wrap .select-search-dropdown,
.contacts-page .customer-form .contact-form-customer-field .select-search-wrap .select-search-dropdown {
    z-index: 125;
    max-height: min(18rem, 55vh);
}
.customers-page .customer-form .contact-form-customer-name-row .select-search-wrap .select-search-dropdown,
.contacts-page .customer-form .contact-form-customer-name-row .select-search-wrap .select-search-dropdown {
    z-index: 125;
}
/* Contact type moved beside alt mobile; keep dropdown above following rows */
.customers-page .customer-form .contact-personal-alt-row .select-search-wrap .select-search-dropdown,
.contacts-page .customer-form .contact-personal-alt-row .select-search-wrap .select-search-dropdown {
    z-index: 115;
}
.customers-page .customer-form .contact-form-grid-spacer,
.contacts-page .customer-form .contact-form-grid-spacer {
    margin: 0;
    padding: 0;
    border: none;
    min-height: 0;
    pointer-events: none;
}
@media (max-width: 640px) {
    .customers-page .customer-form .contact-form-grid-spacer,
    .contacts-page .customer-form .contact-form-grid-spacer {
        display: none;
    }
}

/* Permanent delete panel (jobs, candidates, customers, contacts, interviews) */
.entity-delete-panel {
    margin-top: 0.75rem;
}
.entity-delete-panel--modern {
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--border-color, #d9d9d9);
    background: var(--surface, #fff);
    box-shadow: var(--shadow, 0 1px 2px rgba(0, 0, 0, 0.06));
    overflow: hidden;
}
.entity-delete-summary {
    cursor: pointer;
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary, #333);
    transition: background 0.15s ease, color 0.15s ease;
}
.entity-delete-summary::-webkit-details-marker { display: none; }
.entity-delete-summary::marker { content: ''; }
.entity-delete-summary-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid rgba(192, 0, 0, 0.35);
    background: linear-gradient(90deg, rgba(192, 0, 0, 0.04) 0%, transparent 48%);
}
.entity-delete-panel--modern > .entity-delete-summary:hover .entity-delete-summary-inner {
    background: linear-gradient(90deg, rgba(192, 0, 0, 0.08) 0%, transparent 55%);
}
.entity-delete-panel--modern[open] > .entity-delete-summary .entity-delete-summary-inner {
    border-left-color: var(--danger-color, #c00);
    background: linear-gradient(90deg, rgba(192, 0, 0, 0.07) 0%, transparent 50%);
    border-bottom: 1px solid var(--border-color, #d9d9d9);
}
.entity-delete-summary-icon {
    display: flex;
    color: var(--danger-color, #c00);
    opacity: 0.9;
    flex-shrink: 0;
}
.entity-delete-summary-text {
    flex: 1;
    letter-spacing: 0.01em;
}
.entity-delete-chevron {
    flex-shrink: 0;
    color: var(--text-secondary, #666);
    transition: transform 0.2s ease;
}
.entity-delete-panel--modern[open] .entity-delete-chevron {
    transform: rotate(180deg);
}
.entity-delete-summary:focus {
    outline: none;
}
.entity-delete-summary:focus-visible .entity-delete-summary-inner {
    box-shadow: inset 0 0 0 2px var(--primary-color, #0066cc);
    border-radius: 2px;
}
.entity-delete-body {
    margin: 0;
    padding: 1rem 1.15rem 1.15rem;
    background: linear-gradient(180deg, #fdfcfc 0%, var(--surface, #fff) 28%);
    max-width: 36rem;
}
.entity-delete-callout {
    padding: 0.75rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--border-color, #d9d9d9);
    background: var(--background, #f7f7f7);
    border-left: 3px solid var(--text-secondary, #888);
}
.entity-delete-help {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary, #666);
}
.entity-delete-code {
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-color, #d9d9d9);
    word-break: break-all;
}
.entity-delete-form {
    margin: 0;
}
.entity-delete-confirm-group {
    margin-bottom: 1rem;
}
.entity-delete-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #333);
    margin-bottom: 0.45rem;
}
.entity-delete-keyword {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--danger-color, #c00);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: rgba(192, 0, 0, 0.08);
    border: 1px solid rgba(192, 0, 0, 0.2);
}
.entity-delete-confirm-input {
    max-width: 18rem;
    width: 100%;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--border-color, #d9d9d9);
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entity-delete-confirm-input:focus {
    outline: none;
    border-color: var(--danger-color, #c00);
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.15);
}
.entity-delete-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.entity-delete-submit {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-lg, 8px);
    color: #fff;
    background: var(--danger-color, #c00);
    border: 1px solid #990000;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.entity-delete-submit:hover {
    background: #a80000;
    border-color: #880000;
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
}
.entity-delete-submit:active {
    transform: translateY(1px);
}
.entity-delete-panel-after-form {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color, #d9d9d9);
}
.job-detail-delete-wrap,
.candidate-detail-delete-wrap {
    width: 100%;
}
.job-detail-delete-wrap { margin-top: 0.5rem; }
.detail-sidebar .job-detail-delete-wrap { margin-top: 1rem; }
.candidate-detail-delete-wrap { margin-top: 1rem; }
.detail-sidebar .job-detail-delete-wrap .entity-delete-body,
.candidate-detail-delete-wrap .entity-delete-body {
    max-width: none;
}
.job-detail-page-inner .job-detail-delete-wrap .entity-delete-body { max-width: none; }

.card-header-action-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1rem;
}
.card-header-action-cluster .entity-delete-panel { margin-top: 0; }

.customers-page .customers-page-header .header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
}

.customers-page .contact-personal-alt-row,
.contacts-page .contact-personal-alt-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    align-items: start;
}
@media (max-width: 640px) {
    .customers-page .contact-personal-alt-row,
    .contacts-page .contact-personal-alt-row { grid-template-columns: 1fr; }
}
.customers-page .contact-active-toggle,
.contacts-page .contact-active-toggle {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.customers-page .contact-active-toggle-label,
.contacts-page .contact-active-toggle-label {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}
.customers-page .contact-active-switch-wrap,
.contacts-page .contact-active-switch-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.customers-page .contact-active-caption,
.contacts-page .contact-active-caption {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.customers-page .contact-active-checkbox,
.contacts-page .contact-active-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.customers-page .contact-active-checkbox:focus + .contact-active-switch,
.contacts-page .contact-active-checkbox:focus + .contact-active-switch {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.customers-page .contact-active-switch,
.contacts-page .contact-active-switch {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.625rem;
    background: #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
}
.customers-page .contact-active-checkbox:checked + .contact-active-switch,
.contacts-page .contact-active-checkbox:checked + .contact-active-switch {
    background: #0ea5e9;
}
.customers-page .contact-active-knob,
.contacts-page .contact-active-knob {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background: #fff;
    border-radius: 50%;
    top: 0.1875rem;
    left: 0.1875rem;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.customers-page .contact-active-checkbox:checked + .contact-active-switch .contact-active-knob,
.contacts-page .contact-active-checkbox:checked + .contact-active-switch .contact-active-knob {
    transform: translateX(1.125rem);
}
.customers-page .customer-detail-contacts-table tr.contact-row-inactive td,
.contacts-page tr.contact-row-inactive td {
    opacity: 0.72;
}

.customers-page .th-contacts { min-width: 140px; }
.customers-page .contacts-cell { min-width: 140px; vertical-align: middle; }
.customers-page .contacts-cell-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    color: inherit;
    text-decoration: none;
}
.customers-page .contacts-cell-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}
.customers-page .contacts-cell-btn .contacts-count-badge {
    font-size: 0.875rem;
    padding: 0.35rem 0.65rem;
}

.customers-contacts-panel-overlay {
    position: fixed;
    top: 3.5rem;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
body.contacts-panel-open .customers-contacts-panel-overlay {
    opacity: 1;
    visibility: visible;
}
.customers-contacts-panel {
    position: fixed;
    top: 3.5rem;
    right: 0;
    width: 100%;
    max-width: 420px;
    height: calc(100vh - 3.5rem);
    background: #fff;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.25s ease;
}
body.contacts-panel-open .customers-contacts-panel {
    transform: translateX(0);
}
.customers-contacts-panel[aria-hidden="true"] { visibility: hidden; }
.customers-contacts-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.customers-contacts-panel-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.customers-contacts-panel-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
}
.customers-contacts-panel-close:hover { background: #f1f5f9; color: #334155; }
.customers-contacts-panel-search {
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    background: #fafbfc;
}
.customers-contacts-panel-search-wrap {
    position: relative;
}
.contacts-panel-search-input,
.customers-contacts-panel-search .open-pool-search-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 2.5rem 0 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    font-size: 0.875rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 0.75rem center;
    background-size: 1rem;
}
.contacts-panel-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0369a1);
    box-shadow: 0 0 0 2px rgba(3, 105, 161, 0.15);
}
.contacts-panel-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.contacts-panel-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.contacts-panel-search-clear svg { display: block; }
.customers-contacts-panel-search-wrap.contacts-panel-search-has-text .contacts-panel-search-clear { display: flex !important; }
.customers-contacts-panel-list-wrap {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    min-height: 0;
}
.customers-contacts-panel-list-wrap .panel-contacts-block {
    display: block;
}
.customers-contacts-panel-list-wrap .panel-contacts-block.hide {
    display: none !important;
}
.customers-contacts-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.customers-contacts-panel-loading {
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    list-style: none;
}
.customers-contacts-panel-item {
    padding: 1rem 1rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.customers-contacts-panel-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.customers-contacts-panel-item .customers-contacts-panel-item-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary, #0f172a);
    margin-bottom: 0.5rem;
}
.customers-contacts-panel-item-details {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.8125rem;
}
.contacts-panel-name-sep { color: #cbd5e1; font-weight: 400; }
.contacts-panel-role {
    display: inline-block;
    color: #64748b;
    font-weight: 500;
}
.contacts-panel-email,
.contacts-panel-phone {
    color: var(--primary-color, #0369a1);
    text-decoration: none;
}
.contacts-panel-email:hover,
.contacts-panel-phone:hover {
    text-decoration: underline;
}
.contacts-panel-linkedin {
    display: inline-flex;
    align-items: center;
    color: #0a66c2;
    text-decoration: none;
    margin-left: 0.15rem;
}
.contacts-panel-linkedin:hover {
    opacity: 0.85;
}
.contacts-panel-linkedin .linkedin-icon,
.contacts-panel-linkedin .contacts-panel-linkedin-img {
    display: block;
    vertical-align: middle;
}
.customers-contacts-panel-item-meta { display: block; font-size: 0.75rem; color: #64748b; margin-top: 0.2rem; }
.customers-contacts-panel-list-wrap .customers-contacts-panel-empty {
    padding: 1.5rem;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
}
.customers-contacts-panel-list-wrap .customers-contacts-panel-empty.hide {
    display: none !important;
}
.customers-contacts-panel-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* Contacts page: enriched header, search, table */
.contacts-page .back-link { margin-bottom: 0.75rem; }
.contacts-page .page-header.contacts-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 50%, #fbcfe8 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-left: 4px solid #db2777;
    box-shadow: 0 2px 8px rgba(219, 39, 119, 0.1);
}
.contacts-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #be185d;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.contacts-page .page-header-desc {
    font-size: 0.9375rem;
    color: #c026d3;
    margin: 0;
    opacity: 0.9;
}
.contacts-page .table-responsive {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}
.contacts-page #contacts-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}
.contacts-page #contacts-table thead th {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.contacts-page #contacts-table tbody tr { border-bottom: 1px solid #eef2f7; }
.contacts-page #contacts-table tbody tr:hover { background: #f8fafc; }
.contacts-page #contacts-table tbody td { padding: 0.875rem 1rem; font-size: 0.9375rem; }
.contacts-page #contacts-table tbody tr td strong { font-weight: 600; color: var(--text-primary); }
.contacts-page #contacts-table tbody tr td a[href] { color: var(--primary-color); }
.contacts-page .empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-secondary); }
.contacts-page .empty-state a { color: var(--primary-color); font-weight: 500; }

/* Users & Groups pages – same style as Interviews page */
.users-page,
.groups-page {
    overflow-x: hidden;
    max-width: 100%;
}
.users-page .page-header,
.groups-page .page-header,
.settings-page .page-header.settings-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f5f3ff 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid var(--primary-color, #0066cc);
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.06);
}
.users-page .page-header h1,
.groups-page .page-header h1,
.settings-page .page-header.settings-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.users-page .page-header-desc,
.groups-page .page-header-desc,
.settings-page .page-header-desc {
    font-size: 0.9375rem;
    color: #6366f1;
    margin: 0;
    opacity: 0.85;
}
.settings-page .header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* iChat Failed Answers page – modern UI */
.ichat-failed-answers-page .ichat-failed-answers-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.ichat-failed-answers-page .ichat-failed-answers-card .card-body {
    padding: 1.5rem 1.75rem;
}
.ichat-failed-answers-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.ichat-train-actions-bottom {
    margin-top: 1.25rem;
    display: flex;
    justify-content: flex-end;
}
.ichat-train-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ichat-push-train-btn {
    white-space: nowrap;
}
.ichat-push-train-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.ichat-train-hint {
    font-size: 0.875rem;
    color: #64748b;
}
.ichat-th-checkbox,
.ichat-cell-checkbox {
    width: 2.5rem;
    text-align: center;
    vertical-align: middle;
}
.ichat-checkbox-label {
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ichat-th-status,
.ichat-cell-status {
    white-space: nowrap;
}
.ichat-trained-badge {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-size: 0.75rem;
    font-weight: 600;
    color: #0f766e;
    background: #ccfbf1;
    border-radius: 6px;
}
.ichat-failed-answers-page #ichat-failed-answers-table tbody tr.ichat-row-trained {
    background: rgba(204, 251, 241, 0.25);
}
.ichat-failed-answers-search-wrap {
    flex: 1;
    min-width: 200px;
    max-width: 420px;
}
.ichat-failed-answers-search-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 2.5rem;
    width: 100%;
}
.ichat-failed-answers-search-input-wrap .ichat-failed-answers-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.5rem;
    padding: 0 1rem;
    padding-right: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}
.ichat-failed-answers-search-input-wrap .ichat-failed-answers-search-input::placeholder {
    color: #94a3b8;
}
.ichat-failed-answers-search-input-wrap .ichat-failed-answers-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.ichat-failed-answers-search-input-wrap .ichat-failed-answers-search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.ichat-failed-answers-search-input-wrap .ichat-failed-answers-search-icon svg {
    display: block;
}
.ichat-failed-answers-search-input-wrap .ichat-failed-answers-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.ichat-failed-answers-search-input-wrap.ichat-failed-answers-search-has-text .ichat-failed-answers-search-clear {
    display: flex;
}
.ichat-failed-answers-search-input-wrap .ichat-failed-answers-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.ichat-failed-answers-page .table-responsive {
    border-radius: var(--radius);
    overflow-x: auto;
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}
.ichat-failed-answers-page #ichat-failed-answers-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}
.ichat-failed-answers-page #ichat-failed-answers-table thead th {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-align: left;
}
.ichat-failed-answers-page #ichat-failed-answers-table tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    vertical-align: top;
}
.ichat-failed-answers-page #ichat-failed-answers-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.ichat-failed-answers-page #ichat-failed-answers-table tbody tr:hover {
    background: #f0f9ff !important;
}
.ichat-failed-answers-page #ichat-failed-answers-table .ichat-cell-question {
    max-width: 320px;
    word-break: break-word;
}
.ichat-failed-answers-page #ichat-failed-answers-table .ichat-cell-date {
    white-space: nowrap;
    color: #64748b;
    font-size: 0.875rem;
}
.ichat-failed-answers-page #ichat-failed-answers-table .ichat-cell-answer {
    max-width: 360px;
    word-break: break-word;
    color: #475569;
}
.ichat-failed-answers-page .ichat-failed-empty-state {
    text-align: center;
    padding: 2rem 1.5rem;
    color: #64748b;
    font-size: 0.9375rem;
}
.ichat-failed-answers-page .ichat-failed-empty-state.hide {
    display: none !important;
}
.ichat-failed-answers-page .ichat-failed-empty-hint {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    opacity: 0.9;
}
.ichat-failed-answers-page .ichat-failed-suggestions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}
.ichat-failed-answers-page .ichat-failed-suggestions-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
}
.ichat-failed-answers-page .ichat-failed-suggestions-list {
    margin: 0;
    padding-left: 1.5rem;
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.6;
}
.ichat-failed-answers-page .ichat-failed-suggestions-item {
    margin-bottom: 0.5rem;
}
.ichat-failed-answers-page .ichat-suggestion-question {
    color: #0f172a;
}

.groups-page .btn-add-group {
    border-radius: var(--radius);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 102, 204, 0.2);
}
.groups-page .btn-add-group:hover {
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}
.users-page .header-actions,
.groups-page .header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.6rem;
    align-items: center;
}

/* Users hero toolbar: modern pill actions (Groups, Reporting hierarchy, Add user) */
.users-page .users-hero-toolbar .users-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    border-radius: 9999px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.users-page .users-hero-toolbar .users-toolbar-btn svg {
    flex-shrink: 0;
    opacity: 0.92;
}
.users-page .users-hero-toolbar .users-toolbar-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
.users-page .users-hero-toolbar .users-toolbar-btn--ghost {
    color: #1e40af;
    background: #fff;
    border-color: rgba(59, 130, 246, 0.38);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.08);
}
.users-page .users-hero-toolbar .users-toolbar-btn--ghost:hover {
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.32);
    transform: translateY(-1px);
}
.users-page .users-hero-toolbar .users-toolbar-btn--ghost:active {
    transform: translateY(0);
}
.users-page .users-hero-toolbar .users-toolbar-btn--secondary {
    color: #334155;
    background: #fff;
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.users-page .users-hero-toolbar .users-toolbar-btn--secondary:hover {
    color: #0f172a;
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(180deg, #fafbff 0%, #f1f5f9 100%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}
.users-page .users-hero-toolbar .users-toolbar-btn--secondary:active {
    transform: translateY(0);
}
.users-page .users-hero-toolbar .users-toolbar-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 55%, #6366f1 100%);
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35), 0 1px 2px rgba(15, 23, 42, 0.06);
    padding-left: 1.05rem;
    padding-right: 1.15rem;
}
.users-page .users-hero-toolbar .users-toolbar-btn--primary:hover {
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4), 0 2px 6px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
    filter: brightness(1.03);
}
.users-page .users-hero-toolbar .users-toolbar-btn--primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

/* Layout: main + sidebar (like interviews) */
.users-layout,
.groups-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.75rem;
    margin-top: 0;
    min-width: 0;
}
@media (max-width: 992px) {
    .users-layout,
    .groups-layout { grid-template-columns: 1fr; }
}
.users-main .card,
.groups-main .card {
    margin-bottom: 0;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.users-main,
.groups-main { min-width: 0; }
.users-main .card-body,
.groups-main .card-body {
    padding: 1.5rem 1.75rem;
}

/* Search row (same as interviews) */
.users-search-row,
.groups-search-row {
    display: flex;
    align-items: stretch;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
    gap: 0.75rem;
}
.users-search-wrap,
.groups-search-wrap {
    flex: 1;
    min-width: 0;
}
.users-search-input-wrap,
.groups-search-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 2.5rem;
    flex: 1;
    min-width: 0;
}
.users-search-input-wrap .users-search-input,
.groups-search-input-wrap .groups-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0 1rem;
    font-size: 0.9375rem;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}
/* Users list: search icon left, clear (×) right when text present */
.users-search-input-wrap .users-search-input {
    padding-left: 2.65rem;
    padding-right: 1rem;
}
.users-search-input-wrap.users-search-has-text .users-search-input {
    padding-right: 2.5rem;
}
.users-search-input-wrap .users-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.users-search-input-wrap.users-search-has-text .users-search-clear {
    display: flex;
}
.users-search-input-wrap .users-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.users-search-input-wrap .users-search-clear svg {
    display: block;
}
.groups-search-input-wrap .groups-search-input {
    padding-right: 2.5rem;
}
.users-search-input-wrap .users-search-icon {
    position: absolute;
    left: 0.85rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.groups-search-input-wrap .groups-search-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.users-search-input-wrap .users-search-icon svg,
.groups-search-input-wrap .groups-search-icon svg {
    display: block;
}
.users-search-input::placeholder,
.groups-search-input::placeholder {
    color: #94a3b8;
}
.users-search-input-wrap .users-search-input:focus,
.groups-search-input-wrap .groups-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.groups-search-input-wrap .groups-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.groups-search-input-wrap.groups-search-has-text .groups-search-clear {
    display: flex;
}
.groups-search-input-wrap .groups-search-clear:hover { color: #0f172a; background: #f1f5f9; }
.groups-search-input-wrap .groups-search-clear svg { display: block; }

/* Table (same as interviews) */
.users-page .users-table-wrap {
    border-radius: var(--radius);
    overflow: visible;
    border: 1px solid var(--border-color);
}
.users-page .table-responsive,
.groups-page .table-responsive {
    border-radius: var(--radius);
    overflow-x: auto;
    border: 1px solid var(--border-color);
}
.users-page #users-table {
    width: 100%;
    table-layout: fixed;
}
.users-page #users-table thead th:nth-child(1) { width: 7%; }
.users-page #users-table thead th:nth-child(2) { width: 11%; }
.users-page #users-table thead th:nth-child(3) { width: 13%; }
.users-page #users-table thead th:nth-child(4) { width: 28%; }
.users-page #users-table thead th:nth-child(5) { width: 9%; }
.users-page #users-table thead th:nth-child(6) { width: 9%; }
.users-page #users-table thead th:nth-child(7) { width: 9%; }
.users-page #users-table thead th:nth-child(8) { width: 14%; }
.users-page #users-table .users-table-cell-id {
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.users-page #users-table .users-table-cell-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.users-page #users-table .users-table-cell-groups {
    white-space: nowrap;
    cursor: help;
}
.users-page #users-table thead,
.groups-page #groups-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}
.users-page #users-table thead th,
.groups-page #groups-table thead th {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.users-page #users-table tbody tr,
.groups-page #groups-table tbody tr {
    border-bottom: 1px solid #eef2f7;
    transition: background-color 0.15s;
}
.users-page #users-table tbody tr:hover,
.groups-page #groups-table tbody tr:hover {
    background: #f8fafc;
}
.users-page #users-table tbody td,
.groups-page #groups-table tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    vertical-align: middle;
}
.users-page #users-table .link-strong,
.groups-page #groups-table .link-strong {
    font-weight: 600;
    color: var(--primary-color);
}
.users-page #users-table .link-strong:hover,
.groups-page #groups-table .link-strong:hover {
    text-decoration: underline;
}
.users-page #users-table .users-name-link {
    font-weight: 600;
    color: var(--primary-color, #0066cc);
    text-decoration: none;
}
.users-page #users-table .users-name-link:hover {
    text-decoration: underline;
}
.users-page .users-sidebar-hint {
    font-size: 0.8125rem;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.users-page #users-table .badge,
.groups-page #groups-table .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    text-transform: capitalize;
}
.users-page #users-no-results,
.groups-page #groups-no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}
.users-page .empty-state,
.groups-page .empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--text-secondary);
}
.users-page .empty-state .btn,
.groups-page .empty-state .btn {
    margin-top: 0.75rem;
}

/* ─── Settings → Error logs (modern search + table) ─── */
.error-logs-page .error-logs-header {
    margin-bottom: 1.25rem;
}
.error-logs-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.06);
    overflow: hidden;
}
.error-logs-main .card-body {
    padding: 1.5rem 1.75rem;
}
.error-logs-search-panel {
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 45%, #f5f3ff 100%);
    border: 1px solid rgba(59, 130, 246, 0.18);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(59, 130, 246, 0.06);
}
.error-logs-panel-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.875rem;
}
.error-logs-panel-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4338ca;
    margin: 0;
}
.error-logs-kbd-hint {
    font-size: 0.75rem;
    color: #64748b;
}
.error-logs-kbd-hint kbd {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    margin: 0 0.1rem;
    font-size: 0.6875rem;
    font-family: ui-monospace, monospace;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    box-shadow: 0 1px 0 #e2e8f0;
}
.error-logs-panel-desc {
    font-size: 0.875rem;
    color: #475569;
    margin: 0 0 1rem 0;
    line-height: 1.45;
}
.error-logs-search-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    gap: 0.75rem 1rem;
    align-items: stretch;
}
@media (max-width: 768px) {
    .error-logs-search-banner {
        grid-template-columns: 1fr;
    }
}
.error-logs-field {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 2.65rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(59, 130, 246, 0.22);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.error-logs-field:focus-within {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.error-logs-field-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    color: #64748b;
    pointer-events: none;
}
.error-logs-field:focus-within .error-logs-field-icon {
    color: var(--primary-color, #2563eb);
}
.error-logs-field-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.65rem 0.85rem 0.65rem 0;
    font-size: 0.9375rem;
    color: #0f172a;
    outline: none;
}
.error-logs-field-input::placeholder {
    color: #94a3b8;
}
.error-logs-filter-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(59, 130, 246, 0.12);
}
.error-logs-filter-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-right: 0.25rem;
}
.error-logs-pill-select {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.error-logs-pill-select::after {
    content: '';
    position: absolute;
    right: 0.65rem;
    top: 50%;
    width: 0.35em;
    height: 0.35em;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}
.error-logs-pill-select select {
    appearance: none;
    -webkit-appearance: none;
    height: 2.25rem;
    padding: 0 1.75rem 0 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.error-logs-pill-select select:hover {
    border-color: #cbd5e1;
}
.error-logs-pill-select select:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.error-logs-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}
.error-logs-btn-refresh {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border: none;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.error-logs-btn-refresh:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.error-logs-btn-refresh:active {
    transform: translateY(0);
}
.error-logs-btn-secondary {
    padding: 0.45rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}
.error-logs-btn-secondary:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.error-logs-status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    min-height: 1.5rem;
}
.error-logs-status {
    font-size: 0.875rem;
    color: #64748b;
}
.error-logs-status strong {
    color: #0f172a;
    font-weight: 600;
}
.error-logs-status.is-loading {
    color: var(--primary-color, #2563eb);
}
.error-logs-table-wrap {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: opacity 0.2s ease;
}
.error-logs-table-wrap.is-loading {
    opacity: 0.55;
    pointer-events: none;
}
.error-logs-page .error-logs-table {
    margin-bottom: 0;
    width: 100%;
    table-layout: fixed;
}
.error-logs-page .error-logs-table thead th {
    font-weight: 600;
    color: #475569;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.8rem 0.65rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid #e2e8f0;
}
.error-logs-th-actions {
    width: 9.5rem;
    text-align: right;
}
.error-logs-page .error-logs-table tbody td {
    padding: 0.65rem 0.65rem;
    font-size: 0.8125rem;
    vertical-align: top;
    word-break: break-word;
    border-bottom: 1px solid #f1f5f9;
}
.error-logs-page .error-logs-table tbody tr:hover {
    background: #fafbfc;
}
.error-logs-level-error {
    background-color: #fef2f2 !important;
}
.error-logs-level-warning {
    background-color: #fffbeb !important;
}
.error-logs-cell-time {
    white-space: nowrap;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    width: 9.5rem;
    font-size: 0.8125rem;
}
.error-logs-cell-mono {
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    color: #334155;
}
.error-logs-cell-user {
    max-width: 10rem;
}
.error-logs-cell-loc {
    max-width: 11rem;
    font-size: 0.75rem;
    color: #475569;
}
.error-logs-cell-msg {
    font-size: 0.8125rem;
    color: #0f172a;
    line-height: 1.4;
}
.error-logs-cell-resolved {
    white-space: nowrap;
    width: 4.5rem;
    font-weight: 500;
}
.error-logs-cell-actions {
    text-align: right;
    white-space: nowrap;
}
.error-logs-cell-actions .btn {
    margin-left: 0.25rem;
}
.error-logs-mark {
    background: #fef08a;
    color: #713f12;
    padding: 0 0.15em;
    border-radius: 3px;
    font-weight: 600;
}
.error-logs-meta-row td {
    padding: 0 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-bottom: 1px solid #e2e8f0;
}
.error-logs-meta-pre {
    margin: 0;
    padding: 0.875rem 1rem;
    font-size: 0.75rem;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
    color: #334155;
    font-family: ui-monospace, monospace;
}
.error-logs-meta-row.hide {
    display: none;
}
.error-logs-empty-state td {
    text-align: center;
    padding: 2.5rem 1.5rem !important;
    color: #64748b;
    font-size: 0.9375rem;
    background: #fafbfc !important;
    border: none !important;
}
.error-logs-empty-state strong {
    display: block;
    color: #334155;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}
.error-logs-pagination {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.error-logs-pagination-btns {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.error-logs-page-info {
    font-size: 0.8125rem;
    color: #64748b;
    font-weight: 500;
}
.error-logs-page .error-logs-pagination .btn-soft {
    border-radius: 9999px;
    font-weight: 600;
    padding: 0.4rem 1rem;
}

/* Sidebar cards (like Today's Interviews) */
.users-sidebar,
.groups-sidebar {
    position: sticky;
    top: 1rem;
}
.users-page .users-summary-card .card-header,
.users-page .users-actions-card .card-body,
.groups-page .groups-summary-card .card-header,
.groups-page .groups-actions-card .card-body {
    padding: 0.875rem 1.25rem;
}
.users-page .users-summary-card .card-header,
.groups-page .groups-summary-card .card-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}
.users-page .users-summary-card .card-title,
.groups-page .groups-summary-card .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e40af;
    margin: 0;
}
.users-page .users-summary-card .card-body,
.groups-page .groups-summary-card .card-body {
    padding: 1.25rem;
}
.users-summary-list,
.groups-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.users-summary-item,
.groups-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid #eef2f7;
}
.users-summary-item:last-child,
.groups-summary-item:last-child {
    border-bottom: none;
}
.users-summary-label,
.groups-summary-label {
    font-size: 0.9rem;
    color: var(--text-primary);
}
.users-summary-count,
.groups-summary-count {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
}

/* Users sidebar — total (single compact row) */
.users-page .users-summary-footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.45rem 0.65rem;
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(224, 231, 255, 0.55) 100%);
    border: 1px solid rgba(59, 130, 246, 0.16);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.users-page .users-summary-footer-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    color: #1d4ed8;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(59, 130, 246, 0.18);
}
.users-page .users-summary-footer-value {
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #1e3a8a;
}
.users-page .users-summary-footer-label {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    color: #475569;
}
.users-page .users-actions-card .card-body,
.groups-page .groups-actions-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.users-page .users-actions-card .btn-block,
.groups-page .groups-actions-card .btn-block {
    width: 100%;
    justify-content: center;
}
.users-page .users-summary-card,
.users-page .users-actions-card,
.groups-page .groups-summary-card,
.groups-page .groups-actions-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    margin-bottom: 1rem;
}
.users-page .users-actions-card:last-child,
.groups-page .groups-actions-card:last-child {
    margin-bottom: 0;
}
/* Group detail: main area cards */
.groups-page .groups-main .card .card-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding: 0.875rem 1.25rem;
}
.groups-page .groups-main .card .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e40af;
    margin: 0;
}

/* Add/Edit form pages (same header, single card) */
.users-page .back-link,
.groups-page .back-link {
    display: inline-block;
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    color: var(--primary-color);
}
.users-page .back-link:hover,
.groups-page .back-link:hover {
    text-decoration: underline;
}
.users-page .card .form-section-inner,
.groups-page .card .form-section-inner {
    margin-bottom: 1.5rem;
}
.users-page .card .form-section-inner:last-of-type,
.groups-page .card .form-section-inner:last-of-type {
    margin-bottom: 0;
}
.users-page .card .form-section-title,
.groups-page .card .form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
}
.users-page .card .form-actions,
.groups-page .card .form-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}
.inline-form { display: inline; }

/* Add User / Add Group form improvements */
.add-form-wrap {
    max-width: 640px;
}
.add-form-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.add-form-card .card-body { padding: 0; }
.add-form-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    margin: 0;
    background: #fef2f2;
    border-bottom: 1px solid #fecaca;
    color: #b91c1c;
    font-size: 0.9375rem;
}
.add-form-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #b91c1c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.add-user-form,
.add-group-form {
    padding: 0;
}
.add-form-section {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #eef2f7;
    border-left: 4px solid var(--primary-color, #0066cc);
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.04) 0%, transparent 8%);
}
.add-form-section:last-of-type {
    border-bottom: none;
}
.add-form-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
}
.add-form-section-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 1rem 0;
}
.add-form-row {
    display: grid;
    gap: 1rem;
}
.add-form-row-2 {
    grid-template-columns: 1fr 1fr;
}
.add-form-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 560px) {
    .add-form-row-2 { grid-template-columns: 1fr; }
    .add-form-row-3 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .add-form-row-3 { grid-template-columns: 1fr 1fr; }
}
.add-form-section .form-group {
    margin-bottom: 1rem;
}
.add-form-section .form-group:last-child {
    margin-bottom: 0;
}
.add-form-section .form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.35rem;
}
.add-form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.35rem;
    line-height: 1.35;
}
.add-form-input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-primary);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.add-form-input:hover {
    border-color: #cbd5e1;
}
.add-form-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.add-form-select {
    appearance: auto;
    cursor: pointer;
}
.add-form-textarea {
    height: auto;
    min-height: 4.5rem;
    padding: 0.6rem 0.75rem;
    resize: vertical;
}
.add-form-groups-wrap {
    margin-top: 1rem;
}

/* Edit User: account actions (reset password, deactivate, delete) */
.edit-user-actions-section {
    border-top: 1px solid var(--border-color, #e2e8f0);
    padding-top: 1rem;
    margin-top: 0.5rem;
}
.edit-user-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.edit-user-actions-row .edit-user-action-form {
    display: inline;
}
.edit-user-actions-row .btn {
    margin: 0;
}

/* Password visibility toggle (edit user – New password) */
.password-toggle-wrap {
    position: relative;
    display: block;
}
.password-toggle-wrap:not([data-disabled="true"]) .password-input-with-toggle {
    padding-right: 2.75rem;
}
.password-toggle-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.password-toggle-btn:hover {
    color: var(--text-color, #334155);
    background: rgba(0, 0, 0, 0.06);
}
.password-toggle-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-color, #0066cc);
}
.password-toggle-btn[tabindex="-1"]:focus {
    outline: none;
}
.password-toggle-icon {
    display: inline-flex;
    pointer-events: none;
    position: relative;
}
.password-toggle-icon .password-toggle-svg {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/* Masked (xxxxx): show eye with cross; visible: show eye without cross */
.password-toggle-icon .password-toggle-svg--nocross {
    display: none;
}
.password-toggle-btn.is-visible .password-toggle-icon .password-toggle-svg--cross {
    display: none;
}
.password-toggle-btn.is-visible .password-toggle-icon .password-toggle-svg--nocross {
    display: block;
}

.add-form-groups-label {
    margin-bottom: 0.5rem;
}
.add-form-groups-list {
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.5rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fafbfc;
    padding: 0.5rem 0.75rem;
}
.add-form-checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text-primary);
    border-bottom: 1px solid #f1f5f9;
}
.add-form-checkbox-item:last-child {
    border-bottom: none;
}
.add-form-checkbox-item input[type="checkbox"] {
    margin-top: 0.25rem;
    flex-shrink: 0;
}
.add-form-checkbox-label {
    flex: 1;
}
.add-form-checkbox-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 400;
}
.add-form-empty-groups {
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    text-align: center;
}
.add-form-empty-groups-text {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.add-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: flex-end;
    padding: 1rem 1.5rem;
    background: #fafbfc;
    border-top: 1px solid var(--border-color);
}
.add-form-actions .btn,
.add-form-actions .btn-secondary,
.add-form-actions .btn-primary,
.add-form-actions .btn-submit {
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    min-height: 2.25rem;
    line-height: 1.3;
    border-radius: var(--radius);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.add-form-actions .btn-submit,
.add-form-actions .btn-primary {
    font-weight: 600;
}

/* Add User / Edit User: form section grows to show all fields; page scrolls when needed */
.add-user-page {
    min-height: calc(100vh - 4.5rem);
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.add-user-page .back-link {
    margin-bottom: 0.5rem;
}
.add-user-page .page-header.users-page-header {
    flex-shrink: 0;
    margin-bottom: 0.75rem;
    padding: 1.25rem 1.25rem 1rem;
}
.add-user-page .page-header.users-page-header h1 {
    font-size: 1.25rem;
    margin: 0;
}
.add-user-page .page-header-desc {
    font-size: 0.8125rem;
    margin: 0.25rem 0 0 0;
}
.add-user-page .add-form-wrap--two-col {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.add-user-page .add-form-card--two-col {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.add-user-page .add-user-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.add-user-page .add-form-columns {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 0.5rem;
    overflow: visible;
    margin-bottom: 1rem;
}
.add-user-page .add-form-column {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
}
.add-form-column {
    flex: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.add-form-column--left {
    max-width: 50%;
}
.add-form-column--right {
    max-width: 50%;
}
.add-user-page .add-form-column .add-form-section {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem 0.5rem;
    border-left-width: 3px;
}
.add-user-page .add-form-column .add-form-section-title {
    font-size: 1.05rem;
    margin: 0 0 0.25rem 0;
}
.add-user-page .add-form-column .add-form-section-desc {
    font-size: 0.9375rem;
    margin: 0 0 0.4rem 0;
}
.add-user-page .add-form-row,
.add-user-page .add-form-row-2,
.add-user-page .add-form-row-3 {
    gap: 0.85rem;
}
.add-user-page .add-form-column .add-form-section .form-group {
    margin-bottom: 0.6rem;
}
.add-user-page .add-form-column .add-form-section .form-group:last-child {
    margin-bottom: 0;
}
.add-user-page .add-form-column .add-form-section:last-child {
    margin-bottom: 0;
}
.add-user-page .add-form-column .add-form-section .field-error {
    min-height: 1.25rem;
    font-size: 0.9375rem;
    margin-top: 0.25rem;
}
.add-user-page .add-form-groups-list {
    max-height: 8rem;
}
.add-user-page .add-form-hint {
    margin-top: 0.35rem;
    font-size: 0.9375rem;
}

/* Add User: mobile combo (country code + 10 digits) – same as Create Candidate */
/* Allow country-code dropdown to overflow (type-and-select) */
.add-user-page .add-form-column {
    overflow: visible;
}

/* Mobile field: same as Primary Mobile * on Add New Candidate (create-candidate-page) – country code not stuck, enough space for value */
.form-has-mobile-field-candidate-style .form-group:has(.input-combined.mobile-combined-row) {
    min-width: 280px;
    overflow: visible;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 260px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fcfcfd;
    border-radius: 8px;
    overflow: visible;
    min-height: 2.75rem;
    box-sizing: border-box;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row:focus-within {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color, #0066cc);
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.35rem;
    padding: 0 0.5rem 0 0.35rem;
    border: none;
    background: transparent;
    border-radius: 7px;
    overflow: visible;
}
/* Country wrap: minimal space after +91, dial + x */
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .select-search-country-wrap {
    flex: 0 0 auto;
    width: 4rem;
    min-width: 3.75rem;
    max-width: 4rem;
    border: none;
    background: transparent;
    border-radius: 7px 0 0 7px;
    overflow: visible;
    position: relative;
    z-index: 1;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .select-search-country-wrap .select-search-input {
    padding: 0.6rem 0.35rem 0.6rem 0.5rem;
    min-width: 0;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 1.0625rem;
    font-weight: normal;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: inherit;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .select-search-country-wrap .select-search-dropdown {
    min-width: 220px;
    max-height: 280px;
    z-index: 500;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    padding: 0;
    overflow-y: auto;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .select-search-country-wrap .select-search-dropdown .select-search-option {
    padding: 0.35rem 0.75rem;
    margin: 0;
}
/* Native select (before JS enhancement) */
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .mobile-country-select {
    flex: 0 0 auto;
    width: 4rem;
    min-width: 3.75rem;
    max-width: 4rem;
    border-radius: 7px 0 0 7px;
    padding: 0.6rem 0.35rem;
    font-size: 1.0625rem;
    font-weight: normal;
    font-family: inherit;
}
/* Number input: same font and height as other fields */
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-number-input {
    flex: 1 1 0;
    min-width: 9rem;
    border-radius: 0 7px 7px 0;
    padding: 0.6rem 0.85rem 0.6rem 0.6rem;
    border: none;
    background: transparent;
    font-size: 1.0625rem;
    font-weight: normal;
    font-family: inherit;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row .mobile-number-input:focus {
    outline: none;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) .mobile-number-input,
.form-has-mobile-field-candidate-style .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) .select-search-input {
    background: transparent;
}

/* Add User: standard form UI – same as Create Candidate (8px radius, borders, filled state) */
.add-user-page.create-candidate-style-form .add-form-wrap .form-group input:not([type="checkbox"]):not([type="radio"]),
.add-user-page.create-candidate-style-form .add-form-wrap .form-group select,
.add-user-page.create-candidate-style-form .add-form-wrap .form-group textarea {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1.0625rem;
    font-family: inherit;
    background: #fff;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    padding-right: 2.25rem;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group input:focus,
.add-user-page.create-candidate-style-form .add-form-wrap .form-group select:focus,
.add-user-page.create-candidate-style-form .add-form-wrap .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    background: #fff;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .select-search-wrap,
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .select-search-input {
    border-radius: 8px;
    border-color: #e2e8f0;
    background: #fff;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .select-search-wrap:not(.select-search-has-value) .select-search-input {
    background: transparent;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .select-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    background: #fff;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group input.has-value:not([type="checkbox"]):not([type="radio"]),
.add-user-page.create-candidate-style-form .add-form-wrap .form-group textarea.has-value {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .select-search-wrap.select-search-has-value .select-search-input {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row {
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 8px;
    overflow: visible;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row:focus-within {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color, #0066cc);
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol {
    border-radius: 7px;
    background: transparent;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .select-search-country-wrap {
    border-radius: 7px 0 0 7px;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row .mobile-number-input {
    border-radius: 0 7px 7px 0;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) .mobile-number-input,
.add-user-page.create-candidate-style-form .add-form-wrap .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) .select-search-input {
    background: transparent;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group > label:first-child:not(.checkbox-label) {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #334155;
}
.add-user-page.create-candidate-style-form .add-form-wrap .form-group {
    overflow: visible;
}

/* Profile under Account: full name + mobile one row; email full width below */
.add-user-page .add-form-section-profile {
    padding-bottom: 2rem;
}
.add-user-page .add-form-section-profile .add-form-section-desc {
    margin-bottom: 0.4rem;
}
.add-user-page .add-form-profile-row-name-mobile {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    margin-bottom: 0.2rem;
}
.add-user-page .add-form-profile-row-name-mobile > .form-group {
    margin-bottom: 0;
    min-width: 0;
}
/* Tighter spacing from name/mobile row to Email below */
.add-user-page .add-form-section-profile .add-form-profile-row-name-mobile + .form-group {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.add-user-page .add-form-section-profile .add-form-profile-row-name-mobile + .form-group > label:first-child {
    margin-bottom: 0.28rem;
}
.form-has-mobile-field-candidate-style .add-user-page .add-form-profile-row-name-mobile .form-group:has(.input-combined.mobile-combined-row) {
    min-width: 0;
}
.form-has-mobile-field-candidate-style .add-user-page .add-form-profile-row-name-mobile .mobile-number-input {
    min-width: 8rem;
}
@media (max-width: 640px) {
    .add-user-page .add-form-profile-row-name-mobile {
        grid-template-columns: 1fr;
    }
}
/* Buttons at bottom of page – clearly visible */
.add-user-page .add-form-actions {
    flex-shrink: 0;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem;
    margin-top: auto;
    border-top: 2px solid var(--border-color, #e2e8f0);
    background: #f1f5f9;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
}
.add-user-page .add-form-actions .btn {
    min-width: 5rem;
}

/* Add User: x to clear in all fields */
.add-user-page .input-with-clear {
    position: relative;
    display: block;
    width: 100%;
}
.add-user-page .input-with-clear > input {
    padding-right: 2.25rem;
    box-sizing: border-box;
}
.add-user-page .input-with-clear-password > input {
    padding-right: 4.5rem;
}
.add-user-page .input-password-toggle {
    position: absolute;
    right: 2.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}
.add-user-page .input-password-toggle:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.add-user-page .input-password-toggle .input-password-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.add-user-page .input-password-toggle .input-password-toggle-icon[hidden] {
    display: none;
}
.add-user-page .input-with-clear-select select {
    padding-right: 2.25rem;
    box-sizing: border-box;
}
.add-user-page .input-with-clear .input-clear-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #888;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}
.add-user-page .input-with-clear .input-clear-btn.visible {
    display: flex;
}
.add-user-page .input-with-clear .input-clear-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.add-user-page .input-with-clear:has(.input-combined.mobile-combined-row) .input-combined.mobile-combined-row {
    padding-right: 2.25rem;
    box-sizing: border-box;
}
/* Add User: country clear (x) always clickable and on top */
.add-user-page .select-search-country-wrap {
    overflow: visible;
}
.add-user-page .select-search-country-wrap .select-search-clear {
    z-index: 10;
    pointer-events: auto;
}
/* Add User: same font as rest of form for country + mobile number */
.add-user-page .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .select-search-country-wrap .select-search-input,
.add-user-page .form-group .input-combined.mobile-combined-row .mobile-number-input {
    font-size: 1.0625rem;
    font-family: inherit;
    font-weight: normal;
}

@media (max-width: 900px) {
    .add-form-columns { flex-direction: column; }
    .add-form-column--left,
    .add-form-column--right { max-width: none; }
    .add-user-page { height: auto; max-height: none; overflow: visible; }
}

.open-pool-card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.open-pool-card .card-body { padding: 1.15rem 1.5rem; }
/* Application Progress Status add/edit: two columns, dropdowns not clipped */
.application-status-edit-card.open-pool-card { overflow: visible; }
.application-status-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 2rem;
    align-items: start;
}
@media (max-width: 768px) {
    .application-status-form-grid { grid-template-columns: 1fr; }
}
.application-status-form-col .form-group:last-child { margin-bottom: 0; }
.application-status-form-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.open-pool-filters {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.35rem;
}
.open-pool-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.75rem;
    background: #f8fafc;
    border-radius: var(--radius);
    border: 1px solid #e2e8f0;
}

/* Jobs page: search input and Filters button on same row, hint below */
.jobs-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.jobs-search-row .open-pool-search-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.4rem;
}
.jobs-search-row .open-pool-search-input-wrap {
    height: 2.75rem;
    grid-row: 1;
}
.jobs-search-row .open-pool-search-input-wrap .open-pool-search-input {
    height: 2.75rem;
    border-radius: 10px;
    font-size: 0.9375rem;
}
.jobs-search-row .open-pool-search-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
    grid-row: 2;
}
.jobs-search-row .jobs-filter-btn {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 5.5rem;
    height: 2.75rem;
    min-height: 2.75rem;
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.jobs-search-row .jobs-filter-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
}

.open-pool-search-wrap { flex: 1; min-width: 0; margin-bottom: 0; }

/* Reusable: Powerful search – yellow highlight for in-page match */
.powerful-search-highlight {
    background-color: #fef08a;
    color: inherit;
    padding: 0.05em 0.1em;
    border-radius: 2px;
}

/* Reusable: Modern filters – dropdown overflows; filled state + X clear */
.reusable-modern-filter-wrap { overflow: visible !important; }
.reusable-modern-multiselect-inner { overflow: visible !important; }
.reusable-modern-select-box {
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    background: #fcfcfd;
    border-radius: 8px;
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1f);
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.reusable-modern-select-box:hover { border-color: #cbd5e1; }
.reusable-modern-select-box.has-value {
    background: #eff6ff;
    border-color: #93c5fd;
}
.reusable-modern-select-box-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reusable-modern-filter-clear {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: rgba(0,0,0,0.08);
    border-radius: 4px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.reusable-modern-filter-clear:hover { background: rgba(0,0,0,0.12); color: #0f172a; }
.reusable-modern-dropdown {
    position: absolute;
    width: 100%;
    top: 100%;
    left: 0;
    margin-top: 2px;
    border: 1px solid #e2e8f0;
    background: #fff;
    z-index: 350;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.reusable-modern-dropdown .search-box { width: calc(100% - 10px); margin: 5px; padding: 0.5rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 0.875rem; box-sizing: border-box; }
.reusable-modern-dropdown .search-box:focus { outline: none; border-color: var(--primary-color, #2563eb); }
.reusable-modern-dropdown .options { max-height: 200px; overflow-y: auto; padding: 0.25rem 0; }
.reusable-modern-dropdown .option { padding: 0.5rem 0.85rem; cursor: pointer; font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.reusable-modern-dropdown .option:hover { background-color: #f1f5f9; }
.reusable-modern-dropdown .option input[type="checkbox"] { margin: 0; flex-shrink: 0; }

.open-pool-search-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 2.5rem;
    flex: 1;
    min-width: 0;
}
.open-pool-search-input-wrap .open-pool-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.5rem;
    padding: 0 0.85rem;
    padding-right: 2.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.9375rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    color: var(--text-primary);
}
.open-pool-search-input-wrap .open-pool-search-input::placeholder {
    color: #94a3b8;
}
.open-pool-search-input-wrap .open-pool-search-input:hover {
    border-color: #cbd5e1;
}
.open-pool-search-input-wrap .open-pool-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
    background: #fff;
}
.open-pool-search-input-wrap .open-pool-search-icon {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    transition: color 0.2s ease;
}
.open-pool-search-input-wrap .open-pool-search-input:focus ~ .open-pool-search-icon {
    color: var(--primary-color);
}
.open-pool-search-input-wrap .open-pool-search-icon svg { display: block; }
/* Clear (x) for all open-pool search inputs – show only when has text */
.open-pool-search-input-wrap .open-pool-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.open-pool-search-input-wrap.open-pool-search-has-text .open-pool-search-clear,
.jobs-page .open-pool-search-input-wrap.jobs-search-has-text .jobs-search-clear {
    display: flex;
}
.open-pool-search-input-wrap .open-pool-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.open-pool-search-input-wrap .open-pool-search-clear svg { display: block; }
.open-pool-search-hint {
    margin: 0.25rem 0 0 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
}
.open-pool-search-hint code { font-size: 0.85em; padding: 0.15em 0.4em; background: #f1f5f9; border-radius: 4px; color: #475569; }
.open-pool-toggle-filters {
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0 1rem;
    border-radius: 6px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    align-self: center;
}
.open-pool-filter-panel {
    margin-top: 0.25rem;
    padding: 0.5rem 0.85rem;
    background: #fafbfc;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}
.open-pool-filter-panel.hide { display: none !important; }
.open-pool-filters-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    align-items: end;
}
.open-pool-filter-panel .open-pool-filters-row .form-group {
    margin-bottom: 0;
}
.open-pool-filter-panel .open-pool-filters-row .form-group label {
    margin-bottom: 0.15rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.open-pool-filter-panel .open-pool-filters-row .select-search,
.open-pool-filter-panel .open-pool-filters-row input[type="number"] {
    min-height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}
.open-pool-exp-range .open-pool-exp-inputs {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.open-pool-exp-inputs input[type="number"] { width: 100%; min-width: 0; }
.open-pool-filters-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
}
.open-pool-filters-actions .btn-sm {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
}

/* Candidates list (/candidates): filter dropdowns overflow freely from section and container */
.candidates-search-card.open-pool-card {
    overflow: visible;
}
.candidates-search-card .card-body {
    overflow: visible;
}
.candidates-search-card .open-pool-filters,
.candidates-search-card .candidates-search-section,
.candidates-search-card .open-pool-filter-panel,
.candidates-search-card .open-pool-filters-row,
.candidates-search-card .open-pool-filter-panel .form-group {
    overflow: visible;
}
.candidates-search-card .open-pool-filter-panel .select-search-wrap {
    overflow: visible;
    position: relative;
}
.candidates-search-card .open-pool-filter-panel .select-search-dropdown {
    z-index: 1050;
}

.open-pool-page .table-responsive {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}
.open-pool-page #open-pool-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}
.open-pool-page #open-pool-table thead th {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.open-pool-page #open-pool-table tbody tr { border-bottom: 1px solid #eef2f7; }
.open-pool-page #open-pool-table tbody tr:hover { background: #f8fafc; }
.open-pool-page #open-pool-table tbody td { padding: 0.875rem 1rem; font-size: 0.9375rem; }
.open-pool-page #open-pool-table .link-strong { font-weight: 600; color: var(--primary-color); }
.open-pool-page #open-pool-table .badge { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; }
.open-pool-page .empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-secondary); }

/* Candidates page & Fev Candidates: same table/empty-state as Open Pool */
.candidates-page .table-responsive,
.fev-candidates-page .table-responsive {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow-x: auto;
}
.candidates-page #candidates-table thead,
.fev-candidates-page #candidates-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}
.candidates-page #candidates-table thead th,
.fev-candidates-page #candidates-table thead th {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.candidates-page #candidates-table tbody tr,
.fev-candidates-page #candidates-table tbody tr { border-bottom: 1px solid #eef2f7; }
.candidates-page #candidates-table tbody tr:hover,
.fev-candidates-page #candidates-table tbody tr:hover { background: #f8fafc; }
.candidates-page #candidates-table tbody td,
.fev-candidates-page #candidates-table tbody td { padding: 0.875rem 1rem; font-size: 0.9375rem; }
.candidates-page #candidates-table .link-strong,
.fev-candidates-page #candidates-table .link-strong { font-weight: 600; color: var(--primary-color); }
.candidates-page #candidates-table .badge,
.fev-candidates-page #candidates-table .badge { font-size: 0.75rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 999px; }
.candidates-page .empty-state,
.fev-candidates-page .empty-state { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-secondary); }

/* Candidates list: modern empty state when no results */
.candidates-page .candidates-empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    margin: 0;
}
.candidates-page .candidates-empty-state-inner {
    max-width: 22rem;
    margin: 0 auto;
}
.candidates-page .candidates-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1rem;
    color: var(--text-secondary, #64748b);
    opacity: 0.9;
}
.candidates-page .candidates-empty-state-icon svg {
    display: block;
}
.candidates-page .candidates-empty-state-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.candidates-page .candidates-empty-state-msg {
    margin: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-secondary, #64748b);
}
.candidates-page .candidates-empty-state-btn {
    margin-top: 0;
}

/* Candidates page: modern layout – search + buttons one row, clear sections */
.candidates-page .candidates-list-card .card-body {
    padding: 1.5rem 1.75rem;
    overflow: visible;
}
.candidates-page .candidates-list-card {
    overflow: visible;
}
.candidates-page .candidates-filters-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}
.candidates-page .candidates-section {
    margin-bottom: 1.25rem;
}
.candidates-page .candidates-section-list {
    margin-top: 1rem;
    margin-bottom: 0;
}
/* Candidates grid (Hot Jobs–style card list) */
.candidates-page .candidates-grid-sort-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0;
    font-size: 0.8125rem;
}
.candidates-page .candidates-grid-sort-label {
    color: #64748b;
    font-weight: 500;
}
.candidates-page .candidates-grid-sort-btn {
    background: transparent;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.candidates-page .candidates-grid-sort-btn:hover {
    border-color: #bae6fd;
    color: #0284c7;
}
.candidates-page .candidates-grid-sort-btn.active {
    background: #f0f9ff;
    border-color: #7dd3fc;
    color: #0369a1;
    font-weight: 600;
}
.candidates-page .candidates-grid-sort-bar a.candidates-grid-sort-btn {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.candidates-page .candidates-grid-card,
.standup-page .standup-result-panel .candidates-grid-card,
.standup-page .standup-expand-group-section .candidates-grid-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    overflow: visible;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.candidates-page .candidates-grid-list,
.standup-page .standup-result-panel .candidates-grid-list,
.standup-page .standup-expand-group-section .candidates-grid-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    overflow: visible;
}
.candidates-page .candidates-grid-item,
.standup-page .standup-result-panel .candidates-grid-item,
.standup-page .standup-expand-group-section .candidates-grid-item {
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
/* Default left border/background only when no color class (fallback) */
.candidates-page .candidates-grid-item:not([class*="candidates-grid-item-color-"]),
.standup-page .standup-result-panel .candidates-grid-item:not([class*="candidates-grid-item-color-"]),
.standup-page .standup-expand-group-section .candidates-grid-item:not([class*="candidates-grid-item-color-"]) {
    border-left: 5px solid #7dd3fc;
    background: #fff;
}
.candidates-page .candidates-grid-item:hover,
.standup-page .standup-result-panel .candidates-grid-item:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}
/* Candidate cards: 6 distinct colors from modern UI palette – override .card and base grid item (inline gradients for reliability) */
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-0,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-0 { border-left: 5px solid #0066cc; background: linear-gradient(135deg, #e6f0fa 0%, #ffffff 45%, #cce0f5 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-0:hover,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-0:hover { border-left-color: #0052a3; border-color: rgba(0, 102, 204, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 102, 204, 0.15); background: linear-gradient(135deg, #cce0f5 0%, #e6f0fa 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-1,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-1 { border-left: 5px solid #5a9b8e; background: linear-gradient(135deg, #e8f4f2 0%, #ffffff 45%, #d1eae5 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-1:hover,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-1:hover { border-left-color: #4a8579; border-color: rgba(90, 155, 142, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(90, 155, 142, 0.15); background: linear-gradient(135deg, #d1eae5 0%, #e8f4f2 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-2,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-2 { border-left: 5px solid #7b68a8; background: linear-gradient(135deg, #efeef4 0%, #ffffff 45%, #e0dce8 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-2:hover,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-2:hover { border-left-color: #6a5a92; border-color: rgba(123, 104, 168, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(123, 104, 168, 0.15); background: linear-gradient(135deg, #e0dce8 0%, #efeef4 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-3,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-3 { border-left: 5px solid #e67e00; background: linear-gradient(135deg, #fdf5eb 0%, #ffffff 45%, #fae8d0 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-3:hover,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-3:hover { border-left-color: #c26900; border-color: rgba(230, 126, 0, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(230, 126, 0, 0.15); background: linear-gradient(135deg, #fae8d0 0%, #fdf5eb 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-4,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-4 { border-left: 5px solid #00854d; background: linear-gradient(135deg, #e6f5ee 0%, #ffffff 45%, #cceadd 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-4:hover,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-4:hover { border-left-color: #006b3d; border-color: rgba(0, 133, 77, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 133, 77, 0.15); background: linear-gradient(135deg, #cceadd 0%, #e6f5ee 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-5,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-5 { border-left: 5px solid #b87a8a; background: linear-gradient(135deg, #f9f0f2 0%, #ffffff 45%, #f0e0e5 100%); }
.candidates-page .card.candidates-grid-item.candidates-grid-item-color-5:hover,
.standup-page .standup-result-panel .card.candidates-grid-item.candidates-grid-item-color-5:hover { border-left-color: #9d6674; border-color: rgba(184, 122, 138, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(184, 122, 138, 0.15); background: linear-gradient(135deg, #f0e0e5 0%, #f9f0f2 100%); }
.candidates-page .candidates-grid-item.candidates-grid-item-color-0 .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item.candidates-grid-item-color-0 .candidates-grid-item-jobs { background: linear-gradient(180deg, #e6f0fa 0%, #cce0f5 100%); border-top-color: rgba(0, 102, 204, 0.4); }
.candidates-page .candidates-grid-item.candidates-grid-item-color-1 .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item.candidates-grid-item-color-1 .candidates-grid-item-jobs { background: linear-gradient(180deg, #e8f4f2 0%, #d1eae5 100%); border-top-color: rgba(90, 155, 142, 0.4); }
.candidates-page .candidates-grid-item.candidates-grid-item-color-2 .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item.candidates-grid-item-color-2 .candidates-grid-item-jobs { background: linear-gradient(180deg, #efeef4 0%, #e0dce8 100%); border-top-color: rgba(123, 104, 168, 0.4); }
.candidates-page .candidates-grid-item.candidates-grid-item-color-3 .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item.candidates-grid-item-color-3 .candidates-grid-item-jobs { background: linear-gradient(180deg, #fdf5eb 0%, #fae8d0 100%); border-top-color: rgba(230, 126, 0, 0.4); }
.candidates-page .candidates-grid-item.candidates-grid-item-color-4 .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item.candidates-grid-item-color-4 .candidates-grid-item-jobs { background: linear-gradient(180deg, #e6f5ee 0%, #cceadd 100%); border-top-color: rgba(0, 133, 77, 0.4); }
.candidates-page .candidates-grid-item.candidates-grid-item-color-5 .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item.candidates-grid-item-color-5 .candidates-grid-item-jobs { background: linear-gradient(180deg, #f9f0f2 0%, #f0e0e5 100%); border-top-color: rgba(184, 122, 138, 0.4); }
.badge.bg-success,
.candidates-grid-fitment-badge {
    background: var(--success-color, #00854d);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}
.candidates-page .candidates-grid-item-row1,
.standup-page .standup-result-panel .candidates-grid-item-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem 0.6rem;
    flex-wrap: wrap;
}
.candidates-page .candidates-grid-item-title-wrap,
.standup-page .standup-result-panel .candidates-grid-item-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.candidates-page .candidates-grid-item-title,
.standup-page .standup-result-panel .candidates-grid-item-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.candidates-page .candidates-grid-item-title a,
.standup-page .standup-result-panel .candidates-grid-item-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s;
}
.candidates-page .candidates-grid-item-title a:hover,
.standup-page .standup-result-panel .candidates-grid-item-title a:hover {
    color: #0284c7;
}
.candidates-page .candidates-grid-fev-icon,
.standup-page .candidates-grid-fev-icon {
    display: inline-block;
    margin-right: 0.35rem;
    vertical-align: middle;
    color: #eab308;
}
.candidates-page .candidates-grid-item-view,
.standup-page .standup-result-panel .candidates-grid-item-view {
    flex-shrink: 0;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: #fff;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
}
.candidates-page .candidates-grid-item-view:hover,
.standup-page .standup-result-panel .candidates-grid-item-view:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
    color: #fff;
}
.candidates-page .candidates-row1-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.candidates-page .candidates-loop-bubble {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: none;
}
.candidates-page .candidates-loop-internal {
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%);
    color: #6d28d9;
    box-shadow: 0 1px 3px rgba(109, 40, 217, 0.15);
}
.candidates-page .candidates-loop-customer {
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.15);
}
.candidates-page .candidates-loop-hr {
    background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    box-shadow: 0 1px 3px rgba(4, 120, 87, 0.15);
}
.candidates-page .candidates-loop-added {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    box-shadow: 0 1px 2px rgba(71, 85, 105, 0.1);
}
.candidates-page .candidates-loop-rejected {
    gap: 0.28rem;
    background: linear-gradient(145deg, #fee2e2 0%, #fecaca 100%);
    color: #b91c1c;
    box-shadow: 0 1px 3px rgba(185, 28, 28, 0.14);
}
.candidates-page .candidates-loop-rejected-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 999px;
    background: #b91c1c;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
}
.standup-page .standup-result-panel .standup-row1-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.standup-page .standup-result-panel .standup-loop-bubble {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: none;
}
.standup-page .standup-result-panel .standup-loop-internal {
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%);
    color: #6d28d9;
    box-shadow: 0 1px 3px rgba(109, 40, 217, 0.15);
}
.standup-page .standup-result-panel .standup-loop-customer {
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.15);
}
.standup-page .standup-result-panel .standup-loop-hr {
    background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    box-shadow: 0 1px 3px rgba(4, 120, 87, 0.15);
}
.standup-page .standup-result-panel .standup-loop-added {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    box-shadow: 0 1px 2px rgba(71, 85, 105, 0.1);
}
.candidates-page .candidates-grid-item-row2,
.standup-page .standup-result-panel .candidates-grid-item-row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0;
    padding: 0 1.4rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}
.candidates-page .candidates-grid-meta-sep,
.standup-page .standup-result-panel .candidates-grid-meta-sep {
    margin: 0 0.45rem;
    color: #cbd5e1;
    font-weight: 300;
    user-select: none;
}
.candidates-page .candidates-grid-meta-item,
.standup-page .standup-result-panel .candidates-grid-meta-item {
    color: #334155;
}
.candidates-page .candidates-grid-meta-link,
.standup-page .standup-result-panel .candidates-grid-meta-link {
    color: #0369a1;
    text-decoration: none;
}
.candidates-page .candidates-grid-meta-link:hover,
.standup-page .standup-result-panel .candidates-grid-meta-link:hover {
    color: #0284c7;
    text-decoration: underline;
}
.candidates-page .candidates-grid-item-fev-note,
.standup-page .standup-result-panel .candidates-grid-item-fev-note {
    margin: 0.5rem 1.4rem 0.6rem;
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #1e293b;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(251, 191, 36, 0.2);
}
.candidates-page .candidates-grid-item-fev-note-badge,
.standup-page .standup-result-panel .candidates-grid-item-fev-note-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}
.candidates-page .candidates-grid-item-fev-note-icon,
.standup-page .standup-result-panel .candidates-grid-item-fev-note-icon {
    color: #d97706;
    flex-shrink: 0;
}
.candidates-page .candidates-grid-item-fev-note-label,
.standup-page .standup-result-panel .candidates-grid-item-fev-note-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b45309;
}
.candidates-page .candidates-grid-item-fev-note-text,
.standup-page .standup-result-panel .candidates-grid-item-fev-note-text {
    margin: 0;
    font-size: 0.875rem;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}
.candidates-page .candidates-grid-meta-label,
.standup-page .standup-result-panel .candidates-grid-meta-label {
    color: #64748b;
    margin-right: 0.25rem;
    font-size: 0.7875rem;
}
.candidates-page .candidates-grid-item-row3,
.standup-page .standup-result-panel .candidates-grid-item-row3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem 0.9rem;
    background: linear-gradient(180deg, transparent 0%, #f8fcff 100%);
    font-size: 0.8125rem;
    line-height: 1.45;
    border-top: 1px solid #e2e8f0;
}
.candidates-page .candidates-grid-item-row3 .candidate-row-extra-line,
.standup-page .standup-result-panel .candidates-grid-item-row3 .candidate-row-extra-line {
    flex-wrap: wrap;
    gap: 0.25rem 0;
    width: 100%;
}
.candidates-page .candidates-grid-item-row3 .candidate-row-extra-right,
.standup-page .standup-result-panel .candidates-grid-item-row3 .candidate-row-extra-right {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.candidates-page .candidates-grid-item-row3 .candidate-row-extra-cand-id,
.standup-page .standup-result-panel .candidates-grid-item-row3 .candidate-row-extra-cand-id {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}
.candidates-page .candidates-grid-item-row3 .candidate-row-extra-meta-secondary,
.standup-page .standup-result-panel .candidates-grid-item-row3 .candidate-row-extra-meta-secondary {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 500;
}
.candidates-page .candidates-grid-item-row3 .candidate-row-extra-added-by,
.standup-page .standup-result-panel .candidates-grid-item-row3 .candidate-row-extra-added-by {
    margin-left: 0;
    flex-shrink: 0;
}
.candidates-page .candidates-grid-item-row3 .candidate-row-extra-label,
.standup-page .standup-result-panel .candidates-grid-item-row3 .candidate-row-extra-label {
    color: #64748b;
}
.candidates-page .candidates-grid-item-row3 .candidate-row-extra-location,
.standup-page .standup-result-panel .candidates-grid-item-row3 .candidate-row-extra-location {
    color: #0369a1;
    font-weight: 500;
}
/* Jobs section: one row per job below skills */
.candidates-page .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item-jobs {
    padding: 0.75rem 1.4rem 1.1rem;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-top: 1px solid #bae6fd;
    border-radius: 0;
}
/* Initial notes (at upload) – last row of card (open-pool only); when present, this gets the card bottom radius */
.candidates-page .candidates-grid-item-initial-notes,
.standup-page .standup-result-panel .candidates-grid-item-initial-notes {
    padding: 0.75rem 1.25rem 1rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #faf5ff 0%, #f5f3ff 100%);
    border-radius: 0 0 14px 14px;
    border-left: 3px solid #8b5cf6;
    margin-left: 0;
}
.candidates-page .candidates-grid-item-initial-notes .candidates-grid-initial-notes-header,
.standup-page .standup-result-panel .candidates-grid-item-initial-notes .candidates-grid-initial-notes-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.candidates-page .candidates-grid-item-initial-notes .candidates-grid-initial-notes-icon,
.standup-page .standup-result-panel .candidates-grid-item-initial-notes .candidates-grid-initial-notes-icon {
    color: #7c3aed;
    flex-shrink: 0;
}
.candidates-page .candidates-grid-item-initial-notes .candidates-grid-initial-notes-label,
.standup-page .standup-result-panel .candidates-grid-item-initial-notes .candidates-grid-initial-notes-label {
    color: #6d28d9;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.candidates-page .candidates-grid-item-initial-notes .candidates-grid-initial-notes-text,
.standup-page .standup-result-panel .candidates-grid-item-initial-notes .candidates-grid-initial-notes-text {
    margin: 0;
    color: #334155;
    font-size: 0.8125rem;
}
.candidates-page .candidates-grid-item-initial-notes .candidates-grid-initial-notes-text.candidates-grid-initial-notes-empty,
.standup-page .standup-result-panel .candidates-grid-item-initial-notes .candidates-grid-initial-notes-text.candidates-grid-initial-notes-empty {
    color: #94a3b8;
    font-style: italic;
}
.candidates-page .candidates-grid-item-jobs:last-child,
.standup-page .standup-result-panel .candidates-grid-item-jobs:last-child {
    border-radius: 0 0 14px 14px;
}
.candidates-page .candidates-grid-job-row,
.standup-page .standup-result-panel .candidates-grid-job-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    overflow: visible;
    min-height: 0;
}
.candidates-page .candidates-grid-job-row .candidates-grid-job-title,
.candidates-page .candidates-grid-job-row .candidates-grid-job-title-link {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.candidates-page .candidates-grid-job-row .candidates-grid-job-title-link {
    color: #0c4a6e;
    text-decoration: none;
    font-weight: 600;
}
.candidates-page .candidates-grid-job-row .candidates-grid-job-title-link:hover {
    color: #0284c7;
    text-decoration: underline;
}
.candidates-page .candidates-grid-job-row .candidates-grid-job-meta {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.candidates-page .candidates-grid-job-row:first-child,
.standup-page .standup-result-panel .candidates-grid-job-row:first-child {
    padding-top: 0;
}
.candidates-page .candidates-grid-job-row:last-child,
.standup-page .standup-result-panel .candidates-grid-job-row:last-child {
    padding-bottom: 0;
}
.candidates-page .candidates-grid-item-jobs {
    padding: 0.5rem 1.4rem 0.75rem;
}
.candidates-page .candidates-grid-job-row + .candidates-grid-job-row,
.standup-page .standup-result-panel .candidates-grid-job-row + .candidates-grid-job-row {
    border-top: 1px solid rgba(14, 165, 233, 0.2);
}
.candidates-page .candidates-grid-job-title,
.standup-page .standup-result-panel .candidates-grid-job-title {
    font-weight: 600;
    color: #0c4a6e;
}
.candidates-page .candidates-grid-job-meta,
.standup-page .standup-result-panel .candidates-grid-job-meta {
    color: #475569;
    font-weight: 500;
}
.candidates-page .candidates-grid-job-status-bubble,
.standup-page .standup-result-panel .candidates-grid-job-status-bubble {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 0.6rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.candidates-page .candidates-grid-job-status-bubble.badge-active,
.standup-page .standup-result-panel .candidates-grid-job-status-bubble.badge-active { background: #dcfce7; color: #15803d; border-color: #86efac; }
.candidates-page .candidates-grid-job-status-bubble.badge-hired,
.standup-page .standup-result-panel .candidates-grid-job-status-bubble.badge-hired { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }
.candidates-page .candidates-grid-job-status-bubble.badge-hold,
.standup-page .standup-result-panel .candidates-grid-job-status-bubble.badge-hold { background: #fef9c3; color: #b45309; border-color: #fde047; }
.candidates-page .candidates-grid-job-status-bubble.badge-closed,
.standup-page .standup-result-panel .candidates-grid-job-status-bubble.badge-closed { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }

/* Bubbles on the right of each job row (Notes + Interview feedback) */
.candidates-page .candidates-grid-job-row-bubbles,
.standup-page .candidates-grid-job-row-bubbles {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-left: auto;
    padding: 0 0 0 0.5rem;
    flex-shrink: 0;
}
.candidates-page .candidates-grid-job-row-bubbles .candidates-grid-bubble,
.standup-page .candidates-grid-job-row-bubbles .candidates-grid-bubble {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
}
.candidates-page .candidates-grid-job-row-bubbles .candidates-grid-bubble-icon svg,
.standup-page .candidates-grid-job-row-bubbles .candidates-grid-bubble-icon svg {
    width: 12px;
    height: 12px;
}
/* Legacy card-level bubbles block (if used elsewhere) */
.candidates-page .candidates-grid-card-bubbles {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
    margin-left: auto;
    padding: 0.5rem 1.4rem 0.6rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    min-width: 0;
}
.candidates-page .candidates-grid-bubble-wrap {
    position: relative;
    display: inline-flex;
    overflow: visible;
    flex-shrink: 0;
}
.candidates-page .candidates-grid-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    cursor: default;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.candidates-page .candidates-grid-bubble-wrap:hover .candidates-grid-bubble {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}
.candidates-page .candidates-grid-bubble-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.candidates-page .candidates-grid-bubble-icon svg { display: block; }
.candidates-page .candidates-grid-bubble-label { white-space: nowrap; }

/* Popup tooltip: freeflow above all content (above "Candidates" title, etc.) */
.candidates-page .candidates-grid-popup-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    left: auto;
    transform: translateY(4px);
    margin-bottom: 0.5rem;
    z-index: 9999;
    min-width: 380px;
    max-width: 520px;
    max-height: 400px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s, opacity 0.15s, transform 0.15s;
    pointer-events: none;
    isolation: isolate;
}
.candidates-page .candidates-grid-bubble-wrap.popup-tooltip-below .candidates-grid-popup-tooltip {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 0.5rem;
    transform: translateY(-4px);
}
.candidates-page .candidates-grid-bubble-wrap.popup-tooltip-visible .candidates-grid-popup-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.candidates-page .candidates-grid-bubble-wrap.popup-tooltip-below.popup-tooltip-visible .candidates-grid-popup-tooltip {
    transform: translateY(0);
}
/* Standup Review: same bubble + popup tooltip as candidates page */
.standup-page .candidates-grid-bubble-wrap {
    position: relative;
    display: inline-flex;
    overflow: visible;
    flex-shrink: 0;
}
.standup-page .candidates-grid-bubble-wrap .candidates-grid-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    cursor: default;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.standup-page .candidates-grid-bubble-wrap:hover .candidates-grid-bubble {
    background: #e0f2fe;
    border-color: #7dd3fc;
    color: #0369a1;
}
.standup-page .candidates-grid-popup-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    left: auto;
    transform: translateY(4px);
    margin-bottom: 0.5rem;
    z-index: 9999;
    min-width: 380px;
    max-width: 520px;
    max-height: 400px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s, opacity 0.15s, transform 0.15s;
    pointer-events: none;
    isolation: isolate;
}
.standup-page .candidates-grid-bubble-wrap.popup-tooltip-below .candidates-grid-popup-tooltip {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 0.5rem;
    transform: translateY(-4px);
}
.standup-page .candidates-grid-bubble-wrap.popup-tooltip-visible .candidates-grid-popup-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.standup-page .candidates-grid-bubble-wrap.popup-tooltip-below.popup-tooltip-visible .candidates-grid-popup-tooltip {
    transform: translateY(0);
}
.standup-page .candidates-grid-popup-tooltip-inner {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #334155;
    text-align: left;
}
.standup-page .candidates-grid-popup-tooltip-title {
    display: block;
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}
.standup-page .candidates-grid-log-notes-list,
.standup-page .candidates-grid-feedback-list {
    overflow: auto;
    padding: 0.5rem 1rem 0.75rem;
}
.standup-page .candidates-grid-log-notes-entry,
.standup-page .candidates-grid-feedback-entry {
    padding: 0.4rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.standup-page .candidates-grid-log-notes-entry:last-child,
.standup-page .candidates-grid-feedback-entry:last-child {
    border-bottom: 0;
}
.standup-page .candidates-grid-log-notes-meta,
.standup-page .candidates-grid-feedback-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-bottom: 0.2rem;
}
.standup-page .candidates-grid-log-notes-date,
.standup-page .candidates-grid-feedback-date {
    font-size: 0.75rem;
    color: #64748b;
}
.standup-page .candidates-grid-feedback-interviewer {
    font-size: 0.75rem;
    color: #64748b;
}
.standup-page .candidates-grid-notes-empty,
.standup-page .candidates-grid-feedback-empty {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    color: #64748b;
}
.candidates-page .candidates-grid-popup-tooltip-inner {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #334155;
    text-align: left;
}
.candidates-page .candidates-grid-popup-tooltip-title {
    display: block;
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0;
    padding: 1rem 1.1rem 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px 10px 0 0;
}
.candidates-page .candidates-grid-feedback-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 320px;
    padding: 0.75rem 1.1rem 1rem;
    flex: 1;
    min-height: 0;
}
.candidates-page .candidates-grid-feedback-entry {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f1f5f9;
}
.candidates-page .candidates-grid-feedback-entry:last-child { padding-bottom: 0; border-bottom: none; }
.candidates-page .candidates-grid-feedback-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    color: #64748b;
}
.candidates-page .candidates-grid-feedback-meta strong { color: #334155; }
.candidates-page .candidates-grid-feedback-date { margin-left: auto; }
.candidates-page .candidates-grid-feedback-content { color: #334155; white-space: pre-wrap; word-break: break-word; }
.candidates-page .candidates-grid-feedback-empty,
.candidates-page .candidates-grid-notes-empty {
    margin: 0;
    padding: 0.75rem 1.1rem 1rem;
    color: #64748b;
    font-size: 0.8125rem;
}

.candidates-page .candidates-grid-job-notes-wrap,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
    overflow: visible;
}
.candidates-page .candidates-grid-job-notes-icon,
.standup-page .standup-result-panel .candidates-grid-job-notes-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    color: #64748b;
    cursor: default;
}
.candidates-page .candidates-grid-job-notes-wrap:hover .candidates-grid-job-notes-icon,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap:hover .candidates-grid-job-notes-icon {
    color: #0369a1;
}
.candidates-page .candidates-grid-job-notes-icon svg,
.standup-page .standup-result-panel .candidates-grid-job-notes-icon svg {
    display: block;
}
.candidates-page .candidates-grid-job-notes-tooltip,
.standup-page .standup-result-panel .candidates-grid-job-notes-tooltip {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 0.5rem;
    z-index: 1000;
    min-width: 420px;
    max-width: 560px;
    max-height: 400px;
    overflow: visible;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(4px);
    transition: visibility 0.15s, opacity 0.15s, transform 0.15s;
    pointer-events: none;
}
/* When not enough space above: show tooltip below so it stays in visible area */
.candidates-page .candidates-grid-job-notes-wrap.notes-tooltip-below .candidates-grid-job-notes-tooltip,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap.notes-tooltip-below .candidates-grid-job-notes-tooltip {
    bottom: auto;
    top: 100%;
    margin-bottom: 0;
    margin-top: 0.5rem;
    transform: translateY(-4px);
}
.candidates-page .candidates-grid-job-notes-wrap.notes-tooltip-below.notes-tooltip-visible .candidates-grid-job-notes-tooltip,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap.notes-tooltip-below.notes-tooltip-visible .candidates-grid-job-notes-tooltip {
    transform: translateY(0);
}
.candidates-page .candidates-grid-job-notes-wrap:hover .candidates-grid-job-notes-tooltip,
.candidates-page .candidates-grid-job-notes-wrap.notes-tooltip-visible .candidates-grid-job-notes-tooltip,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap:hover .candidates-grid-job-notes-tooltip,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap.notes-tooltip-visible .candidates-grid-job-notes-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.candidates-page .candidates-grid-job-notes-wrap.notes-tooltip-below:hover .candidates-grid-job-notes-tooltip,
.candidates-page .candidates-grid-job-notes-wrap.notes-tooltip-below.notes-tooltip-visible .candidates-grid-job-notes-tooltip,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap.notes-tooltip-below:hover .candidates-grid-job-notes-tooltip,
.standup-page .standup-result-panel .candidates-grid-job-notes-wrap.notes-tooltip-below.notes-tooltip-visible .candidates-grid-job-notes-tooltip {
    transform: translateY(0);
}
.candidates-page .candidates-grid-job-notes-tooltip-inner,
.standup-page .standup-result-panel .candidates-grid-job-notes-tooltip-inner {
    display: flex;
    flex-direction: column;
    max-height: 400px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #334155;
    text-align: left;
}
/* Header always visible when tooltip is shown (does not scroll away) */
.candidates-page .candidates-grid-notes-tooltip-title,
.standup-page .standup-result-panel .candidates-grid-notes-tooltip-title {
    display: block;
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0;
    padding: 1rem 1.1rem 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px 10px 0 0;
}
.candidates-page .candidates-grid-log-notes-list,
.standup-page .standup-result-panel .candidates-grid-log-notes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    max-height: 320px;
    padding: 0.75rem 1.1rem 1rem;
    flex: 1;
    min-height: 0;
}
.candidates-page .candidates-grid-log-notes-entry,
.standup-page .standup-result-panel .candidates-grid-log-notes-entry {
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #f1f5f9;
}
.candidates-page .candidates-grid-log-notes-entry:last-child,
.standup-page .standup-result-panel .candidates-grid-log-notes-entry:last-child {
    padding-bottom: 0;
    border-bottom: none;
}
.candidates-page .candidates-grid-log-notes-meta,
.standup-page .standup-result-panel .candidates-grid-log-notes-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}
.candidates-page .candidates-grid-log-notes-meta strong,
.standup-page .standup-result-panel .candidates-grid-log-notes-meta strong {
    font-size: 0.8125rem;
    color: #0f172a;
}
.candidates-page .candidates-grid-log-notes-date,
.standup-page .standup-result-panel .candidates-grid-log-notes-date {
    font-size: 0.75rem;
    color: #94a3b8;
}
.candidates-page .candidates-grid-log-notes-content,
.standup-page .standup-result-panel .candidates-grid-log-notes-content {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #334155;
    white-space: pre-wrap;
    word-break: break-word;
}
.candidates-page .candidates-grid-log-notes-content br,
.standup-page .standup-result-panel .candidates-grid-log-notes-content br {
    display: block;
    margin-top: 0.25em;
}
.candidates-page .candidates-grid-notes-empty,
.standup-page .standup-result-panel .candidates-grid-notes-empty {
    margin: 0;
    padding: 0.75rem 1.1rem 1rem;
    color: #94a3b8;
    font-size: 0.8125rem;
    flex-shrink: 0;
}
.candidates-page .candidates-grid-item-jobs,
.standup-page .standup-result-panel .candidates-grid-item-jobs {
    overflow: visible;
}
.candidates-page .candidates-grid-item,
.standup-page .standup-result-panel .candidates-grid-item {
    overflow: visible;
}
.candidates-page .candidates-grid-search-empty {
    padding: 2rem 1.5rem;
    margin-top: 0.5rem;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    text-align: center;
}
.candidates-page .candidates-grid-search-empty-inner {
    max-width: 20rem;
    margin: 0 auto;
}
.candidates-page .candidates-grid-search-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    margin-bottom: 0.75rem;
}
.candidates-page .candidates-grid-search-empty-icon svg {
    display: block;
}
.candidates-page .candidates-grid-search-empty-title {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #475569;
}
.candidates-page .candidates-grid-search-empty-msg {
    margin: 0;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.45;
}
/* Candidates page: two sections (Search & filters card, Candidates list card) */
.candidates-page .candidates-search-card {
    margin-bottom: 1.5rem;
}
.candidates-page .candidates-search-card .card-body {
    padding: 1rem 1.25rem;
}
.candidates-page .candidates-list-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.candidates-page .candidates-card-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.candidates-page .candidates-list-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.25rem 0.6rem;
    border-radius: 8px;
}
.candidates-page .candidates-section-search {
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 1rem 1.25rem;
    margin-bottom: 0;
}
/* Candidates Search & Filters: header with Reset and collapse (match jobs) */
.candidates-search-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0;
    cursor: pointer;
    user-select: none;
}
.candidates-search-section-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1f);
}
.candidates-search-section-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 6px;
    pointer-events: none;
}
.candidates-search-section-toggle .candidates-search-section-arrow {
    transition: transform 0.2s;
}
.candidates-search-section.collapsed {
    display: none;
}
.candidates-search-section-header.collapsed .candidates-search-section-arrow {
    transform: rotate(-180deg);
}
.candidates-page .candidates-search-card .card-body {
    padding: 0.75rem 1.25rem;
    overflow: visible;
}
.candidates-page .candidates-search-section-header {
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-radius: 8px;
    transition: background 0.2s ease;
}
.candidates-page .candidates-search-section-header:hover {
    background: rgba(0,0,0,0.03);
}
.candidates-page .candidates-search-section-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: -0.01em;
}
.candidates-page .candidates-search-section-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.candidates-page .candidates-reset-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid #f59e0b;
    background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 2px rgba(245, 158, 11, 0.2);
}
.candidates-page .candidates-reset-all-btn:hover {
    background: linear-gradient(180deg, #fde68a 0%, #fcd34d 100%);
    border-color: #d97706;
    color: #92400e;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}
.candidates-page .candidates-reset-all-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4);
}
.candidates-page .candidates-reset-all-btn svg {
    display: block;
    flex-shrink: 0;
}
.candidates-page .candidates-reset-all-label {
    white-space: nowrap;
}
.candidates-page .candidates-search-section {
    overflow: visible;
}
/* Candidates search row: search input and Filters/Hide filters button on same row, hint below */
.candidates-page .candidates-search-row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.75rem;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border-radius: 12px;
    min-height: 3rem;
    background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
}
.candidates-page .candidates-search-row .open-pool-search-wrap {
    grid-column: 1;
    grid-row: 1 / -1;
    min-width: 0;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.candidates-page .candidates-search-row .candidates-filter-btn {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.75rem;
    position: relative;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .open-pool-search-input {
    height: 2.75rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    padding: 0 2.75rem 0 2.5rem;
    font-size: 0.9375rem;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .open-pool-search-input::placeholder {
    color: #94a3b8;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .open-pool-search-input:hover {
    border-color: #cbd5e1;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .open-pool-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    background: #fff;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .open-pool-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.candidates-page .candidates-search-row .open-pool-search-input-wrap .open-pool-search-input::-ms-clear { display: none; }
.candidates-page .candidates-search-row .open-pool-search-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .candidates-search-icon-left {
    position: absolute;
    left: 0.875rem;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap:focus-within .candidates-search-icon-left {
    color: var(--primary-color, #2563eb);
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .candidates-search-icon-left svg {
    display: block;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .candidates-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap.candidates-search-has-text .candidates-search-clear {
    display: flex;
}
.candidates-page .candidates-search-row .open-pool-search-input-wrap .candidates-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.candidates-page .candidates-search-row .candidates-filter-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    height: 2.75rem;
    min-height: 2.75rem;
    border-radius: 10px;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}
.candidates-page .candidates-search-row .candidates-filter-btn:hover {
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
}
/* Candidates filter panel: Apply and Clear same size */
.candidates-page .open-pool-filter-panel .open-pool-filters-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.4rem;
    padding-top: 0.35rem;
}
.candidates-page .open-pool-filter-panel .open-pool-filters-actions .btn,
.candidates-page .open-pool-filter-panel .open-pool-filters-actions a.btn-soft {
    min-height: 2.25rem;
    height: 2.25rem;
    min-width: 5rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 8px;
    line-height: 1.25;
    text-decoration: none;
}
.candidates-page .open-pool-filter-panel .open-pool-filters-actions a.btn-soft {
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: var(--text-primary);
}
.candidates-page .open-pool-filter-panel .open-pool-filters-actions a.btn-soft:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}
/* ========== Stand-up page – modern, colorful design ========== */
.standup-page {
  --standup-bg: #f0f9ff;
  --standup-surface: #ffffff;
  --standup-border: #bae6fd;
  --standup-muted: #0369a1;
  --standup-primary: #0284c7;
  --standup-primary-hover: #0369a1;
  --standup-accent: #0ea5e9;
  --standup-accent-2: #38bdf8;
  --standup-success: #10b981;
  --standup-purple: #8b5cf6;
  --standup-amber: #f59e0b;
  --standup-radius: 14px;
  --standup-radius-sm: 10px;
  --standup-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
  --standup-shadow-lg: 0 8px 24px rgba(2, 132, 199, 0.12);
}

/* Page header – gradient strip */
.standup-page .page-header.standup-page-header {
  margin-bottom: 2rem;
  padding: 1.75rem 2rem;
  background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 50%, #0284c7 100%);
  border-radius: var(--standup-radius);
  border: none;
  box-shadow: 0 4px 20px rgba(2, 132, 199, 0.25);
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.standup-page .standup-back-wrap {
  margin: 0;
  padding: 0;
}
.standup-page .standup-back-link {
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12);
}
.standup-page .standup-back-link:hover {
  color: #fff;
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.5);
}
.standup-page .page-header.standup-page-header h1 {
  font-size: 1.875rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.standup-page .page-header.standup-page-header .page-header-desc {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.55;
  max-width: 42rem;
}

/* Main card */
.standup-page .card-modern {
  border-radius: 18px;
  border: 1px solid var(--standup-border);
  box-shadow: var(--standup-shadow-lg);
  overflow: visible;
  background: var(--standup-surface);
}
.standup-page .card-modern .card-body { padding: 1.75rem 2rem; overflow: visible; }

/* Tabs – colorful pills */
.standup-page .standup-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding: 0.35rem;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: var(--standup-radius);
  border: 1px solid var(--standup-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.standup-page .standup-tab {
  flex: 1;
  padding: 0.9rem 1.25rem;
  font-weight: 700;
  color: var(--standup-muted);
  background: transparent;
  border: none;
  border-radius: var(--standup-radius-sm);
  cursor: pointer;
  font-size: 0.9375rem;
  transition: all 0.2s ease;
}
.standup-page .standup-tab:hover {
  color: var(--standup-primary-hover);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.15);
}
.standup-page .standup-tab:focus { outline: none; }
.standup-page .standup-tab:focus-visible { box-shadow: 0 0 0 3px var(--standup-accent); }
.standup-page .standup-tab.active {
  color: #fff;
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 3px 12px rgba(2, 132, 199, 0.4);
}
.standup-page .standup-tab.active:hover {
  background: linear-gradient(135deg, #0369a1 0%, #0c4a6e 100%);
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.45);
}
.standup-page .standup-panel { display: none; animation: standup-fadeIn 0.3s ease; }
.standup-page .standup-panel.active { display: block; }
@keyframes standup-fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Panel section titles */
.standup-page .standup-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.4rem 0;
  color: #0c4a6e;
  letter-spacing: -0.02em;
}
.standup-page .standup-panel .text-muted {
  font-size: 0.9375rem;
  margin-bottom: 1.5rem;
  color: var(--standup-muted);
  line-height: 1.5;
}

/* Review bar – colorful sections */
.standup-page .standup-review-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
  margin-bottom: 1.5rem;
  border-radius: var(--standup-radius);
  border: 1px solid var(--standup-border);
  background: linear-gradient(180deg, #fff 0%, #f0f9ff 100%);
  overflow: visible;
  box-shadow: var(--standup-shadow);
}
.standup-page .standup-review-section {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--standup-border);
  overflow: visible;
}
.standup-page .standup-review-section:last-child { border-right: none; }
.standup-page .standup-review-section-duration { flex: 0 0 auto; min-width: 160px; max-width: 200px; }
.standup-page .standup-review-section-activities { flex: 0 0 auto; min-width: 200px; }
.standup-page .standup-review-section-value { flex: 1 1 240px; min-width: 220px; }
.standup-page .standup-review-section-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--standup-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.standup-page .standup-review-section-hint { font-size: 0.75rem; color: #64748b; margin: 0 0 0.5rem 0; line-height: 1.35; }
.standup-page .standup-review-row .review-select-wrap { margin-bottom: 0; max-width: none; overflow: visible; position: relative; }
.standup-page .standup-review-row .review-select-wrap .select-search-wrap { overflow: visible; }
.standup-page .standup-review-row .review-select-wrap .select-search-dropdown { z-index: 100; }
.standup-page .standup-review-row .review-by-options { margin-bottom: 0; flex: 0 0 auto; }

/* Activities – colorful segmented control */
.standup-page .review-by-options {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  border-radius: var(--standup-radius-sm);
  padding: 4px;
  background: #fff;
  border: 1px solid var(--standup-border);
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.1);
}
.standup-page .review-by-option {
  padding: 0.55rem 1.1rem;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--standup-muted);
  transition: all 0.2s;
}
.standup-page .review-by-option:hover { color: var(--standup-primary-hover); background: #e0f2fe; }
.standup-page .review-by-option:focus { outline: none; box-shadow: 0 0 0 2px var(--standup-accent); }
.standup-page .review-by-option.active {
  background: linear-gradient(135deg, var(--standup-primary) 0%, var(--standup-primary-hover) 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

/* Review inputs (select-search) */
.standup-page .review-select-wrap { max-width: 400px; }
.standup-page .review-select-wrap label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.8125rem; color: #475569; text-transform: uppercase; letter-spacing: 0.03em; }
.standup-page .review-select-wrap .select-search-wrap { width: 100%; max-width: 100%; }
.standup-page .review-select-wrap .select-search-input { width: 100%; height: 2.75rem; padding: 0.5rem 2.5rem 0.5rem 1rem; font-size: 0.9375rem; border: 1px solid var(--standup-border); border-radius: var(--standup-radius-sm); background: var(--standup-surface); color: #0f172a; transition: border-color 0.2s, box-shadow 0.2s; }
.standup-page .review-select-wrap .select-search-input:hover { border-color: #cbd5e1; }
.standup-page .review-select-wrap .select-search-input:focus { outline: none; border-color: var(--standup-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); }
.standup-page .review-select-wrap select.form-control:not(.select-search-native) { width: 100%; height: 2.75rem; padding: 0.5rem 2.5rem 0.5rem 1rem; font-size: 0.9375rem; border: 1px solid var(--standup-border); border-radius: var(--standup-radius-sm); background: var(--standup-surface); appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; }

/* Review content card */
.standup-page .review-content-card {
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: var(--standup-radius);
  border: 1px solid var(--standup-border);
  padding: 1.75rem;
  min-height: 240px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 2px 8px rgba(2, 132, 199, 0.06);
}
.standup-page .standup-empty { color: var(--standup-muted); font-size: 0.9375rem; padding: 1.5rem 0; line-height: 1.6; }
.standup-page .standup-review-loaded { padding: 0; }

/* Review: summary tiles (1 row, Dashboard-style) */
.standup-page .standup-review-tiles-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.standup-page .standup-review-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 0.6rem;
  border: 1px solid var(--standup-border);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.05);
}
.standup-page .standup-review-tile:hover {
  border-color: var(--standup-primary);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.12);
  transform: translateY(-1px);
}
.standup-page .standup-review-tile.active {
  border-color: var(--standup-primary);
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  box-shadow: 0 2px 10px rgba(2, 132, 199, 0.15);
}
.standup-page .standup-review-tile-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f172a;
  display: block;
  margin-bottom: 0.25rem;
}
.standup-page .standup-review-tile-jobs .standup-review-tile-value { color: #0d9488; }
.standup-page .standup-review-tile-added .standup-review-tile-value { color: #1d4ed8; }
.standup-page .standup-review-tile-internal .standup-review-tile-value { color: #6d28d9; }
.standup-page .standup-review-tile-customer .standup-review-tile-value { color: #047857; }
.standup-page .standup-review-tile-hr .standup-review-tile-value { color: #15803d; }
.standup-page .standup-review-tile-label {
  font-size: 0.6875rem;
  line-height: 1.3;
  color: #64748b;
  text-align: center;
}
.standup-page .standup-review-tile-label strong {
  font-weight: 700;
  color: #475569;
}
.standup-page .standup-review-content-wrap { margin-top: 0; }
.standup-page .standup-review-view.hide { display: none !important; }

/* Review: job list (By User / By Customer) */
.standup-page .standup-review-jobs-list-section { margin-bottom: 0; }
.standup-page .standup-review-jobs-list-title {
  font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0 0 1rem 0;
  letter-spacing: -0.02em;
}
.standup-page .standup-review-jobs-list-empty {
  color: var(--standup-muted); font-size: 0.9375rem; padding: 1rem 0; margin: 0;
}
/* Job cards (By User / By Customer) – compact, modern */
.standup-page .standup-review-job-rows {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.standup-page .standup-review-job-card {
  background: #fff;
  border: 1px solid var(--standup-border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.06);
}
.standup-page .standup-review-job-card-inner {
  padding: 0.85rem 1rem;
  text-align: left;
}
.standup-page .standup-review-job-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.standup-page .standup-review-job-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}
.standup-page .standup-review-job-card-head-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  flex-shrink: 0;
}
.standup-page .standup-review-job-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  background: #f1f5f9;
  color: #475569;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-weight: 500;
}
.standup-page .standup-review-job-card-pill-name { color: #64748b; }
.standup-page .standup-review-job-card-pill-count {
  font-weight: 700;
  color: var(--standup-primary);
  font-variant-numeric: tabular-nums;
}
.standup-page .standup-review-job-card-total {
  font-size: 0.75rem;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}
.standup-page .standup-review-job-card-total strong { color: var(--standup-primary); font-weight: 700; }
.standup-page .standup-review-job-card-bubbles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}
.standup-page .standup-review-job-card-bubble {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: #475569;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0.25rem 0.6rem;
  font-weight: 500;
}
.standup-page .standup-review-job-card-bubble-id {
  color: var(--standup-primary);
  font-weight: 600;
  background: rgba(14, 165, 233, 0.1);
}
.standup-page .standup-review-job-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e2e8f0;
  font-size: 0.75rem;
}
.standup-page .standup-review-job-card-meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
}
.standup-page .standup-review-job-card-meta-label {
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.625rem;
}
.standup-page .standup-review-job-card-meta-value {
  color: #334155;
  line-height: 1.35;
}
.standup-page .standup-review-job-row-expand {
  background: #f8fafc;
  border: 1px solid var(--standup-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1rem 1.25rem;
  margin: 0 1px 0.75rem 1px;
}
/* Single candidates area below all job cards (Review: By User / By Customer) */
.standup-page .standup-review-job-candidates-area {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--standup-border);
  min-height: 80px;
}
.standup-page .standup-review-candidates-placeholder {
  margin: 0;
  color: var(--standup-muted);
  font-size: 0.9375rem;
}
.standup-page .standup-review-job-card {
  cursor: pointer;
}
.standup-page .standup-review-job-card:hover {
  border-color: var(--standup-primary);
  box-shadow: 0 2px 12px rgba(2, 132, 199, 0.12);
}
.standup-page .standup-review-job-card-selected {
  border-color: var(--standup-primary);
  box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.2);
}
.standup-page .standup-review-expand-candidates { margin-top: 0; }
.standup-page .standup-review-expand-candidates .standup-section-heading { margin-top: 0; }
.standup-page .standup-review-expand-empty { margin: 0; color: var(--standup-muted); font-size: 0.9375rem; }
.standup-page .standup-expand-panels { margin-top: 1rem; }
.standup-page .standup-expand-group-section { margin-bottom: 1.5rem; }
.standup-page .standup-expand-group-section:last-child { margin-bottom: 0; }
.standup-page .standup-expand-group-heading { font-size: 0.9375rem; font-weight: 600; color: #475569; margin: 0 0 0.5rem 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.standup-page .standup-expand-group-heading .standup-result-tab-count { font-weight: 700; color: #0ea5e9; }

/* Review: Back link (when viewing job from User/Customer list) */
.standup-page .standup-review-back-wrap { margin-bottom: 1rem; }
.standup-page .standup-review-back-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.9375rem; color: var(--standup-primary); text-decoration: none;
  font-weight: 500;
}
.standup-page .standup-review-back-link:hover { color: var(--standup-primary-hover); text-decoration: underline; }

/* Review content: hero block */
.standup-page .standup-review-loaded .standup-review-section {
  margin-bottom: 1.5rem;
  background: #fff;
  border: 1px solid var(--standup-border);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}
.standup-page .standup-review-loaded .standup-review-section:last-of-type { margin-bottom: 1rem; }
.standup-page .standup-section-heading {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--standup-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.75rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--standup-border);
}
.standup-page .standup-review-section-candidates .standup-section-heading { margin-top: 0; }
.standup-page .standup-review-loaded .standup-review-hero {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--standup-border);
}
.standup-page .standup-review-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin-bottom: 0; }
.standup-page .standup-review-job-title { font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -0.02em; line-height: 1.3; }
.standup-page .standup-review-job-title-link { color: #0f172a; text-decoration: none; }
.standup-page .standup-review-job-title-link:hover { color: var(--standup-primary); text-decoration: underline; }
.standup-page .standup-review-header { font-size: 1.0625rem; font-weight: 600; color: #0f172a; margin: 0; flex-shrink: 0; }
.standup-page .standup-review-job-customer { font-size: 0.9375rem; color: #475569; margin: 0; display: inline-flex; align-items: center; gap: 0.35rem; }
.standup-page .standup-review-job-customer-badge { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; background: rgba(100, 116, 139, 0.12); padding: 0.2rem 0.5rem; border-radius: 6px; }
.standup-page .standup-review-stages-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.standup-page .standup-review-stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  background: #fff;
  border: 1px solid var(--standup-border);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.1);
}
.standup-page .standup-review-stage-name { color: #475569; }
.standup-page .standup-review-stage-count { font-weight: 700; color: var(--standup-primary); font-size: 0.8125rem; }
.standup-page .standup-review-total-bubble {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
  background: linear-gradient(135deg, var(--standup-primary) 0%, var(--standup-primary-hover) 100%);
  color: #fff;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  margin-left: auto;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}
.standup-page .standup-review-total-bubble strong { font-weight: 700; margin-left: 0.2em; }
/* Job meta row: below title, inside hero – horizontal row with label + value, pipe separators */
.standup-page .standup-review-job-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; font-size: 0.8125rem; color: #64748b; }
.standup-page .standup-review-meta-item { display: inline-flex; align-items: baseline; gap: 0.35rem; padding-right: 1.25rem; margin-right: 0; border-right: 1px solid #e2e8f0; }
.standup-page .standup-review-job-meta-row .standup-review-meta-item:last-child { padding-right: 0; margin-right: 0; border-right: none; }
.standup-page .standup-review-meta-label { color: #94a3b8; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.standup-page .standup-review-meta-value { color: #475569; font-weight: 500; }
/* Quick notes: only when present */
/* Latest Quick notes: same as view job – rich text, user, date/time; image as thumbnail with hover preview */
.standup-page .standup-review-job-quick-notes { margin-bottom: 1rem; padding: 1rem 1.25rem; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; }
.standup-page .standup-review-job-quick-notes .job-remarks-list { list-style: none; padding: 0; margin: 0; }
.standup-page .standup-review-job-quick-notes .job-remark-item { padding: 0; border: none; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem 1rem; }
.standup-page .standup-review-job-quick-notes .job-remark-text { flex: 1; min-width: 0; font-size: 0.9375rem; line-height: 1.5; }
.standup-page .standup-review-job-quick-notes .job-remark-meta { flex-shrink: 0; font-size: 0.8125rem; color: #64748b; }
.standup-page .standup-review-job-quick-notes .job-remark-user { font-weight: 700; color: #0f172a; }
.standup-page .standup-review-job-quick-notes .job-remark-time { font-variant-numeric: tabular-nums; margin-left: 0.5rem; }
.standup-page .standup-remark-img-wrap { position: relative; flex-shrink: 0; display: inline-block; }
.standup-page .standup-remark-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #e2e8f0; display: block; cursor: pointer; }
.standup-page .standup-remark-img-preview { position: absolute; left: 0; top: 100%; margin-top: 4px; z-index: 50; display: none; padding: 4px; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.standup-page .standup-remark-img-wrap:hover .standup-remark-img-preview { display: block; }
.standup-page .standup-remark-img-preview img { max-width: 280px; max-height: 280px; width: auto; height: auto; display: block; border-radius: 4px; }
/* Candidates: one row = group tabs + search bar */
.standup-page .standup-result-tabs-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid var(--standup-border);
  border-radius: 12px;
  padding: 0.35rem;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.08);
}
@media (max-width: 768px) { .standup-page .standup-result-tabs-row { flex-wrap: wrap; } }
.standup-page .standup-result-tabs { display: flex; gap: 0.25rem; padding: 0; background: transparent; border: none; border-radius: 8px; flex: 0 0 auto; min-width: 0; flex-wrap: wrap; }
.standup-page .standup-result-tab { padding: 0.55rem 1rem; font-weight: 600; font-size: 0.875rem; color: #64748b; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: color 0.2s, background 0.2s; display: inline-flex; align-items: center; gap: 0.4rem; }
.standup-page .standup-result-tab:hover { color: var(--standup-primary-hover); background: rgba(14, 165, 233, 0.08); }
.standup-page .standup-result-tab.active {
  color: #fff;
  background: linear-gradient(135deg, var(--standup-primary) 0%, var(--standup-primary-hover) 100%);
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.35);
}
.standup-page .standup-result-tab.active .standup-result-tab-count { background: rgba(255,255,255,0.3); color: #fff; }
.standup-page .standup-result-tab-count { font-size: 0.75rem; font-weight: 700; min-width: 1.25rem; padding: 0.15rem 0.45rem; border-radius: 999px; background: rgba(0,0,0,0.08); color: #475569; }
.standup-page .standup-result-tab:focus { outline: none; }
.standup-page .standup-result-tab:focus-visible { box-shadow: 0 0 0 2px var(--standup-primary); }
.standup-page .standup-result-tabs-row .standup-result-tabs { flex: 0 0 auto; }
.standup-page .standup-result-tabs-row .standup-result-search-wrap { flex: 1; min-width: 200px; margin-left: 0.35rem; border-left: 1px solid #e2e8f0; padding-left: 0.75rem; }
@media (max-width: 768px) { .standup-page .standup-result-tabs-row .standup-result-search-wrap { margin-left: 0; padding-left: 0; border-left: none; margin-top: 0.35rem; padding-top: 0.5rem; border-top: 1px solid #e2e8f0; width: 100%; } }
.standup-page .standup-result-search-wrap.standup-result-search-60 { position: relative; display: flex; align-items: center; }
.standup-page .standup-result-search-wrap .standup-result-search-input { width: 100%; padding-left: 1rem; padding-right: 2.5rem; }
.standup-page .standup-search-icon { position: absolute; right: 0.35rem; left: auto; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; display: flex; align-items: center; justify-content: center; }
.standup-page .standup-search-clear { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; padding: 0; border: none; background: transparent; color: #64748b; cursor: pointer; border-radius: 6px; display: none; align-items: center; justify-content: center; }
.standup-page .standup-result-search-wrap.standup-result-search-has-text .standup-search-clear { display: flex; }
.standup-page .standup-search-clear:hover { color: #0f172a; background: #e2e8f0; }
.standup-page .standup-result-search-input { padding: 0.65rem 1rem; font-size: 1rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; min-height: 2.5rem; }
.standup-page .standup-result-search-input:focus { outline: none; border-color: var(--standup-primary); box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.2); }
.standup-page .standup-result-search-input::placeholder { color: #94a3b8; }
.standup-page .standup-result-panel { display: none; }
.standup-page .standup-result-panel.active { display: block; }
/* Candidate cards – modern layout */
.standup-page .standup-review-candidates-list { list-style: none; padding: 0; margin: 0; }
.standup-page .standup-result-candidates-list { display: flex; flex-direction: column; gap: 1rem; }
.standup-page .standup-review-candidate-row { font-size: 0.9375rem; }
.standup-page .standup-review-candidate-card { padding: 1.35rem 1.5rem; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; margin: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.06); transition: box-shadow 0.2s, border-color 0.2s; border-left: 3px solid var(--standup-primary); }
.standup-page .standup-review-candidate-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #cbd5e1; }
.standup-page .standup-cand-row { font-size: 0.9375rem; line-height: 1.5; margin-bottom: 0.4rem; }
.standup-page .standup-cand-row-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-bottom: 0.6rem; }
.standup-page .standup-cand-name { font-weight: 700; font-size: 1.0625rem; color: var(--standup-primary); text-decoration: none; letter-spacing: -0.01em; }
.standup-page .standup-cand-name:hover { text-decoration: underline; color: var(--standup-primary-hover); }
.standup-page .standup-cand-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; color: #475569; font-size: 0.875rem; }
.standup-page .standup-cand-resume { margin-left: 0.25rem; text-decoration: none; font-size: 1.1rem; opacity: 0.9; }
.standup-page .standup-cand-resume:hover { opacity: 1; }
.standup-page .standup-cand-row-2 { font-size: 0.8125rem; color: #64748b; line-height: 1.5; }
.standup-page .standup-cand-row-3 { font-size: 0.8125rem; color: #475569; }
.standup-page .standup-cand-divider { border: none; border-top: 1px solid #f1f5f9; margin: 0.75rem 0; }
.standup-page .standup-cand-row-4 { font-size: 0.875rem; color: #334155; line-height: 1.5; padding: 0.5rem 0; background: #f8fafc; border-radius: 8px; padding: 0.5rem 0.75rem; }
.standup-page .standup-cand-notes-label { font-weight: 600; color: #64748b; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; }
.standup-page .standup-cand-notes-content { color: #334155; }
.standup-page .standup-cand-notes-meta { font-size: 0.8125rem; color: #64748b; }
.standup-page .standup-cand-notes-empty { color: #94a3b8; font-style: italic; }
.standup-page .standup-review-actions { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid #e2e8f0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.standup-page .standup-action-btn { text-decoration: none; font-weight: 600; border-radius: 8px; transition: opacity 0.2s, transform 0.15s; }
.standup-page .standup-action-btn:hover { opacity: 0.95; transform: translateY(-1px); }

/* Allocate / Tasks – form row */
.standup-page .standup-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; padding: 1rem 0; }
.standup-page .standup-form-row .form-control { height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.9375rem; border: 1px solid var(--standup-border); border-radius: var(--standup-radius-sm); background: var(--standup-surface); min-width: 200px; transition: border-color 0.2s, box-shadow 0.2s; }
.standup-page .standup-form-row .form-control:hover { border-color: #cbd5e1; }
.standup-page .standup-form-row .form-control:focus { outline: none; border-color: var(--standup-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); }
.standup-page .standup-form-row .select-search-wrap { min-width: 200px; }
.standup-page .standup-form-row .select-search-input { height: 2.75rem; padding: 0.5rem 1rem; font-size: 0.9375rem; border-radius: var(--standup-radius-sm); }
.standup-page .standup-form-row select.form-control:not(.select-search-native) { padding-right: 2.5rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25rem; }
.standup-page .standup-form-row .btn-primary { height: 2.75rem; padding: 0 1.5rem; font-weight: 600; border-radius: var(--standup-radius-sm); font-size: 0.9375rem; background: var(--standup-primary); border-color: var(--standup-primary); transition: background 0.2s, transform 0.15s; }
.standup-page .standup-form-row .btn-primary:hover { background: var(--standup-primary-hover); transform: translateY(-1px); }
.standup-page .standup-form-row .btn-primary:focus { outline: none; }
.standup-page .standup-form-row .btn-primary:focus-visible { box-shadow: 0 0 0 2px var(--standup-primary); }
.standup-page .standup-form-row .standup-task-input { min-width: 280px; flex: 1; max-width: 420px; }

/* Tasks tab – modern UI */
.standup-page .standup-tasks-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.35rem;
}
.standup-page .standup-tasks-header-row .standup-section-title { margin: 0; }
/* Tasks tab search: same pattern as open-pool (icon right, clear when typing) */
.standup-page .standup-tasks-header-row .standup-tasks-search-input-wrap {
    width: 260px;
    max-width: 100%;
    flex: 0 0 auto;
}
.standup-page .standup-task-row-search-hidden { display: none !important; }

.standup-page .standup-panel-tasks .standup-section-title { margin-bottom: 0.35rem; }
.standup-page .standup-tasks-desc {
    margin: 0 0 1.25rem 0;
    font-size: 0.9375rem;
    color: #64748b;
    line-height: 1.5;
}
.standup-page .standup-tasks-desc kbd {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    font-size: 0.8em;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}
/* Form card */
.standup-page .standup-tasks-form-card {
    background: linear-gradient(180deg, #fff 0%, #f0f9ff 50%, #e0f2fe 100%);
    border: 1px solid var(--standup-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}
.standup-page .standup-panel-tasks .standup-task-form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    margin: 0;
}
.standup-page .standup-panel-tasks .standup-task-input-wrap {
    position: relative;
    flex: 1;
    min-width: 280px;
}
.standup-page .standup-panel-tasks .standup-task-input {
    width: 100%;
    min-height: 2.85rem;
    padding: 0.6rem 0.85rem;
    font-size: 0.9375rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 320px;
    max-width: none;
}
/* Contenteditable task input: placeholder and ref colors inside field */
.standup-page .contenteditable-task-input {
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.standup-page .contenteditable-task-input:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
}
.standup-page .contenteditable-task-input .task-ref-job { color: #1d4ed8; font-weight: 600; }
.standup-page .contenteditable-task-input .task-ref-candidate { color: #047857; font-weight: 600; }
.standup-page .contenteditable-task-input .task-ref-user { color: #c2410c; font-weight: 600; }
.standup-page .standup-panel-tasks .standup-task-input:focus {
    border-color: var(--standup-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    outline: none;
}
.standup-page .standup-panel-tasks .standup-task-assign-wrap {
    flex-shrink: 0;
}
.standup-page .standup-panel-tasks .standup-task-assign-wrap label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.standup-page .standup-panel-tasks .standup-task-assign-select {
    min-width: 172px;
    height: 2.85rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding-right: 2rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
    background-size: 1rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.standup-page .standup-panel-tasks .standup-task-assign-select:hover {
    border-color: #cbd5e1;
}
.standup-page .standup-panel-tasks .standup-task-assign-select:focus {
    outline: none;
    border-color: var(--standup-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
/* Dropdown options: allow long values to overflow (native select) */
.standup-page .standup-panel-tasks .standup-task-assign-select option {
    padding: 0.5rem;
    white-space: normal;
    overflow: visible;
}
/* Assigned to: searchable dropdown (select-search) – same look as allocate user */
.standup-page .standup-panel-tasks .standup-task-assign-wrap .select-search-wrap {
    min-width: 200px;
    width: 100%;
    max-width: 280px;
}
.standup-page .standup-panel-tasks .standup-task-assign-wrap .select-search-input {
    height: 2.85rem;
    min-height: 2.85rem;
    padding: 0.5rem 2.25rem 0.5rem 0.85rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 0.9375rem;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.standup-page .standup-panel-tasks .standup-task-assign-wrap .select-search-input:hover {
    border-color: #cbd5e1;
}
.standup-page .standup-panel-tasks .standup-task-assign-wrap .select-search-input:focus {
    outline: none;
    border-color: var(--standup-primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.standup-page .standup-panel-tasks .standup-task-assign-wrap .select-search-dropdown {
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    max-height: 260px;
}
.standup-page .standup-task-actions-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.standup-page .standup-panel-tasks .standup-task-btn-assign,
.standup-page .standup-panel-tasks .standup-task-btn-clear {
    height: 2.85rem;
    padding: 0 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    cursor: pointer;
}
.standup-page .standup-panel-tasks .standup-task-btn-assign {
    background: linear-gradient(135deg, var(--standup-primary) 0%, var(--standup-primary-hover) 100%);
    border: 1px solid transparent;
    color: #fff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}
.standup-page .standup-panel-tasks .standup-task-btn-assign:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}
.standup-page .standup-panel-tasks .standup-task-btn-assign:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}
.standup-page .standup-panel-tasks .standup-task-btn-clear {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.standup-page .standup-panel-tasks .standup-task-btn-clear:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #0f172a;
}
.standup-page .standup-panel-tasks .standup-task-btn-clear:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #94a3b8;
}
/* Colored refs in task title: /J = job (blue), /C = candidate (green), /U = user (amber) */
.standup-page .task-ref {
    display: inline;
    font-weight: 600;
    font-size: 0.9375em;
}
.standup-page .task-ref-job {
    color: #1d4ed8;
}
.standup-page .task-ref-candidate {
    color: #047857;
}
.standup-page .task-ref-user {
    color: #c2410c;
}
/* Slash popover – modern with /J vs /C vs /U colors */
.standup-page .task-slash-popover {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 280px;
    max-width: 440px;
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    z-index: 100;
    padding: 0.4rem 0;
}
.standup-page .task-slash-popover.hide { display: none; }
/* Popover when showing jobs: blue accent */
.standup-page .task-slash-popover[data-mode="job"] {
    border-top: 3px solid #3b82f6;
}
.standup-page .task-slash-popover[data-mode="job"] .task-slash-option:hover {
    background: #eff6ff;
    color: #1d4ed8;
}
/* Popover when showing candidates: green accent */
.standup-page .task-slash-popover[data-mode="candidate"] {
    border-top: 3px solid #10b981;
}
.standup-page .task-slash-popover[data-mode="candidate"] .task-slash-option:hover {
    background: #ecfdf5;
    color: #047857;
}
.standup-page .task-slash-hint, .standup-page .task-slash-empty {
    padding: 0.7rem 0.85rem;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.45;
}
.standup-page .task-slash-hint kbd {
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.standup-page .task-slash-option {
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: #0f172a;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}
.standup-page .task-slash-popover[data-mode="job"] .task-slash-option {
    border-left-color: #93c5fd;
}
.standup-page .task-slash-popover[data-mode="candidate"] .task-slash-option {
    border-left-color: #6ee7b7;
}
.standup-page .task-slash-option-focused,
.standup-page .task-slash-option.task-slash-option-focused {
    background: #f1f5f9;
    outline: none;
}
.standup-page .task-slash-popover[data-mode="job"] .task-slash-option-focused { background: #eff6ff; color: #1d4ed8; }
.standup-page .task-slash-popover[data-mode="candidate"] .task-slash-option-focused { background: #ecfdf5; color: #047857; }
/* Tasks table – card style */
.standup-page .standup-tasks-table-wrap {
    margin-top: 0;
    background: #fff;
    border: 1px solid var(--standup-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(2, 132, 199, 0.08);
}
.standup-page .standup-tasks-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.standup-page .standup-tasks-table th,
.standup-page .standup-tasks-table td {
    padding: 1rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
    transition: background 0.15s ease;
}
.standup-page .standup-tasks-table tr:last-child td { border-bottom: none; }
.standup-page .standup-tasks-table tbody tr:hover td {
    background: #f8fafc;
}
.standup-page .standup-tasks-table tbody tr:hover td .standup-task-content-block {
    background: #fff;
}
.standup-page .standup-tasks-table th {
    font-weight: 700;
    color: var(--standup-primary);
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--standup-border);
}
/* Sortable table header */
.standup-page .standup-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.standup-page .standup-th-sortable:hover {
    background: #f1f5f9;
    color: #334155;
}
.standup-page .standup-th-sortable .standup-th-label {
    display: inline-block;
    margin-right: 0.35rem;
}
.standup-page .standup-th-sort-icon {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.standup-page .standup-th-sortable:hover .standup-th-sort-icon { opacity: 0.8; }
.standup-page .standup-th-sortable.standup-th-sorted .standup-th-sort-icon { opacity: 1; }
.standup-page .standup-th-sort-icon.standup-th-sort-none::after {
    content: '';
    display: block;
    width: 0.5em;
    height: 2px;
    background: currentColor;
    margin: 0.35em 0 0 0.25em;
    border-radius: 1px;
}
.standup-page .standup-th-sort-icon.standup-th-sort-asc::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
    border-bottom: 0.5em solid currentColor;
    margin-left: 0.2em;
}
.standup-page .standup-th-sort-icon.standup-th-sort-desc::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 0.35em solid transparent;
    border-right: 0.35em solid transparent;
    border-top: 0.5em solid currentColor;
    margin-left: 0.2em;
}
.standup-page .standup-task-cell-title {
    color: #0f172a;
    max-width: 520px;
    word-break: break-word;
    line-height: 1.5;
    vertical-align: top;
}
.standup-page .standup-task-content-block {
    min-height: 4.5rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #f0f9ff 0%, #fafbfc 100%);
    border: 1px solid var(--standup-border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.standup-page .standup-task-row:hover .standup-task-content-block {
    background: #fff;
    border-color: var(--standup-border);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.1);
}
.standup-page .standup-task-row-highlight .standup-task-content-block {
    background: #fef9c3;
    border-color: #facc15;
    box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.3);
}
.standup-page .standup-task-title-text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #0f172a;
    flex: 1;
}
.standup-page .standup-task-content-block .task-ref { margin-right: 0.25rem; }
.standup-page .standup-task-meta {
    font-size: 0.75rem;
    color: #64748b;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.25rem;
}
.standup-page .standup-task-meta strong { font-weight: 500; color: #475569; }
.standup-page .standup-task-status {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}
.standup-page .standup-task-status-open {
  background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%);
  color: #0c4a6e;
  font-weight: 600;
}
.standup-page .standup-task-status-closed {
  background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 100%);
  color: #065f46;
  font-weight: 600;
}
/* Standup tasks toolbar: View switch independent of table */
.standup-page .standup-tasks-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    min-height: 2rem;
}
.standup-page .standup-tasks-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.standup-page .standup-tasks-filter-bar.hide {
    display: none;
}
.standup-page .standup-task-row-hidden-by-filter {
    display: none !important;
}

/* Standup tasks table: column widths (Task | Assigned | Status | Notes | Close) */
.standup-page #standup-tasks-table .standup-task-cell-title { min-width: 320px; width: 42%; max-width: 560px; }
.standup-page #standup-tasks-table td:nth-child(2),
.standup-page #standup-tasks-table th:nth-child(2) { width: 14%; min-width: 100px; }
.standup-page #standup-tasks-table td:nth-child(3),
.standup-page #standup-tasks-table th:nth-child(3) { width: 10%; min-width: 80px; }
.standup-page #standup-tasks-table .standup-th-notes,
.standup-page #standup-tasks-table .standup-task-cell-notes { width: 22%; min-width: 180px; max-width: 320px; }
.standup-page #standup-tasks-table .standup-task-cell-close,
.standup-page #standup-tasks-table .standup-th-close { width: 1%; min-width: 80px; white-space: nowrap; }

/* Task meta row: index | date | created_by, with comments bubble at extreme end */
.standup-page .standup-task-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-top: 0.2rem;
    width: 100%;
}
.standup-page .standup-task-meta-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.standup-page .standup-task-comments-bubble-wrap {
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    cursor: default;
}
/* Compact comment bubble: icon + count only */
.standup-page .standup-task-comments-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.12rem 0.28rem;
    border-radius: 4px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border: 1px solid #a5b4fc;
    color: #4338ca;
    box-shadow: 0 1px 1px rgba(67, 56, 202, 0.06);
}
.standup-page .standup-task-comments-bubble:hover {
    background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
    border-color: #818cf8;
    color: #3730a3;
}
.standup-page .standup-task-comments-bubble-icon { display: flex; align-items: center; justify-content: center; color: inherit; }
.standup-page .standup-task-comments-bubble-icon svg { display: block; }
.standup-page .standup-task-comments-bubble-count { font-variant-numeric: tabular-nums; }
/* Tooltip: fixed so it free-flows (not clipped) */
.standup-page .standup-task-comments-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    min-width: 420px;
    max-width: 560px;
    max-height: 320px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s, opacity 0.15s;
    pointer-events: none;
}
.standup-page .standup-task-comments-bubble-wrap.standup-task-comments-tooltip-visible .standup-task-comments-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.standup-page .standup-task-comments-tooltip-inner {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #334155;
    text-align: left;
}
.standup-page .standup-task-comments-tooltip-title {
    display: block;
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0;
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 10px 10px 0 0;
}
.standup-page .standup-task-comments-tooltip-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: 260px;
    padding: 0.5rem 1rem 0.75rem;
    flex: 1;
    min-height: 0;
}
.standup-page .standup-task-comments-tooltip-entry {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.standup-page .standup-task-comments-tooltip-entry:last-child { padding-bottom: 0; border-bottom: none; }
.standup-page .standup-task-comments-tooltip-meta {
    display: block;
    font-size: 0.6875rem;
    color: #9ca3af;
    margin-bottom: 0.2rem;
}
.standup-page .standup-task-comments-tooltip-text { word-break: break-word; white-space: pre-wrap; }
.standup-page .standup-task-comments-tooltip-empty {
    margin: 0;
    padding: 0.75rem 1rem;
    color: #64748b;
    font-size: 0.8125rem;
}

.standup-page .standup-task-cell-notes { word-break: break-word; color: #475569; font-size: 0.8125rem; }
.standup-page .standup-task-close-form .standup-task-close-notes {
    min-width: 160px;
    width: 100%;
    max-width: 100%;
    min-height: 2.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    padding: 0.5rem 0.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.standup-page .standup-task-close-form .standup-task-close-notes:focus {
    outline: none;
    border-color: var(--standup-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.standup-page .standup-task-cell-close { text-align: right; vertical-align: middle; }

/* Tasks table: Open / Closed view switch – in toolbar, independent of columns */
.standup-page .standup-tasks-view-switch {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
}
.standup-page .standup-tasks-view-switch-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.standup-page .standup-tasks-view-switch-track {
    display: inline-flex;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #e2e8f0;
    padding: 2px;
}
.standup-page .standup-tasks-view-seg {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.7875rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.standup-page .standup-tasks-view-seg:hover:not(.active) {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.6);
}
.standup-page .standup-tasks-view-seg.active {
    background: var(--standup-primary);
    color: #fff;
    border: 1px solid var(--standup-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}
.standup-page .standup-tasks-view-seg.active .standup-tasks-view-seg-name,
.standup-page .standup-tasks-view-seg.active .standup-tasks-view-seg-count {
    color: #fff;
}
.standup-page .standup-tasks-view-seg-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    padding: 0 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 4px;
    line-height: 1.2;
}
.standup-page .standup-tasks-view-seg:not(.active) .standup-tasks-view-seg-count {
    background: #cbd5e1;
    color: #475569;
}
.standup-page .standup-tasks-view-seg.active .standup-tasks-view-seg-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.standup-page #standup-tasks-tbody-closed.hide,
.standup-page #standup-tasks-tbody-open.hide {
    display: none;
}
.standup-page .standup-tasks-table .task-closed .standup-task-title-text {
    color: #64748b;
}
.standup-page .standup-tasks-footer-closed-view .standup-tasks-footer-left label,
.standup-page .standup-tasks-footer-closed-view .standup-tasks-footer-left .standup-tasks-per-page-select {
    display: none;
}
.standup-page .standup-tasks-footer-closed-view .standup-tasks-footer-right {
    display: none;
}

/* Tasks table footer – per page and pagination */
.standup-page .standup-tasks-table-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.75rem 1.1rem;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-top: 1px solid var(--standup-border);
    border-radius: 0 0 14px 14px;
    font-size: 0.875rem;
}
.standup-page .standup-tasks-footer-left {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.standup-page .standup-tasks-footer-label {
    color: #64748b;
    font-weight: 500;
    margin: 0;
}
.standup-page .standup-tasks-per-page-select {
    min-width: 4rem;
    padding: 0.35rem 0.6rem;
    font-size: 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.standup-page .standup-tasks-showing {
    color: #64748b;
}
.standup-page .standup-tasks-footer-right {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.standup-page .standup-tasks-prev,
.standup-page .standup-tasks-next {
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
}
.standup-page .standup-tasks-prev:disabled,
.standup-page .standup-tasks-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.standup-page .standup-tasks-pages {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.standup-page .standup-tasks-page-num {
    min-width: 2rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}
.standup-page .standup-tasks-page-num.active {
    background: var(--standup-primary);
    color: #fff;
    border-color: var(--standup-primary);
}

.standup-page .standup-task-close-btn {
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.standup-page .standup-task-close-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}
.standup-page .standup-task-close-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4);
}
/* Tasks empty state */
.standup-page .standup-tasks-empty-card {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    margin-top: 0;
}
.standup-page .standup-tasks-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='1.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4'/%3E%3C/svg%3E") no-repeat center;
    background-size: 48px;
    opacity: 0.7;
}
.standup-page .standup-tasks-empty-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #475569;
    margin: 0 0 0.35rem 0;
}
.standup-page .standup-tasks-empty-desc {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Allocate / Tasks lists – modern cards */
.standup-page .allocate-list, .standup-page .tasks-list { list-style: none; padding: 0; margin: 0; }
.standup-page .allocate-item, .standup-page .task-item { padding: 1rem 1.25rem; background: var(--standup-surface); border: 1px solid var(--standup-border); border-radius: var(--standup-radius); margin-bottom: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; }
.standup-page .allocate-item:hover, .standup-page .task-item:hover { border-color: #cbd5e1; box-shadow: var(--standup-shadow); }
.standup-page .allocate-item span, .standup-page .task-item span { font-size: 0.9375rem; color: #0f172a; }
.standup-page .allocate-item .allocate-remove, .standup-page .task-item .task-remove { flex-shrink: 0; border-radius: 8px; font-size: 0.8125rem; transition: background 0.2s, color 0.2s; }
.standup-page .allocate-item .allocate-remove:hover, .standup-page .task-item .task-remove:hover { background: #fef2f2; color: #b91c1c; }

/* Allocate tab – modern UI */
.standup-page .standup-panel-allocate .standup-section-title { display: none; }
.standup-page .allocate-header { margin-bottom: 1.5rem; }
.standup-page .allocate-title { font-size: 1.25rem; font-weight: 700; color: #0c4a6e; margin: 0 0 0.35rem 0; letter-spacing: -0.02em; }
.standup-page .allocate-desc { margin: 0; font-size: 0.9375rem; color: var(--standup-muted); line-height: 1.5; }

.standup-page .allocate-toolbar-card {
    background: linear-gradient(180deg, #fff 0%, #f0f9ff 50%, #e0f2fe 100%);
    border: 1px solid var(--standup-border);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.08), inset 0 1px 0 rgba(255,255,255,0.9);
}
.standup-page .allocate-toolbar { margin: 0; }

/* Labels row – all field titles on top, aligned with controls below */
.standup-page .allocate-toolbar-labels-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 1.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--standup-border);
}
.standup-page .allocate-toolbar-labels-row .allocate-field-label {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--standup-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.standup-page .allocate-toolbar-labels-row .allocate-field-label:first-child { width: 220px; flex-shrink: 0; }
.standup-page .allocate-toolbar-labels-row .allocate-field-label:nth-child(2) { flex: 1; min-width: 320px; }
.standup-page .allocate-toolbar-labels-row .allocate-actions-label { flex-shrink: 0; }

/* Controls row – aligned with labels above */
.standup-page .allocate-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem 1.5rem;
}
.standup-page .allocate-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.standup-page .allocate-field-wrap.allocate-field-user { width: 220px; flex-shrink: 0; }
.standup-page .allocate-field-wrap.allocate-field-job { flex: 1; min-width: 320px; }
.standup-page .allocate-field-label { font-size: 0.75rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; }
.standup-page .allocate-field-hint { font-size: 0.75rem; color: #94a3b8; margin-top: 0.15rem; }
/* Allocate: same height and style for Select user and Select job */
.standup-page .allocate-select { width: 100%; height: 2.75rem; min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 10px; border: 1px solid var(--standup-border); background: #fff; font-size: 0.9375rem; color: #0f172a; transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; }
.standup-page .allocate-select:hover { border-color: #cbd5e1; }
.standup-page .allocate-select:focus { outline: none; border-color: var(--standup-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18); }
.standup-page .allocate-field-user .select-search-wrap .select-search-input { height: 2.75rem; min-height: 2.75rem; padding: 0.5rem 1rem; border-radius: 10px; border: 1px solid var(--standup-border); font-size: 0.9375rem; }
.standup-page .allocate-field-user .select-search-wrap .select-search-input:hover { border-color: #cbd5e1; }
.standup-page .allocate-field-user .select-search-wrap .select-search-input:focus { border-color: var(--standup-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18); }

/* Allocate job dropdown multi-select – same height/style as Select user */
.standup-page .allocate-job-multi-select {
    position: relative;
    width: 100%;
    min-width: 320px;
    max-width: 100%;
}
.standup-page .allocate-job-multi-select .select-box {
    border: 1px solid var(--standup-border);
    padding: 0.5rem 1rem;
    cursor: pointer;
    background: #fff;
    border-radius: 10px;
    font-size: 0.9375rem;
    color: #0f172a;
    height: 2.75rem;
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    word-break: break-word;
    box-sizing: border-box;
}
.standup-page .allocate-job-multi-select .select-box:hover {
    border-color: #cbd5e1;
}
.standup-page .allocate-job-multi-select .dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 100%;
    width: max-content;
    max-width: 520px;
    border: 1px solid var(--standup-border);
    background: #fff;
    display: none;
    z-index: 300;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
}
.standup-page .allocate-job-search-wrap {
    position: relative;
    margin: 0.5rem;
}
.standup-page .allocate-job-multi-select .search-box {
    width: calc(100% - 1rem);
    padding: 0.6rem 2.25rem 0.6rem 0.85rem;
    margin: 0;
    border: 1px solid var(--standup-border);
    border-radius: 8px;
    font-size: 0.875rem;
    box-sizing: border-box;
}
.standup-page .allocate-job-search-wrap .search-box { width: 100%; padding-right: 2.25rem; }
.standup-page .allocate-job-search-clear {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
}
.standup-page .allocate-job-search-wrap.allocate-job-search-has-text .allocate-job-search-clear {
    display: flex;
}
.standup-page .allocate-job-search-clear:hover { color: #0f172a; background: #f1f5f9; }
.standup-page .allocate-job-search-clear svg { display: block; }
.standup-page .allocate-job-multi-select .search-box:focus {
    outline: none;
    border-color: var(--standup-primary);
    box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.18);
}
.standup-page .allocate-job-multi-select .options {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.standup-page .allocate-job-multi-select .option,
.standup-page .allocate-job-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background 0.15s;
    min-height: 2.25rem;
    box-sizing: border-box;
}
.standup-page .allocate-job-multi-select .option:hover,
.standup-page .allocate-job-option:hover {
    background: #f1f5f9;
}
.standup-page .allocate-job-multi-select .option input[type="checkbox"],
.standup-page .allocate-job-option-cb {
    margin: 0;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    cursor: pointer;
    accent-color: var(--standup-primary);
}
.standup-page .allocate-job-option-label {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
    color: #334155;
    word-break: break-word;
    overflow-wrap: break-word;
}
.standup-page .allocate-job-multi-select .option label {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    line-height: 1.4;
}

.standup-page .allocate-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; align-self: flex-start; }
.standup-page .allocate-btn-apply { display: inline-flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 1.5rem; font-weight: 600; font-size: 0.9375rem; border-radius: 10px; background: var(--standup-primary); border: none; color: #fff; cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; box-shadow: 0 1px 2px rgba(14, 165, 233, 0.25); }
.standup-page .allocate-btn-apply:hover { background: var(--standup-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3); }
.standup-page .allocate-btn-apply:focus { outline: none; }
.standup-page .allocate-btn-apply:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--standup-primary); }
.standup-page .allocate-btn-icon { font-size: 1rem; line-height: 1; opacity: 0.95; }
.standup-page .allocate-btn-cancel { height: 2.75rem; padding: 0 1.25rem; font-weight: 500; font-size: 0.9375rem; border-radius: 10px; background: transparent; border: 1px solid var(--standup-border); color: #64748b; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.standup-page .allocate-btn-cancel:hover { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
.standup-page .allocate-form-hidden { position: absolute; left: -9999px; }

/* Allocate tab – empty state */
.standup-page .allocate-table-wrap { margin-top: 0.5rem; max-width: 100%; overflow: hidden; }
.standup-page .allocate-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--standup-muted);
  font-size: 0.9375rem;
  border: 1px dashed var(--standup-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  min-height: 140px;
}
.standup-page .allocate-table-empty.hide { display: none !important; }
.standup-page .allocate-empty-icon {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 0.75rem;
  border: 2px dashed var(--standup-primary);
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
}
.standup-page .allocate-empty-text { margin: 0; line-height: 1.55; max-width: 28rem; }

/* Allocate tab – table */
.standup-page .allocate-table-loaded.hide { display: none !important; }
.standup-page .allocate-table-scroll {
  overflow-x: hidden;
  border-radius: 14px;
  border: 1px solid var(--standup-border);
  background: #fff;
  box-shadow: 0 2px 12px rgba(2, 132, 199, 0.08);
  max-width: 100%;
}
.standup-page .allocate-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; table-layout: fixed; }
.standup-page .allocate-table th {
  text-align: left;
  padding: 0.875rem 0.75rem;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  color: var(--standup-primary);
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--standup-border);
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
}
.standup-page .allocate-table td { padding: 0.875rem 0.75rem; border-bottom: 1px solid #f1f5f9; color: #1e293b; vertical-align: middle; transition: background 0.15s; word-wrap: break-word; overflow-wrap: break-word; min-width: 0; }
.standup-page .allocate-table-with-assigned .col-sno { width: 3.5rem; }
.standup-page .allocate-table-with-assigned .col-assigned { width: 10%; max-width: 120px; }
.standup-page .allocate-table-with-assigned .col-job { width: 18%; }
.standup-page .allocate-table-with-assigned .col-customer { width: 16%; }
.standup-page .allocate-table-with-assigned .col-headcount { width: 4.5rem; }
.standup-page .allocate-table-with-assigned .col-budget { width: 6rem; }
.standup-page .allocate-table-with-assigned .col-candidates { width: 18%; }
.standup-page .allocate-table-with-assigned .col-notes { width: auto; min-width: 100px; }
.standup-page .allocate-table tbody tr:hover { background: #f8fafc; }
.standup-page .allocate-table tbody tr:last-child td { border-bottom: none; }
.standup-page .allocate-table .allocate-link { color: var(--standup-primary); font-weight: 600; text-decoration: none; border-radius: 4px; padding: 0.1rem 0; }
.standup-page .allocate-table .allocate-link:hover { text-decoration: underline; color: var(--standup-primary-hover); }
.standup-page .allocate-cell-candidates { white-space: normal; }
.standup-page .allocate-candidates-bubbles { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.standup-page .allocate-candidates-bubbles .allocate-bubble { display: inline-block; margin: 0; }
.standup-page .allocate-bubble { display: inline-block; padding: 0.25rem 0.6rem; border-radius: 8px; font-size: 0.8125rem; font-weight: 600; text-decoration: none; margin-right: 0.4rem; margin-bottom: 0.25rem; transition: opacity 0.2s, transform 0.1s, box-shadow 0.15s; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.standup-page .allocate-bubble:hover { opacity: 0.92; transform: translateY(-0.5px); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.standup-page .allocate-bubble-internal { background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%); color: #1e40af; }
.standup-page .allocate-bubble-customer { background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%); color: #166534; }
.standup-page .allocate-bubble-hr { background: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%); color: #92400e; }
.standup-page .allocate-cell-notes { max-width: 220px; font-size: 0.875rem; color: #334155; line-height: 1.4; }
.standup-page .allocate-cell-notes-input { min-width: 0; }
.standup-page .allocate-notes-input { width: 100%; max-width: 100%; min-width: 0; padding: 0.5rem 0.65rem; font-size: 0.875rem; border: 1px solid var(--standup-border); border-radius: 8px; resize: vertical; min-height: 2.5rem; font-family: inherit; box-sizing: border-box; }
.standup-page .allocate-notes-input:focus { outline: none; border-color: var(--standup-primary); box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.18); }
.standup-page .allocate-notes-input::placeholder { color: #94a3b8; }
.standup-page .allocate-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f1f5f9; }
.standup-page .allocate-table-actions.hide { display: none !important; }
.standup-page .allocate-btn-save { padding: 0.5rem 1.25rem; font-weight: 600; border-radius: 10px; }
.standup-page .allocate-btn-clear { padding: 0.5rem 1.25rem; border-radius: 10px; background: transparent; border: 1px solid var(--standup-border); color: #64748b; }
.standup-page .allocate-btn-clear:hover { background: #f1f5f9; color: #334155; }
.standup-page .allocate-table td:first-child { color: #475569; font-variant-numeric: tabular-nums; font-weight: 500; }

/* Assigned today – view only section */
.standup-page .assigned-today-section { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--standup-border); }
/* Allocation History tab – modern layout */
.standup-page .standup-panel-allocation-history .standup-section-title { margin-bottom: 0.25rem; }
.standup-page .allocation-history-header-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; }
.standup-page .allocation-history-header-left { flex: 1 1 auto; min-width: 0; }
.standup-page .allocation-history-header-left .allocation-history-title { margin-bottom: 0.2rem; }
.standup-page .allocation-history-desc { margin: 0; font-size: 0.9375rem; }
.standup-page .allocation-history-header-right { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1.25rem; flex-shrink: 0; }
.standup-page .allocation-history-filter-group { display: flex; flex-direction: column; gap: 0.35rem; }
.standup-page .allocation-history-duration-wrap { flex-shrink: 0; }
.standup-page .allocation-history-filter-label { font-size: 0.6875rem; font-weight: 700; color: var(--standup-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.standup-page .allocation-history-duration-select { width: 100%; min-width: 180px; max-width: 240px; height: 2.5rem; padding: 0.4rem 2.25rem 0.4rem 0.75rem; font-size: 0.9375rem; border: 1px solid var(--standup-border); border-radius: 10px; background: var(--standup-surface); color: #0f172a; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1.15rem; transition: border-color 0.2s, box-shadow 0.2s; }
.standup-page .allocation-history-duration-select:hover { border-color: #cbd5e1; }
.standup-page .allocation-history-duration-select:focus { outline: none; border-color: var(--standup-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); }
.standup-page .allocation-history-custom-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; }
.standup-page .allocation-history-date { width: 100%; min-width: 140px; height: 2.5rem; padding: 0.4rem 0.75rem; font-size: 0.9375rem; border: 1px solid var(--standup-border); border-radius: 10px; background: var(--standup-surface); color: #0f172a; transition: border-color 0.2s, box-shadow 0.2s; }
.standup-page .allocation-history-date:hover { border-color: #cbd5e1; }
.standup-page .allocation-history-date:focus { outline: none; border-color: var(--standup-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2); }
.standup-page .allocation-history-date-section { margin-top: 2rem; animation: allocationHistoryFadeIn 0.3s ease; }
.standup-page .allocation-history-date-section:first-child { margin-top: 0; }
@keyframes allocationHistoryFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.standup-page .allocation-history-date-header { margin-bottom: 0.75rem; }
.standup-page .allocation-history-date-badge {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  color: #0c4a6e;
  letter-spacing: -0.02em;
  padding: 0.4rem 0.85rem;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid var(--standup-border);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.12);
}
.standup-page .allocation-history-table-card {
  border-radius: 14px;
  border: 1px solid var(--standup-border);
  background: #fff;
  box-shadow: 0 2px 12px rgba(2, 132, 199, 0.08);
  overflow: hidden;
}
.standup-page .allocation-history-table-scroll { overflow-x: auto; max-width: 100%; }
.standup-page .allocation-history-table-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.5rem 0.9rem 0.8rem;
  border-top: 1px solid var(--standup-border);
  background: linear-gradient(180deg, #fafbfc 0%, #f8fafc 100%);
}
.standup-page .allocation-history-table-footer .allocate-copy-table-btn { margin: 0; }
.standup-page .allocation-history-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.standup-page .allocation-history-table th {
  text-align: left;
  padding: 1rem 1.25rem;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  color: var(--standup-primary);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--standup-border);
}
.standup-page .allocation-history-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--standup-border); color: #1e293b; vertical-align: middle; transition: background 0.15s, color 0.15s; }
.standup-page .allocation-history-table tbody tr:hover { background: #f8fafc; }
.standup-page .allocation-history-table tbody tr:last-child td { border-bottom: none; }
.standup-page .allocation-history-user { font-weight: 600; color: #0f172a; }
.standup-page .allocation-history-job-link { color: var(--standup-primary); font-weight: 600; text-decoration: none; border-radius: 6px; padding: 0.15rem 0.25rem; margin: -0.15rem -0.25rem; transition: color 0.15s, background 0.15s; }
.standup-page .allocation-history-job-link:hover { color: var(--standup-primary-hover); background: rgba(14, 165, 233, 0.08); text-decoration: none; }
.standup-page .allocation-history-cell-customer { font-size: 0.9375rem; color: #334155; }
.standup-page .allocation-history-end-client { color: #475569; font-size: 0.875rem; }
.standup-page .allocation-history-cell-meta { font-variant-numeric: tabular-nums; color: #334155; font-size: 0.9375rem; }
.standup-page .allocation-history-notes { font-size: 0.875rem; color: #334155; line-height: 1.45; max-width: 240px; }
.standup-page .allocation-history-no-range.hide { display: none !important; }
.standup-page .allocation-history-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--standup-border);
  border-radius: 14px;
  background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
  margin-top: 1rem;
}
.standup-page .allocation-history-empty-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border: 2px dashed var(--standup-primary);
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
}
.standup-page .allocation-history-empty-text { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; color: #475569; }
.standup-page .allocation-history-empty-hint { margin: 0; font-size: 0.9375rem; color: var(--standup-muted); line-height: 1.5; max-width: 22rem; }
.standup-page .assigned-today-header { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
.standup-page .assigned-today-title { font-size: 1.125rem; font-weight: 700; color: #0f172a; margin: 0; }
.standup-page .assigned-today-date { font-size: 0.9375rem; color: #64748b; }
.standup-page .assigned-today-table-wrap { margin-top: 0.5rem; }
.standup-page .assigned-today-table { margin-bottom: 0; }
.standup-page .assigned-today-empty { margin: 0; padding: 1rem 0; color: var(--standup-muted); font-size: 0.9375rem; }
.standup-page .assigned-today-saved-hint { margin: 0 0 0.75rem 0; font-size: 0.9375rem; }
.standup-page .assigned-today-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.standup-page .allocate-copy-table-btn { font-size: 0.875rem; padding: 0.4rem 1rem; }
.standup-page .assigned-today-col-remove { width: 2.5rem; text-align: center; }
.standup-page .assigned-today-cell-remove { width: 2.5rem; text-align: center; vertical-align: middle; }
.standup-page .assigned-today-remove-form { display: inline; }
.standup-page .assigned-today-remove-btn {
  width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--standup-border); border-radius: 6px;
  background: #fff; color: #64748b; font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.standup-page .assigned-today-remove-btn:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

@media (max-width: 768px) {
    .standup-page .allocate-toolbar-labels-row .allocate-field-label:first-child,
    .standup-page .allocate-toolbar-labels-row .allocate-field-label:nth-child(2) { width: auto; min-width: 0; }
    .standup-page .allocate-toolbar-row { flex-direction: column; align-items: stretch; }
    .standup-page .allocate-field-wrap.allocate-field-user { width: 100%; }
    .standup-page .allocate-field-wrap.allocate-field-job { min-width: 0; }
    .standup-page .allocate-job-multi-select { min-width: 0; }
    .standup-page .allocation-history-header-row { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-bottom: 1rem; }
    .standup-page .allocation-history-header-right { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
    .standup-page .allocation-history-duration-select { max-width: none; min-width: 0; }
    .standup-page .allocation-history-custom-dates { flex-direction: row; align-items: flex-end; }
    .standup-page .allocation-history-date { min-width: 0; }
    .standup-page .allocation-history-table th,
    .standup-page .allocation-history-table td { padding: 0.75rem 0.875rem; font-size: 0.875rem; }
    .standup-page .allocate-actions { margin-top: 0.25rem; }
}

/* Empty states */
.standup-page #allocate-empty, .standup-page #tasks-empty, .standup-page .allocate-table-empty { padding: 1.5rem; text-align: center; color: var(--standup-muted); font-size: 0.9375rem; border: 1px dashed var(--standup-border); border-radius: var(--standup-radius); background: var(--standup-bg); }
.standup-page #review-content-placeholder { text-align: center; padding: 2rem 1rem; }

.candidates-page .candidates-section-list {
    margin-top: 0;
}
.candidates-page .candidates-toolbar-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
}
.candidates-page .candidates-search-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.candidates-page .candidates-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.75rem;
    min-height: 2.75rem;
}
.candidates-page .candidates-search-input {
    width: 100%;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    padding-right: 2.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #fff;
    font-size: 0.9375rem;
    color: var(--text-primary);
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.candidates-page .candidates-search-input::placeholder {
    color: #94a3b8;
}
.candidates-page .candidates-search-input:hover {
    border-color: #cbd5e1;
}
.candidates-page .candidates-search-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.candidates-page .candidates-search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.candidates-page .candidates-search-input:focus ~ .candidates-search-icon {
    color: #0ea5e9;
}
/* Search box: x at end to clear – show only when has text */
.candidates-page .candidates-search-input-wrap .candidates-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.candidates-page .candidates-search-input-wrap.candidates-search-has-text .candidates-search-clear {
    display: flex;
}
.candidates-page .candidates-search-input-wrap .candidates-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.candidates-page .candidates-search-input-wrap .candidates-search-clear svg { display: block; }
/* Hide browser's native search clear (x) so only our custom clear shows */
.candidates-page .candidates-search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.candidates-page .candidates-search-input::-ms-clear { display: none; }
.candidates-page .candidates-search-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #64748b;
}
.candidates-page .candidates-search-hint code {
    font-size: 0.85em;
    padding: 0.15em 0.4em;
    background: #f1f5f9;
    border-radius: 4px;
    color: #475569;
}
.candidates-page .candidates-toolbar-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.candidates-page .candidates-toolbar-buttons .candidates-toggle-filters,
.candidates-page .candidates-toolbar-buttons .btn {
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.875rem;
}
.candidates-page .open-pool-filter-panel {
    margin-top: 0.75rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}
.candidates-page .candidates-section-list .table-responsive-candidates {
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.candidates-page #candidates-table {
    width: 100%;
    border-collapse: collapse;
}
.candidates-page #candidates-table thead {
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-bottom: 2px solid #bae6fd;
}
.candidates-page #candidates-table thead th {
    padding: 1rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #0369a1;
    text-align: left;
}
.candidates-page #candidates-table tbody tr.candidate-row {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.15s ease;
    background: #fff;
}
.candidates-page #candidates-table tbody tr.candidate-row:hover,
.candidates-page #candidates-table tbody tr.candidate-row:hover + tr.candidate-row-merged {
    background: #f0f9ff !important;
}
.candidates-page #candidates-table tbody tr.candidate-row td {
    padding: 1rem 1.25rem;
    font-size: 0.9375rem;
    vertical-align: middle;
}
.candidates-page #candidates-table tbody td .link-strong {
    font-weight: 600;
    color: #0284c7;
    text-decoration: none;
}
.candidates-page #candidates-table tbody td .link-strong:hover {
    text-decoration: underline;
}
.candidates-page #candidates-table .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}
.candidates-page tr.candidate-row-merged {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0;
}
.candidates-page tr.candidate-row-merged td {
    padding: 0.5rem 1.25rem 1rem 3rem;
    font-size: 0.8125rem;
    border-top: none;
    vertical-align: top;
}
.candidates-page .table-hover tbody tr.candidate-row:hover + tr.candidate-row-merged {
    background: #f0f9ff !important;
}
.candidates-page .table-footer-pagination {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border-radius: 12px;
}

@media (max-width: 768px) {
    .candidates-page .candidates-toolbar-row {
        flex-direction: column;
        align-items: stretch;
    }
    .candidates-page .candidates-toolbar-buttons {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .open-pool-filters-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .open-pool-filters-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .candidates-filters-row {
        grid-template-columns: 1fr;
    }
    .candidates-filters-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* Interviews: two-column layout + filters + table */
.interviews-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 1.5rem;
    margin-top: 1rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .interviews-layout { grid-template-columns: 1fr; }
}
.interviews-main .card { margin-bottom: 0; }
.interviews-search-row {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.interviews-search-wrap { flex: 1; min-width: 200px; display: flex; align-items: stretch; }
.interviews-search-wrap .interviews-search-input {
    flex: 1;
    min-width: 0;
}
.interviews-search-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.95rem;
    height: 2.375rem;
    box-sizing: border-box;
}
.interviews-filter-btn {
    align-self: stretch;
    height: 2.375rem;
    padding: 0 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
    flex-shrink: 0;
}
/* Interviews table: date on top, time below */
/* Interviews table: full-width row divider (on tr so line spans entire row) */
#interviews-table tbody tr {
    border-bottom: 1px solid var(--border-color);
}
#interviews-table tbody td {
    vertical-align: top;
    border-bottom: none;
}
.interview-date-time-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    white-space: nowrap;
    vertical-align: top;
}
.interview-date-line { font-weight: 500; }
.interview-time-line { font-size: 0.85rem; color: var(--text-secondary); }
.interview-rating-feedback-cell {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    white-space: nowrap;
    min-width: 0;
}
.interview-rating-value { font-size: 0.9rem; }
.interview-row-feedback-link {
    font-size: 0.8rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}
.interview-row-feedback-link:hover { text-decoration: underline; }
/* Today's interviews: time block with AM/PM + short date */
.interviews-today-time-block {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 4.5rem;
}
.interviews-today-time-block .interviews-today-time {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
}
.interviews-today-date-small {
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.interviews-filter-panel {
    padding: 1rem;
    background: var(--background);
    border-radius: var(--radius);
    margin-bottom: 0.75rem;
}
.interviews-filter-panel.hide { display: none; }
.interviews-filters-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}
.interviews-filters-inline .form-group {
    margin-bottom: 0;
}
.interviews-filters-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
/* Push filter actions to the right when space available (reusable) */
.filters-actions-right {
    margin-left: auto;
}
.interviews-filters-actions .btn.btn-sm {
    padding: 0.35rem 0.65rem;
    font-size: 0.8125rem;
}
/* Button text always horizontally & vertically centered */
.btn-center,
.interviews-filter-btn,
.interviews-filters-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}
.interviews-sidebar { position: sticky; top: 1rem; }
.interviews-today-card .card-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.interviews-today-card .card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.interviews-today-card .card-body { padding: 1.25rem; }
.interviews-today-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.interviews-today-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-color);
}
.interviews-today-item:last-child { border-bottom: none; }
/* Left: time on top, clear gap, then smaller View button */
.interviews-today-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
}
.interviews-today-view {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    white-space: nowrap;
}
/* Right: all info stacked neatly with breathing room */
.interviews-today-detail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.interviews-today-name { display: block; margin: 0; font-size: 0.95rem; }
.interviews-today-meta-line {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.interviews-today-meta-line:empty { display: none; }
.interviews-today-detail .text-muted { font-size: 0.85rem; display: block; }

/* Candidate portal: simplified, branded view (no ATS chrome) */
body.candidate-portal .topbar,
body.candidate-portal .app-layout > .sidebar,
body.candidate-portal footer {
    display: none;
}

body.candidate-portal .app-layout {
    padding-top: 0;
    min-height: 100vh;
}

body.candidate-portal main.container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.candidate-portal {
    min-height: 100vh;
    background: radial-gradient(circle at top left, #e0f2fe 0, #f9fafb 45%, #e5e7eb 100%);
    padding: 5px 0.75rem 1.0rem;
}

.candidate-portal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 960px;
    margin: 0 auto 1rem;
    padding: 0.5rem 0.85rem;
    border-radius: 0.75rem;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    position: sticky;
    top: 5px;
    z-index: 20;
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.96);
}

.candidate-portal-logo {
    height: 40px;
    width: auto;
}

.candidate-portal-brand {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 0.9rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(148, 163, 184, 0.4);
}

.candidate-portal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0f172a;
}

.candidate-portal-culture h2 {
    font-size: 0.98rem;
    margin: 0 0 0.2rem;
    color: #0f172a;
}

.candidate-portal-culture p {
    margin: 0;
    font-size: 0.82rem;
    color: #475569;
    max-width: 360px;
}

.candidate-portal-main {
    max-width: 960px;
    margin: 0 auto;
}

.candidate-portal-card {
    max-width: 960px;
    margin: 0 auto;
    border-radius: 1rem;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.35);
}

.candidate-portal-card .card-header {
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 50%, #f9fafb 100%);
}

.candidate-portal-card .card-body {
    background: #ffffff;
}

.candidate-portal-disclaimer {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px 0.8rem;
    border-radius: 0.75rem;
    background: #fefce8;
    border: 1px solid #facc15;
    font-size: 0.82rem;
    color: #713f12;
}

.candidate-portal-disclaimer label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.candidate-portal-disclaimer input[type="checkbox"] {
    margin-top: 0.2rem;
}

.pre-onboarding-candidate-preview {
    margin-top: 0.9rem;
    padding: 0.7rem 0.75rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #f9fafb 0%, #eff6ff 40%, #e0f2fe 100%);
    border: 1px solid rgba(148, 163, 184, 0.45);
}

.pre-onboarding-preview-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.pre-onboarding-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem 0.75rem;
}

.pre-onboarding-preview-item {
    min-width: 0;
}

.pre-onboarding-preview-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 0.1rem;
}

.pre-onboarding-preview-value {
    font-size: 0.86rem;
    color: #0f172a;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pre-onboarding-preview-value.muted {
    color: #64748b;
    font-weight: 400;
    grid-column: span 3;
    white-space: normal;
}

.pre-onboarding-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

.pre-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    font-size: 0.78rem;
    color: #64748b;
}

.pre-step-num {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    font-size: 0.72rem;
    font-weight: 600;
    color: #111827;
}

.pre-step-label {
    white-space: nowrap;
}

.pre-step.active {
    border-color: #0ea5e9;
    background: #ecfeff;
    color: #0369a1;
}

.pre-step.active .pre-step-num {
    background: #0ea5e9;
    color: #f9fafb;
}

.pre-step.completed {
    border-color: #22c55e;
    background: #f0fdf4;
    color: #15803d;
}

.pre-step.completed .pre-step-num {
    background: #22c55e;
    color: #f0fdf4;
}

.pre-step.pre-step--locked {
    opacity: 0.48;
    cursor: not-allowed;
    pointer-events: none;
}

.pre-onboarding-wizard-actions {
    margin-top: 1.35rem;
    padding-top: 1.1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.65rem;
}

.pre-onboarding-wizard-actions-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    margin-left: auto;
    flex: 1 1 auto;
    min-width: min(100%, 10rem);
}

/* Candidate pre-onboarding wizard footer — distinct modern actions */
.pre-onboarding-wizard-actions .pre-wizard-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.2rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.25;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.pre-onboarding-wizard-actions .pre-wizard-act:focus {
    outline: none;
}

.pre-onboarding-wizard-actions .pre-wizard-act:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(14, 165, 233, 0.4);
}

.pre-onboarding-wizard-actions .pre-wizard-act--back {
    color: #475569;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-color: #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.pre-onboarding-wizard-actions .pre-wizard-act--back:hover {
    color: #0f172a;
    background: #f1f5f9;
    border-color: #94a3b8;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.pre-onboarding-wizard-actions .pre-wizard-act--back:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.pre-onboarding-wizard-actions .pre-wizard-act--draft {
    color: #713f12;
    background: linear-gradient(165deg, #fffbeb 0%, #fef3c7 50%, #fde68a 100%);
    border-color: #fbbf24;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 1px 3px rgba(180, 83, 9, 0.12);
}

.pre-onboarding-wizard-actions .pre-wizard-act--draft:hover {
    color: #451a03;
    background: linear-gradient(165deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
    border-color: #d97706;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 4px 14px rgba(217, 119, 6, 0.2);
    transform: translateY(-1px);
}

.pre-onboarding-wizard-actions .pre-wizard-act--draft:active {
    transform: translateY(0);
}

.pre-onboarding-wizard-actions .pre-wizard-act--draft:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(245, 158, 11, 0.45);
}

.pre-onboarding-wizard-actions .pre-wizard-act--next {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-color: #0369a1;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 10px rgba(14, 165, 233, 0.35);
}

.pre-onboarding-wizard-actions .pre-wizard-act--next:hover {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 6px 18px rgba(14, 165, 233, 0.42);
    transform: translateY(-1px);
}

.pre-onboarding-wizard-actions .pre-wizard-act--next:active {
    transform: translateY(0);
}

.pre-onboarding-wizard-actions .pre-wizard-act--submit {
    color: #fff;
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 45%, #0f766e 100%);
    border-color: #0f766e;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 12px rgba(13, 148, 136, 0.38);
}

.pre-onboarding-wizard-actions .pre-wizard-act--submit:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 50%, #115e59 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 6px 22px rgba(13, 148, 136, 0.45);
    transform: translateY(-1px);
}

.pre-onboarding-wizard-actions .pre-wizard-act--submit:active {
    transform: translateY(0);
}

.pre-onboarding-wizard-actions .pre-wizard-act--submit:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(20, 184, 166, 0.45);
}

@media (max-width: 520px) {
    .pre-onboarding-wizard-actions-right {
        justify-content: stretch;
        width: 100%;
    }

    .pre-onboarding-wizard-actions .pre-wizard-act {
        flex: 1 1 auto;
        min-width: calc(50% - 0.3rem);
    }

    .pre-onboarding-wizard-actions .pre-wizard-act--submit {
        flex: 1 1 100%;
        min-width: 100%;
    }

    .pre-onboarding-wizard-actions .pre-wizard-act--back {
        flex: 1 1 auto;
    }
}

/* Address Details: visually separate current vs permanent blocks */
.job-form-section .pre-address-subsection {
    margin-top: 1.25rem;
    padding: 1rem 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.job-form-section .pre-address-subsection:first-of-type {
    margin-top: 0.75rem;
}

.job-form-section .pre-address-subsection + .pre-address-subsection {
    margin-top: 1.5rem;
}

.job-form-section .pre-address-subsection-title {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Pre-onboarding §10 — matches other job-form-section blocks; soft tint per document group */
.pre-doc-section .pre-doc-category {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 2px solid #334155;
    box-shadow: none;
}

.pre-doc-section .pre-doc-category + .pre-doc-category {
    margin-top: 0.65rem;
}

.pre-doc-section .pre-doc-category--identity {
    border-left-color: #7eb8e8;
}

.pre-doc-section .pre-doc-category--identity .pre-doc-category-head {
    background: #f0f7fd;
    border-bottom-color: #dceefa;
}

.pre-doc-section .pre-doc-category--education {
    border-left-color: #b8a9dc;
}

.pre-doc-section .pre-doc-category--education .pre-doc-category-head {
    background: #f5f2fb;
    border-bottom-color: #e8e2f5;
}

.pre-doc-section .pre-doc-category--employment {
    border-left-color: #7ebe9a;
}

.pre-doc-section .pre-doc-category--employment .pre-doc-category-head {
    background: #f2faf5;
    border-bottom-color: #dff0e8;
}

.pre-doc-section .pre-doc-category--address {
    border-left-color: #d4b896;
}

.pre-doc-section .pre-doc-category--address .pre-doc-category-head {
    background: #faf6f0;
    border-bottom-color: #efe8dd;
}

.pre-doc-section .pre-doc-category--photos {
    border-left-color: #e8a0b5;
}

.pre-doc-section .pre-doc-category--photos .pre-doc-category-head {
    background: #fdf4f7;
    border-bottom-color: #f3e4ea;
}

.pre-doc-section .pre-doc-category--additional {
    border-left-color: #9aa8b8;
}

.pre-doc-section .pre-doc-category--additional .pre-doc-category-head {
    background: #f4f6f9;
    border-bottom-color: #e6eaef;
}

.pre-doc-section .pre-doc-category-head {
    padding: 0.5rem 0.9rem;
    margin: 0;
    border-bottom: 1px solid #f1f5f9;
}

.pre-doc-section .pre-doc-category-head-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-width: 0;
}

.pre-doc-section .pre-doc-category-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.pre-doc-section .pre-doc-category-desc {
    margin: 0;
    flex: 0 0 auto;
    max-width: 45%;
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.4;
    text-align: right;
}

.pre-doc-section .pre-doc-category-body {
    padding: 0.4rem 0.9rem 0.55rem;
    background: #fff;
}

/* Employment proof: nested visual groups (no sub-headers), sage-tinted panels */
.pre-doc-section .pre-doc-category--employment .pre-doc-cluster {
    margin: 0;
    padding: 0.55rem 0.75rem 0.6rem;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 251, 247, 0.96) 100%);
    border: 1px solid rgba(126, 190, 154, 0.3);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.035);
}

.pre-doc-section .pre-doc-category--employment .pre-doc-cluster + .pre-doc-cluster {
    margin-top: 0.65rem;
}

.pre-doc-section .pre-doc-category--employment .pre-doc-cluster .form-row:last-child,
.pre-doc-section .pre-doc-category--employment .pre-doc-cluster .form-row-2:last-child,
.pre-doc-section .pre-doc-category--employment .pre-doc-cluster .form-row-3:last-child {
    margin-bottom: 0;
}

.pre-doc-section .pre-doc-category--employment .pre-doc-cluster .pre-doc-inline-hint {
    margin-top: 0;
    margin-bottom: 0.35rem;
}

.pre-doc-section .pre-doc-category--employment .pre-doc-cluster .pre-doc-repeatable {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pre-doc-section .pre-doc-category--employment .pre-doc-cluster .pre-doc-add-btn {
    margin-top: 0.35rem;
}

.pre-doc-section .pre-doc-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    padding: 0.08rem 0.35rem;
    margin: 0 0.06rem;
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    vertical-align: 0.05em;
}

.pre-doc-section .pre-doc-optional,
.pre-doc-section .pre-doc-hint {
    font-weight: 400;
    color: #64748b;
    font-size: 0.8em;
}

.pre-doc-section .pre-doc-inline-hint {
    font-size: 0.6875rem;
    color: #64748b;
    margin: 0.2rem 0 0.3rem;
    line-height: 1.4;
    max-width: 40rem;
}

.pre-doc-section .pre-doc-add-btn {
    margin-top: 0.45rem;
    padding: 0.42rem 1rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.015em;
    border-radius: 8px !important;
    color: #3a5560 !important;
    background: linear-gradient(
        165deg,
        #fafdfd 0%,
        #eef6f6 42%,
        #e8f1f4 100%
    ) !important;
    border: 1px solid #a8c5cc !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 1px 3px rgba(45, 100, 110, 0.07);
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.pre-doc-section .pre-doc-add-btn:hover {
    color: #2a4250 !important;
    background: linear-gradient(
        165deg,
        #f2f9f9 0%,
        #e4f0f2 50%,
        #dceaeb 100%
    ) !important;
    border-color: #7eb0bc !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.65) inset,
        0 2px 10px rgba(45, 100, 110, 0.1);
}

.pre-doc-section .pre-doc-add-btn:active {
    background: #dce9eb !important;
    border-color: #6fa0ad !important;
    box-shadow: 0 1px 2px rgba(45, 100, 110, 0.08);
}

.pre-doc-section .pre-doc-add-btn:focus {
    outline: none;
    box-shadow:
        0 0 0 2px #fff,
        0 0 0 4px rgba(110, 168, 182, 0.4);
}

.pre-doc-section .pre-doc-add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05rem;
    height: 1.05rem;
    margin-right: 0.38rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 5px;
    background: rgba(72, 130, 145, 0.16);
    color: #356a78;
    opacity: 1;
}

.pre-doc-section .pre-doc-add-btn:hover .pre-doc-add-icon {
    background: rgba(53, 106, 120, 0.22);
    color: #2a5662;
}

.pre-doc-section .pre-doc-category-body > .pre-doc-repeatable {
    margin-top: 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid #f1f5f9;
}

.pre-doc-section .pre-doc-category-body > .pre-doc-repeatable:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pre-doc-section .pre-doc-row-remove {
    flex-shrink: 0;
    margin-left: 0.2rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.pre-doc-section .pre-doc-row-remove:hover {
    color: #0f172a;
    background: #f1f5f9;
    border-color: #e2e8f0;
}

.pre-doc-section .pre-doc-repeat-rows > .form-row.pre-doc-repeat-row + .form-row.pre-doc-repeat-row {
    margin-top: 0.15rem;
    padding-top: 0.35rem;
    border-top: 1px solid #f1f5f9;
}

/* Salary slips: two uploads per row (JS still appends one .pre-doc-repeat-row per slip) */
.pre-doc-section .pre-doc-repeatable[data-repeat-group="salary"] .pre-doc-repeat-rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.65rem;
    align-items: start;
}

.pre-doc-section .pre-doc-repeatable[data-repeat-group="salary"] .pre-doc-repeat-rows > .form-row.pre-doc-repeat-row {
    display: contents;
}

.pre-doc-section .pre-doc-repeatable[data-repeat-group="salary"] .pre-doc-repeat-rows > .form-row.pre-doc-repeat-row + .form-row.pre-doc-repeat-row {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.pre-doc-section .pre-doc-repeatable[data-repeat-group="salary"] .pre-doc-repeat-rows .form-group {
    margin-bottom: 0;
}

/* Allow grid columns to shrink so long filenames don’t push siblings (min-width: auto default) */
.pre-doc-section .form-row .form-group,
.pre-doc-section .form-row-2 .form-group,
.pre-doc-section .form-row-3 .form-group {
    min-width: 0;
}

/* One outlined “compound field”: upload + details share a single modern border */
.pre-doc-section .form-group:has(.pre-doc-meta) {
    padding: 0;
    margin-bottom: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 4px 16px rgba(15, 23, 42, 0.04);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.pre-doc-section .form-group:has(.pre-doc-meta):focus-within {
    border-color: #7eb8f7;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.2),
        0 4px 20px rgba(15, 23, 42, 0.07);
}

.pre-doc-section .form-group:has(.pre-doc-meta) > label:first-of-type {
    display: block;
    padding: 0.75rem 1rem 0.5rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.35;
    border-bottom: 1px solid #f1f5f9;
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}

.pre-doc-section .form-group:has(.pre-doc-meta) > .pre-doc-input-wrap {
    padding: 0.65rem 1rem;
    margin: 0;
    background: #f8fafc;
    border-bottom: 1px solid #e8edf3;
}

.pre-doc-section .form-group:has(.pre-doc-meta) > .pre-doc-input-wrap.pre-doc-input-wrap--filled {
    background: linear-gradient(180deg, #f0fdf4 0%, #f8fafc 100%);
}

.pre-doc-section .form-group:has(.pre-doc-meta) > .pre-doc-meta {
    margin-top: 0;
    padding: 0.65rem 1rem 0.9rem;
    background: #fff;
}

.pre-doc-section .form-group:has(.pre-doc-meta) label.pre-doc-choose-proxy {
    border: 1px dashed #c5cdd8;
    background: #fff;
    border-radius: 10px;
    box-shadow: none;
    min-height: 2.35rem;
    padding: 0.4rem 0.75rem;
}

.pre-doc-section .form-group:has(.pre-doc-meta) label.pre-doc-choose-proxy:hover {
    border-color: #94a3b8;
    border-style: dashed;
    background: #fff;
}

.pre-doc-section .form-group:has(.pre-doc-meta) label.pre-doc-choose-proxy--attached {
    border-style: solid;
    border-color: #86efac;
    background: #f7fef9;
}

.pre-doc-section .form-group:has(.pre-doc-meta) label.pre-doc-choose-proxy:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.pre-doc-section .form-group:has(.pre-doc-meta) .pre-doc-meta-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    margin-bottom: 0.4rem;
}

.pre-doc-section .form-group:has(.pre-doc-meta) .pre-doc-meta-input {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.pre-doc-section .form-group:has(.pre-doc-meta) .pre-doc-meta-input:hover {
    border-color: #cbd5e1;
    background: #fff;
}

.pre-doc-section .form-group:has(.pre-doc-meta) .pre-doc-meta-input:focus {
    border-color: #3b82f6;
    background: #fff;
    box-shadow:
        0 0 0 3px rgba(59, 130, 246, 0.15),
        inset 0 1px 2px rgba(15, 23, 42, 0.03);
}

.pre-doc-section .form-group:has(.pre-doc-meta) .pre-doc-meta-input.has-value {
    border-color: #86efac;
    background: #f7fef9;
}

.pre-doc-section .form-row-3 .form-group:has(.pre-doc-meta),
.pre-doc-section .form-row-2 .form-group:has(.pre-doc-meta) {
    height: 100%;
    align-self: stretch;
}

.pre-doc-section .pre-doc-input-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
    min-width: 0;
}

/* Per-document text detail (ID, date, reference) — under file picker, same column layout */
.pre-doc-section .pre-doc-meta {
    margin-top: 0.65rem;
    width: 100%;
    max-width: 100%;
}
.pre-doc-section .pre-doc-meta-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}
.pre-doc-section .pre-doc-meta-input {
    width: 100%;
    max-width: 100%;
    min-height: 2.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pre-doc-section .pre-doc-meta-input::placeholder {
    color: #94a3b8;
}
.pre-doc-section .pre-doc-meta-input:hover {
    border-color: #94a3b8;
}
.pre-doc-section .pre-doc-meta-input:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
    background: #fafbff;
}
.pre-doc-section .pre-doc-meta-input.has-value {
    border-color: #86efac;
    background: #f7fef9;
}

.pre-doc-chip {
    min-width: 0;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    font-size: 0.78rem;
    color: #64748b;
    background: #f8fafc;
    display: none;
}

.pre-doc-chip.has-file {
    display: inline-flex;
}

.pre-doc-chip-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Compact file control: filename on proxy, ✓ in chip; native input visually hidden */
.pre-doc-section .pre-doc-input-wrap input[type="file"].pre-doc-file-native-compact {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.pre-doc-section label.pre-doc-choose-proxy {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.125rem;
    line-height: 1.25;
    padding: 0.35rem 0.875rem;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.pre-doc-section .pre-doc-choose-proxy-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    opacity: 0.92;
}

.pre-doc-section label.pre-doc-choose-proxy:hover .pre-doc-choose-proxy-icon {
    color: #0066cc;
}

.pre-doc-section label.pre-doc-choose-proxy--attached .pre-doc-choose-proxy-icon {
    color: #16a34a;
    opacity: 1;
}

.pre-doc-section .pre-doc-choose-proxy-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pre-doc-section label.pre-doc-choose-proxy:hover {
    border-color: #64748b;
    background: #f8fafc;
    color: #0f172a;
}

.pre-doc-section label.pre-doc-choose-proxy:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 102, 204, 0.3);
}

.pre-doc-section label.pre-doc-choose-proxy--attached {
    border-color: #86efac;
    background: #f7fef9;
    color: #166534;
}

.pre-doc-section .pre-doc-file-clear {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94a3b8;
    background: linear-gradient(180deg, #fafafa 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.05);
    transition:
        border-color 0.16s ease,
        color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.pre-doc-section .pre-doc-file-clear:hover {
    color: #dc2626;
    background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
    border-color: #ef4444;
    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
}

.pre-doc-section .pre-doc-file-clear:focus {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(239, 68, 68, 0.35);
}

.pre-doc-section .pre-doc-chip.has-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.25rem;
    border: 1px solid #bbf7d0;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: #166534;
    background: #ecfdf5;
    border-radius: 6px;
}

.pre-doc-section .pre-doc-chip.has-file .pre-doc-chip-name {
    max-width: none;
    overflow: visible;
    text-overflow: unset;
}

@media (max-width: 640px) {
    .pre-doc-section .pre-doc-category-body {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .pre-doc-section .pre-doc-category--employment .pre-doc-cluster {
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }

    .pre-doc-section .pre-doc-category-head {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
    }

    .pre-doc-section .pre-doc-input-wrap {
        flex-wrap: wrap;
    }

    .pre-doc-section label.pre-doc-choose-proxy {
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

    .pre-doc-section .pre-doc-repeatable[data-repeat-group="salary"] .pre-doc-repeat-rows {
        grid-template-columns: 1fr;
    }
}

/* Pre-onboarding OTP page – login-style layout */
.pre-onboarding-login-page {
    min-height: 100vh;
    display: flex;
    background-color: var(--background, #0f172a);
}

body.pre-onboarding-login .topbar,
body.pre-onboarding-login .app-layout > .sidebar,
body.pre-onboarding-login footer {
    display: none;
}

body.pre-onboarding-login .app-layout {
    padding-top: 0;
    min-height: 100vh;
}

body.pre-onboarding-login main.container {
    max-width: 100%;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

.pre-onboarding-login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 45%, #9333ea 100%);
}

.pre-onboarding-login-brand {
    max-width: 260px;
    margin-bottom: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255,255,255,0.97);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(15,23,42,0.3);
}

.pre-onboarding-login-logo {
    width: 100%;
    height: auto;
    display: block;
}

.pre-onboarding-login-features {
    width: 100%;
    max-width: 320px;
}

.pre-onboarding-login-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.75rem 0;
    color: rgba(255,255,255,0.96);
}

.pre-onboarding-login-feature-icon {
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15,23,42,0.18);
    border-radius: 12px;
    flex-shrink: 0;
}

.pre-onboarding-login-feature h4 {
    font-size: 0.98rem;
    margin: 0 0 0.2rem;
}

.pre-onboarding-login-feature p {
    font-size: 0.82rem;
    opacity: 0.9;
    margin: 0;
}

.pre-onboarding-login-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 1.5rem;
    background: var(--surface, #f8fafc);
}

.pre-onboarding-login-card {
    width: 100%;
    max-width: 420px;
    padding: 2.25rem 2.5rem;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(148,163,184,0.45);
    box-shadow: 0 10px 35px rgba(15,23,42,0.12);
}

.pre-onboarding-login-card-header h1 {
    font-size: 1.6rem;
    margin: 0 0 0.4rem;
    color: #0f172a;
}

.pre-onboarding-login-card-header p {
    margin: 0;
    font-size: 0.9rem;
    color: #475569;
}

.pre-onboarding-email-chip {
    display: inline-flex;
    margin-top: 0.4rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    font-size: 0.8rem;
    color: #0f172a;
    background: #f8fafc;
}

.pre-onboarding-login-card-body {
    margin-top: 1.25rem;
}

.pre-onboarding-login-form .form-group {
    margin-bottom: 1rem;
}

.pre-onboarding-otp-boxes {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-start;
}

.pre-otp-box {
    width: 2rem;
    height: 2.5rem;
    text-align: center;
    font-size: 1.1rem;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    outline: none;
}

.pre-otp-box:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.2);
}

.pre-onboarding-otp-footer {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
}

.pre-onboarding-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.pre-onboarding-summary-header-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.pre-onboarding-search-wrap {
    position: relative;
    max-width: 260px;
    width: 100%;
}

.pre-onboarding-search-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #64748b;
}

.pre-onboarding-search-input {
    width: 100%;
    padding: 0.4rem 0.6rem 0.4rem 2rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    font-size: 0.875rem;
}

.pre-onboarding-search-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 1px rgba(14,165,233,0.2);
}

.pre-onboarding-summary-card {
    border-radius: 0.85rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.pre-onboarding-summary-card .card-body {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

/* Tabs: same row, no bullets, proper tab bar */
.pre-onboarding-tabs {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0.25rem;
    background: #f1f5f9;
    border-radius: 0.75rem;
    gap: 0.25rem;
    border: none;
}

.pre-onboarding-tabs .nav-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pre-onboarding-tabs .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    transition: color 0.15s ease, background 0.15s ease;
}

.pre-onboarding-tabs .nav-link:hover {
    color: #0f172a;
    background: rgba(255, 255, 255, 0.7);
}

.pre-onboarding-tabs .nav-link.active {
    color: #0369a1;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.pre-onboarding-tab-content {
    margin-top: 0;
}

.pre-onboarding-tab-content .tab-pane {
    padding: 0;
}

/* Filter by status (In Progress / Completed / All) – modern pill buttons */
.pre-onboarding-filter-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.pre-onboarding-filter-btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #475569;
    border: 2px solid #e2e8f0;
    border-radius: 9999px;
    background: #fff;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.pre-onboarding-filter-btn:hover {
    color: #0284c7;
    background: #f0f9ff;
    border-color: #7dd3fc;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}

.pre-onboarding-filter-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    border-color: #0284c7;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}

.pre-onboarding-filter-btn.active:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    border-color: #0369a1;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
    transform: translateY(-1px);
}

.pre-onboarding-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pre-onboarding-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    border-left-width: 4px;
    border-left-style: solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pre-onboarding-list-item.pre-onboarding-card-border-0 { border-left-color: #0284c7; }
.pre-onboarding-list-item.pre-onboarding-card-border-1 { border-left-color: #059669; }
.pre-onboarding-list-item.pre-onboarding-card-border-2 { border-left-color: #7c3aed; }
.pre-onboarding-list-item.pre-onboarding-card-border-3 { border-left-color: #c2410c; }
.pre-onboarding-list-item.pre-onboarding-card-border-4 { border-left-color: #be185d; }
.pre-onboarding-candidate-link {
    color: var(--primary-color, #0284c7);
    text-decoration: none;
}
.pre-onboarding-candidate-link:hover {
    text-decoration: underline;
}
.pre-onboarding-candidate-link strong {
    font-weight: 600;
}

.pre-onboarding-list-item + .pre-onboarding-list-item {
    margin-top: 0.6rem;
}

.pre-onboarding-list-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.pre-onboarding-list-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

.pre-onboarding-list-title strong {
    font-weight: 600;
    color: #0f172a;
}

.pre-onboarding-list-subtitle {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.05rem;
}

.pre-onboarding-list-email {
    font-size: 0.8125rem;
    margin-top: 0.35rem;
    color: #64748b;
}

.pre-onboarding-list-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.pre-onboarding-list-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pre-onboarding-list-meta .badge-soft {
    font-size: 0.72rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: #ecfeff;
    color: #0e7490;
}

/* Pre-onboarding card action buttons – modern, stand-out */
.pre-onboarding-list-meta .btn.btn-soft.btn-xs,
.pre-onboarding-list-meta .pre-onboarding-resend-btn,
.pre-onboarding-list-meta .pre-onboarding-copy-link-btn,
.pre-onboarding-list-meta .pre-onboarding-revoke-btn,
.pre-onboarding-list-meta .pre-onboarding-review-btn {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    min-height: 2rem;
    border-radius: 0.5rem;
    border-width: 1.5px;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pre-onboarding-list-meta .pre-onboarding-review-btn {
    color: #fff;
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-color: #059669;
}

.pre-onboarding-list-meta .pre-onboarding-review-btn:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    border-color: #047857;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35);
    transform: translateY(-1px);
}

.pre-onboarding-list-footer {
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #6b7280;
    text-align: right;
    position: absolute;
    right: 0.75rem;
    bottom: 0.45rem;
}

.pre-onboarding-revoke-btn {
    color: #fff;
    border-color: #dc2626;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 1px 3px rgba(185, 28, 28, 0.25);
}

.pre-onboarding-revoke-btn:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    border-color: #b91c1c;
    box-shadow: 0 2px 8px rgba(185, 28, 28, 0.4);
    transform: translateY(-1px);
}

.pre-onboarding-revoke-text {
    font-size: 0.8125rem;
    font-weight: 600;
}

.pre-onboarding-resend-btn {
    color: #fff;
    border-color: #d97706;
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    box-shadow: 0 1px 3px rgba(194, 65, 12, 0.25);
}

.pre-onboarding-resend-btn:hover {
    background: linear-gradient(135deg, #c2410c 0%, #9a3412 100%);
    border-color: #c2410c;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.35);
    transform: translateY(-1px);
}

.pre-onboarding-copy-link-btn {
    color: #fff;
    border-color: #0284c7;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 1px 3px rgba(2, 132, 199, 0.25);
}

.pre-onboarding-copy-link-btn:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    border-color: #0369a1;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
    transform: translateY(-1px);
}

.pre-onboarding-copy-link-btn .pre-onboarding-copy-tick {
    display: inline-flex;
    vertical-align: middle;
    margin-right: 0.35rem;
}

.pre-onboarding-copy-link-btn.pre-onboarding-copy-link-copied {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    border-color: #059669;
}

.pre-initiate-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Initiate onboarding – primary CTA stands out */
.pre-onboarding-init-form .btn-primary.btn-modern {
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border-width: 0;
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.pre-onboarding-init-form .btn-primary.btn-modern:hover {
    background: linear-gradient(135deg, #0369a1 0%, #075985 100%);
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
    transform: translateY(-2px);
}

/* Interviews page: modern presentation (layout and fields unchanged) */
.interviews-page .page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 40%, #a5f3fc 70%, #67e8f9 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-left: 4px solid #0891b2;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.12);
}
.interviews-page .page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0e7490;
    letter-spacing: -0.02em;
}
.interviews-page .page-header-desc {
    font-size: 0.9375rem;
    color: #0d9488;
    margin: 0;
    opacity: 0.9;
}
/* Dashboard tile context on interviews page (same pattern as jobs) */
.interviews-page .dashboard-tile-title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--tile-border, #e8e8ec);
    border-left: 3px solid var(--tile-accent, #2563eb);
    background: var(--tile-bg, linear-gradient(135deg, #f5f5f8 0%, #eef0f4 100%));
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.interviews-page .dashboard-tile-title-wrap .dashboard-tile-title-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-muted, #6b7280);
}
.interviews-page .dashboard-tile-title-wrap .dashboard-tile-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #1a1a1f);
    margin: 0;
}
.interviews-page .dashboard-tile-title-wrap--interviews {
    --tile-accent: #0d9488;
    --tile-border: #99f6e4;
    --tile-bg: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
}
.interviews-page .interviews-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.interviews-page .btn-schedule-interview {
    border-radius: var(--radius);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 102, 204, 0.2);
}
.interviews-page .btn-schedule-interview:hover {
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}
/* Custom duration: From/To below filters row, one row, aligned right (like dashboard) */
.interviews-page .interviews-duration-custom-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    padding-right: 80px;
    border-top: 1px solid #e2e8f0;
}
.interviews-page .interviews-duration-custom-row .interviews-filter-group {
    margin-bottom: 0;
    min-width: 0;
    flex: 0 0 auto;
}
.interviews-page .interviews-duration-custom-row .form-control {
    min-width: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
}
@media (max-width: 640px) {
    .interviews-page .interviews-duration-custom-row {
        justify-content: flex-start;
        padding-right: 0;
    }
}
/* Interviews page: contained width (slightly narrower than full bleed), filters still one row */
main.container:has(.interviews-page) {
    max-width: 1320px;
    width: 100%;
}
.interviews-page {
    overflow-x: hidden;
    max-width: 100%;
    width: 100%;
}

/* Tasks hub — hero header, filters row, and toolbar (aligned with Interviews) */
.tasks-page {
    overflow-x: visible;
    max-width: 100%;
    width: 100%;
    padding-bottom: 3rem;
    --ts-surface: #ffffff;
    --ts-border: #e2e8f0;
    --ts-muted: #64748b;
    --ts-text: #0f172a;
    --ts-accent: #0ea5e9;
    --ts-accent-soft: #e0f2fe;
}
.tasks-page .page-header {
    margin-bottom: 1.25rem;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 40%, #a5f3fc 70%, #67e8f9 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-left: 4px solid #0891b2;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.12);
}
.tasks-page .page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0e7490;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}
.tasks-page .page-header-desc {
    font-size: 0.9375rem;
    color: #0d9488;
    margin: 0;
    opacity: 0.9;
}
.tasks-page .tasks-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.tasks-page .tasks-reset-btn {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.tasks-page .tasks-reset-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}
.tasks-page .tasks-reset-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
}
.tasks-page .btn-new-task {
    border-radius: var(--radius);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 102, 204, 0.2);
}
.tasks-page .btn-new-task:hover {
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}
.tasks-page .tasks-single {
    margin-top: 0;
    min-width: 0;
    overflow: visible;
}
.tasks-page .tasks-filters-form {
    margin-bottom: 1.25rem;
}
.tasks-page .tasks-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    overflow: visible;
    padding-bottom: 0.15rem;
}
.tasks-page .tasks-filters-row .tasks-filter-group {
    flex: 1 1 0;
    min-width: 8.5rem;
    overflow: visible;
}
.tasks-page .tasks-filters-row .tasks-filter-actions-group {
    flex: 0 0 auto;
    min-width: 0;
}
.tasks-page .tasks-filters-row .tasks-filter-group .select-search-wrap,
.tasks-page .tasks-filters-row .tasks-filter-group .form-control,
.tasks-page .tasks-filters-row .tasks-filter-group .select-box {
    min-width: 0;
    width: 100%;
}
.tasks-page .tasks-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.tasks-page .tasks-filter-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}
.tasks-page .tasks-duration-custom-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    padding-right: 0;
    border-top: 1px solid #e2e8f0;
}
.tasks-page .tasks-duration-custom-row .tasks-filter-group {
    margin-bottom: 0;
    min-width: 0;
    flex: 0 0 auto;
}
.tasks-page .tasks-duration-custom-row .form-control {
    min-width: 0;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
}
@media (max-width: 640px) {
    .tasks-page .tasks-duration-custom-row {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}
.tasks-page .tasks-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
}
.tasks-page .tasks-toolbar .tasks-search-wrap {
    flex: 1;
    min-width: 200px;
}
.tasks-page .tasks-search-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 2.5rem;
    flex: 1;
    min-width: 0;
}
.tasks-page .tasks-search-input-wrap .tasks-search-input::-webkit-search-cancel-button,
.tasks-page .tasks-search-input-wrap .tasks-search-input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}
.tasks-page .tasks-search-input-wrap .tasks-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0 2.5rem 0 2.5rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}
.tasks-page .tasks-search-input-wrap .tasks-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.tasks-page .tasks-search-input-wrap .tasks-search-icon svg {
    display: block;
}
.tasks-page .tasks-search-input-wrap .tasks-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.tasks-page .tasks-search-input-wrap.tasks-search-has-text .tasks-search-clear {
    display: flex;
}
.tasks-page .tasks-search-input-wrap .tasks-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.tasks-page .tasks-search-input-wrap .tasks-search-clear svg {
    display: block;
}
.tasks-page .tasks-search-input::placeholder {
    color: #94a3b8;
}
.tasks-page .tasks-search-input-wrap .tasks-search-input:hover {
    border-color: #cbd5e1;
}
.tasks-page .tasks-search-input-wrap .tasks-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.tasks-page .tasks-tab-toggle {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}
.tasks-page .tasks-tab-btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    cursor: pointer;
    transition: color 0.22s ease, background 0.28s ease, box-shadow 0.28s ease, transform 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.tasks-page .tasks-tab-btn:hover:not(.active) {
    color: #475569;
    background: rgba(255, 255, 255, 0.6);
}
.tasks-page .tasks-tab-btn:focus-visible {
    outline: 2px solid #0891b2;
    outline-offset: 2px;
}
.tasks-page .tasks-tab-btn.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, transparent 40%, transparent 100%), linear-gradient(180deg, #22d3ee 0%, #0891b2 45%, #0e7490 100%);
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.35);
}

/* Tasks hub create: /J /C /U slash picker (same UX copy as Stand-up) */
.tasks-page .contenteditable-task-input {
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.tasks-page .contenteditable-task-input:empty::before {
    content: attr(data-placeholder);
    color: #94a3b8;
}
.tasks-page .contenteditable-task-input .task-ref-job { color: #1d4ed8; font-weight: 600; }
.tasks-page .contenteditable-task-input .task-ref-candidate { color: #047857; font-weight: 600; }
.tasks-page .contenteditable-task-input .task-ref-user { color: #c2410c; font-weight: 600; }
.tasks-page .task-slash-popover {
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 4px;
    min-width: 280px;
    max-width: min(440px, 96vw);
    max-height: 300px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    z-index: 10060;
    padding: 0.4rem 0;
}
.tasks-page .task-slash-popover.hide { display: none; }
.tasks-page .task-slash-popover[data-mode="job"] { border-top: 3px solid #3b82f6; }
.tasks-page .task-slash-popover[data-mode="job"] .task-slash-option:hover {
    background: #eff6ff;
    color: #1d4ed8;
}
.tasks-page .task-slash-popover[data-mode="candidate"] { border-top: 3px solid #10b981; }
.tasks-page .task-slash-popover[data-mode="candidate"] .task-slash-option:hover {
    background: #ecfdf5;
    color: #047857;
}
.tasks-page .task-slash-popover[data-mode="user"] { border-top: 3px solid #ea580c; }
.tasks-page .task-slash-popover[data-mode="user"] .task-slash-option:hover {
    background: #fff7ed;
    color: #c2410c;
}
.tasks-page .task-slash-popover[data-mode="user"] .task-slash-option { border-left-color: #fdba74; }
.tasks-page .task-slash-popover[data-mode="user"] .task-slash-option-focused { background: #fff7ed; color: #c2410c; }
.tasks-page .task-slash-hint,
.tasks-page .task-slash-empty {
    padding: 0.7rem 0.85rem;
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.45;
}
.tasks-page .task-slash-hint kbd {
    background: #f1f5f9;
    padding: 0.15rem 0.4rem;
    border-radius: 6px;
    font-size: 0.8em;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.tasks-page .task-slash-option {
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    cursor: pointer;
    color: #0f172a;
    transition: background 0.15s, color 0.15s;
    border-left: 3px solid transparent;
}
.tasks-page .task-slash-popover[data-mode="job"] .task-slash-option { border-left-color: #93c5fd; }
.tasks-page .task-slash-popover[data-mode="candidate"] .task-slash-option { border-left-color: #6ee7b7; }
.tasks-page .task-slash-option-focused,
.tasks-page .task-slash-option.task-slash-option-focused {
    background: #f1f5f9;
    outline: none;
}
.tasks-page .task-slash-popover[data-mode="job"] .task-slash-option-focused { background: #eff6ff; color: #1d4ed8; }
.tasks-page .task-slash-popover[data-mode="candidate"] .task-slash-option-focused { background: #ecfdf5; color: #047857; }

/* Single column layout */
.interviews-page .interviews-single {
    margin-top: 0;
    min-width: 0;
}
/* Filters row: single row, all fit */
.interviews-page .interviews-filters-form {
    margin-bottom: 1.25rem;
    overflow: visible;
}
.interviews-page .interviews-filters-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0.5rem 0.75rem;
    overflow: visible;
}
.interviews-page .interviews-filters-row .interviews-filter-group {
    flex: 1 1 0;
    min-width: 0;
}
.interviews-page .interviews-filters-row .interviews-filter-group .select-search-wrap,
.interviews-page .interviews-filters-row .interviews-filter-group .form-control,
.interviews-page .interviews-filters-row .interviews-filter-select {
    min-width: 0;
    width: 100%;
}
.interviews-page .interviews-filters-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    width: 100%;
}
.interviews-page .interviews-reset-btn {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.interviews-page .interviews-reset-btn:hover {
    background: #fef2f2;
    border-color: #fca5a5;
    color: #dc2626;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}
.interviews-page .interviews-reset-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35);
}
.interviews-page .interviews-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.interviews-page .interviews-filter-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
}
.interviews-page .interviews-filter-select {
    min-width: 120px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fff;
    color: #1e293b;
}
/* Today's interviews */
/* Today + By status in one row */
.interviews-page .interviews-today-stats-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 720px) {
    .interviews-page .interviews-today-stats-row {
        grid-template-columns: 3fr 2fr; /* 60% : 40% */
    }
}
.interviews-page .interviews-today-stats-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.interviews-page .interviews-today-stats-col .interviews-today-panel,
.interviews-page .interviews-today-stats-col .interviews-stats-panel {
    flex: 0 0 220px;
    height: 220px;
    min-height: 220px;
}
.interviews-page .interviews-today-stats-col .interviews-section-title {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.interviews-page .interviews-today-count {
    font-weight: 500;
    color: #64748b;
    font-size: 0.875rem;
}
.interviews-page .interviews-today-panel,
.interviews-page .interviews-stats-panel {
    height: 220px;
    min-height: 220px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.interviews-page .interviews-today-panel {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.6rem;
}
.interviews-page .interviews-stats-panel {
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.interviews-page .interviews-stats-panel .interviews-stats-grid {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.interviews-page .interviews-stats-panel .interviews-stats-grid .interviews-stat-tile {
    flex: 1 1 0;
    min-height: 0;
}
.interviews-page .interviews-today-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.interviews-page .interviews-today-row {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: 0.35rem 0.85rem;
    padding: 0.75rem 1rem;
    background: #fafbfc;
    border: 1px solid #eef2f7;
    border-radius: 10px;
    min-height: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.interviews-page .interviews-today-row:hover {
    background: #fff;
    border-color: #e0f2fe;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.08);
}
/* Persisted “selected” row when opening Feedback (stays visible after click / on back navigation) */
.interviews-page .interviews-today-row.interviews-row-selected {
    background: linear-gradient(90deg, #fffbeb 0%, #fef9c3 45%, #fffef0 100%);
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28), 0 2px 8px rgba(245, 158, 11, 0.12);
}
.interviews-page .interviews-today-row.interviews-row-selected .interviews-today-row-time {
    background: #fef08a;
    color: #92400e;
}
.interviews-page .interviews-today-row.interviews-tile-hidden {
    display: none !important;
}
.interviews-page .interviews-today-row-time {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    font-weight: 700;
    font-size: 0.75rem;
    color: #0369a1;
    background: #e0f2fe;
    padding: 0.35rem 0.5rem;
    border-radius: 8px;
    letter-spacing: 0.02em;
    min-width: 2.75rem;
    text-align: center;
}
.interviews-page .interviews-today-row-info {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.interviews-page .interviews-today-row-line1 {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.6rem;
    flex-wrap: wrap;
    min-width: 0;
}
.interviews-page .interviews-today-row-name-link {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.15s ease, text-decoration 0.15s ease;
}
.interviews-page .interviews-today-row-name-link:hover {
    color: #0369a1;
    text-decoration: underline;
}
.interviews-page .interviews-today-row-phone {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}
.interviews-page .interviews-today-row-panel {
    font-size: 0.8125rem;
    color: #475569;
    font-weight: 500;
}
.interviews-page .interviews-today-row-right {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    flex-shrink: 0;
}
.interviews-page .interviews-today-row-loop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #bae6fd;
    white-space: nowrap;
}
.interviews-page .interviews-today-row-link {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.28rem 0.5rem;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #bae6fd;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.interviews-page .interviews-today-row-link:hover {
    background: #e0f2fe;
    border-color: #7dd3fc;
    text-decoration: none;
}
.interviews-page .interviews-today-row-line2 {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 0.1rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 0.05rem;
}
.interviews-page .interviews-today-empty {
    color: #94a3b8;
    font-size: 0.9375rem;
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px dashed #e2e8f0;
}
.interviews-page .interviews-today-search-empty {
    color: #94a3b8;
    font-size: 0.9375rem;
    margin: 0;
    padding: 1rem 1rem;
    text-align: center;
}
.interviews-page .interviews-today-search-empty.hide,
.interviews-page #interviews-today-list.hide {
    display: none !important;
}
.interviews-page .interviews-stats-search-note {
    color: #64748b;
    font-size: 0.875rem;
    margin: 0;
    padding: 1rem;
    font-style: italic;
}
.interviews-page .interviews-stats-search-note.hide {
    display: none !important;
}
.interviews-page .interviews-stats-panel.hide {
    display: none !important;
}
.interviews-page .interviews-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.75rem 0;
}
.interviews-page .interviews-today-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}
.interviews-page .interviews-today-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.interviews-page .interviews-today-card:hover {
    border-color: #bae6fd;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
}
.interviews-page .interviews-today-card.interviews-tile-hidden {
    display: none !important;
}
.interviews-page .interviews-today-time {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.9375rem;
}
.interviews-page .interviews-today-name a {
    font-weight: 600;
    color: #1e293b;
    text-decoration: none;
}
.interviews-page .interviews-today-name a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}
.interviews-page .interviews-today-meta {
    font-size: 0.8125rem;
    color: #64748b;
}
.interviews-page .interviews-today-feedback {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
    margin-top: 0.25rem;
}
.interviews-page .interviews-today-feedback:hover {
    text-decoration: underline;
}
/* Stats tiles */
.interviews-page .interviews-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.interviews-page .interviews-stat-tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    min-height: 0;
}
.interviews-page .interviews-stat-tile:hover {
    background: #fff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.interviews-page .interviews-stat-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.02em;
    min-width: 4.5rem;
    flex-shrink: 0;
}
.interviews-page .interviews-stat-blocks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
    justify-content: flex-end;
    margin-left: auto;
}
.interviews-page .interviews-stat-block-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}
.interviews-page .interviews-stat-block-link:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.interviews-page .interviews-stat-block-link:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* In progress: amber */
.interviews-page .interviews-stat-block-inprogress {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}
.interviews-page .interviews-stat-block-inprogress .interviews-stat-block-label {
    color: #b45309;
    font-weight: 500;
    font-size: 0.75rem;
}
.interviews-page .interviews-stat-block-inprogress:hover {
    background: #fde68a;
    border-color: #f59e0b;
    color: #78350f;
}
.interviews-page .interviews-stat-block-inprogress:hover .interviews-stat-block-label {
    color: #92400e;
}
/* Selected: green */
.interviews-page .interviews-stat-block-selected {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}
.interviews-page .interviews-stat-block-selected .interviews-stat-block-label {
    color: #047857;
    font-weight: 500;
    font-size: 0.75rem;
}
.interviews-page .interviews-stat-block-selected:hover {
    background: #a7f3d0;
    border-color: #34d399;
    color: #064e3b;
}
.interviews-page .interviews-stat-block-selected:hover .interviews-stat-block-label {
    color: #065f46;
}
/* Rejected: red/coral */
.interviews-page .interviews-stat-block-rejected {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}
.interviews-page .interviews-stat-block-rejected .interviews-stat-block-label {
    color: #b91c1c;
    font-weight: 500;
    font-size: 0.75rem;
}
.interviews-page .interviews-stat-block-rejected:hover {
    background: #fecaca;
    border-color: #f87171;
    color: #7f1d1d;
}
.interviews-page .interviews-stat-block-rejected:hover .interviews-stat-block-label {
    color: #991b1b;
}
.interviews-page .interviews-stat-block-link .interviews-stat-block-label {
    font-weight: 500;
    font-size: 0.75rem;
}
.interviews-page .interviews-stat-block-link.interviews-stat-block-active {
    box-shadow: 0 0 0 2px var(--primary-color);
    outline: none;
}
.interviews-page .interviews-stat-values {
    font-size: 0.875rem;
    color: #475569;
    font-weight: 500;
}
.interviews-page .interviews-stat-values strong {
    color: var(--primary-color);
    font-weight: 600;
}
.interviews-page .interviews-stat-link {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
}
.interviews-page .interviews-stat-link:hover {
    text-decoration: underline;
}
/* Candidate tiles */
.interviews-page .interviews-candidate-tile {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.06) 0%, #fff 15%, #fff 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #7dd3fc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.interviews-page .interviews-candidate-tile:hover {
    border-color: #cbd5e1;
    border-left-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.interviews-page .interviews-candidate-tile.interviews-tile-hidden {
    display: none !important;
}
.interviews-page .interviews-slot-row.interviews-row-hidden {
    display: none !important;
}
.interviews-page .interviews-job-candidate-block.interviews-job-block-hidden {
    display: none !important;
}
/* Candidate tile color variants (By Candidate list) */
.interviews-page .interviews-candidate-tile-color-1 { background: linear-gradient(90deg, rgba(20, 184, 166, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #5eead4; }
.interviews-page .interviews-candidate-tile-color-1:hover { border-left-color: #14b8a6; }
.interviews-page .interviews-candidate-tile-color-2 { background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #a78bfa; }
.interviews-page .interviews-candidate-tile-color-2:hover { border-left-color: #8b5cf6; }
.interviews-page .interviews-candidate-tile-color-3 { background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #fcd34d; }
.interviews-page .interviews-candidate-tile-color-3:hover { border-left-color: #f59e0b; }
.interviews-page .interviews-candidate-tile-color-4 { background: linear-gradient(90deg, rgba(244, 63, 94, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #fda4af; }
.interviews-page .interviews-candidate-tile-color-4:hover { border-left-color: #f43f5e; }
.interviews-page .interviews-candidate-tile-color-5 { background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #6ee7b7; }
.interviews-page .interviews-candidate-tile-color-5:hover { border-left-color: #10b981; }
.interviews-page .interviews-candidate-tile-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.interviews-page .interviews-candidate-tile-head:hover {
    background: #f8fafc;
}
.interviews-page .interviews-candidate-tile-open .interviews-candidate-tile-head {
    background: #f0f9ff;
    border-bottom: 1px solid #e2e8f0;
}
.interviews-page .interviews-candidate-info {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    min-width: 0;
}
.interviews-page .interviews-candidate-sep {
    color: #94a3b8;
    font-weight: 300;
    user-select: none;
    flex-shrink: 0;
}
.interviews-page .interviews-candidate-name-link {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.15s;
}
.interviews-page .interviews-candidate-name-link:hover {
    text-decoration: underline;
}
.interviews-page .interviews-candidate-tile-head .interviews-candidate-phone,
.interviews-page .interviews-candidate-tile-head .interviews-candidate-notice,
.interviews-page .interviews-candidate-tile-head .interviews-candidate-location {
    font-size: 0.8125rem;
    color: #64748b;
}
.interviews-page .interviews-candidate-count {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.interviews-page .interviews-candidate-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: #94a3b8;
    justify-self: end;
}
.interviews-page .interviews-candidate-chevron-btn:hover {
    background: #e2e8f0;
    color: #64748b;
}
.interviews-page .interviews-candidate-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s;
    display: block;
}
.interviews-page .interviews-candidate-tile-open .interviews-candidate-chevron {
    transform: rotate(-180deg);
}
.interviews-page .interviews-candidate-body {
    padding: 0.75rem 1.25rem 1rem;
    background: #fafbfc;
}
.interviews-page .interviews-schedule-table-head {
    display: grid;
    grid-template-columns: 4rem 6rem 7rem minmax(8rem, 11rem) minmax(10rem, 18rem) 1fr 5.5rem 6.5rem 5rem;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.5rem;
}
.interviews-page .interviews-slot-row {
    display: grid;
    grid-template-columns: 4rem 6rem 7rem minmax(8rem, 11rem) minmax(10rem, 18rem) 1fr 5.5rem 6.5rem 5rem;
    gap: 0.5rem 0.75rem;
    align-items: center;
    padding: 0.65rem 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
}
.interviews-page .interviews-slot-row:last-child {
    margin-bottom: 0;
}
.interviews-page .interviews-slot-row:hover {
    border-color: #bae6fd;
    background: #f0f9ff;
}
.interviews-page .interviews-slot-row.interviews-row-selected {
    border-color: #f59e0b;
    background: linear-gradient(90deg, #fffbeb 0%, #fef9c3 50%, #fffef0 100%);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.28);
}
.interviews-page .interviews-slot-row.interviews-row-selected .col-time {
    color: #b45309;
}
.interviews-page .calendar-event.interviews-row-selected {
    outline: 2px solid #f59e0b;
    outline-offset: 1px;
    border-radius: 4px;
    background: #fffbeb;
}
.interviews-page .calendar-day-view-row.interviews-row-selected {
    background: #fffbeb;
    border-radius: 8px;
    outline: 2px solid rgba(245, 158, 11, 0.45);
    outline-offset: 2px;
}
.interviews-page .interviews-slot-row .col-time {
    font-weight: 600;
    color: var(--primary-color);
}
.interviews-page .interviews-slot-row .col-date,
.interviews-page .interviews-slot-row .col-job-title,
.interviews-page .interviews-slot-row .col-mode,
.interviews-page .interviews-slot-row .col-panel,
.interviews-page .interviews-slot-row .col-loop,
.interviews-page .interviews-slot-row .col-status {
    color: #475569;
}
.interviews-page .interviews-schedule-table-head .col-spacer,
.interviews-page .interviews-slot-row .col-spacer,
.interviews-page .interviews-job-candidate-schedule-head .col-spacer {
    min-width: 0;
}
.interviews-page .interviews-schedule-table-head .col-time,
.interviews-page .interviews-schedule-table-head .col-date,
.interviews-page .interviews-schedule-table-head .col-mode,
.interviews-page .interviews-schedule-table-head .col-panel,
.interviews-page .interviews-schedule-table-head .col-job-title,
.interviews-page .interviews-schedule-table-head .col-loop,
.interviews-page .interviews-schedule-table-head .col-status,
.interviews-page .interviews-schedule-table-head .col-feedback {
    text-align: left;
}
.interviews-page .interviews-slot-row .col-status,
.interviews-page .interviews-slot-row .col-feedback {
    text-align: right;
}
.interviews-page .interviews-slot-loop-bubble {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.interviews-page .interviews-slot-loop-internal {
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%);
    color: #6d28d9;
}
.interviews-page .interviews-slot-loop-customer {
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
}
.interviews-page .interviews-slot-loop-hr {
    background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
}
.interviews-page .interviews-slot-loop-added {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
}
.interviews-page .interviews-slot-row .col-status,
.interviews-page .interviews-slot-row .col-feedback {
    text-align: right;
}
.interviews-page .interviews-schedule-table-head .col-date,
.interviews-page .interviews-schedule-table-head .col-job-title,
.interviews-page .interviews-schedule-table-head .col-mode,
.interviews-page .interviews-schedule-table-head .col-panel,
.interviews-page .interviews-slot-row .col-date,
.interviews-page .interviews-slot-row .col-job-title,
.interviews-page .interviews-slot-row .col-mode,
.interviews-page .interviews-slot-row .col-panel {
    white-space: nowrap;
}
.interviews-page .interviews-slot-link {
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
}
.interviews-page .interviews-slot-link:hover {
    text-decoration: underline;
}
/* Job tiles (By Job view) */
.interviews-page .interviews-job-tile {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.interviews-page .interviews-job-tile:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}
.interviews-page .interviews-job-tile.interviews-tile-hidden {
    display: none !important;
}
.interviews-page .interviews-job-tile-head {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem 0;
    padding: 0.875rem 1.25rem;
    border: none;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}
.interviews-page .interviews-job-tile-head:hover {
    background: #f8fafc;
}
.interviews-page .interviews-job-tile-open .interviews-job-tile-head {
    background: #ecfdf5;
    border-bottom: 1px solid #e2e8f0;
}
.interviews-page .interviews-job-tile-head-row1 {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    min-width: 0;
}
.interviews-page .interviews-job-tile-head-row1 .interviews-job-hot {
    font-size: 1.1rem;
    line-height: 1;
    flex-shrink: 0;
}
.interviews-page .interviews-job-tile-head-row1 .interviews-job-id {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    flex-shrink: 0;
}
.interviews-page .interviews-job-tile-head-row1 .interviews-job-tile-title-link {
    font-weight: 600;
    color: #1e293b;
    min-width: 0;
    text-decoration: none;
    transition: color 0.15s;
}
.interviews-page .interviews-job-tile-head-row1 .interviews-job-tile-title-link:hover {
    color: var(--primary-color, #2563eb);
}
.interviews-page .interviews-job-tile-head-row1 .interviews-job-customer {
    font-size: 0.9375rem;
    color: #64748b;
    min-width: 0;
}
.interviews-page .interviews-job-tile-head-row1 .interviews-job-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.interviews-page .interviews-job-tile-head-row2 {
    display: flex;
    align-items: center;
    padding-left: 2.5rem;
    min-width: 0;
}
.interviews-page .interviews-job-tile-head-row2 .interviews-job-skills {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}
.interviews-page .interviews-job-tile-head-row2 .interviews-job-skill-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 500;
    color: #334155;
    background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
    border: 1px solid #bae6fd;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.interviews-page .interviews-job-tile-head-row2 .interviews-job-skill-pill:hover {
    background: linear-gradient(135deg, #bae6fd 0%, #e0f2fe 100%);
    border-color: #7dd3fc;
    color: #0c4a6e;
}
.interviews-page .interviews-job-chevron-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: #94a3b8;
    flex-shrink: 0;
}
.interviews-page .interviews-job-chevron-btn:hover {
    background: #e2e8f0;
    color: #64748b;
}
.interviews-page .interviews-job-tile-chevron {
    font-size: 0.7rem;
    transition: transform 0.2s;
    display: block;
}
.interviews-page .interviews-job-tile-open .interviews-job-tile-chevron {
    transform: rotate(-180deg);
}
.interviews-page .interviews-job-body {
    padding: 1rem 1.25rem 1.25rem;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.interviews-page .interviews-job-candidate-block {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.06) 0%, #fff 15%, #fff 100%);
    border: 1px solid #e2e8f0;
    border-left: 4px solid #7dd3fc;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    padding-bottom: 1.25rem;
}
.interviews-page .interviews-job-candidate-block:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
    border-left-color: #0ea5e9;
}
/* Job candidate block color variants (By Job list) */
.interviews-page .interviews-job-candidate-block-color-1 { background: linear-gradient(90deg, rgba(20, 184, 166, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #5eead4; }
.interviews-page .interviews-job-candidate-block-color-1:hover { border-left-color: #14b8a6; }
.interviews-page .interviews-job-candidate-block-color-2 { background: linear-gradient(90deg, rgba(139, 92, 246, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #a78bfa; }
.interviews-page .interviews-job-candidate-block-color-2:hover { border-left-color: #8b5cf6; }
.interviews-page .interviews-job-candidate-block-color-3 { background: linear-gradient(90deg, rgba(245, 158, 11, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #fcd34d; }
.interviews-page .interviews-job-candidate-block-color-3:hover { border-left-color: #f59e0b; }
.interviews-page .interviews-job-candidate-block-color-4 { background: linear-gradient(90deg, rgba(244, 63, 94, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #fda4af; }
.interviews-page .interviews-job-candidate-block-color-4:hover { border-left-color: #f43f5e; }
.interviews-page .interviews-job-candidate-block-color-5 { background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, #fff 15%, #fff 100%); border-left-color: #6ee7b7; }
.interviews-page .interviews-job-candidate-block-color-5:hover { border-left-color: #10b981; }
.interviews-page .interviews-job-candidate-block:last-child {
    margin-bottom: 0;
}
.interviews-page .interviews-job-candidate-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    font-size: 0.875rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    border-radius: 12px 12px 0 0;
}
.interviews-page .interviews-job-candidate-info {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5rem;
    min-width: 0;
}
.interviews-page .interviews-job-candidate-header .label,
.interviews-page .interviews-job-candidate-header .field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
}
.interviews-page .interviews-job-candidate-header .label {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.interviews-page .interviews-job-candidate-header .field-label {
    margin-right: 0.15rem;
}
.interviews-page .interviews-job-candidate-header .name {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}
.interviews-page .interviews-job-candidate-header .name:hover {
    text-decoration: underline;
}
.interviews-page .interviews-job-candidate-header .sep {
    color: #94a3b8;
    font-weight: 300;
    user-select: none;
    font-size: 0.7rem;
    margin: 0 0.4rem;
    opacity: 0.85;
}
.interviews-page .interviews-job-candidate-header .phone,
.interviews-page .interviews-job-candidate-header .notice,
.interviews-page .interviews-job-candidate-header .location,
.interviews-page .interviews-job-candidate-header .stage {
    color: #64748b;
    font-size: 0.8125rem;
}
.interviews-page .interviews-job-candidate-header .schedules-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    background: #e2e8f0;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    flex-shrink: 0;
    margin-left: auto;
}
.interviews-page .interviews-job-candidate-block .interviews-job-candidate-schedule-head {
    display: grid;
    grid-template-columns: 4rem 6rem 7rem minmax(8rem, 11rem) minmax(10rem, 18rem) 1fr 5.5rem 6.5rem 5rem;
    gap: 0.5rem 0.75rem;
    padding: 0.6rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    margin: 0 1rem 0.5rem 1rem;
}
.interviews-page .interviews-job-candidate-block .interviews-slot-row {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    border-radius: 8px;
}
.interviews-page .interviews-job-candidate-block .interviews-slot-row:last-child {
    margin-bottom: 0;
}
.interviews-page .interviews-job-candidate-schedule-head .col-time,
.interviews-page .interviews-job-candidate-schedule-head .col-date,
.interviews-page .interviews-job-candidate-schedule-head .col-mode,
.interviews-page .interviews-job-candidate-schedule-head .col-panel,
.interviews-page .interviews-job-candidate-schedule-head .col-job-title,
.interviews-page .interviews-job-candidate-schedule-head .col-loop,
.interviews-page .interviews-job-candidate-schedule-head .col-status,
.interviews-page .interviews-job-candidate-schedule-head .col-feedback {
    text-align: left;
}
.interviews-page .interviews-job-body .interviews-slot-row .col-status,
.interviews-page .interviews-job-body .interviews-slot-row .col-feedback {
    text-align: right;
}
.interviews-page .interviews-job-candidate-schedule-head .col-date,
.interviews-page .interviews-job-candidate-schedule-head .col-job-title,
.interviews-page .interviews-job-candidate-schedule-head .col-mode,
.interviews-page .interviews-job-candidate-schedule-head .col-panel {
    white-space: nowrap;
}
.interviews-page .interviews-job-body .interviews-slot-row {
    margin-bottom: 0.5rem;
}
.interviews-page .interviews-job-body .interviews-slot-row:last-child {
    margin-bottom: 0;
}
.interviews-page .interviews-empty-filter {
    color: #64748b;
    font-size: 0.9375rem;
    margin: 0;
    padding: 1rem;
    text-align: center;
}
.interviews-page .interviews-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
}
.interviews-page .interviews-search-wrap {
    flex: 1;
    min-width: 200px;
}
.interviews-page .interviews-view-toggle {
    display: flex;
    align-items: center;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: #f8fafc;
}
.interviews-page .interviews-view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.interviews-page .interviews-view-btn:hover {
    color: var(--text-primary);
    background: #f1f5f9;
}
.interviews-page .interviews-view-btn.active {
    background: #fff;
    color: #0891b2;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.interviews-page .interviews-view-icon {
    display: inline-flex;
    line-height: 0;
}
.interviews-page .interviews-view-icon svg {
    display: block;
}
.interviews-page .interviews-group-toggle {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 5px;
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.interviews-page .interviews-group-btn {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #64748b;
    cursor: pointer;
    transition: color 0.22s ease, background 0.28s ease, box-shadow 0.28s ease, transform 0.2s ease;
}
.interviews-page .interviews-group-btn:hover:not(.active) {
    color: #475569;
    background: rgba(255,255,255,0.6);
}
.interviews-page .interviews-group-btn:focus-visible {
    outline: 2px solid #0891b2;
    outline-offset: 2px;
}
.interviews-page .interviews-group-btn.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 40%, transparent 100%), linear-gradient(180deg, #22d3ee 0%, #0891b2 45%, #0e7490 100%);
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-1px);
}
.interviews-page .interviews-group-btn#interviews-group-jobs.active {
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 40%, transparent 100%), linear-gradient(180deg, #34d399 0%, #059669 45%, #047857 100%);
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.35), inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-1px);
}
.interviews-page .interviews-content {
    min-width: 0;
}
.interviews-page .interviews-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.interviews-page .interviews-list-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.interviews-page .interviews-list-group.hide {
    display: none !important;
}
.interviews-page .interviews-list-wrap.hide {
    display: none !important;
}
.interviews-page .interviews-calendar-wrap {
    display: block;
    min-height: 400px;
}
.interviews-page .interviews-calendar-wrap.hide {
    display: none !important;
}
.interviews-page .interview-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.interviews-page .interview-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.interviews-page .interview-card-hidden {
    display: none !important;
}
.interviews-page .interview-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.interviews-page .interview-card-candidate {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
.interviews-page .interview-card-link {
    color: var(--primary-color);
    text-decoration: none;
}
.interviews-page .interview-card-link:hover {
    text-decoration: underline;
}
.interviews-page .interview-card-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    text-transform: capitalize;
    flex-shrink: 0;
}
.interviews-page .interview-card-badge.badge-scheduled { background: #dbeafe; color: #1d4ed8; }
.interviews-page .interview-card-badge.badge-completed { background: #d1fae5; color: #047857; }
.interviews-page .interview-card-badge.badge-cancelled { background: #fef2f2; color: #b91c1c; }
.interviews-page .interview-card-meta {
    font-size: 0.9375rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.interviews-page .interview-card-detail {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.interviews-page .interview-card-sep {
    margin: 0 0.35rem;
    color: #cbd5e1;
}
.interviews-page .interview-card-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}
.interviews-page .interview-card-rating {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.interviews-page .interview-card-feedback {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
}
.interviews-page .interview-card-feedback:hover {
    text-decoration: underline;
}
/* Calendar outer (Day / Week / Month) */
.interviews-page .interviews-calendar-outer {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.interviews-page .calendar-views-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}
.interviews-page .calendar-views-header-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.interviews-page .calendar-views-title-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}
.interviews-page .calendar-views-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    letter-spacing: -0.02em;
}
.interviews-page .calendar-range-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.interviews-page .calendar-range-select {
    min-width: 160px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #fff;
    color: #1e293b;
}
.interviews-page .calendar-custom-date {
    width: 140px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
}
.interviews-page .calendar-today-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: #fff;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
}
.interviews-page .calendar-today-btn:hover {
    border-color: var(--primary-color);
    background: #f0f9ff;
    color: var(--primary-color);
}
.interviews-page .calendar-nav-btn {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.interviews-page .calendar-nav-btn:hover {
    border-color: var(--primary-color);
    background: #f0f9ff;
    color: var(--primary-color);
}
.interviews-page .calendar-view-toggle {
    display: flex;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    background: #fff;
}
.interviews-page .calendar-view-btn {
    padding: 0.4rem 0.875rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.interviews-page .calendar-view-btn:hover {
    color: #1e293b;
    background: #f1f5f9;
}
.interviews-page .calendar-view-btn.active {
    background: var(--primary-color);
    color: #fff;
}
.interviews-page .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
}
.interviews-page .calendar-weekday {
    padding: 0.5rem 0.25rem;
    text-align: center;
}
.interviews-page .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    min-height: 420px;
}
.interviews-page .calendar-grid-month .calendar-day { min-height: 90px; }
.interviews-page .calendar-day {
    min-height: 80px;
    border: 1px solid #e2e8f0;
    margin: -1px 0 0 -1px;
    padding: 0.35rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.interviews-page .calendar-day:hover {
    background: #f0f9ff;
    box-shadow: inset 0 0 0 1px #bae6fd;
}
.interviews-page .calendar-day:nth-child(7n) { margin-right: 0; }
.interviews-page .calendar-day-other {
    background: #fafbfc;
    min-height: 80px;
}
.interviews-page .calendar-day-num {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.2rem;
    flex-shrink: 0;
}
.interviews-page .calendar-day-today .calendar-day-num {
    background: var(--primary-color);
    color: #fff;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}
.interviews-page .calendar-day-events {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 0;
}
/* Minimal event block (Outlook-style) */
.interviews-page .calendar-event {
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    background: #e0f2fe;
    border-left: 3px solid var(--primary-color);
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.interviews-page .calendar-event:hover {
    background: #bae6fd;
}
.interviews-page .calendar-event-time {
    font-weight: 600;
    color: #0369a1;
    margin-right: 0.25rem;
}
.interviews-page .calendar-event-name {
    color: #0c4a6e;
}
/* Day view (full page when date clicked) */
.interviews-page .calendar-day-view {
    padding: 1rem 1.25rem;
    background: #fff;
}
.interviews-page .calendar-day-view-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 1rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.875rem;
    color: #475569;
    text-decoration: none;
    cursor: pointer;
}
.interviews-page .calendar-day-view-back:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #f0f9ff;
}
.interviews-page .calendar-day-view-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1rem 0;
}
.interviews-page .calendar-day-view-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.interviews-page .calendar-day-view-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.75rem 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.875rem;
}
.interviews-page .calendar-day-view-row:hover {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.interviews-page .calendar-day-view-row .calendar-day-view-sep {
    color: #94a3b8;
    font-weight: 400;
    user-select: none;
}
.interviews-page .calendar-day-view-time {
    font-weight: 600;
    color: #0369a1;
    min-width: 5rem;
}
.interviews-page .calendar-day-view-date {
    color: #475569;
}
.interviews-page .calendar-day-view-name {
    font-weight: 500;
    color: #1e293b;
}
.interviews-page .calendar-day-view-phone {
    color: #475569;
}
.interviews-page .calendar-day-view-job {
    color: #1e293b;
}
.interviews-page .calendar-day-view-customer {
    color: #475569;
}
.interviews-page .calendar-day-view-panel {
    color: #64748b;
}
.interviews-page .calendar-day-view-row a {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--primary-color);
    text-decoration: none;
}
.interviews-page .calendar-day-view-row a:hover {
    text-decoration: underline;
}
.interviews-page .calendar-day-view-empty {
    color: #64748b;
    font-size: 0.9375rem;
    padding: 1.5rem;
    text-align: center;
}
.interviews-page .calendar-event-day-size {
    padding: 0.5rem 0.75rem;
    white-space: normal;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}
/* Week view */
.interviews-page .calendar-week-row-header {
    display: grid;
    grid-template-columns: 48px repeat(7, 1fr);
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    font-size: 0.8125rem;
}
.interviews-page .calendar-week-day-col {
    padding: 0.5rem;
    text-align: center;
    border-right: 1px solid #e2e8f0;
}
.interviews-page .calendar-week-day-col:last-child { border-right: none; }
.interviews-page .calendar-week-day-col.calendar-day-today {
    background: #dbeafe;
}
.interviews-page .calendar-week-day-name {
    display: block;
    font-weight: 600;
    color: #64748b;
}
.interviews-page .calendar-week-day-num {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}
.interviews-page .calendar-week-body {
    overflow-y: auto;
    max-height: 420px;
}
.interviews-page .calendar-week-row {
    display: grid;
    grid-template-columns: 48px repeat(7, 1fr);
    min-height: 48px;
    border-bottom: 1px solid #f1f5f9;
}
.interviews-page .calendar-week-time {
    padding: 0.25rem 0.35rem;
    font-size: 0.7rem;
    color: #64748b;
    background: #fafbfc;
    border-right: 1px solid #f1f5f9;
}
.interviews-page .calendar-week-cell {
    padding: 0.2rem;
    border-right: 1px solid #f1f5f9;
    min-height: 48px;
}
.interviews-page .calendar-week-cell:last-child { border-right: none; }
/* Day view */
.interviews-page .calendar-day-view-header {
    padding: 0.75rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.interviews-page .calendar-day-view-list {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.interviews-page .calendar-day-view-empty {
    color: #64748b;
    font-size: 0.9375rem;
    margin: 0;
}
/* Tooltip (hover) */
.interview-calendar-tooltip {
    position: fixed;
    z-index: 10000;
    padding: 0.5rem 0.75rem;
    background: #1e293b;
    color: #fff;
    font-size: 0.8125rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    max-width: 280px;
    pointer-events: none;
}
.interview-calendar-tooltip strong { color: #fff; }
.interview-calendar-tooltip-status {
    text-transform: capitalize;
    color: #94a3b8;
}
/* Interview detail modal (click) */
.interview-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s;
}
.interview-modal.interview-modal-visible {
    visibility: visible;
    opacity: 1;
}
.interview-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.interview-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-width: 440px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.interview-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.interview-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}
.interview-modal-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
}
.interview-modal-close:hover {
    background: #e2e8f0;
    color: #1e293b;
}
.interview-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
}
.interview-modal-body .interview-modal-candidate {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.35rem 0;
}
.interview-modal-body .interview-modal-meta,
.interview-modal-body .interview-modal-detail {
    font-size: 0.9375rem;
    color: #475569;
    margin: 0 0 0.25rem 0;
}
.interview-modal-body .interview-modal-status-rating {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0 0 1rem 0;
}
.interview-modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}
.interview-modal-actions .btn {
    flex: 1;
    min-width: 120px;
}
.interviews-page .interviews-date-group {
    margin-bottom: 1.5rem;
}
.interviews-page .interviews-date-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
}
.interviews-page .interviews-date-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.interviews-page .interviews-no-results {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}
.interviews-page .interviews-no-results.hide {
    display: none !important;
}
/* Interviews search box (toolbar) */
.interviews-page .interviews-search-row {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: #f8fafc;
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
    gap: 0.75rem;
    align-items: stretch;
}
.interviews-page .interviews-search-wrap {
    flex: 1;
    min-width: 0;
}
.interviews-page .interviews-search-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: 2.5rem;
    flex: 1;
    min-width: 0;
}
.interviews-page .interviews-search-input-wrap .interviews-search-input::-webkit-search-cancel-button,
.interviews-page .interviews-search-input-wrap .interviews-search-input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
    appearance: none;
}
.interviews-page .interviews-search-input-wrap .interviews-search-input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 2.5rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 0 2.5rem 0 2.5rem;
    font-size: 0.9375rem;
    font-family: inherit;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
}
.interviews-page .interviews-search-input-wrap .interviews-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.interviews-page .interviews-search-input-wrap .interviews-search-icon svg {
    display: block;
}
.interviews-page .interviews-search-input-wrap .interviews-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.interviews-page .interviews-search-input-wrap.interviews-search-has-text .interviews-search-clear {
    display: flex;
}
.interviews-page .interviews-search-input-wrap .interviews-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.interviews-page .interviews-search-input-wrap .interviews-search-clear svg { display: block; }
.interviews-page .interviews-search-input::placeholder {
    color: #94a3b8;
}
.interviews-page .interviews-search-input-wrap .interviews-search-input:hover {
    border-color: #cbd5e1;
}
.interviews-page .interviews-search-input-wrap .interviews-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.interviews-page .interviews-filter-btn {
    border-radius: 8px;
    font-weight: 500;
    padding: 0 1.25rem;
    height: 2.5rem;
    min-height: 2.5rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.interviews-page .interviews-filter-btn:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
.interviews-page .interviews-filter-panel {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
    padding: 1.25rem;
    background: #fafbfc;
}
.interviews-page .interviews-filters-inline .form-group label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.interviews-page .interviews-filters-inline .form-control,
.interviews-page .interviews-filters-inline .select-search-wrap {
    border-radius: var(--radius);
}
.interviews-page .table-responsive {
    border-radius: var(--radius);
    overflow-x: hidden;
    overflow-y: visible;
    border: 1px solid var(--border-color);
    max-width: 100%;
}
.interviews-page #interviews-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}
.interviews-page #interviews-table th,
.interviews-page #interviews-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.interviews-page #interviews-table thead {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 2px solid var(--border-color);
}
.interviews-page #interviews-table thead th {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.interviews-page #interviews-table tbody tr {
    border-bottom: 1px solid #eef2f7;
    transition: background-color 0.15s;
}
.interviews-page #interviews-table tbody tr:hover {
    background: #f8fafc;
}
.interviews-page #interviews-table tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    vertical-align: middle;
}
.interviews-page #interviews-table .link-strong {
    font-weight: 600;
    color: var(--primary-color);
}
.interviews-page #interviews-table .link-strong:hover {
    text-decoration: underline;
}
.interviews-page #interviews-table .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    text-transform: capitalize;
}
.interviews-page #interviews-no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}
.interviews-page .empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--text-secondary);
}
.interviews-page .empty-state .btn {
    margin-top: 0.75rem;
}
.interviews-page .table-footer-pagination {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: #fafbfc;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.interviews-page .table-footer-pagination .btn {
    border-radius: var(--radius);
}
.interviews-page .interviews-sidebar .card {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.interviews-page .interviews-today-card .card-header {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    padding: 0.875rem 1.25rem;
}
.interviews-page .interviews-today-card .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e40af;
    margin: 0;
}
.interviews-page .interviews-today-card .card-body {
    padding: 1.25rem 1.25rem;
}
.interviews-page .interviews-today-item {
    padding: 1rem 0;
    border-bottom: 1px solid #eef2f7;
}
.interviews-page .interviews-today-item:last-child {
    border-bottom: none;
}
.interviews-page .interviews-today-time-block .interviews-today-time {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary-color);
}
.interviews-page .interviews-today-view {
    border-radius: var(--radius);
    font-weight: 500;
}
.interviews-page .interviews-today-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--surface);
    padding: 1.5rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
}

.stat-icon {
    font-size: 2.5rem;
}

.stat-content h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.stat-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.stat-link {
    color: var(--primary-color);
    text-decoration: none;
}
.stat-link:hover {
    text-decoration: underline;
}

/* Dashboard modern */
.dashboard-header {
    margin-bottom: 1.5rem;
}
.dashboard-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.dashboard-header-inner h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.dashboard-header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dashboard-header-actions .dashboard-header-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
    font-weight: 600;
    border-radius: 8px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-header-btn-candidate,
.dashboard-header-btn-job {
    background: #e2e8f0;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.dashboard-header-btn-candidate:hover {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.4);
}
.dashboard-header-btn-job:hover {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(234, 88, 12, 0.4);
}
.dashboard-subtitle {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}
.dashboard-welcome {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.dashboard-filter-form .card-body {
    padding: 1.25rem 1.5rem;
}
.dashboard-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}
.dashboard-filters-header.card-body {
    padding: 1rem 1.5rem;
}
.dashboard-filters-body.card-body {
    padding: 1rem 1.5rem;
    overflow: visible;
}
/* Dashboard filters: same type-and-display look as Create candidate dropdowns */
.dashboard-filters-form.create-candidate-style-form .form-group {
    overflow: visible;
    margin-bottom: 0;
}
.dashboard-filters-form.create-candidate-style-form .form-group > label:first-child:not(.checkbox-label) {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}
.dashboard-filters-form .select-search-wrap,
.dashboard-filters-form .dashboard-multiselect-box {
    min-width: 0;
    width: 100%;
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fcfcfd;
}
.dashboard-filters-form .select-search-wrap .select-search-input,
.dashboard-filters-form .dashboard-multiselect-box .dashboard-multiselect-trigger {
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0.6rem 0.85rem;
    font-size: 0.9375rem;
    width: 100%;
    color: var(--text-primary);
}
.dashboard-filters-form .dashboard-multiselect-box .dashboard-multiselect-trigger {
    cursor: pointer;
}
.dashboard-filters-form .select-search-wrap .select-search-input:focus,
.dashboard-filters-form .dashboard-multiselect-box .dashboard-multiselect-trigger:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}
.dashboard-filters-form .select-search-wrap .select-search-input::placeholder,
.dashboard-filters-form .dashboard-multiselect-box .dashboard-multiselect-trigger::placeholder {
    color: var(--placeholder-color);
}
.dashboard-filters-form .select-search-wrap.select-search-has-value .select-search-input {
    background: transparent;
}
.dashboard-multiselect-native {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.dashboard-multiselect-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--surface);
    border: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 200;
}
.dashboard-multiselect-box.is-open .dashboard-multiselect-dropdown {
    display: block;
}
.dashboard-multiselect-filter {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.875rem;
    z-index: 1;
}
.dashboard-multiselect-filter:focus {
    outline: none;
}
.dashboard-multiselect-options {
    padding: 0.25rem 0;
    max-height: 240px;
    overflow-y: auto;
}
.dashboard-multiselect-option {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dashboard-multiselect-option:hover {
    background: #f1f5f9;
}
.dashboard-multiselect-option.selected {
    background: #e0f2fe;
    color: var(--primary-color);
}
.dashboard-multiselect-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

/* Inline search multi-select (tags + dropdown with checkboxes) */
.dashboard-filters-form .multi-select {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}
.dashboard-filters-form .multi-select-selected {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-height: 2.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fcfcfd;
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--text-primary);
}
.dashboard-filters-form .multi-select-selected:hover {
    border-color: #cbd5e1;
}
.dashboard-filters-form .multi-select.is-open .multi-select-selected {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}
.dashboard-filters-form .multi-select-placeholder {
    color: var(--placeholder-color);
    flex: 1;
}
.dashboard-filters-form .multi-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}
.dashboard-filters-form .multi-select .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: #e0f2fe;
    color: var(--primary-color);
    font-size: 0.8125rem;
    font-weight: 500;
}
.dashboard-filters-form .multi-select .tag-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dashboard-filters-form .multi-select .tag-remove {
    cursor: pointer;
    padding: 0 0.1rem;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    opacity: 0.8;
}
.dashboard-filters-form .multi-select .tag-remove:hover {
    opacity: 1;
}
.dashboard-filters-form .multi-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 2px;
    background: var(--surface);
    border: 1px solid #e2e8f0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 300;
    overflow: hidden;
}
.dashboard-filters-form .multi-select-filter {
    position: sticky;
    top: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.875rem;
    z-index: 1;
    box-sizing: border-box;
}
.dashboard-filters-form .multi-select-filter:focus {
    outline: none;
}
.dashboard-filters-form .multi-select-filter::placeholder {
    color: var(--placeholder-color);
}
.dashboard-filters-form .multi-select-options {
    max-height: 288px;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.dashboard-filters-form .multi-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font-size: 0.875rem;
    margin: 0;
}
.dashboard-filters-form .multi-select-option:hover {
    background: #f1f5f9;
}
.dashboard-filters-form .multi-select-option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}
.dashboard-filters-form .multi-select-option input[type="checkbox"]:checked + span {
    font-weight: 500;
    color: var(--primary-color);
}

/* API-driven filter multi-select: Dashboard + Interviews (shared modern UI) */
.ats-filter-api-multiselect[data-api] {
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.ats-filter-api-multiselect[data-api].is-open {
    z-index: 320;
}
.ats-filter-api-multiselect[data-api] .select-box {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.5rem 2.35rem 0.5rem 0.85rem;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.35;
    position: relative;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ats-filter-api-multiselect[data-api] .select-box:hover {
    border-color: #cbd5e1;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}
.ats-filter-api-multiselect[data-api] .select-box:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.ats-filter-api-multiselect[data-api].is-open .select-box {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.ats-filter-api-multiselect[data-api] .select-box::after {
    content: '';
    position: absolute;
    right: 0.85rem;
    top: 50%;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: -0.28rem;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: rotate(45deg);
    pointer-events: none;
    opacity: 0.8;
    transition: transform 0.2s ease, margin-top 0.2s ease;
}
.ats-filter-api-multiselect[data-api].is-open .select-box::after {
    transform: rotate(-135deg);
    margin-top: -0.05rem;
}
.ats-filter-api-multiselect[data-api] .dropdown {
    position: absolute;
    width: 100%;
    min-width: min(100%, 320px);
    top: calc(100% + 6px);
    left: 0;
    border: 1px solid #e2e8f0;
    background: #fff;
    display: none;
    z-index: 310;
    border-radius: 10px;
    box-shadow:
        0 10px 40px -12px rgba(15, 23, 42, 0.2),
        0 4px 16px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}
.ats-filter-api-multiselect[data-api] .search-box {
    width: calc(100% - 16px);
    padding: 0.55rem 0.75rem;
    margin: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.875rem;
    box-sizing: border-box;
    background: #f8fafc;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ats-filter-api-multiselect[data-api] .search-box:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
}
.ats-filter-api-multiselect[data-api] .options {
    max-height: 260px;
    overflow-y: auto;
    padding: 0.2rem 0 0.5rem;
}
.ats-filter-api-multiselect[data-api] .option {
    padding: 0;
    margin: 0 6px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.12s ease;
}
.ats-filter-api-multiselect[data-api] .option:hover {
    background-color: #f1f5f9;
}
.ats-filter-api-multiselect[data-api] .option input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--primary-color);
}
.ats-filter-api-multiselect[data-api] .option .dashboard-filter-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    cursor: pointer;
    margin: 0;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
}
.ats-filter-api-multiselect[data-api] .option .dashboard-filter-option-label span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ats-filter-api-multiselect[data-api] .dashboard-scope-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #64748b;
    padding: 0.5rem 0.85rem 0.2rem;
    margin: 0.35rem 6px 0;
    border-top: 1px solid #f1f5f9;
}
.ats-filter-api-multiselect[data-api] .dashboard-scope-group-label:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0.35rem;
}
.ats-filter-api-multiselect[data-api] .selected-values {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.ats-filter-api-multiselect[data-api] .selected-values span:empty::before {
    content: '—';
    color: var(--placeholder-color);
}

.interviews-page .interviews-scope-multiselect-wrap {
    overflow: visible;
}

.dashboard-filters-form .select-search-wrap .select-search-dropdown {
    border-radius: 0 0 8px 8px;
    border: 1px solid #e2e8f0;
    border-top: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 300;
    max-height: 288px;
    overflow-y: auto;
}
.dashboard-filters-form .select-search-wrap {
    overflow: visible;
}
.dashboard-filters-form {
    overflow: visible;
}
.dashboard-filters-body {
    overflow: visible;
}
.dashboard-filters-grid {
    overflow: visible;
}
.dashboard-filter-group {
    overflow: visible;
}
.dashboard-multiselect-box {
    overflow: visible;
}
.dashboard-multiselect-dropdown {
    z-index: 300;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
}
.dashboard-multiselect-options {
    max-height: 288px;
    overflow-y: auto;
}
.dashboard-filters-form .form-group input.form-control[type="date"] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fcfcfd;
    font-size: 0.9375rem;
}
.dashboard-filters-form .form-group input.form-control[type="date"]:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #fff;
}
.dashboard-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem 1.25rem;
    align-items: end;
}
.dashboard-filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}
.dashboard-multiselect-wrap.select-search-style {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
}
.dashboard-multiselect-wrap.select-search-style .dashboard-multiselect-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin: 0;
    font-size: 0.9375rem;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    background: transparent;
}
.dashboard-multiselect-wrap.select-search-style .dashboard-multiselect-search:focus {
    outline: none;
}
.dashboard-multiselect-wrap.select-search-style .dashboard-multiselect {
    min-height: 4.5rem;
    padding: 0.35rem 0.5rem;
    width: 100%;
    max-height: 8rem;
    border: none;
    background: transparent;
    font-size: 0.8125rem;
    color: var(--text-primary);
    border-radius: 0 0 8px 8px;
}
.dashboard-filter-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}
.dashboard-filter-actions .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.8125rem;
    min-height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* Dashboard filter form is the card; allow dropdowns to overflow */
.dashboard-filters-form.card,
.dashboard-filters-form .card {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: visible;
}
.dashboard-filters-form .card-body {
    padding: 1.25rem 1.5rem;
    overflow: visible;
}
.dashboard-filter-checkbox {
    align-items: center;
}
.dashboard-filter-checkbox .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.dashboard-filter-dates input {
    min-width: 10rem;
}
.dashboard-filters-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dashboard-filters-toggle-btn {
    padding: 0.35rem 0.6rem;
    min-width: 2.25rem;
}
.dashboard-filters-arrow {
    font-size: 0.9rem;
    display: inline-block;
    transition: transform 0.2s;
}
.dashboard-filters-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}
.filter-row-single {
    align-items: flex-end;
    flex-wrap: wrap;
}
.filter-group-checkbox {
    display: flex;
    align-items: center;
}
.filter-group-checkbox .checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
}
.filter-group-checkbox input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--primary-color);
}

.dashboard-health-summary {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--primary-color);
}
.dashboard-health-summary .card-body {
    padding: 1rem 1.25rem;
}
.health-summary-text {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
}
.health-summary-text strong {
    color: var(--primary-color);
}

/* Selected filters outline box */
.dashboard-selected-filters {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dashboard-selected-filters .card-body {
    padding: 1rem 1.25rem;
}
.dashboard-selected-filters-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: baseline;
}
.dashboard-selected-filters-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.35rem;
    color: var(--text-secondary);
    vertical-align: middle;
}
.dashboard-selected-filters-icon svg {
    flex-shrink: 0;
}
.dashboard-selected-filters-item {
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.dashboard-selected-filters-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Duration: dropdown in first row; From/To in next row, extreme right, 100px padding right */
.dashboard-duration-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.dashboard-duration-select-wrap {
    min-width: 0;
    max-width: 180px;
}
.dashboard-duration-custom-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding-right: 100px;
}
.dashboard-duration-custom-row .form-group {
    margin-bottom: 0;
    min-width: 0;
}
.dashboard-duration-custom-row .form-group label {
    font-size: 0.8125rem;
}
.dashboard-filters-form .dashboard-duration-group .form-control[type="date"],
.dashboard-filters-form .dashboard-duration-custom-row .form-control[type="date"] {
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
}
@media (max-width: 640px) {
    .dashboard-duration-select-wrap { max-width: none; }
    .dashboard-duration-custom-row { justify-content: flex-start; padding-right: 0; }
    .dashboard-duration-custom-row .form-group { width: 100%; }
}

.stats-grid-primary {
    margin-bottom: 1rem;
}
.stats-grid-secondary {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Dashboard stat tiles: clickable cards with modern SVG icons */
.stat-card-tile {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.stat-card-tile:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.12);
    transform: translateY(-1px);
}
.stat-card-tile-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: inherit;
}
.stat-card-tile-icon svg {
    width: 28px;
    height: 28px;
}
.stat-card-tile-icon-sm svg {
    width: 20px;
    height: 20px;
}
.stat-card-tile-jobs .stat-card-tile-icon { background: rgba(90, 155, 142, 0.18); color: #5a9b8e; }
.stat-card-tile-jobs:hover .stat-card-tile-icon { background: rgba(90, 155, 142, 0.28); }
.stat-card-tile-active .stat-card-tile-icon { background: rgba(0, 133, 77, 0.18); color: var(--success-color); }
.stat-card-tile-active:hover .stat-card-tile-icon { background: rgba(0, 133, 77, 0.28); }
.stat-card-tile-candidates .stat-card-tile-icon { background: rgba(184, 122, 138, 0.18); color: #b87a8a; }
.stat-card-tile-candidates:hover .stat-card-tile-icon { background: rgba(184, 122, 138, 0.28); }
.stat-card-tile-interviews .stat-card-tile-icon { background: rgba(139, 122, 168, 0.18); color: #8b7aa8; }
.stat-card-tile-interviews:hover .stat-card-tile-icon { background: rgba(139, 122, 168, 0.28); }
.stat-card-tile-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.stat-card-tile-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}
.stat-card-tile:hover .stat-card-tile-value {
    color: var(--primary-hover, var(--primary-color));
}
.stat-card-tile-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.stat-card-tile-compact {
    padding: 1rem 1.25rem;
}
.stat-card-tile-compact .stat-card-tile-value {
    font-size: 1.35rem;
}
.stat-card-tile-fillrate .stat-card-tile-value {
    color: var(--success-color);
}

/* Primary tiles: colored header with large number, label below; 7 in one row */
.stats-grid-primary-design {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    min-width: 0;
}

/* Dashboard mid row: 3 tiles – modern, colorful; Total Starts stands out */
.dashboard-mid-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.dashboard-mid-tile {
    min-width: 180px;
    max-width: 240px;
    flex: 1 1 180px;
    padding: 1rem 1.15rem;
    min-height: 5rem;
    border-radius: 14px;
    border: 1px solid transparent;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}
a.dashboard-mid-tile-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
a.dashboard-mid-tile-link:hover {
    color: inherit;
}
.dashboard-mid-tile-title {
    font-size: 0.7rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.5rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.dashboard-mid-tile-interviews .dashboard-mid-tile-title { border-bottom-color: rgba(99, 102, 241, 0.25); }
.dashboard-mid-tile-starts .dashboard-mid-tile-title { border-bottom-color: rgba(180, 83, 9, 0.35); }
.dashboard-mid-tile-fillrate .dashboard-mid-tile-title { border-bottom-color: rgba(16, 185, 129, 0.3); }
.dashboard-mid-tile-rows {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.dashboard-mid-tile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    line-height: 1.3;
}
.dashboard-mid-tile-label {
    font-weight: 500;
}
.dashboard-mid-tile-value {
    font-weight: 700;
    font-size: 0.9375rem;
}
.dashboard-mid-tile-value-large {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.dashboard-mid-tile-single {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
}

/* Interviews tile: indigo/violet */
.dashboard-mid-tile-interviews {
    background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: rgba(99, 102, 241, 0.25);
}
.dashboard-mid-tile-interviews .dashboard-mid-tile-title {
    color: #5b21b6;
}
.dashboard-mid-tile-interviews .dashboard-mid-tile-label {
    color: #6d28d9;
}
.dashboard-mid-tile-interviews .dashboard-mid-tile-value {
    color: #4f46e5;
}
.dashboard-mid-tile-interviews:hover {
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.2);
    transform: translateY(-2px);
}

/* Total Starts tile: hero – vibrant, stands out */
.dashboard-mid-tile-starts {
    background: linear-gradient(145deg, #fef3c7 0%, #fde68a 50%, #fcd34d 100%);
    border: 2px solid rgba(217, 119, 6, 0.4);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35), 0 0 0 1px rgba(251, 191, 36, 0.2);
    min-width: 200px;
    max-width: 260px;
    padding: 1.15rem 1.25rem;
    min-height: 5.5rem;
}
.dashboard-mid-tile-starts .dashboard-mid-tile-title {
    color: #92400e;
    font-size: 0.75rem;
}
.dashboard-mid-tile-starts .dashboard-mid-tile-value-large {
    font-size: 2.25rem;
    font-weight: 900;
    color: #b45309;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}
.dashboard-mid-tile-starts:hover {
    box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4), 0 0 0 1px rgba(251, 191, 36, 0.3);
    transform: translateY(-3px);
}

/* Fill rate tile: teal/green */
.dashboard-mid-tile-fillrate {
    background: linear-gradient(145deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: rgba(16, 185, 129, 0.3);
}
.dashboard-mid-tile-fillrate .dashboard-mid-tile-title {
    color: #047857;
}
.dashboard-mid-tile-fillrate .dashboard-mid-tile-value-large {
    font-size: 1.6rem;
    font-weight: 800;
    color: #0d9488;
}
.dashboard-mid-tile-fillrate:hover {
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
    transform: translateY(-2px);
}

.stat-card-primary {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    min-width: 0;
}
.stat-card-primary:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.12);
    transform: translateY(-2px);
}
.stat-card-primary-header {
    min-height: 3.75rem;
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, var(--primary-header-from) 0%, var(--primary-header-to) 100%);
}
.stat-card-primary-header::before {
    content: '';
    position: absolute;
    inset: 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%3Cpath d='M0 30 Q15 20 30 30 T60 30' stroke='rgba(255,255,255,0.12)' fill='none' stroke-width='1'/%3E%3C/svg%3E");
    opacity: 0.8;
}
.stat-card-primary-header .stat-card-primary-value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--primary-header-number-color, rgba(0,0,0,0.45));
    position: relative;
    z-index: 1;
    letter-spacing: -0.02em;
}
.stat-card-primary-body {
    padding: 0.6rem 0.75rem 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 2.5rem;
}
.stat-card-primary-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.25;
    font-weight: 500;
}
.stat-card-primary-label strong {
    font-weight: 700;
    color: var(--text-primary);
}
.back-to-dashboard {
    display: inline-block;
}
.stat-card-primary-teal { --primary-header-from: #7dd3c0; --primary-header-to: #5eb8a8; --primary-header-number-color: #1e5c52; }
.stat-card-primary-orange { --primary-header-from: #ffb366; --primary-header-to: #e6954a; --primary-header-number-color: #7a3a00; }
.stat-card-primary-lavender { --primary-header-from: #b8a9d4; --primary-header-to: #9b88c4; --primary-header-number-color: #3d3257; }
.stat-card-primary-slate { --primary-header-from: #b0b8c8; --primary-header-to: #9098ac; --primary-header-number-color: #2a3142; }
.stat-card-primary-blue { --primary-header-from: #7eb8da; --primary-header-to: #5a9fc9; --primary-header-number-color: #0d3a52; }
.stat-card-primary-periwinkle { --primary-header-from: #a8b5e8; --primary-header-to: #8a9ad9; --primary-header-number-color: #2d3d6b; }
.stat-card-primary-mint { --primary-header-from: #8ed9c4; --primary-header-to: #6bc4ab; --primary-header-number-color: #1a5548; }
.stat-card-primary-green { --primary-header-from: #9ed99e; --primary-header-to: #7bc47b; --primary-header-number-color: #2d5c2d; }

@media (max-width: 1200px) {
    .stats-grid-primary-design { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .stats-grid-primary-design { grid-template-columns: repeat(2, 1fr); }
}

/* Stage tiles: smaller, colorful */
.section-subtitle {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.stats-grid-stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.stat-card-stage {
    padding: 0.6rem 1rem;
    border-radius: 8px;
    min-width: 6rem;
    text-align: center;
    border: 1px solid var(--border-color);
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.stat-card-stage-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}
.stat-card-stage-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.stat-card-stage-0 { border-left: 4px solid #5a9b8e; }
.stat-card-stage-1 { border-left: 4px solid #8b7aa8; }
.stat-card-stage-2 { border-left: 4px solid #e6954a; }
.stat-card-stage-3 { border-left: 4px solid #5a9fc9; }
.stat-card-stage-4 { border-left: 4px solid #7bc47b; }
.stat-card-stage-5 { border-left: 4px solid #b87a8a; }

/* Job list: per-job stage counts */
.job-stage-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.job-stage-badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 102, 204, 0.08);
    color: var(--primary-color);
    font-weight: 500;
}

.stat-card-modern {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
}
.stat-card-modern:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.stat-icon-wrap {
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.stat-icon-wrap .stat-icon-inner {
    font-size: 1.5rem;
}
.stat-icon-wrap.stat-icon-jobs { background: rgba(90, 155, 142, 0.15); }
.stat-icon-wrap.stat-icon-active { background: rgba(0, 133, 77, 0.15); }
.stat-icon-wrap.stat-icon-candidates { background: rgba(184, 122, 138, 0.15); }
.stat-icon-wrap.stat-icon-interviews { background: rgba(139, 122, 168, 0.15); }

.stat-card-compact {
    padding: 1rem 1.25rem;
}
.stat-card-compact .stat-value {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 0.2rem;
}
.stat-card-compact.stat-card-fillrate .stat-value {
    color: var(--success-color);
}
.stat-muted {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

/* Hot jobs: inline search – same look as Source Channel in Create Candidate */
.section-header-with-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.section-header-with-search h2 {
    margin: 0;
    flex-shrink: 0;
}
.section-header-with-search .dashboard-search-inline {
    flex: 1 1 220px;
    min-width: 220px;
    max-width: 400px;
}
.section-header-with-search .dashboard-search-inline-field.select-search-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}
.section-header-with-search .dashboard-search-inline-field .dashboard-search-input.select-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.section-header-with-search .dashboard-search-inline-field .dashboard-search-input::placeholder {
    color: var(--placeholder-color);
}
.section-header-with-search .dashboard-search-inline-field .dashboard-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    background: #fff;
    box-shadow: none;
}
.section-header-with-search .dashboard-search-inline-field .dashboard-search-input.has-value {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.section-header-with-search .btn {
    flex-shrink: 0;
}

.dashboard-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Cards */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.card-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
}

.card-header h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

/* Standard: card headers with inline dropdowns/controls — title left, actions right */
.card-header-with-actions {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}
.job-detail-fields-card .card-header .job-detail-status-readonly {
    margin-left: auto;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
}
.card-header-with-actions .card-header-actions,
.card-header-with-actions .job-detail-status-form {
    margin: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* Standard: dropdowns/selects in card header row — compact, consistent height and width */
.card-header-with-actions .select-search-wrap,
.card-header-with-actions select.select-search {
    min-width: 140px;
}
.card-header-with-actions .select-search-input {
    height: 2.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    min-height: 2.25rem;
}
.card-header-with-actions .form-control,
.card-header-with-actions .job-candidates-search {
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.job-detail-status-select {
    min-width: 140px;
}
/* Highlight job status dropdown – pill style with left accent */
.job-detail-status-form .select-search-wrap {
    border: 1px solid var(--border-color);
    border-radius: 999px;
    border-left: 3px solid var(--primary-color);
    background: var(--surface);
    padding-left: 0.5rem;
}
.job-detail-status-form .select-search-input {
    border: none;
    background: transparent;
    font-weight: 600;
    border-radius: 999px;
}
.job-detail-status-form .select-search-input:focus {
    box-shadow: none;
}
/* Job status change: reason capture (full width below dropdown in header) */
.status-change-reason-block {
    flex-basis: 100%;
    width: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}
.status-change-reason-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
}
.status-change-reason-text {
    width: 100%;
    margin-bottom: 0.5rem;
    resize: vertical;
    min-height: 2.5rem;
}
.status-change-reason-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Job Status change history — timeline-style audit log */
#job-status-history-section .card-body { padding-top: 0.5rem; }
.status-history-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.status-history-entry {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.status-history-entry:last-child { border-bottom: none; }
.status-history-entry-marker {
    flex-shrink: 0;
    width: 4px;
    border-radius: 2px;
    background: var(--primary-color);
    opacity: 0.7;
    margin-top: 0.35rem;
}
.status-history-entry-content {
    flex: 1;
    min-width: 0;
}
.status-history-entry-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.status-history-entry-badges {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.status-history-badge {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius);
    font-size: 0.8125rem;
    font-weight: 500;
}
.status-history-arrow {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.status-history-entry-meta {
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.status-history-datetime {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.status-history-user {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
}
.status-history-entry-reason {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.6rem 0.75rem;
    background: transparent;
}
.status-history-reason-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 0.35rem;
}
.status-history-reason-text {
    font-size: 0.9375rem;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}
/* Job status badges in history (align with job-status-* colors) */
.badge-hold { background: #fef3c7; color: #b45309; }
.badge-lost { background: #fee2e2; color: #b91c1c; }
.badge-won { background: #dbeafe; color: #1e40af; }
/* Empty state */
.status-history-empty {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--background);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--border-color);
}
.status-history-empty-icon {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    opacity: 0.6;
}
.status-history-empty-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
}
.status-history-empty-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 28em;
    margin-left: auto;
    margin-right: auto;
}
.status-history-timeline-sidebar .status-history-entry { padding: 0.75rem 0; }
.status-history-empty-sidebar { padding: 1.25rem 1rem; }
.status-history-empty-sidebar .status-history-empty-desc { max-width: none; }

/* Job Remarks section + inline compose (appears below header) */
#job-remarks-section .card-body { position: relative; }
.job-remarks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.job-remarks-header h3 { margin: 0; }
.job-remarks-compose-inline {
    margin-bottom: 1.25rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--border-color);
}
.job-remarks-compose-inline.hide { display: none; }
.job-remarks-textarea {
    width: 100%;
    resize: vertical;
    min-height: 5rem;
}
.job-remarks-compose-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.job-remarks-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.job-remark-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.job-remark-item:last-child { border-bottom: none; }
.job-remark-text {
    flex: 1;
    min-width: 0;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.9375rem;
    color: var(--text-primary);
}
.job-remark-meta {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}
.job-remark-user { font-weight: 700; color: var(--text-primary); }
.job-remark-time { font-variant-numeric: tabular-nums; margin-top: 0.15rem; }
.job-remarks-empty { margin: 0; font-size: 0.9rem; }

/* Job detail page: title row with status indicator (icon + label, colored by status) */
.job-detail-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.job-detail-title-text { margin: 0; }
.job-detail-hot-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    border-radius: 6px;
    transition: filter 0.2s, transform 0.15s;
}
.job-detail-hot-btn:hover { transform: scale(1.05); }
.job-detail-hot-btn:focus { outline: none; border: none; box-shadow: none; }
.job-detail-hot-btn:focus-visible { outline: 2px solid var(--primary-color, #0ea5e9); outline-offset: 2px; }
.job-detail-hot-btn:disabled { cursor: wait; opacity: 0.8; }
.job-detail-hot-icon {
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    filter: grayscale(1) brightness(1.1);
    opacity: 0.7;
    background: transparent;
    border: none;
}
.job-detail-hot-btn.is-on .job-detail-hot-icon {
    filter: none;
    opacity: 1;
}
.job-status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: capitalize;
}
.job-status-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.job-status-active   { background: #d1fae5; color: #065f46; }
.job-status-hold     { background: #fef3c7; color: #b45309; }
.job-status-lost     { background: #fee2e2; color: #b91c1c; }
.job-status-won     { background: #dbeafe; color: #1e40af; }
.job-status-cancelled { background: #f3f4f6; color: #6b7280; }
.job-status-closed  { background: #e5e7eb; color: #4b5563; }

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    background: var(--background);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Jobs Grid */
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
}

.job-card {
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--surface);
}

.job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 102, 204, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.job-details p {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

/* Jobs filters – search top, filters row 2, per page + saved left / view right bottom */
.jobs-filters-card .jobs-filters-body { padding: 1rem 1.25rem; }
.jobs-filter-form { width: 100%; }

.jobs-search-row {
    width: 100%;
    margin-bottom: 1rem;
}
.jobs-search-input-full {
    width: 100%;
    max-width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.9375rem;
}
.jobs-search-input-full::placeholder { color: var(--text-secondary); }

.jobs-filters-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
}
.jobs-filters-filters {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}
.jobs-filters-bottom {
    justify-content: space-between;
    align-items: center;
}

.filter-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.filter-inline label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}
.filter-inline .form-control,
.filter-inline .form-control-sm {
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.filter-inline select.form-control-sm { min-width: 110px; }
.filter-per-page-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.jobs-per-page-input { width: 3.5rem; text-align: center; }
.per-page-presets { display: inline-flex; gap: 0.2rem; }
.per-page-presets .preset-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}
.per-page-presets .preset-btn:hover {
    background: var(--background);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.filter-actions-inline { display: inline-flex; gap: 0.5rem; margin-left: 0.25rem; }

/* View (Grid, Tile, Row) – outside filter card, right bottom */
.jobs-view-outer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.75rem;
    padding-right: 0;
    min-height: 2rem;
}
.jobs-view-outer .jobs-view-switcher {
    margin-left: auto;
}

.jobs-view-switcher {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.jobs-view-switcher .view-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-right: 0.25rem;
}
.jobs-view-switcher .view-link {
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
    color: var(--text-secondary);
    background: var(--background);
    border: 1px solid var(--border-color);
}
.jobs-view-switcher .view-link:hover { color: var(--primary-color); border-color: var(--primary-color); }
.jobs-view-switcher .view-link.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.jobs-view-switcher .view-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.25rem 0.4rem;
    font-size: 0.75rem;
}
.jobs-view-switcher .view-link-icon svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.jobs-view-switcher .view-link-icon .view-link-text {
    font-size: 0.75rem;
}

/* Saved searches */
.jobs-saved-searches {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.jobs-saved-searches .saved-label { font-size: 0.8125rem; color: var(--text-secondary); font-weight: 500; }
.saved-slots { display: inline-flex; gap: 0.25rem; }
.saved-slot-btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}
.saved-slot-btn:hover { border-color: var(--primary-color); color: var(--primary-color); }
.saved-slot-btn.saved { background: var(--background); border-color: var(--primary-color); color: var(--primary-color); }
.save-current-wrap { display: inline-flex; align-items: center; gap: 0.35rem; }
.save-current-wrap select.form-control-sm { width: auto; min-width: 5rem; }

/* Jobs container – view types */
.jobs-container {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
/* Grid: compact multi-column cards */
.jobs-view-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.jobs-view-grid .job-card {
    padding: 0;
    font-size: 0.9rem;
}
.jobs-view-grid .job-card-title { font-size: 1rem; line-height: 1.25; }
.jobs-view-grid .job-card-header,
.jobs-view-grid .job-card-body,
.jobs-view-grid .job-card-footer {
    padding-left: 1rem;
    padding-right: 1rem;
}
.jobs-view-grid .job-card-footer {
    flex-direction: column;
    align-items: stretch;
}
.jobs-view-grid .job-card-footer-meta {
    width: 100%;
}
.jobs-view-grid .job-card-footer-actions {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
    margin-top: 0.5rem;
}
.jobs-view-grid .job-card-header { padding-top: 1rem; padding-bottom: 0.5rem; }
.jobs-view-grid .job-card-body { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.jobs-view-grid .job-card-footer { padding-top: 0.5rem; padding-bottom: 1rem; }
.jobs-view-grid .job-detail-row { font-size: 0.8125rem; }
.jobs-view-grid .job-tile-candidates { padding: 0.4rem 0.5rem; margin-top: 0.5rem; }
.jobs-view-grid .job-tile-candidates-label { margin-bottom: 0.25rem; font-size: 0.75rem; }
.jobs-view-grid .job-tile-loops {
    flex-wrap: nowrap;
    gap: 0.35rem 0.5rem;
}
.jobs-view-grid .job-tile-loops li {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* Tile: fewer, larger cards – clearly different from grid */
.jobs-view-tile {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 1.5rem;
}
.jobs-view-tile .job-card {
    padding: 0;
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 4px 20px rgba(0, 102, 204, 0.08), 0 2px 8px rgba(0,0,0,0.04);
}
.jobs-view-tile .job-card:hover {
    box-shadow: 0 16px 40px rgba(0, 102, 204, 0.14), 0 6px 16px rgba(0, 0, 0, 0.08);
}
.jobs-view-tile .job-card-header,
.jobs-view-tile .job-card-body,
.jobs-view-tile .job-card-footer {
    padding-left: 1.35rem;
    padding-right: 1.35rem;
}
.jobs-view-tile .job-card-header { padding-top: 1.35rem; padding-bottom: 0.85rem; }
.jobs-view-tile .job-card-body { padding-top: 0.85rem; padding-bottom: 0.85rem; }
.jobs-view-tile .job-card-footer { padding-top: 0.85rem; padding-bottom: 1.35rem; }
.jobs-view-tile .job-card-title { font-size: 1.25rem; line-height: 1.35; margin-bottom: 0; }
/* Push "Total candidates" and below to a fixed position; keep Job ID / Location at top */
.job-card .job-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
.job-card .job-card-footer {
    flex-shrink: 0;
    margin-top: auto;
}
.job-card-body-top {
    flex: 0 0 auto;
    min-height: 10rem;
}
.job-card-body-bottom {
    flex: 0 0 auto;
    margin-top: auto;
}
.job-card-body-bottom .job-tile-candidates { margin-top: 0.75rem; }
.job-card-body-bottom .progress-bar { margin-top: 0.75rem; }
.jobs-view-grid .job-card-body-top { min-height: 8rem; }
.jobs-view-tile .job-card-body-top { min-height: 11rem; }
.jobs-view-tile .job-tile-customer-row { margin-bottom: 0.85rem; }
.jobs-view-tile .job-details-stacked { gap: 0.4rem; margin-bottom: 0.25rem; }
.jobs-view-tile .job-detail-row { font-size: 0.9375rem; }
.jobs-view-tile .job-detail-row .label { color: #64748b; min-width: 6em; }
.jobs-view-tile .job-detail-row .value { color: #334155; }
.jobs-view-tile .job-tile-candidates { margin-top: 0.85rem; }
.jobs-view-tile .progress-bar { height: 10px; border-radius: 10px; margin-top: 0.85rem; }

.jobs-view-row {
    grid-template-columns: 1fr;
}
.jobs-view-row .job-card {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 0 1.5rem;
    align-items: center;
}
.jobs-view-row .job-card-header { grid-column: 1; grid-row: 1; }
.jobs-view-row .job-card-body { grid-column: 1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.jobs-view-row .job-card-footer { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; align-items: center; }
.jobs-view-row .job-details-stacked { flex: 1; }
.jobs-view-row .job-card-badges { grid-column: 2; grid-row: 1 / 3; justify-self: end; }
@media (max-width: 768px) {
    .jobs-view-row .job-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
    .jobs-view-row .job-card-badges { grid-column: 1; grid-row: 2; }
}

/* Job card – stacked labels (max space for title) */
.job-card-header {
    padding-bottom: 0.5rem;
    background: linear-gradient(135deg, rgba(0, 102, 204, 0.06) 0%, rgba(0, 133, 77, 0.04) 100%);
    border-bottom: 1px solid rgba(0, 102, 204, 0.08);
}
.job-card-header-flex {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
/* Grid and tile: row1 = bubbles (left to right), row2 = job title + hot icon with full space */
.jobs-view-grid .job-card-header-flex,
.jobs-view-tile .job-card-header-flex {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}
.jobs-view-grid .job-card-header-flex .job-card-header-row1,
.jobs-view-tile .job-card-header-flex .job-card-header-row1,
.jobs-view-grid .job-card-header-flex .job-card-badges,
.jobs-view-tile .job-card-header-flex .job-card-badges {
    order: 0;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: 0.35rem;
}
.jobs-view-grid .job-card-header-flex .job-card-header-row2,
.jobs-view-tile .job-card-header-flex .job-card-header-row2,
.jobs-view-grid .job-card-header-flex .job-card-title,
.jobs-view-tile .job-card-header-flex .job-card-title {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    margin-bottom: 0;
}
.job-card-header-flex .job-card-title {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}
.job-card-header-flex .job-card-badges {
    flex-shrink: 0;
}
.job-card-title {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    line-height: 1.3;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    flex-wrap: wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.job-card-hot-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-top: 0.1em;
}
.job-card-hot-icon img {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}
.job-card-hot-icon.job-card-hot-hidden {
    display: none !important;
}
.job-card-title a { text-decoration: none; color: inherit; flex: 1; min-width: 0; }
.job-card-title a:hover { color: var(--primary-color); }
/* Row 1: bubbles left to right, never overflow into row 2 */
.job-card-badges {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}
.job-card-badges .badge {
    border-radius: 8px;
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}
.job-card-badges .badge-active { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); color: #065f46; border: 1px solid rgba(6, 95, 70, 0.2); }
.job-card-badges .badge-hold { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); color: #92400e; border: 1px solid rgba(146, 64, 14, 0.2); }
.job-card-badges .badge-closed { background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%); color: #475569; border: 1px solid rgba(71, 85, 105, 0.2); }
.job-card-badges .badge-hired { background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%); color: #1e40af; border: 1px solid rgba(30, 64, 175, 0.2); }
/* Job tile – Job ID and customer */
.job-tile-id-row {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    margin-bottom: 0.4rem;
}
.job-tile-id-label {
    font-weight: 600;
    margin-right: 0.25rem;
}
.job-tile-id-value {
    font-weight: 500;
    color: var(--text-primary);
}
.job-tile-customer-row {
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
    padding: 0.45rem 0.6rem;
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.06) 0%, transparent 100%);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}
.job-tile-customer-name {
    font-weight: 700;
    color: #1e293b;
}
.job-tile-end-customer {
    font-weight: 500;
    color: #6366f1;
    font-size: 0.9em;
}
.job-tile-contact {
    color: #64748b;
    font-weight: 400;
}
.job-tile-status-badge {
    margin-left: 0.5rem;
    vertical-align: middle;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
}
.job-details-stacked {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
/* Job tile – total candidates and loops */
.job-tile-candidates {
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, rgba(0, 133, 77, 0.04) 100%);
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.12);
    font-size: 0.875rem;
}
.job-tile-candidates-label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}
.job-tile-created-by-line {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4f46e5;
}
.job-tile-loops {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}
.job-tile-loops li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
}
.job-tile-loops li:nth-child(1) { background: rgba(59, 130, 246, 0.15); color: #1d4ed8; }
.job-tile-loops li:nth-child(2) { background: rgba(16, 185, 129, 0.15); color: #047857; }
.job-tile-loops li:nth-child(3) { background: rgba(245, 158, 11, 0.2); color: #b45309; }
.job-tile-loop-name {
    color: inherit;
}
.job-tile-loop-count {
    font-weight: 700;
    color: inherit;
    min-width: 1.25rem;
    text-align: center;
}
.job-tile-loop-empty {
    color: var(--text-secondary);
    font-style: italic;
}
.job-details-stacked {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.job-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.875rem;
    padding: 0.2rem 0;
}
.job-detail-row .label {
    color: #64748b;
    font-weight: 600;
    min-width: 5.5rem;
    font-size: 0.8125rem;
}
.job-detail-row .value {
    color: var(--text-primary);
    font-weight: 500;
}
/* Job card progress bar – modern gradient */
.job-card-body .progress-bar {
    height: 8px;
    border-radius: 10px;
    background: rgba(0, 102, 204, 0.12);
    overflow: hidden;
    margin-top: 0.75rem;
}
.job-card-body .progress-fill {
    border-radius: 10px;
    background: linear-gradient(90deg, var(--primary-color) 0%, #00854d 100%);
    transition: width 0.4s ease;
}
.job-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--background);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem !important;
    flex-shrink: 0;
}
.job-card-footer-meta {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
}
.job-card-footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.job-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}
.job-card-btn-primary {
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    color: #fff;
    border: 1px solid #0369a1;
}
.job-card-btn-primary:hover {
    background: linear-gradient(180deg, #0369a1 0%, #075985 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.35);
}
.job-card-btn-secondary {
    background: #fff;
    color: #475569;
    border: 1px solid #cbd5e1;
}
.job-card-btn-secondary:hover {
    background: #f8fafc;
    color: #0f172a;
    border-color: #94a3b8;
}
.job-card-footer .btn-sm {
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}
.job-card-mine {
    border-left: 4px solid var(--success-color);
    box-shadow: 0 4px 16px rgba(0, 133, 77, 0.1);
}
.job-card-mine .job-card-header {
    background: linear-gradient(135deg, rgba(0, 133, 77, 0.08) 0%, rgba(0, 102, 204, 0.05) 100%);
}

/* Jobs pagination */
.jobs-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--border-color);
}
.jobs-pagination .pagination-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
}
.jobs-pagination .pagination-per-page {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.jobs-pagination .pagination-per-page label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.jobs-pagination .pagination-per-page .jobs-per-page-input {
    width: 3.5rem;
    height: 2rem;
    text-align: center;
    padding: 0 0.35rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.jobs-pagination .pagination-per-page .per-page-presets { display: inline-flex; gap: 0.2rem; }
.jobs-pagination .pagination-per-page .preset-btn {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.4rem;
    font-size: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
}
.jobs-pagination .pagination-per-page .preset-btn:hover {
    background: var(--background);
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.jobs-pagination .pagination-info { font-size: 0.9rem; color: var(--text-secondary); }
.jobs-pagination .pagination-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.jobs-pagination .pagination-pages { font-size: 0.9rem; color: var(--text-secondary); }
.jobs-pagination .btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* Job List */
.job-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.job-item {
    background: var(--surface);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.job-info h3 {
    margin-bottom: 0.5rem;
}

.job-info h3 a {
    color: var(--text-primary);
    text-decoration: none;
}

.job-info h3 a:hover {
    color: var(--primary-color);
}

.job-meta {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.job-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    min-width: 0;
}

/* Customer detail: description and contacts table */
.customer-detail-desc {
    margin: 0.35rem 0 0.5rem 0;
    font-size: 0.9375rem;
    color: #64748b;
}
.customer-detail-contacts-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}
.customer-detail-contacts-card .card-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    padding: 0.75rem 1.25rem;
}
.customer-detail-contacts-card .card-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}
.customer-detail-contacts-card .card-body {
    padding: 0;
}
.customer-detail-contacts-table {
    font-size: 0.9375rem;
    margin: 0;
}
.customer-detail-contacts-table thead {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}
.customer-detail-contacts-table th {
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
}
.customer-detail-contacts-table td {
    padding: 0.4rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.customer-detail-contacts-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.customer-detail-contacts-table tbody tr:hover {
    background: #f0f9ff !important;
}
.customer-detail-contacts-table tbody tr td:first-child {
    font-weight: 600;
    color: #0f172a;
}
.customer-detail-contacts-table a[href]:hover {
    color: var(--primary-color, #0066cc);
}

/* Customer detail: permanent delete below contacts table */
.customer-detail-delete-below-table {
    margin-top: 1.35rem;
    max-width: 42rem;
}
.customers-page .customer-detail-delete-below-table .entity-delete-body {
    max-width: none;
}
.customer-detail-contacts-card.customer-delete-card--marked {
    box-shadow: 0 0 0 1px rgba(192, 0, 0, 0.22), 0 6px 20px rgba(192, 0, 0, 0.07);
    transition: box-shadow 0.25s ease;
}
.customer-detail-contacts-table.customer-delete-table--marked {
    outline: 2px dashed rgba(192, 0, 0, 0.32);
    outline-offset: -3px;
    border-radius: 8px;
    transition: outline 0.2s ease;
}
.customer-detail-contacts-table tbody tr.customer-delete-row--marked {
    background: rgba(192, 0, 0, 0.08) !important;
    box-shadow: inset 4px 0 0 var(--danger-color, #c00);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.customer-detail-contacts-table tbody tr.customer-delete-row--marked:hover {
    background: rgba(192, 0, 0, 0.11) !important;
}

.job-stats {
    min-width: 200px;
}

.progress-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--background);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s;
}

.progress-bar-small {
    width: 100px;
    height: 6px;
    background: var(--background);
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
}

/* Badges */
.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.badge-active {
    background: #dcfce7;
    color: #166534;
}

.badge-closed {
    background: #fee2e2;
    color: #991b1b;
}

.badge-applied {
    background: #dbeafe;
    color: #1e40af;
}

.badge-screening {
    background: #fef3c7;
    color: #92400e;
}

.badge-interview_scheduled {
    background: #e0e7ff;
    color: #3730a3;
}

.badge-interviewed {
    background: #e9d5ff;
    color: #6b21a8;
}

.badge-offer {
    background: #d1fae5;
    color: #065f46;
}

.badge-hired {
    background: #dcfce7;
    color: #166534;
}

.badge-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.badge-scheduled {
    background: #dbeafe;
    color: #1e40af;
}

.badge-completed {
    background: #d1fae5;
    color: #065f46;
}

.badge-cancelled {
    background: #f3f4f6;
    color: #6b7280;
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    font-size: 1rem;
}

.btn-primary {
    background: var(--primary-color);
    color: #fff;
}

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

.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

.btn-secondary:hover {
    background: #475569;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}
.btn-danger {
    background: var(--danger-color, #ef4444);
    color: #fff;
    border: 1px solid var(--danger-color, #ef4444);
}
.btn-danger:hover:not(:disabled) {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}
.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Schedule Interview page: modern layout, header, right panel */
.schedule-interview-page {
    max-width: 1400px;
    margin: 0 auto;
}
.schedule-interview-page .schedule-interview-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem 1.5rem 1.75rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 35%, #bae6fd 70%, #7dd3fc 100%);
    border-radius: 12px;
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-left: 4px solid #0284c7;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.1);
}
.schedule-interview-header-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}
.schedule-interview-header-left { flex: 1; min-width: 0; }
.schedule-interview-header-right { flex-shrink: 0; }
.schedule-header-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.4);
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.schedule-header-clear-btn:hover {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 0 20px rgba(220, 38, 38, 0.15);
}
.schedule-header-clear-warning {
    font-size: 0.7rem;
    font-weight: 500;
    color: #b91c1c;
    opacity: 0;
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.2s ease, max-width 0.25s ease;
}
.schedule-header-clear-btn:hover .schedule-header-clear-warning {
    opacity: 1;
    max-width: 120px;
    margin-left: 0.15rem;
}
.schedule-header-clear-icon { font-size: 1rem; line-height: 1; }
.schedule-interview-page .schedule-interview-page-header .back-link {
    margin-bottom: 0.65rem;
    display: inline-block;
}
.schedule-interview-page .schedule-interview-hero-title {
    margin: 0 0 0.35rem 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: #0c4a6e;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.schedule-interview-page .schedule-interview-hero-desc {
    margin: 0;
    font-size: 0.9375rem;
    color: #0369a1;
    line-height: 1.5;
    max-width: 56ch;
}
.schedule-interview-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 960px) {
    .schedule-interview-layout { grid-template-columns: 1fr; }
}
.schedule-interview-main .card-modern {
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
/* Form uses .card (global overflow:hidden); allow interviewer/job select-search dropdowns to extend past the card */
.schedule-interview-main .schedule-interview-form.card {
    overflow: visible;
}
.schedule-interview-main .card-body { padding: 1.5rem; }
.schedule-form-row {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}
.schedule-form-row-1 { grid-template-columns: 1fr minmax(180px, 220px); }
.schedule-form-row-2 { grid-template-columns: 1fr; }
.schedule-form-row-3 { grid-template-columns: 1fr 1fr; }
.schedule-interview-form .form-group select.has-value,
.schedule-interview-form .form-group input.form-control.has-value,
.schedule-interview-form .form-group textarea.has-value { background: #eff6ff; }
.schedule-interview-form .schedule-interview-interviewer-wrap.select-search-has-value .select-search-input { background: #eff6ff; }
.schedule-interview-form .form-group:has(textarea.has-value) {
    background: #eff6ff;
    padding: 0.5rem;
    border-radius: 6px;
}
@media (max-width: 600px) {
    .schedule-form-row-1,
    .schedule-form-row-3 { grid-template-columns: 1fr; }
}
.schedule-interview-panel {
    position: sticky;
    top: 5rem;
    background: linear-gradient(180deg, #fafbfd 0%, #f1f5f9 100%);
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
    min-height: 420px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
}
.schedule-panel-placeholder {
    margin: 0;
    font-size: 0.9375rem;
    padding: 1rem 0.5rem;
    color: #64748b;
    line-height: 1.5;
    text-align: center;
}
.schedule-panel-section { margin-bottom: 1.25rem; }
.schedule-panel-section:last-child { margin-bottom: 0; }
.schedule-upcoming-interview-banner {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    background: #e0f2fe;
    color: #0369a1;
    border-radius: var(--radius);
    border-left: 4px solid #0ea5e9;
}
.schedule-section-card {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.schedule-section-candidate .schedule-section-title { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); color: #1e40af; }
.schedule-section-job .schedule-section-title { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%); color: #5b21b6; }
.schedule-section-tagged .schedule-section-title { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #047857; }
.schedule-section-title {
    margin: 0;
    padding: 0.75rem 1.125rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
}
.schedule-section-body { padding: 1rem 1.125rem 1.125rem; }
.schedule-panel-dl { margin: 0; font-size: 0.9375rem; }
.schedule-panel-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.25rem;
    margin-left: -0.65rem;
    margin-right: -0.65rem;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    line-height: 1.5;
    border-bottom: 1px solid rgba(241, 245, 249, 0.9);
    border-radius: 8px;
    transition: background 0.15s ease;
}
.schedule-panel-row:last-child { margin-bottom: 0; padding-bottom: 0.5rem; border-bottom: none; }
.schedule-panel-row.schedule-panel-row-has-value { background: #f0f9ff; border-color: rgba(186, 230, 253, 0.5); }
.schedule-panel-row.schedule-panel-row-has-value:last-child { border-bottom: none; }
.schedule-panel-label {
    color: #64748b;
    font-size: 0.78125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    min-width: 0;
}
.schedule-panel-value { color: #0369a1; font-size: 0.9375rem; font-weight: 500; word-break: break-word; }
.schedule-panel-value-link {
    color: #0284c7;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}
.schedule-panel-value-link:hover { color: #0c4a6e; text-decoration: underline; }
.schedule-tagged-job-title-link { color: #0284c7; font-weight: 600; text-decoration: none; transition: color 0.15s ease; }
.schedule-tagged-job-title-link:hover { color: #0c4a6e; text-decoration: underline; }
.schedule-panel-job-placeholder { margin: 0; font-size: 0.875rem; color: #94a3b8; padding: 0.5rem 0; font-style: italic; }
.schedule-tagged-jobs-list { list-style: none; margin: 0; padding: 0; }
.schedule-interview-panel .schedule-tagged-job-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    font-size: 0.9375rem;
    position: relative;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.schedule-interview-panel .schedule-tagged-job-item:hover {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    border-color: rgba(2, 132, 199, 0.25);
}
.schedule-interview-panel .schedule-tagged-job-item:last-child { margin-bottom: 0; }
.schedule-interview-panel .schedule-tagged-job-id { font-weight: 700; color: #0369a1; font-size: 0.8125rem; }
.schedule-interview-panel .schedule-tagged-job-title { color: #0f172a; }
.schedule-interview-panel .schedule-tagged-job-customer { color: #64748b; font-size: 0.8125rem; }
.schedule-interview-panel .schedule-earlier-feedback-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.35rem 0.65rem;
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.06) 0%, rgba(51, 65, 85, 0.08) 100%);
    color: #475569;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: help;
    position: relative;
    border: 1px solid rgba(148, 163, 184, 0.2);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.schedule-interview-panel .schedule-earlier-feedback-bubble:hover {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.08) 0%, rgba(51, 65, 85, 0.12) 100%);
    border-color: rgba(148, 163, 184, 0.35);
    color: #0f172a;
}
.schedule-interview-panel .schedule-earlier-feedback-tooltip {
    position: fixed;
    min-width: 280px;
    max-width: 380px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10000;
    pointer-events: none;
    overflow: hidden;
}
.schedule-interview-panel .schedule-earlier-feedback-tooltip.schedule-feedback-tooltip-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.schedule-interview-notes-input.form-control {
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    font-size: 0.9375rem;
}
.schedule-interview-interviewer-form-group { overflow: visible; }
.schedule-interview-interviewer-wrap { position: relative; overflow: visible; }
.schedule-interview-interviewer-wrap .select-search-dropdown {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 1000;
    margin-top: 4px;
}
.schedule-interview-interviewer-wrap .select-search-option-add { font-style: italic; color: var(--primary-color); }

/* Beautified buttons (e.g. Schedule Interview page) */
.btn-beautified {
    border-radius: var(--radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.btn-beautified:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.btn-primary.btn-beautified {
    background: var(--primary-color);
    box-shadow: 0 1px 3px rgba(0, 102, 204, 0.25);
    font-weight: 600;
}
.btn-primary.btn-beautified:hover {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.35);
    transform: translateY(-1px);
}
.btn-secondary.btn-beautified {
    background: #f8fafc;
    color: #475569;
    border: 1px solid var(--border-color);
}
.btn-secondary.btn-beautified:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
    color: #334155;
}
.btn-soft.btn-beautified {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-soft.btn-beautified:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.form-actions-buttons-beautified {
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
}
.form-actions-buttons-beautified .btn {
    min-height: 2.75rem;
    padding: 0.65rem 1.5rem;
}
.schedule-interview-form .job-form-section {
    margin-bottom: 0.5rem;
}
.schedule-interview-form .form-actions-buttons-beautified {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Forms */
.form-container {
    max-width: 800px;
    margin: 0 auto;
}

/* Form layout: label on top, input below (clear UX alignment) */
.form-group {
    margin-bottom: 1.25rem;
    max-width: 100%;
}
.form-group > label:first-child:not(.checkbox-label) {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.form-group .checkbox-label {
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
}

.form-group > input,
.form-group > select,
.form-group > textarea,
.form-group > .skills-input-wrapper {
    display: block;
    width: 100%;
    min-width: 0;
}
.form-group > .checkbox-group {
    display: block;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}
.form-group input[type="number"],
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="url"],
.form-group input[type="search"],
.form-group input[type="datetime-local"],
.form-group input[type="date"],
.form-group select {
    width: 100%;
    max-width: 100%;
}
.form-group textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
}

/* Inline form group (label + input on same line) for compact sections */
.form-group-inline {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.form-group-inline > label:first-child:not(.checkbox-label) {
    flex: 0 0 140px;
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
}
.form-group-inline > input,
.form-group-inline > select,
.form-group-inline > .skills-input-wrapper {
    flex: 1 1 200px;
    min-width: 0;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
    margin-bottom: 1rem;
}
.form-row .form-group {
    margin-bottom: 0;
}
.form-row .form-group-full-row {
    grid-column: 1 / -1;
}
.form-row + .form-row {
    margin-top: 0;
}
.form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
    margin-bottom: 1rem;
}
.form-row-2 .form-group { margin-bottom: 0; }
.form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
    margin-bottom: 1rem;
}
.form-row-3 .form-group { margin-bottom: 0; }
/* Government ID on create candidate: keep in right column */
.form-row-3 .form-group.government-id-right {
    grid-column: 3;
}
/* Budget row: more space for Budget, shorter for Asset given by & End-client */
.form-row-budget-wide {
    grid-template-columns: 2fr 1fr 1fr;
}
.form-row-budget-wide .form-group:first-child {
    min-width: 0;
}
.form-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
    margin-bottom: 1rem;
}
.form-row-4 .form-group { margin-bottom: 0; }
@media (max-width: 900px) {
    .form-row-2 { grid-template-columns: 1fr; }
    .form-row-3 { grid-template-columns: repeat(2, 1fr); }
    .form-row-budget-wide { grid-template-columns: repeat(2, 1fr); }
    .form-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .form-row-2,
    .form-row-3 { grid-template-columns: 1fr; }
    .form-row-budget-wide { grid-template-columns: 1fr; }
    .form-row-4 { grid-template-columns: 1fr; }
}

/* Create/Edit Job: grouped sections, use more width */
.job-form-layout { max-width: 1000px; margin: 0 auto; }
.job-form-section {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
}
/* Soft left accent color per section (create/edit job) */
.job-form-layout .job-form-section:nth-of-type(1) { border-left-color: #c4b8e0; }
.job-form-layout .job-form-section:nth-of-type(2) { border-left-color: #7dd3c8; }
.job-form-layout .job-form-section:nth-of-type(3) { border-left-color: #86efac; }
.job-form-layout .job-form-section:nth-of-type(4) { border-left-color: #93c5fd; }
.job-form-layout .job-form-section:nth-of-type(5) { border-left-color: #fcd34d; }
.job-form-layout .job-form-section:nth-of-type(6) { border-left-color: #f9a8d4; }
.job-form-layout .job-form-section:nth-of-type(7) { border-left-color: #a5b4fc; }
.job-form-layout .job-form-section:nth-of-type(8) { border-left-color: #fda4af; }
.job-form-section h4 {
    margin: 0 0 1rem 0;
    font-size: 1.05rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--section-header-color);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.job-form-section h4 .section-icon {
    display: none;
}
.job-form-section .form-group { margin-bottom: 0.5rem; }
.job-form-section .form-group:last-child,
.job-form-section .form-row:last-child .form-group,
.job-form-section .form-row-2:last-child .form-group,
.job-form-section .form-row-3:last-child .form-group,
.job-form-section .form-row-4:last-child .form-group { margin-bottom: 0; }
.job-form-section .form-row,
.job-form-section .form-row-2,
.job-form-section .form-row-3,
.job-form-section .form-row-4 {
    gap: 0.5rem 1rem;
    margin-bottom: 0.5rem;
}
.job-form-section .form-row .form-group,
.job-form-section .form-row-2 .form-group,
.job-form-section .form-row-3 .form-group,
.job-form-section .form-row-4 .form-group { margin-bottom: 0; }
/* Grid columns default to min-width:auto and can clip flexy children; let select-search use full cell width. */
.job-form-layout .form-row .form-group,
.job-form-layout .form-row-2 .form-group,
.job-form-layout .form-row-3 .form-group,
.job-form-layout .form-row-4 .form-group {
    min-width: 0;
}
.job-form-section .select-search-wrap {
    max-width: 100%;
}
.job-form-section .select-search-input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.job-form-section .form-row:last-child,
.job-form-section .form-row-2:last-child,
.job-form-section .form-row-3:last-child,
.job-form-section .form-row-4:last-child { margin-bottom: 0; }

/* Job form: field titles (labels) not bold, smoother */
.job-form-layout .job-form-section .form-group label {
    font-weight: normal !important;
    font-size: 0.8125rem;
    color: #6b7280;
    letter-spacing: 0.01em;
}
/* Job form standard: no fill when value not present; blue tint only when value present */
.job-form input:not(.field-has-value),
.job-form select:not(.field-has-value),
.job-form textarea:not(.field-has-value) {
    background: #fff !important;
}
.job-form .select-search-wrap:not(.select-search-has-value) {
    background: #fff !important;
}
.job-form .select-search-wrap:not(.select-search-has-value) .select-search-input {
    background: transparent !important;
}
.job-form .input-combined-value:not(.field-has-value),
.job-form .input-combined-prefix select:not(.field-has-value) {
    background: #fff !important;
}
.job-form .input-with-clear:not(.field-has-value) input,
.job-form .input-with-clear:not(.field-has-value) .input-combined-value {
    background: #fff !important;
}
.job-form .input-with-clear:has(.input-combined) .input-combined {
    padding-right: 2.25rem;
}
.job-form #description-editor:not(.field-has-value),
.job-form #requirements-editor:not(.field-has-value) {
    background: #fff !important;
}
.job-form #description-editor .ql-editor,
.job-form #requirements-editor .ql-editor {
    background: transparent;
}
/* When value present: distinct background */
.job-form input.field-has-value,
.job-form select.field-has-value,
.job-form textarea.field-has-value {
    background: #f5faff !important;
    border-color: #dbeafe !important;
}
.job-form .select-search-wrap.select-search-has-value {
    background: #f5faff !important;
    border-color: #dbeafe !important;
}
.job-form .select-search-wrap.select-search-has-value .select-search-input {
    background: transparent !important;
}
.job-form .input-combined-value.field-has-value,
.job-form .input-combined-prefix select.field-has-value {
    background: #f5faff !important;
}
.job-form .input-with-clear.field-has-value input,
.job-form .input-with-clear.field-has-value .input-combined-value {
    background: #f5faff !important;
    border-color: #dbeafe !important;
}
.job-form #description-editor.field-has-value,
.job-form #requirements-editor.field-has-value {
    background: #f5faff !important;
}
.job-form-section .form-group label .required-asterisk {
    color: var(--required-color);
}
.label-notes-to-interviewer {
    font-weight: 700 !important;
    color: #5b21b6 !important;
}

/* Job form: inside fields – rectangular (square corners) + left accent per section; no fill when empty (see .field-has-value above) */
.job-form-section .select-search-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: #fff;
}
.job-form-section .select-search-input {
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
    border-radius: var(--radius);
}
/* Placeholder must not look like a bold “selected” value (select-search no longer mirrors blank <option> text into placeholder). */
.job-form-section .select-search-input::placeholder {
    font-weight: 400;
    color: var(--placeholder-color, #94a3b8);
    opacity: 1;
}
.job-form-section .select-search-input:focus {
    box-shadow: none;
}
/* Let option lists paint above adjacent fields/sections (avoid clipped or “dead” clicks). */
.job-form-layout .job-form-section {
    overflow: visible;
}
.job-form-section .select-search-dropdown {
    z-index: 450;
}
.job-form-section input[type="text"],
.job-form-section input[type="number"] {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}
.job-form-section input[type="text"]::placeholder,
.job-form-section input[type="number"]::placeholder {
    font-weight: 400;
    color: var(--placeholder-color);
}
/* Budget and other combined inputs – same rectangular style + accent as other fields */
.job-form-section .input-combined {
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
/* Budget row: allow dropdown to overflow (must not clip options) */
.job-form-section .input-combined.budget-combined-row {
    overflow: visible;
}
.job-form-section .input-combined-prefix {
    border-right: 1px solid var(--border-color);
    border-radius: var(--radius) 0 0 var(--radius);
}
.job-form-section .input-combined-prefix .select-search-wrap {
    border: none;
    border-radius: 0;
}
.job-form-section .input-combined-value {
    border-radius: 0 var(--radius) var(--radius) 0;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary);
}
.job-form-section .input-combined.budget-combined-row .input-combined-value {
    border-radius: 0;
}
.job-form-section .input-combined-value::placeholder {
    font-weight: 400;
    color: var(--placeholder-color);
}
.job-form-layout .job-form-section:nth-of-type(1) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(1) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(1) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(1) .input-combined {
    box-shadow: inset 3px 0 0 #c4b8e0;
}
.job-form-layout .job-form-section:nth-of-type(2) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(2) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(2) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(2) .input-combined {
    box-shadow: inset 3px 0 0 #7dd3c8;
}
.job-form-layout .job-form-section:nth-of-type(3) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(3) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(3) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(3) .input-combined {
    box-shadow: inset 3px 0 0 #86efac;
}
.job-form-layout .job-form-section:nth-of-type(4) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(4) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(4) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(4) .input-combined {
    box-shadow: inset 3px 0 0 #93c5fd;
}
.job-form-layout .job-form-section:nth-of-type(5) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(5) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(5) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(5) .input-combined {
    box-shadow: inset 3px 0 0 #fcd34d;
}
.job-form-layout .job-form-section:nth-of-type(6) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(6) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(6) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(6) .input-combined {
    box-shadow: inset 3px 0 0 #f9a8d4;
}
.job-form-layout .job-form-section:nth-of-type(7) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(7) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(7) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(7) .input-combined,
.job-form-layout .job-form-section:nth-of-type(7) .tox-tinymce {
    box-shadow: inset 3px 0 0 #a5b4fc;
}
.job-form-layout .job-form-section:nth-of-type(8) .select-search-wrap,
.job-form-layout .job-form-section:nth-of-type(8) input[type="text"],
.job-form-layout .job-form-section:nth-of-type(8) input[type="number"],
.job-form-layout .job-form-section:nth-of-type(8) .input-combined {
    box-shadow: inset 3px 0 0 #fda4af;
}

/* Top section: Job title & primary skills + matching jobs (create) – compact & charming */
.job-form-section-title-skills {
    --jf-ts-accent: var(--primary-color, #0066cc);
    background: linear-gradient(165deg, #fafbfd 0%, #f4f6fa 100%);
    border: 1px solid rgba(0, 102, 204, 0.12);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: visible;
}
.job-form-section-title-skills::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--jf-ts-accent);
    border-radius: 3px 0 0 3px;
    opacity: 0.85;
}
.job-form-title-skills-header {
    margin-bottom: 0.75rem;
}
.job-form-title-skills-title {
    margin: 0 0 0.2rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    letter-spacing: -0.01em;
}
.job-form-section-title-skills .job-form-section-desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary, #64748b);
}
.job-form-title-skills-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
    align-items: start;
}
@media (max-width: 768px) {
    .job-form-title-skills-row { grid-template-columns: 1fr; }
    .job-form-section-title-skills { padding: 0.875rem 1rem; }
}
.job-form-section-title-skills .form-group label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #334155);
    margin-bottom: 0.35rem;
}
.job-form-title-skills-input-wrap input.job-form-title-input,
.job-form-section-title-skills .job-form-title-skills-input-wrap input {
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    font-size: 0.9rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.job-form-section-title-skills .job-form-title-skills-input-wrap:focus-within input,
.job-form-section-title-skills .job-form-title-skills-input-wrap input:focus {
    border-color: var(--jf-ts-accent);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
    outline: none;
}
.job-form-skills-input-wrap {
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    padding: 0.4rem 0.65rem;
    min-height: 2.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.job-form-section-title-skills .job-form-skills-input-wrap:focus-within {
    border-color: var(--jf-ts-accent);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.12);
}
.job-form-section-title-skills .job-form-skills-input-wrap .skills-tags-input input {
    min-height: 1.6rem;
    padding: 0.2rem 0;
}
/* Skills suggestions: overlay dropdown so it doesn't extend the section */
.job-form-section-title-skills .job-form-skills-field {
    position: relative;
}
.job-form-section-title-skills .job-form-skills-input-wrap {
    position: relative;
}
.job-form-section-title-skills .job-form-skills-input-wrap .skills-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.35rem;
    padding: 0.25rem 0;
    border-radius: 8px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface, #fff);
}
.job-form-section-title-skills .job-form-skills-input-wrap .skill-suggestion {
    padding: 0.4rem 0.65rem;
    font-size: 0.875rem;
}

/* Find matching jobs button */
.job-form-find-matching-btn {
    padding: 0.5rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 10px;
    background: var(--jf-ts-accent, var(--primary-color));
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.job-form-find-matching-btn:hover:not(:disabled) {
    filter: brightness(1.06);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
}
.job-form-find-matching-btn:active:not(:disabled) { transform: scale(0.98); }
.job-form-find-matching-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.job-form-matching-wrap {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid rgba(0, 102, 204, 0.1);
}
.job-form-matching-actions {
    margin-bottom: 0.5rem;
}
.job-form-matching-heading {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #475569);
    margin: 0 0 0.5rem 0;
}
.job-form-matching-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.job-form-matching-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    min-width: 180px;
    max-width: 280px;
}
.job-form-matching-card:hover {
    border-color: var(--jf-ts-accent);
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.12);
    transform: translateY(-2px);
}
.job-form-matching-card-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-primary, #0f172a);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}
.job-form-matching-card-meta {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.35;
}
.job-form-matching-card-score {
    display: inline-block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--jf-ts-accent);
    background: rgba(0, 102, 204, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}
.job-form-matching-loading,
.job-form-matching-empty,
.job-form-matching-error,
.job-form-matching-filled {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
}
.job-form-matching-filled {
    color: var(--jf-ts-accent);
    font-weight: 500;
}

/* 8. Candidate Qualifying Questions – modernized, different colors per meta */
.job-form-section-qualifying {
    background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 50%, #eef2ff 100%);
    border-left: 4px solid #6366f1;
}
.job-form-section-qualifying h4 {
    color: #1e293b;
    font-weight: 700;
}
.job-form-section-qualifying .job-form-section-qualifying-desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-secondary, #64748b);
    margin: 0 0 1rem 0;
}
.qualifying-qbank-wrap {
    margin-bottom: 1rem;
    position: relative;
}
.qualifying-qbank-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #334155);
    margin-bottom: 0.35rem;
}
.qualifying-qbank-search-input {
    max-width: 320px;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 0.45rem 0.75rem;
    font-size: 0.9rem;
}
.qualifying-qbank-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-width: 420px;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0.25rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 10;
    list-style: none;
    padding: 0;
    margin-left: 0;
}
.qualifying-qbank-results .list-group-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    text-align: left;
    border: none;
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    background: #fff;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}
.qualifying-qbank-results .list-group-item:last-child { border-bottom: none; }
.qualifying-qbank-results .list-group-item:hover {
    background: #fef7f5;
}
.qualifying-qbank-results .qualifying-qbank-result-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
}
.qualifying-qbank-result-text { font-weight: 500; }
.qualifying-qbank-result-meta {
    font-size: 0.75rem;
    color: var(--text-secondary, #64748b);
}
.qualifying-selected-wrap {
    margin-bottom: 1rem;
}
.qualifying-selected-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-primary, #334155);
    margin-bottom: 0.25rem;
}
.qualifying-selected-hint {
    font-size: 0.8rem;
    color: var(--text-secondary, #64748b);
    margin: 0 0 0.5rem 0;
}
.qualifying-selected-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.qualifying-selected-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    font-size: 0.875rem;
}
.qualifying-selected-item .qualifying-q-text {
    flex: 1 1 180px;
    min-width: 0;
    color: var(--text-primary, #0f172a);
}
.qualifying-selected-item .qualifying-q-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.qualifying-selected-item .qualifying-q-type,
.qualifying-selected-item .qualifying-q-category,
.qualifying-selected-item .qualifying-q-complexity {
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}
/* Category (e.g. Experience) – blue */
.qualifying-selected-item .qualifying-q-category {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid rgba(30, 64, 175, 0.25);
}
/* Complexity (e.g. Medium) – amber/teal */
.qualifying-selected-item .qualifying-q-complexity {
    background: #fef3c7;
    color: #b45309;
    border: 1px solid rgba(180, 83, 9, 0.25);
}
/* Answer type (e.g. number, text, single_choice) – purple */
.qualifying-selected-item .qualifying-q-type {
    background: #ede9fe;
    color: #5b21b6;
    border: 1px solid rgba(91, 33, 182, 0.25);
}
/* Required toggle – switch style */
.qualifying-mandatory-toggle {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.qualifying-mandatory-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.qualifying-mandatory-slider {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    background: #e2e8f0;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
}
.qualifying-mandatory-input:checked + .qualifying-mandatory-slider {
    background: #fda4af;
    color: #9f1239;
}
.qualifying-mandatory-toggle:hover .qualifying-mandatory-slider {
    background: #cbd5e1;
}
.qualifying-mandatory-input:checked + .qualifying-mandatory-slider:hover {
    background: #fca5b0;
}
.qualifying-selected-item .qualifying-remove.qualifying-remove-x {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    min-width: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    line-height: 1;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    background: #fff;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.qualifying-selected-item .qualifying-remove.qualifying-remove-x:hover {
    color: #b91c1c;
    background: #fef2f2;
    border-color: #fecaca;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.45), 0 0 12px rgba(220, 38, 38, 0.25);
}
.qualifying-selected-item .qualifying-remove {
    flex-shrink: 0;
    font-size: 0.8125rem;
}
.qualifying-selected-empty {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    margin: 0.5rem 0 0 0;
}
.qualifying-add-new-wrap {
    margin-bottom: 0.5rem;
}
.qualifying-add-new-btn {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-secondary, #64748b);
    transition: border-color 0.2s, color 0.2s;
}
.qualifying-add-new-btn:hover {
    border-color: #fda4af;
    color: #be123c;
}
.qualifying-new-questions-container {
    margin-top: 0.5rem;
}
.qualifying-new-questions-container .qualifying-new-block {
    margin-bottom: 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 0.5rem 0.75rem;
}

/* 4. Assignment section – modernized cards */
.job-form-section-assignment .job-form-section-assignment-desc {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
    margin: -0.25rem 0 0.75rem 0;
}
.job-form-assignment-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .job-form-assignment-cols { grid-template-columns: 1fr; }
}
.job-form-assignment-card {
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: #fafbfc;
    overflow: hidden;
}
.job-form-assignment-card-header {
    padding: 0.5rem 0.75rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.job-form-assignment-card-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}
.job-form-assignment-card-body {
    padding: 0.5rem 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}
.job-form-assignment-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}
.job-form-assignment-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    margin: 0;
}
.job-form-assignment-item:hover {
    background: #f1f5f9;
}
.job-form-assignment-item input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}
.job-form-assignment-item-label {
    font-size: 0.875rem;
    color: var(--text-primary, #1e293b);
}
.job-form-assignment-item-meta {
    color: var(--text-secondary, #64748b);
    font-size: 0.8125rem;
}
.job-form-assignment-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
}

/* Special Notes section (create/edit job) */
.job-form-section-special-notes .job-form-section-desc {
    margin: -0.25rem 0 0.75rem 0;
}
.job-form-section-special-notes .special-notes-editor-wrap {
    margin-bottom: 0;
}
.job-form-section-special-notes .special-notes-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* Create Job: "1. Basic information" – same card style, accent from nth-of-type(1) above */
.create-job-page .job-form-section-basic-styled {
    padding: 0.9rem 1.1rem 0.9rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    border-left-width: 4px;
}
/* Section 1 field accent inherited from .job-form-layout .job-form-section:nth-of-type(1) above */
.create-job-page .job-form-section-basic-styled .select-search-input:focus {
    box-shadow: none;
}

.form-section-divider {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 1.5rem 0;
}

.form-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}
.form-actions-inline {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: none;
}

/* --- Edit Interview (feedback) page --- */
.edit-interview-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 1.5rem;
    max-width: 1400px;
}
.edit-interview-main { min-width: 0; }
.edit-interview-side {
    min-width: 0;
    position: sticky;
    top: 3.5rem;
    align-self: start;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.edit-interview-side .edit-interview-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.edit-interview-search-wrap {
    margin-bottom: 1rem;
}
.edit-interview-search-wrap input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.9rem;
}
.edit-interview-panel-section .edit-interview-feedback-body {
    max-height: 200px;
    overflow-y: auto;
}
.edit-interview-history-by-job {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.edit-interview-job-group {
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-lg, 8px);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.edit-interview-job-group-header {
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
}
.edit-interview-job-group-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #0c4a6e;
}
.edit-interview-job-group-meta {
    font-size: 0.8125rem;
    color: #64748b;
}
.edit-interview-job-group-endclient {
    color: #94a3b8;
    font-size: 0.8125rem;
}
.edit-interview-job-group .edit-interview-table-wrap {
    margin-bottom: 0;
}
.edit-interview-job-group .edit-interview-history-table th,
.edit-interview-job-group .edit-interview-history-table td {
    padding: 0.5rem 0.75rem;
}
.edit-interview-feedback-job-group {
    margin-bottom: 1.25rem;
}
.edit-interview-feedback-job-group:last-child {
    margin-bottom: 0;
}
.edit-interview-feedback-job-group-header {
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}
.edit-interview-feedback-job-group-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: #0c4a6e;
}
.edit-interview-feedback-job-group-meta {
    font-size: 0.8125rem;
    color: #64748b;
}
.edit-interview-feedback-job-group .edit-interview-feedback-block {
    margin-bottom: 0.6rem;
}
.edit-interview-feedback-job-group .edit-interview-feedback-block:last-child {
    margin-bottom: 0;
}
.edit-interview-table-wrap {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}
.edit-interview-history-table {
    width: 100%;
    font-size: 0.8rem;
    border-collapse: collapse;
}
.edit-interview-history-table th,
.edit-interview-history-table td {
    padding: 0.4rem 0.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
.edit-interview-history-table th { font-weight: 600; color: var(--text-secondary); }
.edit-interview-history-table .interview-id-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
}
.edit-interview-history-table .interview-id-link:hover { text-decoration: underline; }
.edit-interview-recommendation {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}
.edit-interview-recommendation.selected { background: #d4edda; color: #155724; }
.edit-interview-recommendation.rejected { background: #f8d7da; color: #721c24; }
.edit-interview-recommendation.no_show { background: #fff3cd; color: #856404; }
.edit-interview-recommendation.fake { background: #e2d5f1; color: #3d2460; }
.edit-interview-recommendation.should_hire { background: #cce5ff; color: #004085; }
.edit-interview-feedback-block {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: #fff;
}
.edit-interview-feedback-block.highlight { border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15); }
.edit-interview-feedback-block-header {
    font-size: 0.8rem;
    margin-bottom: 0.35rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.edit-interview-feedback-block-header .view-all-feedbacks-btn { flex-shrink: 0; }
.edit-interview-feedback-block-content { font-size: 0.85rem; line-height: 1.45; }
.edit-interview-feedback-block-content.rich-text-content p { margin: 0.2rem 0 0; white-space: normal; }
.edit-interview-feedback-block-content.edit-interview-no-feedback { color: var(--text-secondary); }
.edit-interview-feedback-block-fn { margin-top: 1rem; }
.edit-interview-feedback-block-fn:first-child { margin-top: 0; }
.edit-interview-feedback-block-fn-box {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--bg-secondary, #f8f9fa);
}
.edit-interview-feedback-block-fn-box:first-child { margin-top: 0; }
.edit-interview-feedback-block-fn-header {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.35;
}
.edit-interview-feedback-block-fn-box .edit-interview-feedback-block-content,
.edit-interview-feedback-block-fn .edit-interview-feedback-block-content { margin-top: 0.35rem; }
.edit-interview-feedback-block-content.rich-text-content img,
.edit-interview-feedback-expanded-content .edit-interview-feedback-block-content img {
    max-width: 140px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 4px;
    border: 1px solid var(--border-color, #ddd);
}
.edit-interview-feedback-block-clickable {
    cursor: pointer;
}
.edit-interview-feedback-block-clickable:hover {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.02);
}
.edit-interview-feedback-expanded-section {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.edit-interview-feedback-expanded-section.edit-interview-feedback-section-hidden {
    display: none !important;
}
.edit-interview-add-feedback-mode .edit-interview-details-section,
.edit-interview-add-feedback-mode .edit-interview-readonly-feedback-section {
    display: none !important;
}
.edit-interview-feedback-expanded-section.edit-interview-feedback-expanded-visible {
    display: block !important;
    visibility: visible !important;
    background: #fff !important;
}
.edit-interview-feedback-expanded-content {
    min-height: 0;
}
.edit-interview-feedback-expanded-title { font-size: 0.95rem; margin: 0 0 0.5rem 0; }
.edit-interview-feedback-expanded-placeholder { margin: 0 0 0.5rem 0; font-size: 0.9rem; }
.edit-interview-feedback-expanded-content .edit-interview-feedback-block-fn-box,
.edit-interview-feedback-expanded-content .edit-interview-feedback-block-fn {
    margin: 0 0 1rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.edit-interview-feedback-expanded-content .edit-interview-feedback-block-fn-box:last-child,
.edit-interview-feedback-expanded-content .edit-interview-feedback-block-fn:last-child { margin-bottom: 0; }
.edit-interview-feedback-expanded-content-visible .edit-interview-feedback-block-fn-header {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--text-primary);
    line-height: 1.4;
}
.edit-interview-feedback-expanded-content-visible .edit-interview-feedback-block-content {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    max-width: 100%;
}
.edit-interview-feedback-expanded-content-visible .edit-interview-feedback-block-content.rich-text-content p {
    margin: 0 0 0.5rem 0;
}
.edit-interview-feedback-expanded-content-visible .edit-interview-feedback-block-content.rich-text-content p:last-child {
    margin-bottom: 0;
}
.edit-interview-feedback-expanded-content-visible .edit-interview-feedback-block-content img,
.edit-interview-feedback-expanded-content .edit-interview-feedback-block-content img {
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
    object-fit: none;
}
.edit-interview-feedback-section-revealed { animation: edit-interview-reveal 0.3s ease; }
@keyframes edit-interview-reveal { from { opacity: 0.7; } to { opacity: 1; } }
.edit-interview-feedback-blocks-wrap { max-height: 1020px; overflow-y: auto; }
.edit-interview-details-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1rem;
}
.edit-interview-section-title { margin: 0; }
.edit-interview-details-head h4 { margin: 0; }
.edit-interview-candidate-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.9rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.edit-interview-candidate-name { font-weight: 600; color: var(--text-primary); }
.edit-interview-candidate-sep { opacity: 0.7; }
.edit-interview-job-title { color: var(--primary-color); }
.edit-interview-feedback-hint { font-size: 0.875rem; margin-bottom: 0.5rem; }
/* Outlook-like Quill editor: format painter button, resizable images */
.quill-outlook-editor + .ql-container,
.ql-toolbar + .ql-container { border-radius: 0 0 var(--radius) var(--radius); }
.ql-toolbar .ql-format-painter {
    width: 28px;
    padding: 2px 4px;
    vertical-align: middle;
}
.ql-toolbar .ql-format-painter.ql-active {
    background: rgba(0, 102, 204, 0.15);
    border-radius: 4px;
}
.quill-outlook-editor .ql-editor img,
.job-form .ql-editor img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}
.quill-outlook-editor .ql-editor img[style*="width"],
.job-form .ql-editor img[style*="width"] {
    max-width: none;
}

/* TinyMCE: compact toolbar (small controller size) + vertically centered */
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
    padding: 4px 6px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.tox .tox-toolbar__group {
    padding: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.tox .tox-toolbar__group-item {
    padding: 2px 3px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tox .tox-toolbar button,
.tox .tox-toolbar__group-item button,
.tox .tox-tbtn {
    padding: 4px 6px !important;
    min-height: 28px !important;
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tox .tox-tbtn__select-label,
.tox .tox-toolbar__group-item .tox-tbtn__select-label {
    display: inline-flex !important;
    align-items: center !important;
}
.tox .tox-tbtn svg {
    width: 18px !important;
    height: 18px !important;
}
.tox .tox-toolbar__overflow {
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
}
.tox .tox-toolbar-overlay-button {
    padding: 4px 6px !important;
    min-height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tox .tox-split-button {
    display: inline-flex !important;
    align-items: center !important;
}
.tox .tox-listboxfield .tox-listbox--select,
.tox .tox-toolbar .tox-listbox {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 28px !important;
}

/* Resume Extract: full-featured editor – toolbar wrap, min height */
.resume-extract-editor-wrap.quill-outlook-editor {
    min-height: 320px;
}
.resume-extract-editor-wrap .ql-toolbar {
    flex-wrap: wrap;
    gap: 2px;
    padding: 8px 12px;
}
.resume-extract-editor-wrap .ql-toolbar .ql-formats {
    margin-right: 8px;
}
.resume-extract-editor-wrap .ql-container {
    min-height: 260px;
}
.resume-extract-editor-wrap .ql-editor {
    min-height: 260px;
}
.resume-extract-editor-wrap .ql-editor .img-resizable {
    display: inline-block;
    resize: both;
    overflow: auto;
    min-width: 120px;
    min-height: 80px;
    vertical-align: top;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    padding: 2px;
    cursor: nwse-resize;
}
.resume-extract-editor-wrap .ql-editor .img-resizable img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.edit-interview-quill-wrap {
    min-height: 220px;
    height: 320px;
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
}
.edit-interview-quill-wrap .ql-container {
    min-height: 140px;
}
.edit-interview-quill-wrap .ql-editor {
    min-height: 120px;
}
.edit-interview-quill-wrap .ql-editor img {
    max-width: 100%;
    cursor: pointer;
}
.edit-interview-quill-wrap .ql-editor .img-resizable {
    display: inline-block;
    resize: both;
    overflow: auto;
    min-width: 120px;
    min-height: 80px;
    vertical-align: top;
    border: 1px solid var(--border-color, #ddd);
    border-radius: 4px;
    padding: 2px;
    cursor: nwse-resize;
}
.edit-interview-quill-wrap .ql-editor .img-resizable img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.edit-interview-recommendation-cell { vertical-align: top; }
.edit-interview-recommendation-line { margin-bottom: 0.25rem; font-size: 0.85rem; white-space: nowrap; }
.edit-interview-recommendation-line:last-child { margin-bottom: 0; }
.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1.3;
}
.edit-interview-readonly-feedback-section {
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
}
.edit-interview-readonly-title {
    font-size: 0.95rem;
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    font-weight: 600;
}
.edit-interview-readonly-content {
    font-size: 0.9rem;
    line-height: 1.5;
}
.edit-interview-readonly-content.rich-text-content p { margin: 0.25rem 0 0; white-space: normal; }
.edit-interview-feedback-section-hidden {
    display: none !important;
}
.edit-interview-feedback-grayout .edit-interview-quill-wrap {
    opacity: 0.65;
    pointer-events: none;
}

/* Outlook-like Quill editor: format painter button, resizable images */
.quill-outlook-editor + .ql-toolbar .ql-format-painter,
.ql-toolbar .ql-format-painter {
    width: 28px;
    padding: 2px 4px;
    vertical-align: middle;
}
.ql-toolbar .ql-format-painter.ql-active {
    background: rgba(0, 102, 204, 0.2);
    border-radius: 2px;
}
.quill-outlook-editor .ql-editor img,
.job-form .ql-editor img {
    max-width: 100%;
    height: auto;
    cursor: pointer;
}
.quill-outlook-editor .ql-editor img[style*="width"],
.job-form .ql-editor img[style*="width"] {
    max-width: none;
}

.edit-interview-feedback-grayout .edit-interview-feedback-buttons .btn-primary {
    opacity: 0.7;
    pointer-events: none;
}
.edit-interview-feedback-col {
    white-space: nowrap;
}
.edit-interview-fn-link {
    margin-right: 0.25rem;
}
.edit-interview-another-wrap {
    margin-left: 0.5rem;
    display: inline-block;
}
.edit-interview-another-wrap .edit-interview-another-feedback-btn { white-space: nowrap; }
.edit-interview-feedback-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
}
.edit-interview-outcome-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.edit-interview-outcome-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
}
.edit-interview-outcome-select {
    min-width: 140px;
}
.edit-interview-feedback-buttons {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.edit-interview-panel-section {
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.edit-interview-panel-section h4 { margin: 0 0 0.75rem 0; font-size: 0.95rem; }
.edit-interview-feedback-history { display: flex; flex-direction: column; gap: 1rem; }
.edit-interview-feedback-item {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}
.edit-interview-feedback-item:last-child { border-bottom: none; padding-bottom: 0; }
.edit-interview-feedback-meta { margin-bottom: 0.35rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.edit-interview-feedback-content { font-size: 0.85rem; line-height: 1.45; }
.edit-interview-feedback-content.rich-text-content p { margin: 0.25rem 0 0; white-space: normal; }
.edit-interview-no-feedback { font-size: 0.85rem; margin: 0.25rem 0 0; }
.edit-interview-empty-state { font-size: 0.9rem; margin: 0; }
.edit-interview-screening-notes { font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }
/* --- End Edit Interview --- */

@media (max-width: 900px) {
    .edit-interview-layout { grid-template-columns: 1fr; }
}

/* Compact form (Add Candidate etc.) */
.form-container-compact { max-width: 900px; }
.page-header-compact { margin-bottom: 1rem; }
.form-section-compact { margin-bottom: 1rem; }
.form-section-compact .card-body { padding: 0.75rem 1rem; }
.form-body-compact .form-row { margin-bottom: 0.5rem; }
.form-row-compact { margin-bottom: 0.5rem; }
.form-row-compact .form-group { margin-bottom: 0; }
.form-actions-compact { margin-top: 1rem; padding-top: 1rem; }
.form-group-inline-check { flex: 1 1 auto; min-width: 140px; }
.form-group-inline-check .field-error { flex-basis: 100%; margin-top: 0.2rem; }
.form-group-inline-check + .form-group-inline-check { margin-left: 0; }
.form-section-compact .card-body .form-group-inline-check:first-of-type { margin-right: 0.5rem; }
.form-section-compact .card-body .btn.btn-secondary { margin-left: 0.25rem; }
.check-result { margin-top: 0.35rem; margin-bottom: 0; font-size: 0.9rem; }
.parse-status { margin-left: 0.5rem; font-size: 0.9rem; }
.parse-status-ok { color: var(--success-color); }
.parse-status-error { color: var(--danger-color); }

/* Parse status — modern loading / success / error UI */
.parse-status-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.parse-status-modern.is-loading,
.parse-status-modern.is-success,
.parse-status-modern.is-error {
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border-radius: 10px;
    min-width: 12rem;
    max-width: 22rem;
}
.parse-status-modern .parse-status-text {
    white-space: pre-line;
    line-height: 1.4;
}
.parse-status-modern:not(.is-loading):not(.is-success):not(.is-error) {
    min-height: 0;
    padding: 0;
    min-width: 0;
    max-width: none;
}
.parse-status-modern .parse-status-spinner,
.parse-status-modern .parse-status-icon { display: none; }
.parse-status-modern .parse-status-icon-success,
.parse-status-modern .parse-status-icon-error { font-size: 1rem; line-height: 1; flex-shrink: 0; }
.parse-status-modern.is-loading .parse-status-spinner {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid rgba(14, 165, 233, 0.2);
    border-top-color: var(--primary-color, #0ea5e9);
    border-radius: 50%;
    animation: parse-spin 0.6s linear infinite;
    flex-shrink: 0;
}
.parse-status-modern.is-loading .parse-status-text { color: var(--text-secondary, #475569); }
.parse-status-modern.is-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--success-color, #059669);
}
.parse-status-modern.is-success .parse-status-icon-success { display: inline-flex; align-items: center; justify-content: center; }
.parse-status-modern.is-error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: var(--danger-color, #dc2626);
}
.parse-status-modern.is-error .parse-status-icon-error { display: inline-flex; align-items: center; justify-content: center; }
@keyframes parse-spin { to { transform: rotate(360deg); } }

/* Parse from resume (optional) — one toolbar row, right-aligned chosen file / status */
.parse-resume-card {
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    overflow: hidden;
    box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
    margin-bottom: 1.25rem;
}
.parse-resume-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-alt, #f8fafc);
}
.parse-resume-title { margin: 0 0 0.25rem 0; font-size: 1.1rem; font-weight: 600; }
.parse-resume-optional { font-weight: 400; color: var(--text-secondary, #64748b); }
.parse-resume-desc { margin: 0; font-size: 0.8125rem; color: var(--text-secondary, #64748b); line-height: 1.4; }
.parse-resume-card-body { padding: 1rem 1.25rem; }
.parse-resume-zone {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.parse-resume-toolbar-left {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}
.parse-resume-toolbar-right {
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
    max-width: 100%;
}
.parse-resume-chosen-hint {
    flex: 0 0 auto;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
    white-space: nowrap;
}
.parse-resume-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 10px;
    border: 2px dashed var(--border-color, #cbd5e1);
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, border-style 0.2s;
    flex-shrink: 0;
}
.parse-resume-label:hover {
    border-color: var(--primary-color, #0ea5e9);
    background: rgba(14, 165, 233, 0.04);
}
.parse-resume-label.parse-resume-label-has-file {
    border-style: solid;
    border-color: rgba(14, 165, 233, 0.45);
    background: rgba(14, 165, 233, 0.06);
}
.parse-resume-label.parse-resume-label-has-file .parse-resume-label-text { color: var(--primary-color, #0284c7); font-weight: 600; }
.parse-resume-label-icon { font-size: 1.25rem; line-height: 1; }
.parse-resume-label-text { font-size: 0.9375rem; font-weight: 500; color: var(--text-secondary, #475569); }
.parse-resume-input { position: absolute; width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; clip: rect(0,0,0,0); }
.parse-resume-btn { font-weight: 500; flex-shrink: 0; }
.parse-resume-reset-btn {
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.parse-resume-reset-btn:hover {
    color: #fff;
    background: var(--danger-color, #dc2626);
    border-color: var(--danger-color, #dc2626);
}
/* Modern selected-file chip — parse-from-resume toolbar + Documents & Attachments (#resume_file_name) */
.resume-selected-file-chip.resume-upload-selected-wrap {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem 0.45rem 0.55rem;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.35;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(148, 163, 184, 0.38);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.05),
        0 2px 8px rgba(15, 23, 42, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.resume-selected-file-chip.resume-upload-selected-wrap:hover {
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow:
        0 1px 3px rgba(15, 23, 42, 0.06),
        0 4px 12px rgba(14, 165, 233, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.resume-selected-file-chip.resume-upload-selected-wrap.resume-upload-selected-error {
    background: linear-gradient(180deg, #fef2f2 0%, #fee2e2 100%);
    border-color: rgba(248, 113, 113, 0.45);
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.08);
}
.resume-selected-file-chip.resume-upload-selected-wrap.resume-upload-selected-error:hover {
    border-color: rgba(220, 38, 38, 0.4);
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-selected-label {
    flex-shrink: 0;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.14);
    padding: 0.22rem 0.42rem;
    border-radius: 6px;
    line-height: 1.2;
}
.resume-selected-file-chip.resume-upload-selected-wrap.resume-upload-selected-error .resume-upload-selected-label {
    color: #b91c1c;
    background: rgba(239, 68, 68, 0.15);
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-selected-filename {
    flex: 1 1 auto;
    min-width: 6rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0f172a;
    letter-spacing: -0.015em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-download-btn {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.28rem 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(14, 165, 233, 0.22);
    background: rgba(14, 165, 233, 0.1);
    text-decoration: none;
    line-height: 1.2;
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-download-btn:hover {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.35);
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-clear-btn {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1.15rem;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid transparent;
    background: rgba(148, 163, 184, 0.12);
    color: #475569;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-clear-btn:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger-color, #dc2626);
    border-color: rgba(239, 68, 68, 0.25);
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-keep-current-btn {
    flex-shrink: 0;
    margin-left: 0;
    padding: 0.28rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-color, #e2e8f0);
    line-height: 1.2;
}
.resume-selected-file-chip.resume-upload-selected-wrap .resume-upload-keep-current-btn:hover {
    border-color: rgba(14, 165, 233, 0.35);
    background: rgba(14, 165, 233, 0.08);
}
.parse-resume-toolbar-right .resume-selected-file-chip.resume-upload-selected-wrap {
    flex: 1 1 auto;
    min-width: min(100%, 14rem);
    max-width: min(100%, 32rem);
    margin-top: 0;
}
.create-candidate-page #resume_file_name.resume-selected-file-chip.resume-upload-selected-wrap {
    width: auto;
    max-width: 100%;
    margin-top: 0.5rem;
    align-self: flex-start;
}
/* Documents & Attachments row: keep Gov ID column usable; file control native-sized */
.create-candidate-page .documents-attachments-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.create-candidate-page .documents-attachments-row > .form-group {
    min-width: 0;
}
.create-candidate-page .documents-attachments-row .documents-attachments-resume input[type="file"]#resume_file {
    display: block;
    width: auto;
    max-width: 100%;
    padding: 0;
    margin: 0 0 0.25rem 0;
    border: none;
    background: transparent;
    font-size: 1rem;
    line-height: normal;
    box-shadow: none;
}
.create-candidate-page .documents-attachments-row .documents-attachments-resume input[type="file"]#resume_file:focus {
    outline: none;
    box-shadow: none;
}
.create-candidate-page .documents-attachments-row .documents-attachments-resume input[type="file"]#resume_file:focus-visible {
    outline: 2px solid var(--primary-color, #0ea5e9);
    outline-offset: 2px;
    border-radius: 4px;
}
.create-candidate-page .documents-attachments-row #resume_file_name.resume-selected-file-chip .resume-upload-selected-filename {
    min-width: 0;
}
.parse-resume-toolbar-right .parse-status-inline.is-loading,
.parse-resume-toolbar-right .parse-status-inline.is-success,
.parse-resume-toolbar-right .parse-status-inline.is-error {
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(20rem, 42vw);
}
.parse-resume-toolbar-right .parse-status-inline .parse-status-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(18rem, 38vw);
}
.resume-upload-hint { display: block; margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.3; }
.resume-upload-filename { display: block; margin-top: 0.25rem; font-size: 0.85rem; }

/* Resume Upload — selected file bar (Selected: filename, Download, Clear) */
.resume-upload-selected-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface-alt, #f8fafc);
    font-size: 0.875rem;
    line-height: 1.4;
}
.resume-upload-selected-wrap.resume-upload-selected-error {
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
    color: var(--danger-color, #dc2626);
}
.resume-upload-selected-label {
    font-weight: 600;
    color: var(--text-secondary, #64748b);
}
.resume-upload-selected-wrap.resume-upload-selected-error .resume-upload-selected-label { color: inherit; }
.resume-upload-selected-filename {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    word-break: break-all;
}
.resume-upload-selected-wrap.resume-upload-selected-error .resume-upload-selected-filename { color: inherit; }
.resume-upload-download-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color, #0ea5e9);
    background: rgba(14, 165, 233, 0.1);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.resume-upload-download-btn:hover {
    background: rgba(14, 165, 233, 0.18);
    color: var(--primary-color, #0ea5e9);
}
.resume-upload-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text-secondary, #64748b);
    background: transparent;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.resume-upload-clear-btn:hover {
    color: var(--danger-color, #dc2626);
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.06);
}
/* Edit candidate: current resume block and "Keep current" button */
.resume-current-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface-alt, #f1f5f9);
    border-radius: 8px;
    font-size: 0.875rem;
}
.resume-current-wrap .resume-current-filename {
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    word-break: break-all;
}
.resume-current-download {
    font-weight: 600;
    color: var(--primary-color, #0ea5e9);
    text-decoration: none;
}
.resume-current-download:hover {
    text-decoration: underline;
}
.resume-upload-selected-wrap .resume-upload-keep-current-btn {
    margin-left: 0.25rem;
}
/* Ensure Selected bar (filename + Download + ×) is visible on Quick add too */
.create-candidate-page .resume-upload-selected-wrap[style*="display: flex"] {
    display: flex !important;
}
.form-row-compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.5rem 1rem; }
.form-group-checkbox { align-self: center; }

/* Roles & Access (RBAC) - modern UI */
.rbac-modern { max-width: 100%; }
.rbac-page .back-link { display: inline-block; margin-bottom: 0.5rem; color: var(--text-secondary, #64748b); text-decoration: none; font-size: 0.9rem; }
.rbac-page .back-link:hover { color: var(--primary-color, #0369a1); }
.rbac-page-title { font-size: 1.625rem; font-weight: 700; margin: 0 0 0.25rem 0; letter-spacing: -0.02em; }
.rbac-page-desc { font-size: 0.9375rem; color: var(--text-secondary, #64748b); margin-bottom: 1.5rem; line-height: 1.5; }
.rbac-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; padding: 0.25rem; background: var(--surface-alt, #f1f5f9); border-radius: 10px; width: fit-content; }
.rbac-tab { padding: 0.5rem 1.125rem; font-size: 0.9rem; font-weight: 500; background: none; border: none; border-radius: 8px; color: var(--text-secondary, #64748b); cursor: pointer; transition: color 0.2s, background 0.2s; }
.rbac-tab:hover { color: var(--primary-color, #0369a1); background: rgba(255,255,255,0.6); }
.rbac-tab.active { color: var(--primary-color, #0369a1); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.rbac-panel.hide { display: none !important; }
.rbac-loading { margin: 0; padding: 1rem 0; color: var(--text-secondary); }
.rbac-card { border-radius: 12px; border: 1px solid var(--border-color, #e2e8f0); box-shadow: 0 1px 3px rgba(0,0,0,0.05); overflow: hidden; }
.rbac-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-color, #e2e8f0); background: #fafbfc; }
.rbac-card-title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.rbac-card .card-body { padding: 1.25rem; overflow: visible; }
.rbac-table-wrap { border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color, #e2e8f0); }
.rbac-table { margin: 0; font-size: 0.9rem; border-collapse: collapse; }
.rbac-table th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--text-secondary); background: #f8fafc; border-bottom: 1px solid var(--border-color); }
.rbac-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-color, #e2e8f0); vertical-align: middle; }
.rbac-table tbody tr:hover { background: #f8fafc; }
.rbac-table tbody tr:last-child td { border-bottom: none; }
.rbac-table .btn { border-radius: 8px; font-size: 0.85rem; font-weight: 500; }
.rbac-role-name { font-weight: 600; }
.badge-soft { background: #e2e8f0; color: #475569; font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 6px; font-weight: 500; margin-left: 0.25rem; }
.rbac-role-toggle { min-width: 52px; padding: 0.35rem 0.5rem; border-radius: 8px; font-size: 0.8rem; font-weight: 500; transition: background 0.2s, color 0.2s; }
.rbac-delete-form.inline-form { display: inline; margin-left: 0.5rem; }
.rbac-audit-more { font-size: 0.85rem; margin-top: 0.5rem; margin-bottom: 0; }
.rbac-matrix-message { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; }
.rbac-matrix-message.alert-success { background: rgba(0, 133, 77, 0.1); color: #006b3d; border: 1px solid rgba(0, 133, 77, 0.25); }
.rbac-matrix-message.alert-danger { background: rgba(220, 53, 69, 0.08); color: #b02a37; border: 1px solid rgba(220, 53, 69, 0.25); }

/* Role selector: type-and-search box */
.rbac-role-select-wrap { width: 100%; min-width: 0; overflow: visible; position: relative; }
.rbac-role-select-wrap .select-search-wrap { width: 100%; min-width: 0; overflow: visible; position: relative; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); background: #fff; transition: border-color 0.2s, box-shadow 0.2s; }
.rbac-role-select-wrap .select-search-wrap:focus-within { border-color: var(--primary-color, #0369a1); box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12); }
.rbac-role-select-wrap .select-search-input { width: 100%; min-width: 0; padding: 0.625rem 2.25rem 0.625rem 1rem; font-size: 0.9375rem; border: none; border-radius: 10px; background: transparent; overflow: visible; text-overflow: clip; }
.rbac-role-select-wrap .select-search-input::placeholder { color: var(--placeholder-color, #94a3b8); }
.rbac-role-select-wrap .select-search-dropdown { width: 100%; min-width: min(100%, 320px); max-width: 100%; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-top: 4px; max-height: 280px; overflow-y: auto; z-index: 500; }
.rbac-role-select-wrap .select-search-option { padding: 0.6rem 1rem; font-size: 0.9rem; white-space: normal; word-break: break-word; }
.rbac-role-select-wrap .select-search-option:hover { background: #f1f5f9; }
.rbac-role-select-wrap .select-search-option.selected { background: rgba(3, 105, 161, 0.08); color: var(--primary-color); }

/* Simplified permissions form */
.rbac-simple-wrap { max-width: 720px; overflow: visible; }
.rbac-simple-choose { margin-bottom: 1.5rem; }
.rbac-simple-choose.rbac-choose-inline { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rbac-choose-inline .rbac-simple-label { margin-bottom: 0; margin-right: 0.25rem; font-size: 0.9rem; }
.rbac-choose-inline .rbac-role-select-wrap { flex: 1; min-width: 200px; max-width: 360px; }
.rbac-simple-label { display: block; font-weight: 600; margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--text-primary); }
.rbac-permissions-form { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-color, #e2e8f0); position: relative; padding-bottom: 4rem; }
.rbac-form-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.rbac-toolbar-left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rbac-form-title { font-size: 1.1rem; font-weight: 600; margin: 0; color: var(--text-primary); }
.rbac-save-inline { flex-shrink: 0; }
.rbac-save-inline.hide { display: none !important; }
.rbac-copy-from { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.rbac-copy-label { font-size: 0.8rem; color: var(--text-secondary); margin: 0; font-weight: 500; }
.rbac-copy-select { min-width: 120px; padding: 0.35rem 0.5rem; font-size: 0.85rem; border-radius: 8px; border: 1px solid var(--border-color); background: #fff; }
.rbac-perm-table-wrap { border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; overflow: hidden; }
.rbac-perm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.rbac-perm-table th { text-align: left; padding: 0.75rem 1rem; font-weight: 600; color: var(--text-secondary); background: #f8fafc; border-bottom: 1px solid var(--border-color); }
.rbac-perm-th-module { width: 18%; min-width: 100px; }
.rbac-perm-th-feature { width: 42%; }
.rbac-perm-th-access { width: 40%; min-width: 160px; }
.rbac-perm-table td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--border-color, #e2e8f0); vertical-align: middle; }
.rbac-perm-table tbody tr:last-child td { border-bottom: none; }
.rbac-perm-module-row { background: #f1f5f9; }
.rbac-perm-module-row .rbac-perm-module-cell { font-weight: 600; color: var(--text-primary); }
.rbac-perm-module-cell-sub { color: var(--text-secondary); font-size: 0.85rem; }
.rbac-perm-feature-cell { color: var(--text-primary); }
.rbac-perm-access-cell { }
.rbac-perm-access-cell .select-search-wrap { display: inline-block; min-width: 140px; width: auto; max-width: 100%; }
.rbac-perm-access-cell .select-search-input { min-width: 140px; width: 100%; padding: 0.45rem 2rem 0.45rem 0.75rem; font-size: 0.875rem; border-radius: 8px; border: 1px solid var(--border-color); }
.rbac-perm-access-cell .select-search-dropdown { min-width: 160px; width: max-content; max-width: 280px; border-radius: 8px; margin-top: 4px; max-height: 240px; }
.rbac-perm-module-row .rbac-perm-access-cell .select-search-wrap { min-width: 120px; }
.rbac-floating-save-wrap { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: 0.75rem 0; background: #fff; border-top: 1px solid var(--border-color); box-shadow: 0 -2px 12px rgba(0,0,0,0.08); }
.rbac-floating-save-wrap.hide { display: none !important; }
.rbac-floating-save-row { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; display: flex; align-items: center; justify-content: flex-start; }
.rbac-floating-save-btn { padding: 0.6rem 1.25rem; font-weight: 600; border-radius: 10px; white-space: nowrap; }

/* RBAC v2 console: permissions by page, modal, toast, user detail, delegations */
.rbac-permissions-choose { margin-bottom: 1rem; }
.rbac-permissions-choose label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.rbac-permissions-choose .form-control { max-width: 320px; }
.rbac-perms-hint { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1rem; }
.rbac-perms-section { margin-bottom: 1.5rem; }
.rbac-perms-page-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.5rem 0; color: var(--text-primary); }
.rbac-perms-checkbox-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.rbac-perm-checkbox-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; cursor: pointer; }
.rbac-perms-actions { margin-top: 1.25rem; }
.rbac-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.rbac-modal.hide { display: none !important; }
.rbac-modal-content { background: #fff; border-radius: 12px; padding: 1.5rem; max-width: 400px; width: 100%; box-shadow: 0 10px 40px rgba(0,0,0,0.15); }
.rbac-modal-title { font-weight: 600; margin: 0 0 0.5rem 0; }
.rbac-modal-content input.form-control { margin: 0.75rem 0; }
.rbac-modal-actions { display: flex; gap: 0.75rem; margin-top: 1rem; }
.rbac-toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; padding: 0.75rem 1.25rem; border-radius: 10px; font-size: 0.9rem; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.rbac-toast.hide { display: none !important; }
.rbac-toast-ok { background: #0d9668; color: #fff; }
.rbac-toast-error { background: #b02a37; color: #fff; }
.rbac-user-detail { margin-top: 1.5rem; padding: 1.25rem; background: #f8fafc; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); }
.rbac-user-detail h4 { margin: 0 0 0.75rem 0; font-size: 1.05rem; }
.rbac-user-detail p { margin: 0.35rem 0; font-size: 0.9rem; }
.rbac-user-roles-row { margin-bottom: 0.75rem; }
.rbac-user-roles-row strong { display: block; margin-bottom: 0.25rem; }
.rbac-user-role-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.5rem; padding: 0.25rem 0.5rem; background: #e2e8f0; border-radius: 8px; font-size: 0.85rem; }
.rbac-user-assign-role { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.rbac-user-assign-role .form-control { min-width: 160px; }
.rbac-user-add-override { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; }
.rbac-user-add-override select.form-control { min-width: 180px; }
.rbac-deleg-form { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.rbac-deleg-form h4 { margin: 0 0 1rem 0; font-size: 1rem; }
.rbac-deleg-form .form-row { margin-bottom: 0.75rem; }
.rbac-deleg-form .form-row label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.25rem; }
.rbac-deleg-form .form-control { max-width: 320px; }

/* ========== RBAC Console — Modern elegant UI ========== */
.rbac-console { --rbac-bg: #f8fafc; --rbac-surface: #ffffff; --rbac-border: #e2e8f0; --rbac-text: #0f172a; --rbac-text-muted: #64748b; --rbac-primary: #0ea5e9; --rbac-primary-hover: #0284c7; --rbac-radius: 12px; --rbac-radius-sm: 8px; --rbac-shadow: 0 1px 3px rgba(0,0,0,0.06); --rbac-shadow-lg: 0 10px 40px -10px rgba(0,0,0,0.12); max-width: 960px; margin: 0 auto; padding-bottom: 3rem; }
.rbac-roles-access-page.rbac-console { max-width: 1248px; }

/* Roles & Access page: modern header (same pattern as Settings, Users, Groups) */
.rbac-roles-access-page .back-link { display: inline-block; margin-bottom: 0.75rem; color: var(--text-secondary, #64748b); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.2s; }
.rbac-roles-access-page .back-link:hover { color: var(--primary-color, #0369a1); text-decoration: underline; }
.rbac-roles-access-page .page-header.rbac-roles-access-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f5f3ff 100%);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid var(--primary-color, #0ea5e9);
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.06);
}
.rbac-roles-access-page .page-header.rbac-roles-access-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1e40af;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.rbac-roles-access-page .page-header-desc {
    font-size: 0.9375rem;
    color: #6366f1;
    margin: 0;
    opacity: 0.85;
}
.rbac-roles-access-page .header-actions { display: flex; gap: 0.5rem; align-items: center; }

/* Your access – clear section to see your roles and permissions */
.rbac-your-access {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 40%, #f0f9ff 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 4px solid #10b981;
    border-radius: var(--rbac-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.rbac-your-access-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #047857;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
}
.rbac-your-access-desc {
    font-size: 0.875rem;
    color: var(--rbac-text-muted);
    margin: 0 0 1rem 0;
    line-height: 1.45;
}
.rbac-your-access-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.25rem 1.5rem;
}
@media (max-width: 640px) {
    .rbac-your-access-grid { grid-template-columns: 1fr; }
}
.rbac-your-access-block {
    background: var(--rbac-surface);
    border: 1px solid var(--rbac-border);
    border-radius: var(--rbac-radius-sm);
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.rbac-your-access-block-title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rbac-text-muted);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--rbac-border);
}
.rbac-your-access-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rbac-your-access-list li { margin: 0.25rem 0; font-size: 0.875rem; }
.rbac-your-access-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rbac-your-access-chips li { margin: 0; }
.rbac-your-access-chip {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #d1fae5;
    color: #047857;
    border-radius: 6px;
    border: 1px solid #a7f3d0;
}
.rbac-your-access-by-page { display: flex; flex-direction: column; gap: 0.75rem; }
.rbac-your-access-page-group { break-inside: avoid; }
.rbac-your-access-page-name {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rbac-primary);
    margin-bottom: 0.25rem;
}
.rbac-access-perms-table-wrap { overflow-x: auto; margin-top: 0.25rem; border: 1px solid var(--rbac-border); border-radius: var(--rbac-radius-sm); }
.rbac-access-perms-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.rbac-access-perms-table th { text-align: left; padding: 0.4rem 0.75rem; font-weight: 600; color: var(--rbac-text-muted); background: var(--rbac-bg); border-bottom: 1px solid var(--rbac-border); }
.rbac-access-perms-col-desc { min-width: 160px; }
.rbac-access-perms-col-key { min-width: 140px; font-family: monospace; font-size: 0.75rem; color: var(--rbac-text-muted); }
.rbac-access-perms-table td { padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--rbac-border); vertical-align: top; }
.rbac-access-perms-table tbody tr:last-child td { border-bottom: none; }
.rbac-your-access-perm-item {
    font-size: 0.8125rem;
    color: var(--rbac-text);
}
.rbac-your-access-perm-item .rbac-perm-desc,
.rbac-access-perms-table td.rbac-perm-desc {
    font-family: inherit;
    color: var(--rbac-text);
}
.rbac-your-access-perm-item .rbac-perm-key,
.rbac-access-perms-table td.rbac-perm-key {
    font-size: 0.75rem;
    font-family: monospace;
    color: var(--rbac-text-muted);
}
.rbac-your-access-empty { margin: 0; font-size: 0.875rem; color: var(--rbac-text-muted); }
.rbac-your-access-overrides {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rbac-border);
}
.rbac-your-access-override-badge {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: 4px;
    border: 1px solid #fcd34d;
}

/* Edit Role page – modern UI (aligned with Roles & Access) */
.edit-role-page {
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 3rem;
}
.edit-role-page.rbac-console { --rbac-bg: #f8fafc; --rbac-surface: #ffffff; --rbac-border: #e2e8f0; --rbac-text: #0f172a; --rbac-text-muted: #64748b; --rbac-primary: #0ea5e9; --rbac-radius: 12px; --rbac-radius-sm: 8px; --rbac-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.edit-role-page.rbac-console.edit-role-page--from-rbac { max-width: 1248px; }
.edit-role-page .back-link { display: inline-block; margin-bottom: 0.75rem; color: var(--text-secondary, #64748b); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.2s; }
.edit-role-page .back-link:hover { color: var(--primary-color, #0369a1); text-decoration: underline; }
.edit-role-page .page-header.edit-role-page-header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem 1.25rem 1.75rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f5f3ff 100%);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-left: 4px solid var(--primary-color, #0ea5e9);
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.06);
}
.edit-role-page .page-header.edit-role-page-header h1 { font-size: 1.75rem; font-weight: 700; color: #1e40af; letter-spacing: -0.02em; margin: 0 0 0.25rem 0; }
.edit-role-page .edit-role-title .edit-role-name { font-weight: 600; color: #1e3a8a; opacity: 0.95; }
.edit-role-page .page-header-desc { font-size: 0.9375rem; color: #6366f1; margin: 0; opacity: 0.9; line-height: 1.45; }
.edit-role-page .edit-role-perms-link { color: #4f46e5; font-weight: 600; text-decoration: none; }
.edit-role-page .edit-role-perms-link:hover { text-decoration: underline; }
.edit-role-page .header-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.edit-role-page .edit-role-badge { display: inline-block; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; }
.edit-role-page .edit-role-badge--system { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.edit-role-page .edit-role-card {
    background: var(--rbac-surface, #fff);
    border: 1px solid var(--rbac-border, #e2e8f0);
    border-radius: var(--rbac-radius, 12px);
    box-shadow: var(--rbac-shadow, 0 1px 3px rgba(0,0,0,0.06));
    overflow: hidden;
}
.edit-role-page--from-rbac .edit-role-card { border-left: 4px solid var(--rbac-primary, #0ea5e9); }
.edit-role-page .edit-role-error {
    margin: 0;
    padding: 0.75rem 1.25rem;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 0.9375rem;
    font-weight: 500;
    border-bottom: 1px solid #fecaca;
}
.edit-role-page .edit-role-card .rbac-console-card-body { padding: 1.5rem 1.75rem; }
.edit-role-page .edit-role-form-group { margin-bottom: 1.25rem; }
.edit-role-page .edit-role-form-group:last-of-type { margin-bottom: 0; }
.edit-role-page .edit-role-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--rbac-text-muted, #64748b); margin: 0 0 0.35rem 0; }
.edit-role-page .edit-role-input.rbac-console-input { max-width: 100%; width: 100%; transition: border-color 0.2s, box-shadow 0.2s; }
.edit-role-page .edit-role-input.rbac-console-input:focus { outline: none; border-color: var(--rbac-primary, #0ea5e9); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }
.edit-role-page .edit-role-input.rbac-console-input[readonly] { background: var(--rbac-bg, #f8fafc); color: var(--rbac-text-muted, #64748b); cursor: not-allowed; }
@media (min-width: 480px) {
    .edit-role-page .edit-role-input.rbac-console-input { max-width: 360px; width: auto; }
}
.edit-role-page .edit-role-form-actions { display: flex; gap: 0.75rem; align-items: center; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rbac-border, #e2e8f0); }
.edit-role-page .rbac-console-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.edit-role-page .rbac-console-field-hint { margin-top: 0.35rem; }

/* Tab links: look like buttons, no underline */
.rbac-console-tab { text-decoration: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.rbac-console-tab:link, .rbac-console-tab:visited { color: inherit; }
/* Colorful RBAC tabs – each tab has its own color */
.rbac-console-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; padding: 0.35rem; background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%); border-radius: var(--rbac-radius); border: 1px solid var(--rbac-border); width: 100%; max-width: 100%; overflow-x: auto; box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); }
.rbac-console-tab { flex: 1; min-width: 0; padding: 0.625rem 1rem; font-size: 0.875rem; font-weight: 500; background: transparent; border: none; border-radius: var(--rbac-radius-sm); color: var(--rbac-text-muted); cursor: pointer; transition: color 0.2s, background 0.2s, box-shadow 0.2s, border-color 0.2s; white-space: nowrap; border: 2px solid transparent; }
.rbac-console-tab[data-tab="access"] { --tab-color: #0d9488; --tab-bg: rgba(13, 148, 136, 0.12); }
.rbac-console-tab[data-tab="roles"] { --tab-color: #0ea5e9; --tab-bg: rgba(14, 165, 233, 0.12); }
.rbac-console-tab[data-tab="permissions"] { --tab-color: #8b5cf6; --tab-bg: rgba(139, 92, 246, 0.12); }
.rbac-console-tab[data-tab="users"] { --tab-color: #10b981; --tab-bg: rgba(16, 185, 129, 0.12); }
.rbac-console-tab[data-tab="delegations"] { --tab-color: #f59e0b; --tab-bg: rgba(245, 158, 11, 0.12); }
.rbac-console-tab[data-tab="audit"] { --tab-color: #6366f1; --tab-bg: rgba(99, 102, 241, 0.12); }
.rbac-console-tab[data-tab="access"]:hover { color: #0f766e; background: rgba(13, 148, 136, 0.08); }
.rbac-console-tab[data-tab="roles"]:hover { color: #0284c7; background: rgba(14, 165, 233, 0.08); }
.rbac-console-tab[data-tab="permissions"]:hover { color: #7c3aed; background: rgba(139, 92, 246, 0.08); }
.rbac-console-tab[data-tab="users"]:hover { color: #059669; background: rgba(16, 185, 129, 0.08); }
.rbac-console-tab[data-tab="delegations"]:hover { color: #d97706; background: rgba(245, 158, 11, 0.08); }
.rbac-console-tab[data-tab="audit"]:hover { color: #4f46e5; background: rgba(99, 102, 241, 0.08); }
.rbac-console-tab[data-tab="access"].active { color: #0f766e; background: var(--rbac-surface); box-shadow: 0 1px 4px rgba(13, 148, 136, 0.25); border-color: #0d9488; }
.rbac-console-tab[data-tab="roles"].active { color: #0369a1; background: var(--rbac-surface); box-shadow: 0 1px 4px rgba(14, 165, 233, 0.25); border-color: #0ea5e9; }
.rbac-console-tab[data-tab="permissions"].active { color: #6d28d9; background: var(--rbac-surface); box-shadow: 0 1px 4px rgba(139, 92, 246, 0.25); border-color: #8b5cf6; }
.rbac-console-tab[data-tab="users"].active { color: #047857; background: var(--rbac-surface); box-shadow: 0 1px 4px rgba(16, 185, 129, 0.25); border-color: #10b981; }
.rbac-console-tab[data-tab="delegations"].active { color: #b45309; background: var(--rbac-surface); box-shadow: 0 1px 4px rgba(245, 158, 11, 0.25); border-color: #f59e0b; }
.rbac-console-tab[data-tab="audit"].active { color: #4338ca; background: var(--rbac-surface); box-shadow: 0 1px 4px rgba(99, 102, 241, 0.25); border-color: #6366f1; }
.rbac-console-tab:focus { outline: none; }
.rbac-console-tab:focus-visible { outline: 2px solid var(--rbac-primary); outline-offset: 2px; }
.rbac-console-panel { display: block; }
.rbac-console-panel.hide { display: none !important; }
.rbac-console-card { background: var(--rbac-surface); border-radius: var(--rbac-radius); border: 1px solid var(--rbac-border); box-shadow: var(--rbac-shadow); overflow: hidden; }
/* Roles-access: let dropdowns (select-search) flow outside card/section */
.rbac-roles-access-page .rbac-console-card { overflow: visible; }
.rbac-console-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--rbac-border); background: var(--rbac-bg); }
.rbac-console-toolbar .rbac-console-btn-primary { margin-left: auto; }
.rbac-access-toolbar { flex-wrap: wrap; }
.rbac-access-toolbar-row { display: flex; align-items: center; gap: 0.5rem 1rem; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; }
.rbac-access-toolbar-row .rbac-perms-step-label { margin: 0; flex-shrink: 0; }
.rbac-access-toolbar-row .rbac-access-view-select,
.rbac-access-toolbar-row .select-search-wrap { min-width: 200px; flex: 1 1 auto; max-width: 320px; }
.rbac-access-toolbar-row .rbac-access-edit-btn { flex-shrink: 0; margin-left: 0; }
.rbac-console-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 360px; }
.rbac-console-search-wrap--flex { max-width: 100%; }
.rbac-console-search { width: 100%; padding: 0.5rem 2rem 0.5rem 2.25rem; font-size: 0.9375rem; border: 1px solid var(--rbac-border); border-radius: var(--rbac-radius-sm); background: var(--rbac-surface); color: var(--rbac-text); transition: border-color 0.2s, box-shadow 0.2s; }
.rbac-console-search::placeholder { color: var(--rbac-text-muted); }
.rbac-console-search::-webkit-search-cancel-button { display: none; -webkit-appearance: none; appearance: none; }
.rbac-console-search::-moz-search-cancel-button { display: none; }
.rbac-console-search:focus { outline: none; border-color: var(--rbac-primary); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15); }
.rbac-console-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--rbac-text-muted); pointer-events: none; display: flex; align-items: center; justify-content: center; }
.rbac-console-search-icon svg { width: 18px; height: 18px; flex-shrink: 0; }
.rbac-console-search-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 1.5rem; height: 1.5rem; padding: 0; font-size: 1.1rem; line-height: 1; border: none; background: none; color: var(--rbac-text-muted); cursor: pointer; border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; }
.rbac-console-search-clear:hover { color: var(--rbac-text); background: var(--rbac-bg); }
.rbac-console-search-clear.hide { display: none !important; }
.rbac-console-btn-primary { display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; background: var(--rbac-primary); border: none; border-radius: var(--rbac-radius-sm); cursor: pointer; text-decoration: none; transition: background 0.2s; }
.rbac-console-btn-primary:hover { background: var(--rbac-primary-hover); }
.rbac-console-btn-secondary { display: inline-flex; align-items: center; padding: 0.4rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--rbac-text); background: var(--rbac-bg); border: 1px solid var(--rbac-border); border-radius: var(--rbac-radius-sm); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.rbac-console-btn-secondary:hover { background: #f1f5f9; border-color: #cbd5e1; }
.rbac-console-btn-danger { padding: 0.35rem 0.65rem; font-size: 0.8125rem; font-weight: 500; color: #b91c1c; background: transparent; border: 1px solid rgba(185,28,28,0.3); border-radius: var(--rbac-radius-sm); cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.rbac-console-btn-danger:hover { background: rgba(185,28,28,0.08); border-color: #b91c1c; }
.rbac-console-btn-sm { padding: 0.35rem 0.75rem; font-size: 0.8125rem; }
.rbac-console-card-body { padding: 1.25rem 1.5rem; }
.rbac-console-loading { margin: 0; padding: 1.5rem 0; color: var(--rbac-text-muted); font-size: 0.9375rem; }
.rbac-console-empty { margin: 1rem 0 0; padding: 1rem; text-align: center; color: var(--rbac-text-muted); font-size: 0.9375rem; }
.rbac-console-empty.hide { display: none !important; }
.rbac-console-table-wrap { border-radius: var(--rbac-radius-sm); border: 1px solid var(--rbac-border); overflow: hidden; }
.rbac-console-table { width: 100%; margin: 0; font-size: 0.9375rem; border-collapse: collapse; }
.rbac-console-table--aligned th,
.rbac-console-table--aligned td { vertical-align: middle; box-sizing: border-box; }
.rbac-console-table th { padding: 0.75rem 1.25rem; text-align: left; font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--rbac-text-muted); background: var(--rbac-bg); border-bottom: 2px solid var(--rbac-border); }
.rbac-console-table td { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--rbac-border); vertical-align: middle; color: var(--rbac-text); line-height: 1.4; }
.rbac-console-table tbody tr:last-child td { border-bottom: none; }
.rbac-console-table tbody tr:hover { background: var(--rbac-bg); }
.rbac-console-btn-delete-x { width: 2rem; height: 2rem; padding: 0; font-size: 1.25rem; line-height: 1; border: 1px solid var(--rbac-border); border-radius: var(--rbac-radius-sm); background: var(--rbac-surface); color: var(--rbac-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.rbac-console-btn-delete-x:hover { color: #dc2626; border-color: #dc2626; background: rgba(220, 38, 38, 0.08); box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2); }
.rbac-console-btn-delete-x--disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.rbac-console-btn-delete-x--disabled:hover { color: inherit; border-color: var(--rbac-border); background: var(--rbac-surface); box-shadow: none; }
.rbac-console-btn-restore { padding: 0.35rem 0.75rem; font-size: 0.8125rem; font-weight: 500; color: var(--rbac-primary); background: transparent; border: 1px solid var(--rbac-primary); border-radius: var(--rbac-radius-sm); cursor: pointer; transition: background 0.2s, color 0.2s; }
.rbac-console-btn-restore:hover { background: rgba(14, 165, 233, 0.1); color: var(--rbac-primary-hover); }
.rbac-console-cell-name { font-weight: 600; color: var(--rbac-text); }
.rbac-console-cell-muted { color: var(--rbac-text-muted); }
.rbac-console-cell-small { font-size: 0.875rem; }
.rbac-console-cell-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rbac-console-badge { display: inline-block; padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; background: #e0f2fe; color: #0369a1; border-radius: 6px; margin-left: 0.35rem; }
.rbac-console-link { color: var(--rbac-primary); text-decoration: none; font-weight: 500; font-size: 0.875rem; }
.rbac-console-link:hover { text-decoration: underline; }
.rbac-console-inline-form { display: inline; margin: 0; }
.rbac-permissions-choose-inline { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rbac-console-label-inline { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--rbac-text-muted); }
.rbac-console-select { padding: 0.5rem 0.75rem; font-size: 0.9375rem; border: 1px solid var(--rbac-border); border-radius: var(--rbac-radius-sm); background: var(--rbac-surface); color: var(--rbac-text); min-width: 160px; }
.rbac-console-input { padding: 0.5rem 0.75rem; font-size: 0.9375rem; border: 1px solid var(--rbac-border); border-radius: var(--rbac-radius-sm); background: var(--rbac-surface); color: var(--rbac-text); width: 100%; max-width: 280px; }
.rbac-perms-hint { font-size: 0.875rem; color: var(--rbac-text-muted); margin: 0 0 1rem 0; }
.rbac-perms-system-readonly-notice {
    font-size: 0.875rem;
    color: var(--rbac-text-muted);
    margin: 0 0 1rem 0;
    padding: 0.65rem 0.85rem;
    border-radius: var(--rbac-radius-sm);
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid var(--rbac-border);
}
.rbac-console-perms-section { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rbac-border); }
.rbac-console-perms-section:last-of-type { border-bottom: none; }
.rbac-console-perms-page-title { font-size: 0.9375rem; font-weight: 600; color: var(--rbac-text); margin: 0 0 0.6rem 0; }
.rbac-console-perms-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.rbac-console-perm-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; color: var(--rbac-text); cursor: pointer; }
.rbac-console-perm-label input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--rbac-primary); }
.rbac-perms-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.rbac-perms-actions #rbac-perms-save { margin-left: auto; }
/* Permissions tab: clear flow (step 1 → 2 → 3) */
.rbac-perms-flow-intro { padding: 1rem 1.25rem; border-bottom: 1px solid var(--rbac-border); background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, transparent 100%); }
.rbac-perms-flow-desc { margin: 0; font-size: 0.9375rem; color: var(--rbac-text); line-height: 1.5; }
/* Permissions tab: two grouped cards – overflow visible so dropdowns can extend outside */
.rbac-perms-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--rbac-border);
    background: var(--rbac-bg);
    overflow: visible;
}
.rbac-perms-group-inner { overflow: visible; }
.rbac-perms-group .rbac-perms-field { overflow: visible; }
.rbac-perms-group .select-search-wrap { overflow: visible; position: relative; }
.rbac-perms-group .select-search-dropdown { z-index: 500; overflow: visible; pointer-events: auto; }
.rbac-perms-group .select-search-dropdown .select-search-option { pointer-events: auto; cursor: pointer; }
.rbac-perms-group {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 100%;
    background: var(--rbac-surface);
    border: 1px solid var(--rbac-border);
    border-radius: var(--rbac-radius);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    overflow: visible;
}
.rbac-perms-group-assign {
    border-left: 3px solid var(--rbac-primary);
}
.rbac-perms-group-copy {
    border-left: 3px solid #7c3aed;
}
.rbac-perms-group-title {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rbac-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid var(--rbac-border);
}
.rbac-perms-group-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem 1.25rem;
    padding: 1rem;
    overflow: visible;
}
.rbac-perms-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 160px;
}
.rbac-perms-group-assign .rbac-perms-field:first-of-type { min-width: 100px; }
.rbac-perms-group-assign .rbac-perms-choose-role,
.rbac-perms-group-assign .rbac-perms-choose-user { min-width: 220px; flex: 1 1 220px; }
.rbac-perms-group-copy .rbac-perms-field:first-of-type { min-width: 90px; }
.rbac-perms-group-copy .rbac-perms-field:nth-of-type(2) { min-width: 200px; flex: 1 1 200px; }
.rbac-perms-field-action { align-items: flex-start; }
.rbac-perms-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--rbac-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0;
}
.rbac-perms-hint-inline {
    font-size: 0.75rem;
    color: var(--rbac-text-muted);
    margin-top: 0.15rem;
}
.rbac-perms-target-type-select { min-width: 100px; }
.rbac-perms-copy-type { min-width: 90px; }
.rbac-perms-role-select,
.rbac-perms-user-select { min-width: 200px; }
.rbac-perms-copy-select,
.rbac-perms-group-copy .select-search-wrap { min-width: 180px; max-width: 260px; }
.rbac-perms-hint-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rbac-perms-hint-row .rbac-perms-hint { margin: 0; flex: 1 1 auto; min-width: 0; }
.rbac-perms-search-wrap { min-width: 200px; max-width: 280px; flex-shrink: 0; }
.rbac-perms-step-label { font-size: 0.8125rem; font-weight: 600; color: var(--rbac-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }
/* Copy permissions button – distinct color (purple/violet) */
.rbac-console-btn-copy { display: inline-flex; align-items: center; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 600; color: #fff; background: #7c3aed; border: none; border-radius: var(--rbac-radius-sm); cursor: pointer; transition: background 0.2s; white-space: nowrap; }
.rbac-console-btn-copy:hover { background: #6d28d9; }
.rbac-perms-section-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.rbac-perms-section-header .rbac-perms-page-title { margin: 0; }
.rbac-perms-section-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.rbac-perms-select-all-btn, .rbac-perms-deselect-all-btn { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.rbac-perms-empty-state { padding: 2rem 1.5rem; text-align: center; background: var(--rbac-bg); border-radius: var(--rbac-radius-sm); border: 1px dashed var(--rbac-border); margin: 0; }
.rbac-perms-empty-state-text { margin: 0; font-size: 0.9375rem; color: var(--rbac-text-muted); }
.rbac-perms-system-msg { margin: 0; padding: 1rem; background: #fef3c7; border: 1px solid #f59e0b; border-radius: var(--rbac-radius-sm); color: #92400e; font-size: 0.9375rem; }
.rbac-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.rbac-modal.hide { display: none !important; }
.rbac-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); }
.rbac-modal-content { position: relative; background: var(--rbac-surface); border-radius: var(--rbac-radius); padding: 1.5rem 1.75rem; max-width: 400px; width: 100%; box-shadow: var(--rbac-shadow-lg); border: 1px solid var(--rbac-border); }
.rbac-modal-title { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5rem 0; color: var(--rbac-text); }
.rbac-modal-text { font-size: 0.9375rem; color: var(--rbac-text-muted); margin: 0 0 1rem 0; line-height: 1.5; }
.rbac-modal-content .rbac-console-input { max-width: 100%; margin: 0 0 1rem 0; }
.rbac-modal-actions { display: flex; gap: 0.75rem; justify-content: flex-end; }
.rbac-console-toast { position: fixed; right: 1.5rem; z-index: 999; padding: 0.75rem 1.25rem; border-radius: var(--rbac-radius-sm); font-size: 0.9375rem; font-weight: 500; box-shadow: var(--rbac-shadow-lg); }
.rbac-console-toast--top-right { top: 1.5rem; bottom: auto; }
.rbac-console-toast.hide { display: none !important; }
.rbac-console-toast--ok { background: #059669; color: #fff; }
.rbac-console-toast--error { background: #dc2626; color: #fff; }
.rbac-user-detail { margin-top: 1.5rem; padding: 1.25rem; background: transparent; border-radius: var(--rbac-radius-sm); border: none; transition: border-color 0.2s, box-shadow 0.2s; }
.rbac-user-detail-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.25rem; align-items: stretch; }
@media (max-width: 768px) { .rbac-user-detail-top { grid-template-columns: 1fr; } }
.rbac-user-detail-card { background: var(--rbac-surface, #fff); border: 1px solid var(--rbac-border); border-left: 4px solid var(--rbac-primary, #0ea5e9); border-radius: var(--rbac-radius-sm); padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(0,0,0,0.04); min-width: 0; }
.rbac-user-detail-col-name.rbac-user-detail-card { border-left-color: #0ea5e9; }
.rbac-user-detail-col-roles.rbac-user-detail-card { border-left-color: #7c3aed; }
.rbac-user-detail-col-assign.rbac-user-detail-card { border-left-color: #059669; }
.rbac-user-detail-card-title { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rbac-text-muted); margin: 0 0 0.5rem 0; }
.rbac-user-detail-name { font-size: 1rem; font-weight: 600; margin: 0; color: var(--rbac-text); }
.rbac-user-detail-section-title { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--rbac-text-muted); margin: 0 0 0.5rem 0; }
.rbac-user-detail p { margin: 0.4rem 0; font-size: 0.875rem; }
.rbac-user-detail-muted { font-size: 0.8125rem; color: var(--rbac-text-muted); word-break: break-word; }
.rbac-user-roles-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; }
.rbac-user-role-chip { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.25rem 0.5rem; font-size: 0.8125rem; background: #e0f2fe; color: #0369a1; border-radius: var(--rbac-radius-sm); border: 1px solid #bae6fd; }
.rbac-user-role-chip .rbac-user-role-remove { padding: 0.15rem 0.4rem; font-size: 1rem; line-height: 1; min-width: 1.5em; }
.rbac-user-assign-role { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.rbac-user-assign-role .rbac-console-select { min-width: 140px; }
.rbac-user-detail-effective { margin-top: 1.5rem; padding: 1.25rem 1rem; padding-top: 1.5rem; border-top: 1px solid var(--rbac-border); }
.rbac-user-detail-effective-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 0.75rem; }
.rbac-user-detail-effective-header .rbac-user-detail-section-title { margin: 0; }
.rbac-effective-perms-search-wrap { min-width: 200px; max-width: 280px; }
.rbac-user-detail-effective .rbac-user-detail-section-title { margin-bottom: 0.75rem; }
.rbac-user-detail-effective .rbac-user-detail-effective-header + .rbac-user-effective-perms-grid { padding-top: 0; }
/* highlight for effective-perms search matches */
#rbac-user-effective-perms .rbac-perms-search-match { outline: 2px solid #eab308; outline-offset: 1px; background: #fefce8 !important; border-radius: 2px; }
#rbac-user-effective-perms tr.rbac-perms-search-nomatch { opacity: 0.5; }
#rbac-user-effective-perms tr.rbac-perms-search-nomatch td { background: #f8fafc !important; }
.rbac-user-effective-perms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; padding: 0.75rem 0; }
@media (max-width: 900px) { .rbac-user-effective-perms-grid { grid-template-columns: 1fr; } }
.rbac-user-effective-col { min-width: 0; }
.rbac-user-effective-page-group { margin: 0 0.25rem 1rem 0; break-inside: avoid; }
.rbac-user-effective-page-group:last-child { margin-bottom: 0; }
.rbac-user-effective-table-card .rbac-access-perms-table-wrap { background: #fff; border: 1px solid var(--rbac-border); border-radius: var(--rbac-radius-sm); overflow: hidden; }
.rbac-user-perms-table-wrap { background: #fff !important; }
.rbac-user-detail .rbac-user-perms-table th { background: #f8fafc; }
.rbac-user-detail .rbac-user-perms-table td { background: #fff; }
.rbac-access-perms-col-role { min-width: 120px; }
.rbac-perm-role { font-size: 0.8125rem; color: var(--rbac-text-muted); }
.rbac-user-detail-overrides-section { margin-top: 1.5rem; padding: 0 0.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rbac-border); }
.rbac-user-detail-overrides-section-title { font-size: 1.125rem; font-weight: 700; margin: 0 0 1rem 0; color: var(--rbac-text); }
.rbac-user-detail-overrides { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem 2rem; align-items: start; background: var(--rbac-bg); padding: 1.25rem; margin: 0 0.25rem; border-radius: var(--rbac-radius-sm); border: 1px solid var(--rbac-border); }
@media (max-width: 900px) { .rbac-user-detail-overrides { grid-template-columns: 1fr; } }
.rbac-user-override-section { min-width: 0; }
.rbac-user-override-list { font-size: 0.875rem; margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rbac-user-override-list .rbac-your-access-override-badge { display: inline-block; }
.rbac-override-denied-badge { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.rbac-user-add-override-section { min-width: 0; }
.rbac-user-add-override { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.rbac-user-add-override .rbac-console-select { min-width: 120px; }
.rbac-deleg-form { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rbac-border); }
.rbac-deleg-form-title { font-size: 1rem; font-weight: 600; margin: 0 0 1rem 0; color: var(--rbac-text); }
.rbac-deleg-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.rbac-console-field label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--rbac-text-muted); margin-bottom: 0.35rem; }
.rbac-console-field .rbac-console-select,
.rbac-console-field .rbac-console-input { width: 100%; max-width: 100%; }
.rbac-console-input-datetime { max-width: 100%; }
.rbac-console-field-hint { display: block; font-size: 0.75rem; color: var(--rbac-text-muted); margin-top: 0.25rem; }
.rbac-console--with-left-border .rbac-console-card { border-left: 4px solid var(--rbac-primary); }
.rbac-console-deleted-section { margin-top: 1.5rem; }
.rbac-console-deleted-divider { height: 3px; background: var(--rbac-border); margin: 0 0 1rem 0; border-radius: 2px; }
.rbac-console-collapse-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; font-size: 0.9375rem; font-weight: 600; color: var(--rbac-text); background: none; border: none; cursor: pointer; text-align: left; }
.rbac-console-collapse-trigger:hover { color: var(--rbac-primary); }
.rbac-console-collapse-icon { font-size: 0.75rem; color: var(--rbac-text-muted); transition: transform 0.2s; }
.rbac-console-collapse-body { margin-top: 0.5rem; }
.rbac-console-collapse-body.hide { display: none !important; }
.rbac-console-table--deleted { margin-top: 0.5rem; }
.rbac-perms-copy-from { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-left: auto; }
.rbac-perms-copy-from .rbac-console-select { min-width: 180px; }
.rbac-console-perms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem 1.5rem; }
.rbac-console-perms-grid .rbac-console-perms-section { margin-bottom: 0; padding: 1rem; background: var(--rbac-bg); border-radius: var(--rbac-radius-sm); border: 1px solid var(--rbac-border); }
.rbac-console-perms-grid .rbac-console-perms-list { display: flex; flex-direction: column; gap: 0.35rem; }
/* Entity cards (simplified permissions) – card layout, toggle switches */
.rbac-entity-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem 1.25rem; margin-bottom: 0.5rem; }
.rbac-entity-card { padding: 1rem 1.25rem; background: var(--rbac-bg); border-radius: var(--rbac-radius-sm); border: 1px solid var(--rbac-border); }
.rbac-entity-card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.rbac-entity-card-title-wrap { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; }
.rbac-entity-card-header-cb { flex-shrink: 0; cursor: pointer; }
.rbac-entity-card-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); padding-bottom: 0.35rem; border-bottom: 1px solid var(--rbac-border); flex: 1; }
.rbac-entity-card-actions { display: flex; gap: 0.35rem; flex-shrink: 0; }
.rbac-entity-card-actions .rbac-console-btn-secondary { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.rbac-entity-card-toggles { display: flex; flex-direction: column; gap: 0.5rem; }
.rbac-perms-entity-search-wrap { margin-bottom: 0.75rem; }
.rbac-perms-entity-search-wrap .rbac-console-search { max-width: 20rem; }
.rbac-entity-toggle-wrap { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; cursor: pointer; }
.rbac-entity-toggle-wrap input[type="checkbox"] { width: 2.5rem; height: 1.25rem; accent-color: var(--primary, #2563eb); cursor: pointer; }
.rbac-perms-view-toggle { display: inline-flex; gap: 0; margin-left: 0.5rem; }
.rbac-perms-view-toggle.hide { display: none; }
.rbac-console-btn-toggle { padding: 0.35rem 0.75rem; font-size: 0.8125rem; border: 1px solid var(--rbac-border); background: var(--rbac-bg); color: var(--rbac-text-muted); border-radius: var(--rbac-radius-sm); cursor: pointer; }
.rbac-console-btn-toggle:first-of-type { border-radius: var(--rbac-radius-sm) 0 0 var(--rbac-radius-sm); }
.rbac-console-btn-toggle:last-of-type { border-radius: 0 var(--rbac-radius-sm) var(--rbac-radius-sm) 0; margin-left: -1px; }
.rbac-console-btn-toggle--active { background: var(--primary, #2563eb); color: #fff; border-color: var(--primary, #2563eb); }
.rbac-user-detail--highlight.rbac-user-detail--visible { border: 2px solid #eab308; box-shadow: 0 0 0 4px rgba(234, 179, 8, 0.15); }
.rbac-console .select-search-wrap { overflow: visible; position: relative; z-index: 10; }
.rbac-console .select-search-dropdown { z-index: 50; pointer-events: auto; }
.rbac-console .select-search-option { pointer-events: auto; cursor: pointer; }

/* Legacy matrix (if still used elsewhere) */
.rbac-matrix-wrap { overflow-x: auto; }
.rbac-matrix-table-wrap { overflow-x: auto; max-width: 100%; }
.rbac-matrix-table { font-size: 0.85rem; margin-bottom: 0; border-collapse: collapse; }
.rbac-matrix-table th, .rbac-matrix-table td { padding: 0.35rem 0.5rem; white-space: nowrap; }
.rbac-matrix-role-col { min-width: 100px; position: sticky; left: 0; background: var(--body-bg, #fff); z-index: 2; }
.rbac-matrix-module-th { text-align: center; background: #f1f5f9; font-weight: 600; }
.rbac-matrix-actions-th { min-width: 70px; text-align: center; }
.rbac-matrix-feature-col { min-width: 180px; position: sticky; left: 0; }
.rbac-matrix-view-toggle { margin-left: auto; }

/* Create/Edit Candidate page: wider form container, rectangular fields, section accent shadow like Create Job */
.create-candidate-page .form-container {
    max-width: 1100px;
}
/* Quick Add: hide full-form-only sections; show only minimal info + resume */
.create-candidate-page.quick-add-mode .full-form-only {
    display: none !important;
}
/* Quick Add: hide separate Position and Resume sections when combined section is shown */
.create-candidate-page.quick-add-mode .quick-add-hide {
    display: none !important;
}
.create-candidate-page .quick-add-only {
    display: none;
}
.create-candidate-page.quick-add-mode .quick-add-only {
    display: block !important;
}
/* Email/mobile locked after Duplicate Check search – grayed out, not editable */
.create-candidate-page .locked-from-search input,
.create-candidate-page .locked-from-search select,
.create-candidate-page .input-combined.locked-from-search .select-search-input,
.create-candidate-page .input-combined.locked-from-search .mobile-number-input {
    cursor: not-allowed;
    pointer-events: none;
}
.create-candidate-page .input-with-lock-wrap {
    position: relative;
    display: block;
}
.create-candidate-page .locked-field-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Primary Mobile: lock is a button — click to unlock and edit (re-locks on next page load after save). */
.create-candidate-page button.locked-field-icon.locked-field-unlock-btn {
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
}
/* Primary Mobile unlock: one stack, two SVGs overlapped — avoids side-by-side “double lock” from flex. */
.create-candidate-page button.locked-field-icon.locked-field-unlock-btn .mobile-lock-icon-stack {
    position: relative;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
.create-candidate-page button.locked-field-unlock-btn .mobile-lock-svg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
    pointer-events: none;
}
.create-candidate-page button.locked-field-unlock-btn .mobile-lock-svg--unlocked {
    opacity: 0;
    visibility: hidden;
}
.create-candidate-page button.locked-field-unlock-btn.is-unlocked .mobile-lock-svg--locked {
    opacity: 0;
    visibility: hidden;
}
.create-candidate-page button.locked-field-unlock-btn.is-unlocked .mobile-lock-svg--unlocked {
    opacity: 1;
    visibility: visible;
}
.create-candidate-page button.locked-field-icon.locked-field-unlock-btn:hover .locked-field-icon-svg,
.create-candidate-page button.locked-field-icon.locked-field-unlock-btn:focus-visible .locked-field-icon-svg {
    color: #8b5cf6;
}
.create-candidate-page button.locked-field-unlock-btn.is-unlocked .locked-field-icon-svg {
    color: #22c55e;
}
.create-candidate-page .input-with-lock-wrap .locked-field-icon {
    right: 0.65rem;
}
.create-candidate-page .input-combined.mobile-combined-row.locked-from-search {
    position: relative;
}
.create-candidate-page .input-combined.mobile-combined-row.locked-from-search .locked-field-icon {
    right: 0.65rem;
}
.create-candidate-page .locked-field-icon svg {
    width: 100%;
    height: 100%;
}
.create-candidate-page .locked-field-icon-svg {
    color: #6366f1;
}
.create-candidate-page .locked-field-icon:hover .locked-field-icon-svg {
    color: #8b5cf6;
}
.create-candidate-page .input-with-lock-wrap input {
    padding-right: 2.25rem;
}
.create-candidate-page .input-combined.mobile-combined-row.locked-from-search .input-combined-value {
    padding-right: 2.25rem;
}
/* Rectangular fields (override pill) + left accent shadow per section */
.create-candidate-page .job-form-section .select-search-wrap,
.create-candidate-page .job-form-section input[type="text"],
.create-candidate-page .job-form-section input[type="number"],
.create-candidate-page .job-form-section input[type="email"],
.create-candidate-page .job-form-section input[type="tel"],
.create-candidate-page .job-form-section input[type="url"],
.create-candidate-page .job-form-section input[type="search"],
.create-candidate-page .job-form-section select,
.create-candidate-page .job-form-section textarea,
.create-candidate-page .job-form-section .input-combined {
    border-radius: 8px;
}
.create-candidate-page .job-form-section .select-search-input {
    border-radius: 8px;
}
.create-candidate-page .job-form-section .input-combined-prefix {
    border-radius: 8px 0 0 8px;
}
.create-candidate-page .job-form-section .input-combined-value,
.create-candidate-page .job-form-section .input-combined.budget-combined-row .input-combined-value {
    border-radius: 0 8px 8px 0;
}
.create-candidate-page .job-form-section .input-combined-prefix .select-search-wrap {
    border-radius: 0;
}
/* Notice Period: fixed height to match Resume URL, no extra space or gray band */
.create-candidate-page .form-group .notice-period-combined {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 2.25rem;
    min-height: 2.25rem;
    overflow: visible;
}
.create-candidate-page .form-group .notice-period-unit-wrap {
    display: flex;
    align-items: stretch;
    min-width: 7rem;
    max-width: 8.5rem;
    flex-shrink: 0;
    height: 100%;
    overflow: visible;
}
.create-candidate-page .form-group .notice-period-unit-wrap .select-search-wrap {
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}
.create-candidate-page .form-group .notice-period-unit-wrap .select-search-dropdown {
    z-index: 500;
}
.create-candidate-page .form-group .notice-period-unit-wrap .select-search-input {
    min-height: 0;
    height: 100%;
    padding: 0 2.25rem 0 0.5rem;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.25;
    box-sizing: border-box;
    border: none;
}
/* Type-and-select dropdown – hidden native select */
.create-candidate-page .form-group .notice-period-unit-wrap .notice-period-unit {
    width: 100%;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    box-sizing: border-box;
}
.create-candidate-page .form-group .notice-period-value-wrap {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.create-candidate-page .form-group .notice-period-value-wrap input {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    box-sizing: border-box;
}

/* Government ID: fixed height to match Resume URL, no extra space or gray band */
.create-candidate-page .form-group .government-id-combined {
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 2.25rem;
    min-height: 2.25rem;
    overflow: visible;
}
.create-candidate-page .form-group .government-id-type-wrap {
    display: flex;
    align-items: stretch;
    min-width: 5rem;
    max-width: 6.5rem;
    flex-shrink: 0;
    height: 100%;
    overflow: visible;
}
.create-candidate-page .form-group .government-id-type-wrap .select-search-wrap {
    position: relative;
    overflow: visible;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
}
.create-candidate-page .form-group .government-id-type-wrap .select-search-dropdown {
    z-index: 500;
}

/* ========== active Dropdown in action (search-and-select) – keep if dropdowns break ==========
 * Ensures all select-search on create-candidate page: dropdown is visible, above other content,
 * and option click works (overflow: visible so dropdown isn’t clipped; z-index so it’s on top).
 * Do not remove: refer here if search/select stops working on Candidate Stage, Application Status, etc.
 */
.create-candidate-page .job-form-section .select-search-wrap {
    overflow: visible;
    position: relative;
}
.create-candidate-page .job-form-section .select-search-dropdown {
    z-index: 500;
    pointer-events: auto;
}
.create-candidate-page .job-form-section .select-search-dropdown .select-search-option {
    pointer-events: auto;
    cursor: pointer;
}

.create-candidate-page .form-group .government-id-type-wrap .select-search-input {
    min-height: 0;
    height: 100%;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    font-weight: normal;
    line-height: 1.25;
    box-sizing: border-box;
    border: none;
}
/* Type-and-select dropdown – hidden native select */
.create-candidate-page .form-group .government-id-type-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    border: none;
    border-radius: 0;
    background: transparent;
    font-size: 1rem;
    font-family: inherit;
    color: inherit;
    cursor: pointer;
    box-sizing: border-box;
}
.create-candidate-page .form-group .government-id-value-wrap {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    height: 100%;
}
.create-candidate-page .form-group .government-id-value-wrap input {
    width: 100%;
    height: 100%;
    min-height: 0;
    border: none;
    border-radius: 0;
    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
    box-sizing: border-box;
}

/* Inset left accent (semi-circular style) per section – same as Create Job */
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) .select-search-wrap,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) input[type="text"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) input[type="number"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) input[type="email"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) input[type="tel"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) input[type="url"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) select,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) textarea,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(1) .input-combined {
    box-shadow: inset 3px 0 0 #c4b8e0;
}
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) .select-search-wrap,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) input[type="text"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) input[type="number"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) input[type="email"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) input[type="tel"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) input[type="url"],
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) select,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) textarea,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(2) .input-combined {
    box-shadow: inset 3px 0 0 #7dd3c8;
}
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(3) .select-search-wrap,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(3) input,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(3) select,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(3) textarea,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(3) .input-combined {
    box-shadow: inset 3px 0 0 #86efac;
}
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(4) .select-search-wrap,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(4) input,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(4) select,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(4) textarea,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(4) .input-combined {
    box-shadow: inset 3px 0 0 #93c5fd;
}
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(5) .select-search-wrap,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(5) input,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(5) select,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(5) textarea,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(5) .input-combined {
    box-shadow: inset 3px 0 0 #fcd34d;
}
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(6) .select-search-wrap,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(6) input,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(6) select,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(6) textarea,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(6) .input-combined {
    box-shadow: inset 3px 0 0 #f9a8d4;
}
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(7) .select-search-wrap,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(7) input,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(7) select,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(7) textarea,
.create-candidate-page .job-form-layout .job-form-section:nth-of-type(7) .input-combined {
    box-shadow: inset 3px 0 0 #a5b4fc;
}
.create-candidate-page .form-group input:not([type="checkbox"]):not([type="radio"]),
.create-candidate-page .form-group select,
.create-candidate-page .form-group textarea {
    border-color: #e2e8f0;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
/* Focus: border only, no extra outline */
.create-candidate-page .form-group input:focus,
.create-candidate-page .form-group select:focus,
.create-candidate-page .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    background: #fff;
}
.create-candidate-page .job-form-section .select-search-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color, #0066cc);
}
.create-candidate-page .form-group .select-search-input {
    border-color: #e2e8f0;
    background: transparent;
}
.create-candidate-page .form-group .select-search-wrap:not(.select-search-has-value) {
    background: #fff;
}
.create-candidate-page .form-group .select-search-input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
    background: #fff;
}
/* Filled state: tint when a value is present */
.create-candidate-page .form-group input.has-value:not([type="checkbox"]):not([type="radio"]),
.create-candidate-page .form-group textarea.has-value {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.create-candidate-page .form-group .select-search-wrap.select-search-has-value .select-search-input {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.create-candidate-page .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.create-candidate-page .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) .mobile-number-input,
.create-candidate-page .form-group .input-combined.mobile-combined-row:has(.mobile-number-input.has-value) .select-search-input {
    background: transparent;
}
/* Clear (x) button: reserve space */
.create-candidate-page .form-group .input-with-clear {
    position: relative;
    display: block;
    width: 100%;
}
.create-candidate-page .form-group .input-with-clear > input {
    padding-right: 2.25rem;
    box-sizing: border-box;
}
.create-candidate-page .form-group .input-with-clear > .input-combined {
    padding-right: 2.25rem;
    box-sizing: border-box;
}
.create-candidate-page .form-group .input-with-clear .input-clear-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #888;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}
.create-candidate-page .form-group .input-with-clear .input-clear-btn.visible {
    display: flex;
}
.create-candidate-page .form-group .input-with-clear .input-clear-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}

/* Create Job page: same layout and input styling as Create Candidate */
/* Create Job: title block – no stretch, compact spacing (remove unwanted gap) */
.create-job-page {
    margin-bottom: 0.75rem;
    min-height: 0;
    flex: none;
    padding-top: 0.5rem;
    padding-bottom: 0;
}
/* When create job content is in main, avoid main container min-height pushing content down */
main.container:has(.create-job-page) {
    min-height: 0;
}
.create-job-page .form-container {
    max-width: 1100px;
    margin-top: 0;
}
.create-job-page .form-group input:not([type="checkbox"]):not([type="radio"]),
.create-job-page .form-group select,
.create-job-page .form-group textarea {
    border-color: #e2e8f0;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.create-job-page .form-group input:focus,
.create-job-page .form-group select:focus,
.create-job-page .form-group textarea:focus {
    border-color: var(--primary-color, #0066cc);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.create-job-page .form-group .select-search-wrap:not(.select-search-has-value) {
    background: #fff;
}
.create-job-page .form-group .select-search-input {
    border-color: #e2e8f0;
    background: transparent;
}
.create-job-page .form-group .select-search-input:focus {
    border-color: var(--primary-color, #0066cc);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15);
}
.create-job-page .form-group input.has-value:not([type="checkbox"]):not([type="radio"]),
.create-job-page .form-group textarea.has-value {
    background: #f0f9ff;
    border-color: #bae6fd;
}
.create-job-page .form-group .select-search-wrap.select-search-has-value .select-search-input {
    background: #f0f9ff;
    border-color: #bae6fd;
}

/* Auto-generated / readonly fields: always gray background (overrides page-specific input styles) */
.form-group input.field-readonly,
.form-group select.field-readonly,
.form-group textarea.field-readonly {
    background: #e2e8f0;
    color: #64748b;
    cursor: not-allowed;
    border-color: #cbd5e1;
}

/* Inline check (e.g. Duplicate Check: email + phone on one line) */
.form-group-inline-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0;
}
.form-group-inline-check > label { flex: 0 0 auto; margin: 0; font-weight: 600; font-size: 0.9rem; }
.form-group-inline-check > input { flex: 1 1 180px; min-width: 0; }

/* Duplicate Check: one line */
.form-section-compact .card-body:has(.form-group-inline-check) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}
.form-section-compact .card-body:has(.form-group-inline-check) .check-result { width: 100%; order: 10; }

/* Duplicate Check: grid — row 1: labels, row 2: inputs + OR + button; wider row so email and mobile both have space */
.check-existing-form .check-existing-grid {
    display: grid;
    grid-template-columns: 1.5fr auto 1.5fr auto;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.75rem;
    align-items: start;
    margin-bottom: 0.35rem;
    max-width: 1000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}
.check-existing-form .check-existing-mobile-cell .select-search-country-wrap {
    z-index: 5;
}
.check-existing-form .check-existing-mobile-cell {
    min-width: 14rem;
}
.check-existing-form .check-existing-cell {
    min-width: 0;
}
.check-existing-form .check-existing-label-cell {
    align-self: end;
    padding-bottom: 0.15rem;
}
.check-existing-form .check-existing-label-cell label {
    display: block;
    margin: 0;
    font-weight: 600;
    font-size: 0.9rem;
}
.check-existing-form .check-existing-or-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.875rem;
}
.check-existing-form .check-existing-or {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.check-existing-form .check-existing-input-cell > input,
.check-existing-form .check-existing-input-cell .input-with-clear > input {
    width: 100%;
    min-width: 0;
    height: 2.875rem;
    box-sizing: border-box;
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 1.1875rem;
    line-height: 1.4;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: #fff;
}
/* Duplicate Check: allow copy & paste in both fields */
.check-existing-form #check_email,
.check-existing-form .check-existing-mobile-wrap .mobile-number-input {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}
.check-existing-form .check-existing-input-cell > input:focus,
.check-existing-form .check-existing-input-cell .input-with-clear > input:focus {
    outline: none;
    border-color: var(--primary-color, #0066cc);
}
.check-existing-form .check-existing-input-cell .field-error {
    font-size: 0.75rem;
    color: var(--danger-color);
    margin-top: 0.2rem;
}
/* Duplicate Check: clear (x) button – reserve space so content does not sit under the button */
.check-existing-form .input-with-clear {
    position: relative;
    display: block;
    width: 100%;
}
.check-existing-form .input-with-clear > input {
    padding-right: 2.25rem;
    box-sizing: border-box;
}
.check-existing-form .input-with-clear .check-existing-mobile-wrap {
    padding-right: 3rem;
    box-sizing: border-box;
}
.check-existing-form .input-with-clear .input-clear-btn {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #888;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}
.check-existing-form .input-with-clear .input-clear-btn.visible {
    display: flex;
}
.check-existing-form .input-with-clear .input-clear-btn:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.check-existing-form .check-existing-btn-cell {
    position: relative;
    z-index: 20;
}
.check-existing-form .check-existing-btn-cell .btn {
    height: 2.875rem;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
}
/* Duplicate Check: mobile row — height, alignment, width, outline */
.check-existing-form .check-existing-mobile-wrap.input-combined.mobile-combined-row {
    width: 100%;
    min-width: 0;
    height: 2.875rem;
    min-height: 2.875rem;
    box-sizing: border-box;
    align-items: stretch;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: #fff;
}
.check-existing-form .check-existing-mobile-wrap:focus-within {
    outline: none;
    border-color: var(--primary-color, #0066cc);
}
.check-existing-form .check-existing-mobile-wrap .mobile-value-with-symbol {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    min-height: 0;
    gap: 0.25rem;
    padding: 0 0.5rem 0 0.35rem;
    border-radius: 7px;
    background: transparent;
}
.check-existing-form .check-existing-mobile-wrap .mobile-value-with-symbol .select-search-country-wrap {
    border-radius: 7px 0 0 7px;
}
.check-existing-form .check-existing-mobile-wrap .mobile-number-input {
    border-radius: 0 7px 7px 0;
}
.check-existing-form .check-existing-mobile-wrap .mobile-country-select {
    flex: 0 0 auto;
    width: 3rem;
    min-width: 2.75rem;
    height: 100%;
    min-height: 0;
    padding: 0 0.35rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    appearance: auto;
    cursor: pointer;
    color: var(--text-primary);
}
.check-existing-form .check-existing-mobile-wrap .mobile-country-select:focus {
    outline: none;
}
.check-existing-form .check-existing-mobile-wrap .mobile-number-input {
    flex: 1 1 0;
    min-width: 11ch;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0 1.25rem 0 0.75rem;
    border: none;
    background: transparent;
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.4;
    box-sizing: border-box;
}
.check-existing-form .input-with-clear .check-existing-mobile-wrap .mobile-number-input {
    padding-right: 3.25rem;
    overflow: visible;
}
/* Duplicate Check: mobile input width for ~10 digits */
#check_phone.mobile-number-input {
    min-width: 11ch;
    width: 100%;
}
.check-existing-form .check-existing-mobile-wrap .mobile-value-with-symbol {
    min-width: 0;
    overflow: visible;
}
.check-existing-form .check-existing-mobile-wrap .mobile-number-input::placeholder {
    color: var(--placeholder-color, #9ca3af);
}
.check-existing-form .check-existing-mobile-wrap .mobile-number-input:focus {
    outline: none;
}
.check-existing-form .check-result { margin-top: 0.75rem; margin-bottom: 0; }
/* Success message: one row, prominent, centered */
.check-existing-form .check-result.check-result-success {
    display: block;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--success-color);
    background: rgba(0, 133, 77, 0.08);
    border: 1px solid rgba(0, 133, 77, 0.25);
    border-radius: 10px;
    white-space: nowrap;
    overflow-x: auto;
}
/* "Number exists" message: one row, same prominence */
.check-existing-form .check-result.check-result-exists {
    display: block;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 0;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    color: var(--primary-color, #0066cc);
    background: rgba(0, 102, 204, 0.06);
    border: 1px solid rgba(0, 102, 204, 0.2);
    border-radius: 10px;
    white-space: nowrap;
    overflow-x: auto;
}
/* Duplicate Check: Search + Clear buttons — modern, side by side */
.check-existing-form .check-existing-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 20;
}
.check-existing-form .check-existing-btn-cell .btn-modern {
    height: 2.875rem;
    min-height: 2.875rem;
    padding: 0 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
    pointer-events: auto;
}
.check-existing-form .check-existing-btn-cell .btn-modern.btn-primary {
    background: var(--primary-color, #0066cc);
    border: 1px solid var(--primary-color, #0066cc);
    color: #fff;
}
.check-existing-form .check-existing-btn-cell .btn-modern.btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.25);
}
.check-existing-form .check-existing-btn-cell .btn-modern.btn-soft {
    background: #fff;
    border: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary);
}
.check-existing-form .check-existing-btn-cell .btn-modern.btn-soft:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
/* Found record card: modern, clean layout */
.found-record-card {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border-color, #e2e8f0);
    background: var(--surface, #fff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.found-record-card-body {
    padding: 2rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
    min-height: 6rem;
}
.found-record-info {
    flex: 1 1 18rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.found-record-row-inline {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0.5rem;
    min-height: 1.5em;
}
.found-record-row-inline .found-record-label {
    flex: 0 0 auto;
    min-width: 6.5rem;
}
.found-record-label {
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, #64748b);
}
.found-record-value {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-primary);
    flex: 1 1 auto;
    min-width: 0;
}
.found-record-name {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-primary);
}
.found-record-id {
    font-size: 0.9375rem;
    color: var(--text-secondary, #64748b);
    font-family: var(--font-mono, ui-monospace, monospace);
}
.found-record-skills {
    color: var(--text-secondary, #64748b);
    word-wrap: break-word;
}
.found-record-meta {
    margin-top: 0.15rem;
}
.found-record-meta .found-record-value {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}
.found-record-date {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
}
.found-record-msg {
    margin: 0 0 1rem 0;
    font-size: 1.0625rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.found-record-actions {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.btn-view-candidate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
    background: var(--primary-color, #0066cc);
    border: none;
    color: #fff !important;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.2);
}
.btn-view-candidate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 102, 204, 0.35);
    color: #fff !important;
}
.found-record-actions .btn-soft {
    min-height: 3.25rem;
    padding: 0.625rem 1.5rem;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.found-record-actions .btn-soft:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}
@media (max-width: 640px) {
    .check-existing-form .check-existing-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto auto;
    }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(1) { grid-row: 1; grid-column: 1; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(2) { display: none; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(3) { grid-row: 3; grid-column: 1; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(4) { display: none; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(5) { grid-row: 2; grid-column: 1; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(6) { grid-row: 3; grid-column: 1; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(6) .check-existing-or { margin: 0.25rem 0; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(7) { grid-row: 5; grid-column: 1; }
    .check-existing-form .check-existing-grid .check-existing-cell:nth-child(8) { grid-row: 6; grid-column: 1; }
}

/* Duplicate Check: center the form and row; modern card */
#check_existing_card {
    overflow: visible;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
#check_existing_card .card-body { display: flex; justify-content: center; overflow: visible; }
.check-existing-form { width: 100%; max-width: 1000px; margin: 0 auto; overflow: visible; }
.check-existing-form .check-existing-grid { overflow: visible; }
.check-existing-form .check-existing-cell { overflow: visible; }
.check-existing-form .check-existing-row { justify-content: center; }

/* Inline validation */
.field-error { display: block; font-size: 0.75rem; color: var(--danger-color); margin-top: 0.2rem; }
.field-caution { display: block; font-size: 0.8rem; color: var(--warning-color, #e67e00); margin-top: 0.35rem; font-weight: 500; }
.field-hint { font-size: 0.8rem; color: #64748b; margin-top: 0.35rem; }
.preferred-locations-hint { display: none; margin-top: 0.35rem; font-size: 0.8rem; color: #64748b; }
.preferred-locations-hint.visible { display: block; }
.form-group input.field-invalid { border-color: var(--danger-color); }
/* Reserve space for error so row height stays consistent when tabbing (no outline/alignment mess) */
.create-candidate-page .form-group .field-error,
.job-form-layout .form-group .field-error {
    min-height: 1.25rem;
}
.create-candidate-page .job-form-section .form-row,
.create-candidate-page .job-form-section .form-row-3,
.job-form-layout .job-form-section .form-row,
.job-form-layout .job-form-section .form-row-3 {
    align-items: start;
}

.job-form-layout .job-form-section .form-row-3.align-bottom {
    align-items: flex-end;
}
.create-candidate-page .form-group,
.job-form-layout .form-group {
    overflow: visible;
}

/* Positions: two-card layout, modern UI – search left, attached right */
.form-group-positions-fullwidth { width: 100%; max-width: 100%; grid-column: 1 / -1; }
.positions-two-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    overflow: visible;
}
.positions-card {
    flex: 1 1 300px;
    min-width: 0;
    max-width: 100%;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.positions-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.05); }
.positions-card-search {
    border-left: 4px solid var(--primary-color, #2563eb);
    border-radius: 14px 0 0 14px;
}
.positions-card-attached {
    border-left: 4px solid #7c3aed;
    border-radius: 14px 0 0 14px;
}
.positions-card-title {
    margin: 0;
    padding: 0.85rem 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, transparent 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.positions-card-inner {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 220px;
    overflow: hidden;
}
.positions-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 1rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.positions-search-wrap:focus-within {
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.positions-search-icon {
    flex-shrink: 0;
    color: var(--text-muted, #94a3b8);
    display: inline-flex;
    opacity: 0.85;
}
.positions-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    padding: 0.4rem 0;
    font-size: 0.9375rem;
    font-weight: 500;
    background: transparent;
    color: var(--text-primary);
}
.positions-search-input::placeholder { color: var(--text-muted, #94a3b8); }
.positions-search-input:focus { outline: none; }
.positions-list {
    flex: 1;
    min-height: 200px;
    max-height: 340px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 10px;
    background: #fff;
    scrollbar-width: thin;
}
.positions-list::-webkit-scrollbar { width: 8px; height: 8px; }
.positions-list::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
.positions-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
.positions-list::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.positions-search-results .positions-row {
    cursor: pointer;
    border-radius: 8px;
    margin: 0 2px;
    transition: background 0.15s ease;
}
.positions-search-results .positions-row:nth-child(4n+1) {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
}
.positions-search-results .positions-row:nth-child(4n+2) {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.03) 100%);
}
.positions-search-results .positions-row:nth-child(4n+3) {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(5, 150, 105, 0.03) 100%);
}
.positions-search-results .positions-row:nth-child(4n+4) {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.03) 100%);
}
.positions-search-results .positions-row:nth-child(4n+1):hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0.06) 100%);
}
.positions-search-results .positions-row:nth-child(4n+2):hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0.06) 100%);
}
.positions-search-results .positions-row:nth-child(4n+3):hover {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.14) 0%, rgba(5, 150, 105, 0.06) 100%);
}
.positions-search-results .positions-row:nth-child(4n+4):hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.14) 0%, rgba(217, 119, 6, 0.06) 100%);
}
.positions-search-results .positions-row:active { background: rgba(37, 99, 235, 0.12); }
.positions-attached-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.positions-attached-list .positions-row {
    flex-shrink: 0;
    padding: 0.85rem 3rem 0.85rem 1rem;
    position: relative;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, background 0.15s ease;
}
/* Alternating light fill; hover = darker */
.positions-attached-list .positions-row:nth-child(4n+1) {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.03) 100%);
}
.positions-attached-list .positions-row:nth-child(4n+2) {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.03) 100%);
}
.positions-attached-list .positions-row:nth-child(4n+3) {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.08) 0%, rgba(5, 150, 105, 0.03) 100%);
}
.positions-attached-list .positions-row:nth-child(4n+4) {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.08) 0%, rgba(217, 119, 6, 0.03) 100%);
}
.positions-attached-list .positions-row:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.positions-attached-list .positions-row:nth-child(4n+1):hover {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(37, 99, 235, 0.06) 100%);
}
.positions-attached-list .positions-row:nth-child(4n+2):hover {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.14) 0%, rgba(124, 58, 237, 0.06) 100%);
}
.positions-attached-list .positions-row:nth-child(4n+3):hover {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.14) 0%, rgba(5, 150, 105, 0.06) 100%);
}
.positions-attached-list .positions-row:nth-child(4n+4):hover {
    background: linear-gradient(135deg, rgba(217, 119, 6, 0.14) 0%, rgba(217, 119, 6, 0.06) 100%);
}
.positions-attached-list .positions-row { border-bottom: none; }
.positions-row {
    padding: 0.65rem 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease;
}
.positions-search-results .positions-row:last-child { border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
.positions-row-text {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-weight: 500;
    color: var(--text-primary);
}
.positions-attached-list .positions-row-text {
    font-weight: 500;
    font-size: 0.90625rem;
}
.positions-row-remove {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-muted, #64748b);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
}
.positions-row-remove:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--danger-color, #dc2626);
}
.positions-row-remove:active { transform: translateY(-50%) scale(0.95); }
.positions-empty-attached {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-muted, #64748b);
    padding: 1.5rem 1rem;
    text-align: center;
    border-radius: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.1);
    background: rgba(248, 250, 252, 0.8);
}
.positions-empty-attached.hide { display: none !important; }
.positions-hidden-inputs { display: none; }

/* Create candidate: duplicate / validation error — same screen, bold, modern UI */
.create-candidate-error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 10px;
    color: var(--danger-color, #b91c1c);
    font-size: 1rem;
}
.create-candidate-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--danger-color, #b91c1c);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}
.create-candidate-error-text {
    font-weight: 700;
}
.hide { display: none !important; }

/* Table */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table thead {
    background: var(--background);
}

.table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}
.th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.th-sortable:hover {
    color: var(--primary-color);
}
.th-sortable .sort-indicator {
    margin-left: 0.25rem;
    font-size: 0.7em;
    opacity: 0.6;
}
.th-sortable.sort-asc .sort-indicator::after { content: ' ▲'; }
.th-sortable.sort-desc .sort-indicator::after { content: ' ▼'; }
.th-sortable .sort-indicator::after { content: ' ⇅'; }
.th-sortable.sort-asc .sort-indicator::after,
.th-sortable.sort-desc .sort-indicator::after { opacity: 1; }

.table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.table tbody tr:hover {
    background: var(--background);
}

/* Job detail: page inner wrapper – same left/right padding as main .container for header + panels */
.job-detail-page-inner {
    padding-left: 2rem;
    padding-right: 2rem;
}
@media (max-width: 768px) {
    .job-detail-page-inner {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}
main.container:has(.job-detail-page-inner) {
    padding-left: 0;
    padding-right: 0;
}
/* Job detail: sticky header (frozen above panels). Stick below topbar so it doesn’t overflow logo/search. */
.job-detail-header-wrap {
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--surface, #fff);
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.2s ease;
}
body:has(.topbar) .job-detail-header-wrap {
    top: calc(65px + 5px);
}
.job-detail-header-inner {
    padding: 0.65rem 1.2rem 0.75rem;
    max-width: 100%;
}
.job-detail-back-link,
.job-hero-meta-row {
    transition: opacity 0.22s ease;
}
.job-detail-header-wrap.job-detail-header-scrolled .job-detail-back-link {
    opacity: 0.72;
}
.job-detail-header-wrap.job-detail-header-scrolled .job-hero-meta-row {
    opacity: 0.92;
}
.job-detail-back-link {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    text-decoration: none;
    margin-bottom: 0.4rem;
    padding: 0.15rem 0;
    transition: color 0.2s;
}
.job-detail-back-link:hover {
    color: var(--primary-color, #0ea5e9);
}
/* 15px on all sides for left content: top via wrap padding above; left/bottom/right via margin; right also via padding so it’s visible */
/* Title and actions row: actions at extreme right */
.job-detail-title-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-width: 0;
}
.job-detail-title-actions-row .job-detail-title-row {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.job-detail-title-actions-row .job-detail-header-actions {
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 0;
}
.job-detail-title-text {
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text-primary, #0f172a);
}
/* Compact: reduce size, hide back button, keep title and actions visible */
.job-detail-header-wrap.job-detail-header-compact {
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.job-detail-header-wrap.job-detail-header-compact .job-detail-header-inner {
    padding: 0.75rem 1.5rem 0.875rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-detail-back-link {
    display: none;
}
.job-detail-header-wrap.job-detail-header-compact .job-detail-title-row {
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-detail-title-text {
    font-size: 1.35rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-hero-meta {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-hero-meta dt {
    font-size: 0.6875rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-hero-meta dd {
    font-size: 0.85rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-detail-hot-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-detail-header-actions {
    gap: 0.5rem;
}
.job-detail-header-wrap.job-detail-header-compact .job-detail-btn {
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
}

/* Job edit page: sticky header with modern UI (gradient like create-job header) */
.job-edit-header-wrap {
    position: sticky;
    top: 0;
    z-index: 200;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 35%, #e9e5ff 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-left: 4px solid #7c3aed;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
    transition: box-shadow 0.2s ease, margin-bottom 0.2s ease;
}
body:has(.topbar) .job-edit-header-wrap {
    top: calc(65px + 5px);
}
.job-edit-header-inner {
    padding: 1rem 1.5rem 1.25rem;
    max-width: 100%;
}
.job-edit-header-wrap .page-header.create-job-page-header {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-left: none;
    border-radius: 0;
    box-shadow: none;
}
.job-edit-header-wrap .create-job-page-header h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #5b21b6;
}
.job-edit-header-wrap .create-job-page-header .page-header-desc {
    color: #6d28d9;
    opacity: 0.95;
}
.job-edit-header-wrap.job-edit-header-compact {
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
}
.job-edit-header-wrap.job-edit-header-compact .job-edit-header-inner {
    padding: 0.75rem 1.5rem 0.875rem;
}
.job-edit-header-wrap.job-edit-header-compact .job-edit-back-link {
    display: none;
}
.job-edit-header-wrap.job-edit-header-compact .create-job-page-header h1 {
    font-size: 1.35rem;
}
.job-edit-header-wrap.job-edit-header-compact .page-header-desc {
    display: none;
}

/* Detail Layout */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 2rem;
}

.detail-main {
    display: flex;
    flex-direction: column;
}

.detail-sidebar {
    display: flex;
    flex-direction: column;
}

/* Info Grid */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.info-item label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.info-item p {
    color: var(--text-primary);
}

.candidate-info-body { padding: 1rem 1.25rem; }
.candidate-info-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.5rem 1.5rem;
    margin: 0;
    font-size: 0.95rem;
}
.candidate-info-dl dt {
    margin: 0;
    font-weight: 600;
    color: var(--text-secondary);
}
.candidate-info-dl dd {
    margin: 0;
    color: var(--text-primary);
}
.candidate-info-dl dd + dt { margin-top: 0.35rem; }
.candidate-notes { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.candidate-notes p { margin: 0.35rem 0 0; color: var(--text-primary); }
.badge-status-tag { padding: 0.25rem 0.6rem; border-radius: 6px; font-weight: 500; }
.badge-status-tag[data-status] { background-color: var(--secondary-color); color: #fff; border: none; }

.assign-results { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius); margin-top: 0.25rem; background: var(--surface); }
.assign-result-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border-color); font-size: 0.9rem; }
.assign-result-row:last-child { border-bottom: none; }
.assigned-item { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; gap: 0.5rem; }
.assigned-list .assigned-item form { margin-left: auto; }

/* Job detail: aligned fields – clean, modern */
.job-detail-fields-card .card-body {
    padding: 0.9rem 1.25rem;
}
.job-detail-section { margin-bottom: 1rem; }
.job-detail-section:last-child { margin-bottom: 0; }
.job-detail-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-bottom: 0.85rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}
.job-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem 1.5rem;
}
.job-detail-grid-single-row {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
    .job-detail-grid-single-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .job-detail-grid-single-row { grid-template-columns: 1fr; }
}
.job-detail-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.job-detail-field .label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: none;
}
.job-detail-field .value {
    font-size: 0.9375rem;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

/* Job detail: "styled" section – base; accent color per sub-section */
.job-detail-section-styled {
    padding: 0.9rem 1.1rem 0.9rem 1.25rem;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    margin-bottom: 0.85rem;
    border-radius: 12px;
    border-left: 4px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.job-detail-section-accent-basic,
.job-detail-section-accent-role,
.job-detail-section-accent-budget {
    background: transparent;
}
.job-detail-section-styled .job-detail-section-title {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.6rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    font-weight: 700;
}
.job-detail-section-styled .job-detail-grid {
    gap: 0.65rem;
}
.job-detail-section-styled .job-detail-field {
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left: 3px solid rgba(220, 38, 38, 0.35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, border-left-color 0.2s ease;
}
.job-detail-section-styled .job-detail-field:hover {
    border-color: rgba(0, 102, 204, 0.2);
    border-left-color: rgba(220, 38, 38, 0.6);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.job-detail-section-styled .job-detail-field .label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.7);
}
.job-detail-section-styled .job-detail-field .value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

/* Job detail: styled cards (whole page – left accent + subtle bg) */
.job-detail-card-styled {
    border-radius: 14px;
    border-left: 4px solid var(--border-color);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.job-detail-card-styled > .card-body:first-of-type,
.job-detail-card-styled .card-body {
    background: transparent;
}
.job-detail-card-styled .card-header h3 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    font-weight: 700;
}
.job-skills-card.job-detail-card-styled .job-skills-label {
    display: block;
    margin-bottom: 0.5rem;
}
.job-skills-card.job-detail-card-styled .job-skills-label-line1 {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}
.job-skills-card.job-detail-card-styled .job-skills-label-line2 {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.6);
    margin-top: 0.15rem;
}
.job-detail-card-styled .timeline-item strong {
    display: inline-block;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.7);
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Job detail: Special Notes card – same style as Job Description/Requirements */
.job-detail-special-notes-card.job-detail-card-styled {
    border-left-color: #a5b4fc;
}
.job-detail-special-notes-card .job-detail-special-notes-body.rich-text-content {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--text-primary);
}
.job-detail-special-notes-card .job-detail-special-notes-body.rich-text-content p {
    margin: 0 0 0.5rem 0;
}
.job-detail-special-notes-card .job-detail-special-notes-body.rich-text-content p:last-child {
    margin-bottom: 0;
}

/* Job detail: recruiter search strings (Naukri / LinkedIn X-Ray) – full width, modern */
.job-detail-search-strings {
    margin-top: 1.75rem;
    margin-bottom: 1.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    padding: 1.25rem 1.25rem 1.5rem;
    background: linear-gradient(165deg, #f0f9ff 0%, #e0f2fe 35%, #fefce8 100%);
    border-radius: 16px;
    border: 1px solid rgba(14, 165, 233, 0.15);
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.08);
}
.job-detail-search-strings .job-search-strings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.job-detail-search-strings .job-search-strings-head-text {
    flex: 1;
    min-width: 200px;
}
.job-detail-search-strings .job-detail-section-title {
    margin-bottom: 0.35rem;
    color: #0c4a6e;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.job-detail-search-strings .job-detail-section-desc {
    font-size: 0.8125rem;
    color: #475569;
    margin: 0;
    line-height: 1.45;
}
.job-search-strings-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.job-search-strings-actions .btn { min-width: 0; }
.job-search-strings-status {
    font-size: 0.8125rem;
    margin-left: 0.25rem;
    min-height: 1.25rem;
    display: inline-flex;
    align-items: center;
}
.job-search-strings-status-loading {
    color: #0ea5e9;
    font-weight: 500;
}
.job-search-strings-status-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border: 2px solid #0ea5e9;
    border-top-color: transparent;
    border-radius: 50%;
    animation: job-search-spin 0.7s linear infinite;
}
.job-search-strings-status-success {
    color: #059669;
    font-weight: 600;
}
.job-search-strings-status-success::before {
    content: '✓ ';
}
.job-search-strings-status-error {
    color: #dc2626;
    font-weight: 500;
}
@keyframes job-search-spin {
    to { transform: rotate(360deg); }
}
.job-search-strings-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    width: 100%;
}
@media (max-width: 768px) {
    .job-search-strings-cards { grid-template-columns: 1fr; }
    .job-detail-search-strings { margin-left: 0; margin-right: 0; }
}
.job-search-string-card {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.job-search-string-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.job-search-string-card-naukri {
    border-left: 4px solid #0d9488;
    background: linear-gradient(to bottom, #f0fdfa 0%, #ffffff 120px);
}
.job-search-string-card-naukri .job-search-string-card-header {
    background: rgba(13, 148, 136, 0.06);
    border-bottom: 1px solid rgba(13, 148, 136, 0.2);
}
.job-search-string-card-naukri .job-search-string-card-title { color: #0f766e; }
.job-search-string-card-naukri .copy-btn:hover { background: rgba(13, 148, 136, 0.15); color: #0d9488; }
.job-search-string-card-xray {
    border-left: 4px solid #2563eb;
    background: linear-gradient(to bottom, #eff6ff 0%, #ffffff 120px);
}
.job-search-string-card-xray .job-search-string-card-header {
    background: rgba(37, 99, 235, 0.06);
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
}
.job-search-string-card-xray .job-search-string-card-title { color: #1d4ed8; }
.job-search-string-card-xray .copy-btn:hover { background: rgba(37, 99, 235, 0.15); color: #2563eb; }
.job-search-string-card .job-search-string-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.1rem;
}
.job-search-string-card .job-search-string-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.job-search-string-card .card-body {
    padding: 1rem 1.1rem;
}
.job-search-output {
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 8rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}
.job-search-string-card-naukri .job-search-output {
    border-color: rgba(13, 148, 136, 0.25);
}
.job-search-string-card-xray .job-search-output {
    border-color: rgba(37, 99, 235, 0.25);
}
.job-search-strings-save-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(14, 165, 233, 0.2);
}
.job-search-strings-save-row .btn {
    min-width: 0;
}
.job-search-strings-save-hint {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
}

/* Job detail: skills required (horizontal above description) */
.job-skills-card .card-body {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1.25rem;
}
.job-skills-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}
.job-skills-label-line1 { display: block; font-size: 1rem; font-weight: 700; }
.job-skills-label-line2 { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.job-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.job-skill-tag {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    font-size: 0.8125rem;
    border-radius: 6px;
    background: var(--background);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-weight: 500;
}

/* Job detail: Assign to dropdowns */
.job-assign-help { font-size: 0.9rem; margin-bottom: 0.75rem; }
.job-assign-dropdowns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
/* Inline dropdown row: same standard as header dropdowns (compact height, consistent radius) */
.job-assign-dropdowns .form-control {
    min-width: 120px;
    height: 2.25rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.875rem;
}
.job-assign-dropdowns select:first-of-type { max-width: 100px; }

/* Job detail: hero meta – professional info bar (dl/dt/dd), all in one row */
.job-hero-meta-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.45rem;
}
.job-hero-meta-row .job-hero-meta {
    margin: 0;
}
.job-hero-meta-actions {
    display: flex;
    align-items: center;
    margin-left: auto;
}
.job-hero-meta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: 0;
    margin: 0.45rem 0 0;
    padding: 0.45rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    width: fit-content;
    max-width: 100%;
}
.job-hero-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0 0.4rem;
    border-left: 1px solid var(--border-color);
    text-align: center;
}
.job-hero-meta-item:first-child {
    border-left: none;
    padding-left: 0;
    padding-right: 0.55rem;
}
.job-hero-meta dt {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    text-align: center;
}
.job-hero-meta dd {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--primary-color);
    text-align: center;
}
.job-hero-meta-loop-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.job-hero-meta-loop-link:hover {
    text-decoration: underline;
}
@media (max-width: 640px) {
    .job-hero-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem 0;
    }
    .job-hero-meta {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .job-hero-meta-item:nth-child(odd) { border-left: none; padding-left: 0; }
    .job-hero-meta-item { padding-right: 0; }
}

/* Job detail: Candidates filter form (standard) */
/* Job detail: Candidates header – title left, search + filters right (same line) */
.job-candidates-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}
.job-candidates-header h3 { margin: 0; }
.job-candidates-header .job-candidates-filter-form { margin: 0; }
.job-candidates-header-right {
    display: flex;
    align-items: center;
}
.job-candidates-search-wrap {
    position: relative;
    display: inline-block;
}
.job-candidates-search-wrap .job-candidates-search {
    width: 240px;
    max-width: 100%;
    height: 2rem;
    padding: 0.35rem 2rem 0.35rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
}
.job-candidates-search-wrap .job-candidates-search-clear {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
}
.job-candidates-search-wrap.job-candidates-search-has-text .job-candidates-search-clear {
    display: flex;
}
.job-candidates-search-wrap .job-candidates-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.job-candidates-search-wrap .job-candidates-search-clear svg { display: block; }

/* Job detail: Candidates filters row – just above table header */
.job-candidates-filters-row {
    margin-bottom: 0.75rem;
}
.job-candidates-filter-form-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.job-candidates-filter-form-inline .form-control-sm {
    height: 2rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    min-width: 120px;
}

/* Job detail: Candidates footer – left: Per page + Showing; right: Prev/Next */
.job-candidates-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}
.job-candidates-footer-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
}
.job-candidates-footer-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.job-candidates-footer-right .pagination-pages { font-size: 0.9rem; color: var(--text-secondary); }
.job-candidates-perpage {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.job-candidates-perpage label { font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); }
.job-candidates-perpage .form-control-sm {
    height: 2rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.875rem;
    min-width: 70px;
}
.job-candidates-footer .pagination-info { font-size: 0.9rem; color: var(--text-secondary); }
.job-candidates-footer .btn.disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* Job detail: Candidates section – modern UI (card, table, badge) */
.job-candidates-card-modern .card-header {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-color);
    padding: 1rem 1.25rem 1.125rem;
}
.job-candidates-card-modern .job-candidates-title-modern {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-transform: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.job-candidates-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--primary-color);
    background: rgba(0, 102, 204, 0.12);
    border-radius: 999px;
    border: 1px solid rgba(0, 102, 204, 0.2);
}
.job-candidates-card-modern .card-body {
    padding: 1.25rem 1.5rem;
}
.job-candidates-card-modern .job-candidates-filters-row {
    margin-bottom: 1rem;
}
.job-candidates-card-modern .job-candidates-table-wrap {
    border-radius: 10px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.job-candidates-card-modern .job-candidates-table-modern {
    margin: 0;
    border: none;
}
.job-candidates-card-modern .job-candidates-table-modern thead {
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}
.job-candidates-card-modern .job-candidates-table-modern thead th {
    padding: 0.75rem 1rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border: none;
    border-bottom: 1px solid var(--border-color);
}
.job-candidates-card-modern .job-candidates-table-modern thead th:first-child {
    padding-left: 1.25rem;
}
.job-candidates-card-modern .job-candidates-table-modern thead th:last-child {
    padding-right: 1.25rem;
}
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern {
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern:nth-child(even) {
    background: #fafbfc;
}
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern:hover {
    background: #f1f5f9;
}
.job-candidates-card-modern .job-candidates-table-modern tbody td {
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    border: none;
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
}
.job-candidates-card-modern .job-candidates-table-modern tbody tr:last-child td {
    border-bottom: none;
}
.job-candidates-card-modern .job-candidates-table-modern tbody td:first-child {
    padding-left: 1.25rem;
    border-left: 3px solid var(--border-color);
}
/* Different left border colors by row (cycle 4 colors) */
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern:nth-child(4n+1) td:first-child { border-left-color: #0066cc; }
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern:nth-child(4n+2) td:first-child { border-left-color: #0d9488; }
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern:nth-child(4n+3) td:first-child { border-left-color: #7c3aed; }
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern:nth-child(4n+4) td:first-child { border-left-color: #ea580c; }
.job-candidates-card-modern .job-candidates-table-modern tbody tr.job-candidate-row-modern:hover td:first-child {
    border-left-width: 4px;
}
.job-candidates-card-modern .job-candidates-table-modern tbody td:last-child {
    padding-right: 1.25rem;
}
.job-candidates-card-modern .job-candidates-table-modern .job-candidate-name-link,
.job-candidates-card-modern .job-candidates-table-modern .link-strong {
    font-weight: 600;
    color: var(--primary-color);
}
.job-candidates-card-modern .job-candidates-table-modern .job-candidate-name-link:hover,
.job-candidates-card-modern .job-candidates-table-modern .link-strong:hover {
    text-decoration: underline;
}
.job-candidates-card-modern .job-candidates-table-modern .job-candidates-cell-email {
    color: var(--text-primary);
    font-size: 0.875rem;
}
.job-candidates-card-modern .job-candidates-table-modern .job-candidates-cell-mobile {
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.job-candidates-card-modern .job-candidates-table-modern .job-candidates-cell-experience {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.9375rem;
}
.job-candidates-card-modern .job-candidates-table-modern .job-candidate-stage-badge {
    display: inline-block;
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid transparent;
    letter-spacing: 0.02em;
}
.job-candidates-card-modern .job-candidates-table-modern .job-candidates-cell-applied {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    white-space: nowrap;
}
.job-candidates-card-modern .job-candidates-footer {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-color);
}

/* Job detail: Candidates table – simple sort on header click (no refresh) */
.th-sort {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.th-sort:hover { color: var(--primary-color); }
.th-sort:focus { outline: 1px dotted var(--primary-color); outline-offset: 2px; }
.th-sort .sort-indicator { font-weight: bold; color: var(--primary-color); }

/* Job detail: Staffing Status – tile grid + progress */
.staffing-status-body {
    padding: 1rem 1.25rem;
}
.staffing-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.staffing-stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.staffing-stat-tile:hover {
    border-color: rgba(0, 102, 204, 0.3);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    text-decoration: none;
}
.staffing-stat-tile .staffing-stat-label {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.6);
    text-align: center;
}
.staffing-stat-tile .staffing-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}
.staffing-stat-tile-highlight .staffing-stat-value {
    color: var(--primary-color);
}
.staffing-profiles-block {
    margin-bottom: 1.25rem;
}
.staffing-profiles-title {
    display: inline-block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin-bottom: 0.6rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(220, 38, 38, 0.6);
}
.staffing-profiles-group {
    margin-bottom: 1rem;
}
.staffing-profiles-group:last-child {
    margin-bottom: 0;
}
.staffing-profiles-group-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}
.staffing-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.6rem;
}
.staffing-profile-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--border-color);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.staffing-profile-tile:hover {
    border-color: rgba(0, 102, 204, 0.25);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}
.staffing-profile-tile .staffing-profile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
    text-align: center;
}
.staffing-profile-tile .staffing-profile-value {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
}
.staffing-progress-block {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}
.staffing-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}
.staffing-progress-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.staffing-progress-pct {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-color);
}
.staffing-progress-bar {
    height: 10px;
    border-radius: 5px;
}
@media (max-width: 600px) {
    .staffing-stats-grid { grid-template-columns: 1fr; }
}
.stat-value.stat-link {
    text-decoration: none;
    color: var(--primary-color);
}
.stat-value.stat-link:hover { text-decoration: underline; }
.stat-row-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.stat-status-name { font-size: 0.9rem; color: var(--text-primary); }
.stat-row-status .stat-value { font-size: 1.1rem; }

.position-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 0.5rem 0; border-bottom: 1px solid var(--border-color); gap: 0.5rem; }
.position-row:last-of-type { border-bottom: none; }
.form-inline-add-job { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

.status-search-wrap { position: relative; }
.status-inline-search { min-width: 200px; }
.status-dropdown { position: absolute; top: 100%; left: 0; right: 0; margin-top: 2px; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow-md); z-index: 50; }
.status-option { padding: 0.5rem 0.75rem; cursor: pointer; }
.status-option:hover { background: var(--background); }

/* ── Dropdown standard (app-wide) ─────────────────────────────────────────────
 * 1. Type and search; 2. Values overflow container; 3. Scroll when >10 items;
 * 4. Clear (x) when value selected. UI reverted to earlier look.
 */
.select-search-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
    overflow: visible;
}
select.select-search-native {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.select-search-input {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--text-primary);
}
.select-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
}
/* No value selected → no tint; gray only for placeholder text, not the whole input (so filter typing & any sync glitch stay readable). */
.select-search-wrap:not(.select-search-has-value) {
    background: #fff;
}
.select-search-wrap:not(.select-search-has-value) .select-search-input:placeholder-shown {
    color: var(--placeholder-color);
}
.select-search-wrap:not(.select-search-has-value) .select-search-input:not(:placeholder-shown) {
    color: var(--text-primary);
}
.select-search-wrap.select-search-has-value .select-search-input {
    color: var(--text-primary) !important;
}
.select-search-input::placeholder {
    color: var(--placeholder-color);
}
/* Clear (x) when value is selected */
.select-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #888;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
}
.select-search-clear:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.select-search-wrap.select-search-clearable .select-search-input {
    padding-right: 2.25rem;
}
.select-search-wrap.select-search-has-value .select-search-clear {
    display: flex;
}
/* Dropdown: overflow container, scroll when >10 items (max-height ~280px) */
.select-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: -1px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 100;
}
.select-search-dropdown.hide {
    display: none;
}
.select-search-option {
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    font-size: 0.75rem;
}
.select-search-option:hover,
.select-search-option.selected,
.select-search-option.highlight {
    background: var(--background);
}
.select-search-option.selected,
.select-search-option.highlight {
    font-weight: 500;
}
.select-search-option.highlight {
    background: rgba(0, 102, 204, 0.12);
}
.select-search-option-meta {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: normal;
}

/* Containers that hold select-search: allow dropdown to overflow */
.form-group:has(.select-search-wrap),
.card-body:has(.select-search-wrap),
.table-footer-pagination:has(.select-search-wrap),
.form-container:has(.select-search-wrap) {
    overflow: visible;
}

/* Combined input: prefix (e.g. dropdown) + value (e.g. text input) in one bordered unit */
.input-combined {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: visible;
    background: #fff;
}
.input-combined:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.input-combined-prefix {
    flex: 0 0 auto;
    min-width: 120px;
    max-width: 38%;
    background: #f5f5f5;
    border-right: 1px solid var(--border-color);
}
.input-combined-prefix .select-search-wrap {
    border: none;
    background: transparent;
}
.input-combined-prefix .select-search-input {
    border: none;
    background: transparent;
    padding: 0.5rem 0.75rem;
    min-height: 2.5rem;
}
.input-combined-prefix .select-search-input:focus {
    border: none;
    box-shadow: none;
}
.input-combined-prefix .select-search-dropdown {
    z-index: 200;
}

/* Budget type: standard select-search UI (type to search, x to clear); dropdown must overflow */
.job-form-section .form-group:has(.budget-combined-row),
.job-form-section .form-row-budget-wide {
    overflow: visible;
}
.budget-combined-row .input-combined-prefix.budget-type-wrap {
    overflow: visible;
}
.budget-combined-row .input-combined-prefix.budget-type-wrap .select-search-wrap {
    overflow: visible;
}
.budget-combined-row .input-combined-prefix.budget-type-wrap .select-search-dropdown {
    min-width: 100%;
    width: max-content;
    max-width: 320px;
    z-index: 300;
    overflow-y: auto;
}
.budget-combined-row .input-combined-prefix.budget-type-wrap .select-search-dropdown .select-search-option {
    white-space: nowrap;
    overflow: visible;
}

.input-combined-value {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    background: #fff;
}
.input-combined-value::placeholder {
    color: #9ca3af;
}
.input-combined-value:focus {
    outline: none;
}

/* Budget: Type + symbol + value in one row; full width so right half-circle aligns with end of field */
.budget-combined-row {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    overflow: visible;
}
.budget-combined-row .input-combined-prefix.budget-type-wrap {
    flex: 1 1 auto;
    min-width: 100px;
    background: #e8e8e8;
    border-radius: 999px 8px 8px 999px;
}
.budget-combined-row .budget-type-select {
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: none;
    border-right: 1px solid var(--border-color);
    border-radius: 0;
    font-size: 0.9375rem;
    background: transparent;
    appearance: auto;
    cursor: pointer;
}
.budget-value-with-symbol {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.25rem;
    padding: 0 0.75rem 0 0.5rem;
    border: none;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}
.budget-value-with-symbol .budget-currency-select {
    flex: 0 0 auto;
    width: 2.75rem;
    min-width: 2.75rem;
    padding: 0.4rem 0.2rem;
    border: none;
    border-radius: 0;
    font-size: 1.1rem;
    font-weight: 600;
    background: transparent;
    text-align: center;
    appearance: auto;
    cursor: pointer;
}
.budget-value-with-symbol .budget-currency-select:focus {
    outline: none;
}
.budget-value-with-symbol input {
    flex: 1 1 0;
    min-width: 80px;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
}
.budget-value-with-symbol input:focus {
    outline: none;
}
.job-form-section .budget-value-with-symbol {
    font-size: 0.9375rem;
}
.job-form-section .budget-value-with-symbol input::placeholder {
    color: var(--placeholder-color);
}
.budget-words {
    margin: 0.4rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
    letter-spacing: 0.02em;
}
/* Budget row: pill fills cell; no extra left padding so both half-circles align with outer pill */
.job-form-section .form-group .input-combined.budget-combined-row {
    box-sizing: border-box;
}
.job-form-layout .job-form-section:nth-of-type(3) .input-combined.budget-combined-row {
    padding-left: 0;
}

/* Mobile (country code + 10 digits) – same layout as budget (currency symbol + value) */
.mobile-combined-row {
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
}
.mobile-value-with-symbol {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.5rem;
    padding: 0 0.75rem 0 0.5rem;
    border: none;
    background: #fff;
    border-radius: 0;
    overflow: hidden;
}
.mobile-value-with-symbol .mobile-country-select {
    flex: 0 0 auto;
    min-width: 4rem;
    width: 4.25rem;
    max-width: 5rem;
    padding: 0.4rem 0.5rem;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    text-align: center;
    appearance: auto;
    cursor: pointer;
}
.mobile-value-with-symbol .mobile-country-select:focus {
    outline: none;
}
/* Country code select-search: type-and-select, enough space so value isn't sunk; dropdown overflows */
/* Country wrap: minimal space after +91, across all pages */
.mobile-value-with-symbol .select-search-country-wrap {
    flex: 0 0 auto;
    width: 4rem;
    min-width: 3.75rem;
    max-width: 4rem;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}
.mobile-value-with-symbol .select-search-country-wrap .select-search-input {
    padding: 0.4rem 0.35rem;
    border: none;
    background: transparent;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    cursor: text;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mobile-value-with-symbol .select-search-country-wrap .select-search-input:focus {
    outline: none;
    box-shadow: none;
}
.mobile-value-with-symbol .select-search-country-wrap {
    position: relative;
    z-index: 1;
}
.mobile-value-with-symbol .select-search-country-wrap .select-search-clear {
    z-index: 2;
    pointer-events: auto;
}
.mobile-value-with-symbol .select-search-country-wrap .select-search-dropdown {
    min-width: 220px;
    max-height: 280px;
    z-index: 500;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 2px;
    pointer-events: auto;
    padding: 0;
    overflow-y: auto;
}
.mobile-value-with-symbol .select-search-country-wrap .select-search-dropdown .select-search-option {
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    padding: 0.35rem 0.75rem;
    margin: 0;
}
.mobile-value-with-symbol .select-search-country-wrap .select-search-dropdown.hide {
    display: none;
}
/* Allow dropdown to escape overflow:hidden ancestors */
.mobile-value-with-symbol {
    overflow: visible;
}
.check-existing-form .check-existing-mobile-wrap .mobile-value-with-symbol,
.create-candidate-page .input-combined.mobile-combined-row .mobile-value-with-symbol {
    overflow: visible;
}
.mobile-value-with-symbol .mobile-number-input {
    flex: 1 1 0;
    min-width: 80px;
    padding: 0.5rem 0.75rem 0.5rem 0.6rem;
    border: none;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
}
.mobile-value-with-symbol .mobile-number-input:focus {
    outline: none;
}
.mobile-value-with-symbol .mobile-number-input::placeholder {
    color: var(--placeholder-color, #9ca3af);
}
.create-candidate-page .job-form-section .input-combined.mobile-combined-row,
.check-existing-mobile-wrap.input-combined.mobile-combined-row {
    border-radius: 8px;
    overflow: visible;
}
/* Primary/Alternate Mobile: proper outer border and inner radius so outline is clean */
.create-candidate-page .form-group .input-combined.mobile-combined-row {
    border: 1px solid var(--border-color, #e2e8f0);
    background: #fff;
}
.create-candidate-page .form-group .input-combined.mobile-combined-row:focus-within {
    outline: none;
    box-shadow: none;
    border-color: var(--primary-color, #0066cc);
}
.create-candidate-page .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol {
    border-radius: 7px;
    background: transparent;
}
.create-candidate-page .form-group .input-combined.mobile-combined-row .mobile-value-with-symbol .select-search-country-wrap {
    border-radius: 7px 0 0 7px;
}
.create-candidate-page .form-group .input-combined.mobile-combined-row .mobile-number-input {
    border-radius: 0 7px 7px 0;
}

/* Input with clear (x) – uses .select-search-clear for appearance, .visible toggles visibility */
.input-with-clear {
    position: relative;
    display: inline-block;
    width: 100%;
}
.input-with-clear input {
    padding-right: 2.25rem;
    width: 100%;
    box-sizing: border-box;
}
.input-with-clear .input-clear-btn {
    display: none;
}
.input-with-clear .input-clear-btn.visible {
    display: flex;
}

/* Legacy: budget-inline (edit forms that still use it) */
.budget-inline {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;
    flex-wrap: wrap;
}
.budget-inline .budget-amount {
    flex: 1 1 140px;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
}
.budget-inline .budget-type {
    flex: 0 0 140px;
    min-width: 120px;
}
.budget-inline .select-search-wrap {
    flex: 0 0 140px;
    min-width: 120px;
}

/* Skills Tags */
.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag {
    padding: 0.25rem 0.75rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: 0.85rem;
}

/* Requirements List */
.requirements-list {
    list-style: none;
    padding: 0;
}

.requirements-list li {
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--background);
    border-left: 3px solid var(--primary-color);
    border-radius: 4px;
}

/* Timeline */
.timeline {
    position: relative;
    padding-left: 2rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 2rem;
}

.timeline-marker {
    position: absolute;
    left: -2rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--surface);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 12px;
    bottom: -12px;
    width: 2px;
    background: var(--border-color);
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-content h4 {
    margin-bottom: 0.5rem;
}

.timeline-content p {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* Progress Steps */
.progress-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.step {
    padding: 0.75rem;
    background: var(--background);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.step.completed {
    background: #dcfce7;
    color: #166534;
    font-weight: 500;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-secondary);
}

/* Reports */
.reports-section {
    margin-bottom: 2.5rem;
}
.reports-section-title {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
}
.reports-section-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.reports-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.report-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--text-primary);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.report-tile:hover {
    border-color: var(--primary-color);
    background: var(--background);
    box-shadow: var(--shadow-md);
}
.report-tile.active {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.08);
}
.report-tile-label {
    font-size: 0.9rem;
    font-weight: 500;
}
.report-tile-value {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
}
.report-tile-performance {
    flex-direction: row;
    gap: 0.5rem;
}
.report-tile-icon {
    font-size: 1.25rem;
}
.report-custom-dates .form-inline-dates {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.report-custom-dates .form-group {
    margin-bottom: 0;
}
.report-period-summary {
    margin-top: 1rem;
}
.report-period-range {
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.report-yield-stats {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}
.report-yield-item {
    display: flex;
    flex-direction: column;
}
.report-yield-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
}
.report-yield-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.report-detail-card {
    margin-top: 1rem;
}
.reports-summary-grid {
    margin-bottom: 1rem;
}

.reports-grid {
    display: grid;
    gap: 2rem;
}

.pipeline-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pipeline-item {
    display: grid;
    grid-template-columns: 150px 1fr 60px;
    align-items: center;
    gap: 1rem;
}

.pipeline-label {
    font-weight: 500;
}

.pipeline-bar {
    height: 24px;
    background: var(--background);
    border-radius: 4px;
    overflow: hidden;
}

.pipeline-fill {
    height: 100%;
    background: var(--primary-color);
}

.pipeline-count {
    text-align: right;
    font-weight: 600;
    color: var(--primary-color);
}

/* Stat Item */
.stat-item {
    margin-bottom: 1.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary-color);
}

.stat-value.highlight {
    color: var(--success-color);
}

/* Header Actions */
.header-actions {
    display: flex;
    gap: 1rem;
}

/* Job detail: modern header action buttons – right-aligned, small */
.job-detail-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-right: 0;
    margin-left: auto;
}
.job-detail-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.job-detail-btn-primary {
    background: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
    box-shadow: 0 1px 2px rgba(0, 102, 204, 0.2);
}
.job-detail-btn-primary:hover {
    background: var(--primary-hover, #0052a3);
    border-color: var(--primary-hover, #0052a3);
    box-shadow: 0 2px 6px rgba(0, 102, 204, 0.3);
}
.job-detail-btn-secondary {
    background: var(--surface);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.job-detail-btn-secondary:hover {
    background: var(--background);
    border-color: var(--text-secondary);
}
.job-detail-btn-create {
    background: #059669;
    color: #fff;
    border: 1px solid #059669;
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.25);
}
.job-detail-btn-create:hover {
    background: #047857;
    border-color: #047857;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.35);
}

/* Job detail: Copy job & Download PDF provision icons */
.job-detail-provision-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.job-detail-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary, #475569);
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.job-detail-icon-btn:hover {
    color: var(--primary-color, #0066cc);
    background: var(--background, #f8fafc);
    border-color: var(--primary-color, #0066cc);
}
.job-detail-icon-btn svg {
    flex-shrink: 0;
}
.job-detail-icon-btn-label {
    white-space: nowrap;
}
@media (max-width: 768px) {
    .job-detail-icon-btn-label { display: none; }
}

/* Job copy modal */
.job-copy-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.job-copy-modal[hidden] { display: none !important; }
.job-copy-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.job-copy-modal-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: var(--surface, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.job-copy-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--background, #f8fafc);
}
.job-copy-modal-header-text {
    flex: 1;
    min-width: 0;
}
.job-copy-modal-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.job-copy-modal-subtitle {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--text-secondary, #64748b);
}
.job-copy-modal-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.job-copy-modal-close:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.job-copy-modal-body {
    flex: 1;
    overflow: auto;
    padding: 1rem 1.25rem;
}
.job-copy-formatted {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--text-primary, #0f172a);
}
.job-copy-formatted-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1.25rem;
    align-items: baseline;
    margin-bottom: 1.25rem;
    padding: 1rem 1rem 1.25rem;
    background: var(--background, #f8fafc);
    border-radius: 10px;
    border: 1px solid var(--border-color, #e2e8f0);
}
.job-copy-formatted-row {
    display: contents;
}
.job-copy-formatted-row .job-copy-formatted-label {
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary, #64748b);
}
.job-copy-formatted-row .job-copy-formatted-value {
    font-weight: 500;
    color: var(--text-primary, #0f172a);
    word-break: break-word;
}
.job-copy-formatted-section {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}
.job-copy-formatted-section-title {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color, #0066cc);
}
.job-copy-formatted-section-body {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary, #0f172a);
    white-space: normal;
    word-break: break-word;
}
.job-copy-formatted-section-body p {
    margin: 0.4em 0;
}
.job-copy-formatted-section-body ul,
.job-copy-formatted-section-body ol {
    margin: 0.4em 0;
    padding-left: 1.25rem;
}
.job-copy-formatted-section-body li {
    margin: 0.2em 0;
}
.job-copy-modal-footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
    background: var(--background, #f8fafc);
}
.job-copy-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 0.6rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: #059669;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4);
    transition: opacity 0.2s;
}
.job-copy-toast[hidden] { display: none !important; }

.status-dropdown {
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--surface);
    cursor: pointer;
}

/* Candidate detail page: hero (top section) + tagged jobs */
.candidate-detail { padding-bottom: 2rem; }

/* Hero stays single-column (name then card); no right-edge crowding */

.candidate-hero-name-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.candidate-hero-name {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--text-primary);
}
.candidate-hero-status {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}
.candidate-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.candidate-hero-meta-item a { color: var(--primary-color); text-decoration: none; }
.candidate-hero-meta-item a:hover { text-decoration: underline; }
.candidate-hero-summary {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.candidate-hero-summary span + span { margin-left: 1rem; }
.candidate-hero-ctc { font-weight: 500; color: var(--text-primary); }
.candidate-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.candidate-hero-jobs {
    background: var(--background);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
}
.candidate-hero-jobs-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.candidate-hero-jobs-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--section-header-color);
}
.candidate-add-job-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}
.candidate-job-select { flex: 1; min-width: 180px; }
.candidate-hero-jobs-list { display: flex; flex-direction: column; gap: 0.5rem; }
.candidate-job-pill {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}
.candidate-job-pill a {
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}
.candidate-job-pill a:hover { text-decoration: underline; }
.candidate-job-pill-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.candidate-job-pill-remove { margin-left: auto; }
.btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius);
    font-size: 1.1rem;
    line-height: 1;
}
.btn-icon-sm:hover { background: var(--danger-color); color: #fff; }
.candidate-hero-jobs-empty {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Status change inline */
.status-change-card .card-body { padding: 0.75rem 1.25rem; }
.status-change-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}
.status-change-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.25rem;
}
.status-change-inline .status-inline-search { min-width: 160px; }
.status-change-inline input[type="text"]:not(.status-inline-search) { min-width: 180px; flex: 1; }
.status-error-msg { margin: 0.5rem 0 0; font-size: 0.9rem; }

/* Candidate info grid (detail page) */
.candidate-info-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.4rem 1.25rem;
    margin: 0;
    font-size: 0.9rem;
}
.candidate-info-grid dt { margin: 0; font-weight: 600; color: var(--text-secondary); }
.candidate-info-grid dd { margin: 0; color: var(--text-primary); }
.candidate-skills-block { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.candidate-skills-block strong { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
.candidate-skills-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.candidate-skills-tags .skill-tag { font-size: 0.8rem; padding: 0.2rem 0.5rem; }

/* Candidate detail: label + value on same row, max use of space */
.detail-inline-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.detail-key-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem 2rem;
}
.candidate-detail-page .detail-key-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem 1.5rem;
}
.candidate-detail-page .detail-key-grid .detail-inline-row:not(.detail-actions-row) {
    flex-wrap: wrap;
    min-width: 0;
}
.candidate-detail-page .detail-key-grid .detail-inline-row:not(.detail-actions-row) > span:not(.detail-inline-label) {
    white-space: normal;
    min-width: 0;
    overflow-wrap: break-word;
}
/* Key information section: no horizontal scroll */
.candidate-detail-card[data-section-title="Key information"] .candidate-detail-section-body {
    overflow-x: hidden;
}
.candidate-detail-card[data-section-title="Key information"] .detail-inline-rows.detail-key-grid {
    min-width: 0;
}
.detail-key-grid .detail-inline-row { min-height: 1.75rem; }
.detail-key-grid .detail-inline-label { flex: 0 0 100px; }
@media (max-width: 768px) {
    .detail-key-grid { grid-template-columns: 1fr; }
    .candidate-detail-page .detail-key-grid { grid-template-columns: 1fr; }
}
.detail-inline-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2rem;
    flex-wrap: wrap;
}
.detail-inline-label {
    flex: 0 0 120px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.detail-inline-row > span:not(.detail-inline-label):not(.badge),
.detail-inline-row > a { color: var(--text-primary); }
.detail-inline-row a { color: var(--primary-color); text-decoration: none; }
.detail-inline-row a:hover { text-decoration: underline; }
.detail-actions-row {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    align-items: flex-start;
}
.detail-actions-row .detail-action-btns {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: flex-start;
    min-width: 0;
}
.detail-actions-row .detail-action-btns .btn,
.detail-actions-row .detail-action-btns .detail-log-notes-wrap .btn {
    flex-shrink: 0;
    min-height: 2rem;
    height: 2rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.detail-actions-row .detail-inline-label {
    flex-shrink: 0;
    line-height: 2rem;
}
.detail-log-notes-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}
.detail-log-notes-shortcut {
    font-size: 0.65rem;
    color: var(--text-muted, #64748b);
    letter-spacing: 0.02em;
}
.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem 1.5rem;
}
.detail-info-grid .detail-inline-row { min-height: 1.75rem; }
.detail-info-grid .detail-inline-label { flex: 0 0 110px; }
.detail-info-grid .detail-inline-row.skills-full-row { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .detail-info-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .detail-info-grid { grid-template-columns: 1fr; }
}
.detail-inline-form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.detail-status-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}
.detail-status-form .detail-inline-row { align-items: center; margin: 0; min-height: auto; }
.detail-status-form .detail-status-select { min-width: 200px; }
.detail-status-form .select-search-wrap { min-width: 200px; }
/* Schedule Interview button: ensure text is visible (contrast) */
.btn-schedule-interview,
.detail-action-btns .btn-primary {
    color: #fff !important;
    background: var(--primary-color);
}
.detail-action-btns .btn-primary:hover { background: var(--primary-hover); color: #fff !important; }
.detail-status-form .btn { flex-shrink: 0; }
.detail-status-note-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}
.detail-status-note-row .detail-inline-label { flex: 0 0 auto; }
.detail-status-note-input {
    width: 100%;
    min-height: 100px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-family: inherit;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text-primary);
    resize: vertical;
}
.detail-status-note-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}
.detail-status-note-input::placeholder { color: var(--placeholder-color); }

/* Tagged jobs: 2 columns — left tagged list, right add job */
.tagged-jobs-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
}
.tagged-jobs-list-title,
.tagged-jobs-add-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.tagged-jobs-list { min-width: 0; }
.tagged-jobs-list .detail-job-row { margin-top: 0.5rem; }
.tagged-jobs-add .detail-inline-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.tagged-jobs-add .select-search { min-width: 200px; flex: 1; }
@media (max-width: 700px) {
    .tagged-jobs-two-col { grid-template-columns: 1fr; }
}

/* Candidate information: clean table-style rows */
.candidate-info-table {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 2rem;
}
.candidate-info-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.75rem;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-color);
}
.candidate-info-row:last-child { border-bottom: none; }
.candidate-info-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.candidate-info-value {
    font-size: 0.95rem;
    color: var(--text-primary);
}
.candidate-info-value a { color: var(--primary-color); text-decoration: none; }
.candidate-info-value a:hover { text-decoration: underline; }
@media (max-width: 600px) {
    .candidate-info-table { grid-template-columns: 1fr; }
    .candidate-info-row { grid-template-columns: 120px 1fr; }
}
.detail-label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.detail-dl { margin: 0; font-size: 0.95rem; }
.detail-dl-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.4rem 1.25rem;
}
.detail-dl-grid dt { margin: 0; font-weight: 600; color: var(--text-secondary); }
.detail-dl-grid dd { margin: 0; color: var(--text-primary); }
.detail-dl-grid a { color: var(--primary-color); }
.detail-job-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.detail-job-row:last-child { border-bottom: none; }
.detail-job-row a { font-weight: 600; color: var(--primary-color); text-decoration: none; }
.detail-job-row a:hover { text-decoration: underline; }
.detail-job-remove { margin-left: auto; }
.detail-actions .detail-action-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.detail-skills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.detail-skills .skill-tag { font-size: 0.8rem; padding: 0.2rem 0.5rem; }
.detail-notes-block {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    font-size: 0.95rem;
    white-space: pre-wrap;
    color: var(--text-primary);
    background: transparent;
}
.detail-interviews { display: flex; flex-direction: column; gap: 1rem; }
.detail-interview-card {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: transparent;
}
.detail-interview-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}
.detail-interview-row1 .detail-interview-at-by {
    flex: 1;
    min-width: 0;
}
.detail-interview-feedback-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
    gap: 0.25rem;
}
.detail-interview-status-below {
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.detail-interview-feedback-btn {
    flex-shrink: 0;
}
.detail-interview-row2 {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.detail-interview-row2 a {
    color: var(--primary-color);
    text-decoration: none;
}
.detail-interview-row2 a:hover {
    text-decoration: underline;
}
.detail-interview-meta-sep {
    margin: 0 0.35rem;
    color: var(--border-color);
    font-weight: normal;
}
.detail-interview-head {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.detail-interview-head-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.detail-interview-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.detail-interview-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}
.detail-interview-rating-inline { font-size: 0.9rem; }
.detail-interview-feedback {
    display: inline-block;
    flex-shrink: 0;
    margin-top: 0.25rem;
}
.detail-interview-job a { color: var(--primary-color); text-decoration: none; }
.detail-interview-job a:hover { text-decoration: underline; }
.detail-interview-notes { margin-top: 0.75rem; }
.detail-interview-notes .detail-label { margin-bottom: 0.25rem; }
.detail-interview-notes p { margin: 0; font-size: 0.95rem; white-space: pre-wrap; color: var(--text-primary); }
.detail-interview-notes.rich-text-content p { white-space: normal; }
.detail-interview-notes.rich-text-content { font-size: 0.9rem; line-height: 1.5; }
.detail-interview-rating { margin: 0.5rem 0 0; font-size: 0.9rem; }
.detail-timeline { display: flex; flex-direction: column; gap: 0.75rem; }
.detail-timeline-item {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--section-header-color);
    font-size: 0.9rem;
    background: transparent;
}
.detail-timeline-item p { margin: 0.25rem 0 0; }
.detail-timeline-item small { color: var(--text-secondary); }

/* Candidate Meta (legacy / reuse) */
.candidate-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.candidate-meta-row2 {
    margin-top: 0.35rem;
    align-items: center;
}

.candidate-meta-row2 .candidate-location {
    flex-shrink: 0;
}

.candidate-meta-row2 .candidate-skills-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.5rem;
    align-items: center;
}

.candidate-meta-row2 .candidate-skills-inline .skill-tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    min-width: 2.5rem;
}

.btn-icon svg {
    display: block;
}

/* Dashboard filters */
.dashboard-section {
    margin-bottom: 2rem;
}

/* Dashboard – My Open Tasks (UX-optimised, compact cards) */
.dashboard-my-tasks-section {
    margin-bottom: 1.75rem;
}
.dashboard-my-tasks-card {
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}
.dashboard-my-tasks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(180deg, #fafbfc 0%, #f4f6f8 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dashboard-my-tasks-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dashboard-my-tasks-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    letter-spacing: -0.01em;
}
.dashboard-my-tasks-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4f46e5;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 999px;
}
.dashboard-my-tasks-link {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #4f46e5;
    text-decoration: none;
    transition: color 0.15s ease;
}
.dashboard-my-tasks-link:hover {
    color: #3730a3;
}
.dashboard-my-tasks-link:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
    border-radius: 4px;
}
.dashboard-my-tasks-list {
    list-style: none;
    margin: 0;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-height: 34rem;
    overflow-y: auto;
}
.dashboard-my-tasks-item {
    padding: 1rem 1.125rem;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    border-left-width: 4px;
    border-left-style: solid;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.dashboard-my-tasks-item-color-0 { border-left-color: #7dd3fc; }
.dashboard-my-tasks-item-color-1 { border-left-color: #5eead4; }
.dashboard-my-tasks-item-color-2 { border-left-color: #c4b5fd; }
.dashboard-my-tasks-item-color-3 { border-left-color: #fcd34d; }
.dashboard-my-tasks-item.dashboard-my-tasks-item--user-ref {
    border-left-color: #fb923c;
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.08) 0%, rgba(255, 255, 255, 0.5) 48%);
}
.dashboard-my-tasks-item.dashboard-my-tasks-item--user-ref:hover {
    border-left-color: #ea580c;
    background: linear-gradient(90deg, rgba(251, 146, 60, 0.12) 0%, rgba(255, 255, 255, 0.6) 48%);
}
.dashboard-my-tasks-item:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.dashboard-my-tasks-item-color-0:hover { border-left-color: #0ea5e9; }
.dashboard-my-tasks-item-color-1:hover { border-left-color: #14b8a6; }
.dashboard-my-tasks-item-color-2:hover { border-left-color: #8b5cf6; }
.dashboard-my-tasks-item-color-3:hover { border-left-color: #f59e0b; }
.dashboard-my-tasks-item-head {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.dashboard-my-tasks-item-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4f46e5;
}
.dashboard-my-tasks-item-title {
    flex: 1;
    min-width: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.35;
    overflow-wrap: break-word;
    white-space: normal;
}
/* Match stand-up task chips: /J job blue, /C candidate green, /U user amber (see .standup-page .task-ref-*) */
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-job {
    color: #1d4ed8;
    text-decoration-color: rgba(29, 78, 216, 0.4);
}
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-job:hover {
    color: #1e40af;
    text-decoration-color: rgba(30, 64, 175, 0.55);
}
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-job:focus-visible {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
    border-radius: 2px;
}
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-candidate,
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-candidate-name {
    color: #047857;
    text-decoration-color: rgba(4, 120, 87, 0.4);
}
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-candidate:hover,
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-candidate-name:hover {
    color: #065f46;
    text-decoration-color: rgba(6, 95, 70, 0.55);
}
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-candidate:focus-visible,
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-candidate-name:focus-visible {
    outline: 2px solid #047857;
    outline-offset: 2px;
    border-radius: 2px;
}
.dashboard-my-tasks-item-title .dashboard-my-tasks-ref-user {
    font-weight: 600;
    color: #6d28d9;
}
.dashboard-my-tasks-item-date {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 400;
}
/* Comment bubble at end of task title: "View comments" with hover tooltip (free-flow) */
.dashboard-my-tasks-comments-bubble-wrap {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    cursor: default;
}
.dashboard-my-tasks-comments-bubble {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.2rem 0.45rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    border: 1px solid #a5b4fc;
    color: #4338ca;
    box-shadow: 0 1px 2px rgba(67, 56, 202, 0.08);
}
.dashboard-my-tasks-comments-bubble:hover {
    background: linear-gradient(135deg, #c7d2fe 0%, #a5b4fc 100%);
    border-color: #818cf8;
    color: #3730a3;
    box-shadow: 0 2px 6px rgba(67, 56, 202, 0.15);
}
.dashboard-my-tasks-comments-bubble-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}
.dashboard-my-tasks-comments-bubble-icon svg { display: block; }
.dashboard-my-tasks-comments-bubble-label { white-space: nowrap; }
.dashboard-my-tasks-comments-bubble-count { font-size: 0.6875rem; opacity: 0.9; }
/* Tooltip: fixed so it free-flows above card/section (not clipped by overflow); width matches candidate card eye tooltip */
.dashboard-my-tasks-comments-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99999;
    min-width: 420px;
    max-width: 560px;
    max-height: 320px;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.15s, opacity 0.15s;
    pointer-events: none;
}
.dashboard-my-tasks-comments-bubble-wrap.dashboard-my-tasks-comments-tooltip-visible .dashboard-my-tasks-comments-tooltip {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.dashboard-my-tasks-comments-tooltip-inner {
    display: flex;
    flex-direction: column;
    max-height: 320px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #334155;
    text-align: left;
}
.dashboard-my-tasks-comments-tooltip-title {
    display: block;
    flex-shrink: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 0;
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px 10px 0 0;
}
.dashboard-my-tasks-comments-tooltip-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: 260px;
    padding: 0.5rem 1rem 0.75rem;
    flex: 1;
    min-height: 0;
}
.dashboard-my-tasks-comments-tooltip-entry {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}
.dashboard-my-tasks-comments-tooltip-entry:last-child { padding-bottom: 0; border-bottom: none; }
.dashboard-my-tasks-comments-tooltip-meta {
    display: block;
    font-size: 0.6875rem;
    color: #9ca3af;
    margin-bottom: 0.2rem;
}
.dashboard-my-tasks-comments-tooltip-text { color: #334155; word-break: break-word; white-space: pre-wrap; }
.dashboard-my-tasks-comments-tooltip-empty {
    margin: 0;
    padding: 0.75rem 1rem;
    color: #64748b;
    font-size: 0.8125rem;
}
/* Two columns: Comments (50%) | Close (50%) */
.dashboard-my-tasks-cols {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid #f3f4f6;
    min-width: 0;
}
.dashboard-my-tasks-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.dashboard-my-tasks-col-comment {
    padding-right: 1rem;
    border-right: 1px solid #e5e7eb;
}
.dashboard-my-tasks-col-close {
    padding-left: 1rem;
    justify-content: flex-end;
}
.dashboard-my-tasks-comments-wrap {
    flex: 0 0 auto;
    min-width: 0;
}
.dashboard-my-tasks-comments-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 0.25rem;
}
.dashboard-my-tasks-comments {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 3.25em;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}
.dashboard-my-tasks-comments::-webkit-scrollbar {
    width: 4px;
}
.dashboard-my-tasks-comments::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}
.dashboard-my-tasks-comment {
    font-size: 0.75rem;
    color: #374151;
    background: #f9fafb;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    border-left: 2px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
}
.dashboard-my-tasks-comment-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-my-tasks-comment-meta {
    flex: 0 0 auto;
    font-size: 0.6875rem;
    color: #9ca3af;
    white-space: nowrap;
}
.dashboard-my-tasks-comment-by {
    font-weight: 600;
    color: #6b7280;
    margin-right: 0.35rem;
}
.dashboard-my-tasks-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.dashboard-my-tasks-form-comment {
    flex: 1;
    min-width: 0;
}
.dashboard-my-tasks-form-comment .dashboard-my-tasks-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.dashboard-my-tasks-form-close {
    flex: 1;
    min-width: 0;
}
.dashboard-my-tasks-form-close .dashboard-my-tasks-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.dashboard-my-tasks-form .dashboard-my-tasks-btn {
    align-self: flex-start;
}
.dashboard-my-tasks-input {
    padding: 0.45rem 0.65rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: #111827;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-my-tasks-input::placeholder {
    color: #9ca3af;
}
.dashboard-my-tasks-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.dashboard-my-tasks-close-input {
    min-width: 0;
}
.dashboard-my-tasks-btn {
    padding: 0.45rem 0.85rem;
    min-height: 36px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}
.dashboard-my-tasks-btn:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}
.dashboard-my-tasks-btn-comment {
    background: #4f46e5;
    color: #fff;
}
.dashboard-my-tasks-btn-comment:hover {
    background: #4338ca;
}
.dashboard-my-tasks-btn-close {
    background: transparent;
    color: #6b7280;
    border: 1px solid #d1d5db;
}
.dashboard-my-tasks-btn-close:hover {
    background: #f9fafb;
    border-color: #9ca3af;
    color: #374151;
}
@media (max-width: 640px) {
    .dashboard-my-tasks-list {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
        max-height: 30rem;
    }
    .dashboard-my-tasks-item {
        padding: 0.875rem 1rem;
    }
    .dashboard-my-tasks-item-head {
        flex-wrap: wrap;
    }
    .dashboard-my-tasks-item-title {
        white-space: normal;
    }
    .dashboard-my-tasks-cols {
        grid-template-columns: 1fr;
        padding-top: 0.625rem;
        margin-top: 0.5rem;
    }
    .dashboard-my-tasks-col-comment {
        padding-right: 0;
        padding-bottom: 0.625rem;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    .dashboard-my-tasks-col-close {
        padding-left: 0;
        justify-content: stretch;
    }
    .dashboard-my-tasks-form-close .dashboard-my-tasks-input {
        flex: 1;
        min-width: 0;
    }
}

/* Today’s allocated: same job card markup as Hot jobs (.hot-jobs-item-row1–3 + .hot-jobs-allocation-notes) */
.today-allocated-section .today-allocated-job-card {
    overflow: hidden;
}

/* Hot jobs – readable, slightly colorful */
.hot-jobs-section {
    margin-bottom: 2rem;
}
.hot-jobs-card {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    overflow: hidden;
}
.hot-jobs-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    padding: 1.25rem 1.75rem;
    border-bottom: 1px solid #e2e8f0;
    border-top: 1px solid rgba(220, 38, 38, 0.25);
    border-left: 1px solid rgba(220, 38, 38, 0.25);
    border-right: 1px solid rgba(220, 38, 38, 0.25);
    background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 40%, #f0f9ff 100%);
    min-height: 3.5rem;
    box-shadow: 0 -2px 8px rgba(220, 38, 38, 0.08), -2px 0 8px rgba(220, 38, 38, 0.08), 2px 0 8px rgba(220, 38, 38, 0.08);
}
.hot-jobs-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0c4a6e;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.hot-jobs-title-text {
    white-space: nowrap;
}
.hot-jobs-title-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.35);
    line-height: 1;
}
.hot-jobs-title-icon {
    display: inline-flex;
    align-items: center;
}
.hot-jobs-title-icon img,
.hot-jobs-title-icon svg {
    width: 1.65rem;
    height: 1.65rem;
    display: block;
}
.hot-jobs-search-wrap {
    flex: 1 1 320px;
    min-width: 240px;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    margin-right: auto;
}
.hot-jobs-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #0ea5e9;
    pointer-events: none;
}
.hot-jobs-search-input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.65rem;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    font-size: 0.9375rem;
    background: #fff;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 2.75rem;
}
.hot-jobs-search-wrap.hot-jobs-search-has-text .hot-jobs-search-input {
    padding-right: 2.65rem;
}
.hot-jobs-search-wrap .hot-jobs-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.hot-jobs-search-wrap.hot-jobs-search-has-text .hot-jobs-search-clear {
    display: flex;
}
.hot-jobs-search-wrap .hot-jobs-search-clear:hover {
    color: #0f172a;
    background: #f1f5f9;
}
.hot-jobs-search-wrap .hot-jobs-search-clear svg {
    display: block;
}
.hot-jobs-search-input::placeholder {
    color: #64748b;
}
.hot-jobs-search-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
    background: #fff;
}
.hot-jobs-view-all {
    flex-shrink: 0;
    margin-left: auto;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    font-size: 0.9375rem;
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 100%);
    border: none;
    color: #fff;
    box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
    transition: transform 0.15s, box-shadow 0.15s;
}
.hot-jobs-view-all:hover {
    background: linear-gradient(180deg, #0369a1 0%, #075985 100%);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.4);
}
.hot-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
}
.hot-jobs-item {
    padding: 0;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #7dd3fc;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.hot-jobs-item:hover {
    border-left-color: #0ea5e9;
    border-color: #bae6fd;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(14, 165, 233, 0.08);
    transform: translateY(-1px);
}
/* Row 1: Job title | Customer [End-client]  ..............  badges  View → */
.hot-jobs-item-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.35rem 0.5rem;
    flex-wrap: wrap;
}
.hot-jobs-item-title-customer {
    display: flex;
    align-items: center;
    gap: 0.5rem 0.75rem;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}
.hot-jobs-item-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.hot-jobs-item-hot-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.hot-jobs-item-hot-icon img {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}
.hot-jobs-item-title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s;
}
.hot-jobs-item-title a:hover {
    color: #0284c7;
}
.hot-jobs-item-sep {
    color: #94a3b8;
    font-weight: 300;
    flex-shrink: 0;
}
.hot-jobs-item-id {
    font-size: 0.8125rem;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
    flex-shrink: 0;
}
.hot-jobs-item-customer-inline {
    font-size: 0.9rem;
}
.hot-jobs-item-customer-name {
    font-weight: 600;
    color: #334155;
}
.hot-jobs-item-end-client {
    font-weight: 500;
    color: #64748b;
}
.hot-jobs-item-contact {
    font-weight: 500;
    color: #64748b;
}
.hot-jobs-item-status-badge {
    margin-left: 0.5rem;
    vertical-align: middle;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    letter-spacing: 0.02em;
}
.hot-jobs-item-status-badge.badge-active { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.hot-jobs-item-status-badge.badge-hired { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.hot-jobs-item-status-badge.badge-hold { background: #fef9c3; color: #b45309; border: 1px solid #fde047; }
.hot-jobs-item-status-badge.badge-closed { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.hot-jobs-item-row1-right {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}
.hot-jobs-item-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.hot-jobs-item-badges .badge {
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    letter-spacing: 0.02em;
}
.hot-jobs-item-badges .badge-active { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.hot-jobs-item-badges .badge-hired { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.hot-jobs-item-badges .badge-hold { background: #fef9c3; color: #b45309; border: 1px solid #fde047; }
.hot-jobs-item-badges .badge-closed { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.hot-jobs-item-view {
    flex-shrink: 0;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: #fff;
    transition: transform 0.15s, box-shadow 0.15s;
}
.hot-jobs-item-view:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
    color: #fff;
}
/* Row 2: all values in one row */
.hot-jobs-item-row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0;
    padding: 0 1.35rem 0.5rem;
    font-size: 0.8125rem;
}
.hot-jobs-meta-sep {
    margin: 0 0.45rem;
    color: #cbd5e1;
    font-weight: 300;
    user-select: none;
}
.hot-jobs-meta-item {
    color: #334155;
}
.hot-jobs-meta-label {
    color: #64748b;
    margin-right: 0.25rem;
    font-size: 0.7875rem;
}
/* Row 3: Candidate counts + progress – soft tint */
.hot-jobs-item-row3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.5rem 1.35rem 1rem;
    background: linear-gradient(180deg, transparent 0%, #f0f9ff 100%);
    border-radius: 0 0 12px 12px;
    position: relative;
}
.hot-jobs-candidates-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0369a1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.hot-jobs-created-by-line {
    font-size: 0.75rem;
    color: #64748b;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.hot-jobs-created-by-line .hot-jobs-meta-label {
    font-weight: 600;
    color: #475569;
    margin-right: 0.2rem;
}
.hot-jobs-meta-sep-inline {
    color: #cbd5e1;
    margin: 0 0.25rem;
    font-weight: 300;
}
.hot-jobs-allocation-notes {
    flex-basis: 100%;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(3, 105, 161, 0.12);
    font-size: 0.8125rem;
    color: #475569;
}
.hot-jobs-allocation-notes .hot-jobs-meta-label {
    display: block;
    font-weight: 600;
    color: #0369a1;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
}
.hot-jobs-allocation-notes-text {
    white-space: pre-wrap;
    word-break: break-word;
}
.hot-jobs-loops {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.6rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
}
.hot-jobs-loops li {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 8px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.hot-jobs-loops li:nth-child(1) { background: #e0f2fe; border-color: #bae6fd; }
.hot-jobs-loops li:nth-child(2) { background: #ede9fe; border-color: #ddd6fe; }
.hot-jobs-loops li:nth-child(3) { background: #d1fae5; border-color: #a7f3d0; }
.hot-jobs-loop-name {
    color: #475569;
    font-weight: 600;
}
.hot-jobs-loops li:nth-child(1) .hot-jobs-loop-name { color: #0369a1; }
.hot-jobs-loops li:nth-child(2) .hot-jobs-loop-name { color: #5b21b6; }
.hot-jobs-loops li:nth-child(3) .hot-jobs-loop-name { color: #047857; }
.hot-jobs-loop-count {
    font-weight: 700;
}
.hot-jobs-loops li:nth-child(1) .hot-jobs-loop-count { color: #0369a1; }
.hot-jobs-loops li:nth-child(2) .hot-jobs-loop-count { color: #6d28d9; }
.hot-jobs-loops li:nth-child(3) .hot-jobs-loop-count { color: #059669; }
.hot-jobs-progress-inline {
    flex: 1;
    min-width: 100px;
    max-width: 180px;
    margin-left: auto;
}
.hot-jobs-progress-bar {
    height: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.hot-jobs-progress-bar .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0284c7 0%, #0ea5e9 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}
.hot-jobs-section .empty-state {
    padding: 2rem 1.5rem;
    margin: 0;
    text-align: center;
    color: #475569;
    border-radius: 12px;
    background: #f0f9ff;
    border: 1px dashed #bae6fd;
}

.hot-jobs-search-empty-wrap {
    margin-top: 1rem;
    padding: 2rem 1.75rem;
    text-align: center;
    border-radius: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
}
.hot-jobs-search-empty-msg {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #991b1b;
    font-weight: 500;
    max-width: 42em;
    margin-left: auto;
    margin-right: auto;
}

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

.section-header h2 {
    font-size: 1.35rem;
}

.dashboard-filters {
    margin-bottom: 1.5rem;
}

.dashboard-filter-form .filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.dashboard-filter-form .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dashboard-filter-form .filter-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.dashboard-filter-form .filter-group select,
.dashboard-filter-form .filter-group input[type="text"] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
    min-width: 120px;
}

.dashboard-filter-form .filter-group input[type="text"] {
    min-width: 160px;
}

.dashboard-filter-form .filter-actions {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}

/* Live search (Candidates) */
.live-search-wrap {
    margin-bottom: 1.25rem;
}
.live-search-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
    background: var(--surface);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.live-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.live-search-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* List toolbar: search + sort (default on list pages) */
.list-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.list-search {
    flex: 1;
    min-width: 200px;
}
.list-search .live-search-input {
    width: 100%;
}
.list-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.list-sort label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.sort-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.95rem;
    background: var(--surface);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.hide { display: none !important; }

/* Tables */
.table-responsive { overflow-x: auto; }
.table-hover tbody tr:hover { background: var(--background); }

/* Cards */
.card-modern {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}
.candidates-card .card-body { padding: 1.5rem; }

/* ========== Customers & Contacts – modern data tables (high volume) ========== */
.data-tables-page .page-header {
    margin-bottom: 1.75rem;
}
.data-tables-page .page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0f172a;
}
.data-tables-page .page-header p {
    font-size: 0.9375rem;
    color: #64748b;
    margin-top: 0.25rem;
}
.data-tables-page .card-modern {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
}
.data-tables-page .card-modern .card-body {
    padding: 1.25rem 1.5rem;
}
.data-tables-page .list-toolbar {
    margin-bottom: 1rem;
}
.data-tables-page .list-search .live-search-input {
    max-width: 320px;
    padding: 0.6rem 1rem 0.6rem 2.5rem;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    font-size: 0.9375rem;
    background: #fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 0.75rem center;
}
.data-tables-page .list-search .live-search-input::placeholder {
    color: #94a3b8;
}
.data-tables-page .list-search .live-search-input:focus {
    background-color: #fff;
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
}
.data-tables-page .table-responsive {
    border-radius: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.data-tables-page #customers-table,
.data-tables-page #contacts-table {
    font-size: 0.9375rem;
}
.data-tables-page #customers-table thead,
.data-tables-page #contacts-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
    box-shadow: 0 1px 0 0 #e2e8f0;
}
.data-tables-page #customers-table th,
.data-tables-page #contacts-table th {
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #475569;
    white-space: nowrap;
}
.data-tables-page #customers-table td,
.data-tables-page #contacts-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}
.data-tables-page #customers-table tbody tr:nth-child(even),
.data-tables-page #contacts-table tbody tr:nth-child(even) {
    background: #fafbfc;
}
.data-tables-page #customers-table tbody tr:hover,
.data-tables-page #contacts-table tbody tr:hover {
    background: #f0f9ff !important;
}
.data-tables-page #customers-table tbody tr td:first-child a,
.data-tables-page #contacts-table tbody tr td:first-child a,
.data-tables-page #contacts-table tbody tr td strong {
    font-weight: 600;
    color: #0f172a;
    text-decoration: none;
}
.data-tables-page #customers-table tbody tr td:first-child a:hover,
.data-tables-page #contacts-table tbody tr td a[href]:hover {
    color: var(--primary-color, #0066cc);
    text-decoration: underline;
}
.data-tables-page #customers-table .customer-code,
.data-tables-page #contacts-table .contact-meta {
    font-size: 0.8125rem;
    color: #64748b;
}
.data-tables-page #customers-table .customer-code {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: #f1f5f9;
    color: #475569;
    font-weight: 500;
}
.data-tables-page .table-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.data-tables-page .table-actions .btn {
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    border-radius: 8px;
}
.data-tables-page .table-actions .btn:not(.btn-soft) {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}
.data-tables-page .table-actions .btn:hover {
    background: #e2e8f0;
    border-color: #cbd5e1;
}
.data-tables-page .table-actions .btn-primary,
.data-tables-page .table-actions .btn.btn-soft {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: var(--primary-color, #0066cc);
}
.data-tables-page .table-actions .btn-primary:hover,
.data-tables-page .table-actions .btn.btn-soft:hover {
    background: rgba(0, 102, 204, 0.08);
    border-color: var(--primary-color, #0066cc);
}
.data-tables-page .table-footer-pagination {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}
.data-tables-page .pagination-info {
    font-size: 0.8125rem;
    color: #64748b;
}
.data-tables-page .empty-state {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: #64748b;
    font-size: 0.9375rem;
}
.data-tables-page .empty-state a {
    color: var(--primary-color, #0066cc);
    font-weight: 500;
}
.data-tables-page .contacts-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #e0f2fe;
    color: #0369a1;
}
@media (max-width: 768px) {
    .data-tables-page .list-search .live-search-input { max-width: 100%; }
    .data-tables-page #customers-table th,
    .data-tables-page #contacts-table th,
    .data-tables-page #customers-table td,
    .data-tables-page #contacts-table td { padding: 0.6rem 0.75rem; font-size: 0.875rem; }
}

/* Candidate list: merged row below each candidate (Location · Proficiency · Primary skills) */
.candidate-row-merged {
    background: var(--background);
}
.candidate-row-merged td {
    border-top: none;
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    vertical-align: top;
}
.table-hover tbody tr.candidate-row:hover,
.table-hover tbody tr.candidate-row:hover + tr.candidate-row-merged {
    background: var(--background);
}
.candidate-row-extra-cell {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}
.candidate-row-extra-line {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    min-width: 0;
}
.candidate-row-extra-line .candidate-row-extra-sep {
    flex-shrink: 0;
}
.candidate-row-extra-label {
    color: var(--text-secondary);
    font-weight: 500;
}
.candidate-row-extra-location {
    color: #0d6b5c;
    font-weight: 500;
}
.candidate-row-extra-sep {
    margin: 0 0.5rem;
    color: var(--text-secondary);
    opacity: 0.9;
}
.candidate-row-extra-item {
    color: var(--text-secondary);
}
.candidate-row-extra-added-by {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    color: #94a3b8;
    font-weight: 400;
}

/* Log Notes (candidate detail) */
/* Log Notes pop-up modal (Shift+N or Log Notes button) */
.log-notes-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s;
}
.log-notes-modal.log-notes-modal-visible {
    visibility: visible;
    opacity: 1;
}
.log-notes-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.log-notes-modal-dialog {
    position: relative;
    background: var(--surface, #fff);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.log-notes-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    background: var(--bg-muted, #f8fafc);
}
.log-notes-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
}
.log-notes-modal-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    border-radius: 6px;
}
.log-notes-modal-close:hover {
    background: var(--border-color, #e2e8f0);
    color: var(--text-primary, #1e293b);
}
.log-notes-modal-body {
    padding: 1rem 1.25rem 1.25rem;
    overflow-y: auto;
}
.log-notes-modal-body .text-success {
    color: #059669;
    font-weight: 500;
}

.log-notes-editor-section { margin-top: 0.5rem; }
.log-notes-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}
.log-notes-toolbar-color-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.25rem;
}
.log-notes-color-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    cursor: pointer;
}
.log-notes-color-input {
    width: 1.75rem;
    height: 1.5rem;
    padding: 0.125rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    cursor: pointer;
    background: var(--surface);
}
.log-notes-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.log-notes-color-input::-webkit-color-swatch { border: none; border-radius: 2px; }
.log-notes-color-input::-moz-color-swatch { border: none; border-radius: 2px; }
.log-notes-editor {
    min-height: 120px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    outline: none;
}
.log-notes-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--placeholder-color);
}
.log-notes-editor-actions { display: flex; gap: 0.5rem; }
.log-notes-list { display: flex; flex-direction: column; gap: 1rem; }
.log-notes-entry {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: transparent;
}
.log-notes-entry-meta {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}
.log-notes-entry-meta .text-muted { margin-left: 0.5rem; }
.log-notes-entry-content {
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
}
.log-notes-entry-content p { margin: 0 0 0.5rem 0; }
.log-notes-entry-content p:last-child { margin-bottom: 0; }

/* Checkbox groups */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.checkbox-group.max-h-200 { max-height: 200px; overflow-y: auto; padding: 0.25rem 0; }
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}
.checkbox-label input { width: auto; }

/* Section title (Jobs) */
.section-title {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin: 1.5rem 0 0.75rem;
    font-weight: 600;
}
.section-title:first-of-type { margin-top: 0; }

/* Job card - assigned to me */
.jobs-grid-other { margin-top: 0.5rem; }

/* Assigned / Request items (job detail) */
.assigned-item, .request-item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.assigned-item:last-child, .request-item:last-child { border-bottom: none; }

/* Buttons */
.btn-soft {
    background: var(--background);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-soft:hover { background: var(--border-color); }
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: none;
}
.btn-ghost:hover { color: var(--danger-color); }

/* Extract Job Skills (AI) — modern accent button for edit job */
.btn-extract-ai {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #5b21b6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.14) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(139, 92, 246, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.btn-extract-ai:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22) 0%, rgba(99, 102, 241, 0.14) 100%);
    border-color: rgba(139, 92, 246, 0.55);
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.2);
}
.btn-extract-ai:active {
    transform: scale(0.98);
}
.btn-extract-ai:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.btn-extract-ai-icon {
    font-size: 0.75rem;
    opacity: 0.9;
}

/* Form card */
.form-card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.add-contact-form { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border-color); }
.add-contact-form .form-actions { margin-top: 0.5rem; padding-top: 1rem; }
.link-strong { font-weight: 600; color: var(--text-primary); }
.link-strong:hover { color: var(--primary-color); }
.text-muted { color: var(--text-secondary); }
.text-danger { color: var(--danger-color); }

/* Skills tag input */
.skills-input-wrapper {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.5rem;
    background: var(--surface);
}
.skills-tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.skills-tags-input input[type="text"] {
    flex: 1;
    min-width: 120px;
    border: none;
    padding: 0.35rem 0.5rem;
    font-size: 0.95rem;
}
.skills-tags-input input[type="text"]:focus {
    outline: none;
}
.skill-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8rem;
    color: #fff;
}
.skill-tag-0 { background: #2563eb; }
.skill-tag-1 { background: #10b981; }
.skill-tag-2 { background: #f59e0b; }
.skill-tag-3 { background: #ec4899; }
.skill-tag-4 { background: #8b5cf6; }
.skill-tag-remove {
    margin-left: 0.35rem;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 1em;
    line-height: 1;
    padding: 0 0.15rem;
}
.skill-tag-remove:hover {
    opacity: 0.9;
}
.skills-suggestions {
    list-style: none;
    margin-top: 0.35rem;
    max-height: 180px;
    overflow-y: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    background: var(--surface);
    box-shadow: var(--shadow-md);
}
.skill-suggestion {
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    color: #fff;
    font-size: 0.9rem;
}
.skill-suggestion:hover {
    filter: brightness(0.95);
}
.skill-suggestion-highlight,
.skill-suggestion.skill-suggestion-highlight {
    outline: 2px solid var(--primary-color, #2563eb);
    outline-offset: 2px;
    filter: brightness(1.1);
}
.form-section {
    margin-bottom: 2rem;
}
.form-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Search page – modern UI */
.search-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}
/* Search page: header card (same style as Candidates page) */
.search-page .page-header.search-page-header {
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 35%, #bae6fd 100%);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-left: 4px solid #0ea5e9;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.12);
}
.search-page-header .search-back-link {
    display: inline-block;
    margin-bottom: 0.5rem;
    padding: 0.4rem 0.75rem;
    color: #0369a1;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.search-page-header .search-back-link:hover {
    color: #0c4a6e;
    background: rgba(255, 255, 255, 0.6);
}
.search-page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0369a1;
    letter-spacing: -0.02em;
    margin: 0 0 0.25rem 0;
}
.search-page .page-header.search-page-header .page-header-desc {
    font-size: 0.9375rem;
    color: #0284c7;
    margin: 0;
    opacity: 0.95;
}

/* Hero search card */
.search-hero-card {
    border-radius: 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.search-hero-inner {
    padding: 1.25rem 1.5rem;
}
.search-hero-form {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 0.35rem 0.35rem 0.35rem 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.search-hero-form:focus-within {
    border-color: var(--primary-color, #0ea5e9);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.search-hero-icon {
    flex-shrink: 0;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}
.search-hero-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-size: 1rem;
    padding: 0.5rem 0;
    outline: none;
}
.search-hero-input::placeholder {
    color: var(--text-secondary, #94a3b8);
}
.search-hero-btn {
    flex-shrink: 0;
    border-radius: 8px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
}

/* Recent searches */
.search-recent {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 2rem;
}
.search-recent-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.search-recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.search-recent-chip {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 999px;
    font-size: 0.875rem;
    color: var(--text-primary, #334155);
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.search-recent-chip:hover {
    background: var(--primary-color, #0ea5e9);
    color: #fff;
    border-color: var(--primary-color, #0ea5e9);
}

/* Results header – modern card */
.search-results-wrap {
    margin-top: 1rem;
}
.search-results-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.search-results-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--primary-color, #0ea5e9);
    color: #fff;
    flex-shrink: 0;
}
.search-results-header-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    min-width: 0;
}
.search-results-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.search-query-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-weight: 700;
    color: #0c4a6e;
    background: rgba(14, 165, 233, 0.15);
    border: 1px solid rgba(14, 165, 233, 0.35);
    border-radius: 999px;
    font-size: 1rem;
}
.search-results-badge {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    background: var(--surface, #fff);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Results grid – full row: one column so each section spans full width */
.search-results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}
.search-section {
    border-radius: 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    background: var(--surface, #fff);
}
.search-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.search-section-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
}
.search-section-icon-jobs { background: #dbeafe; color: #1d4ed8; }
.search-section-icon-candidates { background: #dcfce7; color: #15803d; }
.search-section-icon-customers { background: #e0e7ff; color: #4338ca; }
.search-section-icon-contacts { background: #fce7f3; color: #be185d; }
.search-section-icon-interviews { background: #fef3c7; color: #b45309; }
.search-section-icon-users { background: #e0f2fe; color: #0369a1; }
.search-section-icon-notes { background: #f3e8ff; color: #7c3aed; }
.search-section-title {
    flex: 1;
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
}
.search-section-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary, #64748b);
    background: var(--surface, #fff);
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e2e8f0);
}
.search-section-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.search-section-list li {
    border-bottom: 1px solid var(--border-color, #f1f5f9);
    border-left: 4px solid transparent;
}
.search-section-list li:last-child {
    border-bottom: none;
}
/* Different color left border per row (cycle) */
.search-section-list li:nth-child(4n+1) { border-left-color: #0ea5e9; }
.search-section-list li:nth-child(4n+2) { border-left-color: #14b8a6; }
.search-section-list li:nth-child(4n+3) { border-left-color: #8b5cf6; }
.search-section-list li:nth-child(4n+4) { border-left-color: #f59e0b; }
/* Each result row: full width, modern row layout */
.search-item-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 1rem 1.5rem;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}
.search-item-link:hover {
    background: #f8fafc;
}
.search-item-main {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--primary-color, #0ea5e9);
    flex: 1 1 auto;
    min-width: 0;
}
.search-item-link:hover .search-item-main {
    text-decoration: underline;
}
.search-item-meta {
    font-size: 0.875rem;
    color: var(--text-secondary, #64748b);
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.15rem;
}
.search-item-snippet {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    flex: 1 1 100%;
}
.search-item-link .badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-weight: 600;
}
.search-item-badge-hot {
    background: #fef3c7;
    color: #b45309;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
}

/* Matched search term highlight (e.g. /search?q=java) */
.search-highlight {
    background: #fef08a;
    color: #0f172a;
    padding: 0.1em 0.2em;
    border-radius: 3px;
    font-weight: 600;
}

/* Empty state */
.search-empty {
    border-radius: 14px;
    border: 1px solid var(--border-color, #e2e8f0);
    text-align: center;
    padding: 3rem 2rem;
}
.search-empty-inner {
    max-width: 400px;
    margin: 0 auto;
}
.search-empty-icon {
    display: inline-flex;
    color: var(--text-secondary, #94a3b8);
    margin-bottom: 1rem;
}
.search-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary, #0f172a);
    margin: 0 0 0.5rem 0;
}
.search-empty-desc {
    font-size: 0.9375rem;
    color: var(--text-secondary, #64748b);
    margin: 0;
    line-height: 1.5;
}

/* Settings > Dropdowns — modern unified management */
.dropdowns-page {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 1.5rem 2rem;
    box-sizing: border-box;
}
.dropdowns-page--candidate-style .dropdowns-form-layout {
    max-width: 1600px;
    margin: 0 auto;
    width: 100%;
}
.dropdowns-page--candidate-style .dropdowns-page-title {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}
.dropdowns-page--candidate-style .dropdowns-page-desc {
    margin: 0 0 1.5rem 0;
    font-size: 0.9375rem;
    color: var(--text-secondary, #64748b);
}
.dropdowns-page--candidate-style .dropdowns-sticky-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 0 0.75rem 0;
    margin-bottom: 0.5rem;
}
.dropdowns-page--candidate-style .dropdowns-search-wrap {
    flex: 0 1 320px;
    min-width: 0;
}
.dropdowns-page--candidate-style .dropdowns-unified-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.9375rem;
    background: var(--surface);
}
.dropdowns-page--candidate-style .dropdowns-unified-search-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.2);
}
.dropdowns-hero {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dropdowns-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #111;
    margin: 0 0 0.35rem;
    line-height: 1.2;
}
.dropdowns-hero-desc {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.dropdowns-search-bar {
    display: flex;
    align-items: center;
    max-width: 400px;
    height: 2.75rem;
    padding: 0 1rem 0 2.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    position: relative;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dropdowns-search-bar:focus-within {
    border-color: var(--primary-color, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.12);
    background: #fff;
}
.dropdowns-search-bar-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.dropdowns-search-bar:focus-within .dropdowns-search-bar-icon {
    color: var(--primary-color, #0066cc);
}
.dropdowns-search-bar-input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    color: #0f172a;
    outline: none;
}
.dropdowns-search-bar-input::placeholder {
    color: #94a3b8;
}
.dropdowns-page--candidate-style .dropdowns-list {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    border: none;
    overflow: visible;
}
.dropdowns-list {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 16px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
    overflow: hidden;
}
.dropdowns-page--candidate-style .dropdowns-list-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.dropdowns-list-inner {
    padding: 0.5rem;
    text-align: left;
}
.dropdowns-page--candidate-style .dropdowns-module {
    position: relative;
    border-radius: var(--radius);
    margin-bottom: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-left-width: 4px;
    border-left-color: #c4b8e0;
    padding: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.dropdowns-page--candidate-style .dropdowns-module:nth-of-type(1) { border-left-color: #c4b8e0; }
.dropdowns-page--candidate-style .dropdowns-module:nth-of-type(2) { border-left-color: #7dd3c8; }
.dropdowns-page--candidate-style .dropdowns-module:nth-of-type(3) { border-left-color: #86efac; }
.dropdowns-page--candidate-style .dropdowns-module:nth-of-type(4) { border-left-color: #93c5fd; }
.dropdowns-page--candidate-style .dropdowns-module:nth-of-type(5) { border-left-color: #fcd34d; }
.dropdowns-module {
    position: relative;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: #fff;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.dropdowns-module:last-child { margin-bottom: 0; }
.dropdowns-module:hover {
    background: #fafbfc;
    border-color: #e2e8f0;
}
.dropdowns-module::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color, #0066cc);
    opacity: 0.35;
    border-radius: 3px 0 0 3px;
    transition: opacity 0.2s ease;
}
.dropdowns-module:hover::before { opacity: 0.6; }
.dropdowns-module:has(.dropdowns-module-header[aria-expanded="true"])::before {
    opacity: 1;
    width: 4px;
}
.dropdowns-module-header[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.06) 0%, rgba(0, 102, 204, 0.02) 100%);
    border-bottom: 1px solid rgba(0, 102, 204, 0.08);
}
.dropdowns-module-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    padding-left: 1.5rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
    min-height: 3.25rem;
}
.dropdowns-module-header:hover {
    background: rgba(0,0,0,0.02);
}
.dropdowns-module-header[aria-expanded="true"] {
    background: linear-gradient(180deg, rgba(0, 102, 204, 0.06) 0%, rgba(0, 102, 204, 0.02) 100%);
    border-bottom: 1px solid rgba(0, 102, 204, 0.08);
}
.dropdowns-module-header[aria-expanded="true"] .dropdowns-module-title {
    color: var(--primary-color, #0066cc);
    font-weight: 600;
}
.dropdowns-module-body.collapse {
    display: none;
}
.dropdowns-module-body:not(.collapse) {
    display: block;
}
.dropdowns-module-title {
    font-weight: 600;
    font-size: 1rem;
    flex: 1;
    letter-spacing: -0.01em;
    color: #1e293b;
}
.dropdowns-module-count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
    letter-spacing: 0.02em;
}
.dropdowns-module-header[aria-expanded="true"] .dropdowns-module-count {
    background: rgba(0, 102, 204, 0.12);
    color: var(--primary-color, #0066cc);
}
.dropdowns-module-toggle {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 0.75rem;
    transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.dropdowns-module-header:hover .dropdowns-module-toggle {
    background: #e2e8f0;
    color: #475569;
}
.dropdowns-module-header[aria-expanded="true"] .dropdowns-module-toggle {
    transform: rotate(180deg);
    background: rgba(0, 102, 204, 0.12);
    color: var(--primary-color, #0066cc);
}
.dropdowns-module-body {
    padding: 1rem 1.25rem 1.25rem 1.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}
.dropdowns-module-body .dropdowns-field { border-radius: 8px; }
.dropdowns-module-body .dropdowns-field:last-child { border-bottom: 1px solid var(--border-color); }

/* Legacy toolbar/search (if used elsewhere) */
.dropdowns-toolbar .card-body { padding: 1rem 1.25rem; }
.dropdowns-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.dropdowns-search-wrap { flex: 1; min-width: 200px; max-width: 420px; position: relative; }
.dropdowns-search-wrap .dropdowns-unified-search { width: 100%; padding: 0.5rem 2.25rem 0.5rem 2.25rem; border: 1px solid var(--border-color); border-radius: var(--radius); font-size: 0.9375rem; background: var(--surface); }
.dropdowns-search-wrap .dropdowns-unified-search:focus { border-color: var(--primary-color); outline: none; box-shadow: 0 0 0 2px rgba(var(--primary-rgb, 0, 102, 204), 0.2); }
.dropdowns-search-wrap .dropdowns-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 1rem; pointer-events: none; }
.dropdowns-search-wrap .dropdowns-search-clear {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    display: none;
    align-items: center;
    justify-content: center;
}
.dropdowns-search-wrap.dropdowns-search-has-text .dropdowns-search-clear {
    display: flex;
}
.dropdowns-search-wrap .dropdowns-search-clear:hover { color: #0f172a; background: #f1f5f9; }
.dropdowns-search-wrap .dropdowns-search-clear svg { display: block; }
.dropdowns-search-hint { font-size: 0.8125rem; color: var(--text-secondary); }
.dropdowns-readonly-badge, .dropdowns-inactive-badge { font-size: 0.7rem; padding: 0.2rem 0.45rem; border-radius: 4px; margin-left: 0.35rem; }
.dropdowns-readonly-badge { background: var(--border-color); color: var(--text-secondary); }
.dropdowns-inactive-badge { background: #f0f0f0; color: #666; }
.dropdowns-active-badge { font-size: 0.7rem; padding: 0.2rem 0.45rem; border-radius: 4px; margin-left: 0.35rem; background: rgba(40, 167, 69, 0.15); color: #2d8a4a; }

.dropdowns-field {
    border-bottom: 1px solid var(--border-color);
}
.dropdowns-field:last-child { border-bottom: none; }
.dropdowns-field-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    justify-items: start;
    gap: 0.75rem 1.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--surface);
    transition: background 0.15s ease;
    text-align: left;
}
.dropdowns-field-row .dropdowns-col-name,
.dropdowns-field-row .dropdowns-col-count,
.dropdowns-field-row .dropdowns-col-badge,
.dropdowns-field-row .dropdowns-col-toggle {
    text-align: left;
}
.dropdowns-field-row:hover { background: var(--background); }
.dropdowns-field-row[aria-expanded="true"] {
    background: rgba(0, 102, 204, 0.08);
    box-shadow: inset 3px 0 0 var(--primary-color);
}
.dropdowns-field-row:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.dropdowns-col-name {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
}
.dropdowns-col-count {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 5.5rem;
}
.dropdowns-col-badge {
    min-width: 10rem;
}
.dropdowns-col-toggle {
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 1.5rem;
}
.dropdowns-values-wrap.collapse { display: none; }
.dropdowns-values-wrap.collapse.show { display: block; }
.dropdowns-module-body.collapse.show { display: block; }
.dropdowns-values-wrap {
    padding: 0 1rem 1rem;
    background: var(--background);
    border-top: 1px solid var(--border-color);
    min-width: 0;
    overflow-x: auto;
    overflow-x: auto;
    min-width: 0;
}
.dropdowns-values-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-top: 0.75rem;
}
.dropdowns-values-toolbar .dropdowns-values-search-wrap {
    flex: 1;
    min-width: 160px;
    max-width: 280px;
    position: relative;
}
.dropdowns-values-toolbar .dropdowns-values-search {
    width: 100%;
    padding: 0.4rem 2rem 0.4rem 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.875rem;
    background: var(--surface);
}
.dropdowns-values-toolbar .dropdowns-values-search:focus {
    border-color: var(--primary-color);
    outline: none;
}
.dropdowns-values-toolbar .dropdowns-values-search-icon {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 0.875rem;
    pointer-events: none;
}
.dropdowns-values-search-wrap .dropdowns-values-search-clear {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    border-radius: 4px;
    display: none;
    align-items: center;
    justify-content: center;
}
.dropdowns-values-search-wrap.dropdowns-values-search-has-text .dropdowns-values-search-clear {
    display: flex;
}
.dropdowns-values-search-wrap .dropdowns-values-search-clear:hover { color: #0f172a; background: #f1f5f9; }
.dropdowns-values-search-wrap .dropdowns-values-search-clear svg { display: block; }
.dropdowns-values-search-wrap .search-box { padding-right: 2rem; }
.dropdowns-override-form { margin-top: 0.5rem; }
.dropdowns-field-label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}
.dropdowns-field-label-row .dropdowns-field-label-label {
    font-size: 0.9rem;
    min-width: 5rem;
    margin: 0;
}
.dropdowns-field-label-row .dropdowns-field-label-input {
    max-width: 280px;
}
.dropdowns-override-active-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.dropdowns-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    cursor: pointer;
}
.dropdowns-add-override-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0.5rem 0 0.75rem;
    flex-wrap: wrap;
}
.dropdowns-add-override-row .form-control { max-width: 200px; }
.dropdowns-override-actions { margin-top: 0.75rem; }
.dropdowns-override-list .dropdowns-inline-value {
    max-width: 220px;
    text-align: left;
}
/*
 * Override list (value+label type, e.g. Qualifying Answer Types): fixed widths
 * for Label and Code columns so they align vertically. Remove stays at far right.
 */
.dropdowns-override-list-value-label .dropdowns-value-row.dropdowns-value-row-cols {
    grid-template-columns: auto auto 16rem 14rem auto minmax(10rem, 1fr);
}
.dropdowns-override-list-value-label .dropdowns-value-row .dropdowns-col-label,
.dropdowns-override-list-value-label .dropdowns-value-row .dropdowns-col-code {
    min-width: 0;
}
/*
 * Override list (simple type, e.g. Job Urgency): content-sized columns so the
 * value input sits left next to the drag handle, not centered in the row.
 */
.dropdowns-override-list:not(.dropdowns-override-list-value-label) .dropdowns-value-row.dropdowns-value-row-cols {
    grid-template-columns: auto auto auto auto auto minmax(10rem, 1fr);
}
.dropdowns-override-list .dropdowns-value-row .dropdowns-col-code {
    min-width: 0;
    justify-content: flex-start;
}
.dropdowns-override-list .dropdowns-value-row .dropdowns-col-code input.dropdowns-inline-value {
    display: block;
    text-align: left;
}
.dropdowns-add-inline { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.dropdowns-add-inline input { width: 160px; }
.dropdowns-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    min-width: 0;
}
/* All value rows in any list (sortable + override): force left alignment */
.dropdowns-values-list .dropdowns-value-row.dropdowns-value-row-cols {
    justify-items: start;
}
.dropdowns-values-list .dropdowns-value-row.dropdowns-value-row-cols .dropdowns-col-drag,
.dropdowns-values-list .dropdowns-value-row.dropdowns-value-row-cols .dropdowns-col-order,
.dropdowns-values-list .dropdowns-value-row.dropdowns-value-row-cols .dropdowns-col-loop,
.dropdowns-values-list .dropdowns-value-row.dropdowns-value-row-cols .dropdowns-col-label,
.dropdowns-values-list .dropdowns-value-row.dropdowns-value-row-cols .dropdowns-col-code,
.dropdowns-values-list .dropdowns-value-row.dropdowns-value-row-cols .dropdowns-col-color {
    justify-self: start;
    text-align: left;
}
.dropdowns-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    border-radius: var(--radius);
    background: var(--surface);
    margin-bottom: 0.4rem;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
}
.dropdowns-value-row.dropdowns-value-row-cols {
    display: grid;
    grid-template-columns: auto auto minmax(5rem, 6.5rem) minmax(0, 1fr) minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem 1.5rem;
    justify-content: start;
    justify-items: start;
    min-width: 0;
    width: 100%;
}
.dropdowns-page--candidate-style .dropdowns-value-row.dropdowns-value-row-cols {
    grid-template-columns: auto auto minmax(5rem, 6.5rem) minmax(0, 1fr) minmax(0, 1fr) auto auto;
    width: 100%;
}
.dropdowns-page--candidate-style .dropdowns-values-wrap {
    min-width: 0;
    overflow-x: auto;
}
.dropdowns-page--candidate-style .dropdowns-values-list {
    min-width: 0;
    width: 100%;
}
.dropdowns-values-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    min-width: 0;
}
.dropdowns-col-drag {
    min-width: 1.75rem;
    justify-self: start;
    flex-shrink: 0;
}
.dropdowns-col-order {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 3.5rem;
    text-align: left;
    flex-shrink: 0;
}
.dropdowns-col-order .dropdowns-order-num {
    color: var(--text-primary);
    font-weight: 600;
}
.dropdowns-col-loop {
    font-size: 0.875rem;
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.dropdowns-col-loop .dropdowns-value-loop {
    color: var(--text-primary);
    font-weight: 600;
}
.dropdowns-col-label,
.dropdowns-col-code {
    font-size: 0.875rem;
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
/* Fixed-width prefix so "Label:", "Code:", "Description:", "Value:" align and values line up across rows */
.dropdowns-col-prefix {
    flex: 0 0 auto;
    min-width: 4.5rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.dropdowns-col-label .dropdowns-value-label,
.dropdowns-col-code .dropdowns-value-code {
    color: var(--text-primary);
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dropdowns-col-color {
    display: inline-flex;
    align-items: center;
    min-width: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: left;
    flex-shrink: 0;
}
.dropdowns-value-row-cols .dropdowns-value-actions {
    justify-self: end;
    margin-left: 0.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.dropdowns-value-muted {
    color: var(--text-secondary);
    font-size: 0.875rem;
}
.dropdowns-value-label,
.dropdowns-value-code {
    font-weight: 600;
}
.dropdowns-field-override .dropdowns-override-form,
.dropdowns-field-override .dropdowns-override-list {
    text-align: left;
}
.dropdowns-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    font-size: 0.875rem;
    padding: 0 0.35rem;
    user-select: none;
    flex-shrink: 0;
}
.dropdowns-drag-handle:active {
    cursor: grabbing;
}
.dropdowns-draggable-row.dropdowns-dragging {
    opacity: 0.6;
}
.dropdowns-draggable-row.dropdowns-drag-over {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px var(--primary-color);
}
.dropdowns-value-row:last-child {
    margin-bottom: 0;
}
.dropdowns-values-wrap .dropdowns-override-list {
    margin-top: 0.5rem;
}
.dropdowns-override-list .dropdowns-value-row .dropdowns-inline-value {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.35rem 0.5rem;
    box-sizing: border-box;
    max-width: 100%;
}
.dropdowns-value-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-width: 0;
}
.dropdowns-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}
.dropdowns-value-name { font-weight: 500; color: var(--text-primary); }
.dropdowns-value-meta { font-size: 0.875rem; color: var(--text-secondary); }
.dropdowns-value-extra { font-size: 0.8125rem; color: var(--text-secondary); }
.dropdowns-value-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.dropdowns-value-actions form { display: inline; }
.dropdowns-delete-form { display: inline; }
.dropdowns-empty-values { margin: 0.5rem 0 0; font-size: 0.9rem; }
.btn-outline-danger { color: var(--danger-color); border-color: var(--danger-color); }
.btn-outline-danger:hover { background: var(--danger-color); color: #fff; }

/* Remove / Clear buttons: always red on hover and use warning (confirm) before action */
.action-remove-clear:hover,
.btn-outline-danger:hover,
.qualifying-remove:hover,
.qualifying-new-remove:hover,
.create-job-clear-btn:hover,
#special_notes-clear-btn:hover,
.filter-clear-link:hover,
.input-clear-btn:hover,
.select-search-clear:hover,
.open-pool-search-clear:hover,
.dropdowns-values-search-clear:hover,
#dropdowns-unified-search-clear:hover,
#favorites-search-clear:hover,
#contacts-list-search-clear:hover,
#open-pool-search-clear:hover,
#candidate-detail-search-clear:hover,
#favorite-note-remove:hover,
.jobs-search-clear:hover,
.jobs-filter-clear:hover,
.candidates-search-clear:hover,
.btn-reset-icon:hover,
.skill-tag-remove:hover,
.hot-jobs-search-clear:hover,
.topbar-search-clear:hover,
.global-search-clear:hover,
.interviews-search-clear:hover,
#check_duplicate_clear_btn:hover {
    color: #b91c1c !important;
    background: #fef2f2 !important;
    border-color: #b91c1c !important;
    fill: #b91c1c;
}
.action-remove-clear:hover svg,
.open-pool-search-clear:hover svg,
.dropdowns-values-search-clear:hover svg,
#dropdowns-unified-search-clear:hover svg,
#favorites-search-clear:hover svg,
#contacts-list-search-clear:hover svg,
#open-pool-search-clear:hover svg,
#candidate-detail-search-clear:hover svg,
.jobs-search-clear:hover svg,
.candidates-search-clear:hover svg,
.hot-jobs-search-clear:hover svg,
.topbar-search-clear:hover svg,
.global-search-clear:hover svg,
.interviews-search-clear:hover svg {
    stroke: #b91c1c;
}
.btn-outline-danger:hover { background: #b91c1c !important; color: #fff !important; }
.create-job-clear-btn:hover { color: #b91c1c; background: #fef2f2; border-color: rgba(185, 28, 28, 0.5); }

/* Footer */
footer {
    background: var(--surface);
    border-top: 1px solid var(--border-color);
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* Tasks hub: viewport-height split layout can sit flush against the footer — keep clear separation */
body:has(.tasks-page) footer {
    margin-top: 1.5rem;
}
main.container:has(.tasks-page) {
    max-width: 1320px;
    width: 100%;
    padding-bottom: 2.5rem;
    overflow: visible;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
    }

    .nav-search {
        max-width: none;
        width: 100%;
    }

    .detail-layout {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .pipeline-item {
        grid-template-columns: 1fr;
    }

    .page-header {
        flex-direction: column;
        gap: 1rem;
    }

    .job-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dashboard-filter-form .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-filter-form .filter-actions {
        justify-content: flex-start;
    }
}

/* Question Bank & Candidate Qualifying Questions */
.list-group { border: 1px solid var(--border-color); border-radius: var(--radius); background: var(--surface); }
.list-group-item {
    display: block; width: 100%; padding: 0.5rem 0.75rem; text-align: left; border: none; border-bottom: 1px solid var(--border-color);
    background: var(--surface); cursor: pointer; font-size: 0.9rem;
}
.list-group-item:last-child { border-bottom: none; }
.list-group-item:hover { background: var(--background); }
.badge-soft { background: #e8e8e8; color: var(--text-secondary); padding: 0.2rem 0.5rem; border-radius: var(--radius); font-size: 0.75rem; }
/* Candidate Qualifying Questions: bigger search */
.qualifying-qbank-search-wrap { }
.qualifying-qbank-search-input {
    width: 100%;
    max-width: 560px;
    padding: 0.6rem 0.75rem;
    font-size: 1rem;
}
.qualifying-qbank-results {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0.5rem;
    display: none;
}
.qualifying-qbank-results:not(:empty) { display: block; }

.qualifying-selected-list { display: flex; flex-direction: column; gap: 0.5rem; }
.qualifying-selected-item {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; background: var(--background);
    border-radius: var(--radius); border: 1px solid var(--border-color);
}
.qualifying-selected-item .qualifying-q-text { flex: 1; min-width: 0; }
.qualifying-mandatory-cb { flex-shrink: 0; white-space: nowrap; font-weight: 500; font-size: 0.875rem; }
.qualifying-mandatory-cb input { margin-right: 0.25rem; }

/* Allow dropdown to extend outside section (no clipping) */
.job-form-section:has(.qualifying-new-questions-container),
.job-form-section:has(#qualifying-add-new-wrap) {
    overflow: visible;
}
.qualifying-new-questions-container { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; overflow: visible; }
.qualifying-new-block {
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    overflow: visible;
}
.qualifying-new-row-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.qualifying-new-question-input {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
}
/* Select Answer type and + / × on the same line; dropdown not clipped */
.qualifying-new-select-and-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
    flex-shrink: 0;
}
.qualifying-new-select-and-actions .select-search-wrap {
    min-width: 180px;
    position: relative;
}
.qualifying-new-select-and-actions .select-search-dropdown {
    z-index: 500;
    max-height: 280px;
}
.qualifying-new-row-inner .qualifying-new-answer-type { min-width: 160px; }
.qualifying-new-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}
.qualifying-new-edit,
.qualifying-new-add,
.qualifying-new-remove {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.qualifying-new-edit { color: var(--text-secondary); }
.qualifying-new-edit:hover { background: var(--background); color: var(--primary-color); }
.qualifying-new-actions-unsaved {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.qualifying-new-actions-editing {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.qualifying-new-actions-unsaved .qualifying-new-save,
.qualifying-new-actions-unsaved .qualifying-new-cancel-new {
    height: 2rem;
    min-width: 3rem;
    padding: 0 0.5rem;
    line-height: 1;
}
.qualifying-new-actions .qualifying-new-save-edit,
.qualifying-new-actions .qualifying-new-cancel-edit {
    height: 2rem;
    min-width: 3rem;
    padding: 0 0.5rem;
    line-height: 1;
}
.qualifying-new-add { color: var(--primary-color); }
.qualifying-new-add:hover { background: rgba(0, 102, 204, 0.08); }
.qualifying-new-remove {
    color: #dc2626;
    border-color: #fca5a5;
    background: #fef2f2;
}
.qualifying-new-remove:hover { background: #fee2e2; }
.qualifying-new-block .qualifying-new-choices-wrap {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

/* Saved (read-only) state: grayed out until Edit is clicked */
.qualifying-new-block-readonly .qualifying-new-question-input {
    background: #f0f0f0;
    color: #666;
    cursor: default;
}
.qualifying-new-block-readonly .qualifying-new-select-and-actions .select-search-wrap {
    pointer-events: none;
    opacity: 0.85;
}
.qualifying-new-block-readonly .qualifying-new-select-and-actions .select-search-input {
    background: #f0f0f0;
    color: #666;
    cursor: default;
}
.qualifying-new-block-readonly .qualifying-new-choices-wrap textarea {
    background: #f0f0f0;
    color: #666;
    cursor: default;
}

.rich-text-content { line-height: 1.6; }
.rich-text-content p { margin-bottom: 0.75rem; }
.rich-text-content ul, .rich-text-content ol { margin: 0.5rem 0 0.5rem 1.25rem; }
.rich-text-content li { margin-bottom: 0.25rem; }

/* Global Search (Ctrl+K) */
.global-search-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 0;
}
.global-search-overlay[hidden] { display: none; }
.global-search-modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 560px;
    max-height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.global-search-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
}
.global-search-header .global-search-icon {
    flex-shrink: 0;
    color: var(--text-secondary, #64748b);
    display: flex;
    align-items: center;
    justify-content: center;
}
.global-search-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 1rem;
}
.global-search-clear {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary, #64748b);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    transition: color 0.15s, background 0.15s;
}
.global-search-header.global-search-has-text .global-search-clear {
    display: flex;
}
.global-search-clear:hover {
    color: var(--text-primary, #0f172a);
    background: var(--border-color, #e2e8f0);
}
.global-search-kbd {
    font-size: 0.75rem;
    padding: 0.2rem 0.4rem;
    background: #eee;
    border-radius: 3px;
}
.global-search-results {
    overflow-y: auto;
    padding: 0.5rem;
    max-height: 50vh;
}
.global-search-category { margin-bottom: 0.75rem; }
.global-search-category-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}
.global-search-item {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--text-primary);
}
.global-search-item:hover,
.global-search-item.selected {
    background: #eee;
}
.global-search-item:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.global-search-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.global-search-item.disabled:hover,
.global-search-item.disabled.selected {
    background: transparent;
}
.global-search-results mark {
    background: rgba(255, 220, 100, 0.45);
    padding: 0 0.05em;
    border-radius: 2px;
}
/* Candidate hits: full card layout (same classes as /candidates; outer <a> wraps inner .card) */
.global-search-results .global-search-item.global-search-item--candidate-card {
    padding: 0.45rem 0.35rem;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
}
.global-search-results .global-search-item.global-search-item--candidate-card:hover,
.global-search-results .global-search-item.global-search-item--candidate-card.selected {
    background: transparent;
}
.global-search-results .global-search-item.global-search-item--candidate-card:focus {
    outline: none;
}
.global-search-results .global-search-item.global-search-item--candidate-card:focus .global-search-candidate-card-inner {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
.global-search-results .global-search-candidate-card-inner.candidates-grid-item {
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    overflow: hidden;
}
.global-search-results .global-search-item.global-search-item--candidate-card:hover .global-search-candidate-card-inner,
.global-search-results .global-search-item.global-search-item--candidate-card.selected .global-search-candidate-card-inner {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}
.global-search-results .global-search-candidate-card-inner.card.candidates-grid-item-color-0 { border-left: 5px solid #0066cc; background: linear-gradient(135deg, #e6f0fa 0%, #ffffff 45%, #cce0f5 100%); }
.global-search-results .global-search-item.global-search-item--candidate-card:hover .global-search-candidate-card-inner.card.candidates-grid-item-color-0,
.global-search-results .global-search-item.global-search-item--candidate-card.selected .global-search-candidate-card-inner.card.candidates-grid-item-color-0 { border-left-color: #0052a3; border-color: rgba(0, 102, 204, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 102, 204, 0.15); background: linear-gradient(135deg, #cce0f5 0%, #e6f0fa 100%); }
.global-search-results .global-search-candidate-card-inner.card.candidates-grid-item-color-1 { border-left: 5px solid #5a9b8e; background: linear-gradient(135deg, #e8f4f2 0%, #ffffff 45%, #d1eae5 100%); }
.global-search-results .global-search-item.global-search-item--candidate-card:hover .global-search-candidate-card-inner.card.candidates-grid-item-color-1,
.global-search-results .global-search-item.global-search-item--candidate-card.selected .global-search-candidate-card-inner.card.candidates-grid-item-color-1 { border-left-color: #4a8579; border-color: rgba(90, 155, 142, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(90, 155, 142, 0.15); background: linear-gradient(135deg, #d1eae5 0%, #e8f4f2 100%); }
.global-search-results .global-search-candidate-card-inner.card.candidates-grid-item-color-2 { border-left: 5px solid #7b68a8; background: linear-gradient(135deg, #efeef4 0%, #ffffff 45%, #e0dce8 100%); }
.global-search-results .global-search-item.global-search-item--candidate-card:hover .global-search-candidate-card-inner.card.candidates-grid-item-color-2,
.global-search-results .global-search-item.global-search-item--candidate-card.selected .global-search-candidate-card-inner.card.candidates-grid-item-color-2 { border-left-color: #6a5a92; border-color: rgba(123, 104, 168, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(123, 104, 168, 0.15); background: linear-gradient(135deg, #e0dce8 0%, #efeef4 100%); }
.global-search-results .global-search-candidate-card-inner.card.candidates-grid-item-color-3 { border-left: 5px solid #e67e00; background: linear-gradient(135deg, #fdf5eb 0%, #ffffff 45%, #fae8d0 100%); }
.global-search-results .global-search-item.global-search-item--candidate-card:hover .global-search-candidate-card-inner.card.candidates-grid-item-color-3,
.global-search-results .global-search-item.global-search-item--candidate-card.selected .global-search-candidate-card-inner.card.candidates-grid-item-color-3 { border-left-color: #c26900; border-color: rgba(230, 126, 0, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(230, 126, 0, 0.15); background: linear-gradient(135deg, #fae8d0 0%, #fdf5eb 100%); }
.global-search-results .global-search-candidate-card-inner.card.candidates-grid-item-color-4 { border-left: 5px solid #00854d; background: linear-gradient(135deg, #e6f5ee 0%, #ffffff 45%, #cceadd 100%); }
.global-search-results .global-search-item.global-search-item--candidate-card:hover .global-search-candidate-card-inner.card.candidates-grid-item-color-4,
.global-search-results .global-search-item.global-search-item--candidate-card.selected .global-search-candidate-card-inner.card.candidates-grid-item-color-4 { border-left-color: #006b3d; border-color: rgba(0, 133, 77, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 133, 77, 0.15); background: linear-gradient(135deg, #cceadd 0%, #e6f5ee 100%); }
.global-search-results .global-search-candidate-card-inner.card.candidates-grid-item-color-5 { border-left: 5px solid #b87a8a; background: linear-gradient(135deg, #f9f0f2 0%, #ffffff 45%, #f0e0e5 100%); }
.global-search-results .global-search-item.global-search-item--candidate-card:hover .global-search-candidate-card-inner.card.candidates-grid-item-color-5,
.global-search-results .global-search-item.global-search-item--candidate-card.selected .global-search-candidate-card-inner.card.candidates-grid-item-color-5 { border-left-color: #9d6674; border-color: rgba(184, 122, 138, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(184, 122, 138, 0.15); background: linear-gradient(135deg, #f0e0e5 0%, #f9f0f2 100%); }
.global-search-results .global-search-candidate-card-inner.candidates-grid-item-color-0 .candidates-grid-item-jobs { background: linear-gradient(180deg, #e6f0fa 0%, #cce0f5 100%); border-top-color: rgba(0, 102, 204, 0.4); }
.global-search-results .global-search-candidate-card-inner.candidates-grid-item-color-1 .candidates-grid-item-jobs { background: linear-gradient(180deg, #e8f4f2 0%, #d1eae5 100%); border-top-color: rgba(90, 155, 142, 0.4); }
.global-search-results .global-search-candidate-card-inner.candidates-grid-item-color-2 .candidates-grid-item-jobs { background: linear-gradient(180deg, #efeef4 0%, #e0dce8 100%); border-top-color: rgba(123, 104, 168, 0.4); }
.global-search-results .global-search-candidate-card-inner.candidates-grid-item-color-3 .candidates-grid-item-jobs { background: linear-gradient(180deg, #fdf5eb 0%, #fae8d0 100%); border-top-color: rgba(230, 126, 0, 0.4); }
.global-search-results .global-search-candidate-card-inner.candidates-grid-item-color-4 .candidates-grid-item-jobs { background: linear-gradient(180deg, #e6f5ee 0%, #cceadd 100%); border-top-color: rgba(0, 133, 77, 0.4); }
.global-search-results .global-search-candidate-card-inner.candidates-grid-item-color-5 .candidates-grid-item-jobs { background: linear-gradient(180deg, #f9f0f2 0%, #f0e0e5 100%); border-top-color: rgba(184, 122, 138, 0.4); }
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem 0.6rem;
    flex-wrap: wrap;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.3;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-title .global-search-candidate-card-name {
    color: #0f172a;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-fev-icon {
    display: inline-block;
    margin-right: 0.35rem;
    vertical-align: middle;
    color: #eab308;
}
.global-search-results .global-search-candidate-card-inner .candidates-row1-right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-view {
    flex-shrink: 0;
    border-radius: 10px;
    font-weight: 600;
    padding: 0.4rem 0.9rem;
    font-size: 0.8125rem;
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 100%);
    border: none;
    color: #fff;
    pointer-events: none;
    cursor: inherit;
}
.global-search-results .global-search-candidate-card-inner .candidates-loop-bubble {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 8px;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    border: none;
}
.global-search-results .global-search-candidate-card-inner .candidates-loop-internal {
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%);
    color: #6d28d9;
    box-shadow: 0 1px 3px rgba(109, 40, 217, 0.15);
}
.global-search-results .global-search-candidate-card-inner .candidates-loop-customer {
    background: linear-gradient(145deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1d4ed8;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.15);
}
.global-search-results .global-search-candidate-card-inner .candidates-loop-hr {
    background: linear-gradient(145deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    box-shadow: 0 1px 3px rgba(4, 120, 87, 0.15);
}
.global-search-results .global-search-candidate-card-inner .candidates-loop-added {
    background: linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%);
    color: #475569;
    box-shadow: 0 1px 2px rgba(71, 85, 105, 0.1);
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-row2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0;
    padding: 0 1.4rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-meta-sep {
    margin: 0 0.45rem;
    color: #cbd5e1;
    font-weight: 300;
    user-select: none;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-meta-item {
    color: #334155;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-meta-label {
    color: #64748b;
    margin-right: 0.25rem;
    font-size: 0.7875rem;
}
.global-search-results .global-search-candidate-card-inner .global-search-candidate-meta-val {
    color: #0369a1;
    font-weight: 500;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-row3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.4rem 0.9rem;
    background: linear-gradient(180deg, transparent 0%, #f8fcff 100%);
    font-size: 0.8125rem;
    line-height: 1.45;
    border-top: 1px solid #e2e8f0;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-item-jobs {
    padding: 0.5rem 1.4rem 0.75rem;
    background: linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 100%);
    border-top: 1px solid #bae6fd;
    border-radius: 0 0 12px 12px;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-job-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.25rem 0.4rem;
    padding: 0.2rem 0;
    font-size: 0.8125rem;
    line-height: 1.35;
    overflow: visible;
    min-height: 0;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-job-title {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: #0c4a6e;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-job-status-bubble {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-job-status-bubble.badge-active {
    background: #dcfce7;
    color: #15803d;
    border-color: #86efac;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-job-status-bubble.badge-hired {
    background: #dbeafe;
    color: #1d4ed8;
    border-color: #93c5fd;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-job-status-bubble.badge-hold {
    background: #fef9c3;
    color: #b45309;
    border-color: #fde047;
}
.global-search-results .global-search-candidate-card-inner .candidates-grid-job-status-bubble.badge-closed {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}
.global-search-view-all {
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-color);
    margin-top: 0.25rem;
}
.global-search-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
}
.global-search-view-all-link:hover {
    text-decoration: underline;
}
.global-search-hint {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    border-top: 1px solid var(--border-color);
}

/* ─── Clear buttons app-wide: red glow on hover (same as jobs filter Clear) ─── */
.topbar-search-clear:hover,
.candidate-detail-search-clear:hover,
.candidate-hero-search-wrap .candidate-detail-search-clear:hover,
.contacts-panel-search-clear:hover,
.groups-search-input-wrap .groups-search-clear:hover,
.open-pool-search-input-wrap .open-pool-search-clear:hover,
.standup-page .standup-search-clear:hover,
.standup-page .allocate-job-search-clear:hover,
.standup-page .allocate-btn-clear:hover,
.standup-page .standup-panel-tasks .standup-task-btn-clear:hover,
.standup-page .standup-tasks-filter-clear:hover,
.candidates-page .candidates-search-input-wrap .candidates-search-clear:hover,
.interviews-page .interviews-search-input-wrap .interviews-search-clear:hover,
.job-candidates-search-wrap .job-candidates-search-clear:hover,
.select-search-clear:hover,
.input-clear-btn:hover,
.input-with-clear .input-clear-btn:hover,
.add-user-page .input-with-clear .input-clear-btn:hover,
.create-candidate-page .form-group .input-with-clear .input-clear-btn:hover,
.check-existing-form .input-with-clear .input-clear-btn:hover,
.hot-jobs-search-wrap .hot-jobs-search-clear:hover,
.dropdowns-search-wrap .dropdowns-search-clear:hover,
.dropdowns-values-search-wrap .dropdowns-values-search-clear:hover,
.global-search-clear:hover,
.jobs-page .jobs-filter-clear:hover,
.jobs-page .open-pool-search-input-wrap .jobs-search-clear:hover,
a.filter-clear-link:hover,
.btn-reset-icon:hover,
#ichat-clear:hover,
#special_notes-clear-btn:hover {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #dc2626 !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}

/* Search result highlight: exact searched word(s) on /candidates and /jobs */
.search-highlight {
    background-color: rgba(255, 235, 0, 0.75);
    padding: 0 1px;
    border-radius: 2px;
}

/* Bulk process log (/settings/bulk-process-log): severity from event name only (API unchanged) */
.bulk-process-log-line--severity-error {
    background-color: rgba(254, 226, 226, 0.55);
    border-left: 3px solid #dc2626;
    padding-left: 0.35rem;
}
.bulk-process-log-line--severity-error .bulk-process-log-event,
.bulk-process-log-line--severity-error .bulk-process-log-raw {
    color: #b91c1c;
    font-weight: 600;
}
.bulk-process-log-line--severity-warn {
    background-color: rgba(254, 249, 195, 0.65);
    border-left: 3px solid #ca8a04;
    padding-left: 0.35rem;
}
.bulk-process-log-line--severity-warn .bulk-process-log-event {
    font-weight: 700;
    color: #a16207;
}
.bulk-process-log-line--severity-warn .bulk-process-log-raw {
    color: #854d0e;
}

/* Reporting hierarchy (/settings/users/reporting-hierarchy) */
.reporting-hierarchy-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 0 2rem;
}
.reporting-hierarchy-page.rh-page--readonly .rh-drop-zone,
.reporting-hierarchy-page.rh-page--readonly .rh-org-drop {
    cursor: default;
    opacity: 0.72;
    pointer-events: none;
}
.reporting-hierarchy-page.rh-page--readonly .rh-peer {
    cursor: default;
}
.reporting-hierarchy-page.rh-page--readonly .rh-drag-grip {
    opacity: 0.35;
}
.rh-readonly-banner {
    margin-bottom: 1rem;
}
.rh-back-link {
    display: inline-block;
    margin-bottom: 1rem;
}
.rh-hero {
    margin-bottom: 1.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12) 0%, rgba(99, 102, 241, 0.1) 50%, rgba(255, 255, 255, 0.92) 100%);
    border: 1px solid var(--border-color, #e2e8f0);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.rh-hero-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748b);
    margin: 0 0 0.35rem;
}
.rh-hero h1 {
    margin: 0 0 0.5rem;
    font-size: 1.65rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}
.rh-hero-desc {
    margin: 0;
    max-width: 42rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary, #475569);
}
.rh-card-block {
    margin-bottom: 1rem;
    border-radius: 12px;
}
.rh-card-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
}
.rh-instructions-body {
    padding: 1rem 1.25rem !important;
}
.rh-root-target {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
}
.rh-drop-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.15);
    color: var(--primary-color, #0284c7);
}
.rh-drop-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    font-weight: 400;
    margin-top: 0.15rem;
}
.rh-list-card .card-body.rh-list-card-body {
    padding: 0 !important;
}
.rh-list-header {
    padding: 1.15rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
}
.rh-list-lede {
    margin: 0.4rem 0 0;
    max-width: 46rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted, #64748b);
}
.rh-section-title--list {
    padding: 0;
    margin: 0;
    border-bottom: none;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
}
.rh-user-list {
    list-style: none;
    margin: 0;
    padding: 0.65rem 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.rh-user-row {
    --rh-depth: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(148px, 176px);
    gap: 0.85rem 1rem;
    align-items: stretch;
    margin-inline-start: calc(var(--rh-depth) * 1.15rem);
    padding: 0.9rem 1rem;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.07);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}
.rh-user-row:hover {
    border-color: rgba(14, 165, 233, 0.22);
    box-shadow:
        0 4px 14px rgba(15, 23, 42, 0.06),
        0 0 0 1px rgba(14, 165, 233, 0.08);
}
@media (max-width: 768px) {
    .rh-user-row {
        grid-template-columns: 1fr;
    }
}
.rh-user-main {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.85rem 1.15rem;
    min-width: 0;
    flex: 1;
}
.rh-user-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    flex: 1;
    min-width: min(100%, 220px);
}
.rh-user-avatar {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #0369a1;
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.2) 0%, rgba(99, 102, 241, 0.12) 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    user-select: none;
}
.rh-user-identity-body {
    min-width: 0;
    flex: 1;
}
.rh-peer {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: grab;
}
.rh-user-list .rh-peer {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 3px solid #0ea5e9;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
.rh-peer:active {
    cursor: grabbing;
}
.rh-drag-grip {
    flex-shrink: 0;
    margin-top: 0.2rem;
    color: #94a3b8;
    opacity: 0.85;
    user-select: none;
    line-height: 0;
}
.rh-drag-grip svg {
    display: block;
}
.rh-peer-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    min-width: 0;
    text-align: left;
}
.rh-peer-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    width: 100%;
}
.rh-peer-name {
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--text-primary, #0f172a);
    line-height: 1.3;
}
.rh-user-list .rh-peer-meta {
    display: block;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
}
.rh-inactive-badge {
    margin: 0;
    font-size: 0.65rem;
    vertical-align: middle;
}
.rh-reports-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    min-width: 9.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(51, 65, 85, 0.1);
    align-self: center;
}
.rh-reports-kicker {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}
.rh-reports-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.35;
    word-break: break-word;
}
.rh-drop-zone {
    border: 2px dashed rgba(100, 116, 139, 0.35);
    border-radius: 12px;
    padding: 0.7rem 0.65rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.2rem;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.65) 100%);
}
.rh-drop-zone.rh-drop-hover {
    border-color: #0ea5e9;
    border-style: solid;
    background: rgba(14, 165, 233, 0.09);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}
.rh-user-row .rh-manager-target {
    min-height: 5.5rem;
}
.rh-target-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: rgba(14, 165, 233, 0.12);
    color: #0284c7;
    margin-bottom: 0.1rem;
}
.rh-drop-hover .rh-target-icon {
    background: rgba(14, 165, 233, 0.22);
    color: #0369a1;
}
.rh-target-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: -0.01em;
}
.rh-target-sub {
    font-size: 0.7rem;
    font-weight: 500;
    color: #94a3b8;
    line-height: 1.3;
    max-width: 11rem;
}

.rh-tree-card-body {
    padding: 1.1rem 1.25rem 1.25rem !important;
}
.rh-section-title {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #0f172a);
}
.rh-section-hint {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--text-muted, #64748b);
}
.rh-tree-scroll {
    max-height: min(78vh, 640px);
    overflow: auto;
    padding: 0.5rem 0.35rem 0.75rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 45%, #fff 100%);
    border: 1px solid var(--border-color, #e2e8f0);
}
.rh-tree-host {
    min-height: 0.5rem;
}
.rh-tree-empty {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted, #64748b);
}
/* Org-chart tree (orthogonal connectors + depth colors + leaf swimlane) */
.rh-org-forest {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem 2.75rem;
    padding: 0.5rem 0.35rem 1rem;
}
.rh-org-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.rh-org-card-shell {
    position: relative;
    z-index: 2;
}
.rh-org-card-shell--root .rh-org-card {
    box-shadow:
        0 8px 28px rgba(15, 23, 42, 0.1),
        0 2px 10px rgba(15, 23, 42, 0.05);
}
.rh-org-card {
    min-width: 11.5rem;
    max-width: 16rem;
    border-width: 2px;
    border-style: solid;
    border-radius: 4px;
    background: #fff;
    text-align: center;
    overflow: hidden;
}
.rh-org-depth-0 {
    border-color: #1d4ed8;
    background: linear-gradient(180deg, #dbeafe 0%, #fff 50%);
}
.rh-org-depth-1 {
    border-color: #047857;
    background: linear-gradient(180deg, #d1fae5 0%, #fff 55%);
}
.rh-org-depth-2 {
    border-color: #b45309;
    background: linear-gradient(180deg, #fef3c7 0%, #fff 58%);
}
.rh-org-depth-3 {
    border-color: #6d28d9;
    background: linear-gradient(180deg, #ede9fe 0%, #fff 58%);
}
.rh-org-depth-4,
.rh-org-depth-5 {
    border-color: #475569;
    background: linear-gradient(180deg, #e2e8f0 0%, #fff 60%);
}
.rh-org-card-head {
    padding: 0.65rem 0.85rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
}
.rh-org-peer.rh-peer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.25rem;
    border: none;
    background: transparent;
    cursor: grab;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
}
.rh-org-peer.rh-peer:active {
    cursor: grabbing;
}
.rh-page--dragging .rh-org-peer.rh-peer {
    cursor: grabbing;
}
.rh-org-card.rh-org-card--drag-hover {
    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.45),
        0 10px 28px rgba(15, 23, 42, 0.14);
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.rh-org-peer .rh-drag-grip {
    opacity: 0.45;
    font-size: 0.6rem;
    letter-spacing: 0.02em;
}
.rh-org-peer .rh-peer-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}
.rh-org-peer .rh-peer-name {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    color: #0f172a;
}
.rh-org-peer .rh-peer-meta {
    margin-left: 0;
    font-size: 0.72rem;
    color: #64748b;
}
/* Role under @username: org chart + All users list */
.rh-peer-text .rh-peer-role-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    max-width: 100%;
}
.rh-peer-role-row--list {
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
}
.rh-peer-text .rh-peer-role-label {
    display: inline-block;
    max-width: 100%;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(51, 65, 85, 0.16);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: #1e293b;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.rh-user-list .rh-peer-text .rh-peer-role-label {
    border-radius: 6px;
    text-align: left;
}
.rh-org-drop.rh-drop-zone {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 2px dashed rgba(51, 65, 85, 0.35);
    padding: 0.4rem 0.45rem 0.45rem;
    min-height: 0;
    background: rgba(255, 255, 255, 0.65);
}
.rh-org-drop .rh-target-label {
    font-size: 0.68rem;
}
.rh-org-drop .rh-target-sub {
    font-size: 0.62rem;
    margin-top: 0.08rem;
}
.rh-org-bridge {
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.rh-org-bridge-v {
    display: block;
    width: 2px;
    background: #1e293b;
    border-radius: 1px;
}
.rh-org-bridge:not(.rh-org-bridge--direct) .rh-org-bridge-v {
    height: 0.8rem;
}
.rh-org-bridge--direct .rh-org-bridge-v {
    height: 1.25rem;
}
.rh-org-children {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem 1.5rem;
}
.rh-org-children:not(.rh-org-children--single) {
    border-top: 2px solid #1e293b;
    padding-top: 0.85rem;
    margin-top: -1px;
}
.rh-org-children--single {
    padding-top: 0;
    margin-top: 0;
}
.rh-org-children--leaf-band {
    margin-top: 0.2rem;
    padding: 1rem 1.35rem 1.1rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 12%, #e8eaef 100%);
    border: 1px solid #9ca3af;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.rh-org-children--leaf-band:not(.rh-org-children--single) {
    border-top: 2px solid #1e293b;
}
.rh-org-child-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.rh-org-child-stem {
    display: block;
    width: 2px;
    height: 0.8rem;
    background: #1e293b;
    border-radius: 1px;
    flex-shrink: 0;
}
.rh-org-node--warn {
    padding: 0.55rem 0.85rem;
    border-radius: 6px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    color: #92400e;
    font-size: 0.8rem;
    font-weight: 600;
    max-width: 15rem;
    text-align: center;
}
@media (max-width: 520px) {
    .rh-org-card {
        min-width: 10rem;
        max-width: 100%;
    }
    .rh-org-forest {
        gap: 1.5rem;
    }
}