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

 :root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f4f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --navy: #003049;
  --navy-2: #496c89;
  --primary: #1a95d3;
  --primary-rgb: 26, 149, 211;
  --primary-dark: #0d6f9f;
  --violet: #496c89;
  --blue-soft: #cfe3f1;
  --border: #d6e2ec;
  --muted: #607184;
  --surface: #ffffff;
  --page-bg: #f4f7fb;
  --surface-alt: #f7fbfd;
  --success: #0c8a67;
  --danger: #dc3f59;
  --warning: #d88414;
  --shadow: 0 14px 38px rgba(26, 39, 69, 0.08);
  --shadow-lg: 0 28px 80px rgba(15, 23, 42, 0.14);
  --brand-gradient: linear-gradient(135deg, #1a95d3, #496c89);
  --sidebar-gradient: linear-gradient(180deg, #003049 0%, #0a3d5a 58%, #496c89 100%);
  --hero-gradient: linear-gradient(125deg, #234bd0, #473bb9 62%, #5836af);
  --button-light-text: #1f3d9f;
  --avatar-gradient: linear-gradient(135deg, #dfe6ff, #ece5ff);
  --avatar-text: #3d4dc2;
  --topbar-bg: rgba(247,249,253,.88);
  --topbar-border: rgba(218,225,236,.85);
}

html[data-brand-theme='burgundy'], body[data-brand-theme='burgundy'] {
  --primary: #80141d;
  --primary-rgb: 128, 20, 29;
  --primary-dark: #5f1016;
  --brand-gradient: linear-gradient(135deg, #80141d, #a9313d);
  --sidebar-gradient: linear-gradient(180deg, #3b0f16 0%, #5c131e 56%, #80141d 100%);
  --hero-gradient: linear-gradient(125deg, #6b1221, #80141d 58%, #aa3943);
  --button-light-text: #6e1520;
  --avatar-gradient: linear-gradient(135deg, #fae3e6, #f5d7dc);
  --avatar-text: #7b1320;
  --topbar-bg: rgba(250,246,247,.9);
  --topbar-border: rgba(233,219,222,.9);
}


* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page-bg); }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--page-bg); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.58; }
code { font-family: "SFMono-Regular", Consolas, monospace; background: #eef2ff; color: #4338ca; padding: 2px 6px; border-radius: 6px; }

h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: #111a2d; }
p { color: var(--muted); line-height: 1.65; }

.loading-screen { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--muted); }
.loading-screen .brand-mark { display: none; }
.spinner { width: 38px; height: 38px; border: 3px solid #dce4f2; border-top-color: var(--primary); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.brand-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--brand-gradient); color: #fff; font-weight: 800; font-size: 15px; box-shadow: 0 10px 25px rgba(var(--primary-rgb), .22); }
.brand-mark.large { width: 64px; height: 64px; border-radius: 20px; font-size: 19px; }
.brand-logo { width: 168px; max-width: 100%; display: block; }
.brand-logo.compact { width: 126px; }
.sidebar-logo { width: 122px; max-width: 100%; display: block; flex: 0 0 auto; }

.eyebrow { display: inline-block; font-size: 11px; letter-spacing: .13em; font-weight: 800; color: #536078; margin-bottom: 8px; }
.eyebrow.light { color: rgba(255,255,255,.72); }
.muted { color: var(--muted); }
.small-copy { font-size: 13px; }
.required, .error-text, .danger-text { color: var(--danger); }
.pre-wrap { white-space: pre-wrap; }

.button { min-height: 42px; border: 1px solid transparent; border-radius: 12px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button.primary { color: #fff; background: var(--brand-gradient); box-shadow: 0 9px 23px rgba(var(--primary-rgb), .22); }
.button.primary:hover:not(:disabled) { box-shadow: 0 12px 28px rgba(var(--primary-rgb), .28); }
.button.secondary { color: #314057; background: #fff; border-color: #dbe3ef; }
.button.secondary:hover:not(:disabled) { border-color: #9eb0ca; background: #f9fbff; }
.button.success { color: #fff; background: linear-gradient(135deg, #07966a, #0fbd83); box-shadow: 0 9px 23px rgba(15,159,110,.22); }
.button.light { color: var(--button-light-text); background: #fff; box-shadow: 0 10px 28px rgba(14, 30, 74, .16); }
.button.glass { color: #fff; background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.25); backdrop-filter: blur(12px); }
.button.danger-ghost { color: #c92d48; background: #fff6f7; border-color: #ffd4db; }
.button.small { min-height: 34px; border-radius: 10px; padding: 7px 12px; font-size: 12px; }
.button.large { min-height: 50px; border-radius: 14px; padding: 13px 19px; font-size: 15px; }
.button.full, .full { width: 100%; }
.button-row { display: flex; align-items: center; gap: 10px; }
.button-row.wrap { flex-wrap: wrap; }

.icon-button { width: 40px; height: 40px; border: 0; border-radius: 11px; display: grid; place-items: center; background: #eef2f7; color: #4c5a70; }
.icon-button:hover { background: #e4eaf3; }
.icon-button.small { width: 30px; height: 30px; }
.icon-button.inverse { background: rgba(255,255,255,.1); color: white; }
.icon-button.inverse:hover { background: rgba(255,255,255,.18); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 25px 27px 20px; }
.panel-header.compact { padding-bottom: 12px; }
.panel-header h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; font-size: 19px; }
.panel-header p { margin: 0; font-size: 13px; }
.count-bubble { min-width: 38px; height: 38px; padding: 0 10px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; color: #3d4dc0; font-weight: 800; }
.count-bubble.danger { background: #fff0f2; color: #d02d48; }
.stack-xl { display: flex; flex-direction: column; gap: 23px; }

.notice { border-radius: 13px; padding: 13px 15px; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.55; }
.notice > div { display: flex; flex-direction: column; gap: 3px; }
.notice.info { background: #eef5ff; border: 1px solid #cee0ff; color: #3156a4; }
.notice.error { background: #fff1f3; border: 1px solid #ffcbd3; color: #b92943; }
.notice.success { background: #edfdf6; border: 1px solid #b8f0d6; color: #087b59; }

/* Login */
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 1.1fr) minmax(460px, .9fr); background: linear-gradient(180deg, #eef5f9 0%, #f7fbfd 100%); }
.login-visual {
  position: relative;
  overflow: hidden;
  padding: 70px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 18% 18%, rgba(26,149,211,.17), transparent 30%),
    radial-gradient(circle at 92% 82%, rgba(79,108,137,.18), transparent 28%),
    linear-gradient(145deg, #003049 0%, #174765 56%, #496c89 100%);
}
.login-pattern {
  position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.32) 2px, transparent 2px),
    linear-gradient(-45deg, rgba(255,255,255,.22) 2px, transparent 2px);
  background-size: 110px 110px;
  background-position: 0 0, 55px 55px;
  mask-image: linear-gradient(180deg, transparent, rgba(0,0,0,.8) 20%, rgba(0,0,0,.8) 80%, transparent);
}
.login-visual::before, .login-visual::after { content: ''; position: absolute; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; }
.login-visual::before { width: 520px; height: 520px; right: -180px; top: -180px; }
.login-visual::after { width: 360px; height: 360px; left: -110px; bottom: -170px; }
.login-visual-content { position: relative; z-index: 1; max-width: 640px; }
.login-hero-logo { width: 210px; max-width: 100%; margin-bottom: 34px; opacity: .95; }
.login-visual h1 { margin: 8px 0 24px; color: #fff; font-size: clamp(44px, 5vw, 70px); line-height: 1.03; letter-spacing: -.045em; }
.login-visual p { max-width: 590px; color: rgba(255,255,255,.8); font-size: 17px; }
.login-feature { margin-top: 36px; padding: 17px 19px; border-radius: 15px; display: flex; align-items: flex-start; gap: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.88); line-height: 1.5; }
.login-form-side {
  position: relative;
  display: grid;
  place-items: center;
  padding: 45px;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 12%, rgba(26,149,211,.15), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(73,108,137,.14), transparent 26%),
    linear-gradient(180deg, #f7fbfd, #edf5f9);
}
.login-side-glow { position: absolute; inset: auto -120px -80px auto; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(26,149,211,.16), transparent 62%); filter: blur(8px); pointer-events: none; }
.login-card {
  position: relative;
  z-index: 1;
  width: min(470px, 100%);
  padding: 38px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 30px;
  box-shadow: 0 22px 80px rgba(0,48,73,.08);
  backdrop-filter: blur(24px);
}
.login-brand-stack { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.login-brand-stack h2 { margin: 2px 0 7px; font-size: 32px; letter-spacing: -.03em; }
.login-brand-stack > div { flex: 1; }
.mobile-login-brand { display: none; }
.login-help { text-align: center; font-size: 12px !important; margin: 18px 0 0; }
.field-label { display: block; font-size: 13px; color: #234055; font-weight: 700; margin: 18px 0 7px; }
.input-shell { min-height: 47px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid rgba(127,156,177,.35); border-radius: 14px; background: rgba(255,255,255,.86); color: #607184; transition: border-color .15s, box-shadow .15s, background .15s; }
.input-shell:focus-within { border-color: rgba(var(--primary-rgb), .6); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .12); background: rgba(255,255,255,.95); }
.input-shell.large { min-height: 52px; border-radius: 14px; padding-left: 14px; }
.input-shell input { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #172033; }
.input-action { flex: 0 0 auto; border: 0; background: transparent; color: #66758e; display: inline-flex; align-items: center; gap: 6px; }
.input-action.text { font-size: 12px; font-weight: 700; color: var(--primary); }
.login-card .button.full { margin-top: 23px; }
/* Shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 258px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 258px; display: flex; flex-direction: column; background: var(--sidebar-gradient); color: #fff; border-right: 1px solid rgba(255,255,255,.08); }
.sidebar-brand { min-height: 148px; padding: 22px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-brand-stack { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-width: 0; }
.sidebar-brand strong { font-size: 16px; line-height: 1.3; }
.sidebar-brand span { color: rgba(255,255,255,.72); font-size: 11px; }
.sidebar-close { display: none; margin-left: auto; }
.sidebar-nav { flex: 1; padding: 20px 13px; overflow-y: auto; }
.nav-section-label { display: block; margin: 0 13px 10px; font-size: 9px; letter-spacing: .16em; color: #65748e; font-weight: 800; }
.nav-link { min-height: 44px; margin: 4px 0; padding: 0 13px; display: flex; align-items: center; gap: 12px; border-radius: 12px; color: #9eacc1; text-decoration: none; font-size: 13px; font-weight: 600; transition: background .15s, color .15s; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-link.active { color: #fff; background: var(--brand-gradient); box-shadow: 0 10px 24px rgba(var(--primary-rgb), .28); }
.sidebar-profile { margin: 13px; padding: 13px; display: flex; align-items: center; gap: 10px; border-radius: 15px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.06); }
.avatar { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; overflow: hidden; background: var(--avatar-gradient); color: var(--avatar-text); font-weight: 800; }
.avatar.large { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; }
.profile-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.profile-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.profile-copy span { color: #8d9cb2; font-size: 10px; margin-top: 2px; }
.main-shell { grid-column: 2; min-width: 0; }
.topbar { min-height: 86px; position: sticky; top: 0; z-index: 20; padding: 16px 30px; display: flex; align-items: center; gap: 14px; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-border); backdrop-filter: blur(16px); }
.page-heading { flex: 1; }
.page-heading h1 { margin: 0 0 3px; font-size: 21px; letter-spacing: -.025em; }
.page-heading p { margin: 0; font-size: 11px; }
.menu-button { display: none; }
.topbar-role { padding: 8px 12px; border-radius: 10px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e0e7f0; color: #62718a; font-size: 11px; font-weight: 600; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,.12); }
.page-content { padding: 27px 30px 45px; max-width: 1680px; margin: 0 auto; }
.sidebar-backdrop { display: none; }

/* Dashboard */
.hero-panel { border-radius: 22px; padding: 30px 33px; display: flex; align-items: center; justify-content: space-between; gap: 28px; color: #fff; background: radial-gradient(circle at 92% 10%, rgba(255,255,255,.16), transparent 26%), var(--hero-gradient); box-shadow: 0 19px 48px rgba(var(--primary-rgb), .18); }
.hero-panel h2 { margin: 2px 0 8px; color: #fff; font-size: 28px; }
.hero-panel p { max-width: 770px; margin: 0; color: rgba(255,255,255,.76); font-size: 13px; }
.hero-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.metric-card { min-height: 105px; padding: 18px; display: flex; align-items: center; gap: 13px; background: #fff; border: 1px solid var(--border); border-radius: 17px; box-shadow: 0 8px 25px rgba(25,37,66,.055); }
.metric-icon { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; }
.metric-card > div:last-child { display: flex; flex-direction: column; gap: 5px; }
.metric-card span { color: #718098; font-size: 10px; font-weight: 700; }
.metric-card strong { color: #121c30; font-size: 25px; line-height: 1; }
.tone-blue .metric-icon { background: #eaf0ff; color: #3157e8; }
.tone-indigo .metric-icon { background: #edf0ff; color: #5554d8; }
.tone-violet .metric-icon { background: #f2ecff; color: #7b48dc; }
.tone-amber .metric-icon { background: #fff4df; color: #d47a0d; }
.tone-green .metric-icon { background: #e9faf3; color: #0d9b6c; }
.tone-rose .metric-icon { background: #fff0f3; color: #d4415c; }
.danger-panel { border-color: #ffd9df; overflow: hidden; }
.attention-list { border-top: 1px solid #f0e4e7; }
.attention-item { min-height: 76px; padding: 14px 26px; display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(180px, 1fr) minmax(160px, .8fr) 100px; align-items: center; gap: 20px; text-decoration: none; border-bottom: 1px solid #f0e4e7; transition: background .15s; }
.attention-item:last-child { border-bottom: 0; }
.attention-item:hover { background: #fff9fa; }
.attention-item > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.attention-item > div:first-child strong { font-size: 13px; }
.attention-item > div:first-child span { color: var(--muted); font-size: 11px; }
.attention-owner, .attention-time { display: flex; flex-direction: column; gap: 4px; }
.attention-owner span, .attention-time span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.attention-owner strong, .attention-time strong { font-size: 11px; }

/* Tables and filters */
.table-shell { width: 100%; min-width: 0; }
.table-drag-hint {
  min-height: 34px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  color: #8491a3;
  font-size: 10px;
  font-weight: 700;
  border-top: 1px solid #edf1f5;
  background: linear-gradient(180deg, #fbfcfe, #f8fafd);
}
.table-wrap { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-gutter: stable; }
.draggable-table { cursor: grab; user-select: none; }
.draggable-table.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.draggable-table.is-dragging * { cursor: grabbing !important; }
.draggable-table a,
.draggable-table button { user-select: auto; }

.data-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.data-table th { padding: 11px 18px; text-align: left; background: #f8fafd; border-top: 1px solid #edf1f6; border-bottom: 1px solid #e8edf4; color: #748198; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; white-space: nowrap; }
.data-table td { padding: 14px 18px; border-bottom: 1px solid #edf1f5; font-size: 11px; color: #526078; vertical-align: middle; }
.data-table tbody tr:hover { background: #fafcff; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td strong { display: block; color: #1b263a; font-size: 11px; }
.data-table td small { display: block; margin-top: 3px; color: #8a96aa; font-size: 9px; }
.serial-link { color: #3157d7; font-weight: 800; text-decoration: none; font-size: 11px; }
.serial-link:hover { text-decoration: underline; }
.inline-detail { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.row-arrow { width: 31px; height: 31px; border-radius: 9px; display: grid; place-items: center; margin-left: auto; color: #60708a; background: #f1f4f8; }
.row-arrow:hover { color: #fff; background: var(--primary); }
.status-badge { display: inline-flex; align-items: center; min-height: 25px; padding: 5px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.status-reception { background: #edf2ff; color: #3454c9; }
.status-pending_branch_reception, .status-pending_lab, .status-pending_lab_staff, .status-pending_lab_reception, .status-pending_reception, .status-pending_audiologist { background: #fff4df; color: #ae640d; }
.status-lab_received { background: #f0eaff; color: #6841bd; }
.status-in_process { background: #e7f7ff; color: #087da4; }
.status-completed { background: #eafaf3; color: #087c59; }
.status-branch_received { background: #eef6fb; color: #245f91; }
.status-returned { background: #e9fbf2; color: #087c59; }
.jobs-header { align-items: center; }
.filter-bar { padding: 0 26px 22px; display: grid; grid-template-columns: minmax(270px, 1fr) 220px 180px; gap: 12px; }
.search-box { min-height: 44px; padding: 5px 6px 5px 13px; display: flex; align-items: center; gap: 9px; background: #f9fbfd; border: 1px solid #dfe6ef; border-radius: 12px; color: #718096; }
.search-box:focus-within { border-color: #748df1; box-shadow: 0 0 0 4px rgba(49,87,232,.08); }
.search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #172033; }
.filter-select { min-height: 44px; padding: 0 11px; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #dfe6ef; border-radius: 12px; color: #718096; }
.filter-select select { flex: 1; min-width: 0; border: 0; outline: 0; color: #344157; background: transparent; }
.compact-select { min-height: 40px; border: 1px solid #dce4ef; border-radius: 11px; padding: 0 12px; color: #344157; background: #fff; }
.pagination { padding: 18px 25px 22px; display: flex; align-items: center; justify-content: center; gap: 17px; color: var(--muted); font-size: 11px; border-top: 1px solid #edf1f5; }

/* Forms */
.form-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.form-panel { overflow: hidden; }
.form-grid { padding: 4px 27px 27px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.form-grid.single { grid-template-columns: 1fr; padding: 3px 25px 25px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { color: #344157; font-size: 12px; font-weight: 700; }
.form-field > input, .form-field > textarea, .form-field > select { width: 100%; border: 1px solid #dbe3ee; border-radius: 12px; padding: 12px 13px; outline: 0; background: #fff; color: #172033; transition: border-color .15s, box-shadow .15s; }
.form-field > input, .form-field > select { min-height: 45px; }
.form-field > textarea { resize: vertical; min-height: 110px; }
.form-field > input:focus, .form-field > textarea:focus, .form-field > select:focus { border-color: #6380f1; box-shadow: 0 0 0 4px rgba(49,87,232,.09); }
.form-field small { color: #8994a6; font-size: 10px; line-height: 1.5; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 6px; }
.side-note-card { position: sticky; top: 108px; padding: 28px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 90% 10%, rgba(120,98,245,.5), transparent 30%), linear-gradient(150deg, #142542, #1c3160); box-shadow: var(--shadow); }
.side-note-card h3 { color: #fff; margin: 6px 0 12px; font-size: 22px; line-height: 1.2; }
.side-note-card p { color: rgba(255,255,255,.72); font-size: 13px; }
.side-note-card ul { margin: 20px 0 0; padding-left: 18px; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.8; }
.side-note-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 20px; border-radius: 15px; background: rgba(255,255,255,.12); color: #fff; }

/* Job details */
.detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.detail-header-card { padding: 34px; }
.detail-journey-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 10%, rgba(26,149,211,.18), transparent 24%),
    radial-gradient(circle at 90% 12%, rgba(207,227,241,.18), transparent 18%),
    linear-gradient(135deg, #003049 0%, #174765 46%, #496c89 100%);
  box-shadow: 0 26px 80px rgba(0, 48, 73, .16);
}
.detail-journey-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.05) 44%, transparent 64%);
  transform: translateX(-140%);
  animation: journey-card-shine 9s linear infinite;
  pointer-events: none;
}
@keyframes journey-card-shine { from { transform: translateX(-140%); } to { transform: translateX(140%); } }
.detail-journey-top {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  padding: 34px 34px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-radius: 30px 30px 26px 26px;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.12), transparent 22%),
    linear-gradient(135deg, #0f3552 0%, #1b5378 52%, #496c89 100%);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.detail-journey-top h2 {
  margin: 0 0 8px;
  font-size: clamp(36px, 4.4vw, 50px);
  color: #fff;
  line-height: 1;
  letter-spacing: -.055em;
  text-shadow: 0 2px 10px rgba(0,0,0,.16);
}
.detail-journey-top p {
  margin: 0;
  color: rgba(255,255,255,.84);
  font-size: 15px;
  text-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.detail-status-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.detail-progress-chip {
  min-height: 40px; padding: 10px 15px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px);
}
.detail-journey-grid { position: relative; z-index: 1; padding: 0 24px 24px; }
.detail-journey-grid.single-column { display: block; }
.journey-main-card {
  border-radius: 28px; padding: 28px; background: linear-gradient(180deg, #ffffff, #f8fbfd 100%);
  border: 1px solid rgba(207,227,241,.95); box-shadow: 0 22px 48px rgba(0, 48, 73, .11);
}
.journey-main-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.journey-main-head h3 { margin: 6px 0 8px; font-size: 26px; letter-spacing: -.035em; }
.journey-main-head p { margin: 0; font-size: 14px; max-width: 700px; }
.journey-main-badge {
  min-width: 132px; padding: 15px 18px; border-radius: 24px; text-align: center;
  background: linear-gradient(135deg, #1a95d3, #496c89); color: #fff; box-shadow: 0 18px 34px rgba(26,149,211,.24);
}
.journey-main-badge span { display: block; margin-bottom: 4px; color: rgba(255,255,255,.76); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.journey-main-badge strong { display: block; font-size: 28px; line-height: 1; letter-spacing: -.04em; }
.journey-progressbar { margin-bottom: 24px; }
.journey-progressbar-track {
  position: relative; height: 14px; border-radius: 999px; overflow: hidden; background: #dfeaf1;
  box-shadow: inset 0 2px 6px rgba(0,48,73,.07);
}
.journey-progressbar-fill {
  position: relative; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, #003049 0%, #1a95d3 58%, #8fb6d8 100%);
  box-shadow: 0 8px 16px rgba(26,149,211,.16);
}
.journey-progressbar-fill::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -40%; width: 38%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.2) 25%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.2) 75%, transparent 100%);
  animation: progress-sweep 2.4s linear infinite;
}
@keyframes progress-sweep { from { left: -40%; } to { left: 102%; } }
.journey-progressbar-labels { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; color: #7c8b99; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.status-stepper {
  --node-size: 88px;
  --step-gap: 18px;
  --connector-gap: 8px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--step-gap);
  align-items: start;
}
.progress-step {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.progress-track-segment {
  position: absolute;
  top: calc((var(--node-size) / 2) - 3px);
  left: 0;
  right: 0;
  height: 6px;
  pointer-events: none;
  z-index: 0;
}
.progress-track-segment .segment {
  position: absolute;
  top: 0;
  height: 6px;
  border-radius: 999px;
  background: #d8e2ea;
}
.progress-track-segment .segment.after {
  left: calc(50% + (var(--node-size) / 2) + var(--connector-gap));
  right: calc(-50% + ((var(--node-size) / 2) - var(--step-gap) + var(--connector-gap)));
}
.progress-step.complete .progress-track-segment .segment.after {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--primary-dark) 88%, white) 0%,
    var(--primary) 32%,
    color-mix(in srgb, var(--primary) 36%, white) 48%,
    #ffffff 52%,
    color-mix(in srgb, var(--primary) 36%, white) 56%,
    var(--primary) 72%,
    color-mix(in srgb, var(--primary-dark) 88%, white) 100%
  );
  background-size: 230% 100%;
  animation: progress-line-flow 2.35s linear infinite;
}
@keyframes progress-line-flow {
  from { background-position: 100% 0; }
  to { background-position: -130% 0; }
}
.progress-node-shell {
  position: relative;
  z-index: 1;
  width: var(--node-size);
  height: var(--node-size);
  display: grid;
  place-items: center;
  transition: transform .28s cubic-bezier(.2,.75,.25,1), filter .28s ease;
  will-change: transform;
}
.progress-node-ring {
  width: var(--node-size);
  height: var(--node-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #bfd1de;
  color: #6e8497;
  background: linear-gradient(180deg, #fefefe, #f7fbff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
  transition: box-shadow .28s ease, border-color .28s ease, background .28s ease;
}
.progress-node-core {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 0;
}
.progress-step.complete .progress-node-ring,
.progress-step.active .progress-node-ring {
  color: #ffffff;
  border-color: color-mix(in srgb, var(--primary) 16%, white);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary-dark) 92%, white), var(--primary));
  box-shadow: 0 16px 28px color-mix(in srgb, var(--primary) 24%, transparent);
}
.progress-step.active .progress-node-ring {
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--primary) 9%, transparent), 0 16px 28px color-mix(in srgb, var(--primary) 24%, transparent);
  animation: active-node-breathe 3.2s ease-in-out infinite;
}
@keyframes active-node-breathe {
  0%, 100% {
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--primary) 8%, transparent), 0 16px 28px color-mix(in srgb, var(--primary) 22%, transparent);
  }
  50% {
    box-shadow: 0 0 0 13px color-mix(in srgb, var(--primary) 12%, transparent), 0 20px 34px color-mix(in srgb, var(--primary) 28%, transparent);
  }
}
@media (hover: hover) and (pointer: fine) {
  .progress-step:hover .progress-node-shell {
    transform: translateY(-4px) scale(1.035);
    filter: drop-shadow(0 10px 14px rgba(15, 35, 55, .10));
  }
  .progress-step:hover .progress-node-ring {
    border-color: color-mix(in srgb, var(--primary) 36%, #bfd1de);
  }
}
@media (prefers-reduced-motion: reduce) {
  .progress-step.complete .progress-track-segment .segment.after,
  .progress-step.active .progress-node-ring {
    animation: none;
  }
  .progress-node-shell,
  .progress-node-ring {
    transition: none;
  }
}
.progress-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  max-width: 180px;
}
.progress-copy-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.progress-order {
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  background: #edf3f8;
  color: #5f7488;
}
.progress-copy strong {
  color: #263247;
  font-size: 16px;
  line-height: 1.25;
}
.progress-step.upcoming .progress-copy strong { color: #64758a; }
.progress-copy small {
  color: #78889b;
  font-size: 12px;
  line-height: 1.5;
}
.journey-bottom-strip {
  margin-top: 22px; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; align-items: center;
}
.journey-orb-only {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}
.journey-percent-orb {
  width: 148px; height: 148px; margin: 22px auto 0; padding: 10px; border-radius: 50%;
  background: conic-gradient(from 180deg, #8fb6d8, #1a95d3, #cfe3f1, #8fb6d8);
  box-shadow: 0 18px 42px rgba(7, 18, 44, .22), inset 0 0 0 1px rgba(255,255,255,.08);
}
.journey-percent-orb.static { animation: none; }
.journey-percent-orb-inner {
  width: 100%; height: 100%; border-radius: 50%; background: linear-gradient(180deg, #0b3956, #05283e);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.journey-percent-orb.minimalist { margin: 0; }
.journey-percent-orb-inner.minimalist strong { display: block; margin-top: 0; color: #fff; font-size: 40px; line-height: 1; letter-spacing: -.05em; }
.journey-percent-orb-inner span { color: rgba(255,255,255,.66); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.journey-percent-orb-inner strong { display: block; margin-top: 8px; color: #fff; font-size: 36px; line-height: 1; letter-spacing: -.05em; }
.journey-meta-list.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.journey-meta-item {
  min-height: 94px; padding: 16px 18px; border-radius: 18px; display: flex; align-items: center; gap: 12px;
  background: #f7fbfd; border: 1px solid #dbe6ee;
}
.journey-meta-item svg { color: #1a95d3; flex: 0 0 auto; }
.journey-meta-item span { display: block; margin-bottom: 4px; color: #77879a; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.journey-meta-item strong { display: block; color: #17364c; font-size: 14px; line-height: 1.35; }
.detail-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 22px; }
.custody-owner-card { margin: 2px 26px 20px; padding: 18px; display: flex; align-items: center; gap: 14px; border-radius: 15px; background: linear-gradient(135deg, #edf6fb, #f7fbfd); border: 1px solid #d7e4ec; }
.custody-owner-card > div:last-child { display: flex; flex-direction: column; }
.custody-owner-card span { color: #6d7890; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.custody-owner-card strong { margin: 3px 0; font-size: 15px; }
.custody-owner-card small { color: #7c879a; font-size: 10px; }
.detail-facts { padding: 0 26px 26px; display: grid; gap: 11px; }
.detail-facts.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
.detail-facts > div { min-height: 67px; padding: 13px; display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto; column-gap: 8px; background: #fafcfd; border: 1px solid #e3ebf1; border-radius: 13px; }
.detail-facts svg { grid-row: 1 / 3; color: #61708a; margin-top: 3px; }
.detail-facts span { color: #8590a3; font-size: 9px; }
.detail-facts strong { margin-top: 3px; color: #27334a; font-size: 11px; }
.info-list { margin: 0; padding: 0 26px 26px; }
.info-list > div { padding: 13px 0; display: grid; grid-template-columns: 150px 1fr; gap: 16px; border-bottom: 1px solid #edf1f5; }
.info-list > div:last-child { border-bottom: 0; }
.info-list dt { display: flex; align-items: center; gap: 8px; color: #7a869b; font-size: 10px; }
.info-list dd { margin: 0; color: #263249; font-size: 11px; line-height: 1.6; }
.action-panel { padding: 23px 26px; display: flex; align-items: center; justify-content: space-between; gap: 25px; background: linear-gradient(135deg, #fff, #f7fbfd); }
.action-panel h3 { margin: 0 0 5px; font-size: 18px; }
.action-panel p { margin: 0; font-size: 12px; }
.action-notice { align-items: center; }
.action-notice a { color: #0f6e9f; font-weight: 800; }
.event-timeline { padding: 0 27px 25px; }
.event-item { display: grid; grid-template-columns: 35px 1fr; gap: 12px; position: relative; }
.event-item:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 34px; bottom: -4px; width: 1px; background: #dfe5ee; }
.event-dot { width: 35px; height: 35px; z-index: 1; display: grid; place-items: center; border-radius: 11px; background: #eaf5fb; color: #0f6e9f; border: 1px solid #d7e7f0; }
.event-content { padding: 4px 0 21px; }
.event-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.event-title-row strong { color: #29354b; font-size: 11px; line-height: 1.55; }
.event-title-row time { flex: 0 0 auto; color: #8994a7; font-size: 9px; }
.event-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.event-meta span { display: inline-flex; align-items: center; gap: 4px; color: #7e899c; font-size: 9px; }

/* Handover */
.handover-card { padding: 24px 27px; background: linear-gradient(135deg, #fff9ed, #fff 58%); border: 1px solid #f4d9a8; border-radius: 20px; box-shadow: var(--shadow); }
.handover-heading { display: flex; align-items: flex-start; gap: 14px; }
.handover-icon { width: 47px; height: 47px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: #fff0d3; color: #b86a08; }
.handover-heading h3 { margin: 1px 0 6px; font-size: 18px; }
.handover-heading p { margin: 0; font-size: 12px; }
.handover-grid { margin-top: 20px; display: grid; grid-template-columns: 235px 1fr; gap: 28px; align-items: center; }
.handover-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.handover-qr small { color: #7e8798; font-size: 9px; text-align: center; }
.qr-image { display: block; background: white; border-radius: 13px; border: 1px solid #e2e7ef; }
.qr-placeholder { border-radius: 13px; background: linear-gradient(90deg,#eef1f5,#f7f8fa,#eef1f5); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.handover-code-block { display: flex; flex-direction: column; align-items: flex-start; }
.big-code { margin: 6px 0 12px; font-size: clamp(36px, 5vw, 54px); font-weight: 800; letter-spacing: .18em; color: #1b263b; }
.countdown { margin-bottom: 18px; display: flex; align-items: center; gap: 7px; color: #a75f0b; font-size: 12px; font-weight: 700; }
.countdown.expired { color: var(--danger); }
.handover-footer { margin-top: 18px; padding-top: 17px; border-top: 1px solid #f0dfbf; display: flex; justify-content: flex-end; }
.fixed-qr-modal { text-align: center; }
.fixed-qr-modal .qr-image { margin: 0 auto; }
.fixed-qr-modal h3 { margin: 15px 0 4px; font-size: 22px; }
.fixed-qr-modal p { margin-bottom: 17px; }
.fixed-qr-modal .notice { margin-bottom: 15px; text-align: left; }

/* Accept and scan */
.accept-page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 22px; align-items: stretch; max-width: 1050px; margin: 0 auto; }
.accept-panel { padding: 34px; text-align: center; }
.accept-hero-icon { width: 65px; height: 65px; margin: 0 auto 17px; display: grid; place-items: center; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #3157e8, #724be1); box-shadow: 0 14px 32px rgba(74,75,201,.25); }
.accept-panel h2 { margin: 2px 0 8px; font-size: 28px; }
.accept-panel > p { max-width: 570px; margin: 0 auto 25px; font-size: 13px; }
.accept-code-form { max-width: 540px; margin: 0 auto; text-align: left; }
.accept-code-form label { display: block; margin-bottom: 8px; color: #354258; font-size: 11px; font-weight: 700; }
.big-code-input { min-height: 68px; padding: 0 17px; display: flex; align-items: center; gap: 12px; border-radius: 16px; border: 1px solid #d7e0ed; background: #fafcff; color: #738199; }
.big-code-input:focus-within { border-color: #6681ef; box-shadow: 0 0 0 4px rgba(49,87,232,.1); }
.big-code-input input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: #162037; font-size: 27px; font-weight: 800; letter-spacing: .27em; text-align: center; }
.accept-code-form .button-row { margin-top: 12px; }
.camera-button { flex: 0 0 auto; }
.accept-summary { margin-top: 28px; padding: 22px; text-align: left; border-radius: 17px; background: #f9fbfe; border: 1px solid #dfe6f0; }
.accept-summary-header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.accept-summary-header h3 { margin: 0; font-size: 22px; }
.department-chip, .role-chip, .active-chip, .delivery-chip, .you-chip { display: inline-flex; align-items: center; min-height: 24px; padding: 4px 9px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.department-chip.lab, .role-chip.lab { color: #6440bd; background: #f0eaff; }
.department-chip.reception, .role-chip.reception { color: #3455c8; background: #edf2ff; }
.role-chip.admin { color: #b05d0a; background: #fff3dd; }
.summary-grid { margin: 18px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.summary-grid > div { padding: 12px; display: flex; flex-direction: column; gap: 4px; border-radius: 11px; background: #fff; border: 1px solid #e4e9f0; }
.summary-grid span { color: #8893a5; font-size: 9px; }
.summary-grid strong { color: #29354a; font-size: 11px; }
.accept-rules { padding: 32px 28px; border-radius: 20px; color: #fff; background: radial-gradient(circle at 85% 8%, rgba(113,87,239,.48), transparent 28%), linear-gradient(150deg,#121f39,#1a315b); box-shadow: var(--shadow); }
.accept-rules h3 { color: #fff; font-size: 23px; line-height: 1.25; }
.rule-item { margin-top: 22px; display: grid; grid-template-columns: 32px 1fr; gap: 11px; }
.rule-item > div { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.12); font-weight: 800; }
.rule-item p { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.rule-item strong { color: #fff; font-size: 11px; }
.rule-item span { color: rgba(255,255,255,.63); font-size: 10px; line-height: 1.5; }
.rule-security { margin-top: 27px; padding: 14px; display: flex; align-items: flex-start; gap: 9px; border-radius: 13px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.73); font-size: 10px; line-height: 1.55; }
.scan-page { max-width: 780px; margin: 0 auto; }
.scan-card { padding: 38px; text-align: center; }
.scan-visual { width: 82px; height: 82px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 24px; color: #3157e8; background: linear-gradient(135deg,#eaf0ff,#f0eaff); }
.scan-card h2 { margin: 2px 0 8px; font-size: 29px; }
.scan-card > p { max-width: 580px; margin: 0 auto 22px; font-size: 13px; }
.scan-button { min-width: 240px; }
.divider { margin: 25px 0; display: flex; align-items: center; gap: 12px; color: #98a2b2; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.divider::before, .divider::after { content: ''; height: 1px; flex: 1; background: #e3e8ef; }
.scan-manual-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

/* Scanner modal */
.scanner-video-wrap { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 16px; background: #101827; }
.scanner-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame { position: absolute; inset: 50% auto auto 50%; width: 62%; height: 50%; transform: translate(-50%,-50%); border: 2px solid #77a0ff; border-radius: 17px; display: grid; place-items: center; color: rgba(255,255,255,.8); box-shadow: 0 0 0 9999px rgba(5,10,20,.35); }
.scanner-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 25px; color: #c8d1df; background: #101827; text-align: center; font-size: 12px; line-height: 1.55; }
.manual-code-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

.scanner-modal { place-self: start center; margin-top: clamp(92px, 12vh, 138px); transform: none; }
.scanner-modal .modal-body { padding-top: 18px; }
.scanner-shell { display: grid; gap: 14px; }

/* Users */
.users-grid { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 22px; align-items: start; }
.user-form-card { position: sticky; top: 108px; }
.user-list { padding: 0 24px 24px; }
.user-row { min-height: 75px; padding: 12px 0; display: grid; grid-template-columns: 40px minmax(170px,1.2fr) 110px minmax(120px,.7fr) 75px 75px; align-items: center; gap: 12px; border-bottom: 1px solid #edf1f5; }
.user-row:last-child { border-bottom: 0; }
.user-row.disabled { opacity: .58; }
.user-row-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.user-row-copy strong { display: flex; align-items: center; gap: 7px; color: #263249; font-size: 11px; }
.user-row-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8490a4; font-size: 9px; }
.you-chip { color: #3157d4 !important; background: #edf2ff; }
.user-last-login { display: flex; flex-direction: column; gap: 3px; }
.user-last-login span { color: #8a95a7; font-size: 8px; text-transform: uppercase; }
.user-last-login strong { color: #4e5b71; font-size: 9px; }
.active-chip.active { color: #087b58; background: #eafaf3; }
.active-chip.inactive { color: #bd3049; background: #fff0f2; }

/* Audit and notifications */
.audit-search { margin: 0 26px 20px; }
.audit-list, .notification-list { padding: 0 26px 25px; }
.audit-item, .notification-item { display: grid; grid-template-columns: 39px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #edf1f5; }
.audit-item:last-child, .notification-item:last-child { border-bottom: 0; }
.audit-icon, .notification-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; color: #4d5ad0; }
.audit-copy, .notification-copy { min-width: 0; }
.audit-title, .notification-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.audit-title strong, .notification-title strong { color: #29354b; font-size: 11px; line-height: 1.55; }
.audit-title time, .notification-title time { flex: 0 0 auto; color: #8b96a7; font-size: 9px; }
.audit-meta, .notification-meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 8px; }
.audit-meta span, .notification-meta span, .notification-meta a { color: #78859a; font-size: 9px; }
.notification-item.sent .notification-icon { color: #087b58; background: #eafaf3; }
.notification-item.failed .notification-icon { color: #c42d49; background: #fff0f2; }
.notification-item.disabled .notification-icon { color: #738096; background: #f0f3f7; }
.notification-copy p { margin: 6px 0 0; white-space: pre-line; color: #68758a; font-size: 10px; line-height: 1.55; }
.delivery-chip.sent { color: #087b58; background: #eafaf3; }
.delivery-chip.failed { color: #c42d49; background: #fff0f2; }
.delivery-chip.disabled { color: #657287; background: #eef1f5; }

/* Modal and toast */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 22px; display: grid; place-items: center; background: rgba(7,14,27,.56); backdrop-filter: blur(6px); }
.modal { width: min(590px, 100%); max-height: calc(100vh - 44px); overflow: auto; background: #fff; border-radius: 21px; box-shadow: 0 28px 90px rgba(4,10,25,.3); }
.modal-small { width: min(410px,100%); }
.modal-large { width: min(850px,100%); }
.modal-header { min-height: 66px; padding: 14px 18px 14px 23px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #e8edf3; }
.modal-header h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 22px; }
.toast-stack { position: fixed; z-index: 200; right: 22px; bottom: 22px; width: min(390px, calc(100vw - 44px)); display: flex; flex-direction: column; gap: 10px; }
.toast { min-height: 54px; padding: 11px 11px 11px 14px; display: grid; grid-template-columns: 22px 1fr 30px; align-items: center; gap: 9px; border-radius: 14px; color: #344157; background: rgba(255,255,255,.97); border: 1px solid #dfe6ef; box-shadow: 0 18px 50px rgba(15,23,42,.17); font-size: 12px; }
.toast-success > svg { color: #0a9367; }
.toast-error > svg { color: #d13a54; }
.toast-info > svg { color: #3157d8; }

.empty-state { min-height: 260px; padding: 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-icon { width: 56px; height: 56px; margin-bottom: 14px; display: grid; place-items: center; border-radius: 17px; background: #eef2f7; color: #6d7a90; }
.empty-state h3 { margin: 0 0 6px; font-size: 17px; }
.empty-state p { max-width: 430px; margin: 0; font-size: 12px; }
.not-found { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; text-align: center; }
.not-found .brand-mark { width: 82px; }
.not-found h2 { margin: 20px 0 6px; }

@media (max-width: 1320px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .user-row { grid-template-columns: 40px minmax(150px,1fr) 100px 80px 70px; }
  .user-last-login { display: none; }
}

@media (max-width: 1080px) {
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .mobile-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
  .login-form-side { min-height: 100vh; }
  .form-page-grid, .accept-page-grid, .users-grid { grid-template-columns: 1fr; }
  .side-note-card, .user-form-card { position: static; }
  .detail-grid { grid-template-columns: 1fr; }
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .filter-bar .search-box { grid-column: 1 / -1; }
  .attention-item { grid-template-columns: 1.2fr 1fr .8fr; }
  .attention-time { display: none; }
}

@media (max-width: 840px) {
  .app-shell { display: block; }
  .sidebar { transform: translateX(-105%); transition: transform .2s ease; box-shadow: 24px 0 70px rgba(6,13,28,.3); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-close, .menu-button { display: grid; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 29; border: 0; background: rgba(5,10,20,.45); }
  .main-shell { width: 100%; }
  .topbar { padding: 13px 17px; min-height: 74px; }
  .topbar-role { display: none; }
  .page-content { padding: 18px 16px 35px; }
  .hero-panel { align-items: flex-start; flex-direction: column; }
  .hero-actions { width: 100%; }
  .hero-actions .button { flex: 1; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .journey-main-head { flex-direction: column; }
  .journey-bottom-strip { grid-template-columns: 1fr; }
  .journey-meta-list.grid { grid-template-columns: 1fr 1fr; }
  .status-stepper { overflow-x: auto; grid-template-columns: repeat(5, 220px); padding-bottom: 8px; }
  .detail-facts.two { grid-template-columns: 1fr; }
  .handover-grid { grid-template-columns: 1fr; }
  .handover-code-block { align-items: center; }
  .action-panel { align-items: flex-start; flex-direction: column; }
  .action-panel .button-row { width: 100%; }
  .action-panel .button { flex: 1; }
  .user-row { grid-template-columns: 40px 1fr auto auto; }
  .role-chip { display: none; }
  .user-row > .button, .user-row > span:last-child { grid-column: 4; }
}

@media (max-width: 600px) {
  .login-form-side { padding: 18px; }
  .login-card { padding: 27px 22px; border-radius: 21px; }
  .login-brand-stack { flex-direction: column; }
  .page-heading h1 { font-size: 17px; }
  .page-heading p { display: none; }
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-card { min-height: 90px; padding: 13px; }
  .metric-icon { width: 37px; height: 37px; }
  .metric-card strong { font-size: 21px; }
  .panel { border-radius: 17px; }
  .panel-header { padding: 20px 18px 16px; flex-direction: column; gap: 12px; }
  .panel-header .button { width: 100%; }
  .hero-panel { padding: 24px 20px; border-radius: 18px; }
  .hero-panel h2 { font-size: 23px; }
  .hero-actions { flex-direction: column; }
  .attention-item { grid-template-columns: 1fr; gap: 8px; padding: 14px 18px; }
  .attention-owner { display: none; }
  .filter-bar { padding: 0 18px 18px; grid-template-columns: 1fr; }
  .filter-bar .search-box { grid-column: auto; }
  .search-box .button { display: none; }
  .form-grid { padding: 3px 18px 20px; grid-template-columns: 1fr; }
  .form-field.full { grid-column: auto; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .button { width: 100%; }
  .detail-toolbar { align-items: stretch; flex-direction: column; }
  .detail-toolbar > .button, .detail-toolbar .button-row { width: 100%; }
  .detail-toolbar .button { flex: 1; }
  .detail-header-card { padding: 0; }
  .detail-journey-top { padding: 24px 18px 18px; flex-direction: column; }
  .detail-status-stack { width: 100%; align-items: flex-start; }
  .detail-journey-grid { padding: 0 14px 14px; }
  .journey-main-card { padding: 20px 16px; border-radius: 22px; }
  .journey-orb-only { padding: 4px 0 10px; }
  .journey-percent-orb { width: 136px; height: 136px; }
  .journey-main-badge { width: 100%; }
  .journey-meta-list.grid { grid-template-columns: 1fr; }
  .status-stepper { --node-size: 74px; --connector-gap: 6px; }
  .progress-node-shell, .progress-node-ring { width: var(--node-size); height: var(--node-size); }
  .progress-track-segment .segment.after {
    left: calc(50% + (var(--node-size) / 2) + var(--connector-gap));
    right: calc(-50% + ((var(--node-size) / 2) - var(--step-gap) + var(--connector-gap)));
  }
  .progress-copy { max-width: 150px; }
  .progress-copy strong { font-size: 15px; }
  .detail-title-row { flex-direction: column; margin-bottom: 22px; }
  .detail-title-row h2 { font-size: 23px; }
  .custody-owner-card, .detail-facts, .info-list { margin-left: 18px; margin-right: 18px; padding-left: 0; padding-right: 0; }
  .info-list > div { grid-template-columns: 1fr; gap: 6px; }
  .handover-card { padding: 20px 18px; }
  .big-code { font-size: 33px; }
  .event-timeline { padding: 0 18px 20px; }
  .event-title-row { flex-direction: column; gap: 5px; }
  .accept-panel { padding: 25px 18px; }
  .accept-code-form .button-row { flex-direction: column; }
  .camera-button { width: 100%; }
  .summary-grid { grid-template-columns: 1fr; }
  .accept-rules { padding: 27px 22px; }
  .scan-card { padding: 28px 18px; }
  .scan-manual-form, .manual-code-row { grid-template-columns: 1fr; }
  .scan-manual-form .button, .manual-code-row .button { width: 100%; }
  .user-list, .audit-list, .notification-list { padding-left: 18px; padding-right: 18px; }
  .user-row { grid-template-columns: 38px 1fr auto; }
  .active-chip { grid-column: 3; }
  .user-row > .button, .user-row > span:last-child { grid-column: 1 / -1; width: 100%; }
  .audit-title, .notification-title { flex-direction: column; gap: 5px; }
  .modal-backdrop { padding: 10px; }
  .modal { max-height: calc(100vh - 20px); border-radius: 17px; }
  .modal-body { padding: 17px; }
  .scanner-modal { margin-top: 16px; }
  .toast-stack { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}

/* Prototype-only login helpers */
.demo-account-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0 4px; }
.demo-account { min-height: 66px; border: 1px solid #dde5f0; border-radius: 13px; background: #f8faff; color: #536078; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-size: 11px; font-weight: 800; transition: .16s ease; }
.demo-account:hover { border-color: #9cafef; background: #f2f5ff; transform: translateY(-1px); }
.demo-account.selected { color: #3157e8; border-color: #7f96ef; background: #eef2ff; box-shadow: 0 0 0 3px rgba(49, 87, 232, .08); }
.text-button { padding: 0; border: 0; background: transparent; color: #3157e8; font-weight: 700; text-decoration: underline; }

@media (max-width: 520px) {
  .demo-account-grid { grid-template-columns: 1fr; }
  .demo-account { min-height: 48px; flex-direction: row; }
}

/* Brand theme system and branded UI refinements */
:root,
html[data-brand-theme='ocean'],
body[data-brand-theme='ocean'] {
  --page-bg: #f4f7fb;
  --surface: #ffffff;
  --surface-soft: #f8fbfd;
  --border: #d6e2ec;
  --muted: #607184;
  --navy: #003049;
  --navy-2: #496c89;
  --navy-3: #0a3d5a;
  --primary: #1a95d3;
  --primary-dark: #0d6f9f;
  --primary-strong: #5149dd;
  --sidebar-active-start: rgba(65,98,230,.95);
  --sidebar-active-end: rgba(94,69,215,.95);
  --hero-gradient: linear-gradient(125deg, #234bd0, #473bb9 62%, #5836af);
  --hero-shadow: 0 19px 48px rgba(55, 62, 166, .22);
  --hero-overlay: linear-gradient(118deg, rgba(0, 32, 51, .86), rgba(0, 48, 73, .62));
  --hero-glow: rgba(147,126,255,.45);
  --sidebar-bg: linear-gradient(180deg, #003049 0%, #0a3d5a 58%, #496c89 100%);
  --sidebar-text: #ffffff;
  --sidebar-muted: #b4c0cf;
  --sidebar-subtle: #93a2bb;
  --topbar-bg: rgba(247,249,253,.88);
  --topbar-border: rgba(218,225,236,.85);
  --theme-pill-bg: #ffffff;
  --theme-pill-border: #dbe3ef;
  --theme-pill-text: #334055;
  --theme-track: #e4e9f2;
  --theme-thumb: linear-gradient(135deg, #1a95d3, #5149dd);
  --notice-info-bg: #edf5ff;
  --notice-info-border: #d6e8ff;
}

html[data-brand-theme='burgundy'],
body[data-brand-theme='burgundy'] {
  --page-bg: #f5efec;
  --surface: #fffdfc;
  --surface-soft: #fbf5f3;
  --border: #ead8d5;
  --muted: #756064;
  --navy: #80141d;
  --navy-2: #b17479;
  --navy-3: #5e1017;
  --primary: #80141d;
  --primary-dark: #611018;
  --primary-strong: #b73644;
  --sidebar-active-start: rgba(128,20,29,.96);
  --sidebar-active-end: rgba(173,58,70,.96);
  --hero-gradient: linear-gradient(125deg, #80141d, #9b2230 58%, #bf5965);
  --hero-shadow: 0 19px 48px rgba(110, 28, 39, .22);
  --hero-overlay: linear-gradient(118deg, rgba(61, 10, 17, .84), rgba(89, 16, 24, .62));
  --hero-glow: rgba(255,223,226,.16);
  --sidebar-bg: linear-gradient(180deg, #4b0d16 0%, #6a1420 58%, #9d5f67 100%);
  --sidebar-text: #fff7f6;
  --sidebar-muted: #f0dada;
  --sidebar-subtle: #ddc1c3;
  --topbar-bg: rgba(251,246,244,.9);
  --topbar-border: rgba(233,216,211,.9);
  --theme-pill-bg: #fffdfc;
  --theme-pill-border: #ead8d5;
  --theme-pill-text: #5b2c33;
  --theme-track: #ecd5d9;
  --theme-thumb: linear-gradient(135deg, #80141d, #c04653);
  --notice-info-bg: #faecef;
  --notice-info-border: #f0d5db;
}

html, body { background: var(--page-bg); }
body { color: #172033; }
.panel { background: var(--surface); border-color: var(--border); }
.button.primary { background: linear-gradient(135deg, var(--primary), var(--primary-strong)); box-shadow: 0 9px 23px color-mix(in srgb, var(--primary) 28%, transparent); }
.button.primary:hover:not(:disabled) { box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 34%, transparent); }
.button.light { color: var(--primary-dark); }
.button.secondary { border-color: var(--border); background: var(--surface); }
.button.secondary:hover:not(:disabled) { background: var(--surface-soft); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.input-shell:focus-within { border-color: color-mix(in srgb, var(--primary) 55%, white); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent); }
.login-form-side { background: linear-gradient(180deg, color-mix(in srgb, var(--page-bg) 92%, white), var(--surface-soft)); }
.login-side-glow { background: radial-gradient(circle at center, color-mix(in srgb, var(--primary) 12%, white), transparent 72%); }
.login-card { background: rgba(255,255,255,.86); border-color: color-mix(in srgb, var(--border) 82%, white); }
html[data-brand-theme='burgundy'] .login-card,
body[data-brand-theme='burgundy'] .login-card { background: rgba(255,251,250,.92); }
.login-brand-stack.refined { grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 28px; }
.login-brand-stack.refined .brand-logo { width: 190px; }
.mobile-login-brand strong { color: #172033; }

.sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}
.sidebar-brand {
  min-height: 164px;
  padding: 26px 20px 24px;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  gap: 16px;
}
.sidebar-logo {
  width: 180px;
  max-width: calc(100% - 8px);
}
.sidebar-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidebar-brand-copy strong {
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.02em;
}
.sidebar-brand-copy span {
  color: var(--sidebar-muted);
  font-size: 13px;
}
.sidebar-close {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
}
.nav-section-label { color: var(--sidebar-subtle); }
.nav-link { color: var(--sidebar-muted); }
.nav-link.active { background: linear-gradient(135deg, var(--sidebar-active-start), var(--sidebar-active-end)); box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 30%, transparent); }
.sidebar-profile {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.08);
}
.avatar {
  overflow: hidden;
  background: linear-gradient(135deg, #e8eefc, #f4eefb);
  color: #3d4dc2;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-copy span { color: var(--sidebar-muted); }
.topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--topbar-border);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.theme-toggle {
  min-height: 44px;
  padding: 7px 10px 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--theme-pill-border);
  background: var(--theme-pill-bg);
  color: var(--theme-pill-text);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.theme-toggle-copy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.theme-switch {
  width: 52px;
  height: 28px;
  padding: 3px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: var(--theme-track);
}
.theme-switch-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--theme-thumb);
  box-shadow: 0 5px 10px rgba(17, 24, 39, .2);
  transition: transform .18s ease;
}
.theme-switch.on .theme-switch-thumb { transform: translateX(24px); }
.topbar-role { background: var(--surface); border-color: var(--border); }
.page-content { max-width: 100%; }

.hero-panel {
  background: radial-gradient(circle at 92% 10%, var(--hero-glow), transparent 26%), var(--hero-gradient);
  box-shadow: var(--hero-shadow);
}
.hero-panel.with-video {
  position: relative;
  overflow: hidden;
  min-height: 210px;
}
.hero-video-wrap {
  position: absolute;
  inset: 0;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hero-content > div:first-child { min-width: 0; }
.hero-content p { max-width: 720px; }

.user-row {
  grid-template-columns: 40px minmax(170px,1.2fr) 130px minmax(130px,.8fr) 90px minmax(270px,1fr);
  gap: 14px;
}
.user-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.hidden-file-input { display: none; }
.self-account-note {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}
.full-width-note {
  grid-column: 1 / -1;
  background: var(--notice-info-bg);
  border: 1px solid var(--notice-info-border);
}
.full-width-note strong { display: block; margin-bottom: 4px; color: #20324f; }
.full-width-note span { color: var(--muted); font-size: 12px; }

.notification-item.configured .notification-icon,
.delivery-chip.configured {
  color: var(--primary-dark);
  background: color-mix(in srgb, var(--primary) 10%, white);
}
.delivery-chip.configured {
  padding: 4px 9px;
  border-radius: 999px;
}

@media (max-width: 1100px) {
  .user-row {
    grid-template-columns: 40px minmax(150px,1fr) 110px 80px 1fr;
  }
  .user-last-login {
    display: none;
  }
}

@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
  }
  .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }
  .login-brand-stack.refined {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .login-brand-stack.refined .brand-logo {
    width: 160px;
  }
  .user-row {
    grid-template-columns: 40px 1fr;
  }
  .user-row .role-chip,
  .user-row .active-chip,
  .user-row .user-last-login,
  .user-row .user-actions {
    grid-column: 1 / -1;
  }
  .user-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .sidebar-brand {
    min-height: 142px;
    padding: 24px 18px 20px;
  }
  .sidebar-logo {
    width: 155px;
  }
  .sidebar-brand-copy strong {
    font-size: 20px;
  }
  .hero-content {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .hero-actions .button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .theme-toggle {
    width: 100%;
    justify-content: space-between;
  }
  .login-brand-stack.refined .brand-logo {
    width: 144px;
  }
  .sidebar-brand-copy strong {
    font-size: 18px;
  }
}


.avatar span { line-height: 1; }
.avatar.has-photo { background: #fff; }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-logo { width: 146px; }
.sidebar-brand-copy { display: flex; flex-direction: column; gap: 4px; max-width: 180px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.theme-toggle {
  min-height: 48px;
  padding: 8px 13px 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.78);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #324159;
  box-shadow: 0 10px 26px rgba(0,48,73,.05);
}
.theme-toggle:hover { border-color: rgba(var(--primary-rgb), .35); }
.theme-toggle strong { display: block; font-size: 12px; line-height: 1.2; }
.theme-toggle small { display: block; color: #73829a; font-size: 10px; margin-top: 2px; }
.theme-toggle-indicator {
  width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  background: var(--brand-gradient);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), .22);
}
.dashboard-hero.with-video { position: relative; overflow: hidden; min-height: 210px; }
.hero-video-wrap, .hero-video, .hero-video-overlay { position: absolute; inset: 0; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-video-overlay {
  background:
    linear-gradient(90deg, rgba(0,0,0,.64) 0%, rgba(0,0,0,.48) 40%, rgba(0,0,0,.42) 100%),
    linear-gradient(135deg, rgba(var(--primary-rgb), .32), rgba(0,48,73,.24));
}
.hero-content { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.hero-content h2 { max-width: 800px; }
.login-brand-stack.refined { align-items: center; margin-bottom: 18px; }
.login-brand-stack.refined .brand-logo { width: 152px; }
.quick-access-head { margin-top: 2px; margin-bottom: 10px; }
.quick-access-head p { margin: 0; font-size: 12px; }
.login-card .notice { margin-top: 12px; }
.user-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.role-chip-inline { justify-self: start; }
.avatar-upload-field { margin-bottom: 4px; }
.avatar-upload-box {
  min-height: 120px;
  padding: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  border: 1px dashed #c5d3df;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(247,251,253,.92));
}
.avatar-upload-copy strong { display: block; margin-bottom: 5px; color: #21314a; font-size: 13px; }
.avatar-upload-copy small { display: block; color: #78869a; font-size: 11px; line-height: 1.6; }
.theme-toggle:focus-visible,
.demo-account:focus-visible,
.nav-link:focus-visible,
.button:focus-visible,
.icon-button:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .18); outline-offset: 2px; }
.user-row { grid-template-columns: 44px minmax(170px,1.2fr) 120px minmax(140px,.8fr) 90px minmax(250px,1fr); }
html[data-brand-theme='burgundy'] .login-visual,
body[data-brand-theme='burgundy'] .login-visual {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.08), transparent 30%),
    radial-gradient(circle at 92% 82%, rgba(255,255,255,.08), transparent 28%),
    linear-gradient(145deg, #430e17 0%, #68121f 56%, #80141d 100%);
}
html[data-brand-theme='burgundy'] .login-form-side,
body[data-brand-theme='burgundy'] .login-form-side {
  background:
    radial-gradient(circle at 15% 12%, rgba(128,20,29,.12), transparent 22%),
    radial-gradient(circle at 100% 0%, rgba(169,49,61,.12), transparent 26%),
    linear-gradient(180deg, #fbf7f8, #f7eff1);
}
html[data-brand-theme='burgundy'] .side-note-card,
body[data-brand-theme='burgundy'] .side-note-card,
html[data-brand-theme='burgundy'] .detail-journey-card,
body[data-brand-theme='burgundy'] .detail-journey-card,
html[data-brand-theme='burgundy'] .journey-summary-card.compact,
body[data-brand-theme='burgundy'] .journey-summary-card.compact {
  background: linear-gradient(135deg, #4a0f17 0%, #80141d 100%);
}
html[data-brand-theme='burgundy'] .detail-journey-top,
body[data-brand-theme='burgundy'] .detail-journey-top {
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.10), transparent 22%),
    linear-gradient(135deg, #4a0f17 0%, #80141d 62%, #96202c 100%);
}
html[data-brand-theme='burgundy'] .journey-percent-orb,
body[data-brand-theme='burgundy'] .journey-percent-orb {
  background: conic-gradient(from 180deg, #d7a4ac, #a9313d, #f2d8dc, #d7a4ac);
  box-shadow: 0 18px 42px rgba(74, 15, 23, .18), inset 0 0 0 1px rgba(255,255,255,.08);
}
html[data-brand-theme='burgundy'] .journey-percent-orb-inner,
body[data-brand-theme='burgundy'] .journey-percent-orb-inner {
  background: linear-gradient(180deg, #5f121d, #420c14);
}
html[data-brand-theme='burgundy'] .progress-step.complete .progress-node-ring,
body[data-brand-theme='burgundy'] .progress-step.complete .progress-node-ring,
html[data-brand-theme='burgundy'] .progress-step.active .progress-node-ring,
body[data-brand-theme='burgundy'] .progress-step.active .progress-node-ring {
  background: linear-gradient(135deg, #80141d, #a9313d);
  box-shadow: 0 16px 28px rgba(128,20,29,.2);
}
html[data-brand-theme='burgundy'] .progress-step.active .progress-node-ring,
body[data-brand-theme='burgundy'] .progress-step.active .progress-node-ring {
  box-shadow: 0 0 0 9px rgba(169,49,61,.10), 0 16px 28px rgba(128,20,29,.2);
}
@media (max-width: 1200px) {
  .user-row { grid-template-columns: 44px minmax(160px,1fr) 110px 1fr; }
  .user-row-actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 920px) {
  .topbar-actions { gap: 8px; }
  .theme-toggle small { display: none; }
  .hero-content { flex-direction: column; align-items: flex-start; }
  .avatar-upload-box { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 760px) {
  .sidebar-brand { min-height: 132px; }
  .topbar-actions { margin-left: 0; }
  .theme-toggle strong { font-size: 11px; }
}

/* Refinements: intro, motion, actions, and clearer contrast */
.route-stage {
  animation: routeFadeUp .38s ease both;
}

@keyframes routeFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel,
.metric-card,
.step-card,
.user-row,
.attention-item,
.notification-item,
.theme-toggle,
.nav-link,
.button,
.icon-button {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, opacity .22s ease;
}

.panel:hover,
.metric-card:hover,
.user-row:hover,
.attention-item:hover,
.notification-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .08);
}

.journey-main-badge {
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, white 12%), color-mix(in srgb, var(--primary-dark) 88%, black 5%));
  box-shadow: 0 20px 38px rgba(var(--primary-rgb), .22);
}

.journey-main-badge span,
.journey-main-badge strong {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.12);
}

.action-panel.prominent {
  border: 1px solid rgba(var(--primary-rgb), .18);
  background:
    radial-gradient(circle at right top, rgba(var(--primary-rgb), .12), transparent 28%),
    linear-gradient(135deg, #fff, #f8fbff 58%, #f5f9fd);
  box-shadow: 0 18px 42px rgba(var(--primary-rgb), .1);
}

.prominent-action-row {
  margin-left: auto;
  justify-content: flex-end;
}

.prominent-action-row .button.large {
  min-width: 290px;
  min-height: 56px;
  padding-inline: 22px;
  font-size: 15px;
}

.user-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.hidden-file-input {
  display: none;
}

.self-account-note {
  align-self: center;
  color: #6f7c91;
  font-size: 12px;
  font-weight: 700;
}

.full-width-note {
  width: 100%;
}

.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: introFadeOut .36s ease 1.45s forwards;
}

.intro-splash-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(circle at 82% 78%, rgba(255,255,255,.10), transparent 24%),
    linear-gradient(135deg, rgba(0,48,73,.94), rgba(var(--primary-rgb), .88));
  backdrop-filter: blur(8px);
}

.intro-splash-card {
  position: relative;
  width: min(92vw, 520px);
  padding: 34px 30px 28px;
  border-radius: 28px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 34px 85px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  color: #fff;
  animation: introCardIn .7s cubic-bezier(.2,.8,.2,1) both;
}

.intro-spark {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.intro-splash-logo {
  width: 180px;
  max-width: 72%;
  display: block;
}

.intro-splash-copy span {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: rgba(255,255,255,.74);
}

.intro-splash-copy strong {
  display: block;
  margin-bottom: 8px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.intro-splash-copy small {
  display: block;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.82);
}

.intro-loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.intro-loader span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: .34;
  animation: introPulse 1s ease-in-out infinite;
}

.intro-loader span:nth-child(2) { animation-delay: .14s; }
.intro-loader span:nth-child(3) { animation-delay: .28s; }

@keyframes introPulse {
  0%, 100% { transform: translateY(0); opacity: .3; }
  50% { transform: translateY(-5px); opacity: 1; }
}

@keyframes introCardIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes introFadeOut {
  to { opacity: 0; visibility: hidden; }
}

@media (max-width: 920px) {
  .prominent-action-row {
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
  }

  .prominent-action-row .button.large {
    width: 100%;
    min-width: 0;
  }

  .user-actions {
    justify-content: flex-start;
  }
}



/* Scan page refresh */
.scan-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.scan-panel {
  padding: 28px 30px;
  overflow: hidden;
}

.scan-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: var(--primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, white), color-mix(in srgb, var(--primary) 8%, #f7fbff));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  margin-bottom: 14px;
}

.scan-panel h2 {
  margin: 8px 0 10px;
  font-size: clamp(30px, 4vw, 42px);
  letter-spacing: -.045em;
}

.scan-panel > p {
  max-width: 980px;
  margin: 0 0 28px;
  color: #6a768a;
  font-size: 16px;
  line-height: 1.65;
}

.scan-form.refined {
  display: grid;
  gap: 14px;
}

.scan-form.refined label {
  color: #344157;
  font-size: 14px;
  font-weight: 700;
}

.scan-form.refined .input-shell.large {
  min-height: 72px;
  padding-inline: 18px;
  border-radius: 18px;
}

.scan-form.refined .input-shell.large input {
  font-size: 16px;
}

.scan-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.scan-form-actions .button {
  min-width: 180px;
}

.action-panel-top {
  position: sticky;
  top: 88px;
  z-index: 8;
}

/* Full-screen branded intro */
.intro-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
  animation: introFadeOut .44s ease 2.45s forwards;
}

.intro-splash-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  filter: saturate(1.05) contrast(1.02);
}

.intro-splash-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.12), transparent 22%),
    radial-gradient(circle at 82% 74%, rgba(255,255,255,.10), transparent 22%),
    linear-gradient(135deg, rgba(3, 19, 31, .78), rgba(5, 34, 52, .82), rgba(0, 0, 0, .56));
}

.intro-splash-content {
  position: relative;
  width: min(92vw, 860px);
  min-height: min(72vh, 620px);
  padding: clamp(34px, 5vw, 58px);
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 18px;
  color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 120px rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  animation: introCardIn .9s cubic-bezier(.2,.8,.2,1) both;
}

.intro-spark {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}

.intro-splash-logo {
  width: clamp(170px, 28vw, 300px);
  max-width: 76%;
  display: block;
}

.intro-splash-copy {
  max-width: 620px;
}

.intro-splash-copy span {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  color: rgba(255,255,255,.74);
}

.intro-splash-copy strong {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(34px, 7vw, 78px);
  line-height: .98;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.intro-splash-copy small {
  display: block;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.8;
  color: rgba(255,255,255,.84);
}

@media (max-width: 760px) {
  .scan-panel {
    padding: 22px 18px;
  }

  .scan-panel h2 {
    font-size: 24px;
  }

  .scan-panel > p {
    font-size: 14px;
  }

  .scan-form-actions {
    flex-direction: column;
  }

  .scan-form-actions .button {
    width: 100%;
  }

  .intro-splash-content {
    min-height: 100vh;
    width: 100vw;
    border-radius: 0;
    padding: 26px 22px 42px;
    justify-content: flex-end;
  }

  .intro-splash-copy strong {
    font-size: 44px;
    line-height: 1.02;
  }
}


/* Requested refinements: burgundy contrast, inline handover, longer centered intro, and mobile fit */
html[data-brand-theme='burgundy'] .journey-main-card,
body[data-brand-theme='burgundy'] .journey-main-card {
  background: linear-gradient(180deg, #ffffff, #fcf7f8 100%);
  border-color: #ead8dc;
  box-shadow: 0 22px 48px rgba(74, 15, 23, .08);
}

html[data-brand-theme='burgundy'] .journey-main-head h3,
body[data-brand-theme='burgundy'] .journey-main-head h3,
html[data-brand-theme='burgundy'] .journey-meta-item strong,
body[data-brand-theme='burgundy'] .journey-meta-item strong,
html[data-brand-theme='burgundy'] .progress-copy strong,
body[data-brand-theme='burgundy'] .progress-copy strong,
html[data-brand-theme='burgundy'] .detail-facts strong,
body[data-brand-theme='burgundy'] .detail-facts strong,
html[data-brand-theme='burgundy'] .info-list dd,
body[data-brand-theme='burgundy'] .info-list dd,
html[data-brand-theme='burgundy'] .custody-owner-card strong,
body[data-brand-theme='burgundy'] .custody-owner-card strong {
  color: #3d1820;
}

html[data-brand-theme='burgundy'] .journey-main-head p,
body[data-brand-theme='burgundy'] .journey-main-head p,
html[data-brand-theme='burgundy'] .journey-meta-item span,
body[data-brand-theme='burgundy'] .journey-meta-item span,
html[data-brand-theme='burgundy'] .progress-copy small,
body[data-brand-theme='burgundy'] .progress-copy small,
html[data-brand-theme='burgundy'] .detail-facts span,
body[data-brand-theme='burgundy'] .detail-facts span,
html[data-brand-theme='burgundy'] .info-list dt,
body[data-brand-theme='burgundy'] .info-list dt,
html[data-brand-theme='burgundy'] .custody-owner-card span,
body[data-brand-theme='burgundy'] .custody-owner-card span,
html[data-brand-theme='burgundy'] .custody-owner-card small,
body[data-brand-theme='burgundy'] .custody-owner-card small,
html[data-brand-theme='burgundy'] .journey-progressbar-labels,
body[data-brand-theme='burgundy'] .journey-progressbar-labels,
html[data-brand-theme='burgundy'] .progress-step.upcoming .progress-copy strong,
body[data-brand-theme='burgundy'] .progress-step.upcoming .progress-copy strong {
  color: #7a5d66;
}

html[data-brand-theme='burgundy'] .journey-main-badge,
body[data-brand-theme='burgundy'] .journey-main-badge,
html[data-brand-theme='burgundy'] .journey-progressbar-fill,
body[data-brand-theme='burgundy'] .journey-progressbar-fill,
html[data-brand-theme='burgundy'] .progress-step.complete .progress-track-segment .segment.after,
body[data-brand-theme='burgundy'] .progress-step.complete .progress-track-segment .segment.after {
  background: linear-gradient(135deg, #7a1320, #a9313d 78%, #d7a4ac 100%);
  box-shadow: 0 18px 34px rgba(128,20,29,.18);
}

html[data-brand-theme='burgundy'] .journey-meta-item,
body[data-brand-theme='burgundy'] .journey-meta-item,
html[data-brand-theme='burgundy'] .detail-facts > div,
body[data-brand-theme='burgundy'] .detail-facts > div,
html[data-brand-theme='burgundy'] .custody-owner-card,
body[data-brand-theme='burgundy'] .custody-owner-card {
  background: #fff;
  border-color: #ead8dc;
}

html[data-brand-theme='burgundy'] .journey-meta-item svg,
body[data-brand-theme='burgundy'] .journey-meta-item svg,
html[data-brand-theme='burgundy'] .detail-facts svg,
body[data-brand-theme='burgundy'] .detail-facts svg,
html[data-brand-theme='burgundy'] .event-dot,
body[data-brand-theme='burgundy'] .event-dot {
  color: #a9313d;
}

html[data-brand-theme='burgundy'] .event-dot,
body[data-brand-theme='burgundy'] .event-dot {
  background: #fdf2f4;
  border-color: #edcfd6;
}

html[data-brand-theme='burgundy'] .step.active .step-number,
body[data-brand-theme='burgundy'] .step.active .step-number,
html[data-brand-theme='burgundy'] .step.complete .step-number,
body[data-brand-theme='burgundy'] .step.complete .step-number {
  background: #fbeef0;
  border-color: #efcfd6;
  color: #8f2230;
}

.handover-live-slot {
  align-items: stretch;
}

.handover-inline-shell {
  width: 100%;
  display: grid;
  gap: 18px;
  animation: handoverInlineIn .28s ease both;
}

.handover-inline-head h3 {
  margin: 4px 0 6px;
}

.handover-inline-head p {
  margin: 0;
}

.handover-card.compact {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.handover-card.compact .handover-heading {
  display: none;
}

.handover-card.compact .handover-grid {
  margin-top: 0;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.handover-card.compact .qr-image {
  width: 180px;
  height: 180px;
}

.handover-card.compact .big-code {
  font-size: clamp(30px, 4vw, 48px);
}

.handover-card.compact .handover-footer {
  margin-top: 14px;
  padding-top: 14px;
}

@keyframes handoverInlineIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mobile-login-brand {
  display: none !important;
}

.intro-splash {
  animation: introFadeOut .5s ease 3.9s forwards;
}

.intro-splash-content {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 20px;
}

.intro-splash-copy {
  max-width: 700px;
  margin: 0 auto;
}

.intro-splash-copy strong {
  font-size: clamp(30px, 5vw, 68px);
}

@media (max-width: 900px) {
  .handover-card.compact .handover-grid {
    grid-template-columns: 1fr;
  }

  .handover-card.compact .handover-code-block {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .intro-splash-content {
    width: 100vw;
    min-height: 100vh;
    border-radius: 0;
    padding: 30px 22px 46px;
  }

  .intro-splash-copy strong {
    font-size: 40px;
  }
}

@media (max-width: 600px) {
  .accept-page-grid {
    max-width: 100%;
    gap: 14px;
  }

  .accept-panel {
    padding: 22px 16px;
  }

  .accept-panel h2 {
    font-size: 24px;
  }

  .accept-panel > p {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.65;
  }

  .accept-code-form {
    max-width: 100%;
  }

  .accept-code-form label {
    font-size: 12px;
  }

  .big-code-input {
    min-height: 62px;
    padding: 0 12px;
    gap: 9px;
  }

  .big-code-input input {
    font-size: 24px;
    letter-spacing: .18em;
  }

  .accept-summary {
    margin-top: 22px;
    padding: 18px 16px;
  }

  .accept-summary-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .accept-summary-header h3 {
    font-size: 20px;
  }

  .accept-rules {
    padding: 22px 18px;
  }

  .rule-item {
    margin-top: 18px;
  }

  .action-panel-top {
    top: 76px;
  }
}


/* Inline receive action in the sticky job-card action area */
.receive-action-shell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  animation: receiveActionIn .28s ease both;
}

.receive-action-copy {
  min-width: 0;
  max-width: 760px;
}

.receive-action-copy h3 {
  margin: 4px 0 6px;
}

.receive-action-copy p {
  margin: 0;
}

.receive-action-button {
  flex: 0 0 auto;
  min-width: 230px;
  min-height: 56px;
}

.inline-receive-form {
  flex: 0 1 650px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.inline-receive-input {
  min-height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  background: rgba(255,255,255,.94);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  color: var(--primary);
}

.inline-receive-input:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent);
}

.inline-receive-input input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #172033;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: .23em;
  text-align: center;
}

html[data-brand-theme='burgundy'] .inline-receive-input,
body[data-brand-theme='burgundy'] .inline-receive-input {
  background: #fffafa;
  border-color: #e5c9ce;
}

@keyframes receiveActionIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1100px) {
  .receive-action-shell {
    align-items: stretch;
    flex-direction: column;
  }

  .receive-action-button {
    width: 100%;
  }

  .inline-receive-form {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 720px) {
  .inline-receive-form {
    grid-template-columns: 1fr;
  }

  .inline-receive-form .button {
    width: 100%;
  }

  .inline-receive-input {
    min-height: 60px;
  }
}

/* Laboratory deadlines, priorities, and lifecycle timestamps */
.priority-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.priority-option {
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid #dbe3ee;
  border-radius: 14px;
  background: #fff;
  color: #4c5a70;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.priority-option:hover {
  transform: translateY(-1px);
  border-color: #aebfd0;
}

.priority-option.selected {
  border-color: rgba(var(--primary-rgb), .55);
  background: color-mix(in srgb, var(--primary) 6%, white);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .09);
}

.priority-option.urgent {
  color: #a32338;
}

.priority-option.urgent.selected {
  border-color: #e16f80;
  background: #fff4f6;
  box-shadow: 0 0 0 4px rgba(220,63,89,.09);
}

.priority-option > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.priority-option strong {
  color: #1d293d;
  font-size: 13px;
}

.priority-option small {
  color: #7e8b9e;
  font-size: 10px;
}

.priority-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.priority-dot.normal {
  background: #3fa47c;
  box-shadow: 0 0 0 5px #eaf8f2;
}

.tracking-job-table {
  min-width: 1160px;
  table-layout: fixed;
}
.tracking-job-table th:nth-child(1), .tracking-job-table td:nth-child(1) { width: 135px; }
.tracking-job-table th:nth-child(2), .tracking-job-table td:nth-child(2) { width: 150px; }
.tracking-job-table th:nth-child(3), .tracking-job-table td:nth-child(3) { width: 175px; }
.tracking-job-table th:nth-child(4), .tracking-job-table td:nth-child(4) { width: 230px; }
.tracking-job-table th:nth-child(5), .tracking-job-table td:nth-child(5) { width: 130px; }
.tracking-job-table th:nth-child(6), .tracking-job-table td:nth-child(6) { width: 145px; }
.tracking-job-table th:nth-child(7), .tracking-job-table td:nth-child(7) { width: 105px; }
.tracking-job-table th:nth-child(8), .tracking-job-table td:nth-child(8) { width: 135px; }
.tracking-job-table th:nth-child(9), .tracking-job-table td:nth-child(9) { width: 50px; }

.priority-badge {
  min-height: 25px;
  padding: 5px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
}

.priority-badge.normal {
  color: #087b59;
  background: #eafaf3;
}

.priority-badge.urgent {
  color: #b12039;
  background: #fff0f3;
  border: 1px solid #ffd1d9;
}

.priority-badge.overdue {
  color: #fff;
  background: linear-gradient(135deg, #b51531, #e24a61);
  box-shadow: 0 7px 18px rgba(199,35,61,.2);
}

.priority-badge.large {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 11px;
}

.deadline-cell {
  min-width: 165px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.deadline-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5e6c82;
  font-size: 10px;
  white-space: nowrap;
}

.deadline-cell.urgent .deadline-date {
  color: #a7293d;
  font-weight: 700;
}

.deadline-cell.overdue .deadline-date {
  color: #c41735;
}

.tracking-timeline-cell {
  min-width: 210px;
  display: grid;
  gap: 0;
  padding: 2px 0;
}

.tracking-timeline-item {
  position: relative;
  min-height: 36px;
  padding-left: 21px;
  display: flex;
  align-items: flex-start;
}

.tracking-timeline-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tracking-timeline-item span:not(.timeline-dot):not(.timeline-line) {
  color: #8793a5;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .065em;
}

.tracking-timeline-item strong {
  color: #3d4a5f !important;
  font-size: 9px !important;
  white-space: nowrap;
}

.timeline-dot {
  position: absolute;
  top: 3px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid #cbd6df;
  background: #fff;
  z-index: 1;
}

.tracking-timeline-item.completed .timeline-dot {
  border-color: var(--primary);
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 9%, transparent);
}

.timeline-line {
  position: absolute;
  top: 13px;
  bottom: -4px;
  left: 6px;
  width: 2px;
  background: #dfe7ed;
}

.tracking-timeline-item.completed .timeline-line {
  background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 25%, #dfe7ed));
}

.tracking-timeline-item:last-child .timeline-line { display: none; }
.tracking-timeline-item.pending strong { color: #a4adba !important; }

.muted-table-value {
  color: #99a4b5;
  font-size: 10px;
}

.data-table tbody tr.urgent-job-row {
  background: linear-gradient(90deg, rgba(255,244,246,.95), rgba(255,255,255,.4) 48%);
}

.data-table tbody tr.urgent-job-row:hover {
  background: #fff2f4;
}

.data-table tbody tr.overdue-job-row {
  box-shadow: inset 4px 0 0 #d52f4c;
}

.lab-deadline-banner {
  min-height: 94px;
  padding: 18px 22px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid #dbe5ee;
  background: linear-gradient(135deg, #f8fbfd, #ffffff);
  box-shadow: var(--shadow);
}

.lab-deadline-banner.urgent {
  border-color: #f4bac4;
  background:
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.9), transparent 25%),
    linear-gradient(135deg, #fff1f4, #fff9fa 58%, #ffffff);
  box-shadow: 0 18px 46px rgba(190,42,65,.12);
}

.lab-deadline-banner.overdue {
  border-color: #e37b8c;
  background:
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.75), transparent 22%),
    linear-gradient(135deg, #ffe7eb, #fff4f6 60%, #ffffff);
  animation: urgent-banner-pulse 2.4s ease-in-out infinite;
}

.lab-deadline-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, white);
}

.lab-deadline-banner.urgent .lab-deadline-icon,
.lab-deadline-banner.overdue .lab-deadline-icon {
  color: #fff;
  background: linear-gradient(135deg, #b61d39, #e04e65);
  box-shadow: 0 12px 26px rgba(190,42,65,.22);
}

.lab-deadline-copy h3 {
  margin: 1px 0 4px;
  font-size: 18px;
}

.lab-deadline-copy p {
  margin: 0;
  font-size: 12px;
}

@keyframes urgent-banner-pulse {
  0%, 100% { box-shadow: 0 18px 46px rgba(190,42,65,.10); }
  50% { box-shadow: 0 20px 54px rgba(190,42,65,.18); }
}

.urgent-lab-panel {
  border-color: #f0b6c0;
  overflow: hidden;
}

.urgent-text {
  color: #bf2440;
}

.urgent-count {
  color: #fff;
  background: linear-gradient(135deg, #b61d39, #e04e65);
}

.urgent-lab-list {
  border-top: 1px solid #f4d9de;
}

.urgent-lab-item {
  min-height: 78px;
  padding: 14px 24px;
  display: grid;
  grid-template-columns: 42px minmax(160px, 1fr) 140px minmax(190px, .9fr) auto;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  border-bottom: 1px solid #f4e1e5;
  background: linear-gradient(90deg, #fff8f9, #fff);
  transition: background .18s ease, transform .18s ease;
}

.urgent-lab-item:last-child {
  border-bottom: 0;
}

.urgent-lab-item:hover {
  background: #fff1f4;
}

.urgent-lab-item.overdue {
  box-shadow: inset 4px 0 0 #d52f4c;
}

.urgent-lab-mark {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #b61d39, #e04e65);
}

.urgent-lab-title,
.urgent-lab-deadline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.urgent-lab-title strong,
.urgent-lab-deadline strong {
  color: #263247;
  font-size: 12px;
}

.urgent-lab-title span,
.urgent-lab-deadline span {
  color: #7b879a;
  font-size: 10px;
}

.urgent-lab-deadline span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 1080px) {
  .urgent-lab-item {
    grid-template-columns: 42px minmax(150px, 1fr) 120px auto;
  }

  .urgent-lab-deadline {
    grid-column: 2 / 4;
  }
}

@media (max-width: 600px) {
  .priority-selector {
    grid-template-columns: 1fr;
  }

  .lab-deadline-banner {
    grid-template-columns: 44px 1fr;
    padding: 16px;
  }

  .lab-deadline-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
  }

  .lab-deadline-banner .priority-badge.large {
    grid-column: 1 / -1;
    width: 100%;
  }

  .urgent-lab-item {
    grid-template-columns: 38px 1fr auto;
    padding: 14px 16px;
  }

  .urgent-lab-mark {
    width: 38px;
    height: 38px;
  }

  .urgent-lab-item > .status-badge {
    grid-column: 2;
    justify-self: flex-start;
  }

  .urgent-lab-deadline {
    grid-column: 2 / -1;
  }
}


@media (max-width: 760px) {
  .table-drag-hint {
    justify-content: flex-start;
    padding-inline: 14px;
    font-size: 9px;
  }
  .draggable-table { cursor: auto; user-select: auto; -webkit-overflow-scrolling: touch; }
  .tracking-job-table { min-width: 1100px; }
}

/* Structured New / Service Job Card intake */
.intake-page-shell { max-width: 1280px; margin: 0 auto; }
.intake-panel { overflow: hidden; }
.intake-hero {
  padding: 27px 30px 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background:
    radial-gradient(circle at 92% 12%, rgba(var(--primary-rgb), .12), transparent 24%),
    linear-gradient(180deg, #ffffff, #f8fbfd);
  border-bottom: 1px solid #e8eef4;
}
.intake-hero h2 { margin: 2px 0 7px; display: flex; align-items: center; gap: 10px; font-size: 27px; }
.intake-hero p { margin: 0; max-width: 760px; font-size: 13px; }

.intake-stepper {
  padding: 16px 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  background: #fbfcfe;
  border-bottom: 1px solid #e8eef4;
}
.intake-step {
  position: relative;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #77859a;
  background: transparent;
  text-align: left;
}
.intake-step > span {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #8290a4;
  background: #eef2f6;
}
.intake-step > div { display: flex; flex-direction: column; gap: 2px; }
.intake-step small { font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.intake-step strong { font-size: 11px; color: #536078; }
.intake-step.active { border-color: rgba(var(--primary-rgb), .26); background: #fff; box-shadow: 0 7px 22px rgba(15,23,42,.055); }
.intake-step.active > span { color: #fff; background: var(--brand-gradient); }
.intake-step.active strong { color: #1f2b3f; }
.intake-step.complete { cursor: pointer; }
.intake-step.complete > span { color: #087c59; background: #e8f8f1; }
.intake-step:disabled { opacity: .72; cursor: default; }

.intake-step-content { padding: 24px; background: #f5f8fb; }
.intake-step-pane { display: grid; gap: 16px; animation: intake-pane-in .22s ease both; }
@keyframes intake-pane-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.job-type-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.job-type-option {
  min-height: 104px;
  padding: 18px;
  border: 1px solid #dbe4ed;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  color: #55647a;
  background: #fff;
  text-align: left;
  box-shadow: 0 8px 25px rgba(15,23,42,.04);
  transition: .18s ease;
}
.job-type-option:hover { transform: translateY(-2px); border-color: #aebfd0; }
.job-type-option.selected { border-color: rgba(var(--primary-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--primary-rgb), .08), 0 14px 34px rgba(15,23,42,.07); }
.job-type-option.service.selected { border-color: #d48743; box-shadow: 0 0 0 4px rgba(216,132,20,.08), 0 14px 34px rgba(15,23,42,.07); }
.job-type-option-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; }
.job-type-option-icon.new { color: #166d9e; background: #e8f5fb; }
.job-type-option-icon.service { color: #a85e0d; background: #fff2de; }
.job-type-option > div { display: flex; flex-direction: column; gap: 5px; }
.job-type-option strong { color: #1f2a3e; font-size: 15px; }
.job-type-option small { color: #78859a; font-size: 10px; line-height: 1.5; }

.intake-card {
  padding: 22px;
  border: 1px solid #dfe7ef;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 9px 28px rgba(15,23,42,.045);
}
.intake-card.compact-card { padding: 19px 21px; }
.intake-card-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; color: var(--primary); }
.intake-card-head h3 { margin: 1px 0 0; font-size: 18px; }
.intake-form-grid { display: grid; gap: 15px; }
.intake-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.intake-form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.intake-form-grid .full { grid-column: 1 / -1; }
.priority-selector.compact .priority-option { min-height: 56px; padding: 9px 11px; }

.device-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.device-editor-card { position: relative; padding: 16px; display: grid; gap: 12px; border: 1px solid #e1e8ef; border-radius: 16px; background: #fafcfe; }
.device-editor-card > .ear-side-badge { position: absolute; top: 12px; right: 12px; }

.audiogram-editor-wrap { overflow-x: auto; }
.audiogram-editor { width: 100%; min-width: 710px; border-collapse: separate; border-spacing: 7px; }
.audiogram-editor th { padding: 4px; color: #758399; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; }
.audiogram-editor td:first-child { color: #405069; font-size: 11px; font-weight: 800; white-space: nowrap; }
.audiogram-editor input { width: 100%; min-width: 72px; height: 38px; padding: 0 8px; border: 1px solid #dce5ee; border-radius: 10px; outline: 0; text-align: center; color: #1f2b3e; background: #fff; }
.audiogram-editor input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .09); }

.choice-chip-grid { display: flex; flex-wrap: wrap; gap: 9px; }
.choice-chip { min-height: 38px; padding: 8px 12px; border: 1px solid #dce4ed; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; color: #5d6a7f; background: #fff; font-size: 11px; font-weight: 700; }
.choice-chip:hover { border-color: #aebfd0; }
.choice-chip.selected { color: var(--primary-dark); border-color: rgba(var(--primary-rgb), .45); background: color-mix(in srgb, var(--primary) 7%, white); }

.request-pane-intro { padding: 3px 4px 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.request-pane-intro h3 { margin: 1px 0 5px; font-size: 22px; }
.request-pane-intro p { margin: 0; font-size: 12px; }
.selection-counter { min-height: 34px; padding: 8px 12px; border-radius: 999px; color: var(--primary-dark); background: color-mix(in srgb, var(--primary) 8%, white); border: 1px solid color-mix(in srgb, var(--primary) 22%, white); font-size: 10px; font-weight: 800; white-space: nowrap; }

.request-accordion { overflow: hidden; border: 1px solid #dfe7ef; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgba(15,23,42,.04); }
.request-accordion > summary { min-height: 72px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; list-style: none; cursor: pointer; }
.request-accordion > summary::-webkit-details-marker { display: none; }
.request-accordion > summary > div { display: flex; flex-direction: column; gap: 4px; }
.request-accordion > summary strong { color: #253147; font-size: 14px; }
.request-accordion > summary span:not(.accordion-selection-count) { color: #8290a3; font-size: 10px; }
.request-accordion[open] > summary { border-bottom: 1px solid #e8eef3; background: #fbfcfe; }
.accordion-selection-count { min-height: 28px; padding: 6px 9px; border-radius: 999px; color: #66758a; background: #eef2f6; font-size: 9px; font-weight: 800; }
.request-accordion-body { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.request-group { padding: 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid #e6ebf1; border-radius: 15px; background: #fbfcfe; }
.request-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.request-group-head strong { color: #364359; font-size: 11px; }
.request-group-head span { color: #98a2b2; font-size: 8px; }
.request-accordion-body > .form-field { align-self: end; }

.side-choice-grid { display: grid; gap: 6px; }
.side-choice-head, .side-choice-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px 34px; gap: 7px; align-items: center; }
.side-choice-head { padding: 0 3px; color: #97a2b2; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; text-align: center; }
.side-choice-head span:first-child { text-align: left; }
.side-choice-row { min-height: 38px; padding: 5px 6px 5px 10px; border-radius: 10px; background: #fff; border: 1px solid #edf1f5; }
.side-choice-label { color: #536178; font-size: 10px; line-height: 1.3; }
.side-toggle { width: 31px; height: 28px; border: 1px solid #d9e2eb; border-radius: 8px; display: grid; place-items: center; color: #7c899c; background: #fff; font-size: 9px; font-weight: 900; }
.side-toggle.selected { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 4px 12px rgba(var(--primary-rgb), .2); }

.warranty-check { min-height: 62px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #dfe6ee; border-radius: 14px; background: #fafcfe; cursor: pointer; }
.warranty-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.warranty-check span { display: flex; flex-direction: column; gap: 3px; }
.warranty-check strong { color: #2b374c; font-size: 12px; }
.warranty-check small { color: #8995a6; font-size: 9px; }

.intake-footer-actions { min-height: 76px; padding: 14px 24px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; border-top: 1px solid #e7edf3; background: #fff; }
.intake-footer-actions > div { justify-self: start; }
.intake-footer-actions > span { color: #8793a5; font-size: 10px; font-weight: 700; }
.intake-footer-actions > button:last-child { justify-self: end; }

/* Lab work-order summary */
.lab-work-order { overflow: hidden; border-color: #d8e5ed; }
.lab-work-order.lab-focused { border-color: rgba(var(--primary-rgb), .46); box-shadow: 0 18px 50px rgba(var(--primary-rgb), .12); }
.lab-work-order.preview { box-shadow: none; }
.lab-work-order-head { padding: 20px 22px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; background: linear-gradient(180deg, #fff, #f8fbfd); border-bottom: 1px solid #e5edf3; }
.lab-work-order-head h3 { margin: 1px 0 4px; font-size: 19px; }
.lab-work-order-head p { margin: 0; font-size: 11px; }
.work-order-type-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; }
.work-order-type-icon.new { color: #0b78aa; background: #e7f5fb; }
.work-order-type-icon.service { color: #a85d0a; background: #fff0db; }
.work-order-type-icon.legacy { color: #67768b; background: #eef2f6; }
.job-type-badge { min-height: 27px; padding: 5px 9px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 9px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.job-type-badge.new { color: #086f9e; background: #e7f5fb; border: 1px solid #c9e8f5; }
.job-type-badge.service { color: #9d590d; background: #fff1df; border: 1px solid #f4d7af; }
.job-type-badge.legacy { color: #66758a; background: #eef2f6; border: 1px solid #dde4eb; }
.job-type-badge.large { min-height: 36px; padding: 8px 13px; font-size: 10px; }
.job-type-badge.mini { min-height: 19px; padding: 3px 7px; font-size: 7px; }

.work-order-routing-grid { padding: 14px 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; background: #fbfcfe; border-bottom: 1px solid #e7edf3; }
.work-order-routing-grid > div { min-width: 0; display: grid; grid-template-columns: 18px 1fr; column-gap: 7px; align-items: start; }
.work-order-routing-grid svg { grid-row: 1 / 3; color: var(--primary); margin-top: 2px; }
.work-order-routing-grid span { color: #8b97a8; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.work-order-routing-grid strong { overflow: hidden; text-overflow: ellipsis; color: #3d4a5e; font-size: 10px; white-space: nowrap; }
.lab-work-order-body { padding: 20px 22px 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.work-order-subsection { padding: 15px; border: 1px solid #e2e9f0; border-radius: 15px; background: #fafcfe; }
.work-order-subsection.notes { grid-column: 1 / -1; }
.work-order-subsection h4 { margin: 0 0 12px; display: flex; align-items: center; gap: 7px; color: #2f3c52; font-size: 12px; }
.work-order-subsection p { margin: 0; color: #657389; font-size: 11px; }
.work-order-group + .work-order-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e8edf2; }
.work-order-group > span { display: block; margin-bottom: 7px; color: #8490a2; font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.work-order-chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.work-order-chip { min-height: 29px; padding: 5px 8px 5px 5px; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; color: #4e5c72; background: #fff; border: 1px solid #dfe6ed; font-size: 9px; font-weight: 700; }
.ear-side-badge { min-width: 24px; height: 24px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 8px; color: #fff; background: var(--primary); font-size: 8px; font-weight: 900; }
.ear-side-badge.bilateral { background: linear-gradient(135deg, var(--primary), var(--navy-2)); }
.work-order-empty { color: #9aa4b3 !important; font-style: italic; }
.device-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.device-summary-card { position: relative; padding: 12px; display: grid; gap: 8px; border: 1px solid #e3e9ef; border-radius: 12px; background: #fff; }
.device-summary-card > .ear-side-badge { position: absolute; top: 10px; right: 10px; }
.device-summary-card > div { display: flex; flex-direction: column; gap: 2px; padding-right: 32px; }
.device-summary-card span:not(.ear-side-badge) { color: #909aab; font-size: 8px; text-transform: uppercase; }
.device-summary-card strong { overflow-wrap: anywhere; color: #3b485d; font-size: 10px; }
.work-order-inline-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.work-order-inline-fact { min-height: 44px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; border-radius: 11px; background: #fff; border: 1px solid #e5ebf1; }
.work-order-inline-fact + .work-order-inline-fact { margin-top: 8px; }
.work-order-inline-grid .work-order-inline-fact + .work-order-inline-fact { margin-top: 0; }
.work-order-inline-fact span { color: #8c97a8; font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.work-order-inline-fact strong { color: #3e4b5f; font-size: 10px; }
.audiogram-summary-wrap { overflow-x: auto; }
.audiogram-summary-table { width: 100%; min-width: 570px; border-collapse: collapse; }
.audiogram-summary-table th, .audiogram-summary-table td { padding: 7px; border-bottom: 1px solid #edf1f5; text-align: center; font-size: 8px; }
.audiogram-summary-table th { color: #8793a4; text-transform: uppercase; }
.audiogram-summary-table td:first-child { color: #3e4a5d; font-weight: 800; }
.attachment-name-list { display: flex; flex-wrap: wrap; gap: 7px; }
.attachment-name-list span { padding: 6px 9px; border-radius: 9px; color: #59677c; background: #fff; border: 1px solid #e0e7ee; font-size: 9px; }

@media (max-width: 1080px) {
  .intake-form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-order-routing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .intake-hero { align-items: flex-start; flex-direction: column; padding: 22px 18px; }
  .intake-stepper { grid-template-columns: repeat(4, 150px); overflow-x: auto; padding: 13px 16px; }
  .intake-step-content { padding: 16px; }
  .job-type-selector, .device-editor-grid, .intake-form-grid.two, .intake-form-grid.three, .request-accordion-body, .lab-work-order-body { grid-template-columns: 1fr; }
  .request-pane-intro { align-items: flex-start; flex-direction: column; }
  .intake-footer-actions { grid-template-columns: 1fr 1fr; padding: 13px 16px; }
  .intake-footer-actions > span { display: none; }
  .intake-footer-actions > button:last-child { width: 100%; }
  .lab-work-order-head { grid-template-columns: 42px 1fr; padding: 17px; }
  .lab-work-order-head .job-type-badge { grid-column: 1 / -1; width: 100%; }
  .work-order-routing-grid { grid-template-columns: 1fr; padding: 13px 17px; }
  .lab-work-order-body { padding: 16px 17px 18px; }
  .work-order-subsection.notes { grid-column: auto; }
}

@media (max-width: 520px) {
  .job-type-option { grid-template-columns: 42px 1fr; min-height: 94px; padding: 14px; }
  .job-type-option > svg { display: none; }
  .job-type-option-icon { width: 42px; height: 42px; }
  .intake-card { padding: 17px; }
  .device-pair-grid, .work-order-inline-grid { grid-template-columns: 1fr; }
  .side-choice-head, .side-choice-row { grid-template-columns: minmax(0, 1fr) 32px 32px; }
}

/* Multi-organization digital workflow */
.button.danger { color: #fff; background: linear-gradient(135deg, #c9304b, #9f1730); box-shadow: 0 10px 24px rgba(201,48,75,.2); }
.role-chip.audiologist { color: #0e7490; background: #e7f8fc; }
.role-chip.lab_reception { color: #6c3ab4; background: #f0e9ff; }
.role-chip.dual_reception { color: #245f91; background: #e7f2fb; }
.assignment-guidance.dual { background: linear-gradient(135deg, #edf7ff, #f4f0ff); border-color: #c9dff3; color: #254d70; }
.sidebar-profile small { color: rgba(255,255,255,.56); font-size: 8px; margin-top: 3px; }
.generated-serial-card { min-height: 63px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px dashed rgba(var(--primary-rgb), .45); border-radius: 15px; background: rgba(var(--primary-rgb), .055); }
.generated-serial-card span { color: var(--muted); font-size: 11px; }
.generated-serial-card strong { color: var(--primary-dark); font-size: 20px; letter-spacing: .04em; }
.intake-form-grid .two-span { grid-column: span 2; }
.selected-file-list { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 7px; }
.selected-file-list span { padding: 7px 10px; border-radius: 10px; background: #f1f5fa; border: 1px solid #dfe7f0; color: #536177; font-size: 10px; }
.serial-subline { margin-top: 6px; display: flex !important; align-items: center; flex-wrap: wrap; gap: 7px; }
.serial-subline > span:last-child { color: #8190a3; font-size: 9px; }

.directory-layout { display: flex; flex-direction: column; gap: 22px; }
.directory-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.directory-form-card { overflow: hidden; }
.organization-list { padding: 0 22px 24px; display: grid; gap: 14px; }
.organization-card { border: 1px solid var(--border); border-radius: 17px; background: #fff; overflow: hidden; }
.organization-card.disabled { opacity: .62; }
.organization-card-head { padding: 16px 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; background: #fbfcfe; border-bottom: 1px solid #edf1f5; }
.organization-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--primary); background: rgba(var(--primary-rgb), .1); }
.organization-card-head > div { display: flex; flex-direction: column; gap: 4px; }
.organization-card-head strong { font-size: 14px; }
.organization-card-head span { color: var(--muted); font-size: 10px; }
.branch-chip-list { padding: 14px 18px 18px; display: flex; flex-wrap: wrap; gap: 9px; }
.branch-chip { min-height: 42px; padding: 8px 12px; display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; border: 1px solid #dfe6ef; border-radius: 12px; color: #38475d; background: #fff; text-align: left; }
.branch-chip small { grid-column: 2; color: #8995a7; font-size: 8px; }
.branch-chip.disabled { opacity: .48; text-decoration: line-through; }
.empty-branch-note { color: #8793a4; font-size: 11px; }

.filter-bar.enhanced { grid-template-columns: minmax(320px, 1fr) minmax(170px, auto) minmax(160px, auto) auto; }
.filter-toggle.active { border-color: rgba(var(--primary-rgb), .45); color: var(--primary-dark); background: rgba(var(--primary-rgb), .07); }
.advanced-filter-grid { padding: 16px 26px 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; border-top: 1px solid #edf1f5; background: #fbfcfe; }
.advanced-filter-grid .form-field label { margin-top: 0; }
.clear-filter-button { align-self: end; }

.delete-job-form { display: grid; gap: 17px; }
.delete-warning-box { padding: 15px; display: flex; gap: 13px; border-radius: 14px; border: 1px solid #ffd0d8; background: #fff4f6; color: #ad213a; }
.delete-warning-box strong { display: block; margin-bottom: 4px; }
.delete-warning-box p { margin: 0; color: #8f4a58; font-size: 12px; line-height: 1.55; }
.modal-actions { justify-content: flex-end; }

@media (max-width: 1050px) {
  .directory-form-grid { grid-template-columns: 1fr; }
  .advanced-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar.enhanced { grid-template-columns: 1fr 1fr; }
  .filter-bar.enhanced .search-box { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .organization-card-head { grid-template-columns: auto 1fr; }
  .organization-card-head .active-chip, .organization-card-head .button { grid-column: span 1; }
  .advanced-filter-grid, .filter-bar.enhanced { grid-template-columns: 1fr; }
  .filter-bar.enhanced .search-box { grid-column: auto; }
  .intake-form-grid .two-span { grid-column: 1; }
  .generated-serial-card { align-items: flex-start; flex-direction: column; }
}

/* v22 laboratory directory and automatic barcode acceptance */
.transfer-barcode-card {
  width: min(100%, 520px);
  margin: 8px 0 17px;
  padding: 12px 14px 10px;
  display: grid;
  gap: 7px;
  border-radius: 14px;
  border: 1px solid #dce4ee;
  background: #fff;
  overflow: hidden;
}
.transfer-barcode-svg { display: block; width: 100%; max-width: 500px; height: auto; }
.transfer-barcode-card small { color: #68768c; font-size: 9px; line-height: 1.45; text-align: center; }
.transfer-code-label { margin-top: 2px; }

.admin-directory-intro {
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: linear-gradient(135deg, #fff, rgba(var(--primary-rgb), .055));
}
.admin-directory-intro h2 { margin: 4px 0 7px; font-size: 24px; }
.admin-directory-intro p { margin: 0; max-width: 720px; }
.directory-summary-cards { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; }
.directory-summary-cards > div { min-width: 115px; padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; border-radius: 14px; border: 1px solid #dfe6ef; background: #fff; }
.directory-summary-cards svg { color: var(--primary); }
.directory-summary-cards span { color: var(--muted); font-size: 9px; }
.directory-summary-cards strong { grid-column: 2; color: #18243a; font-size: 20px; }
.directory-form-grid.three-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.numbered-card { position: relative; padding-top: 7px; }
.setup-step-number { position: absolute; top: 15px; right: 17px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); font-size: 12px; font-weight: 800; }
.laboratory-form-card { border-color: rgba(var(--primary-rgb), .28); background: linear-gradient(180deg, rgba(var(--primary-rgb), .035), #fff 25%); }
.directory-results-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 20px; align-items: start; }
.laboratory-list { padding: 0 22px 24px; display: grid; gap: 12px; }
.laboratory-directory-card { padding: 15px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; border: 1px solid #dde6ef; border-radius: 16px; background: #fff; }
.laboratory-directory-card.disabled { opacity: .58; }
.laboratory-directory-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--primary), #5b5ee8); box-shadow: 0 10px 22px rgba(var(--primary-rgb), .18); }
.laboratory-directory-card > div { display: flex; flex-direction: column; gap: 4px; }
.laboratory-directory-card > div strong { color: #263249; font-size: 13px; }
.laboratory-directory-card > div span { color: var(--muted); font-size: 9px; }
.laboratory-directory-card .button { grid-column: 2 / -1; justify-self: end; }
.assignment-guidance { padding: 12px 13px; display: flex; flex-direction: column; gap: 3px; border-radius: 13px; border: 1px solid #dfe7f0; background: #f8fafc; }
.assignment-guidance strong { color: #263249; font-size: 11px; }
.assignment-guidance span { color: #718096; font-size: 9px; line-height: 1.5; }
.assignment-guidance.lab { border-color: #ddd2f8; background: #f8f5ff; }
.assignment-guidance.admin { border-color: #f3d8ac; background: #fff9ef; }

@media (max-width: 1200px) {
  .directory-form-grid.three-cards { grid-template-columns: 1fr 1fr; }
  .directory-form-grid.three-cards .laboratory-form-card { grid-column: 1 / -1; }
  .directory-results-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .admin-directory-intro { align-items: stretch; flex-direction: column; }
  .directory-summary-cards { grid-template-columns: 1fr; }
  .directory-form-grid.three-cards { grid-template-columns: 1fr; }
  .directory-form-grid.three-cards .laboratory-form-card { grid-column: auto; }
  .laboratory-directory-card { grid-template-columns: auto 1fr; }
  .laboratory-directory-card .active-chip { justify-self: start; grid-column: 2; }
  .laboratory-directory-card .button { grid-column: 1 / -1; justify-self: stretch; }
  .transfer-barcode-card { padding: 9px; }
}

/* Visible job-card attachment uploader */
.attachment-intake-card {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 4%, white), #fff);
}
.attachment-uploader {
  display: grid;
  gap: 14px;
}
.attachment-uploader-main {
  min-height: 88px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px dashed color-mix(in srgb, var(--primary) 42%, #d8e1ec);
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary) 4%, #fff);
}
.attachment-uploader-main > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.attachment-uploader-main strong { color: #26364f; font-size: 13px; }
.attachment-uploader-main small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.attachment-upload-button { flex: 0 0 auto; cursor: pointer; }
.attachment-file-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.attachment-file-item {
  min-width: 0;
  padding: 10px 11px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #dfe7f0;
  border-radius: 13px;
  background: #fff;
}
.attachment-file-item > svg { color: var(--primary); }
.attachment-file-item > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.attachment-file-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #34445b; font-size: 11px; }
.attachment-file-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a96a8; font-size: 8px; }
.icon-button.tiny { width: 28px; height: 28px; min-width: 28px; border-radius: 9px; }
@media (max-width: 700px) {
  .attachment-uploader-main { align-items: stretch; flex-direction: column; }
  .attachment-upload-button { width: 100%; justify-content: center; }
  .attachment-file-grid { grid-template-columns: 1fr; }
}

/* v25: fixed Ocean theme, compact one-time barcode, responsive tracking cards, overdue state */
.handover-inline-shell {
  justify-items: center;
}
.handover-inline-head {
  width: min(100%, 650px);
  text-align: center;
}
.handover-card.compact {
  width: min(100%, 650px);
}
.handover-single {
  width: min(100%, 460px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.compact-barcode-card {
  width: min(100%, 390px);
  margin: 8px auto 12px;
  padding: 14px 18px 12px;
  gap: 4px;
}
.compact-barcode-card .transfer-barcode-svg {
  max-width: 330px;
  margin: 0 auto;
}
.big-code.compact-code {
  margin: 2px 0 4px;
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: .16em;
}
.one-time-code-note {
  margin: 0 auto 14px;
  padding: 9px 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  color: #35556d;
  background: #edf6fb;
  border: 1px solid #d4e6f0;
  font-size: 11px;
  font-weight: 700;
}
.handover-actions-centered { justify-content: center; }
.handover-card.compact .handover-footer {
  width: min(100%, 460px);
  margin: 14px auto 0;
}

.tracking-board-toolbar { overflow: hidden; }
.tracking-board-filters {
  padding: 0 24px 24px;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 240px 210px;
  gap: 12px;
}
.tracking-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr));
  gap: 20px;
  align-items: start;
}
.tracking-board-card {
  --tracking-accent: #1a95d3;
  --tracking-dark: #0b3956;
  --tracking-soft: #eaf6fc;
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid #d7e5ee;
  background: #fff;
  box-shadow: 0 20px 48px rgba(0,48,73,.11);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tracking-board-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 58px rgba(0,48,73,.16);
}
.tracking-board-card.overdue {
  --tracking-accent: #d9384f;
  --tracking-dark: #8f1f31;
  --tracking-soft: #fff0f3;
  border-color: #efb5bf;
  box-shadow: 0 22px 54px rgba(183,29,52,.17);
}
.tracking-overdue-alert {
  min-height: 42px;
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  background: linear-gradient(135deg, #a61e35, #e2465d);
  font-size: 11px;
  letter-spacing: .02em;
}
.tracking-overdue-alert strong { letter-spacing: .09em; }
.tracking-overdue-alert span { color: rgba(255,255,255,.88); }
.tracking-card-head {
  min-height: 130px;
  padding: 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.16), transparent 28%),
    linear-gradient(135deg, var(--tracking-dark), var(--tracking-accent));
}
.tracking-card-head h3 {
  margin: 5px 0 7px;
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -.045em;
}
.tracking-card-head p { margin: 0; color: rgba(255,255,255,.82); font-size: 13px; }
.tracking-card-head-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
.tracking-stage-chip {
  min-width: 52px;
  padding: 8px 11px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.2);
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}
.tracking-card-body { padding: 20px; }
.tracking-card-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfe9ef;
}
.tracking-card-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--tracking-dark), var(--tracking-accent));
}
.tracking-mini-steps {
  margin: 14px 0 20px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.tracking-mini-step {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.tracking-mini-dot {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #728397;
  background: #fff;
  border: 1px solid #cbd9e2;
  font-size: 10px;
  font-weight: 800;
}
.tracking-mini-step.complete .tracking-mini-dot,
.tracking-mini-step.active .tracking-mini-dot {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--tracking-dark), var(--tracking-accent));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tracking-accent) 24%, transparent);
}
.tracking-mini-step.active .tracking-mini-dot { box-shadow: 0 0 0 5px var(--tracking-soft), 0 8px 18px color-mix(in srgb, var(--tracking-accent) 24%, transparent); }
.tracking-mini-step small {
  min-height: 28px;
  color: #77879a;
  font-size: 8px;
  line-height: 1.25;
}
.tracking-mini-step.active small { color: var(--tracking-dark); font-weight: 800; }
.tracking-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.tracking-card-facts > div {
  min-height: 72px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  gap: 3px 7px;
  border-radius: 14px;
  border: 1px solid #dfe8ee;
  background: #f8fbfd;
}
.tracking-card-facts > div:last-child { grid-column: 1 / -1; }
.tracking-card-facts svg { grid-row: 1 / 3; margin-top: 2px; color: var(--tracking-accent); }
.tracking-card-facts span { color: #8491a2; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.tracking-card-facts strong { color: #26364b; font-size: 11px; line-height: 1.35; }
.tracking-board-card.overdue .tracking-card-facts > div { border-color: #f1d1d7; background: #fff8f9; }
.tracking-board-card .tracking-open-button {
  margin-top: 14px;
  background: linear-gradient(135deg, var(--tracking-dark), var(--tracking-accent));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tracking-accent) 24%, transparent);
}

.detail-overdue-banner {
  position: relative;
  z-index: 3;
  min-height: 48px;
  padding: 11px 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  background: linear-gradient(135deg, #9e1e34, #df4159);
}
.detail-overdue-banner strong { letter-spacing: .08em; }
.detail-overdue-banner span { color: rgba(255,255,255,.86); font-size: 12px; }
.detail-journey-card.overdue {
  background: radial-gradient(circle at 14% 10%, rgba(255,255,255,.10), transparent 24%), linear-gradient(135deg, #651626 0%, #98243a 48%, #ca4055 100%);
  box-shadow: 0 26px 80px rgba(142,25,45,.20);
}
.detail-journey-card.overdue .detail-journey-top {
  border-radius: 0 0 26px 26px;
  background: radial-gradient(circle at 84% 18%, rgba(255,255,255,.12), transparent 22%), linear-gradient(135deg, #74182a 0%, #ad2b43 52%, #d84a60 100%);
}
.detail-journey-card.overdue .journey-main-badge,
.detail-journey-card.overdue .journey-progressbar-fill,
.detail-journey-card.overdue .progress-step.complete .progress-node-ring,
.detail-journey-card.overdue .progress-step.active .progress-node-ring {
  background: linear-gradient(135deg, #9d2036, #e14960);
  border-color: #f5b7c1;
}
.detail-journey-card.overdue .progress-step.complete .progress-track-segment .segment.after {
  background: linear-gradient(90deg, #8f1d31 0%, #dc4058 45%, #fff 52%, #dc4058 59%, #8f1d31 100%);
  background-size: 230% 100%;
}
.detail-journey-card.overdue .journey-percent-orb {
  background: conic-gradient(from 180deg, #f4a8b4, #d93750, #ffd8de, #f4a8b4);
}
.detail-journey-card.overdue .journey-percent-orb-inner { background: linear-gradient(180deg, #7e1b2e, #4e101e); }
.detail-journey-card.overdue .journey-meta-item svg { color: #d93750; }

@media (max-width: 980px) {
  .tracking-board-filters { grid-template-columns: 1fr 1fr; }
  .tracking-board-filters .search-box { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .tracking-board-filters { grid-template-columns: 1fr; padding: 0 16px 18px; }
  .tracking-board-filters .search-box { grid-column: auto; }
  .tracking-board-grid { grid-template-columns: 1fr; gap: 14px; }
  .tracking-card-head { min-height: 118px; padding: 18px; }
  .tracking-card-head-badges { gap: 6px; }
  .tracking-card-body { padding: 16px; }
  .tracking-mini-step small { display: none; }
  .tracking-card-facts { grid-template-columns: 1fr; }
  .tracking-card-facts > div:last-child { grid-column: auto; }
  .compact-barcode-card { padding: 11px 12px; }
  .detail-overdue-banner { align-items: flex-start; flex-wrap: wrap; padding: 10px 16px; }
}
.tracking-board-card.overdue .status-badge,
.detail-journey-card.overdue .status-badge {
  color: #9e1e34;
  background: #fff0f3;
  border: 1px solid #efbcc5;
}
/* Weekly tracking */
.weekly-tracking-page {
  min-width: 0;
}

.weekly-overview-panel {
  overflow: hidden;
  position: relative;
}

.weekly-overview-panel::after {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  right: -130px;
  top: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 17%, transparent), transparent 70%);
  pointer-events: none;
}

.weekly-header,
.weekly-results-header {
  align-items: flex-start;
}

.weekly-header p {
  max-width: 780px;
}

.weekly-header p strong {
  color: var(--text);
  white-space: nowrap;
}

.weekly-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
  position: relative;
  z-index: 1;
}

.weekly-metric-card {
  min-height: 100px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
  border-radius: 20px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 28px rgba(22, 50, 79, 0.06);
}

.weekly-metric-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  flex: 0 0 auto;
}

.weekly-metric-card > div:last-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.weekly-metric-card span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.weekly-metric-card strong {
  color: var(--text);
  font-size: 1.65rem;
  line-height: 1;
}

.weekly-metric-card.tone-green .weekly-metric-icon {
  color: #16805b;
  background: #e7f7f0;
}

.weekly-metric-card.tone-amber .weekly-metric-icon {
  color: #ad6800;
  background: #fff4d8;
}

.weekly-metric-card.tone-rose .weekly-metric-icon {
  color: #c2415c;
  background: #ffedf1;
}

.weekly-results-panel {
  min-width: 0;
}

.weekly-updated-at {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  white-space: nowrap;
}

.weekly-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 20px 0 16px;
  padding: 8px 9px 8px 15px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.weekly-search-bar:focus-within {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 11%, transparent);
  background: var(--surface);
}

.weekly-search-bar > svg {
  color: var(--muted);
  flex: 0 0 auto;
}

.weekly-search-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 650;
}

.weekly-search-bar input::placeholder {
  color: var(--muted);
  font-weight: 550;
}

.weekly-clear-search {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.weekly-clear-search:hover {
  color: var(--text);
  background: var(--surface-strong);
}

.weekly-search-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 14px;
  color: var(--muted);
  font-size: 0.82rem;
}

.weekly-search-note strong {
  color: var(--text);
}

.weekly-search-note button {
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0 2px;
}

.spin-icon {
  animation: weekly-spin 900ms linear infinite;
}

@keyframes weekly-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1120px) {
  .weekly-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .weekly-header,
  .weekly-results-header {
    gap: 14px;
  }

  .weekly-header .button,
  .weekly-updated-at {
    align-self: flex-start;
  }

  .weekly-metric-grid {
    grid-template-columns: 1fr;
  }

  .weekly-metric-card {
    min-height: 84px;
  }

  .weekly-search-bar {
    flex-wrap: wrap;
  }

  .weekly-search-bar input {
    min-width: calc(100% - 72px);
  }

  .weekly-search-bar .button {
    width: 100%;
    justify-content: center;
  }
}

/* Weekly inline workflow cards */
.weekly-journey-list {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.weekly-journey-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--accent));
  border-radius: 26px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(22, 50, 79, 0.09);
}

.weekly-journey-banner {
  min-height: 132px;
  padding: 24px 28px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg, #0f3552 0%, #1b5378 52%, #496c89 100%);
  color: #fff;
}

.weekly-journey-banner h3 {
  margin: 4px 0 8px;
  color: #fff;
  font-size: clamp(28px, 3.1vw, 42px);
  line-height: 1;
  letter-spacing: -.045em;
}

.weekly-journey-banner p {
  margin: 0;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  font-weight: 650;
}

.weekly-journey-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.weekly-stage-chip {
  min-height: 38px;
  padding: 10px 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.weekly-journey-body {
  padding: 24px 28px 26px;
  background: linear-gradient(180deg, #fff 0%, #f8fbfd 100%);
}

.weekly-journey-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.weekly-journey-heading h4 {
  margin: 5px 0 7px;
  color: var(--text);
  font-size: 22px;
  letter-spacing: -.025em;
}

.weekly-journey-heading p {
  margin: 0;
  max-width: 720px;
  font-size: 13px;
}

.weekly-checkpoint-badge {
  min-width: 126px;
  padding: 14px 17px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(135deg, #1a95d3, #496c89);
  color: #fff;
  box-shadow: 0 14px 28px rgba(26,149,211,.20);
}

.weekly-checkpoint-badge span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255,255,255,.76);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
}

.weekly-checkpoint-badge strong {
  display: block;
  font-size: 25px;
  line-height: 1;
}

.weekly-progressbar {
  margin-bottom: 22px;
}

.weekly-progressbar-track {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #dfeaf1;
  box-shadow: inset 0 2px 6px rgba(0,48,73,.07);
}

.weekly-progressbar-fill {
  position: relative;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #003049 0%, #1a95d3 58%, #8fb6d8 100%);
}

.weekly-progressbar-fill::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: -40%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), transparent);
  animation: progress-sweep 2.4s linear infinite;
}

.weekly-progressbar-labels {
  margin-top: 7px;
  display: flex;
  justify-content: space-between;
  color: #7c8b99;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.status-stepper.compact {
  --node-size: 68px;
  --step-gap: 12px;
  --connector-gap: 7px;
}

.status-stepper.compact .progress-step {
  gap: 10px;
}

.status-stepper.compact .progress-copy {
  gap: 5px;
}

.status-stepper.compact .progress-copy strong {
  font-size: 13px;
}

.status-stepper.compact .progress-copy small {
  font-size: 10px;
  line-height: 1.35;
}

.status-stepper.compact .progress-order {
  min-width: 25px;
  height: 20px;
  padding-inline: 7px;
  font-size: 10px;
}

.weekly-journey-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
  margin-top: 22px;
}

.weekly-meta-item {
  min-height: 76px;
  padding: 14px 15px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #dbe6ee;
  border-radius: 16px;
  background: #f7fbfd;
}

.weekly-meta-item svg {
  flex: 0 0 auto;
  color: #1a95d3;
}

.weekly-meta-item span {
  display: block;
  margin-bottom: 4px;
  color: #77879a;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
}

.weekly-meta-item strong {
  display: block;
  color: #17364c;
  font-size: 12px;
  line-height: 1.35;
}

@media (max-width: 1050px) {
  .weekly-journey-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-stepper.compact {
    overflow-x: auto;
    grid-template-columns: repeat(5, 180px);
    padding: 4px 4px 12px;
  }
}

@media (max-width: 680px) {
  .weekly-journey-banner,
  .weekly-journey-heading {
    flex-direction: column;
  }

  .weekly-journey-banner {
    min-height: auto;
    padding: 21px 20px;
  }

  .weekly-journey-status {
    align-items: flex-start;
  }

  .weekly-journey-body {
    padding: 20px;
  }

  .weekly-checkpoint-badge {
    min-width: 116px;
  }

  .weekly-journey-meta {
    grid-template-columns: 1fr;
  }

  .weekly-meta-item {
    min-height: 68px;
  }
}


/* Weekly tracking display / full-screen mode */
.weekly-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.weekly-display-button {
  min-width: 148px;
}

.weekly-display-toolbar {
  display: none;
}

body.weekly-display-mode {
  overflow-x: hidden;
  background: var(--app-bg);
}

body.weekly-display-mode .app-shell {
  display: block;
  min-height: 100vh;
}

body.weekly-display-mode .sidebar,
body.weekly-display-mode .sidebar-backdrop,
body.weekly-display-mode .topbar {
  display: none !important;
}

body.weekly-display-mode .main-shell {
  grid-column: 1;
  width: 100%;
  min-height: 100vh;
}

body.weekly-display-mode .page-content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 14px 18px;
}

body.weekly-display-mode .route-stage {
  animation: none;
}

body.weekly-display-mode .weekly-tracking-page {
  width: 100%;
  max-width: none;
  gap: 10px;
}

body.weekly-display-mode .weekly-overview-panel,
body.weekly-display-mode .weekly-results-header,
body.weekly-display-mode .weekly-standard-search,
body.weekly-display-mode .weekly-search-note {
  display: none !important;
}

body.weekly-display-mode .weekly-display-toolbar {
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 58px;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 12px 30px rgba(22, 50, 79, .12);
  backdrop-filter: blur(16px);
}

.weekly-display-search {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 6px 5px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.weekly-display-search:focus-within {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);
  background: var(--surface);
}

.weekly-display-search > svg {
  flex: 0 0 auto;
  color: var(--muted);
}

.weekly-display-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
}

.weekly-display-search input::placeholder {
  color: var(--muted);
  font-weight: 550;
}

.weekly-display-count {
  min-height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.weekly-display-refresh {
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  justify-content: center;
}

.weekly-display-exit {
  min-height: 40px;
  padding-inline: 13px 9px;
  white-space: nowrap;
}

.weekly-display-exit span {
  min-width: 30px;
  padding: 4px 7px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .84);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

body.weekly-display-mode .weekly-results-panel {
  min-width: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body.weekly-display-mode .weekly-journey-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 0;
}

body.weekly-display-mode .weekly-journey-card {
  min-width: 0;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(22, 50, 79, .08);
}

body.weekly-display-mode .weekly-journey-banner {
  min-height: 76px;
  padding: 12px 16px;
  align-items: center;
  gap: 14px;
}

body.weekly-display-mode .weekly-journey-banner .eyebrow {
  font-size: 8px;
  letter-spacing: .09em;
}

body.weekly-display-mode .weekly-journey-banner h3 {
  margin: 3px 0 5px;
  font-size: clamp(21px, 1.7vw, 29px);
}

body.weekly-display-mode .weekly-journey-banner p {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

body.weekly-display-mode .weekly-journey-status {
  gap: 6px;
}

body.weekly-display-mode .weekly-stage-chip {
  min-height: 28px;
  padding: 6px 10px;
  font-size: 10px;
}

body.weekly-display-mode .weekly-journey-body {
  padding: 12px 14px 13px;
}

body.weekly-display-mode .weekly-journey-heading,
body.weekly-display-mode .weekly-progressbar {
  display: none;
}

body.weekly-display-mode .status-stepper.compact {
  --node-size: 42px;
  --step-gap: 7px;
  --connector-gap: 4px;
  overflow: visible;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--step-gap);
  padding: 1px 0 0;
}

body.weekly-display-mode .status-stepper.compact .progress-step {
  gap: 6px;
}

body.weekly-display-mode .status-stepper.compact .progress-track-segment {
  top: calc((var(--node-size) / 2) - 2px);
  height: 4px;
}

body.weekly-display-mode .status-stepper.compact .progress-track-segment .segment {
  height: 4px;
}

body.weekly-display-mode .status-stepper.compact .progress-node-ring,
body.weekly-display-mode .status-stepper.compact .progress-node-shell {
  width: var(--node-size);
  height: var(--node-size);
}

body.weekly-display-mode .status-stepper.compact .progress-node-core svg {
  width: 17px;
  height: 17px;
}

body.weekly-display-mode .status-stepper.compact .progress-copy {
  max-width: 112px;
  gap: 2px;
}

body.weekly-display-mode .status-stepper.compact .progress-copy-head {
  gap: 4px;
}

body.weekly-display-mode .status-stepper.compact .progress-order {
  display: none;
}

body.weekly-display-mode .status-stepper.compact .progress-copy strong {
  font-size: 9px;
  line-height: 1.15;
}

body.weekly-display-mode .status-stepper.compact .progress-copy small {
  display: none;
}

body.weekly-display-mode .weekly-journey-meta {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

body.weekly-display-mode .weekly-meta-item {
  min-height: 50px;
  padding: 7px 9px;
  gap: 7px;
  border-radius: 11px;
}

body.weekly-display-mode .weekly-meta-item svg {
  width: 15px;
  height: 15px;
}

body.weekly-display-mode .weekly-meta-item span {
  margin-bottom: 2px;
  font-size: 7px;
}

body.weekly-display-mode .weekly-meta-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
}

@media (max-width: 1180px) {
  body.weekly-display-mode .weekly-display-toolbar {
    grid-template-columns: minmax(280px, 1fr) auto auto;
  }

  body.weekly-display-mode .weekly-display-count {
    display: none;
  }

  body.weekly-display-mode .weekly-journey-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  body.weekly-display-mode .weekly-journey-list {
    grid-template-columns: 1fr;
  }

  body.weekly-display-mode .weekly-display-toolbar {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body.weekly-display-mode .weekly-display-refresh {
    display: none;
  }
}

@media (max-width: 680px) {
  .weekly-header-actions {
    width: 100%;
    justify-content: stretch;
  }

  .weekly-header-actions .button {
    flex: 1 1 150px;
    justify-content: center;
  }

  body.weekly-display-mode .page-content {
    padding: 8px 7px 18px;
  }

  body.weekly-display-mode .weekly-display-toolbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 7px;
  }

  body.weekly-display-mode .weekly-display-exit {
    width: 100%;
    justify-content: center;
  }

  body.weekly-display-mode .weekly-journey-banner {
    flex-direction: row;
    align-items: center;
    padding: 11px 12px;
  }

  body.weekly-display-mode .weekly-journey-status {
    align-items: flex-end;
  }

  body.weekly-display-mode .status-stepper.compact {
    overflow-x: auto;
    grid-template-columns: repeat(5, 105px);
    padding-bottom: 7px;
  }

  body.weekly-display-mode .weekly-journey-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* Weekly tracking overdue state retained from the digital multi-organisation system. */
.weekly-overdue-alert {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  color: #fff;
  background: linear-gradient(135deg, #981f35, #d34059);
  font-size: 12px;
}
.weekly-overdue-alert strong { letter-spacing: .08em; }
.weekly-overdue-alert span { color: rgba(255,255,255,.84); }
.weekly-journey-card.overdue { border-color: #e5a7b2; box-shadow: 0 18px 42px rgba(166, 35, 59, .14); }
.weekly-journey-card.overdue .weekly-journey-banner {
  background:
    radial-gradient(circle at 88% 16%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(135deg, #7d182b 0%, #b32943 55%, #d8465f 100%);
}
.weekly-journey-card.overdue .weekly-checkpoint-badge,
.weekly-journey-card.overdue .weekly-progressbar-fill {
  background: linear-gradient(135deg, #a31f38, #d8455f);
}
.weekly-journey-card.overdue .progress-step.complete .progress-node-ring,
.weekly-journey-card.overdue .progress-step.active .progress-node-ring {
  border-color: #f4cbd2;
  background: linear-gradient(135deg, #9d1f37, #dc4962);
  box-shadow: 0 16px 28px rgba(178, 42, 67, .24);
}
.weekly-journey-card.overdue .progress-step.complete .progress-track-segment .segment.after {
  background: linear-gradient(90deg, #8e1b31 0%, #d84660 34%, #fff 52%, #d84660 70%, #8e1b31 100%);
  background-size: 230% 100%;
}
.weekly-journey-card.overdue .weekly-meta-item { border-color: #efd1d7; background: #fff8f9; }
.weekly-journey-card.overdue .weekly-meta-item svg { color: #c52f4a; }

/* v29: instant scanner acceptance */
.scanner-auto-row {
  align-items: center;
}
.scanner-auto-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe2f2;
  border-radius: 12px;
  background: #edf7ff;
  color: #245f91;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .scanner-auto-label { width: 100%; }
}

/* v30 organization branding and employee editing */
.sidebar-logo-frame {
  width: 150px;
  min-height: 74px;
  display: grid;
  place-items: center;
  border-radius: 18px;
}
.sidebar-logo-frame.custom-logo {
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.sidebar-logo-frame.custom-logo .sidebar-logo {
  width: 100%;
  height: 88px;
  object-fit: contain;
  filter: none;
}
.organization-logo-field { gap: 8px; }
.optional-label { color: var(--muted); font-weight: 600; font-size: 11px; }
.organization-logo-picker {
  min-height: 64px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px dashed #b7c8d8;
  border-radius: 14px;
  background: #f8fbfd;
  color: #36516c;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}
.organization-logo-picker:hover { border-color: var(--primary); background: rgba(var(--primary-rgb), .045); }
.organization-logo-picker input { display: none; }
.organization-icon.has-logo {
  width: 64px;
  height: 52px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.organization-icon.has-logo img { width: 100%; height: 100%; object-fit: contain; }
.organization-card-actions { display: flex !important; flex-direction: row !important; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.user-edit-form { gap: 15px; }
.compact-copy { margin: -2px 0 2px; font-size: 12px; line-height: 1.6; }

@media (max-width: 900px) {
  .organization-card-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* v31 editable company, branch, and Laboratory directory */
.branch-manage-chip {
  min-height: 46px;
  padding: 7px 8px 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe6ef;
  border-radius: 13px;
  color: #38475d;
  background: #fff;
}
.branch-manage-chip.disabled { opacity: .5; }
.branch-manage-info {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8px;
  align-items: center;
}
.branch-manage-info small { grid-column: 2; color: #8995a7; font-size: 8px; }
.branch-manage-actions { display: flex; align-items: center; gap: 4px; padding-left: 3px; border-left: 1px solid #edf1f5; }
.icon-button.compact { width: 30px; height: 30px; border-radius: 9px; }
.laboratory-directory-actions {
  grid-column: 2 / -1;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end;
  align-items: center;
  gap: 7px !important;
}
.laboratory-directory-actions .button { grid-column: auto; justify-self: auto; }
.directory-edit-form { gap: 15px; }
.directory-edit-form .modal-actions { margin-top: 3px; }

@media (max-width: 760px) {
  .branch-manage-chip { width: 100%; justify-content: space-between; }
  .laboratory-directory-actions { grid-column: 1 / -1; justify-content: stretch; }
  .laboratory-directory-actions .button { flex: 1; }
}

/* =========================================================
   v35 - Reception-first patient intake + simplified Job Card
   ========================================================= */
.status-awaiting_audiologist { background: #eaf4ff; color: #155b8f; }
.status-closed { background: #e8f8ef; color: #08764f; }

.reception-intake-page,
.audiologist-order-page,
.job-detail-v35 { max-width: 1500px; margin: 0 auto; }

.reception-intake-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 28px 30px;
  background:
    radial-gradient(circle at 85% 20%, rgba(83, 169, 226, .16), transparent 30%),
    linear-gradient(135deg, #ffffff, #f4f9fd);
}
.reception-intake-hero h2,
.technical-order-heading h2,
.patient-readonly-copy h2 { margin: 5px 0 8px; }
.reception-flow-mini { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reception-flow-mini span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 13px; border-radius: 999px; background: #eef6fb; color: #214f72; font-weight: 700;
}
.reception-flow-mini b { color: #7596ad; }
.reception-intake-form { padding: 0; overflow: hidden; }
.reception-intake-form > .panel-header { padding: 24px 28px; border-bottom: 1px solid #e4edf4; }
.intake-section-block { padding: 24px 28px; border-bottom: 1px solid #e8eef3; }
.intake-section-title { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; color: #214f72; }
.intake-section-title strong { display: block; color: #162f44; font-size: 16px; }
.intake-section-title span { display: block; margin-top: 4px; color: #718294; font-size: 13px; }
.reception-intake-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 28px; background: #f8fbfd; }
.reception-data-note { display: flex; align-items: center; gap: 10px; color: #526b7e; font-size: 13px; }
.reception-data-note svg { color: #1d8b68; flex: 0 0 auto; }
.field-hint.warning { color: #a96312; margin-top: 6px; }
.form-field label svg { vertical-align: -2px; margin-right: 5px; }

.fixed-job-id-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px;
  border-radius: 999px; border: 1px solid #d7e6f0; background: #fff; color: #5a7182; font-size: 12px;
}
.fixed-job-id-chip strong { color: #183f5d; letter-spacing: .03em; }
.patient-readonly-banner {
  display: flex; align-items: center; gap: 18px; padding: 22px 26px;
  background: linear-gradient(135deg, #f7fbfe, #eef7fc); border-color: #cfe3f1;
}
.patient-readonly-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #dff0fb; color: #1f6f9e; }
.patient-readonly-copy { flex: 1; min-width: 0; }
.patient-readonly-facts { display: flex; gap: 18px; flex-wrap: wrap; color: #607485; font-size: 13px; }
.readonly-pill { padding: 8px 12px; border-radius: 999px; background: #e8eff4; color: #526878; font-size: 12px; font-weight: 800; }

.technical-order-shell { overflow: hidden; padding: 0; }
.technical-order-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 25px 28px; background: linear-gradient(135deg, #0f4e7a, #1a6d9f); color: #fff;
}
.technical-order-heading .eyebrow { color: rgba(255,255,255,.74); }
.technical-order-heading p { margin: 0; color: rgba(255,255,255,.82); }
.technical-top-grid {
  display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 18px;
  padding: 22px 28px; border-bottom: 1px solid #e8eef3; background: #fbfdff;
}
.technical-field-block { display: flex; flex-direction: column; gap: 9px; }
.technical-label { color: #3e5567; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.technical-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.technical-choice-grid.compact { grid-template-columns: repeat(auto-fit, minmax(54px, 1fr)); }
.technical-choice {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 10px; border-radius: 10px; border: 1px solid #d6e1e9; background: #fff;
  color: #4b6171; font-weight: 700; font-size: 12px; cursor: pointer; transition: .18s ease;
}
.technical-choice:hover { border-color: #7db4d5; background: #f5fbff; }
.technical-choice.selected { border-color: #2781b6; background: #e8f5fc; color: #155c86; box-shadow: 0 0 0 2px rgba(39,129,182,.08); }

.bilateral-order-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 26px 28px; }
.ear-order-card { border: 1px solid #dbe6ed; border-radius: 18px; padding: 20px; background: #fff; box-shadow: 0 10px 28px rgba(34,76,105,.06); }
.ear-order-title {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: -20px -20px 20px;
  padding: 12px; border-radius: 18px 18px 0 0; background: linear-gradient(135deg, #0e4e80, #176ca5); color: #fff; letter-spacing: .04em;
}
.ear-order-card.side-r .ear-order-title { background: linear-gradient(135deg, #1b5e8c, #2b7ca8); }
.ear-order-card > * + * { margin-top: 17px; }
.ear-compact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
.kit-order-block { margin-top: 22px !important; padding-top: 18px; border-top: 1px dashed #cfdae2; }
.kit-order-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; color: #1d5c83; }
.kit-order-head span { display: block; font-size: 11px; color: #7a8b98; margin-top: 2px; }
.kit-order-block .form-field { margin-top: 14px; }
.technical-bottom-grid { padding: 4px 28px 28px; }

.route-decision-panel { padding: 26px 28px; }
.route-decision-head { margin-bottom: 18px; }
.route-decision-head h3 { margin: 4px 0 6px; }
.route-option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.route-option-card {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-align: left;
  min-height: 108px; padding: 18px; border-radius: 16px; border: 1px solid #d8e3ea; background: #fff; cursor: pointer; transition: .2s ease;
}
.route-option-card:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(32,72,99,.08); }
.route-option-card.selected { border-color: #2f86b7; box-shadow: 0 0 0 3px rgba(47,134,183,.09); }
.route-option-card.direct.selected { border-color: #2c9a73; background: #f0fbf7; }
.route-option-card.lab.selected { background: #f1f8fd; }
.route-option-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #edf5fa; color: #286e99; }
.route-option-card.direct .route-option-icon { background: #e7f7ef; color: #20815d; }
.route-option-card strong { display: block; color: #17384f; font-size: 15px; }
.route-option-card span { display: block; margin-top: 5px; color: #6c7e8b; font-size: 12px; line-height: 1.5; }
.route-lab-select { display: grid; grid-template-columns: 220px minmax(260px, 520px); align-items: center; gap: 14px; margin-top: 18px; padding: 16px; border-radius: 14px; background: #f5f9fc; }
.route-lab-select label { font-weight: 800; color: #35566d; }
.route-lab-select select { width: 100%; }
.route-action-footer { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

.job-identity-codes { display: flex; align-items: center; gap: 14px; }
.job-barcode-block { min-width: 260px; max-width: 440px; }
.job-qr-code { width: 104px; height: 104px; object-fit: contain; background: #fff; border-radius: 8px; }
.job-identity-codes.compact .job-barcode-block { min-width: 240px; max-width: 340px; }
.job-identity-codes.compact .job-qr-code { width: 82px; height: 82px; }
.fixed-id-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 26px; }
.fixed-id-copy h2 { margin: 3px 0 5px; font-size: clamp(27px, 3vw, 42px); color: #123f61; letter-spacing: .025em; }
.fixed-id-copy p { margin: 0; color: #6e8190; }
.patient-job-header { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.patient-job-header h2 { margin: 4px 0 8px; }
.patient-header-facts { display: flex; flex-wrap: wrap; gap: 14px 20px; color: #607485; font-size: 13px; }
.audiologist-ready-panel,
.fixed-scan-handover { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 26px; }
.audiologist-ready-panel { background: linear-gradient(135deg, #f0f8fe, #fff); border-color: #c9e0ef; }
.fixed-scan-handover { background: linear-gradient(135deg, #fffaf1, #fff); border-color: #ecd6ad; }
.fixed-scan-handover.is-my-turn { background: linear-gradient(135deg, #eef8ff, #fff); border-color: #b9d9ee; }
.fixed-scan-handover.is-my-turn .fixed-scan-icon { color: #176ea3; background: #e4f3fc; }
.fixed-scan-handover.is-waiting { background: linear-gradient(135deg, #fffaf1, #fff); border-color: #ecd6ad; }
.fixed-scan-icon { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 15px; display: grid; place-items: center; color: #9b6418; background: #fff1d5; }
.fixed-scan-handover > div:nth-child(2) { flex: 1; }
.fixed-scan-handover h3,
.audiologist-ready-panel h3 { margin: 4px 0 6px; }
.fixed-scan-handover p,
.audiologist-ready-panel p { margin: 0; color: #687b89; }
.fixed-scan-note { margin-top: 18px; padding: 14px 16px; border-radius: 13px; background: #f5f9fc; display: flex; flex-direction: column; gap: 3px; color: #607485; }
.fixed-scan-note strong { color: #214f72; }

.approved-order-summary .lab-work-order-head { align-items: center; }
.approved-order-topfacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.approved-order-topfacts > div { padding: 13px; border: 1px solid #e1e9ef; background: #f9fbfc; border-radius: 12px; }
.approved-order-topfacts span { display: block; color: #718493; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.approved-order-topfacts strong { display: block; margin-top: 5px; color: #24485f; }
.approved-ear-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.approved-ear-summary { border: 1px solid #dce6ed; border-radius: 16px; overflow: hidden; background: #fff; }
.approved-ear-summary.empty { padding-bottom: 16px; }
.approved-ear-summary.empty p { padding: 0 16px; color: #84939e; }
.approved-ear-title { padding: 11px 14px; display: flex; align-items: center; gap: 8px; background: #eef6fb; color: #1d5f8a; }
.approved-ear-summary dl { margin: 0; }
.approved-ear-summary dl > div { display: grid; grid-template-columns: 42% 1fr; gap: 8px; padding: 9px 13px; border-top: 1px solid #edf1f4; }
.approved-ear-summary dt { color: #738493; font-size: 12px; }
.approved-ear-summary dd { margin: 0; color: #2d4d62; font-weight: 700; font-size: 12px; }
.route-summary-row { display: flex; align-items: center; gap: 10px; }
.route-summary-row span { display: block; color: #718493; font-size: 11px; }
.route-summary-row strong { display: block; margin-top: 2px; color: #24485f; }

.job-label-print { display: none; }

@media (max-width: 1050px) {
  .technical-top-grid { grid-template-columns: 1fr 1fr; }
  .technical-top-grid > :last-child { grid-column: 1 / -1; }
  .bilateral-order-grid { grid-template-columns: 1fr; }
  .approved-order-topfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fixed-id-panel { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 760px) {
  .reception-intake-hero,
  .reception-intake-footer,
  .patient-readonly-banner,
  .patient-job-header,
  .audiologist-ready-panel,
  .fixed-scan-handover { flex-direction: column; align-items: stretch; }
  .reception-flow-mini { gap: 6px; }
  .reception-flow-mini b { display: none; }
  .intake-section-block { padding: 20px; }
  .reception-intake-form > .panel-header { padding: 20px; }
  .technical-top-grid { grid-template-columns: 1fr; padding: 18px; }
  .technical-top-grid > :last-child { grid-column: auto; }
  .bilateral-order-grid { padding: 18px; gap: 18px; }
  .technical-bottom-grid { padding: 2px 18px 20px; }
  .route-decision-panel { padding: 20px; }
  .route-option-grid { grid-template-columns: 1fr; }
  .route-lab-select { grid-template-columns: 1fr; }
  .approved-order-topfacts,
  .approved-ear-grid { grid-template-columns: 1fr; }
  .ear-compact-grid { grid-template-columns: 1fr; }
  .job-identity-codes { width: 100%; flex-direction: column; align-items: stretch; }
  .job-barcode-block,
  .job-identity-codes.compact .job-barcode-block { min-width: 0; max-width: none; width: 100%; }
  .job-qr-code,
  .job-identity-codes.compact .job-qr-code { align-self: center; }
}

@media print {
  body { background: #fff !important; }
  body[data-print-mode] .sidebar,
  body[data-print-mode] .topbar,
  body[data-print-mode] .no-print,
  body[data-print-mode] .toast-stack { display: none !important; }
  body[data-print-mode] .main-shell,
  body[data-print-mode] .page-content,
  body[data-print-mode] .route-stage,
  body[data-print-mode] .job-detail-v35 { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; }

  body[data-print-mode="label"] .job-detail-v35 > *:not(.job-label-print) { display: none !important; }
  body[data-print-mode="label"] .job-label-print {
    display: block !important; width: 92mm; min-height: 52mm; box-sizing: border-box;
    border: 1px solid #111; padding: 4mm; margin: 0; background: #fff; color: #111;
  }
  body[data-print-mode="label"] .job-label-brand { font-size: 9pt; font-weight: 800; letter-spacing: .06em; margin-bottom: 2mm; }
  body[data-print-mode="label"] .job-label-patient span,
  body[data-print-mode="label"] .job-label-id span { display: block; font-size: 7pt; text-transform: uppercase; }
  body[data-print-mode="label"] .job-label-patient strong { display: block; font-size: 13pt; margin: .5mm 0 1mm; }
  body[data-print-mode="label"] .job-label-mrn { font-size: 8pt; margin-bottom: 1mm; }
  body[data-print-mode="label"] .job-label-id strong { display: block; font-size: 11pt; margin-bottom: 1.5mm; }
  body[data-print-mode="label"] .job-identity-codes { flex-direction: row !important; gap: 3mm; align-items: center; }
  body[data-print-mode="label"] .job-barcode-block { min-width: 0 !important; width: 62mm; }
  body[data-print-mode="label"] .job-qr-code { width: 20mm !important; height: 20mm !important; }

  body[data-print-mode="job"] .job-label-print { display: none !important; }
  body[data-print-mode="job"] .print-job-section,
  body[data-print-mode="job"] .lab-work-order { break-inside: avoid; box-shadow: none !important; }
  body[data-print-mode="job"] .panel { box-shadow: none !important; border-color: #bbb !important; }
}

/* =========================================================
   v35.2 - Cleaner Job Detail + one-page branded print sheet
   ========================================================= */
.job-card-print-sheet { display: none; }

.job-detail-v35 { gap: 18px; }
.detail-toolbar { margin-bottom: 2px; }

.job-overview-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d9e5ed;
  background: #fff;
  box-shadow: 0 18px 42px rgba(28, 66, 92, .08);
}
.job-overview-main { padding: 22px 26px 24px; min-width: 0; }
.job-overview-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid #e7eef3; }
.job-overview-brand img { width: 94px; height: 52px; object-fit: contain; object-position: left center; flex: 0 0 auto; }
.job-overview-brand strong { display: block; margin-top: 4px; color: #526a7b; font-size: 12px; font-weight: 700; }
.job-overview-id { padding: 18px 0 15px; }
.job-overview-id h2 { margin: 3px 0 5px; color: #173f5e; font-size: clamp(29px, 3vw, 42px); line-height: 1; letter-spacing: -.025em; }
.job-overview-id p { margin: 0; color: #718493; font-size: 13px; }
.job-overview-patient { padding-top: 15px; border-top: 1px solid #e7eef3; }
.job-overview-patient h3 { margin: 3px 0 10px; color: #17293b; font-size: 22px; }
.job-overview-patient .patient-header-facts { gap: 8px; }
.job-overview-patient .patient-header-facts span {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 10px; border-radius: 9px; background: #f5f8fa; color: #425e72; font-size: 12px;
}
.job-overview-patient .patient-header-facts strong { color: #81909c; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.job-overview-side {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  padding: 22px; border-left: 1px solid #e2eaf0;
  background: linear-gradient(180deg, #f7fbfe, #f1f7fb);
}
.job-overview-status { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.job-overview-side .job-identity-codes { flex-direction: column; align-items: stretch; gap: 10px; }
.job-overview-side .job-barcode-block { min-width: 0; width: 100%; max-width: none; }
.job-overview-side .job-qr-code { width: 72px; height: 72px; align-self: flex-end; }

.approved-order-summary {
  overflow: hidden;
  border: 1px solid #d8e5ed;
  box-shadow: 0 16px 38px rgba(26, 70, 101, .07);
}
.approved-order-summary .lab-work-order-head {
  padding: 20px 24px;
  background: linear-gradient(135deg, #f8fbfd, #eef7fc);
  border-bottom: 1px solid #dfeaf1;
}
.approved-order-summary .lab-work-order-head h3 { margin: 3px 0 4px; font-size: 22px; }
.approved-order-summary .lab-work-order-head p { margin: 0; font-size: 12px; }
.approved-order-summary .work-order-routing-grid { padding: 14px 22px; background: #fff; }
.approved-order-summary .lab-work-order-body { padding: 18px 22px 22px; background: #fbfdfe; }
.approved-order-topfacts { gap: 9px; margin-bottom: 14px; }
.approved-order-topfacts > div { padding: 10px 11px; background: #fff; border-radius: 10px; }
.approved-ear-grid { gap: 12px; }
.approved-ear-summary { border-radius: 12px; }
.approved-ear-title { padding: 9px 12px; }
.approved-ear-summary dl > div { padding: 7px 11px; }

.detail-header-card.detail-journey-card {
  border: 1px solid #d9e5ed;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(26, 70, 101, .07);
}
.detail-header-card.detail-journey-card::after { display: none; }
.detail-header-card.detail-journey-card .detail-journey-top {
  margin: 0;
  padding: 18px 22px;
  border-radius: 19px 19px 0 0;
  background: linear-gradient(135deg, #173f5e, #2d6388);
}
.detail-header-card.detail-journey-card .detail-journey-top h2 {
  margin: 2px 0 4px;
  font-size: 26px;
  letter-spacing: -.025em;
}
.detail-header-card.detail-journey-card .detail-journey-top p { font-size: 12px; }
.detail-header-card.detail-journey-card .detail-progress-chip { min-height: 32px; padding: 7px 11px; }
.detail-header-card.detail-journey-card .detail-journey-grid { padding: 14px; }
.detail-header-card.detail-journey-card .journey-main-card {
  padding: 16px 18px;
  border-radius: 14px;
  box-shadow: none;
}
.detail-header-card.detail-journey-card .journey-progressbar { margin-bottom: 14px; }
.detail-header-card.detail-journey-card .journey-progressbar-track { height: 8px; }
.detail-header-card.detail-journey-card .journey-progressbar-labels { margin-top: 5px; font-size: 9px; }
.detail-header-card.detail-journey-card .status-stepper.compact { margin-top: 2px; }
.detail-header-card.detail-journey-card .journey-meta-list.grid { margin-top: 14px; gap: 9px; }
.detail-header-card.detail-journey-card .journey-meta-item { min-height: 58px; padding: 11px 12px; border-radius: 11px; }
.status-stepper.direct-route { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin-inline: auto; }

.detail-grid { grid-template-columns: 1fr; }
.detail-grid .panel { box-shadow: 0 12px 30px rgba(28, 66, 92, .06); }

@media (max-width: 1050px) {
  .job-overview-panel { grid-template-columns: 1fr; }
  .job-overview-side { border-left: 0; border-top: 1px solid #e2eaf0; }
  .job-overview-side .job-identity-codes { flex-direction: row; align-items: center; }
  .job-overview-side .job-barcode-block { flex: 1; }
}

@media (max-width: 760px) {
  .job-overview-main { padding: 18px; }
  .job-overview-side { padding: 18px; }
  .job-overview-brand { align-items: flex-start; }
  .job-overview-brand img { width: 76px; height: 44px; }
  .job-overview-patient .patient-header-facts { display: grid; grid-template-columns: 1fr; }
  .job-overview-side .job-identity-codes { flex-direction: column; }
  .job-overview-side .job-qr-code { align-self: center; }
  .approved-order-summary .lab-work-order-head,
  .approved-order-summary .work-order-routing-grid,
  .approved-order-summary .lab-work-order-body { padding-left: 16px; padding-right: 16px; }
  .detail-header-card.detail-journey-card .detail-journey-top { padding: 16px; }
  .detail-header-card.detail-journey-card .detail-journey-top h2 { font-size: 22px; }
  .status-stepper.direct-route { grid-template-columns: repeat(3, 170px); overflow-x: auto; justify-content: start; }
}

@media print {
  @page { size: A4 portrait; margin: 0; }

  html, body { width: 210mm !important; min-width: 210mm !important; background: #fff !important; }
  body[data-print-mode="job"] * { visibility: hidden !important; }
  body[data-print-mode="job"] .job-card-print-sheet,
  body[data-print-mode="job"] .job-card-print-sheet * { visibility: visible !important; }
  body[data-print-mode="job"] .job-card-print-sheet {
    display: grid !important;
    position: absolute;
    inset: 0 auto auto 0;
    width: 210mm;
    height: 297mm;
    box-sizing: border-box;
    padding: 8mm;
    margin: 0;
    grid-template-rows: 35mm 16mm 13mm 1fr 31mm 15mm;
    gap: 2.5mm;
    overflow: hidden;
    background: #fff;
    color: #102536;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body[data-print-mode="job"] .print-card-header {
    display: grid;
    grid-template-columns: 1.15fr .85fr 1.2fr;
    align-items: stretch;
    border: 1.4px solid #315e87;
    border-radius: 2.5mm;
    overflow: hidden;
  }
  body[data-print-mode="job"] .print-brand-block,
  body[data-print-mode="job"] .print-title-block,
  body[data-print-mode="job"] .print-code-block { padding: 3.2mm; }
  body[data-print-mode="job"] .print-brand-block { display: flex; align-items: center; gap: 3mm; border-right: 1px solid #b7c9d8; }
  body[data-print-mode="job"] .print-brand-block img { width: 25mm; height: 20mm; object-fit: contain; object-position: left center; }
  body[data-print-mode="job"] .print-brand-block strong { display: block; font-size: 8pt; line-height: 1.18; color: #1e4f7b; }
  body[data-print-mode="job"] .print-brand-block span { display: block; margin-top: 1.4mm; font-size: 6.8pt; color: #425f75; }
  body[data-print-mode="job"] .print-title-block { display: grid; place-content: center; text-align: center; border-right: 1px solid #b7c9d8; }
  body[data-print-mode="job"] .print-title-block h1 { margin: 0; color: #174e83; font-size: 22pt; line-height: 1; letter-spacing: .02em; }
  body[data-print-mode="job"] .print-title-block p { margin: 2mm 0 0; color: #2f4353; font-size: 7.2pt; font-weight: 700; }
  body[data-print-mode="job"] .print-code-block { display: grid; grid-template-columns: 1fr 19mm; grid-template-rows: 1fr auto; column-gap: 2mm; align-items: center; }
  body[data-print-mode="job"] .print-code-block .job-identity-codes { display: contents !important; }
  body[data-print-mode="job"] .print-code-block .job-barcode-block { grid-column: 1; min-width: 0 !important; width: 100%; max-width: none; }
  body[data-print-mode="job"] .print-code-block .job-qr-code { grid-column: 2; width: 19mm !important; height: 19mm !important; border-radius: 0; }
  body[data-print-mode="job"] .print-code-block .transfer-barcode-svg { width: 100%; height: 16mm; }
  body[data-print-mode="job"] .print-job-number { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: baseline; gap: 2mm; padding-top: 1mm; border-top: 1px solid #d3dfe8; }
  body[data-print-mode="job"] .print-job-number span { font-size: 6.5pt; color: #586f81; }
  body[data-print-mode="job"] .print-job-number strong { font-size: 8.5pt; color: #173f5e; }

  body[data-print-mode="job"] .print-patient-strip,
  body[data-print-mode="job"] .print-meta-strip {
    display: grid;
    border: 1px solid #8ba8be;
    border-radius: 2mm;
    overflow: hidden;
  }
  body[data-print-mode="job"] .print-patient-strip { grid-template-columns: 1.45fr .75fr .85fr 1.2fr; }
  body[data-print-mode="job"] .print-meta-strip { grid-template-columns: .65fr 1.25fr 1.2fr .7fr .65fr; }
  body[data-print-mode="job"] .print-patient-strip > div,
  body[data-print-mode="job"] .print-meta-strip > div { padding: 2.2mm 2.5mm; border-right: 1px solid #d4e0e8; min-width: 0; }
  body[data-print-mode="job"] .print-patient-strip > div:last-child,
  body[data-print-mode="job"] .print-meta-strip > div:last-child { border-right: 0; }
  body[data-print-mode="job"] .print-patient-strip span,
  body[data-print-mode="job"] .print-meta-strip span { display: block; margin-bottom: .8mm; font-size: 5.8pt; color: #657d8e; text-transform: uppercase; letter-spacing: .04em; }
  body[data-print-mode="job"] .print-patient-strip strong,
  body[data-print-mode="job"] .print-meta-strip strong { display: block; font-size: 7.5pt; line-height: 1.2; color: #18364c; overflow-wrap: anywhere; }

  body[data-print-mode="job"] .print-ear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; min-height: 0; }
  body[data-print-mode="job"] .print-ear-card { min-height: 0; border: 1.2px solid #315e87; border-radius: 2.5mm; overflow: hidden; }
  body[data-print-mode="job"] .print-ear-heading { padding: 2.5mm; text-align: center; color: #fff; background: #15548b; font-size: 10pt; font-weight: 800; letter-spacing: .04em; }
  body[data-print-mode="job"] .print-ear-card table { width: 100%; height: calc(100% - 9mm); border-collapse: collapse; table-layout: fixed; }
  body[data-print-mode="job"] .print-ear-card tr { border-top: 1px solid #d5e0e8; }
  body[data-print-mode="job"] .print-ear-card th,
  body[data-print-mode="job"] .print-ear-card td { padding: 1.8mm 2.2mm; vertical-align: middle; font-size: 7.2pt; line-height: 1.15; }
  body[data-print-mode="job"] .print-ear-card th { width: 43%; text-align: left; color: #516b7d; font-weight: 700; background: #f5f9fc; }
  body[data-print-mode="job"] .print-ear-card td { color: #172f43; font-weight: 700; overflow-wrap: anywhere; }

  body[data-print-mode="job"] .print-notes-box { border: 1.2px solid #315e87; border-radius: 2.5mm; padding: 3mm; overflow: hidden; }
  body[data-print-mode="job"] .print-notes-box span { display: block; margin-bottom: 2mm; color: #1b5688; font-size: 7pt; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
  body[data-print-mode="job"] .print-notes-box p { margin: 0; color: #263f51; font-size: 7.3pt; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }

  body[data-print-mode="job"] .print-card-footer { display: grid; grid-template-columns: 1.35fr .65fr; gap: 4mm; }
  body[data-print-mode="job"] .print-route-box,
  body[data-print-mode="job"] .print-signature-box { display: flex; flex-direction: column; justify-content: center; padding: 2.4mm 3mm; border: 1px solid #8ba8be; border-radius: 2mm; }
  body[data-print-mode="job"] .print-route-box span,
  body[data-print-mode="job"] .print-signature-box span { margin-bottom: 1mm; color: #657d8e; font-size: 5.8pt; text-transform: uppercase; letter-spacing: .04em; }
  body[data-print-mode="job"] .print-route-box strong,
  body[data-print-mode="job"] .print-signature-box strong { color: #173f5e; font-size: 7.4pt; line-height: 1.2; }
}

@media print {
  body[data-print-mode="job"] .job-detail-v35 > *:not(.job-card-print-sheet) { display: none !important; }
  body[data-print-mode="job"] .job-card-print-sheet { position: relative; inset: auto; height: 296mm; }
}


/* =========================================================
   v35.4 - Button receipt, short IDs, code cards, table fixes
   ========================================================= */
.job-identity-codes {
  width: fit-content;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #dfe7ed;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(25, 64, 91, .06);
  box-sizing: border-box;
}
.job-barcode-block {
  padding: 5px 7px;
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}
.job-barcode-block .transfer-barcode-svg { display: block; width: 100%; background: #fff; }
.job-qr-code {
  padding: 5px;
  border: 1px solid #edf1f4;
  background: #fff !important;
  box-sizing: border-box;
}
.job-overview-side .job-identity-codes { margin-left: auto; justify-content: center; }

/* Keep long status labels inside their own table column. */
.tracking-job-table { min-width: 1260px; }
.tracking-job-table th:nth-child(4), .tracking-job-table td:nth-child(4) { width: 250px; }
.tracking-job-table th:nth-child(5), .tracking-job-table td:nth-child(5) { width: 190px; }
.tracking-job-table th:nth-child(6), .tracking-job-table td:nth-child(6) { width: 175px; }
.tracking-job-table td:nth-child(5) { overflow: hidden; }
.tracking-job-table td:nth-child(5) .status-badge {
  width: 100%;
  max-width: 100%;
  min-height: 30px;
  padding: 6px 8px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.tracking-job-table td:nth-child(6) .inline-detail {
  max-width: 100%;
  white-space: normal;
  line-height: 1.25;
}

/* Movement History now shows real Job Card events. */
.tracking-timeline-cell { min-width: 225px; }
.tracking-timeline-item { min-height: 44px; }
.tracking-timeline-item strong { white-space: normal; line-height: 1.2; }
.tracking-timeline-item small {
  margin-top: 1px !important;
  color: #738398 !important;
  font-size: 8px !important;
  line-height: 1.2;
}
.movement-empty {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  color: #8a96a6;
  font-size: 9px;
  line-height: 1.3;
}

@media print {
  body[data-print-mode="label"] .job-identity-codes,
  body[data-print-mode="job"] .job-identity-codes,
  body[data-print-mode="label"] .job-barcode-block,
  body[data-print-mode="job"] .job-barcode-block,
  body[data-print-mode="label"] .job-qr-code,
  body[data-print-mode="job"] .job-qr-code {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }
  body[data-print-mode="label"] .job-identity-codes {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

@media print {
  body[data-print-mode="label"] .job-label-brand-row {
    display: flex;
    align-items: center;
    gap: 3mm;
    padding-bottom: 2mm;
    margin-bottom: 2mm;
    border-bottom: 1px solid #d7dde2;
  }
  body[data-print-mode="label"] .job-label-brand-row img {
    width: 20mm;
    height: 12mm;
    object-fit: contain;
    object-position: left center;
  }
  body[data-print-mode="label"] .job-label-brand-row span {
    display: block;
    margin-top: .6mm;
    max-width: 55mm;
    font-size: 6.5pt;
    color: #42505c;
  }
  body[data-print-mode="label"] .job-label-search-note {
    margin-top: 1.5mm;
    font-size: 6pt;
    color: #4c5964;
    text-align: center;
  }
}