/* Golden Bearing Admin Portal — Stage 4.9 authentication UI.
   Deliberately framework-free (no Bootstrap/Tailwind/CDN dependency) —
   this stage is authentication UI only; a design system is a decision for
   a later, dedicated stage. */

:root {
    color-scheme: light;
    /* UX redesign («میز کار روشن»): this legacy palette used to be its own
       set of literal blues and greys, predating the design system. Every
       entry is now an alias onto the matching --gb-* token, so the pages
       still on these variables (Login, Error, StatusCode, the 403 page)
       re-theme with everything else instead of drifting a shade colder
       every time tokens.css changes. The names are kept because roughly
       1500 declarations in this file reference them.

       One deliberate non-alias: --color-primary was a navy (#1f4b99) and
       maps to --gb-accent (#123B5D), the brand navy — NOT to the amber.
       These variables back links and secondary chrome here, and pointing
       them at the amber would put the brand accent on dozens of elements
       that are not the page’s one primary action. */
    --color-bg: var(--gb-background);
    --color-surface: var(--gb-surface);
    --color-border: var(--gb-border);
    --color-text: var(--gb-text-primary);
    --color-muted: var(--gb-text-secondary);
    --color-primary: var(--gb-accent);
    --color-primary-hover: var(--gb-accent-hover);
    --color-error-bg: var(--gb-danger-subtle);
    --color-error-border: var(--gb-danger-subtle-border);
    --color-error-text: var(--gb-text-danger);
    --color-info-bg: var(--gb-info-subtle);
    --color-info-border: var(--gb-info-subtle-border);
    --color-info-text: var(--gb-info);
    --color-warning-bg: var(--gb-warning-subtle);
    --color-warning-border: var(--gb-warning-subtle-border);
    --color-warning-text: var(--gb-text-warning);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
}

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

/* ---- App shell ---------------------------------------------------- */

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

.app-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text);
}

.app-header__brand-mark {
    display: block;
    width: auto;
    height: 1.875rem;
    flex-shrink: 0;
}

.app-header__account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.app-header__user {
    color: var(--color-muted);
}

.app-header__logout-form {
    margin: 0;
}

.app-main {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Set by ViewData["FullBleed"] in _Layout — see its remarks. Undoes the
   centred column so a page can own the viewport. */
.app-main--bleed {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---- Buttons -------------------------------------------------------- */

.button {
    display: inline-block;
    font: inherit;
    padding: 0.6rem 1.25rem;
    border-radius: var(--gb-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
}

.button--primary {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
}

.button--primary:hover:not(:disabled) {
    background: var(--color-primary-hover);
}

.button--primary:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.button--link {
    background: transparent;
    border: none;
    color: var(--color-primary);
    padding: 0.25rem 0.25rem;
    text-decoration: underline;
}

/* ---- Auth pages (login) --------------------------------------------- */

/* ---- Sign-in ------------------------------------------------------------
   UX redesign («میز کار روشن»). This was a 380px card floating in the middle
   of an empty page — correct, and completely anonymous: nothing on it said
   which factory it belonged to until the logo was added, and it gave a user
   arriving from a link no sense of what they were signing in to.

   It is now the two-panel shape from the design: a navy brand panel that
   carries the mark, the product's one-line promise and the support number,
   beside the form itself on warm paper. The brand panel is decoration in the
   strict sense — it holds no control — so below 860px it is dropped
   entirely rather than stacked, and the form gets the whole screen. That is
   also the right call for the shop floor, where sign-in happens on a phone.

   The whole thing is `100dvh`, not `100vh`: on mobile browsers the toolbar
   collapses on scroll and `vh` leaves a strip of background below the fold.
   -------------------------------------------------------------------------- */

.auth-page {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 40% 1fr;
}

/* ---- The brand panel ---- */

.auth-brand {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.75rem 3rem;
    background: var(--gb-brand-accent);
    color: #EAF0F5;
}

/* The mark again, oversized and nearly transparent, bled off the bottom
   corner. `aria-hidden` in the markup: it is the same logo already named at
   the top of the panel, so a screen reader announcing it twice is noise. */
.auth-brand__watermark {
    position: absolute;
    inset-inline-start: -150px;
    inset-block-end: -140px;
    width: 480px;
    height: auto;
    opacity: 0.10;
    pointer-events: none;
}

.auth-brand__lockup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* A white tile behind the mark. The logo's grey arcs sit at roughly 2.6:1
   against the navy — fine for a shape, poor for the company's own mark — so
   it keeps the light ground it was drawn for. */
.auth-brand__mark {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: 0 0 auto;
    border-radius: var(--gb-radius-lg);
    background: #FFFFFF;
}

.auth-brand__mark img {
    display: block;
    width: auto;
    height: 2.4rem;
}

.auth-brand__name {
    font-size: 1.15rem;
    font-weight: var(--gb-font-weight-extrabold);
}

.auth-brand__name span {
    color: #F5B94B;
}

.auth-brand__kicker {
    font-size: var(--gb-font-size-sm);
    color: #8FA9C0;
}

.auth-brand__pitch {
    position: relative;
    margin-block-start: auto;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.auth-brand__pitch h2 {
    margin: 0;
    font-size: 1.6rem;
    font-weight: var(--gb-font-weight-extrabold);
    line-height: 1.6;
    letter-spacing: -0.4px;
}

.auth-brand__pitch p {
    margin: 0;
    max-width: 34ch;
    color: #B7C7D6;
    line-height: 2;
}

.auth-brand__meta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--gb-font-size-xs);
    color: #8FA9C0;
}

.auth-brand__meta i {
    width: 3px;
    height: 3px;
    border-radius: 999px;
    background: #2C557C;
}

/* ---- The form side ---- */

/* Measured on the built page: this side is 768px and the form inside it was
   384 — a small box dead-centre in twice its own width of empty paper. That
   reads as unfinished, not spacious.

   It is a column now, not a centred box: the form sits on a measure that
   starts at a real margin, with the wordmark above it and the build meta
   below, so the whole side is one composed page. Optically raised above
   centre, which is where a viewer expects the subject of a page to sit. */
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: var(--gb-background);
}

@media (max-width: 860px) {
    .auth-page {
        grid-template-columns: 1fr;
    }

    /* Dropped, not stacked — see the note at the top of this section. */
    .auth-brand {
        display: none;
    }
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--color-surface);
    border: 1px solid transparent;
    border-radius: var(--gb-radius-xl);
    padding: 2.25rem 2rem;
    box-shadow: var(--gb-shadow-lg);
}

/* box-shadow does not paint in High Contrast Mode; the transparent border
   above is re-coloured here so the card keeps an edge. Same treatment as
   .gb-card in components.css. */
@media (forced-colors: active) {
    .auth-card {
        border-color: CanvasText;
    }
}

/* Shown only when the brand panel is not: below 860px the panel is dropped,
   and the sign-in screen would otherwise carry no mark at all. */
.auth-card__logo {
    display: none;
    width: auto;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
}

@media (max-width: 860px) {
    .auth-card__logo {
        display: block;
    }
}

.auth-card__title {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
}

.auth-card__subtitle {
    margin: 0 0 1.5rem;
    color: var(--color-muted);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-field label {
    font-weight: 600;
    font-size: 0.9rem;
}

.form-field input {
    font: inherit;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--gb-radius-sm);
}

.form-field input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.field-error {
    color: var(--color-error-text);
    font-size: 0.85rem;
}

/* ---- Alerts ----------------------------------------------------------- */

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--gb-radius-sm);
    font-size: 0.9rem;
}

.alert:empty {
    display: none;
}

.alert--error {
    background: var(--color-error-bg);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
}

.alert--info {
    background: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
    color: var(--color-info-text);
}

/* ---- HR Validation Portal (Stage: HR End-to-End Process Validation) --
   "Future Domain Required" banner — additive only, does not change any
   existing alert variant. */
.alert--warning {
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
}

/* ---- App navigation (Stage 5.6) -------------------------------------- */

.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    padding: 0.6rem 1.5rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.app-nav a {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.92rem;
}

.app-nav a:hover,
.app-nav a.app-nav__link--active {
    color: var(--color-primary);
    font-weight: 600;
}

/* ---- Page headers ------------------------------------------------------ */

.page-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.page-header h1 {
    margin: 0 0 0.25rem;
}

.page-header p {
    margin: 0;
    color: var(--color-muted);
}

.breadcrumb {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
}

.breadcrumb a {
    color: var(--color-muted);
}

/* ---- Cards / summary tiles --------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--gb-radius-md);
    padding: 1.25rem;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--gb-radius-md);
    padding: 1.25rem;
}

.tile__value {
    font-size: 1.75rem;
    font-weight: 700;
}

.tile__label {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.tile__link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.section {
    margin-bottom: 2rem;
}

.section-title {
    font-size: 1.1rem;
    margin: 0 0 0.75rem;
}

/* ---- Tables ------------------------------------------------------------ */

.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--gb-radius-md);
    overflow: hidden;
}

.data-table th,
.data-table td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.92rem;
}

.data-table th {
    background: var(--color-bg);
    font-weight: 600;
    color: var(--color-muted);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

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

.data-table__empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--color-muted);
}

.data-table a {
    text-decoration: none;
}

/* ---- Pagination --------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    font-size: 0.88rem;
    color: var(--color-muted);
}

.pagination a {
    color: var(--color-primary);
    text-decoration: none;
}

.pagination span[aria-current="page"] {
    font-weight: 600;
    color: var(--color-text);
}

/* ---- Forms (beyond the auth card) --------------------------------------- */

.form-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 480px;
}

.form-field select,
.form-field textarea {
    font: inherit;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--gb-radius-sm);
    background: var(--color-surface);
}

.form-field textarea {
    resize: vertical;
    min-height: 4.5rem;
}

.form-hint {
    color: var(--color-muted);
    font-size: 0.8rem;
}

.form-actions {
    display: flex;
    gap: 0.75rem;
}

.button--secondary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}

/* ---- Badges -------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}

.badge--active {
    background: var(--gb-success-subtle);
    color: var(--gb-success);
}

.badge--inactive {
    background: var(--gb-surface-sunken);
    color: var(--color-muted);
}

/* ---- Organization tree ---------------------------------------------------- */

.org-tree,
.org-tree ul {
    list-style: none;
    margin: 0;
    padding-left: 1.1rem;
}

.org-tree {
    padding-left: 0;
}

.org-tree summary {
    cursor: pointer;
    padding: 0.25rem 0;
}

.org-tree summary:hover {
    color: var(--color-primary);
}

.org-tree__leaf {
    padding: 0.25rem 0;
}

.org-tree__node-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.org-tree__node-button:hover {
    color: var(--color-primary);
}

/* ---- Workflow RTL & status extras (Stage 7.6) -----------------------
   Scoped to .rtl-page so every existing (English, LTR) Organization/HR/
   Authentication page is completely unaffected — this stage's own
   "implement only src/Web/AdminPortal/Workflow/" scope means no existing
   page's dir/lang attribute changes; only new Workflow pages wrap their
   content in <div class="rtl-page" dir="rtl" lang="fa">. See TD-017 (no
   Persian RTL support anywhere in AdminPortal) — this is the first stage
   to add any, deliberately scoped to the one module this ticket covers. */

.rtl-page {
    direction: rtl;
    text-align: right;
}

.rtl-page .data-table th,
.rtl-page .data-table td {
    text-align: right;
}

.rtl-page .page-header {
    flex-direction: row-reverse;
}

/* A plain definition list laid out as label | value. The `:not()` is
   load-bearing, not tidiness: this selector is (0,1,1) and the design
   system component `.gb-detail-list` is (0,1,0), so on any page carrying
   both classes this rule won — and it lays out the WRONG boxes. The
   component wraps each pair in a `.gb-detail-list__item` div, so
   `max-content 1fr` sized whole ITEMS instead of labels and values: the
   first pair was crushed into a 76px column while the second took 625px,
   with the leftover height showing as dead space in the card.

   Measured on the HR employee file; 20 pages across HR, Recruitment,
   PhysicalSecurity, Traceability, Verify and the dealer Panel carry both
   classes and were all affected. Same trap as `.gb-app a` in base.css,
   which keeps its own exception list for the same reason. */
.rtl-page dl:not(.gb-detail-list) {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
}

.rtl-page dt {
    font-weight: 600;
    color: var(--color-muted);
}

.rtl-page dd {
    margin: 0;
}

/* Additional status badges beyond the existing active/inactive pair —
   generic, module-agnostic modifiers (not RTL-specific) following the same
   .badge--* naming already established. */
.badge--workflow-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
}

.badge--workflow-rejected {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.workflow-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.workflow-timeline__item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--gb-radius-md);
    padding: 0.75rem 1rem;
}

/* ---- HR simple admin portal extras (this stage) -----------------------
   Reuses .rtl-page / .badge--workflow-pending / .badge--workflow-rejected
   as-is (see HRLabels' own remarks) — the only genuinely new rule this
   stage needs is a disabled-looking tile modifier for the HR Dashboard's
   Recruitment workflow entry-point placeholders (page requirement #8:
   "UI placeholders only... do not implement Recruitment"). Additive only,
   same pattern Stage 7.6 used above. */

.tile--disabled {
    opacity: 0.6;
}

.tile__link--disabled {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-muted);
}

/* ---- HR Validation Portal — Candidate pipeline board (Module 2) ------ */

.pipeline-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    align-items: start;
}

.pipeline-board__column {
    min-height: 120px;
}

.pipeline-board__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pipeline-board__list li {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--gb-radius-sm);
    padding: 0.5rem 0.75rem;
}

/* ---- HR Validation Portal — Employment timeline (Module 4) ----------- */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline__item {
    border-inline-start: 3px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--gb-radius-sm);
    padding: 0.75rem 1rem;
}

.timeline__item--ended {
    border-inline-start-color: var(--color-muted);
}

.timeline__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

/* ---- Responsive ---------------------------------------------------- */

@media (max-width: 480px) {
    .app-header {
        padding: 0.75rem 1rem;
    }

    .auth-card {
        padding: 1.5rem;
    }
}

/* Recruitment Stage 1 — management workspace */
.recruitment-page { max-width: 1440px; margin-inline: auto; }
.recruitment-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-block:1rem 1.5rem; }
.recruitment-header h1 { margin:0 0 .35rem; font-size:1.65rem; }
.recruitment-header p { margin:0; color:var(--color-muted); }
.recruitment-layout { display:grid; grid-template-columns:minmax(0, 7fr) minmax(280px, 3fr); gap:1.25rem; align-items:start; }
.recruitment-main, .recruitment-sidebar { display:flex; flex-direction:column; gap:1rem; min-width:0; }
.recruitment-sidebar { position:sticky; top:1rem; }
.recruitment-card { padding:1.25rem; border:1px solid var(--color-border); border-radius:var(--gb-radius-lg); background:var(--color-surface); }
.recruitment-card__head { margin-bottom:1rem; }
.recruitment-card__head h2 { margin:0 0 .25rem; font-size:1.05rem; }
.recruitment-card__head p { margin:0; color:var(--color-muted); font-size:.9rem; }

