/*
 * dashboard.css  —  Resume Optimizer Pro
 * Drop-in redesign for the ASP.NET MVC / Bootstrap 5 dashboard.
 * All selectors target existing markup in Index.cshtml.
 * No changes to the Razor / HTML required.
 *
 * Design tokens mirror the brand palette from the marketing site.
 */

/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand colours */
    --ro-blue:          #1363C6;   /* primary brand blue from style.css :root */
    --ro-blue-hover:    #0f52ad;
    --ro-blue-light:    #e8f0fc;
    --ro-blue-mid:      #b8d0f5;
    --ro-blue-glow:     rgba(19, 99, 198, 0.10);

    /* Surfaces */
    --ro-bg:            #ecf2fa;   /* page background */
    --ro-white:         #ffffff;
    --ro-surface-2:     #f7faff;   /* inner panel tint */

    /* Text */
    --ro-text:          #0f1523;
    --ro-text-2:        #3d4a6b;
    --ro-text-3:        #6b7a99;
    --ro-text-4:        #a8b4cc;

    /* Borders */
    --ro-border:        #dde4f0;
    --ro-border-focus:  var(--ro-blue);

    /* Status */
    --ro-green:         #22c55e;
    --ro-green-light:   #dcfce7;
    --ro-orange:        #f97316;

    /* Shadows */
    --ro-shadow-xs:  0 1px 2px rgba(15, 21, 35, 0.05);
    --ro-shadow-sm:  0 2px 6px rgba(15, 21, 35, 0.07);
    --ro-shadow:     0 4px 16px rgba(15, 21, 35, 0.09);
    --ro-shadow-lg:  0 10px 32px rgba(15, 21, 35, 0.11);

    /* Radii */
    --ro-r:    12px;
    --ro-r-sm: 8px;
    --ro-r-xs: 5px;

    /* Transitions */
    --ro-t: 0.16s ease;
}


/* ============================================================
   1. PAGE SHELL
   ============================================================ */

/* Page background */
.bg-controls {
    background-color: var(--ro-bg) !important;
}

/* Page-level container padding */
.container-fluid.py-4.bg-controls > .container {
    padding-top: 0.5rem;
}


/* ============================================================
   2. PAGE HEADER  (Welcome + action buttons row)
   ============================================================ */

/* "Welcome Danny" heading */
.container .row.pb-2 .h3 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ro-text);
    letter-spacing: -0.3px;
}

/* Sub-tagline */
.text-smaller {
    font-size: 0.95rem;
    color: var(--ro-text-3);
}

/* Align top-right buttons nicely */
.instructions-link {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.instructions-link p {
    margin-bottom: 0;
    display: flex;
    gap: 6px;
}

/* "Create new resume" / "Restore defaults" buttons */
.instructions-link .btn-outline-secondary {
    font-size: 0.8rem;
    font-weight: 500;
    padding: 5px 14px;
    border-radius: var(--ro-r-xs);
    border-color: var(--ro-border);
    color: var(--ro-text-2);
    background: var(--ro-white);
    transition: all var(--ro-t);
}

.instructions-link .btn-outline-secondary:hover {
    background: var(--ro-blue-light);
    border-color: var(--ro-blue-mid);
    color: var(--ro-blue);
}

/* Credits-remaining warning badge */
.badge.bg-warning a {
    color: #333;
    text-decoration: none;
    font-weight: 600;
}


/* ============================================================
   3. ACCORDION WRAPPER  (dashboard-accordion)
   ============================================================ */

.dashboard-accordion {
    margin-bottom: 12px;
}

/* Accordion item: card-style box */
.dashboard-accordion .accordion-item {
    border: 1px solid var(--ro-border) !important;
    border-radius: var(--ro-r) !important;
    background: var(--ro-white);
    box-shadow: var(--ro-shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--ro-t), border-color var(--ro-t);
    margin-bottom: 0 !important; /* we control spacing via .dashboard-accordion margin */
}

.dashboard-accordion .accordion-item:hover {
    box-shadow: var(--ro-shadow);
    border-color: var(--ro-blue-mid) !important;
}

/* Round ALL corners of the accordion item */
.dashboard-accordion .accordion-item,
.dashboard-accordion .accordion-button,
.dashboard-accordion .accordion-button:focus,
.dashboard-accordion .accordion-button:not(.collapsed) {
    border-radius: 0 !important; /* inner elements stay square inside the card */
}

/* Accordion header button — collapsed state */
.dashboard-accordion .accordion-button {
    background: var(--ro-white) !important;
    color: var(--ro-text) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    padding: 14px 18px !important;
    min-height: 48px !important;
    border-bottom: 1px solid transparent;
    transition: background var(--ro-t), border-color var(--ro-t);
    letter-spacing: -0.1px;
}

/* Accordion header button — expanded state */
.dashboard-accordion .accordion-button:not(.collapsed) {
    background: var(--ro-surface-2) !important;
    color: var(--ro-text) !important;
    border-bottom: 1px solid var(--ro-border) !important;
    box-shadow: none !important;
}

/* Chevron icon — smaller, brand colour when open */
.dashboard-accordion .accordion-button::after {
    width: 0.7rem;
    height: 0.7rem;
    background-size: 0.7rem;
    opacity: 0.5;
    transition: transform 0.22s ease-in-out, opacity 0.16s;
}

.dashboard-accordion .accordion-button:not(.collapsed)::after {
    opacity: 1;
    filter: none;
}

/* Focus ring */
.dashboard-accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px var(--ro-blue-glow) !important;
    border-color: var(--ro-blue-mid) !important;
    outline: none !important;
}

/* Accordion body */
.dashboard-accordion .accordion-body {
    padding: 0 !important;
    font-size: 0.875rem !important;
}

/* Inner controls container */
.dashboard-controls-container {
    /* Extra bottom padding for a little more white space below the last fields. */
    padding: 20px 22px 28px !important;
    background: var(--ro-white);
}


/* ============================================================
   4. SECTION LABELS  (fw-bolder labels above controls)
   ============================================================ */

.dashboard-controls-container .fw-bolder,
.dashboard-controls-container > .pt-3 > label.fw-bolder,
.form-group > label.fw-bolder {
    font-size: 0.8rem;
    font-weight: 700 !important;
    color: var(--ro-text-2);
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 6px;
}

/* Question-circle icon next to labels */
.fa-question-circle,
.fa-regular.fa-question-circle {
    color: var(--ro-text-4);
    font-size: 0.8rem;
    margin-left: 3px;
    cursor: pointer;
    transition: color var(--ro-t);
}

.fa-question-circle:hover,
.fa-regular.fa-question-circle:hover {
    color: var(--ro-blue);
}


/* ============================================================
   5. UPLOAD / DROP ZONE
   ============================================================ */

#dropZone {
    border: 2px dashed var(--ro-border);
    border-radius: var(--ro-r-sm);
    background: var(--ro-bg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--ro-t), background var(--ro-t);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#dropZone:hover {
    border-color: var(--ro-blue);
    background: var(--ro-blue-light);
}

#dropZone.has-file {
    border-color: var(--ro-blue);
    background: linear-gradient(180deg, #f7fbff 0%, var(--ro-blue-light) 100%);
    box-shadow: 0 0 0 3px var(--ro-blue-glow);
}

/* Upload icon */
#fileUploadIcon {
    font-size: 2rem !important;
    color: var(--ro-blue) !important;
    transition: transform var(--ro-t);
}

#dropZone:hover #fileUploadIcon {
    transform: translateY(-3px);
}

#dropZone.has-file #fileUploadIcon {
    color: var(--ro-blue) !important;
    transform: none;
}

#areaUpload {
    margin-bottom: 0 !important;
}

/* Upload helper text (generated by ViewBag.UploadResume) */
#dropZone .text-center > a,
#dropZone .text-center > span,
#dropZone small {
    font-size: 0.8rem;
    color: var(--ro-text-3);
}

#dropZone .text-center > a {
    color: var(--ro-blue);
    font-weight: 600;
    text-decoration: none;
}

#dropZone #filePlaceholder.file-selected {
    color: var(--ro-blue) !important;
    font-weight: 700;
}

#dropZone #uploadHint {
    font-size: 0.8rem;
    color: var(--ro-text-3);
}

#dropZone.has-file #uploadHint {
    display: none;
}

#dropZone .text-center > a:hover {
    text-decoration: underline;
}

#clearUploadedResumeBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 8px auto 0 !important;
    padding: 4px 10px !important;
    border: 1px solid var(--ro-blue-mid);
    border-radius: 999px;
    background: #ffffff;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ro-blue) !important;
    text-decoration: none !important;
}

#clearUploadedResumeBtn:hover {
    background: var(--ro-blue-light);
    border-color: var(--ro-blue);
    color: var(--ro-blue-hover) !important;
}

#clearUploadedResumeBtn:focus,
#clearUploadedResumeBtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ro-blue-glow);
}


/* ============================================================
   6. FORM CONTROLS  (inputs, textareas, selects)
   ============================================================ */

.dashboard-controls-container .form-control,
.dashboard-controls-container .form-select,
.accordion .accordion-body .form-control,
.accordion .accordion-body .form-select {
    font-size: 0.875rem !important;
    border-color: var(--ro-border) !important;
    border-radius: var(--ro-r-xs) !important;
    background-color: var(--ro-white) !important;
    color: var(--ro-text) !important;
    padding: 9px 12px !important;
    transition: border-color var(--ro-t), box-shadow var(--ro-t) !important;
}

.dashboard-controls-container .form-control:focus,
.dashboard-controls-container .form-select:focus,
.accordion .accordion-body .form-control:focus,
.accordion .accordion-body .form-select:focus {
    border-color: var(--ro-blue) !important;
    box-shadow: 0 0 0 3px var(--ro-blue-glow) !important;
    background-color: var(--ro-white) !important;
}

.dashboard-controls-container .form-control::placeholder {
    color: var(--ro-text-4) !important;
    font-style: normal;
}

/* Target role: opt-in "optimize for this role" toggle */
.target-role-optimize {
    padding-top: 8px;
    margin-bottom: 0;
}

.target-role-optimize .form-check-input {
    margin-top: 0;
    flex-shrink: 0;
}

.target-role-optimize label {
    margin-bottom: 0;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Job description textarea */
.jobtext-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.55 !important;
}

/* AI Resume Builder textarea */
.resume-creator-textarea {
    min-height: 200px;
    resize: vertical;
    line-height: 1.6 !important;
}

/* Target-role input */
#IdealJobTitle {
    font-size: 0.875rem !important;
}

/* Select arrows keep Bootstrap default but inherit radius */
.dashboard-controls-container .form-select {
    background-position: right 10px center;
}


/* ============================================================
   7. OUTPUT SETUP BANNER  (guided setup entry point)
   Replaces the Standard / Professional / Compact / Impact preset
   row that used to sit here, in the markup and in this file.
   See docs/output-personalization.md.
   ============================================================ */

.ro-setup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 4px;
    border: 1px solid var(--ro-border);
    border-radius: 12px;
    background: linear-gradient(180deg, #f7fbff 0%, var(--ro-blue-light) 100%);
}

/* Applied state drops the wash: the banner is now reporting, not inviting. */
.ro-setup-banner.is-personalized {
    background: var(--ro-white);
}

.ro-setup-banner-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1 1 260px;
    min-width: 0;
}

.ro-setup-banner-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--ro-blue-light);
    color: var(--ro-blue);
    font-size: 0.92rem;
}

.ro-setup-banner.is-personalized .ro-setup-banner-icon {
    background: #e6f6ec;
    color: #1a7f43;
}

.ro-setup-banner-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ro-text);
    line-height: 1.25;
}

.ro-setup-banner-sub {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ro-text-3);
    margin-top: 6px;
}

.ro-setup-banner-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex-shrink: 0;
}

