/* Online Jobs v0.1 – Prototype – single stylesheet, no external fonts or imports (CSP: style-src 'self'). */

:root {
    --color-bg: #f7f8fa;
    --color-surface: #ffffff;
    --color-text: #1f2933;
    --color-muted: #616e7c;
    --color-border: #d9dee3;
    --color-primary: #1d4ed8;
    --color-primary-dark: #1e40af;
    --color-success: #166534;
    --color-success-bg: #dcfce7;
    --color-error: #991b1b;
    --color-error-bg: #fee2e2;
    --color-info: #1e3a8a;
    --color-info-bg: #dbeafe;
    --color-warning: #92400e;
    --color-warning-bg: #fef3c7;
    /* Brand accent (distinct from --color-primary, which stays reserved for links/buttons/nav):
       a warm amber used for highlights — "new"/recent indicators, category chips, the map pin.
       Chosen for strong contrast against the existing blue primary and a confident, optimistic
       tone appropriate to "find your next job"; #b45309 passes WCAG AA for normal text on white. */
    --color-accent: #d97706;
    --color-accent-dark: #b45309;
    --color-accent-bg: #fffbeb;
    --radius: 6px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
    margin: 0;
    font-family: var(--font);
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-bg);
}
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-dark); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
pre.mail-body { white-space: pre-wrap; background: var(--color-surface); border: 1px solid var(--color-border); padding: 1rem; border-radius: var(--radius); }

.container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--color-surface); padding: 0.5rem; }
.skip-link:focus { left: 0.5rem; z-index: 100; }

