/* Outsource Recruit — design tokens.
   Palette A: Refined Blue + Coral. Anchored to the live outsourceretail.co.za
   identity (deep cobalt) with warm coral + ivory surfaces for indoor warmth. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
	/* Brand */
	--or-ink:        #0B2A4A;  /* deep cobalt — primary action, top bar, headings */
	--or-ink-soft:   #163A5F;
	--or-ink-deep:   #061A33;
	--or-link:       #1763B8;  /* live-site link blue */

	/* Coral accent */
	--or-accent:     #E8835F;
	--or-accent-deep:#993C1D;
	--or-accent-ink: #4A1B0C;
	--or-accent-soft:#FAECE7;

	/* Warm neutrals */
	--or-cream:      #FFFFFF;        /* card surfaces */
	--or-ivory:      #FAF7F2;        /* page canvas */
	--or-sand:       #F0EBE3;        /* hover surface */
	--or-border:     #E5E1DA;        /* default border */
	--or-border-soft:#EFEBE3;

	--or-text:       #1A1A1A;        /* body — high-contrast */
	--or-text-soft:  #4A4A48;        /* secondary — readable on ivory */
	--or-text-faint: #6E6A60;        /* tertiary / placeholder */

	/* Semantic */
	--or-good:       #1F8A5C;
	--or-good-soft:  #E4F1EB;
	--or-warn:       #B97A00;
	--or-warn-soft:  #FFF5D6;
	--or-bad:        #B83A3A;
	--or-bad-soft:   #FBEAEA;
	--or-info:       #1763B8;
	--or-info-soft:  #E6F0FB;

	/* Compatibility (legacy variable names used in shell.css/public.css) */
	--or-grey-50:    #FAF7F2;
	--or-grey-100:   #F2EFE8;
	--or-grey-200:   #E5E1DA;
	--or-grey-300:   #CFCAC0;
	--or-grey-400:   #A8A39A;
	--or-grey-500:   #8A857C;
	--or-grey-600:   #5F5E5A;
	--or-grey-700:   #44423D;
	--or-grey-800:   #1F1E1B;
	--or-grey-900:   #0F0E0C;
	--or-white:      #FFFFFF;
	--or-bg:         var(--or-ivory);

	/* Type */
	--or-font:        'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--or-font-display:'Fraunces', 'EB Garamond', 'Georgia', serif;
	--or-text-xs: 12px;
	--or-text-sm: 14px;
	--or-text-base: 16px;
	--or-text-md: 18px;
	--or-text-lg: 22px;
	--or-text-xl: 28px;
	--or-text-2xl: 36px;

	/* Spacing */
	--or-1: 4px;
	--or-2: 8px;
	--or-3: 12px;
	--or-4: 16px;
	--or-5: 20px;
	--or-6: 24px;
	--or-7: 32px;
	--or-8: 40px;
	--or-9: 56px;

	/* Radii — slightly softer than before */
	--or-r-1: 8px;
	--or-r-2: 14px;
	--or-r-3: 20px;
	--or-r-pill: 999px;

	/* Shadow — barely-there, warm */
	--or-shadow-sm: 0 1px 2px rgba(11, 42, 74, 0.05);
	--or-shadow-md: 0 8px 24px rgba(11, 42, 74, 0.08);
	--or-shadow-lg: 0 22px 56px rgba(11, 42, 74, 0.12);

	--or-z-modal: 9000;
	--or-z-slide: 8500;
	--or-z-toast: 9500;
	--or-z-nav:   8000;
}

* { box-sizing: border-box; }

