/* Brand palette: ASP Medical Group blue (from the logo). --teal / --teal-dark / --mint keep their old names but hold the brand blues. */
:root { --ink:#0b2540; --muted:#5f7186; --line:#e3eaf1; --paper:#f4f8fb; --white:#fff; --teal:#0077b6; --teal-dark:#005f92; --mint:#e8f3fa; --coral:#e7745f; --gold:#d8a13c; --blue:#4779bd; --shadow:0 14px 40px rgba(34,53,72,.08); }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font:14px 'DM Sans','DM Sans Fallback',sans-serif; } a { color:inherit; text-decoration:none; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } h1,h2,h3,p { margin-top:0; } h1,h2,h3,strong,.brand { font-family:'Manrope','Manrope Fallback',sans-serif; } h1 { font-size:30px; line-height:1.15; margin:0 0 8px; letter-spacing:0; } h2 { font-size:23px; line-height:1.2; margin-bottom:8px; } h3 { font-size:16px; } .eyebrow { color:var(--teal); font-size:11px; font-weight:700; letter-spacing:1.5px; margin-bottom:10px; } .brand { align-items:center; display:flex; font-size:17px; font-weight:800; gap:10px; letter-spacing:-.4px; } .brand em { color:#7abdf1; font-style:normal; font-weight:600; } .brand-mark { align-items:center; background:var(--teal); border-radius:9px 9px 9px 2px; color:white; display:flex; font-family:'Manrope','Manrope Fallback',sans-serif; font-size:17px; height:31px; justify-content:center; width:31px; } .brand-light { color:var(--ink); } .brand-light .brand-mark { background:#5fb7f9; } .button { align-items:center; border:0; border-radius:8px; display:inline-flex; font-weight:700; gap:12px; justify-content:center; padding:12px 17px; transition:.2s ease; } .button-primary { background:var(--teal); box-shadow:0 6px 16px rgba(0,119,182,.22); color:white; } .button-primary:hover { background:var(--teal-dark); transform:translateY(-1px); } .button-secondary { background:var(--mint); color:var(--teal-dark); } .button-danger { background:#fff0ee; color:#bc523e; } .button-full { width:100%; }
/* Login */ .login-page { background:#fff; min-height:100vh; } .login-shell { display:grid; grid-template-columns:minmax(360px,43%) 1fr; min-height:100vh; } .login-brand-panel { background:linear-gradient(160deg,#f4f9fd 0%,#e9f3fb 100%); border-right:1px solid var(--line); color:var(--ink); display:flex; flex-direction:column; justify-content:space-between; padding:44px 8vw 38px; position:relative; overflow:hidden; } .login-brand-panel:after { background:radial-gradient(circle at 85% 12%,rgba(0,153,204,.12),transparent 38%),radial-gradient(circle at 10% 95%,rgba(0,119,182,.08),transparent 40%),radial-gradient(rgba(11,37,64,.07) 1px,transparent 1.2px) 0 0/22px 22px; content:''; inset:0; pointer-events:none; position:absolute; } .login-brand-panel > * { position:relative; z-index:1; } .brand-copy { max-width:400px; } .brand-copy .eyebrow { color:var(--teal); } .brand-copy h1 { font-size:clamp(38px,4.5vw,62px); color:var(--ink); letter-spacing:-2px; margin:0 0 22px; } .brand-copy h1 span { color:var(--teal); } .brand-copy p:last-child { color:var(--muted); font-size:16px; line-height:1.7; max-width:340px; } .login-panel-footer { color:var(--muted); font-size:12px; } .pulse-dot { background:#1fae6b; box-shadow:0 0 0 4px rgba(31,174,107,.15); border-radius:50%; display:inline-block; height:7px; margin-right:7px; width:7px; } .login-form-panel { align-items:center; display:flex; justify-content:center; padding:48px; } .login-form-wrap { max-width:420px; width:100%; } .mobile-brand { display:none; } .form-heading { margin-bottom:31px; } .form-heading p:last-child { color:var(--muted); } .stack-form { display:grid; gap:19px; } label { color:#384858; display:grid; font-size:12px; font-weight:700; gap:8px; } input,select,textarea { background:white; border:1px solid #d6e0ea; border-radius:8px; color:var(--ink); outline:none; padding:13px 14px; width:100%; } input:focus,select:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(4,116,178,.1); } textarea { min-height:92px; resize:vertical; } .password-field { position:relative; } .password-field input { padding-right:60px; } .password-toggle { background:none; border:0; color:var(--teal); font-size:12px; font-weight:700; padding:4px; position:absolute; right:10px; top:10px; } .form-row { align-items:center; display:flex; gap:14px; } .form-row-between { justify-content:space-between; } .check-label { align-items:center; display:flex; font-size:12px; font-weight:500; gap:8px; } .check-label input { accent-color:var(--teal); height:15px; width:15px; } .text-link { color:var(--teal); font-size:12px; font-weight:700; } .form-error { color:#bd523e; font-size:12px; min-height:17px; margin:0; } .demo-accounts { border-top:1px solid var(--line); display:grid; gap:8px; margin-top:32px; padding-top:19px; } .demo-accounts strong { font-size:12px; margin-bottom:3px; } .demo-accounts button { background:transparent; border:1px solid var(--line); border-radius:5px; color:var(--teal); display:flex; font-size:12px; font-weight:700; justify-content:space-between; padding:9px 11px; text-align:left; } .demo-accounts button span { color:var(--muted); font-weight:400; } .login-legal { color:#9da7b1; font-size:11px; margin:30px 0 0; }
.form-success { color:var(--teal); font-size:12px; min-height:17px; margin:0; } .demo-accounts { border-top:1px solid var(--line); display:grid; gap:8px; margin-top:32px; padding-top:19px; } .demo-accounts strong { font-size:12px; margin-bottom:3px; } .demo-accounts button { background:transparent; border:1px solid var(--line); border-radius:5px; color:var(--teal); display:flex; font-size:12px; font-weight:700; justify-content:space-between; padding:9px 11px; text-align:left; } .demo-accounts button span { color:var(--muted); font-weight:400; } .login-legal { color:#9da7b1; font-size:11px; margin:30px 0 0; }
.auth-switch { color:var(--muted); font-size:12px; margin:20px 0 0; text-align:center; }
.login-legal { text-align:center; }

/* ── Page loader, transitions and busy buttons (js/public-motion.js; public and sign-in pages) ──
   The overlay never blocks clicks while loading and only becomes visible after 150 ms, so fast
   pages never flash it. If the script fails, it removes itself after 6 s. */
.page-loader { animation:page-loader-failsafe .3s ease 6s forwards; inset:0; pointer-events:none; position:fixed; transition:opacity .3s ease, visibility .3s; z-index:200; }
.page-loader-inner { align-items:center; animation:page-loader-in .25s ease .15s forwards; background:var(--paper); display:flex; flex-direction:column; gap:18px; height:100%; justify-content:center; opacity:0; }
.page-ready .page-loader { opacity:0; visibility:hidden; }
.page-leaving .page-loader { animation:none; opacity:1; pointer-events:auto; transition-duration:.18s; visibility:visible; }
.page-leaving .page-loader-inner { animation:none; opacity:1; }
/* Loader switched off (hidden attribute): leaving a page fades its content out instead. */
.page-loader[hidden] { display:none !important; }
.no-page-loader.page-leaving body > :not(script) { opacity:0; transition:opacity .18s ease; }
.loader-mark { display:grid; height:52px; place-items:center; position:relative; width:52px; }
.loader-mark:before { animation:spin .9s linear infinite; border:3px solid var(--mint); border-radius:50%; border-top-color:var(--teal); content:''; inset:-9px; position:absolute; }
.loader-mark .brand-mark { font-size:21px; height:42px; width:42px; }
.loader-text { color:var(--teal-dark); font-family:'Manrope','Manrope Fallback',sans-serif; font-size:15px; font-weight:800; letter-spacing:-.3px; }
.loader-text em { color:#56a5df; font-style:normal; font-weight:600; }
.button.is-loading { cursor:progress; opacity:.88; }
.button.is-loading:before { animation:spin .7s linear infinite; border:2px solid currentColor; border-radius:50%; border-right-color:transparent; content:''; flex:0 0 auto; height:14px; width:14px; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes page-loader-in { to { opacity:1; } }
@keyframes page-loader-failsafe { to { opacity:0; visibility:hidden; } }
@keyframes page-enter { from { opacity:0; transform:translate3d(0,10px,0); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:no-preference) {
  .login-page .login-form-wrap { animation:page-enter .45s cubic-bezier(.2,.65,.3,1) both; }
  .login-page .brand-copy { animation:page-enter .6s cubic-bezier(.2,.65,.3,1) .08s both; }
}
@media (prefers-reduced-motion:reduce) {
  .page-loader,.page-loader-inner,.page-leaving .page-loader { transition:none; }
  .loader-mark:before { animation:none; }
  .button.is-loading:before { animation-duration:2s; }
}
.back-to-portal { display:inline-block; margin-bottom:22px; }
/* Sign-in pages: the brand panel stays in place while the form column scrolls (desktop only; it is hidden at 900px and below). */
@media (min-width:901px) { .login-brand-panel { align-self:start; height:100vh; height:100dvh; position:sticky; top:0; } }
/* Signup password requirements (js/password-strength.js). */
.password-eye { align-items:center; background:none; border:0; color:#8d98a3; display:flex; height:100%; padding:0 13px; position:absolute; right:0; top:0; }
.password-eye:hover,.password-eye:focus-visible { color:var(--teal); outline:none; }
.password-eye svg { fill:none; height:18px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:18px; }
.password-field:has(.password-eye) input { padding-right:46px; }
.password-meter { margin-top:-11px; }
.password-meter[hidden] { display:none; }
.password-meter-bar { background:#edf1f0; border-radius:4px; height:5px; overflow:hidden; }
.password-meter-bar span { background:#e5484d; border-radius:4px; display:block; height:100%; transition:width .25s ease, background .25s ease; width:0; }
.password-meter.is-fair .password-meter-bar span { background:#d8a13c; }
.password-meter.is-good .password-meter-bar span { background:#5bb38f; }
.password-meter.is-strong .password-meter-bar span { background:var(--teal); }
.password-meter-label { color:#e5484d; font-size:12px; font-weight:600; margin:6px 0 10px; min-height:16px; text-align:right; }
.password-meter.is-fair .password-meter-label { color:#a4731e; }
.password-meter.is-good .password-meter-label,.password-meter.is-strong .password-meter-label { color:var(--teal); }
.password-rules { display:grid; gap:7px; list-style:none; margin:0; padding:0; }
.password-rules li { color:#9da7b1; font-size:12px; padding-left:22px; position:relative; transition:color .2s; }
.password-rules li:before { color:#c6ced7; content:'✓'; font-weight:700; left:2px; position:absolute; }
.password-rules li.met { color:var(--ink); }
.password-rules li.met:before { color:var(--teal); }
.password-match { color:#bd523e; font-size:12px; margin:-11px 0 0; min-height:0; }
.password-match:empty { display:none; }
.password-match.ok { color:var(--teal); } .login-form-wrap [data-return-notice][hidden] { display:none; }
/* App shell */ .sidebar { background:#fff; border-right:1px solid var(--line); color:var(--ink); display:flex; flex-direction:column; height:100vh; padding:27px 17px 17px; position:fixed; width:248px; z-index:10; } .sidebar-top { align-items:center; display:flex; justify-content:space-between; padding:0 10px; } .sidebar .brand { color:var(--ink); } .sidebar .brand-mark { background:#56b2f5; } .sidebar .brand em { color:#89c6f6; } .portal-label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1.4px; margin:55px 11px 16px; } .sidebar nav { display:grid; gap:5px; } .nav-item { align-items:center; border-radius:8px; color:#45576b; display:flex; font-size:13px; gap:12px; padding:12px 11px; transition:.2s; } .nav-item:hover { background:var(--paper); color:var(--ink); } .nav-item.active { background:var(--mint); color:var(--teal-dark); font-weight:600; } .nav-item.active { box-shadow:inset 3px 0 var(--teal); } .nav-icon { align-items:center; display:inline-flex; font-size:17px; height:18px; justify-content:center; width:18px; } .nav-item i { background:#ee866f; border-radius:12px; color:white; font-size:10px; font-style:normal; margin-left:auto; padding:2px 6px; } .sidebar-bottom { margin-top:auto; } .support-link { color:var(--muted); display:block; font-size:12px; padding:13px 11px; } .sidebar-user { align-items:center; border-top:1px solid var(--line); display:flex; gap:9px; margin-top:9px; padding:17px 8px 5px; } .sidebar-user strong,.sidebar-user small { display:block; max-width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .sidebar-user strong { color:var(--ink); font-size:11px; } .sidebar-user small { color:var(--muted); font-size:10px; margin-top:3px; } .sidebar-user button { background:none; border:0; color:var(--muted); font-size:17px; margin-left:auto; } .avatar { align-items:center; background:#cfe6ff; border-radius:50%; color:var(--teal-dark); display:inline-flex; flex:0 0 auto; font-size:11px; font-weight:800; height:32px; justify-content:center; width:32px; } .main-wrap { margin-left:248px; min-height:100vh; } .topbar { align-items:center; background:white; border-bottom:1px solid var(--line); display:flex; height:70px; justify-content:space-between; padding:0 4.5%; } .breadcrumb { color:#868f98; font-size:12px; } .breadcrumb span { color:#cdd4dc; margin:0 10px; } .topbar-actions { align-items:center; display:flex; gap:24px; } .notification-button { color:var(--teal-dark); font-size:21px; position:relative; } .notification-count { background:var(--coral); border:2px solid white; border-radius:10px; color:white; font-size:9px; padding:1px 4px; position:absolute; right:-8px; top:-5px; } .topbar-avatar { height:30px; width:30px; } .menu-toggle,.sidebar-close { background:none; border:0; color:var(--teal); display:none; font-size:21px; } .page-content { margin:0 auto; max-width:1380px; padding:43px 4.5% 70px; } .page-heading { align-items:flex-end; display:flex; justify-content:space-between; margin-bottom:32px; } .page-heading > div > p:last-child { color:var(--muted); margin:0; } .dashboard-grid { display:grid; gap:19px; grid-template-columns:repeat(4,1fr); margin-bottom:24px; } .metric-card { background:white; border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 15px rgba(31,49,67,.03); padding:21px; } .metric-top { align-items:center; display:flex; justify-content:space-between; } .metric-label { color:var(--muted); font-size:12px; } .metric-value { font-family:'Manrope','Manrope Fallback',sans-serif; font-size:28px; font-weight:800; margin:15px 0 6px; } .metric-meta { color:#639dca; font-size:11px; } .metric-icon { align-items:center; background:var(--mint); border-radius:6px; color:var(--teal); display:flex; font-size:18px; height:34px; justify-content:center; width:34px; } .two-column { display:grid; gap:24px; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); } .panel { background:white; border:1px solid var(--line); border-radius:8px; box-shadow:0 4px 15px rgba(31,49,67,.03); } .panel-heading { align-items:center; display:flex; justify-content:space-between; padding:20px 22px; } .panel-heading h2 { font-size:16px; margin:0; } .panel-heading p { color:var(--muted); font-size:12px; margin:5px 0 0; } .panel-link,.table-action { color:var(--teal); font-size:12px; font-weight:700; } .table-wrap { overflow-x:auto; } table { border-collapse:collapse; min-width:680px; width:100%; } th { background:#f8faf9; color:#848e98; font-size:10px; font-weight:700; letter-spacing:.5px; padding:12px 22px; text-align:left; text-transform:uppercase; } td { border-top:1px solid #edf1f0; font-size:12px; padding:15px 22px; vertical-align:middle; } td strong,td small { display:block; } td small { color:var(--muted); font-size:10px; margin-top:4px; } .table-id { color:var(--teal-dark); } .status { align-items:center; background:#edf4fa; border-radius:14px; color:#337bae; display:inline-flex; font-size:10px; font-weight:700; gap:6px; padding:6px 9px; white-space:nowrap; } .status > span { background:#5bb38f; border-radius:50%; height:5px; width:5px; } .status-new-submission { background:#fff4df; color:#a4731e; } .status-new-submission > span { background:#d8a13c; } .status-hr-verification,.status-doctor-nurse-manager-verification { background:#eaf0fb; color:#4779bd; } .status-hr-verification > span,.status-doctor-nurse-manager-verification > span { background:#4779bd; } .status-payment { background:#fff0e9; color:#c7684f; } .status-payment > span { background:#e7745f; } .status-completed { background:#e6f4ed; color:#388564; } .status-hold { background:#fff4df; color:#a4731e; } .status-hold > span { background:#d8a13c; } .filter-bar { align-items:center; display:flex; flex-wrap:wrap; gap:10px; margin-bottom:17px; } .search-field { max-width:270px; position:relative; } .search-field input { padding-left:36px; } .search-field span { color:#8d98a3; left:13px; position:absolute; top:12px; } .filter-bar select { max-width:190px; padding:12px; } .filter-bar .button { margin-left:auto; } .detail-grid { display:grid; gap:24px; grid-template-columns:1.45fr 1fr; } .form-panel { padding:25px; } .form-panel h2 { font-size:17px; margin-bottom:22px; } .form-grid { display:grid; gap:19px; grid-template-columns:repeat(2,1fr); } .form-grid .full { grid-column:1/-1; } .form-actions { border-top:1px solid var(--line); display:flex; gap:10px; justify-content:flex-end; margin-top:24px; padding-top:21px; } .info-list { display:grid; gap:0; } .info-list div { border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:14px 0; } .info-list div:last-child { border:0; } .info-list dt { color:var(--muted); font-size:12px; } .info-list dd { font-size:12px; font-weight:700; margin:0; text-align:right; } .notice { background:#f1f7fd; border-left:3px solid #69b4ed; border-radius:4px; color:#426e90; font-size:12px; line-height:1.55; margin-bottom:20px; padding:13px 15px; } .timeline { display:grid; gap:0; margin:4px 0 0 4px; } .timeline-item { border-left:1px solid #c9d9ea; padding:0 0 24px 23px; position:relative; } .timeline-item:last-child { border-left-color:transparent; padding-bottom:0; } .timeline-item:before { background:#62b4f2; border:3px solid white; border-radius:50%; box-shadow:0 0 0 1px #62b4f2; content:''; height:7px; left:-5px; position:absolute; top:2px; width:7px; } .timeline-item.pending:before { background:white; box-shadow:0 0 0 1px #bac6d3; } .timeline-item strong { display:block; font-size:12px; } .timeline-item p { color:var(--muted); font-size:11px; margin:5px 0 0; } .callout { background:#103955; border-radius:8px; color:white; margin-top:24px; padding:25px; } .callout h3 { color:#a6d7fe; margin-bottom:9px; } .callout p { color:#becee0; font-size:12px; line-height:1.6; margin-bottom:18px; } .callout .button { background:#a6d7fe; color:#103955; font-size:12px; } .notification-list { display:grid; gap:10px; } .notification-item { align-items:flex-start; background:white; border:1px solid var(--line); border-left:3px solid #62b4f2; border-radius:7px; display:flex; gap:15px; padding:18px 20px; } .notification-item.unread { background:#f7fcfa; } .notification-bullet { align-items:center; background:var(--mint); border-radius:50%; color:var(--teal); display:flex; flex:0 0 auto; height:32px; justify-content:center; width:32px; } .notification-item h3 { font-size:13px; margin-bottom:5px; } .notification-item p { color:var(--muted); font-size:12px; line-height:1.5; margin:0; } .notification-time { color:#969fa8; font-size:11px; margin-left:auto; white-space:nowrap; } .empty-state { color:var(--muted); padding:50px 20px; text-align:center; } .empty-state span { color:#99c6ea; font-size:29px; } .empty-state h3 { color:var(--ink); margin:10px 0 5px; } .empty-state p { font-size:12px; } .modal-backdrop { align-items:center; background:rgba(22,40,58,.5); display:none; inset:0; justify-content:center; padding:20px; position:fixed; z-index:20; } .modal-backdrop.open { display:flex; } .modal { background:white; border-radius:8px; max-width:560px; padding:27px; width:100%; } .modal-head { align-items:flex-start; display:flex; justify-content:space-between; } .modal-close { background:none; border:0; color:var(--muted); font-size:21px; } .modal-foot { display:flex; gap:9px; justify-content:flex-end; margin-top:20px; }
@media (max-width:900px) { .login-shell { grid-template-columns:1fr; } .login-brand-panel { display:none; } .mobile-brand { display:block; margin-bottom:65px; } .login-form-panel { min-height:100vh; padding:35px 7%; } .sidebar { transform:translateX(-100%); transition:.25s; } .sidebar-open .sidebar { box-shadow:10px 0 40px rgba(0,0,0,.18); transform:translateX(0); } .sidebar-close,.menu-toggle { display:block; } .sidebar-close { color:var(--muted); } .main-wrap { margin-left:0; } .menu-toggle { margin-right:18px; } .topbar { justify-content:flex-start; } .topbar-actions { margin-left:auto; } .dashboard-grid { grid-template-columns:repeat(2,1fr); } .two-column,.detail-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .login-form-panel { padding:25px 22px; } .mobile-brand { margin-bottom:48px; } .page-content { padding:30px 18px 50px; } .page-heading { align-items:flex-start; flex-direction:column; gap:18px; } .page-heading h1 { font-size:26px; } .dashboard-grid { gap:10px; } .metric-card { padding:15px; } .metric-value { font-size:22px; } .metric-icon { display:none; } .form-grid { grid-template-columns:1fr; } .form-grid .full { grid-column:auto; } .panel-heading { padding:17px; } td,th { padding-left:15px; padding-right:15px; } .filter-bar .button { margin-left:0; width:100%; } .filter-bar select,.search-field { max-width:none; width:100%; } .notification-time { display:none; } }
#profile-form select[name="profession"] + small { display:none; }

/* Profile circle menu in the top bar. */
.profile-menu { position:relative; }
.profile-menu .topbar-avatar { border:0; cursor:pointer; padding:0; transition:box-shadow .2s; }
.profile-menu .topbar-avatar:hover,.profile-menu .topbar-avatar[aria-expanded="true"] { box-shadow:0 0 0 3px rgba(4,116,178,.18); }
.profile-menu .topbar-avatar:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.profile-dropdown { background:white; border:1px solid var(--line); border-radius:8px; box-shadow:var(--shadow); min-width:200px; padding:6px; position:absolute; right:0; top:calc(100% + 10px); z-index:25; }
.profile-dropdown[hidden] { display:none; }
.profile-dropdown-head { border-bottom:1px solid var(--line); margin-bottom:6px; padding:8px 10px 10px; }
.profile-dropdown-head strong,.profile-dropdown-head small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-dropdown-head strong { font-size:12px; }
.profile-dropdown-head small { color:var(--muted); font-size:11px; margin-top:3px; }
.profile-dropdown [role="menuitem"] { background:none; border:0; border-radius:6px; color:#bc523e; font-size:13px; font-weight:700; padding:10px; text-align:left; width:100%; }
.profile-dropdown [role="menuitem"]:hover,.profile-dropdown [role="menuitem"]:focus-visible { background:#fff0ee; outline:none; }

/* PIC review modal: shift applied for + locum profile. */
.pic-review-details { margin:6px 0 20px; }
.pic-review-loading { color:var(--muted); font-size:12px; }
.pic-review-grid { display:grid; gap:16px; grid-template-columns:1fr 1fr; }
.pic-review-section { background:#f7faf9; border:1px solid var(--line); border-radius:8px; padding:14px 16px; }
.pic-review-section h3 { font-size:13px; margin:0 0 4px; }
.pic-review-heading { align-items:baseline; display:flex; justify-content:space-between; gap:10px; }
.pic-review-section .info-list div { padding:9px 0; }
.pic-review-note { color:#536271; font-size:12px; line-height:1.55; margin:10px 0 0; white-space:pre-line; }
.pic-review-note strong { color:var(--ink); display:block; font-size:11px; margin-bottom:2px; }
@media (max-width:640px) { .pic-review-grid { grid-template-columns:1fr; } }

/* Super Admin: Manager approvals folds out into Doctor / Nurse applications (js/app.js). */
.nav-submenu { display:grid; gap:2px; }
.nav-submenu > summary { cursor:pointer; list-style:none; }
.nav-submenu > summary::-webkit-details-marker { display:none; }
.nav-submenu > summary:after { color:var(--muted); content:'▸'; font-size:11px; margin-left:auto; transition:transform .15s; }
.nav-submenu[open] > summary:after { transform:rotate(90deg); }
.nav-item.nav-subitem { padding-left:41px; }

/* Super Admin PIC review: search and filters across all branches (js/pic.js). */
.pic-filter-bar { margin:0; padding:16px 22px; }
.pic-filter-bar .search-field { flex:1 1 240px; max-width:none; }
.pic-filter-bar select { flex:0 1 auto; }
@media (max-width:640px) { .pic-filter-bar { padding:14px 15px; } .pic-filter-bar .search-field,.pic-filter-bar select,.pic-filter-bar .button { flex:1 1 100%; margin-left:0; max-width:none; } }

/* Clickable history rows open the application details modal. */
tr[data-application-id]:hover, tr[data-application-id]:focus-visible { background:#f2f6fb; outline:none; }

/* Locum management Branch / Locum tabs (restored from the earlier stylesheet). */
.management-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin:0 0 22px}
.management-tabs button{background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;font:inherit;font-size:13px;padding:12px 4px}
.management-tabs button[aria-selected=true]{border-bottom-color:var(--teal);color:var(--teal-dark);font-weight:700}
.page-content .panel[hidden]{display:none}

/* Return-to-PIC workflow statuses. */
.status-returned-to-pic { background:#fff4df; color:#a4731e; }
.status-resubmitted-by-pic { background:#eaf0fb; color:#4779bd; }

/* Restored unsaved entries (js/page-state.js). */
.page-state-notice { background:#eff5fb; border-radius:6px; color:var(--teal-dark); font-size:12px; margin:0 0 14px; padding:9px 12px; }
.page-state-notice button { background:none; border:0; color:var(--teal); cursor:pointer; font:inherit; font-weight:700; padding:0 0 0 6px; text-decoration:underline; }
.page-state-file-note { color:#a4731e; display:block; font-size:11px; font-weight:500; margin-top:6px; }

/* Locked navigation for locums awaiting verification (js/app.js). */
.nav-item.nav-locked { color:#9aa8b8; cursor:not-allowed; position:relative; }
.nav-item.nav-locked:hover,.nav-item.nav-locked:focus-visible { background:var(--paper); color:#9aa8b8; outline:none; }
.nav-lock { fill:none; height:14px; margin-left:auto; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; width:14px; }
.nav-locked[data-tooltip]:hover:after,.nav-locked[data-tooltip]:focus-visible:after { background:#fff; border:1px solid #cbd4de; border-radius:4px; box-shadow:0 4px 14px rgba(0,0,0,.15); color:var(--ink); content:attr(data-tooltip); font-size:11px; left:calc(100% - 20px); padding:5px 8px; pointer-events:none; position:absolute; top:calc(100% - 8px); white-space:nowrap; z-index:30; }
.visually-hidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px; }
.muted { color:var(--muted); }

/* Locum Profile Completion (js/locum-profile.js). */
.verification-banner { align-items:flex-start; display:grid; gap:8px; margin-bottom:22px; padding:18px 22px; }
.verification-banner .status { justify-self:start; }
.verification-banner p { color:#4b5c6e; font-size:13px; line-height:1.6; margin:0; }
.verification-banner-note { color:#bc523e !important; font-weight:700; }
.profile-tabs { background:#e9eff7; border-radius:8px; display:flex; flex-wrap:wrap; gap:4px; margin-bottom:24px; padding:4px; }
.profile-tabs button { align-items:center; background:none; border:0; border-radius:6px; color:#637689; display:inline-flex; font-size:13px; font-weight:600; gap:6px; padding:9px 16px; }
.profile-tabs button[aria-selected="true"] { background:white; box-shadow:0 1px 4px rgba(31,49,67,.12); color:var(--ink); }
.profile-tabs button:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.tab-missing,.tab-count { background:#fff0e9; border-radius:10px; color:#c7684f; font-size:10px; font-weight:700; padding:1px 6px; }
.tab-count { background:none; color:inherit; padding:0; }
.profile-tabpanel h2 { font-size:17px; margin-bottom:6px; }
.profile-tabpanel .form-grid { margin-top:16px; }
.subsection-heading { margin-top:30px !important; }
.section-intro { color:var(--muted); font-size:12px; margin:0 0 12px; }
.required-mark { color:#bc523e; }
.field-hint { color:var(--muted); font-size:11px; font-weight:400; }
.field-error { color:#bc523e; font-size:11px; font-weight:600; }
.field-error:empty { display:none; }
[aria-invalid="true"] { border-color:#d77b68 !important; }
input:disabled,select:disabled,textarea:disabled { background:#f3f6f5; color:#626f7d; cursor:not-allowed; }
.profile-photo-card { align-items:center; border:1px solid var(--line); border-radius:8px; display:flex; gap:18px; margin-bottom:24px; padding:16px; }
.profile-photo-card strong,.profile-photo-card small { display:block; }
.profile-photo-card small { color:var(--muted); font-size:11px; margin:4px 0 10px; }
.profile-photo { align-items:center; background:#e6eff8; border-radius:50%; color:var(--teal); display:flex; flex:0 0 auto; font-family:'Manrope','Manrope Fallback',sans-serif; font-size:28px; font-weight:800; height:88px; justify-content:center; overflow:hidden; width:88px; }
.profile-photo img { height:100%; object-fit:cover; width:100%; }
.profile-photo-upload,.document-upload { font-size:12px; padding:9px 14px; }
.document-list { display:grid; gap:10px; }
.document-card { align-items:center; border:1px solid var(--line); border-radius:8px; display:flex; gap:14px; justify-content:space-between; padding:14px 16px; }
.document-card.is-missing { border-left:3px solid #e7a28f; }
.document-card-body small { color:var(--muted); display:block; font-size:11px; margin-top:3px; }
.document-badge { background:#edf2f1; border-radius:10px; color:#6e7c8a; font-size:10px; font-weight:700; margin-left:6px; padding:2px 7px; }
.document-badge.is-required { background:#fff4df; color:#a4731e; }
.document-files { list-style:none; margin:8px 0 0; padding:0; }
.document-files li { font-size:12px; margin-top:4px; }
.document-files small { color:var(--muted); font-size:10px; }
.document-empty { color:#9da7b1; }
.link-button { background:none; border:0; color:#bc523e; font-size:11px; font-weight:700; margin-left:6px; padding:0; text-decoration:underline; }
.form-message { color:var(--teal); font-size:12px; margin:10px 0 0; min-height:16px; text-align:right; }
.form-message.is-error { color:#bc523e; }
.profile-actions { align-items:center; }
.save-state { color:var(--muted); font-size:11px; margin-right:auto; }
.progress-bar { background:#edf2f1; border-radius:6px; height:8px; margin:6px 0 20px; overflow:hidden; }
.progress-bar span { background:var(--teal); border-radius:6px; display:block; height:100%; transition:width .3s ease; }
.progress-bar-small { height:6px; margin:0 0 4px; max-width:120px; }
.profile-checklist { align-self:start; position:sticky; top:20px; }
.profile-checklist h2 { margin-bottom:4px; }
.checklist-section h3 { color:#5b6c7e; font-size:11px; letter-spacing:.4px; margin:16px 0 6px; text-transform:uppercase; }
.checklist { display:grid; gap:2px; list-style:none; margin:0; padding:0; }
.checklist button { align-items:flex-start; background:none; border:0; border-radius:5px; color:#626f7d; display:flex; flex-wrap:wrap; font-size:12px; gap:8px; padding:5px 6px; text-align:left; width:100%; }
.checklist button:hover,.checklist button:focus-visible { background:#f2f6fb; outline:none; }
.checklist button small { color:#9da7b1; flex-basis:100%; font-size:10px; padding-left:24px; }
.checklist-icon { align-items:center; border:1.5px solid #c8d2dc; border-radius:50%; color:white; display:inline-flex; flex:0 0 auto; font-size:9px; font-weight:800; height:16px; justify-content:center; width:16px; }
.checklist li.done button { color:var(--ink); }
.checklist li.done .checklist-icon { background:var(--teal); border-color:var(--teal); }
.checklist li.is-optional .checklist-icon { border-style:dashed; }
.checklist-note { color:var(--muted); font-size:11px; line-height:1.5; margin:10px 0 0; }
.profile-checklist [data-submit-profile] { margin-top:22px; }
.button:disabled { cursor:not-allowed; opacity:.5; transform:none; }

/* HR Locum Verification (js/locum-verification.js). */
.verification-modal { max-height:92vh; max-width:900px; overflow:auto; }
.verification-head { align-items:center; display:flex; gap:16px; margin:4px 0 18px; }
.verification-head .muted { font-size:12px; margin-left:6px; }
.verification-photo { border-radius:50%; flex:0 0 auto; height:64px; object-fit:cover; width:64px; }
.verification-warning { color:#bc523e; font-size:12px; font-weight:600; margin:8px 0 0; }
.verification-subheading { font-size:14px; margin:22px 0 10px; }
.verification-checklist { border:1px solid var(--line); border-radius:8px; display:grid; gap:10px; margin:0 0 16px; padding:14px 16px; }
.verification-form textarea { min-height:80px; }
tr[data-locum-id] { cursor:pointer; }
tr[data-locum-id]:hover,tr[data-locum-id]:focus-visible { background:#f2f6fb; outline:none; }
@media (max-width:560px) { .profile-tabs button { flex:1 1 auto; justify-content:center; padding:9px 10px; } .document-card { align-items:flex-start; flex-direction:column; } .profile-actions { flex-wrap:wrap; } .profile-photo-card { align-items:flex-start; } .verification-head { align-items:flex-start; flex-direction:column; } }
/* Application status tracking and shift confirmation (js/user.js, js/pic.js). */
.status-declined-by-pic,.status-cancelled-by-locum,.status-removed-from-roster,.status-rejected,.status-no-show { background:#f3f1f0; color:#8a5a50; }
.status-declined-by-pic > span,.status-cancelled-by-locum > span,.status-removed-from-roster > span,.status-rejected > span,.status-no-show > span { background:#c98472; }
.applicant-pending { background:#fff4df; color:#a4731e; } .applicant-pending > span { background:#d8a13c; }
.applicant-confirmed { background:#e5effb; color:#036297; } .applicant-confirmed > span { background:var(--teal); }
.applicant-done { background:#e6f4ed; color:#388564; }
.applicant-closed { background:#f3f1f0; color:#7d6a66; } .applicant-closed > span { background:#b9a49f; }
.booking-confirmed { background:#eff6fe; border:1px solid #b3dbfd; border-left:4px solid var(--teal); border-radius:6px; color:#23567a; font-size:12px; line-height:1.6; margin:12px 0 16px; padding:14px 16px; }
.booking-confirmed strong { color:var(--teal-dark); font-size:14px; }
.booking-confirmed p { margin:6px 0 0; }
.booking-closed { margin-top:12px; }
.my-application-modal { max-height:92vh; max-width:640px; overflow:auto; }
.cancel-booking { border-top:1px solid var(--line); margin-top:20px; }
.upcoming-list { display:grid; gap:2px; padding:0 12px 14px; }
.upcoming-shift { align-items:center; background:none; border:0; border-radius:6px; display:flex; gap:14px; padding:10px; text-align:left; width:100%; }
.upcoming-shift:hover,.upcoming-shift:focus-visible { background:#f2f6fb; outline:none; }
.upcoming-shift strong,.upcoming-shift small { display:block; }
.upcoming-shift small { color:var(--muted); font-size:11px; margin-top:2px; }
.upcoming-date { background:var(--mint); border-radius:6px; color:var(--teal-dark); flex:0 0 auto; min-width:86px; padding:6px 8px; text-align:center; }
tr[data-my-application]:hover,tr[data-my-application]:focus-visible { background:#f2f6fb; outline:none; }
/* Branch booking dialog (js/book-locum.js). */
.book-locum-modal { max-height:92vh; max-width:640px; overflow:auto; }
.book-locum-intro { font-size:12px; line-height:1.5; margin:4px 0 16px; }
.locum-picker { display:grid; gap:6px; }
.locum-results { display:grid; gap:4px; max-height:220px; overflow:auto; }
.locum-results .muted { font-size:12px; margin:4px 0; }
.locum-result { background:#f7faf9; border:1px solid var(--line); border-radius:6px; padding:9px 12px; text-align:left; }
.locum-result:hover:not(:disabled),.locum-result:focus-visible { border-color:var(--teal); outline:none; }
.locum-result:disabled { cursor:not-allowed; opacity:.6; }
.locum-result strong,.locum-result small { display:block; }
.locum-result small { color:var(--muted); font-size:11px; margin-top:2px; }
.locum-selected { color:var(--teal-dark); font-size:12px; font-weight:700; margin:0; }
.book-locum-summary { align-items:center; background:#f1f7fd; border-radius:6px; display:grid; font-size:12px; gap:4px 12px; grid-template-columns:auto 1fr; padding:10px 14px; }
.book-locum-summary span { color:var(--muted); }
/* Profile photo in the sidebar and top-bar avatars (js/app.js). */
.avatar { overflow:hidden; }
.avatar img { height:100%; object-fit:cover; width:100%; }
/* Shared table pagination (js/pagination.js) */
.pager { align-items:center; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; padding:12px 22px; }
.pager[hidden] { display:none; }
.pager-count { color:var(--muted); font-size:12px; margin:0; }
.pager-count strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.pager-size { align-items:center; color:var(--muted); display:flex; font-size:12px; font-weight:500; gap:8px; margin-right:auto; }
.pager-size select { min-width:72px; padding:6px 10px; width:auto; }
.pager-nav { align-items:center; display:flex; flex-wrap:wrap; gap:4px; }
.pager-button { align-items:center; background:white; border:1px solid #dde4ec; border-radius:6px; color:#384758; cursor:pointer; display:inline-flex; font:inherit; font-size:12px; font-weight:700; height:32px; justify-content:center; min-width:32px; padding:0 8px; transition:background .15s, border-color .15s; }
.pager-button:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
.pager-button[aria-current="page"] { background:var(--teal); border-color:var(--teal); color:white; }
.pager-button:disabled { cursor:not-allowed; opacity:.4; }
.pager-button span { font-size:16px; line-height:1; }
.pager-gap { color:var(--muted); padding:0 4px; }
.pager-current { color:var(--muted); font-size:11px; margin-left:8px; white-space:nowrap; }
.card-pager { border-top:0; padding-left:0; padding-right:0; }
@media (max-width:640px) {
  .pager { padding:12px 14px; }
  .pager-size { margin-right:0; }
  .pager-nav { width:100%; }
  .pager-current { margin-left:auto; }
}
.notification-table td { vertical-align:top; }
.notification-table td small.notification-body { color:#617081; font-size:12px; line-height:1.5; max-width:640px; white-space:normal; }
.notification-table tr.is-unread td:first-child { box-shadow:inset 3px 0 #62b4f2; }
.notification-table tr.is-unread strong { color:var(--teal-dark); }

/* Long navigation scrolls inside the sidebar; the brand and the Help / account area stay in view. */
.sidebar { height:100dvh; }
.sidebar nav { align-content:start; flex:1 1 auto; margin-right:-8px; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; scrollbar-color:#cfd8e3 transparent; scrollbar-width:thin; }
.sidebar nav::-webkit-scrollbar { width:6px; }
.sidebar nav::-webkit-scrollbar-thumb { background:#cfd8e3; border-radius:3px; }
.sidebar nav::-webkit-scrollbar-track { background:transparent; }
.sidebar-bottom { flex:0 0 auto; padding-top:8px; }
/* Locked-item tooltip sits under the item so the scrolling list does not cut it off. */
.nav-locked[data-tooltip]:hover:after,.nav-locked[data-tooltip]:focus-visible:after { left:11px; right:11px; top:calc(100% - 4px); white-space:normal; }

/* Menu item icons (js/app.js NAV_ICONS). */
.nav-item-icon { fill:none; flex:0 0 auto; height:17px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.7; width:17px; }

/* Overview: next confirmed shift (js/user.js). */
.next-shift-card { margin-bottom:24px; padding:22px; }
.next-shift-card h2 { font-size:20px; margin:0 0 6px; }
.next-shift-time { color:var(--teal-dark); font-size:14px; font-weight:700; margin:0 0 4px; }
.next-shift-branch { color:var(--muted); font-size:12px; line-height:1.5; margin:0 0 16px; }
.next-shift-card .button { font-size:12px; padding:10px 16px; }

/* My calendar (js/my-calendar.js). Status colours: pending (dashed amber, never solid),
   confirmed (solid blue), completed (dark green), cancelled / not approved (grey, struck through). */
.calendar-panel { min-width:0; }
.calendar-toolbar { align-items:center; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding:20px 22px 12px; }
.calendar-nav { align-items:center; display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.calendar-nav h2 { font-size:19px; margin:0 0 0 6px; }
.calendar-today { font-size:12px; padding:9px 14px; }
.calendar-step { align-items:center; background:white; border:1px solid var(--line); border-radius:7px; color:var(--teal-dark); display:inline-flex; height:36px; justify-content:center; width:36px; }
.calendar-step:hover,.calendar-step:focus-visible { border-color:var(--teal); outline:none; }
.calendar-step svg { fill:none; height:16px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2; width:16px; }
.calendar-step[hidden],.calendar-today[hidden] { display:none; }
.calendar-views,.calendar-list-tabs { background:#eff3f8; border-radius:8px; display:inline-flex; gap:2px; padding:3px; }
.calendar-views button,.calendar-list-tabs button { background:none; border:0; border-radius:6px; color:var(--muted); font-size:12px; font-weight:700; padding:7px 14px; }
.calendar-views button[aria-pressed="true"],.calendar-list-tabs button[aria-pressed="true"] { background:white; box-shadow:0 1px 3px rgba(16,57,85,.12); color:var(--teal-dark); }
.calendar-legend { align-items:center; border-bottom:1px solid var(--line); color:#536271; display:flex; flex-wrap:wrap; font-size:11px; gap:8px 18px; padding:0 22px 14px; }
.calendar-legend-item { align-items:center; display:inline-flex; gap:7px; }
.calendar-toggle { margin-left:auto; }
.cal-swatch { border-radius:3px; display:inline-block; height:11px; width:11px; }
.cal-pending { background:#fff7e6; border:1px dashed #c98f2a; color:#7d5410; }
.cal-confirmed { background:var(--teal); border:1px solid var(--teal); color:white; }
.cal-completed { background:#dcefe7; border:1px solid #9cccb6; border-left:3px solid #1f6b4d; color:#1d5c45; }
.cal-cancelled { background:#f1efee; border:1px solid #ddd6d3; color:#8a7b77; text-decoration:line-through; }
.cal-swatch.cal-completed { border-left-width:1px; }
.cal-swatch.cal-cancelled { text-decoration:none; }
.calendar-body { padding:16px 22px 22px; }
.calendar-loading,.calendar-empty-note { color:var(--muted); font-size:12px; margin:14px 0 0; }
.calendar-error { padding:20px 0; text-align:center; }
.calendar-error p { color:var(--muted); font-size:12px; }
/* Month */
.cal-month { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.cal-weekdays,.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-weekdays span { background:#f8faf9; color:#848e98; font-size:10px; font-weight:700; letter-spacing:.5px; padding:9px 8px; text-transform:uppercase; }
.cal-day { border-right:1px solid var(--line); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:4px; min-height:112px; min-width:0; padding:6px; }
.cal-day:nth-child(7n) { border-right:0; }
.cal-day.is-outside { background:#fafcfb; }
.cal-day.is-outside .cal-date { color:#b5bdc6; }
.cal-day.is-selected { background:#f1f7fd; box-shadow:inset 0 0 0 2px #98ccf6; }
.cal-date { align-items:center; align-self:flex-start; background:none; border:0; border-radius:50%; color:#384758; display:inline-flex; font-size:12px; font-weight:700; height:26px; justify-content:center; width:26px; }
.cal-date:hover,.cal-date:focus-visible { background:#e4edf6; outline:none; }
.cal-day.is-today .cal-date { background:var(--teal); color:white; }
.cal-events { display:grid; gap:3px; min-width:0; }
.cal-event { align-items:center; border-radius:5px; display:flex; font-size:11px; gap:4px; line-height:1.3; min-width:0; overflow:hidden; padding:3px 6px; text-align:left; white-space:nowrap; }
.cal-event:focus-visible,.cal-card:focus-visible,.cal-list-item:focus-visible { outline:2px solid #103955; outline-offset:1px; }
.cal-event-time { flex:0 0 auto; font-weight:700; }
.cal-event-branch { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.cal-more { background:none; border:0; color:var(--teal); font-size:11px; font-weight:700; padding:2px 6px; text-align:left; }
.cal-dots { display:none; gap:3px; }
.cal-dots .cal-swatch { border-radius:50%; height:7px; width:7px; }
/* Week */
.cal-week { display:grid; gap:10px; grid-template-columns:repeat(7,minmax(0,1fr)); }
.cal-week-day { background:#fafcfb; border:1px solid var(--line); border-radius:8px; display:flex; flex-direction:column; gap:6px; min-height:180px; min-width:0; padding:8px; }
.cal-week-day.is-today { border-color:var(--teal); box-shadow:inset 0 3px 0 var(--teal); }
.cal-week-day.is-selected { background:#f1f7fd; }
.cal-week-day h3 { align-items:baseline; display:flex; font-size:12px; gap:6px; margin:0 0 4px; }
.cal-week-day h3 span { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.cal-week-day h3 strong { font-size:16px; }
.cal-card { border-radius:6px; display:grid; gap:2px; min-width:0; padding:7px 8px; text-align:left; }
.cal-card strong { font-size:11px; }
.cal-card span { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-card small { font-size:10px; opacity:.85; }
.cal-week-empty { color:#b5bdc6; font-size:12px; margin:0; }
/* List */
.calendar-list-tabs { margin-bottom:14px; }
.cal-list { display:grid; gap:14px; }
.cal-list-day h3 { align-items:center; color:#384758; display:flex; font-size:12px; gap:8px; margin:0 0 6px; }
.cal-today-tag { background:var(--teal); border-radius:10px; color:white; font-size:10px; padding:2px 8px; }
.cal-list-item { align-items:center; background:white; border:1px solid var(--line); border-left:4px solid; border-radius:7px; color:var(--ink); display:grid; gap:4px 14px; grid-template-columns:120px minmax(0,1fr) auto; margin-top:6px; padding:10px 14px; text-align:left; text-decoration:none; width:100%; }
.cal-list-item:hover { background:#f7fbf9; }
.cal-list-item.cal-pending { border-left:4px dashed #c98f2a; }
.cal-list-item.cal-confirmed { border-left-color:var(--teal); }
.cal-list-item.cal-completed { border-left-color:#1f6b4d; }
.cal-list-item.cal-cancelled { border-left-color:#c4b8b4; color:#7d706c; }
.cal-list-item.cal-cancelled strong { text-decoration:line-through; }
.cal-list-time { font-size:12px; font-weight:700; }
.cal-list-main { min-width:0; }
.cal-list-main strong,.cal-list-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-list-main small { color:var(--muted); font-size:11px; margin-top:2px; }
.calendar-day-modal { max-height:90vh; max-width:560px; overflow:auto; }
/* Tablet: shorter month cells with times only; week days in fewer columns. */
@media (max-width:1100px) { .cal-event-branch { display:none; } .cal-day { min-height:92px; } .cal-week { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:900px) { .cal-week { grid-template-columns:repeat(2,minmax(0,1fr)); } .cal-week-day { min-height:0; } }
/* Phone: the month shows coloured dots (tap a day to see it); week days stack; list rows wrap. */
@media (max-width:640px) {
  .calendar-toolbar,.calendar-legend,.calendar-body { padding-left:14px; padding-right:14px; }
  .calendar-nav h2 { flex-basis:100%; margin:4px 0 0; order:5; }
  .calendar-views { width:100%; }
  .calendar-views button { flex:1; }
  .calendar-toggle { margin-left:0; }
  .cal-day { align-items:center; min-height:54px; padding:4px 2px; }
  .cal-events { display:none; }
  .cal-dots { display:flex; }
  .cal-weekdays span { padding:8px 2px; text-align:center; }
  .cal-week { grid-template-columns:1fr; }
  .cal-list-item { grid-template-columns:1fr; }
}

/* Shift postings: date filter, custom range and sort (js/shift-postings.js). */
.posting-filters { margin-bottom:8px; }
.posting-range { align-items:center; color:var(--muted); display:flex; font-size:11px; font-weight:600; gap:6px; }
.posting-range[hidden] { display:none; }
.posting-range input { padding:10px; width:150px; }
.posting-filter-summary { align-items:center; color:var(--muted); display:flex; font-size:11px; gap:12px; padding:0 22px 12px; }
.posting-clear { background:none; border:0; color:var(--teal); cursor:pointer; font-size:11px; font-weight:700; padding:0; text-decoration:underline; }
.posting-clear[hidden] { display:none; }
@media (max-width:560px) { .posting-range { width:100%; } .posting-range input { flex:1; width:auto; } .posting-filter-summary { padding:0 15px 12px; } }

/* Shift attendance (js/pic.js, js/admin.js, js/roster.js, js/user.js): waiting, attended, no-show. */
.status-awaiting-attendance { background:#fff4df; border:0; color:#a4731e; cursor:pointer; font-family:inherit; }
.status-awaiting-attendance > span { background:#d8a13c; }
.status-attended { background:#e6f4ed; color:#388564; }
[data-attended-fields][hidden],[data-no-show-fields][hidden],#attended-form[hidden],#no-show-form[hidden] { display:none; }
.attendance-note { color:#388564; display:block; font-size:10px; font-weight:700; margin-top:4px; }

/* ── Stable navigation between app pages (js/app.js) ──────────────────────────────────────────
   Each page is a separate document. The page module is render-blocking (blocking="render"), so the
   first frame of the next page already has the sidebar and top bar; Chrome keeps the previous page
   on screen until then. The rules below keep everything else steady. */
/* Metric-matched fallbacks (as in tokens.css): text keeps its size and wrapping while the web
   fonts load, so headings and tables do not jump when they arrive. */
@font-face { font-family:'Manrope Fallback'; src:local('Arial'), local('ArialMT'); font-weight:300 499; size-adjust:104.2%; ascent-override:102.7%; descent-override:28.8%; line-gap-override:0%; }
@font-face { font-family:'Manrope Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight:500 700; size-adjust:98.1%; ascent-override:109.1%; descent-override:30.6%; line-gap-override:0%; }
@font-face { font-family:'Manrope Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight:701 900; size-adjust:101.1%; ascent-override:105.8%; descent-override:29.7%; line-gap-override:0%; }
@font-face { font-family:'DM Sans Fallback'; src:local('Arial'), local('ArialMT'); font-weight:300 500; size-adjust:103.6%; ascent-override:95.6%; descent-override:29.9%; line-gap-override:0%; }
@font-face { font-family:'DM Sans Fallback'; src:local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); font-weight:501 900; size-adjust:100.1%; ascent-override:98.9%; descent-override:31%; line-gap-override:0%; }
html { background:var(--paper); }
.sr-only { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; white-space:nowrap; width:1px; }
/* Browsers that paint before the page script runs (no blocking="render") see the same frame,
   drawn in CSS: white sidebar and white top bar on the page background, never a white page. */
[data-app-shell]:empty { background:linear-gradient(#fff,#fff) 248px 0/calc(100% - 248px) 70px no-repeat, linear-gradient(var(--line),var(--line)) 247px 0/1px 100% no-repeat, linear-gradient(#fff,#fff) 0 0/248px 100% no-repeat; display:block; min-height:100vh; }
@media (max-width:900px) { [data-app-shell]:empty { background:linear-gradient(#fff,#fff) 0 0/100% 70px no-repeat; } }
/* Cross-document view transition (Chrome/Edge 126+, Safari 18.2+; others navigate normally):
   the sidebar and top bar are swapped in place with no animation, and only the page content fades
   and rises slightly, about 200 ms in total. */
@view-transition { navigation:auto; }
/* The names app-sidebar, app-topbar and app-content are set by js/app.js only while a transition
   runs: a named element is drawn as its own layer, which would otherwise put the page content above
   the profile menu and keep dialogs from covering the sidebar. */
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root) { animation:none; }
::view-transition-group(app-sidebar),::view-transition-group(app-topbar),::view-transition-group(app-content) { animation:none; }
::view-transition-old(app-sidebar),::view-transition-old(app-topbar) { display:none; }
::view-transition-new(app-sidebar),::view-transition-new(app-topbar) { animation:none; }
::view-transition-old(app-content) { animation:vt-content-out 90ms ease-out both; }
::view-transition-new(app-content) { animation:vt-content-in 190ms cubic-bezier(.2,.8,.2,1) 30ms both; }
@keyframes vt-content-out { to { opacity:0; } }
@keyframes vt-content-in { from { opacity:0; transform:translate3d(0,6px,0); } }
@media (prefers-reduced-motion:reduce) { ::view-transition-old(app-content),::view-transition-new(app-content) { animation:none; } }
/* Thin progress bar while the next page is on its way (shown only when that takes over 150 ms). */
.nav-progress { background:var(--teal); height:2px; left:0; opacity:0; pointer-events:none; position:fixed; top:0; transform:scaleX(0); transform-origin:left; transition:opacity .15s; width:100%; z-index:300; }
body.is-navigating .nav-progress { animation:nav-progress 8s cubic-bezier(.1,.7,.2,1) forwards; opacity:1; }
@keyframes nav-progress { 0% { transform:scaleX(0); } 8% { transform:scaleX(.3); } 100% { transform:scaleX(.92); } }
@media (prefers-reduced-motion:reduce) { body.is-navigating .nav-progress { animation:none; transform:scaleX(.6); } }
/* Loading skeletons (loadingSkeleton in js/app.js): roughly the size of the content they stand
   for, so nothing jumps when it arrives. */
.skeleton-line { background:#edf2f0; border-radius:6px; display:block; height:11px; margin:8px 0; width:100%; }
.skeleton-line.is-title { height:16px; width:32%; }
.skeleton-line.is-value { height:26px; margin:16px 0 10px; width:50%; }
.skeleton-table { display:grid; gap:0; padding:0 22px 18px; }
.skeleton-row { border-top:1px solid #edf1f0; display:grid; gap:24px; grid-template-columns:repeat(var(--columns,5),minmax(0,1fr)); padding:15px 0; }
.skeleton-row .skeleton-line { margin:0; }
.skeleton-row .skeleton-line:nth-child(odd) { width:72%; }
.skeleton-metrics .metric-card { min-height:122px; }
@media (prefers-reduced-motion:no-preference) {
  .skeleton-line { animation:skeleton-shimmer 1.4s ease-in-out infinite; background:linear-gradient(90deg,#edf2f0 0%,#f5f8f7 50%,#edf2f0 100%) 0 0/200% 100%; }
}
@keyframes skeleton-shimmer { to { background-position:-200% 0; } }
@media (max-width:640px) { .skeleton-row { --columns:2 !important; } }
/* A page area refreshing in place (pageLoading in js/app.js): the current content stays, dimmed only
   if the refresh takes a moment, and cannot be clicked until the new content arrives. */
[aria-busy="true"]:not(.page-skeleton) { opacity:.6; pointer-events:none; transition:opacity .15s ease .2s; }
.skeleton-tr td { padding-bottom:17px; padding-top:17px; }

/* Brand logo (assets/icons/asp-logo.png), full colour everywhere. */
.brand-logo { display:block; height:38px; max-width:100%; width:auto; }
.brand-light .brand-logo { height:36px; }
.mobile-brand .brand-logo { height:32px; }
.sidebar .brand-logo { height:32px; }
.loader-logo { display:block; height:44px; max-width:80vw; width:auto; }
.loader-mark { height:28px; width:28px; }
.loader-mark:before { border-width:3px; inset:0; }

/* Install-the-app banner on phones (js/pwa.js). */
.install-banner { align-items:center; background:#fff; border:1px solid var(--line); border-radius:14px; bottom:calc(14px + env(safe-area-inset-bottom)); box-shadow:0 12px 32px rgba(11,37,64,.16); display:flex; gap:12px; left:14px; padding:12px 12px 12px 14px; position:fixed; right:14px; z-index:400; }
.install-banner img { border-radius:10px; box-shadow:0 0 0 1px var(--line); flex:0 0 auto; height:42px; width:42px; }
.install-banner p { color:var(--muted); flex:1 1 auto; font-size:12px; line-height:1.45; margin:0; }
.install-banner strong { color:var(--ink); font-size:13px; }
.install-banner-action { background:var(--teal); border:0; border-radius:8px; color:#fff; flex:0 0 auto; font-weight:700; padding:9px 14px; }
.install-banner-close { background:none; border:0; color:var(--muted); flex:0 0 auto; font-size:20px; line-height:1; padding:4px 6px; }
.support-link { align-items:center; border-radius:8px; display:flex; gap:12px; } .support-link:hover { background:var(--paper); color:var(--ink); }
.support-link.active { background:var(--mint); box-shadow:inset 3px 0 var(--teal); color:var(--teal-dark); font-weight:600; }

/* Install app (js/install-app.js): portal page and public get-app.html. */
.install-app { display:grid; gap:18px; max-width:680px; }
.install-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px; }
.install-card h2 { align-items:center; color:var(--ink); display:flex; font-size:15px; gap:9px; margin:0 0 6px; }
.install-card > p { color:var(--muted); font-size:13px; line-height:1.55; margin:0; }
.install-card svg { fill:none; flex:0 0 auto; height:18px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:18px; }
.install-card .button { margin-top:16px; }
.install-card-primary { border-color:#9ccbe8; box-shadow:0 0 0 3px var(--mint); }
.install-card-success { background:#eefaf4; border-color:#b9e0cd; }
.install-card-success h2 { color:#1f6b4d; }
.install-card-success > p { color:#2f6f57; }
.install-tabs { background:var(--paper); border:1px solid var(--line); border-radius:10px; display:flex; gap:4px; margin:14px 0 4px; padding:4px; }
.install-tabs button { align-items:center; background:none; border:0; border-radius:7px; color:var(--muted); display:flex; flex:1 1 0; font-size:12px; font-weight:700; gap:7px; justify-content:center; padding:9px 8px; }
.install-tabs button:hover { color:var(--ink); }
.install-tabs button[aria-selected="true"] { background:#fff; box-shadow:0 1px 3px rgba(11,37,64,.12); color:var(--teal-dark); }
.install-tabs button:focus-visible { outline:2px solid var(--teal); outline-offset:1px; }
.install-sub { color:var(--muted); font-size:12px; margin:12px 0 10px; }
.install-steps { display:grid; gap:16px; list-style:none; margin:0; padding:0; }
.install-steps li { display:flex; gap:12px; }
.install-steps strong { color:var(--ink); display:block; font-size:13px; margin-bottom:3px; }
.install-steps p { color:var(--muted); font-size:12.5px; line-height:1.55; margin:0; }
.install-step-num { align-items:center; background:var(--mint); border-radius:50%; color:var(--teal-dark); display:inline-flex; flex:0 0 26px; font-size:12px; font-weight:800; height:26px; justify-content:center; }
.install-actions { align-items:center; display:flex; flex-wrap:wrap; gap:6px 12px; }
.install-actions .button { padding:10px 14px; }
.install-link-button { background:none; color:var(--teal); }
.install-link-button:hover:not(:disabled) { background:var(--paper); }
.install-actions .button:disabled { cursor:default; opacity:.5; }
.install-state { color:var(--muted); font-size:12px; margin:12px 0 0; }
.install-message { color:var(--muted); font-size:12px; margin:0; min-height:16px; }
.get-app-page { padding:var(--space-xl, 48px) 0 var(--space-2xl, 72px); }
.get-app-page .install-app { margin:0 auto; }
.get-app-intro { align-items:flex-start; display:flex; gap:20px; margin:0 auto 28px; max-width:680px; }
.get-app-intro h1 { color:var(--ink); font-size:clamp(26px,3.4vw,36px); letter-spacing:-.8px; line-height:1.15; margin:0 0 10px; }
.get-app-intro p:last-child { color:var(--muted); font-size:15px; line-height:1.6; margin:0; }
.get-app-icon { border-radius:18px; box-shadow:0 0 0 1px var(--line), 0 10px 24px rgba(11,37,64,.1); flex:0 0 auto; height:76px; width:76px; }
@media (max-width:560px) { .install-tabs svg { display:none; } .install-card { padding:18px; } .get-app-intro { flex-direction:column; gap:14px; } .get-app-icon { height:60px; width:60px; } }

/* Clickable notifications (js/notifications.js): the whole row opens the linked page. */
.notification-row.has-link, .notification-row.is-unread { cursor:pointer; }
.notification-row:hover td { background:var(--paper); }
.notification-row:focus-visible { outline:2px solid var(--teal); outline-offset:-2px; }
.notification-title { color:var(--ink); display:block; font-weight:600; }
a.notification-title:hover { color:var(--teal-dark); text-decoration:underline; text-underline-offset:3px; }
.notification-table tr.is-unread .notification-title { color:var(--teal-dark); font-weight:700; }
.notification-table tr:not(.is-unread) .notification-body { color:var(--muted); }
.notification-status { align-items:center; display:flex; gap:10px; justify-content:space-between; }
.notification-go { color:#9aa8b8; font-size:20px; line-height:1; transition:transform .15s, color .15s; }
.notification-row:hover .notification-go { color:var(--teal); transform:translateX(2px); }
.button-quiet { background:none; box-shadow:inset 0 0 0 1px var(--line); color:var(--teal-dark); }
.button-quiet:hover:not(:disabled) { background:var(--paper); }
.button-quiet:disabled { color:var(--muted); cursor:default; opacity:.6; }

/* Bell in the top bar (same outline style as the sidebar icons). */
.notification-button { align-items:center; border-radius:50%; display:inline-flex; height:36px; justify-content:center; transition:background .15s; width:36px; }
.notification-button:hover { background:var(--mint); }
.notification-button .notification-count { right:-2px; top:-1px; }
.topbar-bell { fill:none; height:21px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:21px; }
.notification-button[hidden] { display:none; }

/* Sidebar group headings (HR / Super Admin; NAV_GROUPS in js/app.js). */
.nav-group-label { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1.2px; margin:14px 11px 2px; text-transform:uppercase; }
/* Grouped menus are longer, so their rows and the gap above the portal label are a little tighter. */
.sidebar:has(.nav-group-label) .portal-label { margin-top:30px; margin-bottom:6px; }
.sidebar nav:has(.nav-group-label) { gap:2px; }
.sidebar nav:has(.nav-group-label) .nav-item { padding-bottom:9px; padding-top:9px; }

/* Phone notifications (js/push-ui.js): card on Install app, banner on a locum's Notifications page. */
.push-card-slot { margin-top:18px; }
.push-actions { margin-top:14px; }
.push-actions .button svg, .push-banner > svg { fill:none; height:17px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; width:17px; }
.push-banner { align-items:center; background:var(--mint); border:1px solid #c6def0; border-radius:12px; color:var(--teal-dark); display:flex; gap:14px; margin-bottom:18px; padding:12px 14px 12px 16px; }
.push-banner > svg { flex:0 0 auto; height:22px; width:22px; }
.push-banner p { color:var(--ink); flex:1 1 auto; font-size:13px; line-height:1.45; margin:0; }
.push-banner strong { color:var(--teal-dark); display:block; font-size:14px; }
.push-banner .button { flex:0 0 auto; padding:9px 16px; }
.push-banner-close { background:none; border:0; color:var(--muted); flex:0 0 auto; font-size:20px; line-height:1; padding:4px 6px; }
.push-banner-done { color:var(--teal-dark); font-weight:600; }
@media (max-width:560px) { .push-banner { flex-wrap:wrap; } .push-banner p { flex-basis:calc(100% - 70px); } }

/* Top-bar account menu: "My profile" is a normal item; only Log out is red. */
.profile-dropdown a[role="menuitem"] { color:var(--ink); display:block; }
.profile-dropdown a[role="menuitem"]:hover, .profile-dropdown a[role="menuitem"]:focus-visible { background:var(--paper); }

/* Staff My profile (js/account.js). */
.account-page { display:grid; gap:24px; max-width:720px; }
.account-page .form-panel h2 { margin-bottom:6px; }
.account-intro { color:var(--muted); font-size:13px; margin:0 0 20px; }
.account-photo-actions { display:flex; flex-wrap:wrap; gap:8px; }
.account-photo-actions .button { padding:9px 14px; }
.account-fields { display:grid; gap:18px; grid-template-columns:1fr 1fr; }
.account-fields .account-wide { grid-column:1 / -1; }
.account-readonly { background:var(--paper); border:1px solid var(--line); border-radius:8px; color:var(--ink); font-weight:500; padding:13px 14px; }
.account-readonly + small, .account-hint { color:var(--muted); font-size:11px; font-weight:500; }
.account-save { align-items:center; display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.account-row { align-items:center; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; }
.account-row p { color:var(--muted); font-size:13px; margin:4px 0 0; }
@media (max-width:560px) { .account-fields { grid-template-columns:1fr; } }
.account-page .form-message { margin-top:6px; text-align:left; }