/* header */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; min-height: 3.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--color-text); }
.brand-mark { width: 28px; height: 28px; display: block; }
.site-nav ul, .admin-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; align-items: center; }
.site-nav a, .admin-nav a { text-decoration: none; padding: 0.25rem 0; border-bottom: 2px solid transparent; }
.site-nav a.is-active, .admin-nav a.is-active { border-bottom-color: var(--color-primary); }
.admin-nav { background: #eef2ff; border-bottom: 1px solid var(--color-border); }
.admin-nav ul { min-height: 2.5rem; }

main { padding: 1.5rem 1rem 3rem; }
.site-footer { border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.9rem; padding: 1rem 0 2rem; }
.site-footer p { margin: 0.25rem 0; }

/* text */
h1 { font-size: 1.75rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.lead { font-size: 1.15rem; }
.muted { color: var(--color-muted); }
.hero { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 2rem; }

/* buttons */
.button, button.button {
    display: inline-block; padding: 0.55rem 1rem; border-radius: var(--radius); border: 1px solid var(--color-primary);
    background: var(--color-primary); color: #fff; text-decoration: none; font: inherit; cursor: pointer;
}
.button:hover { background: var(--color-primary-dark); color: #fff; }
.button-secondary { background: var(--color-surface); color: var(--color-primary); }
.button-secondary:hover { background: #eef2ff; color: var(--color-primary-dark); }
.button-link { background: transparent; border-color: transparent; color: var(--color-primary); }
.button-small { padding: 0.3rem 0.6rem; font-size: 0.9rem; }
.link-button { background: none; border: none; padding: 0; font: inherit; color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.inline-form { display: inline; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; margin-top: 1rem; }

/* forms */
.form-page { max-width: 34rem; }
.form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.25rem; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field small { display: block; color: var(--color-muted); margin-top: 0.25rem; }
/* Markdown-lite help under rich-text textareas and the unsaved job preview (documentation/integration/descriptions/, S2) */
.formatting-help { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.4rem; }
.formatting-help p { margin: 0 0 0.3rem; }
.formatting-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.1rem 0.75rem; margin: 0; }
.formatting-help dt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
.formatting-help dd { margin: 0; }
@media (max-width: 480px) { .formatting-help dl { grid-template-columns: 1fr; } .formatting-help dt { white-space: normal; } .formatting-help dd { margin-bottom: 0.3rem; } }
.preview-card { border: 2px dashed var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.preview-card h2 { margin-top: 0; }
.preview-card .preview-title { margin: 0.75rem 0 0.25rem; }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="search"],
.field input[type="number"], .field select, .field textarea, .inline-filters input, .inline-filters select, .setting-form input[type="text"], .setting-form input[type="number"] {
    width: 100%; padding: 0.5rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; background: #fff;
}
.inline-filters input, .inline-filters select, .setting-form input[type="text"], .setting-form input[type="number"] { width: auto; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; }
label.checkbox, label.radio { font-weight: normal; display: inline-flex; gap: 0.5rem; align-items: flex-start; margin-right: 1rem; }
fieldset { border: 1px solid var(--color-border); border-radius: var(--radius); margin: 0 0 1rem; padding: 0.75rem 1rem; }
legend { font-weight: 600; padding: 0 0.25rem; }
.inline-filters { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-bottom: 1rem; }
.inline-filters label { font-weight: 600; }

/* honeypot: visually removed, still in the DOM for bots */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* role-dependent fields on the registration form (toggled by app.js; all visible without JS) */
.js .role-seeker.is-hidden, .js .role-employer.is-hidden { display: none; }

/* flashes and errors */
.flashes { margin-bottom: 1rem; }
.flash { padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 0.5rem; border: 1px solid transparent; }
.flash-success { background: var(--color-success-bg); color: var(--color-success); }
.flash-error { background: var(--color-error-bg); color: var(--color-error); }
.flash-info { background: var(--color-info-bg); color: var(--color-info); }
.flash-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.form-errors { background: var(--color-error-bg); color: var(--color-error); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1rem; }
.form-errors p { margin: 0 0 0.25rem; }
.form-errors ul { margin: 0; padding-left: 1.25rem; }

/* tables */
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); font-size: 0.95rem; }
.table th, .table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table thead th { background: #f1f3f5; }
.table code.details { white-space: pre-wrap; word-break: break-word; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

/* dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.kpi { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; display: flex; flex-direction: column; }
.kpi-value { font-size: 1.75rem; font-weight: 700; }
.kpi-label { color: var(--color-muted); }

.pagination { display: flex; gap: 1rem; align-items: center; margin: 1rem 0; }
.error-page { max-width: 40rem; }

@media (max-width: 640px) {
    .header-inner { flex-direction: column; align-items: flex-start; }
    .table { display: block; overflow-x: auto; }
    .facts { grid-template-columns: 1fr; }
}

/* ---- Phase 4 additions: search, job cards, badges, two-column layouts ---- */
.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.search-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.search-bar input[type="search"] { flex: 2 1 14rem; padding: 0.55rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }
.search-bar select { flex: 1 1 10rem; padding: 0.55rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; background: #fff; }
.two-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.two-columns .filters { grid-column: 1; }
.two-columns .results { grid-column: 2; }
.results .job-list { margin-top: 0.5rem; }
.filters .form .field { margin-bottom: 0.6rem; }
.job-list { display: flex; flex-direction: column; gap: 0.75rem; }
.job-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1rem; }
.job-card h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.job-card h3 a { text-decoration: none; }
.job-meta { color: var(--color-muted); font-size: 0.92rem; margin: 0 0 0.4rem; }
.job-salary { margin: 0 0 0.4rem; font-weight: 600; }
.job-summary { margin: 0 0 0.4rem; }
.job-page .rich-text, .company-page .rich-text { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1rem 0; }
.rich-text h2 { font-size: 1.15rem; margin-top: 1rem; }
.rich-text h3 { font-size: 1.05rem; margin-top: 0.75rem; }
.apply-box { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }
.apply-box p { margin: 0; flex-basis: 100%; }
.owner-tools { border-top: 1px solid var(--color-border); margin-top: 1.5rem; padding-top: 1rem; }
.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-error { background: var(--color-error-bg); color: var(--color-error); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-muted { background: #e5e7eb; color: #374151; }
.badge-accent { background: var(--color-accent-bg); color: var(--color-accent-dark); }
.actions-cell { white-space: nowrap; }
.actions-cell form, .actions-cell a { margin-right: 0.25rem; }
.decline-form select, .decline-form input[type="text"] { padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; max-width: 12rem; }
.entry-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.entry-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); }
.inline-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.inline-list li { border: 1px solid var(--color-border); border-radius: 999px; padding: 0.2rem 0.7rem; background: var(--color-surface); }
.company-list { list-style: none; padding: 0; }
.company-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.form-wide { max-width: 48rem; }
.input-price { max-width: 8rem; }
.input-currency { max-width: 6rem; }
a.kpi { text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--color-primary); }
details { margin: 0.75rem 0; }
details summary { cursor: pointer; font-weight: 600; }
.entry { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; margin-bottom: 1rem; }
.entry h2 { margin-top: 0; }

@media (max-width: 800px) {
    .two-columns { grid-template-columns: 1fr; }
    .two-columns .filters, .two-columns .results { grid-column: 1; }
}
.company-logo { display: block; max-width: 160px; max-height: 80px; width: auto; height: auto; object-fit: contain; margin-bottom: 0.5rem; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.25rem; }

/* category chips (home page "browse by category") */
.category-chips-label { margin-bottom: 0.25rem; }
.category-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0.75rem 0 0; }
.category-chip { display: inline-block; text-decoration: none; padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.9rem;
    background: var(--color-accent-bg); color: var(--color-accent-dark); border: 1px solid var(--color-accent); }
.category-chip:hover { background: var(--color-accent); color: #fff; }

/* employer location map: a grid of plain <img> tiles, no JS mapping library (app/Support/SlippyMap.php).
   Progressive enhancement: width/height and tile/pin position come from data-* attributes applied by
   app.js; the fallback size below keeps the box from collapsing to nothing if JavaScript is off (the
   map itself will not be positioned in that case, same "works without it, just less nicely" principle
   as the rest of app.js). */
.employer-map { position: relative; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius);
    margin: 1rem 0 0.35rem; background: var(--color-bg); max-width: 100%; width: 600px; height: 300px; }
.employer-map-tile { position: absolute; width: 256px; height: 256px; display: block; }
.employer-map-pin { position: absolute; width: 18px; height: 18px; margin-left: -9px; margin-top: -18px;
    background: var(--color-accent); border: 2px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.employer-map-attribution { font-size: 0.75rem; color: var(--color-muted); margin: 0 0 1rem; }
.employer-map-attribution a { color: inherit; }
@media (max-width: 640px) {
    .employer-map { width: 100% !important; height: 220px !important; }
}

/* banner-ad placements (left/right/bottom of every page, each independently admin-toggled — see
   app/Domain/Content/BannerRepository.php). With neither side rail active, .page-body carries no
   grid rule at all and <main class="container"> renders exactly as it did before this feature
   existed — the default, no-banner state must be visually identical to today's site. A rail's own
   column only appears in the grid template when that side is actually active, so a single enabled
   side never leaves a blank gap where the other would have been. */
.page-body-both-rails, .page-body-left-rail, .page-body-right-rail {
    display: grid;
    justify-content: center;
    align-items: start;
    gap: 1rem;
    padding: 0 1rem;
}
.page-body-both-rails  { grid-template-columns: 160px minmax(0, 1100px) 160px; }
.page-body-left-rail   { grid-template-columns: 160px minmax(0, 1100px); }
.page-body-right-rail  { grid-template-columns: minmax(0, 1100px) 160px; }
.page-body-both-rails > main.container,
.page-body-left-rail > main.container,
.page-body-right-rail > main.container {
    max-width: none; width: auto; margin: 0; padding: 0;
}
.banner-slot img { display: block; max-width: 100%; height: auto; border-radius: var(--radius); }
.banner-slot-bottom { margin: 1.5rem auto; max-width: 1100px; padding: 0 1rem; text-align: center; }
.banner-slot-bottom img { display: inline-block; }
@media (max-width: 900px) {
    .page-body-both-rails, .page-body-left-rail, .page-body-right-rail { grid-template-columns: minmax(0, 1100px); padding: 0; }
    .banner-slot-left, .banner-slot-right { display: none; }
}

/* Billing history and receipts (payments integration, slice S3) */
.receipt { position: relative; }
.receipt-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.receipt-meta { margin: 0.5rem 0; }
.receipt-meta dt { font-weight: 600; margin-top: 0.4rem; }
.receipt-meta dd { margin: 0 0 0.2rem; }
.receipt-total td { font-weight: 700; border-top: 2px solid var(--color-border); }
.receipt-test { border: 2px dashed var(--color-warning); }
.receipt-watermark { color: var(--color-warning); font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 0.5rem; }
@media (max-width: 480px) {
    .receipt-parties { grid-template-columns: 1fr; }
}
@media print {
    .site-header, .admin-nav, .site-footer, .banner-slot, .flash, .no-print { display: none !important; }
    .page-body, .page-body-both-rails, .page-body-left-rail, .page-body-right-rail { display: block; padding: 0; }
    body { background: #fff; color: #000; }
    .receipt { border: 0; padding: 0; box-shadow: none; }
    .receipt-test { border: 2px dashed #999; }
    .table th, .table td { border-color: #999; }
    a { text-decoration: none; color: inherit; }
}