/* Employee employment-file workspace */
.employee-file-hero { display:flex; align-items:center; gap:1.5rem; padding:1.5rem 1.75rem; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); background:var(--gb-surface); box-shadow:var(--gb-shadow-sm); }
.employee-file-hero__photo { width:112px; height:112px; flex:0 0 112px; overflow:hidden; display:grid; place-items:center; border:3px solid var(--gb-gray-100); border-radius:50%; background:var(--gb-gray-100); color:var(--gb-text-primary); font-size:2rem; font-weight:700; box-shadow:0 0 0 1px var(--gb-border); }
.employee-file-hero__photo img { width:100%; height:100%; object-fit:cover; }
.employee-file-hero__body { min-width:0; flex:1; }
.employee-file-hero__title { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.employee-file-hero__title h2 { margin:0; color:var(--gb-text-primary); font-size:1.6rem; }
.employee-file-hero__body > p { margin:.35rem 0 0; color:var(--gb-text-primary); }
.employee-file-hero__body > .employee-file-hero__unit { margin:.25rem 0 .9rem; color:var(--gb-text-secondary); font-size:.875rem; }
.employee-file-hero__facts { display:flex; flex-wrap:wrap; gap:.55rem 1.75rem; color:var(--gb-text-secondary); font-size:.875rem; }
.employee-file-hero__facts strong { color:var(--gb-text-primary); }
.employee-file-tabs { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:0 .25rem; margin-top:1rem; padding:0 .75rem; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-lg); background:var(--gb-surface); box-shadow:var(--gb-shadow-sm); }
.employee-file-tabs a { position:relative; min-width:max-content; padding:.85rem 1rem; border-radius:var(--gb-radius-sm) var(--gb-radius-sm) 0 0; color:var(--gb-text-secondary); text-decoration:none; font-weight:700; }
.employee-file-tabs a:hover { color:var(--gb-text-primary); background:var(--gb-surface-alt); }
.employee-file-tabs a.is-active { color:var(--gb-text-primary); }
.employee-file-tabs a.is-active::after { content:""; position:absolute; right:.65rem; left:.65rem; bottom:0; height:3px; border-radius:var(--gb-radius-sm) 3px 0 0; background:var(--gb-primary); }
.employee-file-tab-button { position:relative; min-width:max-content; padding:.85rem 1rem; border:0; border-radius:var(--gb-radius-sm) var(--gb-radius-sm) 0 0; background:transparent; color:var(--gb-text-secondary); font:inherit; font-weight:700; cursor:pointer; }
.employee-file-tab-button:hover { color:var(--gb-text-primary); background:var(--gb-surface-alt); }
.employee-file-tab-button.is-active { color:var(--gb-text-primary); }
.employee-file-tab-button.is-active::after { content:""; position:absolute; right:.65rem; left:.65rem; bottom:0; height:3px; border-radius:var(--gb-radius-sm) 3px 0 0; background:var(--gb-primary); }
.employee-file-card { border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); box-shadow:var(--gb-shadow-sm); }
.employee-file-section-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.employee-file-section-head h2 { margin-bottom:.3rem; }
.employee-file-section-head p { margin:0; color:var(--color-muted); font-size:.875rem; }

/* اطلاعات فردی tab — the four-card identity/contact/job/education grid
   (personnel-file redesign). Fixed two columns, same breakpoint as the
   document table below, rather than gb-grid's auto-fit: the mockup this
   matches always pairs the cards two-by-two. */
.employee-file-info-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:1rem; }
.employee-file-info-grid .gb-detail-list__item { padding:.48rem 0; border-bottom:1px solid var(--gb-border-subtle); }
.employee-file-info-grid .gb-detail-list__item:last-child { border-bottom:0; }
.employee-file-edit-link { display:inline-flex; flex:0 0 auto; align-items:center; gap:.35rem; color:var(--gb-accent); font-size:.8rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.employee-file-edit-link:hover { text-decoration:underline; }
.employee-file-edit-link svg { width:14px; height:14px; flex:0 0 14px; }

.employee-file-empty { padding:1.5rem; border:1px dashed var(--gb-border-subtle); border-radius:var(--gb-radius-md); color:var(--color-muted); text-align:center; background:var(--gb-surface-alt); }
.employee-file-lower-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; margin-top:1rem; }
.employee-file-lower-grid > .card { margin:0; min-width:0; }
.employee-file-compact-table th, .employee-file-compact-table td { padding:.7rem .65rem; font-size:.8rem; }
.employee-file-document-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.employee-file-document-tile { min-width:0; color:var(--gb-text-primary); font-size:.75rem; font-weight:600; text-align:center; text-decoration:none; }
.employee-file-document-tile__preview { height:105px; display:grid; place-items:center; overflow:hidden; margin-bottom:.45rem; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); background:var(--gb-gray-100); color:var(--gb-text-inverse); }
.employee-file-document-tile__preview img { width:100%; height:100%; object-fit:cover; }
.employee-file-document-tile__preview strong { display:grid; place-items:center; width:44px; height:54px; border-radius:var(--gb-radius-sm); background:var(--gb-danger); font-size:.72rem; }
.employee-file-document-tile:hover { color:var(--gb-accent); }
.employee-file-page { max-width:1440px; margin-inline:auto; }
.employee-file-toolbar { display:flex; flex-direction:column; gap:.55rem; margin-inline-start:auto; }
/* ---- Record navigator ---------------------------------------------------
   The nine sections of a personnel file, as a rail beside the content
   instead of tabs above it. The old strip could not hold them: measured at
   790px it needed 1207px, so three sections sat off-screen behind a native
   scrollbar; wrapping fixed the hiding but produced a two-row strip, which
   reads as two groups. A column has room for all nine at full label length
   and stays legible however many more the file grows.

   Below 1100px it turns back into a horizontal scroller — a 220px rail plus
   readable content does not fit, and at that width the section names are
   short enough to swipe through. */
.employee-file-layout {
    display: grid;
    grid-template-columns: 13.75rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
}

.employee-file-rail {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: .5rem;
    border: 1px solid var(--gb-border-subtle);
    border-radius: var(--gb-radius-xl);
    background: var(--gb-surface);
    box-shadow: var(--gb-shadow-sm);
}

.employee-file-rail__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .65rem;
    border: 0;
    border-radius: var(--gb-radius-sm);
    background: transparent;
    color: var(--gb-text-secondary);
    font: inherit;
    font-size: var(--gb-font-size-md);
    font-weight: var(--gb-font-weight-medium);
    text-align: start;
    cursor: pointer;
}

.employee-file-rail__item:hover {
    background: var(--gb-surface-alt);
    color: var(--gb-text-primary);
}

/* Same treatment as the sidebar's current page: amber tint, dark ink, amber
   icon — so "where am I" reads the same way everywhere in the product. */