.ro-setup-start {
    border: 0;
    border-radius: 8px;
    background: var(--optimize-cta-color, #1363c6);
    color: var(--ro-white);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 8px 18px;
    box-shadow: 0 3px 12px rgba(19, 99, 198, 0.28);
    transition: background var(--ro-t), box-shadow var(--ro-t);
}

.ro-setup-start:hover {
    background: var(--ro-blue-hover);
    color: var(--ro-white);
    box-shadow: 0 4px 16px rgba(19, 99, 198, 0.36);
}

/* The three post-apply actions are peers, so none of them outranks the options
   below: this banner reports state, it does not ask for another decision. */
.ro-setup-link {
    border: 1px solid var(--ro-border);
    border-radius: 999px;
    background: var(--ro-white);
    color: var(--ro-text-2);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    transition: border-color var(--ro-t), color var(--ro-t), background var(--ro-t);
}

.ro-setup-link:hover {
    border-color: #8fa8cb;
    background: rgba(19, 99, 198, 0.08);
    color: var(--optimize-cta-color, #1363c6);
}

/* Options the setup just moved, so the user sees what changed instead of
   hunting for it. Removed by script after ~1.8s. */
.ro-option-changed {
    animation: roOptionChanged 1.8s ease;
    border-radius: 10px;
}

@keyframes roOptionChanged {
    0%, 70% { box-shadow: 0 0 0 2px rgba(19, 99, 198, 0.45); background: rgba(19, 99, 198, 0.08); }
    100% { box-shadow: 0 0 0 2px rgba(19, 99, 198, 0); background: transparent; }
}

@media (max-width: 640px) {
    .ro-setup-banner-actions {
        width: 100%;
    }

    .ro-setup-start {
        width: 100%;
    }
}

/* ============================================================
   8. CHECKBOX CARDS (dashboard-v2 source of truth)
   ============================================================ */

.dashboard-v2 .form-check {
    padding-left: 0;
}

.dashboard-v2 .form-check .form-check-input {
    position: static;
    float: none;
    margin-left: 0;
    margin-top: 0;
}

.dashboard-v2 #personality-traits.checkboxContainer,
.dashboard-v2 #accordionOptions .checkboxContainer {
    --option-gap: 10px;
    display: grid !important;
    width: 100%;
    gap: var(--option-gap) !important;
    grid-template-columns: repeat(3, calc((100% - (2 * var(--option-gap))) / 3));
    align-items: stretch;
}

.dashboard-v2 .twoColumnCheckboxWidth,
.dashboard-v2 .threeColumnCheckboxWidth {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    flex: none !important;
    padding: 10px 12px;
    border: 1.5px solid #b7c6dd;
    border-radius: var(--ro-r-sm);
    background: var(--ro-white);
    transition: border-color var(--ro-t), background var(--ro-t);
    margin: 0 !important;
    cursor: pointer;
}

.dashboard-v2 #personality-traits .trait-wrapper .form-check-input,
.dashboard-v2 .twoColumnCheckboxWidth .form-check-input,
.dashboard-v2 .threeColumnCheckboxWidth .form-check-input {
    margin-right: 10px;
    flex-shrink: 0;
}

.dashboard-v2 #personality-traits .trait-wrapper label,
.dashboard-v2 .twoColumnCheckboxWidth label,
.dashboard-v2 .threeColumnCheckboxWidth label {
    font-size: 0.82rem !important;
    color: var(--ro-text-2);
    margin-left: 0 !important;
    margin-bottom: 0;
    cursor: pointer;
    flex: 1;
}

.dashboard-v2 .twoColumnCheckboxWidth:hover:not(.check-locked),
.dashboard-v2 .threeColumnCheckboxWidth:hover:not(.check-locked) {
    border-color: #8fa8cb;
    background: rgba(19, 99, 198, 0.08);
}

.dashboard-v2 .twoColumnCheckboxWidth:has(.form-check-input:checked),
.dashboard-v2 .threeColumnCheckboxWidth:has(.form-check-input:checked) {
    border-color: var(--optimize-cta-color, #1363c6);
    background: rgba(19, 99, 198, 0.14);
}

.dashboard-v2 .twoColumnCheckboxWidth:has(.form-check-input:checked) label,
.dashboard-v2 .threeColumnCheckboxWidth:has(.form-check-input:checked) label {
    color: var(--optimize-cta-color, #1363c6);
    font-weight: 600;
}

.dashboard-v2 .check-locked {
    opacity: 0.65;
    cursor: default !important;
}

.dashboard-v2 .check-locked label {
    cursor: default !important;
}

.dashboard-v2 .form-check-input:checked {
    background-color: var(--optimize-cta-color, #1363c6) !important;
    border-color: var(--optimize-cta-color, #1363c6) !important;
}

.dashboard-v2 .form-check-input:focus {
    box-shadow: 0 0 0 0.18rem rgba(19, 99, 198, 0.22) !important;
}

@media (max-width: 992px) {
    .dashboard-v2 #personality-traits.checkboxContainer,
    .dashboard-v2 #accordionOptions .checkboxContainer {
        grid-template-columns: repeat(2, calc((100% - var(--option-gap)) / 2));
    }
}

@media (max-width: 640px) {
    .dashboard-v2 #personality-traits.checkboxContainer,
    .dashboard-v2 #accordionOptions .checkboxContainer {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   9. PERSONALITY TRAITS SECTION
   ============================================================ */

#personality-traits-section > .mt-n3 label {
    font-size: 0.85rem;
}

/* Personalization mode radios: two boxes matching the trait / output boxes.
   Each box is one column of the trait grid wide; the group flows them with the
   same gap and tracks the trait grid's responsive column counts. */
.dashboard-v2 .personalization-mode-group {
    --option-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--option-gap);
}

.dashboard-v2 .personalization-mode {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border: 1.5px solid #b7c6dd;
    border-radius: var(--ro-r-sm);
    background: var(--ro-white);
    transition: border-color var(--ro-t), background var(--ro-t);
    margin: 0;
    cursor: pointer;
    /* Two equal columns so the pair fills the full row. */
    width: calc((100% - var(--option-gap)) / 2);
    max-width: 100%;
    min-height: 0;
}

@media (max-width: 640px) {
    .dashboard-v2 .personalization-mode {
        width: 100%;
    }
}

.dashboard-v2 .personalization-mode .form-check-input {
    margin: 0 10px 0 0;
    flex-shrink: 0;
    cursor: pointer;
}

.dashboard-v2 .personalization-mode label {
    margin-bottom: 0;
    cursor: pointer;
    color: var(--ro-text-2);
}

.dashboard-v2 .personalization-mode:hover {
    border-color: #8fa8cb;
    background: rgba(19, 99, 198, 0.08);
}

.dashboard-v2 .personalization-mode:has(.form-check-input:checked) {
    border-color: var(--optimize-cta-color, #1363c6);
    background: rgba(19, 99, 198, 0.14);
}

.dashboard-v2 .personalization-mode:has(.form-check-input:checked) label {
    color: var(--optimize-cta-color, #1363c6);
}

.dashboard-v2 #personalizationSwitchHelp {
    line-height: 1.4;
}

/* Natural Wording reassurance under the personalization radios. */
.dashboard-v2 .nw-check-note {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 6px;
    padding: 0 8px;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ro-text-2);
}

.dashboard-v2 .nw-check-note .bi {
    color: var(--optimize-cta-color, #1363c6);
}

/* "Do not personalize" switch wrapper */
.ms-2.pb-2 .form-check-label {
    font-size: 0.85rem;
    color: var(--ro-text-2);
}

/* Communication + saved-template selects match Resume Editor saved-template dropdown */
.dashboard-v2 #WritingStyle,
.dashboard-v2 #CustomTemplate {
    width: 100% !important;
    max-width: none !important;
    min-height: 40px;
    color: #1f335a !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1px;
    padding: 0.45rem 2.1rem 0.45rem 0.75rem !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%231363c6' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

/* Shared edge for these selects and the dashboard Job posting box, kept in one rule set so the
   two cannot drift apart. Only the edge is shared, never the bold text or the chevron. The Job
   posting selector is scoped with :not([required]) because the Cover Letter Creator reuses the
   same wrappers and ids for a required field that keeps the standard input look. */
.dashboard-v2 #WritingStyle,
.dashboard-v2 #CustomTemplate,
.dashboard-v2 #accordionInputs .inputs-right-stack #JobText:not([required]) {
    border: 1.5px solid #9bb9ea !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(19, 99, 198, 0.10);
}

.dashboard-v2 #WritingStyle:hover,
.dashboard-v2 #CustomTemplate:hover,
.dashboard-v2 #accordionInputs .inputs-right-stack #JobText:not([required]):hover {
    border-color: #5f95dd !important;
    box-shadow: 0 4px 12px rgba(19, 99, 198, 0.14);
}

.dashboard-v2 #WritingStyle:focus,
.dashboard-v2 #CustomTemplate:focus,
.dashboard-v2 #accordionInputs .inputs-right-stack #JobText:not([required]):focus {
    border-color: #1363c6 !important;
    box-shadow: 0 0 0 3px rgba(19, 99, 198, 0.16), 0 4px 12px rgba(19, 99, 198, 0.18) !important;
    outline: none;
}

.dashboard-v2 #WritingStyle option,
.dashboard-v2 #CustomTemplate option {
    font-weight: 600;
    color: #1f335a;
}

/* Match Resume builder textarea border treatment to Communication style dropdown */
.dashboard-v2 #ResumeText {
    border: 1.5px solid #9bb9ea !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    color: #1f335a !important;
    box-shadow: 0 2px 8px rgba(19, 99, 198, 0.10);
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.dashboard-v2 #ResumeText:hover {
    border-color: #5f95dd !important;
    box-shadow: 0 4px 12px rgba(19, 99, 198, 0.14);
}

.dashboard-v2 #ResumeText:focus {
    border-color: #1363c6 !important;
    box-shadow: 0 0 0 3px rgba(19, 99, 198, 0.16), 0 4px 12px rgba(19, 99, 198, 0.18) !important;
    outline: none;
}

/* Motivators input */
#Motivators {
    width: 100%;
    max-width: none;
}


/* ============================================================
   10. TEMPLATE GRID  (existing .template-card styles enhanced)
   ============================================================ */

.template-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.template-grid > div {
    min-width: 0;
    --tpl-accent: #2f62d7;
    --tpl-bg-start: #edf3ff;
    --tpl-bg-end: #dde7ff;
}

.template-grid > div:nth-child(5n + 1) {
    --tpl-accent: #2f62d7;
    --tpl-bg-start: #edf3ff;
    --tpl-bg-end: #dde7ff;
}

.template-grid > div:nth-child(5n + 2) {
    --tpl-accent: #0f766e;
    --tpl-bg-start: #e8fbf5;
    --tpl-bg-end: #d8f0ea;
}

.template-grid > div:nth-child(5n + 3) {
    --tpl-accent: #a855f7;
    --tpl-bg-start: #f6ecff;
    --tpl-bg-end: #ead9ff;
}

.template-grid > div:nth-child(5n + 4) {
    --tpl-accent: #d97706;
    --tpl-bg-start: #fff3e6;
    --tpl-bg-end: #ffe6c9;
}

.template-grid > div:nth-child(5n + 5) {
    --tpl-accent: #0369a1;
    --tpl-bg-start: #e8f4ff;
    --tpl-bg-end: #d7ebff;
}

.template-card {
    position: relative;
    border: 1.5px solid var(--ro-border) !important;
    border-radius: var(--ro-r-sm) !important;
    background: var(--ro-white) !important;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--ro-t), box-shadow var(--ro-t), transform var(--ro-t) !important;
}

.template-card:hover {
    border-color: var(--ro-blue) !important;
    box-shadow: var(--ro-shadow) !important;
    transform: translateY(-2px);
}

.template-card.is-selected,
.template-radio:checked + .template-card {
    border-color: var(--ro-blue) !important;
    box-shadow: 0 0 0 3px var(--ro-blue-glow), 0 4px 16px rgba(15, 21, 35, 0.12) !important;
}

.template-preview {
    position: relative;
    background: linear-gradient(145deg, var(--tpl-bg-start), var(--tpl-bg-end)) !important;
    border-bottom: 1px solid var(--ro-border) !important;
    padding: 10px !important;
}

.template-preview::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 5px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    pointer-events: none;
}

.template-preview img {
    display: block;
    width: 100%;
    background: #ffffff;
    border-radius: 4px !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10) !important;
}

.template-meta {
    padding: 8px 10px !important;
    background: linear-gradient(180deg, var(--ro-white) 0%, #f8fbff 100%) !important;
    border-top: 1px solid var(--ro-border) !important;
    box-shadow: inset 3px 0 0 var(--tpl-accent);
}

.template-name {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--ro-text-2) !important;
}

.template-card.is-selected .template-name,
.template-radio:checked + .template-card .template-name {
    color: var(--ro-blue) !important;
}

/* Selected check overlay */
.template-check {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ro-blue);
    display: none;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    box-shadow: 0 1px 4px rgba(19, 99, 198, 0.35);
}

.template-check::after {
    content: '\2713';
}

.template-card.is-selected .template-check,
.template-radio:checked + .template-card .template-check {
    display: flex;
}

/* ============================================================
   11. AI RESUME BUILDER SECTION
   ============================================================ */

