/* Nurses Care onboarding — design system */
:root {
  --navy: #0e2a8e;
  --navy-2: #1440c8;
  --teal: #1440c8;
  --teal-soft: #e9eefb;
  --bg: #f4f6fc;
  --card: #ffffff;
  --ink: #1c2733;
  --muted: #56617c;
  --line: #d9e1f4;
  --ok: #1e7f4f;
  --ok-soft: #e2f4ea;
  --warn: #9a6700;
  --warn-soft: #fff3d6;
  --danger: #cf1f26;
  --danger-soft: #fdeaea;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(14, 42, 142, .07), 0 4px 16px rgba(14, 42, 142, .05);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); font-size: 16px; line-height: 1.5; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.wrap.narrow { max-width: 760px; }
.wrap.wide { max-width: 1320px; }

/* ---------- top bars ---------- */
.topbar { background: #fff; color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: 0 1px 4px rgba(14, 42, 142, .06); }
.topbar .wrap, .topbar .wrap.wide { display: flex; align-items: center; gap: 14px; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); text-decoration: none; }
.brand .brandtext { display: flex; flex-direction: column; line-height: 1.15; }
/* Header logo. --logo-h is set inline from the HR-adjustable Settings value;
   the mobile cap keeps oversized logos from blowing up the phone header. */
.brand .brandlogo { display: block; max-height: var(--logo-h, 48px); max-width: 230px; width: auto; height: auto; border-radius: 8px; }
@media (max-width: 700px) { .brand .brandlogo { max-height: min(var(--logo-h, 48px), 44px); max-width: 175px; } }
.brand:hover { text-decoration: none; }
.brand .name { font-weight: 700; font-size: 17px; letter-spacing: .3px; }
.brand .tag { font-size: 11px; color: var(--muted); font-style: italic; }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topbar nav a { color: var(--navy); padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; }
.topbar nav a:hover { background: var(--teal-soft); text-decoration: none; }
.topbar nav a.active { background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.topbar .userchip { font-size: 13px; color: var(--muted); padding: 0 6px; white-space: nowrap; }
.topbar .account { display: flex; align-items: center; gap: 8px; }

/* Compact, two-row header on phones: brand + account on top, nav as a
   full-width segmented tab bar underneath. Desktop keeps the single row. */
@media (max-width: 700px) {
  .topbar .wrap { flex-wrap: wrap; min-height: 0; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; gap: 10px; }
  .brand .tag { display: none; }
  .brand .name { font-size: 16px; white-space: nowrap; }
  .topbar .account { margin-left: auto; }
  .topbar .userchip { padding: 0 2px; }
  .topbar .userchip .uid { display: none; }
  .topbar nav.tabs { order: 3; flex: 1 1 100%; margin-left: 0; background: #eef2fb; border-radius: 10px; padding: 3px; gap: 3px; flex-wrap: nowrap; }
  .topbar nav.tabs a { flex: 1; text-align: center; padding: 8px 4px; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- cards & layout ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; margin: 18px 0; }
.card h2 { margin: 0 0 6px; font-size: 20px; color: var(--navy); }
.card h3 { margin: 18px 0 8px; font-size: 16px; color: var(--navy); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }
/* Grid children default to min-width:auto, so a date input or select can force
   its column wider than the track and blow out of a narrow card (e.g. the
   credentials card in the applicant sidebar). Let tracks shrink instead. */
.grid2 > * { min-width: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
hr.soft { border: none; border-top: 1px solid var(--line); margin: 18px 0; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(160deg, #0e2a8e 0%, #1440c8 60%, #2a5fe0 100%); color: #fff; padding: 52px 0 60px; }
.hero h1 { font-size: clamp(28px, 5vw, 40px); margin: 0 0 10px; line-height: 1.15; }
.hero p { font-size: 17px; color: #ccd9f8; max-width: 640px; margin: 0 0 26px; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  font-family: var(--font); font-size: 15px; font-weight: 600; padding: 11px 20px; border-radius: 10px;
  background: var(--teal); color: #fff; text-decoration: none; transition: filter .15s; }
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn.big { font-size: 17px; padding: 14px 26px; }
.btn.secondary { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn.secondary:hover { border-color: var(--teal); color: var(--teal); }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--line); }
.hero .btn.ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn.ghost:hover { border-color: #fff; }
.btn.danger { background: var(--danger); }
.btn.subtle { background: var(--teal-soft); color: var(--teal); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.small { font-size: 13px; padding: 7px 13px; border-radius: 8px; }

/* ---------- forms ---------- */
label.field { display: block; margin: 0 0 14px; }
label.field > .lbl, .lbl { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy); margin-bottom: 5px; }
.lbl .req { color: var(--danger); }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password], select, textarea {
  width: 100%; min-width: 0; font-family: var(--font); font-size: 16px; padding: 10px 12px; border: 1.5px solid var(--line);
  border-radius: 9px; background: #fff; color: var(--ink); outline: none; transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,64,200,.14); }
/* iOS Safari draws date fields with its own intrinsic width and centered text,
   so on phones they poke past the card edge and don't match the other inputs
   (seen on the I-9's Date of birth). Strip the native styling so they size and
   align like every other field; the min-height keeps an empty date field from
   collapsing once the native look is removed. */
input[type=date] { -webkit-appearance: none; appearance: none; display: block; min-height: 45px; text-align: left; }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
textarea { min-height: 90px; resize: vertical; }
.fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin: 0 0 16px; background: #fbfcfe; }
.fieldset > .legend { font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.fieldset > .help { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.radio-group { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 14px; }
.radio-group.inline { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.choice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 15px; }
.choice:hover { border-color: var(--teal); }
.choice input { margin-top: 3px; accent-color: var(--teal); flex: none; }
.choice.checked { border-color: var(--teal); background: var(--teal-soft); }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.error-box { background: var(--danger-soft); color: var(--danger); border: 1px solid #efc2bd; border-radius: 9px; padding: 12px 14px; margin: 12px 0; font-size: 14.5px; display: none; }
.error-box.show { display: block; }
.ok-box { background: var(--ok-soft); color: var(--ok); border: 1px solid #bfe4cf; border-radius: 9px; padding: 12px 14px; margin: 12px 0; font-size: 14.5px; }

/* ---------- pills & status ---------- */
.pill { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 11px; border-radius: 99px; white-space: nowrap; }
.pill.submitted { background: #e7ecf5; color: var(--navy); }
.pill.under_review { background: var(--warn-soft); color: var(--warn); }
.pill.approved { background: var(--teal-soft); color: var(--teal); }
.pill.completed { background: var(--ok-soft); color: var(--ok); }
.pill.rejected { background: var(--danger-soft); color: var(--danger); }
.pill.pending { background: #eef1f5; color: var(--muted); }
.pill.optional { background: #f0eefa; color: #5b4fa8; }

/* ---------- progress ---------- */
.progress { background: #e6ebf1; border-radius: 99px; height: 10px; overflow: hidden; }
.progress > div { height: 100%; background: linear-gradient(90deg, var(--navy), #2a5fe0); border-radius: 99px; transition: width .4s; }

/* ---------- wizard steps ---------- */
.steps { display: flex; gap: 6px; margin: 20px 0 8px; flex-wrap: wrap; }
.steps .step { flex: 1; min-width: 52px; text-align: center; font-size: 11.5px; color: var(--muted); }
.steps .step .bar { height: 5px; background: #e0e6ee; border-radius: 4px; margin-bottom: 5px; }
.steps .step.done .bar, .steps .step.current .bar { background: var(--teal); }
.steps .step.current { color: var(--teal); font-weight: 700; }
.wizard-panel { display: none; }
.wizard-panel.active { display: block; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }

/* ---------- checklist ---------- */
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 4px; }
.section-head h2 { font-size: 19px; color: var(--navy); margin: 0; }
.section-head .count { font-size: 13px; color: var(--muted); }
.docrow { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .1s; }
.docrow:hover { border-color: var(--teal); text-decoration: none; }
.docrow .tick { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; }
.docrow.completed .tick { background: var(--ok); border-color: var(--ok); }
.docrow .info { flex: 1; min-width: 0; }
.docrow .info .t { font-weight: 600; color: var(--navy); }
.docrow .info .d { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.docrow .chev { color: var(--muted); flex: none; }

/* ---------- doc page ---------- */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .doc-layout { grid-template-columns: 1fr; } }
.pdf-viewer { background: #59636e; border-radius: var(--radius); padding: 12px; max-height: 82vh; overflow-y: auto; }
.pdf-viewer canvas { display: block; width: 100%; height: auto; margin: 0 auto 12px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.35); background: #fff; }
.pdf-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.action-panel { position: sticky; top: 14px; }
.action-panel .card { margin: 0 0 14px; }

/* ---------- signature widget ---------- */
.sigwidget .tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.sigwidget .tabs button { flex: 1; padding: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; font-family: var(--font); font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.sigwidget .tabs button.active { border-color: var(--teal); color: var(--teal); background: var(--teal-soft); }
.sigwidget canvas.pad { width: 100%; height: 130px; border: 1.5px dashed #b9c4d0; border-radius: 9px; background: #fff; touch-action: none; display: block; }
.sigwidget .typed-row { display: flex; gap: 8px; }
.sigwidget .sig-preview { border: 1.5px solid var(--line); border-radius: 9px; background: #fff; padding: 6px; text-align: center; }
.sigwidget .sig-preview img { max-height: 70px; }
.sigwidget .tools { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }

/* ---------- quiz ---------- */
.quiz-q { padding: 14px 0; border-bottom: 1px solid var(--line); }
.quiz-q .qt { font-weight: 600; margin-bottom: 8px; }
.tfrow { display: flex; gap: 8px; }
.tfrow .choice { flex: 1; justify-content: center; }
.match-grid { display: grid; grid-template-columns: 1fr 110px; gap: 8px 10px; align-items: center; }
.match-grid select { padding: 8px; }
.match-key { columns: 2; font-size: 13px; color: var(--muted); margin: 10px 0; }
@media (min-width: 700px) { .match-key { columns: 3; } }

/* ---------- HR tables ---------- */
table.data { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.data th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 12px 14px; background: #f0f3f7; border-bottom: 1px solid var(--line); }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: middle; }
table.data tr:last-child td { border-bottom: none; }
table.data tr.rowlink { cursor: pointer; }
table.data tr.rowlink:hover { background: #f6f9fb; }
.statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0; }
.statcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.statcard .n { font-size: 26px; font-weight: 700; color: var(--navy); }
.statcard .l { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.statcard.link { text-decoration: none; display: block; }
.statcard.link:hover { border-color: var(--teal); }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.toolbar input[type=text] { max-width: 300px; }
.toolbar select { max-width: 190px; }

/* HR detail two-col */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
@media (max-width: 980px) { .detail-layout { grid-template-columns: 1fr; } }
.kvlist { margin: 0; }
.kvlist > div { display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #eef1f5; font-size: 14.5px; }
.kvlist > div:last-child { border-bottom: none; }
.kvlist dt { color: var(--muted); font-weight: 600; font-size: 13px; }
.kvlist dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .kvlist > div { grid-template-columns: 1fr; gap: 1px; } }
.note { background: #fbfcfe; border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; margin: 8px 0; font-size: 14.5px; }
.note .meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* footer */
footer.site { padding: 34px 0 44px; color: var(--muted); font-size: 13px; text-align: center; }

/* misc */
.code-display { font-size: 28px; font-weight: 800; letter-spacing: 2px; font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--navy); background: var(--teal-soft); border: 2px dashed var(--teal); border-radius: 12px; padding: 14px 20px; display: inline-block; }
.badge-num { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; align-items: center; justify-content: center; margin-right: 8px; }
.print-hide { }

/* HR applicant page — grouped onboarding document list */
.docgroup { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.docgroup.attention { border-color: #ecd9a0; background: #fffdf5; }
.docgroup-head { padding: 10px 14px; font-size: 13.5px; font-weight: 700; }
.docgroup-head.warn { background: var(--warn-soft); color: var(--warn); border-bottom: 1px solid #ecd9a0; }
.docgroup > summary { cursor: pointer; padding: 11px 14px; font-weight: 700; font-size: 14.5px; color: var(--navy); list-style: none; display: flex; align-items: center; gap: 9px; user-select: none; }
.docgroup > summary::-webkit-details-marker { display: none; }
.docgroup > summary::after { content: "▸"; margin-left: auto; color: var(--muted); font-size: 13px; transition: transform .15s; }
.docgroup[open] > summary::after { transform: rotate(90deg); }
.docgroup[open] > summary { border-bottom: 1px solid var(--line); }
.docgroup-sub { padding: 8px 14px 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.docrow { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-top: 1px solid #eef1f5; font-size: 14px; }
.docrow:first-child, .docgroup-sub + .docrow { border-top: none; }
.docrow .doc-title { flex: 1; min-width: 0; }
.doc-ico { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.doc-ico.ok { background: var(--ok-soft); color: var(--ok); }
.doc-ico.warn { background: var(--warn-soft); color: var(--warn); }
.doc-ico.pending { background: #eef1f5; color: var(--muted); font-size: 9px; }
@media (max-width: 640px) { .docrow { flex-wrap: wrap; } .docrow .btn { margin-left: 30px; } }

/* topbar settings dropdown */
.navmenu { position: relative; display: inline-block; }
.navmenu > summary { list-style: none; cursor: pointer; color: var(--navy); padding: 8px 12px; border-radius: 8px; font-size: 14px; font-weight: 500; user-select: none; display: inline-flex; align-items: center; gap: 5px; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary:hover { background: var(--teal-soft); }
.navmenu > summary.active { background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.navmenu > summary .caret { font-size: 10px; opacity: .7; transition: transform .15s; }
.navmenu[open] > summary { background: var(--teal-soft); color: var(--teal); }
.navmenu[open] > summary .caret { transform: rotate(180deg); }
.navmenu-panel { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(23,48,79,.18); padding: 6px; z-index: 60; }
.topbar nav .navmenu-panel a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; font-weight: 500; white-space: nowrap; }
.topbar nav .navmenu-panel a:hover { background: var(--teal-soft); color: var(--teal); text-decoration: none; }
.topbar nav .navmenu-panel a.active { background: var(--teal-soft); color: var(--teal); font-weight: 700; }
.navmenu-sep { height: 1px; background: var(--line); margin: 5px 8px; }
@media (max-width: 700px) { .navmenu-panel { right: auto; left: 50%; transform: translateX(-50%); } }

/* signature fonts (bundled, used by the typed-signature option) */
@font-face { font-family: 'Sig Dancing'; src: url('/static/fonts/dancing-script.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Sig Vibes'; src: url('/static/fonts/great-vibes.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Sig Pacifico'; src: url('/static/fonts/pacifico.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Sig Caveat'; src: url('/static/fonts/caveat.woff2') format('woff2'); font-weight: 600; font-display: swap; }
.sigwidget .fontpick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sigwidget .fontpick button { flex: 1 1 30%; min-width: 105px; padding: 6px 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; font-size: 17px; line-height: 1.3; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sigwidget .fontpick button.active { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }

/* enhancement phase: new workflow statuses */
.pill.returned { background: var(--warn-soft); color: var(--warn); }
.pill.ready_to_schedule { background: var(--ok); color: #fff; }

/* ---------- inline spinner (AI review / AI read in-flight state) ---------- */
.spinner { width: 16px; height: 16px; flex: none; display: inline-block; border-radius: 50%;
  border: 2.5px solid var(--teal-soft); border-top-color: var(--teal); animation: ncspin .8s linear infinite; vertical-align: -3px; }
@keyframes ncspin { to { transform: rotate(360deg); } }