/* Hiring system — light mode only, RTL, mobile first.
   Hand written, no build step. Colours are custom properties so the brand
   palette can be swapped by editing this one block. */

:root {
    --bg:            #f1f5f9;
    --surface:       #ffffff;
    --surface-muted: #f8fafc;
    --border:        #e2e8f0;
    --border-strong: #cbd5e1;

    --text:          #0f172a;
    --text-muted:    #64748b;
    --text-faint:    #94a3b8;

    --accent:        #0f766e;
    --accent-hover:  #115e59;
    --accent-soft:   #f0fdfa;
    --accent-border: #99f6e4;

    --danger:        #b91c1c;
    --danger-soft:   #fef2f2;
    --danger-border: #fecaca;
    --success:       #15803d;
    --success-soft:  #f0fdf4;
    --success-border:#bbf7d0;
    --warn:          #a16207;
    --warn-soft:     #fefce8;
    --warn-border:   #fde68a;

    --radius:    10px;
    --radius-sm: 7px;
    --shadow:    0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .07);

    --font: "Vazirmatn", "IRANSans", Tahoma, "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.75;
}

.wrap {
    width: 100%;
    max-width: 880px;
    margin-inline: auto;
    padding-inline: 16px;
}

/* ------------------------------------------------------------- header */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 14px;
    text-decoration: none;
    color: inherit;
}

.brand-mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.5px;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.35; }
.brand-text strong { font-size: 16px; }
.brand-text small  { color: var(--text-muted); font-size: 12px; }

/* -------------------------------------------------------- step indicator */

.steps {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.steps ol {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 12px 16px;
    list-style: none;
    min-width: max-content;
}

.step {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-inline-end: 14px;
    color: var(--text-faint);
    font-size: 13px;
    white-space: nowrap;
}

.step + .step { padding-inline-start: 14px; border-inline-start: 1px solid var(--border); }

.step-dot {
    display: grid;
    place-items: center;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 12px;
    font-weight: 700;
}

.step--current { color: var(--accent); font-weight: 700; }
.step--current .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.step--done { color: var(--success); }
.step--done .step-dot { background: var(--success); border-color: var(--success); color: #fff; }

/* --------------------------------------------------------------- layout */

main.wrap { padding-block: 24px 48px; }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px;
    margin-bottom: 16px;
}

.card h1, .card h2 { margin-top: 0; }

h1 { font-size: 21px; margin-bottom: 6px; }
h2 { font-size: 17px; }

.lede { color: var(--text-muted); margin-top: 0; }

/* ---------------------------------------------------------------- alerts */

.alert {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

.alert--error   { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }
.alert--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.alert--info    { background: var(--accent-soft);  border-color: var(--accent-border);  color: var(--accent-hover); }
.alert--warn    { background: var(--warn-soft);    border-color: var(--warn-border);    color: var(--warn); }

.alert ul { margin: 6px 0 0; padding-inline-start: 18px; }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: 16px; }

.field > label,
.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

.req { color: var(--danger); font-weight: 700; }

.hint { display: block; margin-top: 4px; color: var(--text-muted); font-size: 12.5px; }

input[type="text"], input[type="tel"], input[type="email"],
input[type="number"], input[type="password"], select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 15px;
    transition: border-color .15s, box-shadow .15s;
}

textarea { min-height: 90px; resize: vertical; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .13);
}

input[aria-invalid="true"], select[aria-invalid="true"] {
    border-color: var(--danger);
    background: var(--danger-soft);
}

.field-error { display: block; margin-top: 4px; color: var(--danger); font-size: 12.5px; }

/* Numbers and phone numbers read left to right even inside an RTL page. */
.ltr { direction: ltr; text-align: left; }
.num { direction: ltr; text-align: center; font-variant-numeric: tabular-nums; }

/* Date: three selects side by side */
.date-parts { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; }

.row { display: grid; gap: 16px; }
@media (min-width: 640px) { .row--2 { grid-template-columns: 1fr 1fr; } }

/* Radios and checkboxes as tappable chips — 44px min target on mobile. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }

.choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 13px;
    min-height: 42px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.choice:hover { border-color: var(--accent); }
.choice input { accent-color: var(--accent); width: 17px; height: 17px; margin: 0; }
.choice:focus-within { box-shadow: 0 0 0 3px rgba(15, 118, 110, .13); border-color: var(--accent); }

.choices--grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 560px) { .choices--grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 800px) { .choices--grid--3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ---------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s;
}

.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn--ghost {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
.btn--ghost:hover { background: var(--surface-muted); }

.btn--danger { background: var(--danger); }
.btn--sm { padding: 7px 13px; min-height: 36px; font-size: 13.5px; }
.btn--block { width: 100%; }

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.actions--end { justify-content: flex-end; }
.spacer { flex: 1 1 auto; }

/* ------------------------------------------------------------- job cards */