/* Inner card */
#collapseResumeCreator .card {
    border: 1px solid var(--ro-border) !important;
    border-radius: var(--ro-r-sm) !important;
    box-shadow: none !important;
}

#collapseResumeCreator .card-body {
    padding: 18px 20px !important;
}

#collapseResumeCreator .card h6.text-primary {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: var(--ro-blue) !important;
}

/* Numbered list items */
#collapseResumeCreator .list-group-item {
    font-size: 0.83rem !important;
    padding-bottom: 10px !important;
    border: none !important;
}

#collapseResumeCreator .list-group-item .fw-bold {
    font-size: 0.83rem !important;
    color: var(--ro-text) !important;
}

/* Load Example button */
#btnLoadSampleContent {
    font-size: 0.78rem !important;
    border-radius: var(--ro-r-xs) !important;
    border-color: var(--ro-blue) !important;
    color: var(--ro-blue) !important;
}

#btnLoadSampleContent:hover {
    background: var(--ro-blue-light) !important;
}


/* ============================================================
   12. SUBMIT BUTTON
   ============================================================ */

.button-submit,
button.button-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 36px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: var(--ro-r-sm) !important;
    background: var(--ro-blue) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    transition: background var(--ro-t), transform var(--ro-t), box-shadow var(--ro-t);
    box-shadow: 0 3px 12px rgba(19, 99, 198, 0.30);
    letter-spacing: 0.1px;
}

.button-submit:hover {
    background: var(--ro-blue-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(19, 99, 198, 0.38) !important;
}

.button-submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(19, 99, 198, 0.25) !important;
}

/* Submit wrapper */
.pt-3:has(.button-submit) {
    padding-top: 20px !important;
}


/* ============================================================
   13. PRO BADGE
   ============================================================ */

.pro-badge {
    font-size: 0.68rem !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    background: #f1f5f9 !important;
    color: var(--ro-text-3) !important;
    border: 1px solid var(--ro-border) !important;
    cursor: pointer;
    transition: border-color var(--ro-t), color var(--ro-t);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
}

.pro-badge:hover {
    border-color: var(--ro-blue) !important;
    color: var(--ro-blue) !important;
}

.pro-badge .fa-lock {
    font-size: 0.65rem;
    opacity: 0.7;
}


/* ============================================================
   14. OUTPUT SUMMARY CHIPS
   ============================================================ */

#outputSummaryChips {
    gap: 6px !important;
}

/* Each chip injected by JS */
#outputSummaryChips .badge,
#outputSummaryChips span {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    background: var(--ro-blue-light) !important;
    color: var(--ro-blue) !important;
    border: 1px solid var(--ro-blue-mid) !important;
}


/* ============================================================
   15. ACCORDION SECTION DIVIDERS  (small "Your output includes" label)
   ============================================================ */

.form-group > label.fw-bolder {
    color: var(--ro-text-2);
}


/* ============================================================
   17. TOOLTIP
   ============================================================ */

.tooltip-inner {
    background-color: #1e2a3a !important;
    color: #f0f5ff !important;
    font-size: 0.775rem !important;
    border-radius: var(--ro-r-xs) !important;
    padding: 7px 11px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    /* Bootstrap centres tooltip text. Almost every tooltip we write is a full sentence
       and several wrap to three lines, where a centred ragged edge on both sides is
       measurably harder to read than a flush left one. Set here rather than per surface
       so the dashboard and the public builder keep the same bubble. */
    text-align: left !important;
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #1e2a3a !important;
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #1e2a3a !important;
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before,
.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: #1e2a3a !important;
}


/* ============================================================
   18. CREDITS WARNING
   ============================================================ */

#CreditsRemaining {
    color: var(--ro-blue);
    font-weight: 700;
}


/* ============================================================
   19. FADE-IN ANIMATION  (staggered accordion reveal)
   ============================================================ */

@keyframes ro-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dashboard-accordion:nth-child(1) { animation: ro-fade-up 0.35s ease both; }
.dashboard-accordion:nth-child(2) { animation: ro-fade-up 0.35s 0.06s ease both; }
.dashboard-accordion:nth-child(3) { animation: ro-fade-up 0.35s 0.12s ease both; }
.dashboard-accordion:nth-child(4) { animation: ro-fade-up 0.35s 0.18s ease both; }
.dashboard-accordion:nth-child(5) { animation: ro-fade-up 0.35s 0.24s ease both; }


/* ============================================================
   20. MODALS  (align with redesign, keep existing structure)
   ============================================================ */

/* Modal card rounding */
.skill-modal-content,
.modal-content {
    border-radius: var(--ro-r) !important;
    border: none !important;
    box-shadow: var(--ro-shadow-lg) !important;
    overflow: hidden;
}

/* Modal header gradient (existing .bg-gradient-primary kept as-is) */
.modal-header.bg-gradient-primary {
    padding: 14px 20px !important;
}

.modal-header.bg-gradient-primary .modal-title {
    font-size: 0.92rem !important;
    font-weight: 700 !important;
}

/* Modal body */
.modal-body {
    font-size: 0.875rem !important;
    line-height: 1.65 !important;
}

/* Modal footer */
.modal-footer {
    padding: 12px 20px !important;
    border-top: 1px solid var(--ro-border) !important;
    background: var(--ro-surface-2);
}

/* Buttons inside modals */
.modal .btn-primary {
    background: var(--ro-blue) !important;
    border-color: var(--ro-blue) !important;
    border-radius: var(--ro-r-xs) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 7px 18px !important;
    transition: all var(--ro-t) !important;
}

.modal .btn-primary:hover {
    background: var(--ro-blue-hover) !important;
    border-color: var(--ro-blue-hover) !important;
    transform: translateY(-1px);
}

.modal .btn-outline-primary {
    border-radius: var(--ro-r-xs) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 7px 18px !important;
    transition: all var(--ro-t) !important;
}

.modal .btn-outline-secondary {
    border-radius: var(--ro-r-xs) !important;
    font-size: 0.85rem !important;
    padding: 7px 18px !important;
    color: var(--ro-text-2) !important;
    border-color: var(--ro-border) !important;
    transition: all var(--ro-t) !important;
}

.modal .btn-outline-secondary:hover {
    background: var(--ro-bg) !important;
    border-color: var(--ro-blue-mid) !important;
    color: var(--ro-blue) !important;
}

/* Skills modal info alert */
.modal-body .alert-info {
    background: var(--ro-blue-light) !important;
    border: 1px solid var(--ro-blue-mid) !important;
    border-radius: var(--ro-r-xs) !important;
    font-size: 0.82rem !important;
    color: var(--ro-text-2) !important;
}

/* Skill-list container */
.skills-list-container {
    font-size: 0.84rem;
}

/* Review Skills modal (target-role-only flow) */
#modalSkills .skills-review-modal-content {
    border: 1px solid var(--ro-border) !important;
    border-radius: var(--ro-r) !important;
    box-shadow: var(--ro-shadow-lg) !important;
}

#modalSkills .skills-review-subheader {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ro-white);
    border-bottom: 1px solid var(--ro-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
}

#modalSkills .skills-review-subheader-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

#modalSkills .skills-review-title-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ro-blue-light);
    color: var(--ro-blue);
    font-size: 0.92rem;
    flex-shrink: 0;
}

#modalSkills .skills-review-subheader-title {
    color: var(--ro-text) !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.2;
}

#modalSkills .skills-review-subheader-sub {
    color: var(--ro-text-3);
    font-size: 0.76rem;
    line-height: 1.2;
    margin-top: 1px;
}

#modalSkills .skills-review-subheader-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

#modalSkills .skills-review-subheader-actions .btn {
    min-height: 34px;
    padding: 6px 12px !important;
    font-size: 0.82rem !important;
}

#modalSkills .skills-review-modal-body {
    background: var(--ro-bg) !important;
    color: var(--ro-text-2);
}

#modalSkills .skills-review-info-alert {
    background: var(--ro-blue-light) !important;
    border: 1px solid var(--ro-blue-mid) !important;
    border-radius: var(--ro-r-sm) !important;
    color: var(--ro-text-2) !important;
    box-shadow: 0 2px 8px rgba(19, 99, 198, 0.12) !important;
}

#modalSkills .skills-review-info-alert > i {
    align-self: center;
}

#modalSkills #SkillsNotFound_SkillsModal.skills-list-container {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    padding-right: 8px;
}

/* Wider than modal-lg (800px). Three columns at 800px leaves roughly 150px per
   label once the checkbox, padding and Pro badge are taken out, which wraps the
   common two-word skills ("Customer Communication", "Inventory Management").
   Only applies from lg up, where the grid is actually 3 columns. */
@media (min-width: 992px) {
    #modalSkills .modal-dialog {
        max-width: min(1160px, calc(100vw - 3rem));
    }
}

#modalSkills #skills-checkboxes.skills-options-list,
#modalSkills #skills-checkboxes.skills-options-list .skill-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* Section and group headers, plus the .skill-group wrapper itself, span all
   columns so cards inside flow as a 3-column grid while their headers stay
   on their own full-width row. */
#modalSkills #skills-checkboxes .skill-section-header,
#modalSkills #skills-checkboxes .skill-group,
#modalSkills #skills-checkboxes .skill-group-header {
    grid-column: 1 / -1;
}

@media (max-width: 991.98px) {
    #modalSkills #skills-checkboxes.skills-options-list,
    #modalSkills #skills-checkboxes.skills-options-list .skill-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    #modalSkills #skills-checkboxes.skills-options-list,
    #modalSkills #skills-checkboxes.skills-options-list .skill-group {
        grid-template-columns: minmax(0, 1fr);
    }
}

#modalSkills .skill-option-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1.5px solid #b7c6dd;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-white);
    padding: 8px 10px;
    transition: border-color .14s ease, background .14s ease;
    cursor: pointer;
}

#modalSkills .skill-option-card:hover:not(.check-locked) {
    border-color: #8fa8cb;
    background: rgba(19, 99, 198, 0.08);
}

#modalSkills .skill-option-card.is-checked {
    border-color: var(--optimize-cta-color, #1363c6);
    background: rgba(19, 99, 198, 0.14);
}

#modalSkills .skill-option-checkbox {
    margin: 3px 0 0;
    flex-shrink: 0;
}

#modalSkills .skill-option-checkbox:checked {
    background-color: var(--optimize-cta-color, #1363c6);
    border-color: var(--optimize-cta-color, #1363c6);
}

#modalSkills .skill-option-checkbox:focus {
    box-shadow: 0 0 0 0.18rem rgba(19, 99, 198, 0.22);
}

#modalSkills .skill-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

#modalSkills .skill-option-label {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--dash-text-2);
    line-height: 1.35;
    min-width: 0;
}

#modalSkills .skill-option-card.is-checked .skill-option-label {
    color: var(--optimize-cta-color, #1363c6);
}

#modalSkills .skill-option-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    #modalSkills .skills-review-subheader {
        flex-direction: column;
        align-items: flex-start;
    }

    #modalSkills .skills-review-subheader-actions {
        width: 100%;
    }

    #modalSkills .skills-review-subheader-actions .btn {
        flex: 1 1 auto;
    }
}

/* Unified style for dashboard utility modals (exclude modalJobMatchAnalysis) */
#modalSkills .skills-review-modal-content,
#modalAutoOptimizeConfirm .modal-content,
#noCreditsModal .modal-content {
    border: 1px solid #c6d6ec !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 44px rgba(15, 21, 35, 0.18) !important;
    background: #ffffff !important;
}

#modalSkills .skills-review-subheader,
#modalAutoOptimizeConfirm .modal-header,
#noCreditsModal .modal-header {
    background: #e6eef9 !important;
    border-bottom: 1px solid #c6d6ec !important;
    color: #1f335a !important;
}

#modalAutoOptimizeConfirm .modal-header.bg-gradient-primary,
#noCreditsModal .modal-header.bg-gradient-primary {
    background: #e6eef9 !important;
}

#modalSkills .skills-review-subheader-title,
#modalAutoOptimizeConfirm .modal-title,
#noCreditsModal .modal-title {
    color: #1f335a !important;
}

#modalSkills .skills-review-title-icon {
    background: rgba(19, 99, 198, 0.12) !important;
    color: #1363c6 !important;
}

#modalAutoOptimizeConfirm .modal-header .text-warning,
#noCreditsModal .modal-header .text-warning {
    color: #1363c6 !important;
}

#modalAutoOptimizeConfirm .btn-close.btn-close-white,
#noCreditsModal .btn-close.btn-close-white {
    filter: none;
    opacity: 0.7;
}