html, body { background: var(--or-bg); color: var(--or-text); font-family: var(--or-font); font-size: var(--or-text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.or-shell-open { overflow: hidden; }

/* Typography — display serif for h1/h2, sans for body and h3+
   Fraunces is variable; we push to 600 for stronger presence on the page. */
.or-h1 { font-family: var(--or-font-display); font-size: var(--or-text-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; color: var(--or-ink); font-variation-settings: "opsz" 90; }
.or-h2 { font-family: var(--or-font-display); font-size: var(--or-text-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0; color: var(--or-ink); font-variation-settings: "opsz" 60; }
.or-h3 { font-family: var(--or-font); font-size: var(--or-text-lg); font-weight: 700; letter-spacing: -0.005em; line-height: 1.2; margin: 0; color: var(--or-ink); }
.or-eyebrow { font-size: var(--or-text-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--or-accent-deep); font-weight: 700; }
.or-muted { color: var(--or-text-soft); }
.or-small { font-size: var(--or-text-sm); color: var(--or-text-soft); }

/* Buttons — solid cobalt primary, ghost outlined, coral accent.
   !important on size + font properties so the active WP theme (which often
   styles all <a class="…btn…"> with hefty padding/font-size) can't bloat
   our design-system controls. */
.or-btn {
	display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: var(--or-2) !important;
	min-height: 44px !important; height: auto !important; padding: 0 var(--or-5) !important;
	background: var(--or-ink); color: var(--or-cream);
	border: 1px solid var(--or-ink) !important; border-radius: var(--or-r-1) !important;
	font-family: var(--or-font) !important; font-size: var(--or-text-base) !important; font-weight: 500 !important;
	line-height: 1.2 !important; letter-spacing: 0 !important;
	cursor: pointer; text-transform: none !important;
	transition: transform 80ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
	text-decoration: none !important;
	box-shadow: none;
}
.or-btn:hover { background: var(--or-ink-soft); border-color: var(--or-ink-soft) !important; }
.or-btn:active { transform: translateY(1px); }
.or-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(232, 131, 95, .35); }
.or-btn[disabled], .or-btn.is-disabled { opacity: .5; cursor: not-allowed; }
.or-btn--ghost { background: transparent; color: var(--or-ink); border-color: var(--or-border) !important; }
.or-btn--ghost:hover { background: var(--or-sand); border-color: var(--or-grey-300) !important; color: var(--or-ink); }
.or-btn--accent { background: var(--or-accent); border-color: var(--or-accent) !important; color: var(--or-cream); }
.or-btn--accent:hover { background: var(--or-accent-deep); border-color: var(--or-accent-deep) !important; }
.or-btn--danger { background: var(--or-bad); border-color: var(--or-bad) !important; color: var(--or-cream); }
.or-btn--danger:hover { background: #962F2F; border-color: #962F2F !important; }
.or-btn--good { background: var(--or-good); border-color: var(--or-good) !important; color: var(--or-cream); }
.or-btn--good:hover { background: #176B47; border-color: #176B47 !important; }
.or-btn--sm { min-height: 34px !important; padding: 0 var(--or-3) !important; font-size: var(--or-text-sm) !important; }
.or-btn--xs { min-height: 28px !important; padding: 0 10px !important; font-size: var(--or-text-xs) !important; font-weight: 500 !important; border-radius: 6px !important; }
.or-btn--block { width: 100%; }
.or-btn--icon { padding: 0 !important; width: 44px; }
/* Inline SVG icons inside buttons — cap their size so flex doesn't stretch
   them to fill the cross-axis (which happens on bare <svg> with only a
   viewBox). Sizes scale with the button variant. */
.or-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.or-btn--sm svg { width: 14px; height: 14px; }
.or-btn--xs svg { width: 13px; height: 13px; }

/* Inputs — size + font hardened with !important so the active theme can't
   bloat them. Background/color stays themable so the topbar variant works. */
.or-input, .or-select, .or-textarea {
	display: block !important; width: 100% !important;
	min-height: 44px !important; height: auto !important; padding: 0 var(--or-3) !important;
	background: var(--or-cream); color: var(--or-text);
	border: 1px solid var(--or-border); border-radius: var(--or-r-1) !important;
	font-family: var(--or-font) !important; font-size: var(--or-text-base) !important; font-weight: 400 !important;
	line-height: 1.4 !important; letter-spacing: 0 !important;
	box-shadow: none !important;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}
.or-textarea { padding: var(--or-3) !important; min-height: 96px !important; resize: vertical; line-height: 1.55 !important; }
.or-select { padding-right: 30px !important; appearance: none !important; background-image: linear-gradient(45deg, transparent 50%, var(--or-text-soft) 50%), linear-gradient(135deg, var(--or-text-soft) 50%, transparent 50%); background-position: calc(100% - 16px) 19px, calc(100% - 11px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.or-input:focus, .or-select:focus, .or-textarea:focus {
	outline: none; border-color: var(--or-ink);
	box-shadow: 0 0 0 3px rgba(232, 131, 95, .25);
}
.or-input::placeholder, .or-textarea::placeholder { color: var(--or-text-faint); }
.or-input--lg { min-height: 52px; font-size: var(--or-text-md); padding: 0 var(--or-4); }
.or-search {
	background: var(--or-cream) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A857C' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M21 21l-4.3-4.3'/></svg>") no-repeat 14px center / 18px !important;
	padding: 0 var(--or-3) 0 42px !important;
}
.or-label { display: block; font-weight: 600; font-size: var(--or-text-sm); margin-bottom: 6px; color: var(--or-text); }
.or-field { margin-bottom: var(--or-3); }
.or-field--saved .or-input,
.or-field--saved .or-select,
.or-field--saved .or-textarea { animation: orSaved 1s ease; }
@keyframes orSaved { 0% { box-shadow: 0 0 0 3px rgba(31, 138, 92, .35); } 100% { box-shadow: 0 0 0 0 rgba(31, 138, 92, 0); } }

/* Card */
.or-card {
	background: var(--or-cream);
	border: 1px solid var(--or-border);
	border-radius: var(--or-r-2);
	padding: var(--or-5);
	box-shadow: var(--or-shadow-sm);
}
.or-card--flush { padding: 0; }
.or-card--soft { background: var(--or-ivory); border-color: var(--or-border-soft); box-shadow: none; }

/* Chip */
.or-chip {
	display: inline-flex; align-items: center; gap: var(--or-1);
	padding: 5px 12px; border-radius: var(--or-r-pill);
	background: var(--or-sand); color: var(--or-text);
	font-size: var(--or-text-sm); font-weight: 500;
	border: 1px solid transparent;
	line-height: 1.3;
}
.or-chip--accent { background: var(--or-accent-soft); color: var(--or-accent-deep); }
.or-chip--info   { background: var(--or-info-soft); color: var(--or-info); }
.or-chip--good   { background: var(--or-good-soft); color: var(--or-good); }
.or-chip--bad    { background: var(--or-bad-soft); color: var(--or-bad); }
.or-chip--warn   { background: var(--or-warn-soft); color: var(--or-warn); }
.or-chip--outline { background: transparent; border-color: var(--or-border); color: var(--or-text-soft); }
.or-chip--black   { background: var(--or-ink); color: var(--or-cream); border-color: var(--or-ink); }
.or-chip--filter { cursor: pointer; transition: background 100ms ease, color 100ms ease, border-color 100ms ease; }
.or-chip--filter:hover { background: var(--or-cream); border-color: var(--or-border); }
.or-chip--filter.is-on { background: var(--or-ink); color: var(--or-cream); border-color: var(--or-ink); }

/* AI-fit cell link (jobs list) */
.or-ai-fit { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap; }
.or-ai-fit:hover .or-chip--good { filter: brightness(0.96); }

/* Dashboard coverage doughnuts */
.or-donut-card { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.or-donut { flex: none; }
.or-donut__num { font-size: 22px; font-weight: 700; fill: var(--or-text); }
.or-donut__pct { font-size: 12px; fill: var(--or-text-soft); }
.or-donut-key { min-width: 0; flex: 1; }
.or-donut-key__title { font-weight: 600; margin-bottom: 8px; }
.or-key { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.or-key li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.or-key li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.or-key__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }

/* Status dots */
.or-status { display: inline-flex; align-items: center; gap: 6px; }
.or-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or-grey-400); }
.or-status--applied::before    { background: var(--or-grey-500); }
.or-status--screened::before   { background: var(--or-grey-700); }
.or-status--shortlisted::before { background: var(--or-accent); }
.or-status--interviewed::before { background: var(--or-info); }
.or-status--offered::before    { background: #8b3aa3; }
.or-status--placed::before     { background: var(--or-good); }
.or-status--rejected::before   { background: var(--or-bad); }
.or-status--withdrawn::before  { background: var(--or-grey-400); }

/* Table */
.or-table { width: 100%; border-collapse: collapse; }
.or-table th, .or-table td { text-align: left; padding: var(--or-3) var(--or-4); border-bottom: 1px solid var(--or-border); }
.or-table th { font-size: var(--or-text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--or-text-soft); font-weight: 600; background: var(--or-ivory); }
.or-table tr:hover { background: var(--or-ivory); }
/* Application notes row — visually attached to the main row above it */
.or-table--apps .or-app-row-notes td { background: var(--or-ivory); border-top: none; }
.or-table--apps .or-app-row-notes:hover { background: var(--or-ivory); }
.or-textarea--app-note { min-height: 52px !important; font-size: var(--or-text-sm) !important; resize: vertical; }

/* Modal */
.or-modal { position: fixed; inset: 0; z-index: var(--or-z-modal); display: none; align-items: center; justify-content: center; padding: var(--or-4); background: rgba(11, 26, 51, .55); backdrop-filter: blur(2px); }
.or-modal.is-open { display: flex; }
.or-modal__box { background: var(--or-cream); border-radius: var(--or-r-3); width: 100%; max-width: 560px; max-height: calc(100vh - 32px); overflow: auto; box-shadow: var(--or-shadow-lg); }
.or-modal__head { display: flex; align-items: center; justify-content: space-between; padding: var(--or-5); border-bottom: 1px solid var(--or-border); }
.or-modal__head strong { font-family: var(--or-font-display); font-size: var(--or-text-lg); font-weight: 500; }
.or-modal__body { padding: var(--or-5); }
.or-modal__foot { display: flex; gap: var(--or-2); justify-content: flex-end; padding: var(--or-4) var(--or-5); border-top: 1px solid var(--or-border); }

/* Slide-over */
.or-slide { position: fixed; top: 0; right: 0; height: 100vh; width: 100%; max-width: 440px; transform: translateX(100%); transition: transform .28s ease; z-index: var(--or-z-slide); background: var(--or-cream); box-shadow: var(--or-shadow-lg); display: flex; flex-direction: column; }
.or-slide.is-open { transform: translateX(0); }
.or-slide__head { padding: var(--or-4) var(--or-5); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--or-border); }
.or-slide__body { padding: var(--or-4); overflow: auto; flex: 1; }
.or-slide__foot { padding: var(--or-4); border-top: 1px solid var(--or-border); }

/* Toast */
.or-toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: var(--or-z-toast); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.or-toast { background: var(--or-ink); color: var(--or-cream); padding: 12px 18px; border-radius: var(--or-r-2); box-shadow: var(--or-shadow-md); min-width: 220px; max-width: 360px; font-size: var(--or-text-sm); font-weight: 500; }
.or-toast--good { background: var(--or-good); }
.or-toast--bad  { background: var(--or-bad); }

/* Skeleton */
.or-skel { background: linear-gradient(90deg, var(--or-sand), var(--or-border), var(--or-sand)); background-size: 200% 100%; animation: orSkel 1.4s linear infinite; border-radius: var(--or-r-1); height: 12px; }
@keyframes orSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Utility */
.or-row { display: flex; gap: var(--or-3); align-items: center; flex-wrap: wrap; }
.or-row--between { justify-content: space-between; }
.or-row--end { justify-content: flex-end; }
.or-stack { display: flex; flex-direction: column; gap: var(--or-3); }
.or-grid { display: grid; gap: var(--or-4); }
@media (min-width: 720px) {
	.or-grid--2 { grid-template-columns: 1fr 1fr; }
	.or-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.or-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.or-spacer { height: var(--or-6); }
.or-divider { height: 1px; background: var(--or-border); margin: var(--or-5) 0; }
.or-hide-mobile { display: none; }
@media (min-width: 720px) { .or-hide-mobile { display: initial; } .or-hide-desktop { display: none; } }

/* Avatar (initials + soft-coral gradient when no photo) */
.or-avatar {
	width: 44px; height: 44px; border-radius: 50%;
	background: linear-gradient(135deg, #F5C4B3, #F0997B 55%, #E8835F 100%);
	color: var(--or-accent-ink);
	display: inline-flex; align-items: center; justify-content: center;
	font-weight: 600; letter-spacing: -.01em; font-size: 14px;
	flex-shrink: 0;
	background-size: cover; background-position: center;
}
.or-avatar--lg { width: 64px; height: 64px; font-size: 18px; }
.or-avatar--xl { width: 96px; height: 96px; font-size: 24px; }
.or-avatar--photo { background-image: var(--photo-url); color: transparent; }