/* ===== portal-responsive.css ===== */
/* Sonar Patient Portal — responsive overflow and table enhancements */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body > div,
main,
section,
article,
header,
.grid,
.flex,
.grid > *,
.flex > * {
  min-width: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Keep intentionally scrollable rows inside their own viewport instead of
   allowing them to widen the full page. */
.overflow-x-auto {
  max-width: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.table-scroll-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

.table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(11, 88, 167, 0.42) transparent;
  scroll-behavior: smooth;
  transition: -webkit-mask-image 180ms ease, mask-image 180ms ease;
}

.table-scroll::-webkit-scrollbar {
  height: 5px;
}

.table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: rgba(11, 88, 167, 0.42);
  border-radius: 0;
}

/* Dynamic edge fades — JS swaps these classes as the user scrolls. */
.table-scroll.can-scroll-right:not(.can-scroll-left) {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%);
}

.table-scroll.can-scroll-left:not(.can-scroll-right) {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 100%);
}

.table-scroll.can-scroll-left.can-scroll-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.table-scroll-hint {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(11, 88, 167, 0.25);
  background: rgba(255, 255, 255, 0.94);
  padding: 5px 8px;
  color: #0B58A7;
  font-size: 10px;
  font-weight:600;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.table-scroll-shell.has-overflow .table-scroll-hint {
  opacity: 1;
  transform: translateY(0);
}

.table-scroll-shell.is-scrolling .table-scroll-hint,
.table-scroll-shell.at-end .table-scroll-hint {
  opacity: 0;
  transform: translateY(4px);
}

/* Compact mobile table density while preserving readable cells. */
@media (max-width: 767px) {
  .table-scroll table {
    font-size: 0.8125rem;
  }

  .table-scroll th,
  .table-scroll td {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
    white-space: nowrap;
  }

  .table-scroll-hint {
    display: inline-flex;
  }
}

@media (min-width: 768px) {
  .table-scroll-hint {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .table-scroll,
  .table-scroll-hint {
    scroll-behavior: auto;
    transition: none;
  }
}


/* ===== portal-ui.css ===== */
*{box-sizing:border-box;border-radius:0!important}
:root{--blue:#0B58A7;--blue-dark:#08477F;--red:#F11E2B;--ink:#101828;--muted:#000000;--line:#E3E7EC;--soft:#F6F8FA;--green:#1F9D55;--amber:#B7791F}
html,body{max-width:100%;overflow-x:hidden}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#ffffff;color:var(--ink)}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.portal-shell{min-height:100vh;display:flex}
.portal-sidebar{position:fixed;inset:0 auto 0 0;width:256px;background:#F8F9FB;border-right:1px solid var(--line);z-index:40;display:flex;flex-direction:column;transition:transform .2s ease}
.portal-brand{height:72px;display:flex;align-items:center;padding:0 20px;background:#fff;border-bottom:1px solid var(--line)}
.portal-brand img{height:42px;width:auto}
.portal-user{display:flex;align-items:center;gap:11px;padding:18px 16px;border-bottom:1px solid var(--line)}
.avatar{width:38px;height:38px;display:grid;place-items:center;background:#103A72;color:#fff;font-weight:600;font-size:15px}
.portal-user strong{display:block;font-size:15px}.portal-user small{display:block;color:#000000;font-size:13px;margin-top:2px}
.portal-menu{padding:14px 10px;overflow-y:auto;flex:1}
.menu-label{padding:0 10px 8px;color:#98A2B3;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.portal-nav{display:grid;gap:2px}
.portal-nav a{display:flex;align-items:center;gap:11px;min-height:42px;padding:0 11px;border-left:3px solid transparent;color:#000000;font-size:15px;font-weight:600;transition:.15s ease}
.portal-nav a:hover,.portal-nav a.active{background:#fff;color:#000000;border-left-color:var(--blue);box-shadow:0 1px 3px rgba(16,24,40,.035)}
.nav-icon{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.nav-badge{margin-left:auto;min-width:21px;height:21px;display:grid;place-items:center;background:#E9EDF2;color:#475467;font-size:10px;font-weight:600}
.portal-signout{border-top:1px solid var(--line);background:#fff;padding:12px}
.portal-signout button{width:100%;border:0;background:#fff;color:var(--red);font-weight:600;text-align:left;padding:9px 10px;cursor:pointer}
.portal-main{min-width:0;flex:1;margin-left:256px}
.portal-header{position:sticky;top:0;z-index:30;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.header-left{display:flex;align-items:center;gap:12px}.mobile-menu-btn{display:none;border:1px solid var(--line);background:#fff;width:40px;height:40px;cursor:pointer}
.header-right{display:flex;align-items:center;gap:10px}.header-chip{border:1px solid var(--line);background:#fff;padding:8px 10px;color:#000000;font-size:14px}
.header-avatar{width:34px;height:34px;display:grid;place-items:center;background:#103A72;color:#fff;font-size:14px;font-weight:600}
.portal-content{max-width:1180px;margin:0 auto;padding:32px 30px 60px}
.page-title h1{font-size:26px;line-height:1.2;margin:0;color:#111827}.page-title p{margin:5px 0 0;color:#000000;font-size:15px}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}
.kpi{background:#fff;border:1px solid var(--line);border-left:3px solid #78CDA2;padding:15px}.kpi strong{display:block;font-size:24px}.kpi span{display:block;margin-top:4px;color:#000000;font-size:13px}
.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.action-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);padding:18px;min-height:88px;transition:.15s ease}.action-card:hover{border-color:#B8C9DA;box-shadow:0 4px 16px rgba(16,24,40,.045)}
.action-card.primary{background:linear-gradient(135deg,#EEF9F4,#F9FFFC)}.action-card.secondary{background:linear-gradient(135deg,#EFF6FF,#F8FBFF)}
.action-icon{width:48px;height:48px;display:grid;place-items:center;background:#8BD7BC;color:#0B3E61}.action-card.secondary .action-icon{background:#BBD9FF;color:#0B58A7}
.action-card h3{font-size:17px;margin:0}.action-card p{font-size:14px;color:#000000;margin:4px 0 0}.action-arrow{margin-left:auto;color:#98A2B3;font-size:24px}
.panel{margin-top:18px;background:#fff;border:1px solid var(--line)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line)}.panel-head h2{font-size:17px;margin:0}.panel-head p{font-size:13px;color:#000000;margin:4px 0 0}.panel-body{padding:18px}
.empty-state{min-height:210px;display:grid;place-items:center;text-align:center;background:#FAFBFC}.empty-state .empty-icon{width:54px;height:54px;display:grid;place-items:center;color:#B7C0CC}.empty-state h3{font-size:16px;margin:10px 0 5px;color:#000000}.empty-state p{font-size:13px;color:#98A2B3;margin:0}
.booking-card{border:1px solid var(--line);background:#fff;padding:16px;margin-bottom:10px}.booking-card:last-child{margin-bottom:0}.booking-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.booking-service{font-size:17px;font-weight:600}.booking-meta{margin-top:7px;display:flex;flex-wrap:wrap;gap:10px;color:#000000;font-size:13px}.status{display:inline-flex;align-items:center;padding:5px 8px;border:1px solid;font-size:10px;font-weight:600;white-space:nowrap}.status.pending{border-color:#E6C67B;color:#9A6700;background:#FFF9E8}.status.confirmed{border-color:#9CC7EB;color:#0B58A7;background:#F2F8FD}.status.completed{border-color:#C9D1DA;color:#000000;background:#F7F8FA}.status.insurance{border-color:#F0B36A;color:#9A5200;background:#FFF7E8}
.booking-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.btn{border:1px solid var(--line);background:#fff;padding:8px 11px;font-size:13px;font-weight:600;color:#475467;cursor:pointer}.btn:hover{border-color:var(--blue);color:var(--blue)}.btn.primary{border-color:var(--blue);background:var(--blue);color:#fff}.btn.red{border-color:var(--red);color:var(--red)}
.alert{margin-top:18px;display:grid;grid-template-columns:40px 1fr;gap:12px;border:1px solid;padding:14px 15px;background:#fff}.alert-icon{width:40px;height:40px;display:grid;place-items:center}.alert h3{font-size:15px;margin:0 0 4px}.alert p{font-size:13px;line-height:1.6;color:#000000;margin:0}.alert.amber{border-color:#E9C77F;background:#FFF9EB}.alert.amber .alert-icon{background:#FFF3CE;color:#A56200}.alert.blue{border-color:#B8D5EE;background:#F5FAFE}.alert.blue .alert-icon{background:#EAF4FD;color:#0B58A7}.alert.green{border-color:#A7D9BC;background:#F3FBF6}.alert.green .alert-icon{background:#E4F7EB;color:#168148}
.referral-list{display:grid;gap:10px}.referral-item{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:#fff;padding:14px}.referral-file{width:42px;height:42px;display:grid;place-items:center;background:#F1F5F9;color:#0B58A7}.referral-item strong{display:block;font-size:15px}.referral-item small{display:block;color:#000000;font-size:10px;margin-top:4px}.referral-item .btn{margin-left:auto}
.scan-card{border:1px solid var(--line);padding:16px;background:#fff;margin-bottom:10px}.scan-card:last-child{margin-bottom:0}.scan-head{display:flex;justify-content:space-between;gap:12px}.scan-title{font-size:16px;font-weight:600}.scan-sub{font-size:13px;color:#000000;margin-top:3px}
.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.field input,.field select{width:100%;border:1px solid var(--line);background:#fff;padding:11px 12px;font-size:14px;outline:none}.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(11,88,167,.08)}
.slide-backdrop{position:fixed;inset:0;background:rgba(16,24,40,.22);z-index:60;display:none}.slide-backdrop.open{display:block}.slide-panel{position:fixed;top:0;right:0;bottom:0;width:min(100%,560px);background:#fff;border-left:1px solid var(--line);z-index:70;transform:translateX(100%);transition:transform .22s ease;overflow:auto}.slide-panel.open{transform:none}.slide-head{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--line);padding:18px;display:flex;justify-content:space-between;gap:15px}.slide-head h2{font-size:19px;margin:0}.slide-close{border:1px solid var(--line);background:#fff;width:36px;height:36px;cursor:pointer}.slide-body{padding:18px}
.slide-section{border-bottom:1px solid var(--line);padding:0 0 16px;margin-bottom:16px}.slide-section:last-child{border:0}.slide-section h3{font-size:14px;margin:0 0 8px}.detail-grid{display:grid;grid-template-columns:130px 1fr;gap:9px;font-size:13px}.detail-grid span{color:#000000}.prep-list{margin:0;padding-left:18px;color:#52606D;font-size:13px;line-height:1.65}
.mobile-overlay{display:none;position:fixed;inset:0;background:rgba(16,24,40,.28);z-index:35}
@media(max-width:900px){.portal-sidebar{transform:translateX(-100%)}.portal-sidebar.open{transform:none}.mobile-overlay.open{display:block}.portal-main{margin-left:0}.mobile-menu-btn{display:grid;place-items:center}.portal-header{padding:0 16px}.portal-content{padding:24px 16px 50px}.kpi-grid{grid-template-columns:1fr}.action-grid{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr}}
@media(max-width:560px){.header-chip{display:none}.portal-content{padding-left:12px;padding-right:12px}.booking-top{display:block}.status{margin-top:10px}.success-actions{display:grid}.detail-grid{grid-template-columns:1fr}.referral-item{align-items:flex-start;flex-wrap:wrap}.referral-item .btn{margin-left:56px}}



/* ===== SONAR BRAND SYSTEM + LINKED PORTAL OVERRIDES ===== */
:root{
  --sonar-blue:#0B58A7;
  --sonar-blue-dark:#08477F;
  --sonar-blue-soft:#EEF5FC;
  --sonar-blue-soft-2:#F6FAFE;
  --sonar-red:#F11E2B;
  --sonar-red-dark:#C91521;
  --sonar-red-soft:#FFF1F2;
  --sonar-red-soft-2:#FFF7F7;
  --sonar-black:#000000
  --sonar-charcoal:#000000
  --sonar-gray:#000000
  --sonar-gray-light:#98A2B3;
  --sonar-line:#D9DEE5;
  --sonar-white:#FFFFFF;
  --sonar-surface:#F6F8FA;
}
body{background:#ffffff!important;color:var(--sonar-black)!important}
.portal-sidebar{background:#F8FAFC!important;border-color:var(--sonar-line)!important}
.portal-brand,.portal-signout,.portal-header{background:var(--sonar-white)!important}
.portal-nav a:hover,.portal-nav a.active{color:var(--sonar-blue)!important;border-left-color:var(--sonar-blue)!important;background:var(--sonar-white)!important}
.avatar,.header-avatar{background:var(--sonar-blue-dark)!important;color:#fff!important}
.nav-badge{background:var(--sonar-blue-soft)!important;color:var(--sonar-blue)!important}
.portal-signout button{color:var(--sonar-red)!important}
.kpi{border-left-color:var(--sonar-blue)!important}
.action-card.primary{background:linear-gradient(135deg,var(--sonar-blue-soft),#fff)!important}
.action-card.secondary{background:linear-gradient(135deg,var(--sonar-red-soft),#fff)!important}
.action-card.primary .action-icon{background:#DCEBFA!important;color:var(--sonar-blue)!important}
.action-card.secondary .action-icon{background:#FFE2E4!important;color:var(--sonar-red)!important}
.btn.primary{border-color:var(--sonar-blue)!important;background:var(--sonar-blue)!important;color:#fff!important}
.btn.primary:hover{background:#fff!important;color:var(--sonar-blue)!important}
.btn.red{border-color:var(--sonar-red)!important;color:var(--sonar-red)!important;background:#fff!important}
.btn.red:hover{background:var(--sonar-red)!important;color:#fff!important}
.status.pending,.status.insurance{border-color:#F6A4AA!important;color:var(--sonar-red-dark)!important;background:var(--sonar-red-soft)!important}
.status.confirmed{border-color:#A9CBEA!important;color:var(--sonar-blue)!important;background:var(--sonar-blue-soft)!important}
.status.completed{border-color:#C9D0D8!important;color:var(--sonar-charcoal)!important;background:#F7F8FA!important}
.alert.amber{border-color:#F6B0B5!important;background:var(--sonar-red-soft-2)!important}
.alert.amber .alert-icon{background:#FFE4E6!important;color:var(--sonar-red)!important}
.alert.blue,.alert.green{border-color:#B7D4EE!important;background:var(--sonar-blue-soft-2)!important}
.alert.blue .alert-icon,.alert.green .alert-icon{background:#E2EFFB!important;color:var(--sonar-blue)!important}
.referral-file{background:var(--sonar-blue-soft)!important;color:var(--sonar-blue)!important}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--sonar-blue)!important;box-shadow:0 0 0 2px rgba(11,88,167,.08)!important}
.portal-toast{position:fixed;right:18px;bottom:18px;z-index:100;border-left:4px solid var(--sonar-blue);background:#fff;color:var(--sonar-black);padding:13px 16px;box-shadow:0 8px 28px rgba(16,24,40,.14);font-size:13px;max-width:340px}
.portal-toast.error{border-left-color:var(--sonar-red)}
.booking-form{margin-top:22px;background:#fff;border:1px solid var(--sonar-line)}
.booking-section{padding:20px;border-bottom:1px solid var(--sonar-line)}.booking-section:last-child{border-bottom:0}
.booking-section h2{margin:0 0 5px;font-size:18px;color:var(--sonar-black)}.booking-section p{margin:0 0 16px;color:var(--sonar-gray);font-size:13px}
.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.booking-grid .field.full{grid-column:1/-1}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}
.slot{min-height:48px;border:1px solid #A9CBEA;background:var(--sonar-blue-soft-2);color:var(--sonar-blue);font-weight:600;cursor:pointer}
.slot:hover{background:var(--sonar-blue-soft)}
.slot.taken{border-color:#F5A8AE;background:var(--sonar-red-soft-2);color:var(--sonar-red-dark);text-decoration:line-through;cursor:not-allowed}
.slot.selected{border:2px solid var(--sonar-blue);background:var(--sonar-blue);color:#fff;text-decoration:none}
.booking-submit{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
.result-document{background:#fff;border:1px solid var(--sonar-line);margin-top:20px}.result-document .result-head{padding:18px;border-bottom:1px solid var(--sonar-line);background:linear-gradient(110deg,var(--sonar-blue-soft),#fff)}
.result-document .result-body{padding:20px}.result-row{display:grid;grid-template-columns:160px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #EEF0F2;font-size:13px}.result-row:last-child{border-bottom:0}.result-row span{color:var(--sonar-gray)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,var(--sonar-blue-soft),#fff 52%,var(--sonar-red-soft))}
.login-card{width:min(100%,460px);background:#fff;border:1px solid var(--sonar-line);box-shadow:0 18px 50px rgba(16,24,40,.08)}.login-head{padding:24px;border-bottom:1px solid var(--sonar-line)}.login-head img{height:52px}.login-body{padding:24px}
@media(max-width:760px){.booking-grid{grid-template-columns:1fr}.slot-grid{grid-template-columns:repeat(2,1fr)}.result-row{grid-template-columns:1fr;gap:3px}}

.status.cancelled{background:#FEE4E2;color:#B42318;border-color:#FDA29B}