.employee-file-rail__item.is-active {
    background: var(--gb-primary-subtle);
    color: var(--gb-text-primary);
    font-weight: var(--gb-font-weight-bold);
}

.employee-file-rail__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 1.05rem;
    height: 1.05rem;
    color: var(--gb-text-tertiary);
}

.employee-file-rail__icon svg { width: 100%; height: 100%; }

.employee-file-rail__item.is-active .employee-file-rail__icon { color: var(--gb-primary-active); }

.employee-file-rail__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-file-content { min-width: 0; }

@media (max-width: 1100px) {
    .employee-file-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .employee-file-rail {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        /* Without this the row scrolls its own content AND lets the page
           scroll sideways in RTL — see the note on the same pattern in
           physicalsecurity.css. */
        contain: paint;
    }

    .employee-file-rail__item { flex: 0 0 auto; }

    .employee-file-rail__label { white-space: nowrap; }
}

.employee-file-panel { margin-top:1rem; }
.employee-file-panel[hidden] { display:none !important; }

/* On paper, all nine. The rail is a tab strip: exactly one panel is visible
   at a time, so printing a personnel file was printing ONE NINTH of it --
   whichever section happened to be open. Nobody prints an employee file to
   get its contact details alone; they print it for a signature, an audit, or
   the physical folder. Screen-only decisions like [hidden] have to be undone
   for the medium that has no tabs. */
@media print {
    /* The reveal itself is the shared rule's job now -- these panels carry
       role="tabpanel", so [role="tabpanel"][hidden] in components.css opens
       them along with every other tabbed record in the portal. What is left
       here is only what is specific to this page. */
    .employee-file-panel { break-inside: avoid; }
}
.employee-file-module-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.employee-file-module-grid > .card { margin:0; min-width:0; }
.employee-file-stat-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.employee-file-stat { padding:1rem; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); background:var(--gb-surface-alt); text-align:center; }
.employee-file-stat strong { display:block; color:var(--gb-text-primary); font-size:1.45rem; }
.employee-file-stat span { display:block; margin-top:.25rem; color:var(--gb-text-secondary); font-size:.78rem; }
.employee-file-stat.is-danger { border-color:var(--gb-danger-subtle-border); background:var(--gb-danger-subtle); }
.employee-file-stat.is-danger strong { color:var(--gb-danger); }
.employee-file-account-form, .employee-file-terminate-form, .employee-file-lifecycle-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; }
.employee-file-account-form select, .employee-file-terminate-form input { min-height:38px; padding:.4rem .65rem; border:1px solid var(--gb-border); border-radius:var(--gb-radius-md); background:var(--gb-surface); color:var(--gb-text-primary); font:inherit; }
/* EQP-15/ADR-084 — the exit-clearance override reason field the terminate form reveals on a HasOpenEquipmentCustody conflict. */
.employee-file-override-reason { flex:1 1 100%; min-width:14rem; min-height:2.6rem; padding:.4rem .65rem; border:1px solid var(--gb-danger-subtle-border); border-radius:var(--gb-radius-md); background:var(--gb-surface); color:var(--gb-text-primary); font:inherit; resize:vertical; }
.employee-file-exit-plan { margin-top:.75rem; }
.employee-file-skill-list { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.employee-file-document-card { min-width:0; padding:.6rem; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); background:var(--gb-surface); }
.employee-file-replace { display:block; margin-top:.55rem; padding:.35rem; color:var(--gb-accent); font-size:.75rem; font-weight:700; text-align:center; cursor:pointer; }
.employee-file-edit-link:is(button) { border:0; background:transparent; font:inherit; cursor:pointer; }

.employee-inline-editor { width:min(760px, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); padding:0; border:0; border-radius:var(--gb-radius-xl); overflow:auto; box-shadow:var(--gb-shadow-xl); }
.employee-inline-editor::backdrop { background:var(--gb-overlay); backdrop-filter:blur(3px); }
.employee-inline-editor__header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.25rem; color:var(--gb-text-inverse); background:var(--gb-gray-800); }
.employee-inline-editor__close { width:36px; height:36px; border:0; border-radius:50%; color:var(--gb-text-inverse); background:rgb(255 255 255 / 14%); font:inherit; font-size:1.4rem; cursor:pointer; }
.employee-inline-editor__body { padding:1.4rem; }
.employee-inline-editor__body h3 { margin:0 0 1rem; color:var(--gb-text-primary); }
.employee-inline-editor__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.employee-inline-editor__grid label { display:grid; gap:.45rem; color:var(--gb-text-secondary); font-family:inherit; font-size:.82rem; font-weight:700; line-height:1.6; }
.employee-inline-editor__grid .form-control { width:100%; min-height:42px; padding:.58rem .75rem; border:1px solid var(--gb-border); border-radius:var(--gb-radius-md); background:var(--gb-surface); color:var(--gb-text-primary); font-family:inherit; font-size:.9rem; font-weight:400; line-height:1.7; box-shadow:none; }
.employee-inline-editor__grid textarea.form-control { min-height:88px; resize:vertical; }
.employee-inline-editor__grid .form-control:focus { border-color:var(--gb-primary); outline:3px solid var(--gb-primary-subtle); }
.employee-inline-editor__wide { grid-column:1/-1; }
.employee-inline-editor__footer { display:flex; justify-content:flex-end; gap:.65rem; padding:1rem 1.4rem; border-top:1px solid var(--gb-border-subtle); background:var(--gb-surface-alt); }
.employee-file-more { margin-top:1rem; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); background:var(--gb-surface); }
.employee-file-more > summary { padding:1rem 1.25rem; color:var(--gb-text-primary); font-weight:700; cursor:pointer; list-style-position:inside; }
.employee-file-more[open] > summary { border-bottom:1px solid var(--gb-border-subtle); }
.employee-file-more__body { padding:1rem; background:var(--gb-surface-alt); border-radius:0 0 10px 10px; }
.employee-file-more__body > .card:first-child { margin-top:0; }

/* مدارک پرسنلی table — عنوان مدرک / پیش‌نمایش / وضعیت / عملیات, in that
   (RTL reading) order. */
.employee-document-table { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); overflow:hidden; }
.employee-document-table th { padding:.65rem 1rem; background:var(--gb-surface-alt); color:var(--color-muted); font-size:.8rem; font-weight:700; text-align:start; white-space:nowrap; }
.employee-document-table td { padding:.65rem 1rem; border-top:1px solid var(--gb-border-subtle); vertical-align:middle; }
.employee-document-table__name small { display:block; overflow:hidden; color:var(--color-muted); text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:right; }
.employee-document-table__preview { width:54px; height:46px; display:grid; place-items:center; overflow:hidden; border:1px solid var(--gb-border-subtle); border-radius:var(--gb-radius-md); background:var(--gb-surface-alt); color:var(--gb-text-secondary); font-size:.7rem; font-weight:800; }
.employee-document-table__preview img { width:100%; height:100%; object-fit:cover; }
.employee-document-table__status { color:var(--gb-success); font-size:.85rem; font-weight:700; white-space:nowrap; }
.employee-document-table__actions { display:flex; gap:.4rem; white-space:nowrap; }

@media (max-width: 760px) {
  .employee-file-hero { align-items:flex-start; }
  .employee-file-hero__photo { width:78px; height:92px; flex-basis:78px; }
  .employee-file-section-head { flex-direction:column; }
}

