/* ==========================================================================
   Seos_Share_HRCompensationSidebar.css
   --------------------------------------------------------------------------
   Styles for the shared "For HR & Compensation Team" sidebar
   (Views/Shared/ElementScripts/Seoe_Jbs_HRCompensationSidebar.cshtml).

   The sidebar contains 3 cards:
     1. Price-a-Job CTA
     2. Benchmark demo form (email, phone, time picker, submit)
     3. Trending Topics grid

   Design-token dependency:
     Uses the --sa-* CSS custom properties defined in
     Styles/ElementStyles/CSS/Seos_Header_Brand.css.  External consumers
     of this stylesheet must load the brand tokens first, or override
     the tokens themselves with equivalent values.

   Loaded automatically by Seoe_Jbs_HRCompensationSidebar.cshtml via a
   <link> tag with absolute URL, following the same pattern as the popup
   demo forms (Seos_Share_PopupCADemoForm.css etc.).
   ========================================================================== */

/* ==========================================================================
   Main — Sidebar (For HR & Compensation Team)
   ========================================================================== */
.salary-overview-main-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-l);
}

.salary-overview-main-sidebar-title {
    margin: 0;
    font-size: var(--sa-font-size-h4);
    font-weight: 600;
    line-height: var(--sa-line-height-h4);
    letter-spacing: var(--sa-letter-spacing-h);
    color: var(--sa-color-text-link);
    text-decoration: underline;
    cursor: pointer;
}

/* ==========================================================================
   Main — Sidebar Cards
   ========================================================================== */
.salary-overview-main-card {
    padding: var(--sa-space-l);
    background: var(--sa-color-bg-info);
    border-radius: 4px;
}

.salary-overview-main-card-title {
    margin: 0 0 8px;
    font-size: var(--sa-font-size-m);
    font-weight: 700;
    line-height: var(--sa-line-height-m);
    color: var(--sa-color-text-primary);
}

.salary-overview-main-card-body {
    margin: 0 0 var(--sa-space-l);
    font-size: var(--sa-font-size-m);
    line-height: var(--sa-line-height-m);
    color: var(--sa-color-text-secondary);
}

/* ==========================================================================
   Main — Sidebar Card Buttons
   ========================================================================== */
.salary-overview-main-btn {
    display: inline-flex;
    gap: var(--sa-space-s);
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 20px;
    font-size: var(--sa-font-size-m);
    font-weight: 700;
    line-height: var(--sa-line-height-m);
    border-radius: var(--sa-radius-pill);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.salary-overview-main-btn-primary {
    color: var(--sa-color-text-inverse);
    background: var(--sa-color-bg-link);
    border: 0;
}

    .salary-overview-main-btn-primary:hover {
        color: var(--sa-color-text-inverse);
        background: var(--sa-color-text-link-hover);
        text-decoration: none;
    }

    .salary-overview-main-btn-primary:focus {
        color: var(--sa-color-text-inverse);
    }

/* Loading state — used on #benchmark-submit while the form is submitting. */
.salary-overview-main-btn.is-loading {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.75;
}

    .salary-overview-main-btn.is-loading > i {
        display: none;
    }

    .salary-overview-main-btn.is-loading::after {
        content: '';
        width: 16px;
        height: 16px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: sa-btn-spin 0.7s linear infinite;
    }

@keyframes sa-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Main — Sidebar Form Inputs
   ========================================================================== */
.salary-overview-main-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sa-space-m);
    margin-bottom: var(--sa-space-l);
}

@media (min-width: 480px) {
    .salary-overview-main-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.salary-overview-main-form-label {
    display: block;
    margin-bottom: 4px;
    font-size: var(--sa-font-size-s);
    font-weight: 700;
    line-height: var(--sa-line-height-s);
    color: var(--sa-color-text-primary);
    text-transform: none;
}

.salary-overview-main-form-input {
    width: 100%;
    height: 36px;
    padding: 0 12px;
    font: inherit;
    font-size: var(--sa-font-size-s);
    color: var(--sa-color-text-primary);
    background: var(--sa-color-bg-input);
    border: 1px solid var(--sa-color-border-input);
    border-radius: var(--sa-radius-xs);
    outline: 0;
}

    .salary-overview-main-form-input::placeholder {
        color: var(--sa-color-text-tertiary);
    }

    .salary-overview-main-form-input.is-invalid {
        border-width: 2px;
        border-color: var(--sa-color-border-error);
    }

/* ==========================================================================
   Main — Book-a-Demo Time Slots
   ========================================================================== */
.salary-overview-main-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sa-space-s);
    margin-bottom: var(--sa-space-l);
}