#modalSkills .skills-review-modal-body,
#modalAutoOptimizeConfirm .modal-body,
#noCreditsModal .modal-body,
#noCreditsModal .modal-body.bg-light {
    background: #f7faff !important;
    color: #3b4d73 !important;
}

#modalAutoOptimizeConfirm .modal-body p,
#noCreditsModal #upgradeMessage,
#noCreditsModal .modal-body.text-center {
    color: #3b4d73 !important;
}

#modalAutoOptimizeConfirm .modal-footer,
#noCreditsModal .modal-footer {
    background: #f1f6fe !important;
    border-top: 1px solid #d5e0f0 !important;
}

#modalSkills .btn-outline-secondary,
#modalAutoOptimizeConfirm .btn-outline-secondary,
#noCreditsModal .btn-outline-secondary {
    border-color: #9ab0d1 !important;
    color: #2a4169 !important;
    background: #ffffff !important;
}

#modalSkills .btn-outline-secondary:hover,
#modalAutoOptimizeConfirm .btn-outline-secondary:hover,
#noCreditsModal .btn-outline-secondary:hover {
    border-color: #7f9ec8 !important;
    color: #1a3b68 !important;
    background: #edf3fc !important;
}

#modalSkills .btn-primary,
#modalAutoOptimizeConfirm .btn-primary,
#noCreditsModal .btn-primary {
    background: #1363c6 !important;
    border-color: #1363c6 !important;
}

#modalSkills .btn-primary:hover,
#modalAutoOptimizeConfirm .btn-primary:hover,
#noCreditsModal .btn-primary:hover {
    background: #0f56ad !important;
    border-color: #0f56ad !important;
}


/* ============================================================
   22. MISC UTILITIES
   ============================================================ */

/* "Job posting" optional label helper text */
.form-text,
small.text-muted {
    font-size: 0.78rem !important;
    color: var(--ro-text-3) !important;
}

/* Thin separator between control groups */
.dashboard-controls-container .pt-3 {
    padding-top: 18px !important;
}

/* Output options: live resume preview */
.dashboard-v2 .output-live-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.dashboard-v2 .output-live-left {
    min-width: 0;
}

.dashboard-v2 .output-live-options {
    min-width: 0;
}

.dashboard-v2 .output-live-options.checkboxContainer {
    grid-template-columns: repeat(2, calc((100% - var(--option-gap)) / 2)) !important;
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
}

.dashboard-v2 #ProfessionalSummaryStyleOptions.checkboxContainer {
    grid-template-columns: repeat(3, calc((100% - (2 * var(--option-gap))) / 3));
    align-content: start;
    align-items: start;
    grid-auto-rows: max-content;
}

.dashboard-v2 .output-live-preview-panel {
    position: sticky;
    top: 0;
    align-self: stretch;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1.5px solid #d8e1ef;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 21, 35, 0.08);
    overflow: hidden;
}

.dashboard-v2 .output-live-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #e2e8f4;
    background: #f8fbff;
}

.dashboard-v2 .output-live-preview-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #2b3c5e;
}

.dashboard-v2 .output-live-preview-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #27c58f;
    box-shadow: 0 0 0 0 rgba(39, 197, 143, 0.45);
    animation: output-live-pulse 1.8s infinite;
}

@keyframes output-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(39, 197, 143, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(39, 197, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 197, 143, 0); }
}

.dashboard-v2 .output-live-preview-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 10px 12px 12px;
}

.dashboard-v2 .output-live-resume {
    flex: 1;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    padding: 14px 14px 10px;
    min-height: 0;
    font-family: "Helvetica", sans-serif;
    font-size: 11px;
    line-height: 1.3;
    color: #1b2231;
}

.dashboard-v2 .output-live-resume .ol-name {
    text-align: left;
    font-size: 22px;
    line-height: 1.06;
    font-weight: 400;
    margin-bottom: 6px;
}

.dashboard-v2 .output-live-resume .ol-role,
.dashboard-v2 .output-live-resume .ol-contact {
    text-align: left;
    color: #1b2231;
    margin-top: 0;
}

.dashboard-v2 .output-live-resume .ol-role {
    font-size: 13px;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 5px;
}

.dashboard-v2 .output-live-resume .ol-contact {
    font-size: 10px;
    margin-bottom: 8px;
}

.dashboard-v2 .output-live-resume .ol-link {
    color: #1a56c8;
    text-decoration: none;
}

.dashboard-v2 .output-live-resume .ol-block {
    margin-top: 11px;
}

.dashboard-v2 .output-live-resume .ol-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0 0 7px 0;
    padding-bottom: 4px;
    border-bottom: 2px solid #000;
    line-height: 1.2;
}

.dashboard-v2 .output-live-resume p {
    margin: 0 0 5px 0;
}

.dashboard-v2 .output-live-resume ul {
    margin: 5px 0 0 0;
    padding-left: 17px;
}

.dashboard-v2 .output-live-resume li {
    margin-bottom: 4px;
}

.dashboard-v2 .output-live-resume .ol-job-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
    margin-bottom: 6px;
}

.dashboard-v2 .output-live-resume .ol-job-company {
    font-weight: 700;
}

.dashboard-v2 .output-live-resume .ol-job-title {
    font-weight: 700;
}

.dashboard-v2 .output-live-resume .ol-job-dates {
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-v2 .output-live-resume .ol-keyskills-label {
    font-weight: 700;
}

.dashboard-v2 .output-live-resume .ol-achievement {
    background: transparent;
    border-radius: 2px;
    padding: 0 1px;
}

.dashboard-v2 .output-live-resume .ol-metric {
    color: inherit;
    font-weight: 400;
}

.dashboard-v2 .output-live-resume .ol-skill-group {
    font-weight: 700;
}

.dashboard-v2 .output-live-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.dashboard-v2 .output-live-flag {
    font-size: 0.68rem;
    color: #667892;
    border: 1px solid #d8e1ef;
    background: #f8fbff;
    border-radius: 999px;
    padding: 1px 8px;
}

.dashboard-v2 .output-live-flag.is-on {
    color: #1f6b45;
    border-color: #bfe5cd;
    background: #eefaf3;
}

.dashboard-v2 .output-live-preview-panel .ol-summary-bullets,
.dashboard-v2 .output-live-preview-panel .ol-objective,
.dashboard-v2 .output-live-preview-panel .ol-role-summary,
.dashboard-v2 .output-live-preview-panel .ol-new-bullet,
.dashboard-v2 .output-live-preview-panel .ol-metrics-bullet,
.dashboard-v2 .output-live-preview-panel .ol-tech-profile,
.dashboard-v2 .output-live-preview-panel .ol-additional-sections,
.dashboard-v2 .output-live-preview-panel .ol-skills-categorized {
    display: none;
}

.dashboard-v2 .output-live-preview-panel[data-summary-style="BulletList"] .ol-summary-paragraph {
    display: none;
}

.dashboard-v2 .output-live-preview-panel[data-summary-style="BulletList"] .ol-summary-bullets {
    display: block;
}

.dashboard-v2 .output-live-preview-panel[data-summary-style="None"] .ol-summary-wrap {
    display: none;
}

.dashboard-v2 .output-live-preview-panel.is-highlight-achievements .ol-achievement {
    font-weight: 700;
}

.dashboard-v2 .output-live-preview-panel.is-add-new-bullets .ol-new-bullet {
    display: list-item;
}

.dashboard-v2 .output-live-preview-panel.is-streamline .ol-streamline-candidate {
    display: none;
}

.dashboard-v2 .output-live-preview-panel.is-objective .ol-objective {
    display: block;
}

.dashboard-v2 .output-live-preview-panel.is-role-summaries .ol-role-summary {
    display: block;
}

.dashboard-v2 .output-live-preview-panel.is-add-metrics .ol-metrics-bullet {
    display: list-item;
}

.dashboard-v2 .output-live-preview-panel.is-add-metrics .ol-metric {
    color: #157a4a;
    font-weight: 700;
}

.dashboard-v2 .output-live-preview-panel.is-technical-profile .ol-tech-profile {
    display: block;
}

.dashboard-v2 .output-live-preview-panel.is-categorize-skills .ol-skills-plain {
    display: none;
}

.dashboard-v2 .output-live-preview-panel.is-categorize-skills .ol-skills-categorized {
    display: block;
}

.dashboard-v2 .output-live-preview-panel.is-additional-sections .ol-additional-sections {
    display: block;
}

@media (max-width: 1199.98px) {
    .dashboard-v2 .output-live-layout {
        grid-template-columns: 1fr;
    }

    .dashboard-v2 .output-live-options.checkboxContainer {
        grid-template-columns: repeat(2, calc((100% - var(--option-gap)) / 2)) !important;
    }

    .dashboard-v2 .output-live-preview-panel {
        position: static;
        min-height: 0;
        height: auto;
    }

    .dashboard-v2 .output-live-resume {
        min-height: 520px;
    }
}

@media (max-width: 992px) {
    .dashboard-v2 #ProfessionalSummaryStyleOptions.checkboxContainer {
        grid-template-columns: repeat(2, calc((100% - var(--option-gap)) / 2));
    }
}

@media (max-width: 640px) {
    .dashboard-v2 #ProfessionalSummaryStyleOptions.checkboxContainer {
        grid-template-columns: 1fr;
    }
}

/* Row gutter inside accordion */
.gx-md-3 {
    --bs-gutter-x: 1.25rem;
}

/* "Choose a built-in template…" subheading */
.dashboard-controls-container .ms-2.pb-3,
#customTemplateActiveNotice {
    font-size: 0.84rem;
    color: var(--ro-text-3);
}

/* ResumeStyleArea (resume type select) */
#ResumeStyleArea label,
#ProfessionalSummaryStyleArea label {
    margin-left: 0 !important;
}

/* "Your output includes" label */
.form-group:has(#outputSummaryChips) > label {
    font-size: 0.8rem;
    font-weight: 700 !important;
    color: var(--ro-text-2);
    letter-spacing: 0.3px;
    padding: 0 !important;
    margin-bottom: 8px !important;
    display: block;
}


/* ============================================================
   23. RESPONSIVE  (keep existing mobile behaviour intact)
   ============================================================ */

@media (max-width: 767.98px) {
    .dashboard-controls-container {
        padding: 14px 14px !important;
    }

    .dashboard-v2 .output-live-options.checkboxContainer {
        grid-template-columns: 1fr !important;
    }

    .template-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .instructions-link {
        justify-content: flex-start;
        margin-top: 4px;
    }
}

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