@media (max-width: 860px) {
  .employee-file-info-grid { grid-template-columns:1fr; }
  .employee-file-lower-grid { grid-template-columns:1fr; }
  .employee-file-module-grid { grid-template-columns:1fr; }
}
@media (max-width: 560px) { .employee-file-document-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .employee-file-hero { align-items:flex-start; flex-wrap:wrap; } .employee-file-toolbar { width:100%; flex-direction:row; } .employee-inline-editor__grid { grid-template-columns:1fr; } .employee-inline-editor__wide { grid-column:auto; } }
.recruitment-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.recruitment-fields .form-field { min-width:0; }
.recruitment-fields .form-field--full { grid-column:1/-1; }
.recruitment-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.recruitment-kpi { padding:.85rem .5rem; text-align:center; border:1px solid var(--color-border); border-radius:var(--gb-radius-md); background:var(--color-bg); }
.recruitment-kpi strong { display:block; font-size:1.55rem; color:var(--color-primary); line-height:1.25; }
.recruitment-kpi span { display:block; margin-top:.25rem; color:var(--color-muted); font-size:.78rem; }
.recruitment-impact { margin-top:.85rem; padding:.8rem; border-radius:var(--gb-radius-md); background:color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.recruitment-impact strong { font-size:1.15rem; }
.recruitment-flow { list-style:none; margin:0; padding:0; }
.recruitment-flow li { position:relative; padding:.6rem 2rem .6rem 0; color:var(--color-muted); }
.recruitment-flow li::before { content:'○'; position:absolute; right:0; color:var(--color-muted); }
.recruitment-flow li:not(:last-child)::after { content:''; position:absolute; right:.43rem; top:1.8rem; height:1rem; border-right:1px solid var(--color-border); }
.recruitment-flow li.is-done { color:var(--color-text); }
.recruitment-flow li.is-done::before { content:'✓'; color:var(--color-success); font-weight:700; }
.recruitment-flow li.is-current { color:var(--color-primary); font-weight:700; }
.recruitment-flow li.is-current::before { content:'●'; color:var(--color-primary); }
.recruitment-actions { display:flex; justify-content:flex-end; align-items:center; gap:.75rem; flex-wrap:wrap; padding:1rem 1.25rem; border:1px solid var(--color-border); border-radius:var(--gb-radius-lg); background:var(--color-surface); }
.recruitment-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.recruitment-summary__item { padding:.8rem; background:var(--color-bg); border-radius:var(--gb-radius-md); }
.recruitment-summary__item span { display:block; color:var(--color-muted); font-size:.8rem; margin-bottom:.25rem; }
.recruitment-table-wrap { overflow-x:auto; border:1px solid var(--color-border); border-radius:var(--gb-radius-lg); background:var(--color-surface); }
.recruitment-table-wrap .data-table { margin:0; min-width:920px; }
.recruitment-filter { display:flex; gap:1rem; align-items:end; flex-wrap:wrap; }
.recruitment-filter .form-field { min-width:210px; flex:1; }
@media (max-width: 900px) {
  .recruitment-layout { grid-template-columns:1fr; }
  .recruitment-sidebar { position:static; }
  .recruitment-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .recruitment-header { flex-direction:column; }
  .recruitment-fields, .recruitment-summary { grid-template-columns:1fr; }
  .recruitment-kpis { grid-template-columns:1fr; }
  .recruitment-actions .button { width:100%; text-align:center; }
}

/* Requisition authoring additions. Uses the product tokens unchanged. */
.requisition-create-enhanced .recruitment-card {
  border-radius: var(--gb-radius-lg);
  box-shadow: var(--gb-shadow-sm);
}

.requisition-create-enhanced textarea[readonly] {
  min-height: 8rem;
  background: var(--gb-surface-secondary);
  color: var(--gb-text-secondary);
  line-height: var(--gb-line-height-relaxed);
  resize: vertical;
}

.requisition-skill-picker {
  padding-top: var(--gb-space-2);
}

.requisition-skill-picker__suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gb-space-2);
  margin-block: var(--gb-space-2) var(--gb-space-4);
}

.requisition-skill-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gb-space-2);
  padding: var(--gb-space-2) var(--gb-space-3);
  border: 1px solid var(--gb-border-subtle);
  border-radius: var(--gb-radius-md);
  background: var(--gb-surface-secondary);
}

.requisition-skill-suggestion > span {
  display: grid;
  min-width: 0;
}

.requisition-skill-suggestion strong {
  overflow: hidden;
  color: var(--gb-text-primary);
  font-size: var(--gb-font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.requisition-skill-suggestion small {
  color: var(--gb-text-secondary);
  font-size: var(--gb-font-size-xs);
}

.requisition-skill-suggestion__action {
  flex: none;
  padding: var(--gb-space-1) var(--gb-space-2);
  border: 1px solid var(--gb-accent-subtle-border);
  border-radius: var(--gb-radius-sm);
  background: var(--gb-accent-subtle);
  color: var(--gb-accent);
  cursor: pointer;
}

.requisition-skill-suggestion__action:disabled {
  border-color: var(--gb-border-subtle);
  background: var(--gb-surface);
  color: var(--gb-text-disabled);
  cursor: default;
}

.requisition-skill-picker__custom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 12rem auto;
  gap: var(--gb-space-2);
  align-items: end;
}

.requisition-skill-picker__selected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gb-space-2);
  margin-top: var(--gb-space-3);
}

.requisition-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gb-space-2);
  padding: var(--gb-space-1) var(--gb-space-2);
  border: 1px solid var(--gb-primary-subtle-border);
  border-radius: var(--gb-radius-full);
  background: var(--gb-primary-subtle);
  color: var(--gb-text-primary);
  font-size: var(--gb-font-size-sm);
}

.requisition-skill-chip__remove {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: var(--gb-radius-full);
  background: transparent;
  color: var(--gb-text-secondary);
  cursor: pointer;
}

.requisition-skill-chip__remove:hover {
  background: var(--gb-danger-subtle);
  color: var(--gb-text-danger);
}

.requisition-choice-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gb-space-5);
}

.requisition-choice-group {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: var(--gb-space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.requisition-choice-group--full {
  grid-column: 1 / -1;
}

.requisition-choice-group legend {
  width: 100%;
  margin-bottom: var(--gb-space-1);
  color: var(--gb-text-primary);
  font-weight: var(--gb-font-weight-semibold);
}

.requisition-choice-group label {
  position: relative;
  cursor: pointer;
}

.requisition-choice-group input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.requisition-choice-group span {
  display: inline-flex;
  padding: var(--gb-space-2) var(--gb-space-3);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-md);
  background: var(--gb-surface);
  color: var(--gb-text-secondary);
  transition: border-color var(--gb-duration-fast) var(--gb-ease-standard), background var(--gb-duration-fast) var(--gb-ease-standard);
}

.requisition-choice-group input:checked + span {
  border-color: var(--gb-accent);
  background: var(--gb-accent-subtle);
  color: var(--gb-accent);
}

.requisition-choice-group input:focus-visible + span {
  box-shadow: var(--gb-shadow-focus);
}

.requisition-notes {
  margin-top: var(--gb-space-5);
}

@media (max-width: 720px) {
  .requisition-skill-picker__suggestions,
  .requisition-choice-groups { grid-template-columns: 1fr; }
  .requisition-choice-group--full { grid-column: auto; }
  .requisition-skill-picker__custom { grid-template-columns: 1fr; }
}

/* Job opening authoring — two-column form with live public preview. */
.job-opening-create { max-width: 1480px; margin-inline: auto; }

.job-opening-source {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) minmax(28rem, 2fr) auto;
  align-items: center;
  gap: var(--gb-space-5);
  padding: var(--gb-space-4) var(--gb-space-5);
  border: 1px solid var(--gb-border-subtle);
  border-radius: var(--gb-radius-lg);
  background: var(--gb-surface);
  box-shadow: var(--gb-shadow-sm);
}

