:root{
  --navy:#1F2D7A;
  --navy-dark:#12184A;
  --red:#C81E2C;
  --bg:#F5F6FB;
  --card:#ffffff;
  --ink:#1B2033;
  --muted:#5B6178;
  --line:#DDE1EE;
  --ok:#17703D;
  --amber:#8A6100;
  --focus:#2F6FEB;
}
*{box-sizing:border-box;}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;}
a{color:var(--navy);}
h1,h2,h3{color:var(--navy-dark); margin:0 0 10px 0;}

/* Keyboard focus: visible everywhere, lighter on the dark header */
:where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
.topbar :focus-visible{outline-color:#9CC2FF;}
form input:focus,form select:focus,form textarea:focus{border-color:var(--navy);}

/* ---------- Header ---------- */
.topbar{background:var(--navy-dark); color:#fff;}
.topbar-inner{max-width:1100px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600;min-width:0;}
.brand img{height:26px;background:#fff;border-radius:4px;padding:2px;}
.brand-text{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.brand-title{font-weight:700;font-size:1rem;}
.brand-tagline{font-weight:400;font-size:.72rem;color:#B8BEDF;letter-spacing:.2px;white-space:nowrap;}
@media (max-width:1000px){
  .brand-tagline{display:none;}
}
.topuser{display:flex;align-items:center;gap:14px;font-size:.88rem;}
.who{display:flex;align-items:center;gap:8px;color:#C9CFF2;font-size:.86rem;}
.who-role{background:rgba(255,255,255,.14);color:#fff;border-radius:20px;padding:1px 10px;font-size:.74rem;font-weight:600;white-space:nowrap;}
.logout{color:#fff;border:1px solid rgba(255,255,255,.4);padding:4px 12px;border-radius:6px;text-decoration:none;font-size:.85rem;white-space:nowrap;}
.logout:hover{background:rgba(255,255,255,.14);}
.bell{position:relative;display:inline-flex;color:#DCE1F7;padding:4px;border-radius:6px;}
.bell:hover{color:#fff;background:rgba(255,255,255,.1);}
.bell svg,.nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.bell-badge{
  position:absolute;top:-4px;right:-6px;background:var(--red);color:#fff;border-radius:10px;
  font-size:.66rem;font-weight:700;padding:1px 5px;line-height:1.3;min-width:16px;text-align:center;
}
.navbar{background:#0C1140;border-top:1px solid rgba(255,255,255,.08);}
.navbar-inner{max-width:1100px;margin:0 auto;padding:0 12px;}
.topnav{display:flex;flex-wrap:wrap;}
.topnav a{color:#DCE1F7;text-decoration:none;padding:10px 11px;font-size:.88rem;border-bottom:3px solid transparent;white-space:nowrap;}
.topnav a:hover{color:#fff;background:rgba(255,255,255,.07);}
.topnav a[aria-current="page"]{color:#fff;font-weight:600;border-bottom-color:var(--red);}
.nav-toggle{display:none;align-items:center;gap:6px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:6px;padding:4px 10px;font:inherit;font-size:.85rem;cursor:pointer;}
.nav-who{display:none;}
.brand-title{white-space:nowrap;}
@media (max-width:480px){
  .nav-toggle span{display:none;}
  .topuser{gap:10px;}
}
@media (max-width:820px){
  .who{display:none;}
  .nav-toggle{display:inline-flex;}
  .navbar{display:none;}
  .navbar.open{display:block;}
  .topnav{flex-direction:column;padding:6px 0;}
  .topnav a{border-bottom:none;border-left:3px solid transparent;padding:12px 10px;font-size:.95rem;}
  .topnav a[aria-current="page"]{border-left-color:var(--red);background:rgba(255,255,255,.07);}
  .nav-who{display:block;color:#B8BEDF;font-size:.8rem;padding:8px 13px 12px;border-top:1px solid rgba(255,255,255,.08);}
}

/* ---------- Page shell ---------- */
.shell{max-width:1100px;margin:0 auto;padding:28px 20px 60px 20px;}
.pagefoot{max-width:1100px;margin:0 auto;padding:16px 20px 40px 20px;color:var(--muted);font-size:.82rem;border-top:1px solid var(--line);}
.wide .shell,.wide .topbar-inner,.wide .navbar-inner,.wide .pagefoot{max-width:1500px;}
@media (max-width:600px){
  .shell{padding:20px 16px 48px 16px;}
  .topbar-inner{padding:10px 16px;}
  h1{font-size:1.6rem;}
}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin-bottom:18px;}
.card.accent{border-left:4px solid var(--red);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:1fr;}}

.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px;}
@media (max-width:900px){.grid4{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.grid4{grid-template-columns:1fr;}}

/* Toolbars (calendar / roster view) and legends: wrap instead of overflowing on phones */
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.toolbar h2{margin:0;}
.toolbar-btns{display:flex;flex-wrap:wrap;gap:8px;}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:.82rem;}
.legend-item{display:inline-flex;align-items:center;gap:5px;}
.legend-sep{flex-basis:100%;height:0;}

/* ---------- Stat tiles: light card + coloured edge; colour flags meaning, not decoration ---------- */
.stat{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--navy);border-radius:10px;padding:14px 18px;color:var(--ink);}
.stat .num{font-size:1.9rem;font-weight:700;line-height:1.25;color:var(--navy-dark);}
.stat .label{font-size:.78rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.stat.total{border-left-color:var(--navy-dark);}
.stat.approved{border-left-color:var(--ok);}
.stat.approved .num{color:var(--ok);}
.stat.pending{border-left-color:#B8860B;}
.stat.pending .num{color:var(--amber);}
.stat.balance{border-left-color:var(--red);background:#FFF6F7;}
.stat.balance .num{color:var(--red);}
.stat.info{border-left-color:#3B4CA6;}
.stat.info .num{color:#3B4CA6;}

.quicklinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;}

/* Compact chip list (e.g. specialties with no cover today) */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px 0;padding:0;list-style:none;}
.chip{background:#FBE2E4;color:#7A1420;border-radius:20px;padding:3px 12px;font-size:.84rem;font-weight:600;}

.badge.oncall{background:var(--navy);color:#fff;}

/* ---------- Calendar ---------- */
.cal-wrap{overflow-x:auto;}
table.cal{width:100%;min-width:760px;table-layout:fixed;background:var(--card);}
table.cal th{background:var(--navy-dark);}
table.cal th.cal-weekend{background:#2A3470;}
table.cal td{vertical-align:top;padding:6px;height:110px;}
table.cal td.cal-empty{background:#F0F1F6;}
table.cal td.cal-day{background:#fff;}
table.cal td.cal-weekend-cell{background:#F7F8FC;}
table.cal td.cal-today{background:#FFF8E6;box-shadow:inset 0 0 0 2px var(--red);}
.cal-daynum{font-weight:700;font-size:.85rem;color:var(--navy-dark);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.cal-today-pill{background:var(--red);color:#fff;font-size:.62rem;font-weight:700;padding:1px 6px;border-radius:8px;text-transform:uppercase;letter-spacing:.3px;}
.cal-tag{display:block;width:100%;margin-bottom:3px;font-size:.74rem;padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.cal-tag-oncall{background:#F5F6FB;color:var(--navy-dark);border-left:3px solid var(--navy);}
.cal-more{margin-bottom:3px;font-size:.74rem;}
.cal-more summary{cursor:pointer;color:var(--navy);font-weight:600;padding:1px 6px;list-style:none;}
.cal-more summary::-webkit-details-marker{display:none;}
.cal-more summary:hover{text-decoration:underline;}
.cal-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle;}
.cal-legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;}
.specialty-pill{display:inline-flex;align-items:center;gap:5px;background:#F5F6FB;border-left:3px solid var(--navy);padding:2px 10px 2px 8px;border-radius:3px;font-size:.8rem;}

/* ---------- Roster grid ---------- */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.roster-grid{border-collapse:collapse;width:auto;min-width:100%;}
table.roster-grid th,table.roster-grid td{border:1px solid var(--line);padding:4px;font-size:.76rem;text-align:center;white-space:nowrap;}
table.roster-grid th{background:var(--navy);color:#fff;font-weight:600;position:sticky;top:0;}
table.roster-grid th.roster-grid-corner{position:sticky;left:0;z-index:2;background:var(--navy-dark);}
table.roster-grid th.roster-grid-weekend{background:#2A3470;}
table.roster-grid th.roster-grid-today{background:var(--red);}
table.roster-grid td.roster-grid-label{position:sticky;left:0;background:#fff;text-align:left;font-weight:600;font-size:.82rem;padding:6px 10px;white-space:nowrap;z-index:1;}
table.roster-grid td.roster-grid-cell{width:36px;min-width:36px;background:#fff;}
table.roster-grid td.roster-grid-weekend{background:#F7F8FC;}
table.roster-grid td.roster-grid-gap{background:#FBE2E4;color:var(--red);}
table.roster-grid td.roster-grid-open{background:repeating-linear-gradient(45deg,#fff,#fff 4px,#EEF0F7 4px,#EEF0F7 8px);color:#8A90A8;}
.roster-grid-name{display:inline-block;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;}
.swatch{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid var(--line);vertical-align:middle;}
.swatch.gap{background:#FBE2E4;border-color:#F3B7BD;}
.swatch.open{background:repeating-linear-gradient(45deg,#fff,#fff 3px,#EEF0F7 3px,#EEF0F7 6px);}

/* ---------- Tables ---------- */
table{width:100%;border-collapse:collapse;margin:10px 0;background:var(--card);}
th,td{border:1px solid var(--line);padding:8px 10px;font-size:.88rem;text-align:left;}
th{background:var(--navy);color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;}
tr:nth-child(even) td{background:#F8F9FD;}
@media (max-width:760px){
  /* Data tables scroll sideways inside the page instead of squeezing every cell */
  main table:not(.cal):not(.roster-grid){display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  main table:not(.cal):not(.roster-grid) th,
  main table:not(.cal):not(.roster-grid) td{white-space:nowrap;}
  main table:not(.cal):not(.roster-grid) td.long{white-space:normal;min-width:220px;}
}

.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.8rem;font-weight:600;}
.badge.pending{background:#FFF3CD;color:#7A5C00;}
.badge.approved{background:#E1F4E8;color:var(--ok);}
.badge.rejected{background:#FBE2E4;color:#A5182A;}

/* ---------- Forms & buttons ---------- */
form label{display:block;font-weight:600;font-size:.85rem;margin:14px 0 4px 0;}
form input,form select,form textarea{
  width:100%;padding:9px 10px;border:1px solid #C5CADC;border-radius:6px;font-size:.92rem;font-family:inherit;
}
label{display:block;font-weight:600;font-size:.85rem;margin:14px 0 4px 0;}
.ro-value{
  width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:6px;font-size:.92rem;
  background:var(--bg);color:var(--muted);word-break:break-word;min-height:38px;box-sizing:border-box;
}
/* Buttons: navy = primary, outline = secondary, red = destructive only, green = restore/positive */
.btn{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--navy);padding:10px 20px;border-radius:6px;font-weight:600;cursor:pointer;font-size:.92rem;text-decoration:none;font-family:inherit;}
.btn.red{background:var(--red);border-color:var(--red);}
.btn.green{background:var(--ok);border-color:var(--ok);}
.btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--navy);}
.btn.sm{padding:6px 14px;font-size:.82rem;}
.btn:hover{opacity:.92;}

.alert{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.9rem;}
.alert.error{background:#FBE2E4;color:#7A1420;border:1px solid #F3B7BD;}
.alert.success{background:#E1F4E8;color:#0F5C2D;border:1px solid #B7E5C7;}

.login-wrap{max-width:380px;margin:40px auto;}
.login-wrap .card{text-align:left;}
.login-wrap .logo{display:block;margin:0 auto 16px auto;height:44px;}
.hint{font-size:.82rem;color:var(--muted);margin-top:14px;}
.mono{font-family:"Consolas","IBM Plex Mono",monospace;}

/* ---------- Consultant records: searchable accordion instead of 26 always-open forms ---------- */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;}
.filterbar input[type=search]{flex:1 1 240px;max-width:380px;padding:9px 10px;border:1px solid #C5CADC;border-radius:6px;font-size:.92rem;font-family:inherit;}
.seg{display:inline-flex;border:1px solid var(--navy);border-radius:6px;overflow:hidden;}
.seg button{background:#fff;color:var(--navy);border:0;padding:8px 14px;font:inherit;font-size:.85rem;font-weight:600;cursor:pointer;}
.seg button + button{border-left:1px solid var(--navy);}
.seg button[aria-pressed="true"]{background:var(--navy);color:#fff;}
.filter-count{font-size:.85rem;color:var(--muted);margin-left:auto;}
.crec{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;}
.crec[open]{border-color:#B9C0E0;box-shadow:0 1px 6px rgba(18,24,74,.08);}
.crec > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(200px,2.4fr) 1.5fr .8fr 1.1fr 20px;gap:12px;align-items:center;padding:12px 16px;border-radius:10px;}
.crec > summary::-webkit-details-marker{display:none;}
.crec > summary:hover{background:#F8F9FD;}
.crec > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg);justify-self:end;transition:transform .15s;}
.crec[open] > summary::after{transform:rotate(45deg);}
.crec-name{font-weight:700;color:var(--navy-dark);display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.crec-meta{font-size:.86rem;color:var(--muted);}
.crec-meta b{color:var(--ink);font-weight:600;}
.crec-body{padding:6px 20px 18px 20px;border-top:1px solid var(--line);}
.crec.is-resigned{background:#FAFAFC;}
.crec.is-resigned .crec-name{color:var(--muted);}
.crec-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}
@media (max-width:760px){
  .crec > summary{grid-template-columns:1fr 20px;row-gap:2px;}
  .crec-meta{grid-column:1;}
  .crec > summary::after{grid-row:1;grid-column:2;}
  .filter-count{margin-left:0;flex-basis:100%;}
}