/* ============================================================
   MIGRATED FROM Dashboard/Index.cshtml INLINE STYLE
   ============================================================ */

    /* Design tokens + shared app-page shell (font, top/bottom padding, container
       width, page header + title + subtitle) now live in dashboard-shell.css,
       loaded before this file on every dashboard page. Single source of truth so
       Dashboard, Career Climber, Document Manager, Cover Letter Creator, Job
       Tracker, Job Match, and Account all render the header identically. */

    .credits-pill {
        background: var(--dash-white);
        border: 1px solid var(--dash-border);
        border-radius: 999px;
        padding: 6px 12px;
        font-size: 0.78rem;
        box-shadow: var(--dash-shadow-sm);
    }

    .credits-pill.credits-pill-warning {
        background: #fff8e1;
        border-color: #ffc107;
        color: #7c6200;
    }

    .credits-pill.credits-pill-urgent {
        background: #fff3e0;
        border-color: #ff9800;
        color: #8a4500;
        font-weight: 600;
    }

    .credits-pill.credits-pill-danger {
        background: #fce4ec;
        border-color: #e53935;
        color: #b71c1c;
        font-weight: 600;
    }

    .dashboard-top-actions .btn {
        border-radius: 8px;
        font-weight: 600;
        border-color: var(--dash-border);
        color: var(--dash-text-2);
        background: var(--dash-white);
    }

    .dashboard-top-actions .btn:hover {
        border-color: var(--dash-blue);
        color: var(--dash-blue);
        background: var(--dash-blue-light);
    }

    .dashboard-v2 .dashboard-card {
        margin-bottom: 14px;
        border: 1px solid var(--dash-border);
        border-radius: var(--dash-radius);
        background: var(--dash-white);
        box-shadow: var(--dash-shadow-sm);
        overflow: hidden;
        transition: box-shadow 0.2s ease;
    }

    .dashboard-v2 .dashboard-card:hover {
        box-shadow: var(--dash-shadow);
    }

    .dashboard-v2 .dashboard-card.focused {
        border-color: var(--dash-blue-mid);
        box-shadow: 0 0 0 3px rgba(35,85,245,0.08), var(--dash-shadow);
    }

    .dashboard-v2 .dashboard-card > .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        cursor: pointer;
        user-select: none;
        background: var(--dash-white);
        padding: 16px 18px;
        border: 0;
    }

    .dashboard-v2 .dashboard-card > .card-body {
        display: none;
        padding: 0;
    }

    .dashboard-v2 .dashboard-card.open > .card-body {
        display: block;
    }

    .dashboard-v2 .card-chevron {
        color: var(--dash-text-3);
        font-size: 0.78rem;
        transition: transform 0.2s ease;
        margin-left: 2px;
    }

    .dashboard-v2 .dashboard-card.open .card-chevron {
        transform: rotate(180deg);
    }

    .dashboard-v2 .section-head {
        display: flex;
        align-items: center;
        gap: 11px;
        flex: 1;
    }

    .dashboard-v2 .section-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex-shrink: 0;
    }

    .dashboard-v2 .section-icon.inputs { background: #ebefff; color: var(--dash-blue); }
    .dashboard-v2 .section-icon.builder { background: #f3e8ff; color: #9333ea; }
    .dashboard-v2 .section-icon.templates { background: #fff0e6; color: #f97316; }
    .dashboard-v2 .section-icon.personalization { background: #dcfce7; color: #22c55e; }
    .dashboard-v2 .section-icon.output { background: #e0f2fe; color: #0284c7; }

    .dashboard-v2 .section-title {
        display: block;
        font-weight: 700;
        color: var(--dash-text);
        font-size: 0.95rem;
    }

    .dashboard-v2 .section-title::before,
    .dashboard-v2 .section-title::after {
        content: none !important;
        display: none !important;
    }

    .dashboard-v2 .section-desc {
        display: block;
        font-size: 0.75rem;
        color: var(--dash-text-3);
        margin-top: 1px;
    }

    .dashboard-v2 .section-badge {
        font-size: 11px;
        font-weight: 600;
        padding: 3px 9px;
        border-radius: 999px;
        font-family: 'DM Mono', monospace;
        margin-right: 10px;
    }

    .dashboard-v2 .section-badge.required {
        background: var(--dash-blue-light);
        color: var(--dash-blue);
    }

    .dashboard-v2 .section-badge.optional {
        background: var(--dash-bg);
        border: 1px solid var(--dash-border);
        color: var(--dash-text-3);
    }

    .dashboard-v2 .dashboard-card > .card-body > .dashboard-controls-container {
        border-top: 1px solid var(--dash-border);
        padding: 18px 20px;
    }

    .dashboard-v2 .form-control,
    .dashboard-v2 .form-select {
        border: 1.5px solid var(--dash-border);
        border-radius: var(--dash-radius-sm);
        font-size: 0.86rem;
        color: var(--dash-text);
        background: var(--dash-white);
        padding: 10px 13px;
    }

    .dashboard-v2 .form-control:focus,
    .dashboard-v2 .form-select:focus {
        border-color: var(--dash-blue);
        box-shadow: 0 0 0 3px rgba(35,85,245,0.08);
    }

    .dashboard-v2 #dropZone {
        border: 2px dashed var(--dash-border);
        border-radius: 10px;
        background: var(--dash-bg);
        min-height: 210px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.16s ease;
    }

    .dashboard-v2 #dropZone:hover,
    .dashboard-v2 #dropZone.dragover {
        border-color: var(--dash-blue);
        background: var(--dash-blue-light);
    }

    .dashboard-v2 #dropZone.has-file {
        border-color: var(--dash-blue);
        background: linear-gradient(180deg, #f7fbff 0%, var(--dash-blue-light) 100%);
        box-shadow: 0 0 0 3px rgba(35, 85, 245, 0.10);
    }

    .dashboard-v2 #accordionInputs .inputs-main-row {
        --inputs-panel-height: 320px;
        align-items: stretch;
    }

    .dashboard-v2 #accordionInputs .inputs-left-stack,
    .dashboard-v2 #accordionInputs .inputs-right-stack {
        display: flex;
        flex-direction: column;
        min-height: var(--inputs-panel-height);
    }

    .dashboard-v2 #accordionInputs .inputs-left-stack .target-role-wrap {
        margin-bottom: 12px;
    }

    .dashboard-v2 #accordionInputs #dropZone {
        flex: 1;
        min-height: 145px;
        padding: 16px 14px;
    }

    .dashboard-v2 #accordionInputs #JobText {
        flex: 1;
        min-height: 0;
        height: 100%;
    }

    /* The Job posting placeholder carries the pitch, so it is darker than the shared
       --ro-text-4 placeholder (2.09:1). #4f5f8c is the palette slate of the nice to have
       skill chips: 6.27:1 on white, yet still clearly lighter than typed text. Scoped like
       the shared edge rule, so the Cover Letter Creator's required field keeps the shared colour. */
    .dashboard-v2 #accordionInputs .inputs-right-stack #JobText:not([required])::placeholder {
        color: #4f5f8c !important;
    }

    .dashboard-v2 #areaUpload {
        padding-bottom: 12px !important;
    }

    .dashboard-v2 #fileUploadIcon {
        color: var(--dash-blue) !important;
    }

    .dashboard-v2 #dropZone.has-file #filePlaceholder.file-selected {
        color: var(--dash-blue) !important;
        font-weight: 700;
    }

    .dashboard-v2 .dashboard-submit {
        border: 0;
        border-radius: 8px;
        background: var(--dash-blue);
        color: #fff;
        font-weight: 700;
        box-shadow: 0 3px 12px rgba(35,85,245,0.28);
        transition: all 0.16s ease;
    }

    .dashboard-v2 .dashboard-submit:hover {
        background: var(--dash-blue-hover);
        transform: translateY(-1px);
    }

    .dashboard-action-bar {
        position: fixed;
        left: var(--sidebar-width);
        right: 0;
        bottom: 0;
        z-index: 1080;
        background: linear-gradient(180deg, #eef3fb 0%, #e8eef8 100%);
        border-top: 1px solid #cfd9ea;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 -8px 24px rgba(15, 21, 35, 0.10);
        backdrop-filter: blur(8px);
        transition: left 0.2s ease;
    }

    .app-content.sidebar-collapsed .dashboard-action-bar {
        left: var(--sidebar-width-collapsed);
    }

    .dashboard-action-bar .action-bar-inner {
        max-width: 1280px;
        margin: 0 auto;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 8px;
    }

    .dashboard-action-bar .btn {
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.95rem;
        min-height: 38px;
    }

    .dashboard-action-bar .action-optimize {
        border-radius: 8px !important;
        font-weight: 600 !important;
        min-height: 38px;
        padding: 7px 16px !important;
        background: linear-gradient(135deg, var(--optimize-cta-color, #1363c6) 0%, var(--optimize-cta-color-hover, #0f56ad) 100%) !important;
        border-color: transparent !important;
        color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(19, 99, 198, 0.32);
        font-size: 0.95rem !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .dashboard-action-bar .action-optimize:hover,
    .dashboard-action-bar .action-optimize:focus,
    .dashboard-action-bar .action-optimize:active,
    .dashboard-action-bar .btn-check:checked + .action-optimize,
    .dashboard-action-bar .show > .action-optimize.dropdown-toggle {
        background: linear-gradient(135deg, var(--optimize-cta-color-hover, #0f56ad) 0%, var(--optimize-cta-color-active, #0c4b98) 100%) !important;
        border-color: transparent !important;
        color: #ffffff !important;
        box-shadow: 0 4px 16px rgba(19, 99, 198, 0.42);
        transform: translateY(-1px);
    }

    .dashboard-action-bar .action-optimize i {
        font-size: 14px;
    }

body.modal-open .dashboard-action-bar {
        opacity: 0;
        pointer-events: none;
    }

    #modalJobMatchAnalysis .modal-dialog {
        margin: 0;
        max-width: 100%;
    }

    #modalJobMatchAnalysis .job-match-modal-content {
        border: 0 !important;
        border-radius: 0 !important;
        background: var(--dash-bg) !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #modalJobMatchAnalysis .job-match-modal-topnav {
        background: #050d1a;
        border-bottom: 1px solid #1a2c4c;
        z-index: 3;
    }

    #modalJobMatchAnalysis .job-match-modal-topnav .mockup-toolbar {
        height: 56px;
        width: 100%;
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 28px;
        background: transparent;
    }

    #modalJobMatchAnalysis .job-match-modal-topnav .nav-center > .nav-link-item {
        min-width: 142px;
    }

    #modalJobMatchAnalysis .job-match-subheader {
        background: linear-gradient(180deg, #eef3fb 0%, #e8eef8 100%);
        border-bottom: 1px solid #cfd9ea;
        padding: 14px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        z-index: 2;
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45), var(--dash-shadow-sm);
    }

    #modalJobMatchAnalysis .job-match-subheader-left {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    #modalJobMatchAnalysis .job-match-back-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 0.78rem;
        font-weight: 500;
        color: #334b70;
        background: #f7faff;
        border: 1px solid #b7c6dd;
        border-radius: var(--dash-radius-sm);
        padding: 5px 9px;
        transition: all .14s ease;
    }

    #modalJobMatchAnalysis .job-match-back-btn:hover {
        background: #eef4fd;
        border-color: #8fa8cb;
        color: #1f365a;
    }

    #modalJobMatchAnalysis .job-match-subheader-title {
        font-size: 0.94rem;
        font-weight: 700;
        color: var(--dash-text);
        line-height: 1.2;
    }

    #modalJobMatchAnalysis .job-match-subheader-sub {
        font-size: 0.76rem;
        color: var(--dash-text-3);
        margin-top: 2px;
    }

    #modalJobMatchAnalysis .job-match-subheader-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #modalJobMatchAnalysis .job-match-subheader-actions .btn {
        border-radius: 8px !important;
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        padding: 7px 14px !important;
    }

    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-secondary {
        background: #f7faff !important;
        border-color: #b7c6dd !important;
        color: #334b70 !important;
    }

    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-secondary:hover,
    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-secondary:focus,
    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-secondary:active {
        background: #eef4fd !important;
        border-color: #8fa8cb !important;
        color: #1f365a !important;
    }

    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-primary {
        background: #e8f1ff !important;
        border-color: #2f6fcb !important;
        color: #0f56ad !important;
    }

    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-primary:hover,
    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-primary:focus,
    #modalJobMatchAnalysis .job-match-subheader-actions .btn.btn-outline-primary:active {
        background: #dbe9ff !important;
        border-color: #1f5fbe !important;
        color: #0c4b98 !important;
    }

    #modalJobMatchAnalysis .modal-body {
        padding: 12px 18px !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    #modalJobMatchAnalysis .job-match-main-grid {
        max-width: none;
        margin: 0 auto;
        height: 100%;
        box-sizing: border-box;
        padding-bottom: 12px;
    }

    #modalJobMatchAnalysis #analysisColumn,
    #modalJobMatchAnalysis #skillsToAddColumn,
    #modalJobMatchAnalysis #jobPostingColumn {
        height: 100%;
        min-height: 0;
        padding-bottom: 12px;
        box-sizing: border-box;
    }

    #modalJobMatchAnalysis #analysisColumn > div,
    #modalJobMatchAnalysis #skillsToAddColumn > div,
    #modalJobMatchAnalysis #jobPostingColumn > div {
        height: 100%;
        min-height: 0;
    }

    #modalJobMatchAnalysis .analysis-card {
        border: 1px solid var(--dash-border) !important;
        border-radius: var(--dash-radius) !important;
        background: var(--dash-white) !important;
        box-shadow: var(--dash-shadow-sm) !important;
        overflow: hidden;
        margin-bottom: 0 !important;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    #modalJobMatchAnalysis .analysis-card:hover {
        box-shadow: var(--dash-shadow) !important;
    }

    #modalJobMatchAnalysis .analysis-card .card-header {
        padding: 14px 16px !important;
        border-bottom: 1px solid var(--dash-border) !important;
        background: var(--dash-white) !important;
        color: var(--dash-text) !important;
        font-size: 0.86rem;
    }

    #modalJobMatchAnalysis .analysis-card .card-body {
        background: var(--dash-white) !important;
        color: var(--dash-text-2) !important;
        padding: 14px 16px !important;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #modalJobMatchAnalysis .job-match-analysis-wrapper {
        height: auto !important;
        min-height: 0 !important;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis {
        display: flex;
        flex-direction: column;
        gap: 20px;
        border: 0;
        background: transparent;
        overflow: visible;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card {
        border: 1px solid var(--dash-border) !important;
        border-radius: var(--dash-radius-sm) !important;
        box-shadow: none !important;
        margin: 0 !important;
        height: auto;
        background: var(--dash-white) !important;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card:hover {
        box-shadow: none !important;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card .card-header {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 14px !important;
        background: #ffffff !important;
        border-bottom: 1px solid #d8e1ef !important;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card .card-body {
        padding: 20px 14px !important;
        overflow: visible;
    }

    /* Emphasize Summary card so it stands out from other analysis blocks */
    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card.analysis-summary-card {
        border-color: #9fb7f7 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
        box-shadow: 0 6px 18px rgba(19, 99, 198, 0.16) !important;
        position: relative;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card.analysis-summary-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #1363c6 0%, #0f56ad 100%);
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card.analysis-summary-card .card-header {
        background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%) !important;
        border-bottom: 1px solid #cfdbfa !important;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card.analysis-summary-card .section-title {
        color: #0f56ad;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis > .analysis-card.analysis-summary-card .card-body {
        color: #2f3f65 !important;
        font-weight: 500;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-head {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-icon {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-icon.review {
        background: #ebefff;
        color: #1363c6;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-icon.match {
        background: #dcfce7;
        color: #16a34a;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-icon.partial {
        background: #fff7e6;
        color: #d97706;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-icon.gap {
        background: #fee2e2;
        color: #dc2626;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-title {
        display: block;
        font-weight: 700;
        color: var(--dash-text);
        font-size: 0.92rem;
        line-height: 1.2;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-title::before,
    #modalJobMatchAnalysis #JobMatchAnalysis .section-title::after {
        content: none !important;
        display: none !important;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .section-desc {
        display: block;
        color: #6b7a99;
        font-size: 0.74rem;
        line-height: 1.2;
        margin-top: 1px;
    }

    #modalJobMatchAnalysis #JobMatchAnalysis .analysis-card li {
        line-height: 1.65;
    }

    #modalJobMatchAnalysis .analysis-card.info .card-header i,
    #modalJobMatchAnalysis .analysis-card.secondary .card-header i,
    #modalJobMatchAnalysis .analysis-card.ai-card .card-header i {
        color: var(--dash-blue) !important;
    }

    #modalJobMatchAnalysis #JobSkillsDescription {
        color: var(--dash-text-2) !important;
        line-height: 1.55;
    }

    #modalJobMatchAnalysis #SkillsNotFound {
        font-size: 0.82rem;
    }

    #modalJobMatchAnalysis #skills-checkboxes.skills-options-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    #modalJobMatchAnalysis #skills-checkboxes .skill-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #modalJobMatchAnalysis #skills-checkboxes .skill-group-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--dash-border);
        border-left-width: 4px;
        border-radius: 8px;
        padding: 6px 10px;
        background: #f9fbff;
    }

    #modalJobMatchAnalysis #skills-checkboxes .skill-group-title {
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        color: var(--dash-text);
        text-transform: uppercase;
    }

    #modalJobMatchAnalysis #skills-checkboxes .skill-group-header.skill-group-header-must {
        border-left-color: #2f855a;
        background: #eefaf3;
    }

    #modalJobMatchAnalysis #skills-checkboxes .skill-group-header.skill-group-header-preferred {
        border-left-color: #b7791f;
        background: #fff9eb;
    }

    #modalJobMatchAnalysis #skills-checkboxes .skill-group-header.skill-group-header-nice {
        border-left-color: #4c6edb;
        background: #f2f6ff;
    }

    #modalJobMatchAnalysis #skills-checkboxes .skill-group-count {
        color: var(--dash-text-3);
        font-size: 0.7rem;
        font-weight: 700;
        border: 1px solid var(--dash-border);
        border-radius: 999px;
        padding: 1px 8px;
        background: #fff;
    }

    #modalJobMatchAnalysis .skill-option-card {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        border: 1.5px solid #b7c6dd;
        border-radius: var(--dash-radius-sm);
        background: var(--dash-white);
        padding: 8px 10px;
        transition: border-color .14s ease, background .14s ease;
        cursor: pointer;
    }

    #modalJobMatchAnalysis .skill-option-card:hover:not(.check-locked) {
        border-color: #8fa8cb;
        background: rgba(19, 99, 198, 0.08);
    }

    #modalJobMatchAnalysis .skill-option-card.is-checked {
        border-color: var(--optimize-cta-color, #1363c6);
        background: rgba(19, 99, 198, 0.14);
    }

    #modalJobMatchAnalysis .skill-option-checkbox {
        margin: 3px 0 0;
        flex-shrink: 0;
    }

    #modalJobMatchAnalysis .skill-option-checkbox:checked {
        background-color: var(--optimize-cta-color, #1363c6);
        border-color: var(--optimize-cta-color, #1363c6);
    }

    #modalJobMatchAnalysis .skill-option-checkbox:focus {
        box-shadow: 0 0 0 0.18rem rgba(19, 99, 198, 0.22);
    }

    #modalJobMatchAnalysis .skill-option-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        min-width: 0;
    }

    #modalJobMatchAnalysis .skill-option-label {
        margin: 0;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--dash-text-2);
        line-height: 1.35;
        min-width: 0;
    }

    #modalJobMatchAnalysis .skill-option-card.is-checked .skill-option-label {
        color: var(--optimize-cta-color, #1363c6);
    }

    #modalJobMatchAnalysis .skill-option-meta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    #modalJobMatchAnalysis .skill-meta-chip {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 2px 8px;
        font-size: 0.67rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        border: 1px solid var(--dash-border);
        background: #f6f8fe;
        color: var(--dash-text-3);
        line-height: 1.2;
        white-space: nowrap;
    }

    #modalJobMatchAnalysis .skill-meta-chip.skill-priority-must {
        background: #e9f8ef;
        border-color: #bfe5cd;
        color: #1f6b45;
    }

    #modalJobMatchAnalysis .skill-meta-chip.skill-priority-preferred {
        background: #fff8de;
        border-color: #f3df9b;
        color: #7b5a00;
    }

    #modalJobMatchAnalysis .skill-meta-chip.skill-priority-nice {
        background: #eef3ff;
        border-color: #d2ddfb;
        color: #4f5f8c;
    }

    #modalJobMatchAnalysis .skill-option-card.is-checked .skill-meta-chip {
        border-color: color-mix(in srgb, var(--dash-blue) 35%, var(--dash-border));
    }

    #modalJobMatchAnalysis .skill-option-card.check-locked {
        opacity: .7;
    }

    /* Section headers for "Missing from resume" and "Already in resume" */
    #modalJobMatchAnalysis .skill-section-header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-transform: uppercase;
    }

    #modalJobMatchAnalysis .skill-section-header .skill-section-count {
        margin-left: auto;
        font-size: 0.7rem;
        font-weight: 700;
        border-radius: 999px;
        padding: 1px 8px;
        background: #fff;
        border: 1px solid var(--dash-border);
        color: var(--dash-text-3);
    }

    #modalJobMatchAnalysis .skill-section-header.skill-section-missing {
        background: #fef3f2;
        border: 1px solid #fecaca;
        border-left-width: 4px;
        border-left-color: #ef4444;
        color: #b91c1c;
    }

    #modalJobMatchAnalysis .skill-section-header.skill-section-matched {
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        border-left-width: 4px;
        border-left-color: #10b981;
        color: #047857;
        margin-top: 6px;
    }

    /* Matched skill cards (already in resume) */
    #modalJobMatchAnalysis .skill-option-card.skill-matched {
        border-color: #a7f3d0;
        background: #f0fdf9;
        cursor: default;
        opacity: 0.85;
    }

    #modalJobMatchAnalysis .skill-option-card.skill-matched:hover {
        border-color: #a7f3d0;
        background: #f0fdf9;
    }

    #modalJobMatchAnalysis .skill-matched-icon {
        color: #10b981;
        font-size: 0.95rem;
        flex-shrink: 0;
        margin-top: 2px;
    }

    #modalJobMatchAnalysis .skill-option-card.skill-matched .skill-option-label {
        color: var(--dash-text-3);
    }

    #modalJobMatchAnalysis .job-text {
        line-height: 1.7;
        color: var(--dash-text-2);
    }

    /* Job description keyword highlights */
        #modalJobMatchAnalysis .job-text .highlight-skill,
        #modalJobMatchAnalysis .job-text mark.highlight-skill {
            background: #F3F0FF;
            border: 1px solid #D5CCFF;
            border-radius: 3px;
            padding: 0 3px;
            color: #4F46A5;
            font-weight: 500;
        }

    /* Checked skills mirror selected skill cards in the Add Skills column */
            #modalJobMatchAnalysis .job-text .highlight-skill.skill-checked,
            #modalJobMatchAnalysis .job-text mark.highlight-skill.skill-checked {
                background: #ECFDF5;
                border: 1px solid #6EE7B7;
                color: #065F46;
            }

    @media (max-width: 991.98px) {
        #modalJobMatchAnalysis .job-match-modal-topnav .mockup-toolbar {
            max-width: 100%;
            padding: 10px 12px;
        }

        #modalJobMatchAnalysis .job-match-subheader {
            flex-direction: column;
            align-items: flex-start;
            padding: 12px 14px;
        }

        #modalJobMatchAnalysis .job-match-subheader-actions {
            width: 100%;
            flex-wrap: wrap;
        }

        #modalJobMatchAnalysis .job-match-subheader-actions .btn {
            flex: 1 1 auto;
        }

        #modalJobMatchAnalysis .modal-body {
            padding: 12px !important;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #modalJobMatchAnalysis .job-match-main-grid {
            padding-bottom: 12px;
        }

        #modalJobMatchAnalysis .job-match-modal-content {
            overflow-y: auto;
        }

        #modalJobMatchAnalysis .job-match-main-grid,
        #modalJobMatchAnalysis #analysisColumn,
        #modalJobMatchAnalysis #skillsToAddColumn,
        #modalJobMatchAnalysis #jobPostingColumn,
        #modalJobMatchAnalysis #analysisColumn > div,
        #modalJobMatchAnalysis #skillsToAddColumn > div,
        #modalJobMatchAnalysis #jobPostingColumn > div {
            height: auto;
            min-height: 0;
        }
    }

    @media (max-width: 767.98px) {
        #modalJobMatchAnalysis .job-match-modal-topnav .mockup-toolbar {
            padding: 8px 6px;
        }

        .dashboard-v2 {
            padding-bottom: 132px !important;
        }

        .dashboard-action-bar .action-bar-inner {
            padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .dashboard-action-bar .action-bar-inner > .btn {
            width: 100%;
        }
    }

    @media (max-width: 991px) {
        /* .dashboard-page-header responsive stacking lives in dashboard-shell.css */
        .dashboard-action-bar {
            left: 0;
        }
    }

    /* Slightly stronger default input borders for better visibility */
    .dashboard-v2 .form-control:not(:focus),
    .dashboard-v2 .form-select:not(:focus) {
        border-color: #b7c6dd !important;
    }

    .dashboard-v2 .form-control:hover:not(:focus),
    .dashboard-v2 .form-select:hover:not(:focus) {
        border-color: #8fa8cb !important;
    }

    /* Match checkbox border visibility to input/select fields */
    .dashboard-v2 .form-check-input:not(:checked):not(:focus) {
        border-color: #b7c6dd !important;
        background-color: #ffffff;
    }

    .dashboard-v2 .form-check-input:not(:checked):hover:not(:focus) {
        border-color: #8fa8cb !important;
    }