.job-opening-source__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--gb-radius-md);
  background: var(--gb-primary-subtle);
  color: var(--gb-primary-active);
  font-weight: var(--gb-font-weight-bold);
}

.job-opening-source__title { display: grid; gap: var(--gb-space-1); }
.job-opening-source__title span { color: var(--gb-text-secondary); font-size: var(--gb-font-size-sm); }
.job-opening-source__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gb-space-4); margin: 0; }
.job-opening-source__facts div { min-width: 0; }
.job-opening-source__facts dt { color: var(--gb-text-secondary); font-size: var(--gb-font-size-xs); }
.job-opening-source__facts dd { margin: var(--gb-space-1) 0 0; color: var(--gb-text-primary); font-weight: var(--gb-font-weight-semibold); }

.job-opening-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 23rem;
  gap: var(--gb-space-5);
  align-items: start;
  margin-top: var(--gb-space-5);
}

.job-opening-main { display: grid; gap: var(--gb-space-4); min-width: 0; }
.job-opening-main .recruitment-card { border-radius: var(--gb-radius-lg); box-shadow: var(--gb-shadow-sm); }

.job-opening-skills__selected {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gb-space-2);
  min-height: 2.5rem;
  margin-bottom: var(--gb-space-3);
}

.job-opening-skill-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gb-space-2);
  padding: var(--gb-space-2) var(--gb-space-3);
  border: 1px solid var(--gb-accent-subtle-border);
  border-radius: var(--gb-radius-md);
  background: var(--gb-accent-subtle);
  color: var(--gb-accent);
  font-size: var(--gb-font-size-sm);
  font-weight: var(--gb-font-weight-medium);
}

.job-opening-skill-chip button {
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border: 0;
  border-radius: var(--gb-radius-full);
  background: transparent;
  color: currentColor;
  cursor: pointer;
}

.job-opening-skill-chip button:hover { background: var(--gb-surface); }
.job-opening-skills__add { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gb-space-2); }

.job-opening-skills__catalogue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gb-space-2);
  max-height: 18rem;
  margin-top: var(--gb-space-2);
  padding: var(--gb-space-2);
  overflow-y: auto;
  border: 1px solid var(--gb-border-subtle);
  border-radius: var(--gb-radius-md);
  background: var(--gb-surface-secondary);
}

.job-opening-skill-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 var(--gb-space-2);
  align-items: center;
  padding: var(--gb-space-2) var(--gb-space-3);
  border: 1px solid var(--gb-border-subtle);
  border-radius: var(--gb-radius-md);
  background: var(--gb-surface);
  color: var(--gb-text-primary);
  text-align: start;
  cursor: pointer;
}

.job-opening-skill-option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-opening-skill-option small { grid-column: 1; color: var(--gb-text-secondary); font-size: var(--gb-font-size-xs); }
.job-opening-skill-option b { grid-column: 2; grid-row: 1 / span 2; color: var(--gb-accent); font-size: var(--gb-font-size-xs); font-weight: var(--gb-font-weight-medium); }
.job-opening-skill-option:hover:not(:disabled) { border-color: var(--gb-accent); background: var(--gb-accent-subtle); }
.job-opening-skill-option:disabled { color: var(--gb-text-disabled); cursor: default; }
.job-opening-skill-option:disabled b { color: var(--gb-text-disabled); }

.job-opening-choice-groups { display: grid; gap: var(--gb-space-5); }
.job-opening-choice-groups fieldset { display: flex; flex-wrap: wrap; gap: var(--gb-space-2); margin: 0; padding: 0; border: 0; }
.job-opening-choice-groups legend { width: 100%; margin-bottom: var(--gb-space-1); color: var(--gb-text-primary); font-weight: var(--gb-font-weight-semibold); }
.job-opening-choice-groups label { position: relative; cursor: pointer; }
.job-opening-choice-groups input { position: absolute; opacity: 0; pointer-events: none; }
.job-opening-choice-groups label span {
  display: inline-flex;
  padding: var(--gb-space-2) var(--gb-space-3);
  border: 1px solid var(--gb-border);
  border-radius: var(--gb-radius-md);
  background: var(--gb-surface);
  color: var(--gb-text-secondary);
}
.job-opening-choice-groups input:checked + span { border-color: var(--gb-accent); background: var(--gb-accent-subtle); color: var(--gb-accent); }
.job-opening-choice-groups input:focus-visible + span { box-shadow: var(--gb-shadow-focus); }

.job-opening-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gb-space-4);
  padding: var(--gb-space-3) var(--gb-space-4);
  border: 1px solid var(--gb-accent-subtle-border);
  border-radius: var(--gb-radius-md);
  background: var(--gb-accent-subtle);
}
.job-opening-actions > div { display: flex; gap: var(--gb-space-2); flex: none; }
.job-opening-actions__hint { color: var(--gb-text-secondary); font-size: var(--gb-font-size-sm); }

.job-opening-preview {
  position: sticky;
  top: var(--gb-space-4);
  overflow: hidden;
  padding: var(--gb-space-5);
  border: 1px solid var(--gb-border-subtle);
  border-top: 4px solid var(--gb-primary);
  border-radius: var(--gb-radius-lg);
  background: var(--gb-surface);
  box-shadow: var(--gb-shadow-md);
}
.job-opening-preview__head { display: flex; align-items: center; justify-content: space-between; gap: var(--gb-space-3); padding-bottom: var(--gb-space-4); border-bottom: 1px solid var(--gb-border-subtle); }
.job-opening-preview__head h2 { margin: 0; font-size: var(--gb-font-size-md); }
.job-opening-preview__head span { padding: var(--gb-space-1) var(--gb-space-2); border: 1px solid var(--gb-primary-subtle-border); border-radius: var(--gb-radius-full); background: var(--gb-primary-subtle); color: var(--gb-primary-active); font-size: var(--gb-font-size-xs); }
.job-opening-preview h3 { margin: var(--gb-space-5) 0 var(--gb-space-3); font-size: var(--gb-font-size-xl); }
.job-opening-preview__meta { display: flex; flex-wrap: wrap; gap: var(--gb-space-3); padding-bottom: var(--gb-space-4); border-bottom: 1px solid var(--gb-border-subtle); color: var(--gb-text-secondary); font-size: var(--gb-font-size-sm); }
.job-opening-preview section { padding-top: var(--gb-space-4); }
.job-opening-preview h4 { margin: 0 0 var(--gb-space-2); font-size: var(--gb-font-size-sm); }
.job-opening-preview p, .job-opening-preview ul { margin: 0; color: var(--gb-text-secondary); font-size: var(--gb-font-size-sm); line-height: var(--gb-line-height-relaxed); }
.job-opening-preview ul { padding-inline-start: var(--gb-space-5); }
.job-opening-preview__tags { display: flex; flex-wrap: wrap; gap: var(--gb-space-2); }
.job-opening-preview__tags span { padding: var(--gb-space-1) var(--gb-space-2); border: 1px solid var(--gb-accent-subtle-border); border-radius: var(--gb-radius-md); color: var(--gb-accent); font-size: var(--gb-font-size-xs); }
.job-opening-preview__notice { margin-top: var(--gb-space-5) !important; padding: var(--gb-space-3); border: 1px solid var(--gb-accent-subtle-border); border-radius: var(--gb-radius-md); background: var(--gb-accent-subtle); }