.salary-overview-main-time-grid-btn {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    height: 36px;
    padding: 0 12px;
    font-size: var(--sa-font-size-s);
    color: var(--sa-color-text-primary);
    background: var(--sa-color-bg-input);
    border: 1px solid var(--sa-color-border-input);
    border-radius: var(--sa-radius-xs);
    justify-content: space-between;
    text-align: left;
}

    .salary-overview-main-time-grid-btn.is-active {
        color: var(--sa-color-text-link);
        border-color: var(--sa-color-border-link);
        background: #C2E7FF;
        font-weight: 700;
    }

    .salary-overview-main-time-grid-btn .fa-calendar-day {
        margin-left: auto;
        color: var(--sa-color-text-tertiary);
    }

.benchmark-picker-trigger .fa-calendar {
    color: var(--sa-color-icon-brand-secondary);
}

.benchmark-picker-trigger-label {
    color: var(--sa-color-text-tertiary);
}

/* ==========================================================================
   Main — Benchmark Card (picker dropdown, error, thank-you)
   ========================================================================== */
#benchmark-card {
    position: relative;
}

.benchmark-field-error:not([hidden]) {
    display: flex;
    gap: var(--sa-space-s);
    align-items: flex-start;
    margin: 4px 0 0;
    font-size: var(--sa-font-size-s);
    line-height: var(--sa-line-height-s);
    color: var(--sa-color-text-secondary);
}

.benchmark-field-error-icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--sa-color-text-error);
}

.benchmark-error {
    margin: 0 0 var(--sa-space-m);
    font-size: var(--sa-font-size-s);
    line-height: var(--sa-line-height-s);
    color: var(--sa-color-text-error);
}

/* Picker dropdown */
.benchmark-picker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: var(--sa-space-l);
    background: var(--sa-color-bg-white);
    border: 1px solid var(--sa-color-border-default);
    border-radius: var(--sa-radius-s);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.benchmark-picker-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sa-space-l);
}

    .benchmark-picker-head > img {
        width: 24px;
        height: 24px;
        margin-left: auto;
    }

.benchmark-picker-title {
    margin: 0;
    font-size: var(--sa-font-size-l);
    font-weight: 700;
    line-height: var(--sa-line-height-l);
    color: var(--sa-color-text-primary);
}

.benchmark-picker-weeknav {
    display: flex;
    gap: var(--sa-space-m);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sa-space-m);
}

.benchmark-picker-weeklabel {
    font-size: var(--sa-font-size-m);
    font-weight: 700;
    color: var(--sa-color-text-primary);
}

.benchmark-picker-weekbtns {
    display: inline-flex;
    gap: var(--sa-space-m);
}

.benchmark-picker-weekbtn {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 0;
    font-size: var(--sa-font-size-s);
    font-weight: 700;
    color: var(--sa-color-text-link);
    background: transparent;
    border: 0;
}

    .benchmark-picker-weekbtn:disabled {
        color: var(--sa-color-border-bold);
        cursor: not-allowed;
    }

.benchmark-picker-weekbtn-icon-flip {
    transform: rotate(180deg);
}

.benchmark-picker-days {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sa-space-s);
    margin-bottom: var(--sa-space-m);
}

.benchmark-picker-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--sa-space-s);
    font-size: var(--sa-font-size-s);
    line-height: var(--sa-line-height-s);
    color: var(--sa-color-text-primary);
    background: var(--sa-color-bg-input);
    border: 1px solid var(--sa-color-border-default);
    border-radius: var(--sa-radius-xs);
    cursor: pointer;
}

.benchmark-picker-day-weekday {
    font-weight: 400;
}

