/* Molina ATS — application theme (matched to ops.molinatek.com) */
* { box-sizing:border-box; }
:root {
  --bg:#f7f8fc; --sidebar:#ffffff; --surface:#ffffff; --text:#1f2937; --muted:#6b7280;
  --border:#e5e7eb; --brand:#3b82f6; --brand-hover:#2563eb; --brand-soft:#eff6ff; --brand-ink:#1d4ed8;
  --navy:#0f172a; --navy-hover:#1e293b;
  --success:#10b981; --error:#ef4444; --warning:#f59e0b;
  --input-border:#cbd5e1; --placeholder:#9ca3af; --label:#334155;
  --kbcol:#f3f4f6;
  --shadow:0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --modal-shadow:0 20px 25px -5px rgba(0,0,0,.10), 0 10px 10px -5px rgba(0,0,0,.04);
  --login-bg:#ffffff;
}
body.dark {
  --bg:#121212; --sidebar:#1a1a1a; --surface:#262626; --text:#f9fafb; --muted:#9ca3af;
  --border:#333333; --input-border:#3d3d3d; --placeholder:#6b7280; --label:#d1d5db;
  --kbcol:#1e1e1e; --brand-soft:rgba(59,130,246,.15); --brand-ink:#93c5fd;
  --login-bg:#1a1a1a;
}
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; margin:0; background:var(--bg); color:var(--text); }