/* ==========================================================================
   Job Match Analysis: Dedicated Page Layout
   Mirrors the modal styles scoped to #modalJobMatchAnalysis but applied to
   the .job-match-page wrapper used by Views/Dashboard/JobMatch.cshtml
   ========================================================================== */

.job-match-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--dash-bg, #f4f7fc);
}

.job-match-page .job-match-subheader {
    background: linear-gradient(180deg, #eef3fb 0%, #e8eef8 100%);
    border-bottom: 1px solid #cfd9ea;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    z-index: 2;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.45), var(--dash-shadow-sm);
    flex-shrink: 0;
}

.job-match-page .job-match-subheader-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.job-match-page .job-match-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 7px 14px;
    border-color: #b7c6dd;
    color: #334b70;
    background: #f7faff;
    text-decoration: none;
}

.job-match-page .job-match-back-btn:hover {
    background: #eef4fd;
    border-color: #8fa8cb;
    color: #1f365a;
}

.job-match-page .job-match-subheader-title {
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--dash-text, #102444);
    line-height: 1.2;
}

.job-match-page .job-match-subheader-sub {
    font-size: 0.76rem;
    color: var(--dash-text-3, #7b93b5);
    margin-top: 2px;
}

.job-match-page .job-match-subheader-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.job-match-page .job-match-subheader-actions .btn {
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 7px 14px !important;
}

.job-match-page .job-match-subheader-actions .btn.btn-outline-secondary {
    background: #f7faff !important;
    border-color: #b7c6dd !important;
    color: #334b70 !important;
}

.job-match-page .job-match-subheader-actions .btn.btn-outline-secondary:hover,
.job-match-page .job-match-subheader-actions .btn.btn-outline-secondary:focus,
.job-match-page .job-match-subheader-actions .btn.btn-outline-secondary:active {
    background: #eef4fd !important;
    border-color: #8fa8cb !important;
    color: #1f365a !important;
}

.job-match-page .job-match-subheader-actions .btn.btn-outline-primary {
    background: #e8f1ff !important;
    border-color: #2f6fcb !important;
    color: #0f56ad !important;
}

.job-match-page .job-match-subheader-actions .btn.btn-outline-primary:hover,
.job-match-page .job-match-subheader-actions .btn.btn-outline-primary:focus,
.job-match-page .job-match-subheader-actions .btn.btn-outline-primary:active {
    background: #dbe9ff !important;
    border-color: #1f5fbe !important;
    color: #0c4b98 !important;
}

.job-match-page .job-match-page-body {
    padding: 12px 18px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.job-match-page .job-match-main-grid {
    max-width: none;
    margin: 0 auto;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 12px;
}

.job-match-page #analysisColumn,
.job-match-page #skillsToAddColumn,
.job-match-page #jobPostingColumn {
    height: 100%;
    min-height: 0;
    padding-bottom: 12px;
    box-sizing: border-box;
}

.job-match-page #analysisColumn > div,
.job-match-page #skillsToAddColumn > div,
.job-match-page #jobPostingColumn > div {
    height: 100%;
    min-height: 0;
}