@media (max-width: 1100px) {
  .job-opening-source { grid-template-columns: auto 1fr auto; }
  .job-opening-source__facts { grid-column: 1 / -1; }
  .job-opening-layout { grid-template-columns: 1fr; }
  .job-opening-preview { position: static; order: -1; }
}

@media (max-width: 680px) {
  .job-opening-source { grid-template-columns: auto 1fr; }
  .job-opening-source > .button { grid-column: 1 / -1; }
  .job-opening-source__facts { grid-template-columns: 1fr; }
  .job-opening-skills__add { grid-template-columns: 1fr; }
  .job-opening-skills__catalogue { grid-template-columns: 1fr; }
  .job-opening-actions { align-items: stretch; flex-direction: column; }
  .job-opening-actions > div { flex-direction: column-reverse; width: 100%; }
  .job-opening-actions .button { width: 100%; text-align: center; }
}

/* Contract template studio */
.contract-template-page,.contract-template-builder{max-width:1480px;margin-inline:auto;color:var(--gb-text-primary)}.contract-template-heading,.contract-builder-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.35rem}.contract-template-heading h1,.gb-app .contract-builder-heading :is(h1,h2){margin:.2rem 0 .35rem;color:var(--gb-text-primary);font-size:1.85rem}.contract-template-heading p,.contract-builder-heading p{margin:0;color:var(--gb-text-secondary)}.contract-template-eyebrow{color:var(--gb-primary);font-size:.78rem;font-weight:800}.contract-template-create{display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 8px 20px rgb(245 158 11 / 20%)}
.contract-template-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.15rem}.contract-template-kpis article{display:flex;align-items:center;gap:1rem;padding:1.15rem;border:1px solid var(--gb-border-subtle);border-radius:var(--gb-radius-lg);background:var(--gb-surface);box-shadow:var(--gb-shadow-sm)}.contract-template-kpi-icon{display:grid;place-items:center;width:3rem;height:3rem;border-radius:var(--gb-radius-lg);background:var(--gb-primary-subtle);color:var(--gb-primary);font-size:1.25rem}.contract-template-kpis small{display:block;color:var(--gb-text-secondary)}.contract-template-kpis strong{display:block;margin-top:.25rem;color:var(--gb-accent);font-size:1.6rem}.contract-template-list{padding:0;overflow:hidden}.contract-template-filters{display:grid;grid-template-columns:minmax(18rem,1.6fr) minmax(12rem,.7fr) minmax(11rem,.6fr) auto;gap:.75rem;padding:1rem;border-bottom:1px solid var(--gb-border-subtle);background:var(--gb-surface-alt)}.contract-template-search{position:relative}.contract-template-search span{position:absolute;z-index:1;right:.85rem;top:.55rem;color:var(--gb-text-secondary);font-size:1.25rem}.contract-template-search input{padding-right:2.35rem}.contract-template-table-wrap{overflow-x:auto}.contract-template-table{min-width:880px}.contract-template-table td:first-child strong,.contract-template-table td:first-child small{display:block}.contract-template-table td:first-child small{max-width:30rem;margin-top:.25rem;overflow:hidden;color:var(--gb-text-secondary);font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}.contract-template-actions{display:flex;align-items:center;gap:.4rem}.contract-template-actions form{margin:0}.contract-template-icon-button{display:grid;place-items:center;width:2.25rem;height:2.25rem;padding:0;border:1px solid var(--gb-border-subtle);border-radius:var(--gb-radius-md);background:var(--gb-surface);color:var(--gb-accent);text-decoration:none;cursor:pointer}.contract-template-icon-button:hover{border-color:var(--gb-primary);background:var(--gb-primary-subtle);color:var(--gb-warning)}.contract-template-icon-button--danger:hover{border-color:var(--gb-danger-subtle-border);background:var(--gb-danger-subtle);color:var(--gb-danger)}.contract-template-empty{padding:3rem;text-align:center;color:var(--gb-text-secondary)}
.contract-template-preview-dialog,.contract-clause-dialog{width:min(920px,calc(100vw - 2rem));max-height:92vh;padding:0;overflow:auto;border:0;border-radius:var(--gb-radius-xl);background:var(--gb-gray-100);box-shadow:var(--gb-shadow-xl)}.contract-template-preview-dialog::backdrop,.contract-clause-dialog::backdrop{background:var(--gb-overlay);backdrop-filter:blur(2px)}.contract-template-preview-dialog>header,.contract-clause-dialog header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;background:var(--gb-accent);color:var(--gb-text-inverse)}.contract-template-preview-dialog header h2,.contract-clause-dialog header h2{margin:.15rem 0 0;color:var(--gb-text-inverse)}.contract-template-preview-dialog header small{opacity:.72}.contract-template-preview-dialog header button,.contract-clause-dialog header button{width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:rgb(255 255 255 / 12%);color:var(--gb-text-inverse);font-size:1.35rem;cursor:pointer}.contract-template-preview-dialog>.contract-paper{margin:1.5rem auto}
.contract-builder-status{padding:.4rem .8rem;border:1px solid var(--gb-warning-subtle-border);border-radius:999px;background:var(--gb-warning-subtle);color:var(--gb-warning);font-size:.8rem;font-weight:700}.contract-builder-form{display:grid;gap:1rem}.contract-builder-steps{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;padding:1rem 2rem;border:1px solid var(--gb-border-subtle);border-radius:var(--gb-radius-lg);background:var(--gb-surface)}.contract-builder-steps button{display:flex;align-items:center;gap:.55rem;padding:0;border:0;background:transparent;color:var(--gb-text-secondary);font:inherit;font-weight:700;cursor:pointer}.contract-builder-steps button b{display:grid;place-items:center;width:2.2rem;height:2.2rem;border:1px solid var(--gb-border);border-radius:50%;background:var(--gb-surface)}.contract-builder-steps button.is-active{color:var(--gb-warning)}.contract-builder-steps button.is-active b{border-color:var(--gb-primary);background:var(--gb-primary);color:var(--gb-on-primary)}.contract-builder-steps button.is-complete{color:var(--gb-accent)}.contract-builder-steps button.is-complete b{border-color:var(--gb-accent);background:var(--gb-accent);color:var(--gb-text-inverse)}.contract-builder-steps i{height:1px;margin-inline:.85rem;background:var(--gb-border)}.contract-builder-panel{display:none}.contract-builder-panel.is-active{display:grid}.contract-builder-panel[data-step-panel="1"]{grid-template-columns:18rem minmax(0,1fr);gap:1rem;align-items:start}.contract-builder-guide,.contract-builder-card,.contract-clause-manager,.contract-final-preview{border:1px solid var(--gb-border-subtle);border-radius:var(--gb-radius-lg);background:var(--gb-surface);box-shadow:var(--gb-shadow-sm)}.contract-builder-guide{padding:1.2rem}.contract-builder-guide h2,.contract-builder-card h2,.contract-clause-manager h2,.contract-final-preview h2{margin:0;color:var(--gb-accent);font-size:1.05rem}.contract-builder-guide ul{margin:1rem 0 0;padding:0;list-style:none}.contract-builder-guide li{position:relative;padding:.85rem 1.1rem .85rem 0;border-top:1px solid var(--gb-border-subtle);color:var(--gb-text-secondary);font-size:.82rem;line-height:1.8}.contract-builder-guide li::before{content:'•';position:absolute;right:0;color:var(--gb-primary);font-size:1.2rem}.contract-builder-card{padding:1.35rem}.contract-builder-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.15rem}.contract-builder-fields label{display:grid;gap:.42rem;color:var(--gb-text-primary);font-size:.84rem;font-weight:700}.contract-builder-fields label em{color:var(--gb-danger);font-style:normal}.contract-builder-wide{grid-column:1/-1}.contract-builder-fields textarea{resize:vertical}.contract-builder-actions{position:sticky;bottom:.5rem;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border:1px solid var(--gb-border-subtle);border-radius:var(--gb-radius-lg);background:var(--gb-surface);box-shadow:var(--gb-shadow-md);backdrop-filter:blur(8px)}.contract-builder-actions>div{display:flex;gap:.65rem}
.contract-clause-workspace{display:grid;grid-template-columns:minmax(25rem,.8fr) minmax(32rem,1.2fr);gap:1rem;align-items:start}.contract-clause-manager{overflow:hidden}.contract-clause-manager>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--gb-border-subtle)}.contract-clause-manager header p,.contract-final-toolbar p,.contract-variable-layout p{margin:.3rem 0 0;color:var(--gb-text-secondary);font-size:.8rem}.contract-clause-list{display:grid;gap:.65rem;padding:1rem}.contract-clause-item{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;align-items:center;gap:.65rem;padding:.75rem;border:1px solid var(--gb-border-subtle);border-radius:var(--gb-radius-md);background:var(--gb-surface);transition:.15s}.contract-clause-item:hover{border-color:var(--gb-primary-subtle-border);box-shadow:var(--gb-shadow-sm)}.contract-clause-item.is-dragging{opacity:.45}.contract-clause-drag{color:var(--gb-text-secondary);cursor:grab}.contract-clause-item>b{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--gb-surface-sunken);color:var(--gb-accent)}.contract-clause-item div{min-width:0}.contract-clause-item div strong,.contract-clause-item div small{display:block}.contract-clause-item div small{margin-top:.2rem;color:var(--gb-text-secondary);font-size:.7rem}.contract-clause-item>button{width:1.9rem;height:1.9rem;padding:0;border:0;border-radius:var(--gb-radius-sm);background:transparent;color:var(--gb-text-secondary);cursor:pointer}.contract-clause-item>button:hover{background:var(--gb-warning-subtle);color:var(--gb-warning)}.contract-switch input{position:absolute;opacity:0}.contract-switch i{position:relative;display:block;width:2.35rem;height:1.3rem;border-radius:999px;background:var(--gb-border-strong);cursor:pointer}.contract-switch i::after{content:'';position:absolute;top:.15rem;right:.15rem;width:1rem;height:1rem;border-radius:50%;background:var(--gb-brand-white);transition:.15s}.contract-switch input:checked+i{background:var(--gb-primary)}.contract-switch input:checked+i::after{right:1.2rem}
/* .contract-paper renders an actual contract document preview — a printed
   page, not app chrome. Deliberately kept "paper white with ink-black text"
   in both themes, the same convention document-preview UIs elsewhere (Word
   Online, Google Docs) use, rather than tokenized: a legal document isn't
   supposed to look different depending on which theme the reader's app
   happens to be in. */