/* ---- App shell ---- */
.app { display:flex; min-height:100vh; }
.sidebar { width:200px; background:var(--sidebar); border-right:1px solid var(--border); padding:18px 12px; flex-shrink:0; position:sticky; top:0; height:100vh; }
.sidebar .logo { font-weight:800; font-size:15px; margin-bottom:20px; padding:0 8px; letter-spacing:.5px; display:flex; align-items:center; gap:8px; }
.m-mark { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,#ef4444,#f97316); color:#fff; font-size:15px; font-weight:900; }
.navitem { display:block; padding:9px 10px; font-size:14.5px; color:var(--muted); border-radius:8px; margin-bottom:2px; text-decoration:none; }
.navitem:hover { background:var(--kbcol); color:var(--text); }
.navitem.active { background:var(--brand-soft); color:var(--brand-ink); font-weight:600; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { display:flex; align-items:center; gap:10px; padding:12px 18px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:20; }
.topbar .spacer { flex:1; display:flex; justify-content:center; min-width:0; }
.daily-quote { font-size:12.5px; color:var(--muted); font-style:italic; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
@media (max-width: 900px) { .daily-quote { display:none; } }
.iconbtn { border:1px solid var(--border); border-radius:8px; padding:6px 10px; font-size:13px; background:var(--surface); color:var(--text); cursor:pointer; }
.content { padding:20px 24px; width:100%; }
.content h2.page { font-size:17px; margin:0 0 14px 0; font-weight:600; }

/* ---- Controls ---- */
.toolbar { display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.input, .select, textarea.input { border:1px solid var(--input-border); border-radius:8px; padding:9px 12px; font-size:13px; background:var(--surface); color:var(--text); min-width:150px; }
.input::placeholder { color:var(--placeholder); }
.input:focus, .select:focus { outline:2px solid var(--brand-soft); border-color:var(--brand); }
.btn { display:inline-block; border:1px solid var(--border); border-radius:9999px; padding:8px 16px; font-size:13px; background:var(--surface); color:var(--text); cursor:pointer; font-weight:500; text-decoration:none; }
.btn:hover { border-color:var(--brand); }
.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.btn-primary:hover { background:var(--brand-hover); border-color:var(--brand-hover); }
.btn-sm { padding:5px 12px; font-size:12px; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* ---- Data display ---- */
.tablewrap { border:1px solid var(--border); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); overflow-x:auto; }
table.wf { width:100%; border-collapse:collapse; font-size:12.5px; }
table.wf th { text-align:left; padding:10px 12px; border-bottom:2px solid var(--border); color:var(--muted); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; }
table.wf td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
table.wf tr:last-child td { border-bottom:0; }
table.wf th a.sortlink { color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:4px; }
table.wf th a.sortlink:hover { color:var(--text); }
table.wf th .sortind { font-size:10px; }
table.wf th { position:relative; }
table.wf th .col-resizer { position:absolute; right:-4px; top:0; bottom:0; width:9px; cursor:col-resize; z-index:2; }
table.wf th .col-resizer:hover { background:var(--brand); opacity:.45; }
.badge { display:inline-block; font-size:11px; font-weight:600; padding:3px 10px; border-radius:9999px; background:#dbeafe; color:#1d4ed8; white-space:nowrap; }
.badge.green { background:#d1fae5; color:#065f46; }
.badge.amber { background:#fef3c7; color:#92400e; }
.badge.gray { background:#f3f4f6; color:#4b5563; }
.badge.red { background:#fee2e2; color:#991b1b; }
.badge.purple { background:#ede9fe; color:#5b21b6; }
.badge.teal { background:#ccfbf1; color:#0f766e; }
body.dark .badge { background:rgba(59,130,246,.2); color:#93c5fd; }
body.dark .badge.green { background:rgba(16,185,129,.2); color:#6ee7b7; }
body.dark .badge.amber { background:rgba(245,158,11,.2); color:#fcd34d; }
body.dark .badge.gray { background:#2e2e2e; color:#9ca3af; }
body.dark .badge.red { background:rgba(239,68,68,.2); color:#fca5a5; }
body.dark .badge.purple { background:rgba(139,92,246,.2); color:#c4b5fd; }
body.dark .badge.teal { background:rgba(20,184,166,.2); color:#5eead4; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:20px; margin-bottom:14px; box-shadow:var(--shadow); }
.card h4 { margin:0 0 10px 0; font-size:14px; font-weight:600; }
.formgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.formgrid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.span3 { grid-column:1/-1; }
.formsection { margin-bottom:20px; }
.formsection > h3 { font-size:13.5px; font-weight:600; margin:0 0 12px 0; padding-bottom:8px; border-bottom:1px solid var(--border); color:var(--text); }
.field { margin-bottom:14px; }
.field label { display:block; font-size:13px; color:var(--label); margin-bottom:6px; font-weight:500; }
.field .input, .field .select, .field textarea.input { width:100%; }
.req::after { content:" *"; color:var(--error); }
.flash { border-radius:12px; padding:12px 16px; font-size:13px; margin-bottom:14px; }
.flash.error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.flash.ok { background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; }
body.dark .flash.error { background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.4); color:#fca5a5; }
body.dark .flash.ok { background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.4); color:#6ee7b7; }

/* ---- Kanban (Phase 6) ---- */
.kanban { display:flex; gap:12px; overflow-x:auto; padding-bottom:8px; }
.kbcol { min-width:220px; background:var(--kbcol); border:1px solid var(--border); border-radius:12px; padding:10px; }
.kbcol h5 { margin:0 0 10px 0; font-size:12px; font-weight:700; display:flex; justify-content:space-between; align-items:center; }
.kbcol h5 .count { background:var(--surface); border:1px solid var(--border); border-radius:9999px; font-size:11px; padding:1px 8px; color:var(--muted); }
.kbcard { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px; margin-bottom:8px; font-size:12px; box-shadow:var(--shadow); }
.kbcard .t { font-weight:600; font-size:12.5px; }
.kbcard .m { color:var(--muted); font-size:11.5px; margin-top:4px; }
.date-group { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin:12px 0 6px 0; }
.pill { display:inline-block; background:var(--brand-soft); color:var(--brand-ink); font-size:11px; font-weight:700; padding:2px 10px; border-radius:9999px; margin-left:8px; }

/* ---- Split login (Screen 1) ---- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg); }
.login-split { display:flex; width:100%; max-width:960px; background:var(--login-bg); border:1px solid var(--border); border-radius:16px; overflow:hidden; min-height:540px; box-shadow:var(--modal-shadow); }
.login-form { flex:1; max-width:30rem; margin:0 auto; padding:48px 56px; display:flex; flex-direction:column; justify-content:center; width:100%; }
.login-form h2 { font-size:24px; font-weight:600; margin:0 0 8px 0; }
.login-form .lede { font-size:13.5px; color:var(--muted); margin:0 0 24px 0; }
.login-form .field .input { padding:12px 16px; font-size:14px; }
.btn-login { background:var(--navy); color:#fff; border:0; border-radius:9999px; padding:14px; font-size:14px; font-weight:600; text-align:center; cursor:pointer; margin-top:8px; width:100%; }
.btn-login:hover { background:var(--navy-hover); }
.otp-boxes { display:flex; gap:10px; margin:6px 0 18px 0; }
.otp-boxes .input { width:48px; min-width:0; height:52px; text-align:center; font-size:20px; font-weight:600; padding:0; }
.otp-meta { font-size:12.5px; color:var(--muted); margin-bottom:18px; }
.resend { text-align:center; font-size:12.5px; color:var(--muted); margin-top:14px; }
.resend a { color:var(--brand); font-weight:600; }
.brand-panel { flex:1.15; background:linear-gradient(135deg,#ffffff 0%,#fdf4ea 60%,#ffedd5 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px; text-align:center; border-left:1px solid var(--border); }
body.dark .brand-panel { background:linear-gradient(135deg,#1a1a1a 0%,#2a1f14 100%); }
.brand-lockup { display:flex; align-items:center; gap:18px; }
.brand-figure { width:96px; height:96px; border-radius:24px; background:linear-gradient(135deg,#ef4444,#f97316); display:flex; align-items:center; justify-content:center; color:#fff; font-size:52px; font-weight:900; box-shadow:var(--shadow-lg); }
.brand-name { font-size:44px; font-weight:900; letter-spacing:2px; background:linear-gradient(90deg,#ef4444,#f97316); -webkit-background-clip:text; background-clip:text; color:transparent; line-height:1; }
.brand-sub { font-size:15px; font-weight:700; letter-spacing:6px; color:#b91c1c; margin-top:6px; }
.brand-tag { display:flex; align-items:center; gap:12px; margin-top:22px; font-size:13px; font-weight:600; letter-spacing:3px; color:var(--muted); }
.brand-tag::before, .brand-tag::after { content:""; width:64px; height:1px; background:var(--border); }

/* ---- Responsive ---- */
@media (max-width:860px) {
  .brand-panel { display:none; }
  .login-form { padding:36px 28px; }
  .formgrid { grid-template-columns:1fr; }
  .formgrid3 { grid-template-columns:1fr; }
}
@media (max-width:1150px) {
  .formgrid3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:720px) {
  .sidebar { position:fixed; z-index:40; left:0; top:0; transform:translateX(-100%); transition:transform .2s; }
  body.nav-open .sidebar { transform:none; }
  .nav-toggle { display:inline-block !important; }
}
.nav-toggle { display:none; }

/* ---- Candidates (Phase 4) ---- */
.tabs { display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); }
.tabs a { padding:10px 16px; font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs a:hover { color:var(--text); }
.tabs a.on { color:var(--brand); border-bottom-color:var(--brand); font-weight:600; }
.detailgrid { display:grid; grid-template-columns:180px 1fr; gap:8px 16px; font-size:13.5px; }
.detailgrid dt { color:var(--muted); font-weight:500; }
.detailgrid dd { margin:0; }
.chip { display:inline-block; background:var(--chip-bg,#eef2ff); color:var(--chip-fg,#3730a3); border-radius:999px; padding:2px 10px; font-size:12px; margin:1px 2px; }
body.dark .chip { --chip-bg:#312e81; --chip-fg:#c7d2fe; }
.card h4 { margin:0 0 14px; font-size:15px; }
.card { margin-bottom:16px; }
.opts { font-size:12px; color:var(--muted); margin-top:4px; }

/* ---- Phase 7: link-styled buttons (e.g. Cancel inside interview row actions) ---- */
.linklike { background:none; border:none; padding:0; font:inherit; font-size:12.5px; color:var(--brand); cursor:pointer; text-decoration:none; }
.linklike:hover { text-decoration:underline; }

/* ---- Company lookahead suggestion items (CSP-safe hover, no inline handlers) ---- */
.suggest-item:hover { background: var(--kbcol); }