.job {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    padding: 18px;
    margin-bottom: 12px;
}

.job-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.job-title { font-size: 17px; font-weight: 700; margin: 0; }

.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-border);
    color: var(--accent-hover);
    font-size: 12px;
    font-weight: 600;
}

.job-desc { color: var(--text-muted); font-size: 14px; margin: 0 0 14px; white-space: pre-line; }

/* Honeypot: still in the layout and still focusable, since some bots skip
   display:none fields but will happily fill a positioned one.
   Clipped rather than pushed off-canvas: in an RTL document the scrollable
   overflow region extends leftwards, so "left: -9999px" produces a real
   horizontal scrollbar. This pattern takes up no space in any direction. */
.hp {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------------------------------------------------- captcha */

.captcha { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.captcha img { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); display: block; }
.captcha-input { flex: 1 1 140px; min-width: 140px; }

/* ---------------------------------------------------------------- tables */

.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); }
table.data th, table.data td { padding: 10px 12px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data th { background: var(--surface-muted); font-weight: 600; font-size: 13px; color: var(--text-muted); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--surface-muted); }

.empty { padding: 28px; text-align: center; color: var(--text-muted); }

/* --------------------------------------------------------------- footer */

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding-block: 16px;
    margin-top: 32px;
}

.site-footer p { margin: 0; color: var(--text-muted); font-size: 12.5px; }

/* ------------------------------------------------------------ utilities */

.muted { color: var(--text-muted); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

.code-box {
    display: inline-block;
    padding: 12px 22px;
    border: 1px dashed var(--accent-border);
    border-radius: var(--radius);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: 24px;
    font-weight: 700;
    direction: ltr;
    letter-spacing: 1px;
}

/* ----------------------------------------------------------------- admin */

.wrap--wide   { max-width: 1240px; }
.wrap--narrow { max-width: 420px; }

.admin-bar { background: var(--surface); border-bottom: 1px solid var(--border); margin-bottom: 20px; }

.admin-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-block: 10px; }
.admin-nav a {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.admin-nav a:hover { background: var(--surface-muted); color: var(--text); }
.admin-nav a.active { background: var(--accent-soft); color: var(--accent-hover); }

body.admin { padding-block: 0 40px; }

.login-card { margin-block: 12vh; }

.filters {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
    align-items: end;
}
@media (min-width: 720px) { .filters { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .filters { grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; } }
.filters-actions { display: flex; gap: 8px; }

.list-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }

.bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px;
    margin-top: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}
.bulk select { width: auto; min-width: 160px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }

.chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--surface-muted);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}
/* Status colours match the review workflow, not arbitrary hues. */
.chip--s0 { background: #f1f5f9; border-color: #cbd5e1; color: #475569; }
.chip--s1 { background: var(--warn-soft);    border-color: var(--warn-border);    color: var(--warn); }
.chip--s2 { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }
.chip--s3 { background: var(--accent-soft);  border-color: var(--accent-border);  color: var(--accent-hover); }
.chip--s4 { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.chip--s5 { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }
.chip--s6 { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }

.detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.detail-actions { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.facts { display: grid; gap: 10px 20px; margin: 0; grid-template-columns: 1fr; }
@media (min-width: 640px) { .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { display: flex; gap: 8px; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.facts dt { flex: none; min-width: 130px; color: var(--text-muted); font-size: 13.5px; margin: 0; }
.facts dd { margin: 0; font-weight: 600; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs a {
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
}
.tabs a.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }

.notes { list-style: none; margin: 0; padding: 0; }
.notes li { padding: 12px 0; border-bottom: 1px solid var(--border); }
.notes li:last-child { border-bottom: 0; }
.note-meta { display: flex; gap: 10px; font-size: 13px; margin-bottom: 4px; }
.note-body { font-size: 14px; white-space: pre-line; }

.review .field { max-width: 420px; }

table.data input[type="text"], table.data input[type="number"] { padding: 6px 9px; font-size: 14px; }

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* ----------------------------------------------------------------- print */

.print-head { display: none; }

@page {
    size: A4 portrait;
    /* Zero margin so the browser has no band in which to draw its own URL,
       date and page-number headers. The page's own padding supplies the
       margin instead. Chrome and Edge honour this; Firefox may still need
       "Print headers and footers" unticked in the print dialog. */
    margin: 0;
}

@media print {
    :root { --shadow: none; --shadow-md: none; }

    html, body {
        background: #fff;
        font-size: 8pt;
        line-height: 1.3;
        color: #000;
    }

    /* body.admin and main.wrap are more specific than a bare body/.wrap
       selector, so both are named here or their screen padding survives into
       print and eats the page margin. */
    body, body.admin { padding: 8mm 9mm; }

    /* Interactive chrome never prints. */
    .no-print,
    .admin-bar, .site-header, .site-footer, .steps,
    .alert, .actions, .pager, .bulk, .filters,
    form.review, .btn, button, .tabs {
        display: none !important;
    }

    .wrap, .wrap--wide, .wrap--narrow, main.wrap {
        max-width: none;
        width: auto;
        padding: 0;
        margin: 0;
    }

    /* zoom, not transform: a transform is applied at paint time and leaves the
       element occupying its full unscaled height, so pagination ignores it
       entirely. zoom changes layout size, which is what shrinks the page. The
       factor is set by the fit-to-page script. */
    #print-sheet { width: 100%; }

    /* The opening card repeats the applicant name, id, code, status and date
       that the print header already carries. */
    #print-sheet > .card:first-of-type { display: none; }

    .print-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8mm;
        padding-bottom: 1.5mm;
        margin-bottom: 2mm;
        border-bottom: 1.2pt solid #000;
    }

    .print-head h1 { font-size: 12pt; margin: 0; }
    .print-head .print-sub { font-size: 7.5pt; color: #333; }
    .print-head .print-meta { text-align: left; font-size: 7.8pt; line-height: 1.45; }
    .print-head .print-meta strong { font-size: 10pt; }

    /* Sections, not boxes. Five bordered and padded cards stacked up cost
       roughly 25mm of pure chrome. */
    .card {
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0 0 2mm;
        background: transparent;
    }

    .card h1 { display: none; }

    .card h2 {
        font-size: 8.4pt;
        font-weight: 700;
        margin: 0 0 1mm;
        padding: 0.6mm 1.5mm;
        background: #ececec !important;
        border: 0;
        border-radius: 1pt;
    }

    .card h3 {
        font-size: 8pt;
        margin: 1.2mm 0 0.6mm;
        color: #333;
    }

    /* Three columns on paper; the screen uses two. break-inside is applied to
       the individual rows, never to the section: a whole section that cannot
       fit gets pushed to a second page, which is the thing being avoided. */
    .facts { grid-template-columns: 1fr 1fr 1fr; gap: 0.4mm 4mm; }
    .facts > div {
        border-bottom: 0.3pt dotted #c4c4c4;
        padding-bottom: 0.4mm;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .facts dt { min-width: 0; flex: 0 0 23mm; font-size: 7pt; color: #555; }
    .facts dd { font-size: 7.8pt; font-weight: 700; }

    .detail-head { gap: 3mm; }

    table.data { font-size: 7.2pt; }
    table.data th, table.data td {
        padding: 0.6mm 1.2mm;
        white-space: normal;
        border-bottom: 0.3pt solid #d0d0d0;
    }
    table.data th { background: #ececec !important; color: #000; font-size: 6.9pt; }
    table.data tr { break-inside: avoid; page-break-inside: avoid; }
    .table-scroll { overflow: visible; border: 0; border-radius: 0; }

    .chip {
        border: 0.4pt solid #999;
        background: #f4f4f4 !important;
        color: #000 !important;
        padding: 0.2mm 1.2mm;
        font-size: 7pt;
        border-radius: 1.5pt;
    }

    .chips { gap: 0.8mm; }

    .notes { columns: 2; column-gap: 5mm; }
    .notes li {
        padding: 0.5mm 0;
        border-bottom: 0.3pt dotted #c4c4c4;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .note-meta { font-size: 6.9pt; margin-bottom: 0.2mm; }
    .note-body { font-size: 7.4pt; }

    meter { width: 11mm; height: 2.2mm; vertical-align: middle; }

    p, dl, ul, table { margin-top: 0; margin-bottom: 0; }

    a { color: #000; text-decoration: none; }
    /* Never expand href into the printed text. */
    a[href]::after { content: none !important; }
}