.job-match-page #JobMatchAnalysis {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: 0;
    background: transparent;
    overflow: visible;
}

.job-match-page #JobMatchAnalysis > .analysis-card {
    border: 1px solid var(--dash-border) !important;
    border-radius: var(--dash-radius-sm) !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto;
    background: var(--dash-white) !important;
}

.job-match-page #JobMatchAnalysis > .analysis-card:hover {
    box-shadow: none !important;
}

.job-match-page #JobMatchAnalysis > .analysis-card .card-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 12px 14px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #d8e1ef !important;
}

.job-match-page #JobMatchAnalysis > .analysis-card .card-body {
    padding: 20px 14px !important;
    overflow: visible;
}

.job-match-page #JobMatchAnalysis > .analysis-card.analysis-summary-card {
    border-color: #9fb7f7 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
    box-shadow: 0 6px 18px rgba(19, 99, 198, 0.16) !important;
    position: relative;
}

.job-match-page #JobMatchAnalysis > .analysis-card.analysis-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #1363c6 0%, #0f56ad 100%);
}

.job-match-page #JobMatchAnalysis > .analysis-card.analysis-summary-card .card-header {
    background: linear-gradient(180deg, #ffffff 0%, #eef3ff 100%) !important;
    border-bottom: 1px solid #cfdbfa !important;
}

.job-match-page #JobMatchAnalysis > .analysis-card.analysis-summary-card .section-title {
    color: #0f56ad;
}

.job-match-page #JobMatchAnalysis > .analysis-card.analysis-summary-card .card-body {
    color: #2f3f65 !important;
    font-weight: 500;
}

.job-match-page #JobMatchAnalysis .section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.job-match-page #JobMatchAnalysis .section-icon {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.job-match-page #JobMatchAnalysis .section-icon.review { background: #ebefff; color: #1363c6; }
.job-match-page #JobMatchAnalysis .section-icon.match  { background: #dcfce7; color: #16a34a; }
.job-match-page #JobMatchAnalysis .section-icon.partial { background: #fff7e6; color: #d97706; }
.job-match-page #JobMatchAnalysis .section-icon.gap    { background: #fee2e2; color: #dc2626; }

.job-match-page #JobMatchAnalysis .section-title {
    display: block;
    font-weight: 700;
    color: var(--dash-text);
    font-size: 0.92rem;
    line-height: 1.2;
}

.job-match-page #JobMatchAnalysis .section-title::before,
.job-match-page #JobMatchAnalysis .section-title::after {
    content: none !important;
    display: none !important;
}

.job-match-page #JobMatchAnalysis .section-desc {
    display: block;
    color: #6b7a99;
    font-size: 0.74rem;
    line-height: 1.2;
    margin-top: 1px;
}

.job-match-page #JobMatchAnalysis .analysis-card li { line-height: 1.65; }

.job-match-page .analysis-card {
    background: var(--dash-card-bg, #fff);
    border: 1px solid var(--dash-border, #dce6f3);
    border-radius: var(--dash-radius, 12px);
    box-shadow: var(--dash-shadow-sm, 0 2px 8px rgba(16, 36, 68, 0.07));
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    transition: box-shadow 0.18s;
}

.job-match-page .analysis-card .card-header {
    background: var(--dash-card-header, #f4f8ff);
    border-bottom: 1px solid var(--dash-border, #dce6f3);
    padding: 10px 16px;
    border-radius: 0 !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.job-match-page .analysis-card .card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 16px;
    min-height: 0;
}

.job-match-page .job-match-analysis-wrapper {
    min-height: 0;
    overflow-y: auto;
}

.job-match-page .job-text {
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--dash-text-2, #2e4060);
    white-space: pre-wrap;
    word-break: break-word;
}

.job-match-page .job-text .highlight-skill,
.job-match-page .job-text mark.highlight-skill {
    background: #F3F0FF;
    border: 1px solid #D5CCFF;
    border-radius: 3px;
    padding: 0 3px;
    color: #4F46A5;
    font-weight: 500;
}

.job-match-page .job-text .highlight-skill.skill-checked,
.job-match-page .job-text mark.highlight-skill.skill-checked {
    background: #ECFDF5;
    border: 1px solid #6EE7B7;
    color: #065F46;
}

.job-match-page #skills-checkboxes.skills-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job-match-page #skills-checkboxes .skill-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.job-match-page #skills-checkboxes .skill-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--dash-border);
    border-left-width: 4px;
    border-radius: 8px;
    padding: 6px 10px;
    background: #f9fbff;
}

.job-match-page #skills-checkboxes .skill-group-title {
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--dash-text);
    text-transform: uppercase;
}

.job-match-page #skills-checkboxes .skill-group-header.skill-group-header-must {
    border-left-color: #2f855a;
    background: #eefaf3;
}

.job-match-page #skills-checkboxes .skill-group-header.skill-group-header-preferred {
    border-left-color: #b7791f;
    background: #fff9eb;
}

.job-match-page #skills-checkboxes .skill-group-header.skill-group-header-nice {
    border-left-color: #4c6edb;
    background: #f2f6ff;
}

.job-match-page #skills-checkboxes .skill-group-count {
    color: var(--dash-text-3);
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--dash-border);
    border-radius: 999px;
    padding: 1px 8px;
    background: #fff;
}

.job-match-page .skill-option-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1.5px solid #b7c6dd;
    border-radius: var(--dash-radius-sm);
    background: var(--dash-white);
    padding: 8px 10px;
    transition: border-color .14s ease, background .14s ease;
    cursor: pointer;
}

.job-match-page .skill-option-card:hover:not(.check-locked) {
    border-color: #8fa8cb;
    background: rgba(19, 99, 198, 0.08);
}

.job-match-page .skill-option-card.is-checked {
    border-color: #1363c6;
    background: rgba(19, 99, 198, 0.14);
}

.job-match-page .skill-option-checkbox {
    margin: 3px 0 0;
    flex-shrink: 0;
}

.job-match-page .skill-option-checkbox:checked {
    background-color: #1363c6;
    border-color: #1363c6;
}

.job-match-page .skill-option-checkbox:focus {
    box-shadow: 0 0 0 0.18rem rgba(19, 99, 198, 0.22);
}

.job-match-page .skill-option-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.job-match-page .skill-option-label {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--dash-text-2);
    line-height: 1.35;
    min-width: 0;
}

.job-match-page .skill-option-card.is-checked .skill-option-label {
    color: #1363c6;
}

.job-match-page .skill-option-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-shrink: 0;
}

.job-match-page .skill-meta-chip {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid var(--dash-border);
    background: #f6f8fe;
    color: var(--dash-text-3);
    line-height: 1.2;
    white-space: nowrap;
}

.job-match-page .skill-meta-chip.skill-priority-must {
    background: #e9f8ef;
    border-color: #bfe5cd;
    color: #1f6b45;
}

.job-match-page .skill-meta-chip.skill-priority-preferred {
    background: #fff8de;
    border-color: #f3df9b;
    color: #7b5a00;
}

.job-match-page .skill-meta-chip.skill-priority-nice {
    background: #eef3ff;
    border-color: #d2ddfb;
    color: #4f5f8c;
}

.job-match-page .skill-option-card.is-checked .skill-meta-chip {
    border-color: #9ab4e0;
}

.job-match-page .skill-option-card.check-locked {
    opacity: .7;
}

.job-match-page .skill-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.job-match-page .skill-section-header .skill-section-count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 8px;
    background: #fff;
    border: 1px solid var(--dash-border);
    color: var(--dash-text-3);
}

.job-match-page .skill-section-header.skill-section-missing {
    background: #fef3f2;
    border: 1px solid #fecaca;
    border-left-width: 4px;
    border-left-color: #ef4444;
    color: #b91c1c;
}

.job-match-page .skill-section-header.skill-section-matched {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left-width: 4px;
    border-left-color: #10b981;
    color: #047857;
    margin-top: 6px;
}

.job-match-page .skill-option-card.skill-matched {
    border-color: #a7f3d0;
    background: #f0fdf9;
    cursor: default;
    opacity: 0.85;
}

.job-match-page .skill-option-card.skill-matched:hover {
    border-color: #a7f3d0;
    background: #f0fdf9;
}

.job-match-page .skill-matched-icon {
    color: #10b981;
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.job-match-page .skill-option-card.skill-matched .skill-option-label {
    color: var(--dash-text-3);
}

@media (max-width: 991.98px) {
    .job-match-page {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .job-match-page .job-match-subheader {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 14px;
        position: sticky;
        top: 0;
        z-index: 100;
    }

    .job-match-page .job-match-subheader-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .job-match-page .job-match-subheader-actions .btn {
        flex: 1 1 auto;
    }

    .job-match-page .job-match-page-body {
        overflow: visible;
        flex: none;
    }

    .job-match-page .container-fluid {
        height: auto !important;
    }

    .job-match-page .job-match-main-grid {
        height: auto !important;
        padding-bottom: 12px;
    }

    .job-match-page #analysisColumn,
    .job-match-page #skillsToAddColumn,
    .job-match-page #jobPostingColumn,
    .job-match-page #analysisColumn > div,
    .job-match-page #skillsToAddColumn > div,
    .job-match-page #jobPostingColumn > div {
        height: auto;
        min-height: 0;
    }

    .job-match-page .analysis-card {
        height: auto;
        overflow: visible;
        min-height: 280px;
    }

    .job-match-page .analysis-card .card-body,
    .job-match-page .job-match-analysis-wrapper {
        overflow-y: visible;
        max-height: none;
        min-height: 200px;
    }
}


/* ============================================================
   Extension "How It Works" modal carousel
   ============================================================ */

/* Dot indicators */
.ext-carousel-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #cbd5e1;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}

.ext-carousel-dot.active {
    background: var(--bs-primary, #0d6efd);
    transform: scale(1.25);
}

/* Caption panels: hidden by default, shown via JS */
.ext-caption-slide {
    /* visible by default; JS will d-none the inactive ones after first slide */
}

/* ============================================================
   BUILD-FROM-SCRATCH GAP-FILL REVIEW CARD
   Rendered by dashboard.ts and appended to <body>, so these
   rules are NOT scoped to .dashboard-v2 (see modal convention).

   The card markup mirrors the Job Tracker application modal
   (Views/JobTracker/Index.cshtml): the same jt-modal-* /
   jt-form-section / jt-section-icon / jt-btn-* class structure.
   job-tracker.css is NOT loaded on the Dashboard, so the jt-*
   rules the card relies on are re-declared here, SCOPED to
   .ro-gapfill-card to avoid any bleed, using the shared --ro-*
   design tokens (which equal the literal hex values in
   job-tracker.css: --ro-border=#dde4f0, --ro-blue=#1363c6,
   --ro-blue-hover=#0f52ad, --ro-blue-light=#e8f0fc,
   --ro-text=#0f1523, --ro-text-2=#3d4a6b, --ro-text-3=#6b7a99).
   The few job-tracker values with no matching token (#f4f7fc
   body wash, #e3e9f3 card border, #d8e1ef input border) are
   kept as literals so the two stay pixel-identical.
   ============================================================ */

/* Scrim + centering — the part Bootstrap's .modal gives the Job
   Tracker; this card is body-appended, not a bootstrap modal. */
.ro-gapfill-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5); /* matches Bootstrap modal-backdrop */
    opacity: 0;
    transition: opacity var(--ro-t);
}