.contract-paper{width:min(720px,calc(100% - 2rem));min-height:720px;padding:3.2rem 3.5rem;border:1px solid #d9dde2;background:#fff;color:#20252b;box-shadow:0 6px 22px rgb(18 59 93 / 12%)}.contract-paper--sticky{position:sticky;top:1rem;width:100%}.contract-paper h3{margin:0 0 1.8rem;text-align:center;font-size:1.25rem}.contract-paper-intro,.contract-paper p{font-size:.88rem;line-height:2.1;text-align:justify}.contract-paper section{margin-top:1.25rem}.contract-paper h4{margin:0 0 .4rem;font-size:.92rem}.contract-paper mark{padding:.05rem .25rem;border-radius:var(--gb-radius-sm);background:#fff0d5;color:#6f4500}.contract-paper-signatures{display:grid;grid-template-columns:repeat(2,1fr);gap:4rem;margin-top:3.5rem;padding-top:1rem;border-top:1px solid #343a40;text-align:center;font-weight:700}.contract-paper-signatures span{min-height:5rem;padding-top:.5rem}
.contract-variable-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem}.contract-variable-list{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}.contract-variable-list button{padding:.55rem .75rem;border:1px solid var(--gb-warning-subtle-border);border-radius:var(--gb-radius-md);background:var(--gb-warning-subtle);color:var(--gb-warning);font:inherit;font-size:.82rem;cursor:pointer}.contract-variable-list button.is-copied{background:var(--gb-accent);color:var(--gb-text-inverse)}.contract-signature-settings{display:grid;align-content:start;gap:.75rem}.contract-signature-settings label{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid var(--gb-border-subtle);border-radius:var(--gb-radius-md)}.contract-signature-settings label span,.contract-signature-settings label small{display:block}.contract-signature-settings label small{margin-top:.25rem;color:var(--gb-text-secondary);font-weight:400}.contract-signature-settings input{width:1.15rem;height:1.15rem;accent-color:var(--gb-primary)}.contract-final-preview{padding:1.2rem;background:var(--gb-surface-sunken)}.contract-final-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.contract-final-preview>.contract-paper{margin:auto}.contract-clause-dialog form>div{display:grid;gap:1rem;padding:1.2rem}.contract-clause-dialog label{display:grid;gap:.4rem;color:var(--gb-text-primary);font-weight:700}.contract-clause-dialog .contract-clause-required{display:flex;align-items:center}.contract-clause-dialog input[type=checkbox]{accent-color:var(--gb-primary)}.contract-clause-dialog footer{display:flex;justify-content:flex-end;gap:.65rem;padding:1rem 1.2rem;border-top:1px solid var(--gb-border-subtle);background:var(--gb-surface)}
@media(max-width:980px){.contract-template-kpis{grid-template-columns:repeat(2,1fr)}.contract-template-filters{grid-template-columns:1fr 1fr}.contract-builder-panel[data-step-panel="1"],.contract-clause-workspace{grid-template-columns:1fr}.contract-builder-guide{order:2}.contract-paper--sticky{position:static}.contract-variable-layout{grid-template-columns:1fr}.contract-builder-steps button span{display:none}}@media(max-width:620px){.contract-template-heading,.contract-builder-heading{align-items:stretch;flex-direction:column}.contract-template-kpis,.contract-template-filters,.contract-builder-fields{grid-template-columns:1fr}.contract-builder-wide{grid-column:auto}.contract-builder-steps{padding:1rem}.contract-builder-steps i{margin-inline:.25rem}.contract-paper{width:100%;min-height:0;padding:1.5rem}.contract-template-create{text-align:center;justify-content:center}.contract-builder-actions{align-items:stretch;flex-direction:column}.contract-builder-actions>div{display:grid;grid-template-columns:1fr 1fr}.contract-builder-actions .button{text-align:center}}