.benchmark-picker-day-date {
    font-weight: 400;
}

    .benchmark-picker-day:hover {
        border-color: var(--sa-color-border-link);
    }

    .benchmark-picker-day.is-disabled {
        color: var(--sa-color-text-tertiary);
        background: transparent;
        border-color: var(--sa-color-border-default);
        opacity: 0.5;
        cursor: not-allowed;
    }

    .benchmark-picker-day.is-active {
        color: var(--sa-color-text-link);
        border-color: var(--sa-color-border-link);
        background: var(--sa-color-bg-info);
    }

        .benchmark-picker-day.is-active .benchmark-picker-day-weekday,
        .benchmark-picker-day.is-active .benchmark-picker-day-date {
            font-weight: 700;
        }

.benchmark-picker-helper {
    margin: 0 0 var(--sa-space-m);
    font-size: var(--sa-font-size-s);
    line-height: var(--sa-line-height-s);
    font-weight: 400;
    color: var(--sa-color-text-primary);
}

.benchmark-picker-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--sa-space-2xl);
    row-gap: var(--sa-space-m);
    overflow-y: auto;
    margin-bottom: var(--sa-space-l);
}

.benchmark-picker-slot {
    display: inline-flex;
    gap: var(--sa-space-s);
    align-items: center;
    padding: 0;
    font-size: var(--sa-font-size-s);
    line-height: var(--sa-line-height-s);
    color: var(--sa-color-text-primary);
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

    .benchmark-picker-slot:disabled {
        color: var(--sa-color-text-tertiary);
        opacity: 0.5;
        cursor: not-allowed;
    }

    .benchmark-picker-slot .benchmark-picker-slot-radio {
        flex-shrink: 0;
        width: 16px;
        height: 16px;
        border: 1.5px solid var(--sa-color-border-input);
        border-radius: 50%;
        position: relative;
    }

    .benchmark-picker-slot.is-active .benchmark-picker-slot-radio {
        border-color: var(--sa-color-border-link);
    }

        .benchmark-picker-slot.is-active .benchmark-picker-slot-radio::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 8px;
            height: 8px;
            background: var(--sa-color-border-link);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

.benchmark-picker-actions {
    margin-bottom: var(--sa-space-m);
}

.benchmark-picker-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: var(--sa-space-s) var(--sa-space-xl);
    font-size: var(--sa-font-size-m);
    font-weight: 700;
    color: var(--sa-color-text-inverse);
    background: var(--sa-color-bg-link);
    border: 0;
    border-radius: var(--sa-radius-pill);
    cursor: pointer;
}

    .benchmark-picker-apply:disabled {
        background: var(--sa-color-border-bold);
        cursor: not-allowed;
    }

.benchmark-picker-privacy {
    margin: 0;
    font-size: var(--sa-font-size-s);
    line-height: var(--sa-line-height-s);
    color: var(--sa-color-text-secondary);
}

    .benchmark-picker-privacy a {
        color: var(--sa-color-text-link);
        text-decoration: underline;
    }

.benchmark-thanks:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-l);
}

.benchmark-thanks-title {
    margin: 0;
    font-size: var(--sa-font-size-h3);
    font-weight: 600;
    line-height: var(--sa-line-height-h3);
    letter-spacing: var(--sa-letter-spacing-h);
    color: var(--sa-color-text-primary);
}

.benchmark-thanks-body {
    display: flex;
    flex-direction: column;
    gap: var(--sa-space-s);
    font-size: var(--sa-font-size-m);
    line-height: var(--sa-line-height-m);
    color: var(--sa-color-text-secondary);
}

    .benchmark-thanks-body p {
        margin: 0;
    }

.benchmark-picker-trigger {
    justify-content: space-between;
}

    .benchmark-picker-trigger .fa-calendar {
        color: var(--sa-color-bg-brand-secondary);
    }

/* ==========================================================================
   Main — Trending Topics
   ========================================================================== */
.salary-overview-main-trending-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sa-space-l) var(--sa-space-2xl);
    margin-top: var(--sa-space-l);
}

@media (max-width: 1920px) {
    .salary-overview-main-trending-grid {
        gap: var(--sa-space-xl) var(--sa-space-2xl);
    }
}

.salary-overview-main-trending-grid div {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-weight: 700;
    color: var(--sa-color-text-link);
    cursor: pointer;
}

    .salary-overview-main-trending-grid div:hover {
        color: var(--sa-color-text-link-hover);
    }