.ro-gapfill-overlay.is-open {
    opacity: 1;
}

/* Card container — mirrors .jt-modal-content. */
.ro-gapfill-card {
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 48px);
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ro-white);
    border: 1px solid var(--ro-border);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(15, 21, 35, 0.16);
    transform: translateY(8px);
    transition: transform var(--ro-t);
}

.ro-gapfill-overlay.is-open .ro-gapfill-card {
    transform: translateY(0);
}

/* Header — mirrors .jt-modal-header (white, icon chip + title). */
.ro-gapfill-card .jt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ro-border);
    background: var(--ro-white);
}

.ro-gapfill-card .jt-modal-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ro-blue-light);
    color: var(--ro-blue);
    font-size: 0.92rem;
    flex-shrink: 0;
}

.ro-gapfill-card .jt-modal-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ro-text);
    letter-spacing: -0.15px;
    line-height: 1.2;
}

.ro-gapfill-card .jt-modal-sub {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ro-text-3);
    margin-top: 2px;
}

/* Body — mirrors .jt-modal-body wash; single column of section cards.
   Scrolls when there are many gaps. */
.ro-gapfill-card .ro-gapfill-body {
    padding: 18px;
    background: #f4f7fc;
    overflow-y: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Section cards — mirror .jt-form-section. */
.ro-gapfill-card .jt-form-section {
    padding: 14px 16px;
    background: var(--ro-white);
    border: 1px solid #e3e9f3;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(19, 99, 198, 0.04);
}

.ro-gapfill-card .jt-form-section-label {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--ro-text);
    margin-bottom: 8px;
}

.ro-gapfill-card .jt-form-section-label .jt-section-icon {
    color: var(--ro-blue);
    margin-right: 5px;
    font-size: 0.85rem;
}

/* Field labels — mirror .jt-modal-body .form-label. */
.ro-gapfill-card .form-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1px;
    color: var(--ro-text-3);
    margin-bottom: 6px;
}

/* Inputs — mirror .jt-modal-body .form-control. */
.ro-gapfill-card .form-control {
    font-size: 0.86rem;
    border: 1.5px solid #d8e1ef;
    border-radius: 8px;
    background-color: var(--ro-white);
    color: var(--ro-text);
    padding: 9px 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.ro-gapfill-card .form-control:focus {
    border-color: var(--ro-blue);
    box-shadow: 0 0 0 3px rgba(19, 99, 198, 0.08);
    background-color: var(--ro-white);
    outline: none;
}

.ro-gapfill-card .form-control::placeholder {
    color: var(--ro-text-4);
}

/* Spacing between stacked labeled inputs inside a section card. */
.ro-gapfill-card .ro-gapfill-field + .ro-gapfill-field {
    margin-top: 12px;
}

/* Header actions (top-right) hold the abandon X. Mirrors .jt-modal-header-actions. */
.ro-gapfill-card .jt-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

/* Footer — mirrors .jt-modal-footer + jt-btn-cancel / jt-btn-save.
   Cancel (abandon) sits on the left; a flexible spacer pushes the two
   generate actions to the right so the three controls read as two groups. */
.ro-gapfill-card .jt-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ro-border);
    background: var(--ro-white);
}

.ro-gapfill-card .ro-gapfill-footer-spacer {
    flex: 1 1 auto;
}

/* Cancel = low-emphasis text link, subtler than the ghost jt-btn-cancel so it
   does not compete with the two generate buttons. */
.ro-gapfill-card .ro-gapfill-cancel {
    border: 0;
    background: transparent;
    color: var(--ro-text-3);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 6px;
    border-radius: 8px;
    transition: color 0.14s ease;
}

.ro-gapfill-card .ro-gapfill-cancel:hover {
    color: var(--ro-text-2);
    text-decoration: underline;
}

.ro-gapfill-card .jt-btn-save {
    border: 0;
    border-radius: 8px;
    background: var(--ro-blue);
    color: var(--ro-white);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 8px 20px;
    box-shadow: 0 3px 12px rgba(19, 99, 198, 0.28);
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

.ro-gapfill-card .jt-btn-save:hover {
    background: var(--ro-blue-hover);
    color: var(--ro-white);
    box-shadow: 0 4px 16px rgba(19, 99, 198, 0.36);
}

.ro-gapfill-card .jt-btn-cancel {
    border: 0;
    background: transparent;
    color: var(--ro-text-3);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.14s ease, background 0.14s ease;
}

.ro-gapfill-card .jt-btn-cancel:hover {
    background: #f3f6fb;
    color: var(--ro-text-2);
}

@media (max-width: 540px) {
    /* Stack: primary [Add and generate] on top, then [Skip and generate],
       then the spacer (collapsed) and [Cancel] at the bottom. */
    .ro-gapfill-card .jt-modal-footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ro-gapfill-card .ro-gapfill-footer-spacer {
        display: none;
    }

    .ro-gapfill-card .jt-modal-footer .btn {
        width: 100%;
    }
}

/* ============================================================
   GUIDED OUTPUT SETUP CARD

   Same construction as the gap-fill card above: body-appended,
   so NOT scoped to .dashboard-v2, and reusing the jt-modal-*
   structure re-declared there. Only the pieces the gap-fill card
   does not have (question steps, option cards, reason lists) are
   defined here; the shell borrows the same tokens.
   ============================================================ */

.ro-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--ro-t);
}

.ro-profile-overlay.is-open {
    opacity: 1;
}

.ro-profile-card {
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 48px);
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ro-white);
    border: 1px solid var(--ro-border);
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(15, 21, 35, 0.16);
    transform: translateY(8px);
    transition: transform var(--ro-t);
}

.ro-profile-overlay.is-open .ro-profile-card {
    transform: translateY(0);
}

/* The review lists every option at once, so it earns the extra width and the
   multi-column reason grid below. Every question step stays single column. */
.ro-profile-card.is-review {
    max-width: 860px;
}

.ro-profile-card .jt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ro-border);
    background: var(--ro-white);
}

.ro-profile-card .jt-modal-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ro-blue-light);
    color: var(--ro-blue);
    font-size: 0.92rem;
    flex-shrink: 0;
}

.ro-profile-card .jt-modal-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ro-text);
    letter-spacing: -0.15px;
    line-height: 1.2;
}

.ro-profile-card .jt-modal-sub {
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--ro-text-3);
    margin-top: 2px;
}

.ro-profile-card .jt-modal-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.ro-profile-card .ro-profile-body {
    padding: 18px;
    background: #f4f7fc;
    overflow-y: auto;
    flex: 1 1 auto;
}

.ro-profile-question {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--ro-text);
}

.ro-profile-help {
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ro-text-3);
    margin-top: 4px;
}

.ro-profile-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

/* Option cards, not radios: the whole card is the target, and the sub line has
   room to say what the answer means. */
.ro-profile-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: var(--ro-white);
    border: 1.5px solid #e3e9f3;
    border-radius: 10px;
    transition: border-color var(--ro-t), background var(--ro-t), box-shadow var(--ro-t);
}

.ro-profile-option:hover {
    border-color: #8fa8cb;
    background: rgba(19, 99, 198, 0.04);
}

.ro-profile-option.is-selected {
    border-color: var(--ro-blue);
    background: var(--ro-blue-light);
    box-shadow: 0 2px 10px rgba(19, 99, 198, 0.14);
}

.ro-profile-option-label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ro-text);
}

.ro-profile-option-sub {
    display: block;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--ro-text-3);
    margin-top: 2px;
}

.ro-profile-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ro-text);
    padding-bottom: 4px;
}

.ro-profile-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--ro-text-3);
    margin: 14px 0 6px;
}

.ro-profile-reasons {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

/* Wide viewports flow the reason cards into as many columns as fit, so the
   review stops being a tall scroller on desktop. */
@media (min-width: 700px) {
    .ro-profile-reasons {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Two states, three cues each, so the group is readable at a glance and still
   readable without colour: a check or dash glyph, an accent bar down the left
   edge, and a white lifted card for on versus a recessed grey card for off.
   The glyph sits in its own grid column so the label and the reason keep one
   left edge no matter how many lines the reason runs to. */
.ro-profile-reason {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 9px;
    align-items: start;
    /* 10px + the 3px accent bar keeps the text on the same left edge as the
       1px-bordered cards elsewhere in the card. */
    padding: 10px 12px 10px 10px;
    background: var(--ro-white);
    border: 1px solid #e3e9f3;
    border-left: 3px solid var(--ro-border);
    border-radius: 10px;
}

.ro-profile-reason-icon {
    grid-column: 1;
    grid-row: 1;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1;
    margin-top: 1px;
}

.ro-profile-reason-label,
.ro-profile-reason-text {
    grid-column: 2;
}

.ro-profile-reason-label {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ro-text);
}

.ro-profile-reason-text {
    display: block;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--ro-text-2);
    margin-top: 2px;
}

/* Turning on: the same green the setup banner uses for its applied state. */
.ro-profile-section-label.is-on {
    color: #1a7f43;
}

.ro-profile-reasons.is-on .ro-profile-reason {
    border-left-color: #1a7f43;
}

.ro-profile-reasons.is-on .ro-profile-reason-icon {
    background: #e6f6ec;
    color: #1a7f43;
}

/* Leaving off: no colour of its own, and a card that sits back into the body
   wash instead of lifting off it. The label keeps AA contrast on the grey, so
   the muting is carried by the surface, not by faded text. */
.ro-profile-reasons.is-off .ro-profile-reason {
    background: #edf1f7;
    border-color: var(--ro-border);
    border-left-color: var(--ro-text-4);
}

.ro-profile-reasons.is-off .ro-profile-reason-icon {
    background: #dfe5ee;
    color: var(--ro-text-2);
}

.ro-profile-reasons.is-off .ro-profile-reason-label {
    color: var(--ro-text-2);
}

.ro-profile-card .jt-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid var(--ro-border);
    background: var(--ro-white);
}

.ro-profile-footer-spacer {
    flex: 1 1 auto;
}

.ro-profile-card .ro-profile-skip {
    border: 0;
    background: transparent;
    color: var(--ro-text-3);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 8px;
    transition: color 0.14s ease;
}

.ro-profile-card .ro-profile-skip:hover {
    color: var(--ro-text-2);
    text-decoration: underline;
}

.ro-profile-card .jt-btn-save {
    border: 0;
    border-radius: 8px;
    background: var(--ro-blue);
    color: var(--ro-white);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 8px 20px;
    box-shadow: 0 3px 12px rgba(19, 99, 198, 0.28);
    transition: background 0.16s ease, box-shadow 0.16s ease;
}

.ro-profile-card .jt-btn-save:hover:not(:disabled) {
    background: var(--ro-blue-hover);
    color: var(--ro-white);
    box-shadow: 0 4px 16px rgba(19, 99, 198, 0.36);
}

.ro-profile-card .jt-btn-save:disabled {
    opacity: 0.45;
    box-shadow: none;
}

.ro-profile-card .jt-btn-cancel {
    border: 0;
    background: transparent;
    color: var(--ro-text-3);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.14s ease, background 0.14s ease;
}

.ro-profile-card .jt-btn-cancel:hover {
    background: #f3f6fb;
    color: var(--ro-text-2);
}

@media (max-width: 540px) {
    .ro-profile-card .jt-modal-footer {
        flex-wrap: wrap;
    }

    .ro-profile-footer-spacer {
        display: none;
    }

    .ro-profile-card .jt-modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* Reduce age signals: the preview swaps a stated career length for a qualitative phrase, drops the
   graduation year, and adds the Early Career section the demotion produces. */
.dashboard-v2 .output-live-preview-panel .ol-years-qualitative,
.dashboard-v2 .output-live-preview-panel .ol-early-career {
    display: none;
}

.dashboard-v2 .output-live-preview-panel.is-reduce-age-signals .ol-years-explicit,
.dashboard-v2 .output-live-preview-panel.is-reduce-age-signals .ol-grad-date {
    display: none;
}

.dashboard-v2 .output-live-preview-panel.is-reduce-age-signals .ol-years-qualitative {
    display: inline;
}

.dashboard-v2 .output-live-preview-panel.is-reduce-age-signals .ol-early-career {
    display: block;
}