/* Car24Design (subset) — same OKLCH palette/tokens as recruitie-inbox-filter's
 * tokens.css (CARreer brand: warm-red accent #EE1F2A). No self-hosted
 * webfont here on purpose — falls back to system-ui, keeps this service
 * dependency-free and light. Single stylesheet, both pages import it. */

:root {
    --color-paper:       oklch(96.8% 0.006 262);
    --color-card:        oklch(99.3% 0.002 262);
    --color-ink:         oklch(25% 0.04 262);
    --color-ink-2:       oklch(56% 0.03 262);
    --color-rule:        oklch(90% 0.008 262);
    --color-rule-strong: oklch(81% 0.012 262);

    --color-accent:      oklch(59% 0.225 27);
    --color-accent-dark: oklch(50% 0.2 27);
    --color-accent-soft: oklch(96% 0.02 27);
    --color-accent-ink:  oklch(99% 0.005 27);
    --color-focus:       var(--color-accent);

    --color-green:       #28c76f;
    --color-green-soft:  #dff8ea;
    --color-danger:      oklch(45% 0.15 25);
    --color-danger-soft: #fff1f1;
    --color-amber-soft:  #fff4e5;

    --font-ui: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

    --radius-input: 8px;
    --radius-card:  12px;
    --radius-pill:  999px;
    --radius-badge: 6px;

    --shadow: 0 12px 32px rgba(16, 24, 40, 0.08);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 150ms;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 14px/1.5 var(--font-ui);
    color: var(--color-ink);
    background: var(--color-paper);
}

:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

h1, h2, h3 { margin: 0; font-weight: 800; }

table { font-variant-numeric: tabular-nums; }

/* --- Card --- */
.c24-card {
    background: var(--color-card);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    padding: 20px;
}

/* --- Form fields --- */
.c24-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-ink-2);
    margin: 10px 0 4px;
}
.c24-input, .c24-select {
    width: 100%;
    font: inherit;
    font-size: 13.5px;
    color: var(--color-ink);
    background: var(--color-card);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-input);
    padding: 8px 10px;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.c24-input:focus, .c24-select:focus { border-color: var(--color-accent); }

/* --- Buttons — CTA voice: filled accent primary, hairline outline secondary --- */
.c24-btn {
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    border-radius: var(--radius-input);
    padding: 9px 18px;
    border: 1px solid transparent;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.c24-btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-ink);
    border-color: var(--color-accent);
}
.c24-btn-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.c24-btn-secondary {
    background: var(--color-card);
    color: var(--color-ink);
    border-color: var(--color-rule);
}
.c24-btn-secondary:hover { border-color: var(--color-rule-strong); }
.c24-btn:disabled { opacity: .5; cursor: not-allowed; }

/* --- Badge --- */
.c24-badge {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--radius-badge);
}
.c24-badge-neutral  { background: #eef1f6; color: var(--color-ink-2); }
.c24-badge-progress { background: var(--color-amber-soft); color: #d4831f; }
.c24-badge-success  { background: var(--color-green-soft); color: #1f9e57; }

/* --- Error text --- */
.c24-error {
    color: var(--color-danger);
    background: var(--color-danger-soft);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--radius-input);
    padding: 8px 10px;
}
.c24-error:empty { display: none; }

/* --- Table --- */
.c24-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.c24-table th, .c24-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-rule); }
.c24-table th { color: var(--color-ink-2); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }