:root{
  --al-black:#090909;--al-black-soft:#111111;--al-black-2:#191919;--al-gold:#D4AF37;--al-gold-dark:#AA871D;--al-gold-soft:#F7EFCF;
  --al-bg:#F4F3EF;--al-surface:#FFFFFF;--al-surface-2:#FAF9F6;--al-text:#171717;--al-muted:#71717A;--al-line:#E7E5DF;
  --al-success:#137A42;--al-success-bg:#EAF7EF;--al-warning:#916100;--al-warning-bg:#FFF5D8;--al-danger:#B42318;--al-danger-bg:#FEECEB;
  --al-info:#2457A7;--al-info-bg:#EDF3FC;--shadow-sm:0 1px 2px rgba(0,0,0,.04);--shadow:0 12px 35px rgba(18,18,18,.07);
  --radius-sm:9px;--radius:14px;--radius-lg:20px;--sidebar-w:280px;
  --black:var(--al-black);--black2:var(--al-black-2);--gold:var(--al-gold);--gold2:var(--al-gold-dark);--bg:var(--al-bg);--card:var(--al-surface);--muted:var(--al-muted);--danger:var(--al-danger);--line:var(--al-line);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--al-bg);color:var(--al-text);font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
.sidebar{background:linear-gradient(180deg,#080808 0%,#0E0E0E 72%,#131313 100%);color:#fff;position:sticky;top:0;height:100vh;overflow:auto;border-right:1px solid #1e1e1e;z-index:40}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-thumb{background:#2c2c2c;border-radius:8px}
.brand{height:104px;display:flex;align-items:center;padding:22px 22px 18px;border-bottom:1px solid #242424}.brand img{display:block;width:224px;max-width:100%;height:auto;filter:drop-shadow(0 4px 12px rgba(212,175,55,.06))}
.sidebar-body{padding:15px 13px 22px}.nav-label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.17em;color:#747474;padding:16px 12px 7px}.nav-link{display:flex;align-items:center;gap:11px;min-height:43px;text-decoration:none;color:#CFCFCF;padding:9px 11px;border-radius:11px;margin:2px 0;transition:.18s ease;border:1px solid transparent}.nav-link svg{width:18px;height:18px;flex:0 0 18px;color:#7f7f7f}.nav-link:hover{background:#171717;color:#fff;border-color:#222}.nav-link:hover svg{color:var(--al-gold)}.nav-link.active{background:linear-gradient(90deg,rgba(212,175,55,.17),rgba(212,175,55,.055));border-color:rgba(212,175,55,.21);color:#fff;font-weight:700}.nav-link.active svg{color:var(--al-gold)}.nav-link .nav-count{margin-left:auto;background:var(--al-gold);color:#111;min-width:21px;height:21px;padding:0 6px;border-radius:999px;display:inline-grid;place-items:center;font-size:11px;font-weight:900}.sidebar-user{margin-top:18px;padding:13px;border-radius:13px;background:#151515;border:1px solid #232323}.sidebar-user strong{font-size:13px}.sidebar-user small{display:block;color:#7e7e7e;margin-top:2px}.sidebar-signout{margin-top:10px;width:100%}
.main-area{min-width:0}.topbar{min-height:78px;background:rgba(255,255,255,.91);backdrop-filter:blur(14px);border-bottom:1px solid var(--al-line);display:flex;align-items:center;gap:18px;padding:12px 30px;position:sticky;top:0;z-index:30}.mobile-menu{display:none}.page-title{min-width:220px}.page-title h1{font-size:22px;line-height:1.15;margin:0;font-weight:800;letter-spacing:-.025em}.page-title p{margin:4px 0 0;color:var(--al-muted);font-size:12px}.topbar-search{margin-left:auto;min-width:320px;max-width:520px;width:42%}.topbar-actions{display:flex;align-items:center;gap:8px}.topbar-action{position:relative;width:38px;height:38px;border:1px solid var(--al-line);border-radius:11px;background:#fff;display:grid;place-items:center;text-decoration:none;color:#444}.topbar-action:hover{border-color:#d7c06a;background:#fffdf6}.topbar-action svg{width:18px;height:18px}.topbar-dot{position:absolute;right:4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--al-gold);box-shadow:0 0 0 2px #fff}
.page{padding:26px 30px 42px;max-width:1880px;margin:0 auto}.flash{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border:1px solid #e8d58e;border-left:4px solid var(--al-gold);background:#fffdf5;border-radius:11px;margin-bottom:17px;box-shadow:var(--shadow-sm)}.flash svg{width:18px;color:var(--al-gold-dark);flex:0 0 auto;margin-top:1px}.error-box{background:var(--al-danger-bg);border:1px solid #f4c8c5;color:#8c1d14;border-radius:12px;padding:12px 15px;margin:12px 0}.error-box strong{display:block;margin-bottom:5px}
.card{background:var(--al-surface);border:1px solid var(--al-line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:18px}.card.elevated{box-shadow:var(--shadow)}.card.soft{background:var(--al-surface-2)}.card.gold-edge{border-top:3px solid var(--al-gold)}.section-card{padding:0;overflow:hidden}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:17px 18px;border-bottom:1px solid var(--al-line)}.section-head h2,.section-head h3{margin:0;font-size:16px}.section-head p{margin:4px 0 0;color:var(--al-muted);font-size:12px}.section-body{padding:18px}.section-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:16px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.layout-main-side{grid-template-columns:minmax(0,2fr) minmax(300px,.88fr);align-items:start}.stack{display:grid;gap:16px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.kpi{min-height:116px;position:relative;overflow:hidden}.kpi::after{content:"";position:absolute;right:-25px;bottom:-38px;width:100px;height:100px;border-radius:50%;background:rgba(212,175,55,.07)}.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.kpi-label{font-size:12px;color:var(--al-muted);font-weight:700}.kpi-icon{width:34px;height:34px;border-radius:10px;background:#F8F2DC;color:var(--al-gold-dark);display:grid;place-items:center}.kpi-icon svg{width:17px;height:17px}.kpi-value{font-size:29px;line-height:1;margin-top:13px;font-weight:850;letter-spacing:-.045em}.kpi-foot{font-size:11px;color:var(--al-muted);margin-top:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid transparent;border-radius:10px;min-height:38px;padding:8px 13px;text-decoration:none;font-weight:750;font-size:13px;cursor:pointer;transition:.16s ease;background:#181818;color:#fff}.btn svg{width:16px;height:16px}.btn:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(0,0,0,.09)}.btn:active{transform:none}.btn-gold,.btn.gold{background:var(--al-gold);color:#111;border-color:var(--al-gold)}.btn-gold:hover,.btn.gold:hover{background:#c8a328;border-color:#c8a328}.btn-secondary{background:#fff;color:#282828;border-color:#dcdad4}.btn-secondary:hover{border-color:#c7ad50;background:#fffdf8}.btn-ghost{background:transparent;color:#555;border-color:transparent}.btn-danger{background:#fff;color:var(--al-danger);border-color:#efcac6}.btn-danger:hover{background:var(--al-danger-bg)}.btn-sm{min-height:31px;padding:5px 9px;font-size:12px}.btn-block{width:100%}.icon-btn{width:36px;height:36px;padding:0;border-radius:10px}.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.field{display:grid;gap:6px}.field label,.field-label,label{font-size:12px;font-weight:750;color:#444}.field-help{font-size:11px;color:var(--al-muted)}input,select,textarea{width:100%;border:1px solid #D9D7D1;border-radius:10px;background:#fff;color:#191919;padding:9px 10px;min-height:40px;outline:none;transition:border .16s,box-shadow .16s}textarea{resize:vertical;min-height:86px}input:focus,select:focus,textarea:focus{border-color:#C2A23A;box-shadow:0 0 0 3px rgba(212,175,55,.13)}input::placeholder,textarea::placeholder{color:#A1A1AA}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.checkbox-line{display:flex;align-items:center;gap:8px}.checkbox-line input{width:auto;min-height:auto}.filter-bar{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:9px;align-items:end}.filter-actions{display:flex;gap:7px}.filter-panel{background:#FBFAF7;border:1px solid var(--al-line);border-radius:13px;padding:13px;margin-bottom:14px}.filters{display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;margin-bottom:16px}
.table-wrap{width:100%;overflow:auto;border:1px solid var(--al-line);border-radius:12px}.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;background:#fff}.data-table th{position:sticky;top:0;background:#F8F7F4;z-index:2;text-align:left;padding:10px 12px;border-bottom:1px solid var(--al-line);font-size:10px;text-transform:uppercase;letter-spacing:.065em;color:#747474;white-space:nowrap}.data-table td{padding:11px 12px;border-bottom:1px solid #EEECE7;vertical-align:top}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover td{background:#FFFDF8}.data-table a.link{font-weight:750;text-decoration:none;color:#1f1f1f}.data-table a.link:hover{color:var(--al-gold-dark)}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.table-sub{display:block;font-size:11px;color:var(--al-muted);margin-top:2px}.money{font-variant-numeric:tabular-nums;font-weight:750}.empty{padding:34px 18px;text-align:center;color:var(--al-muted)}.empty svg{width:36px;height:36px;color:#c4c1b8;margin-bottom:8px}
.badge{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:3px 8px;border-radius:999px;background:#EFEFEB;color:#4b4b48;font-size:11px;font-weight:750;white-space:nowrap}.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#aaa}.badge-success,.badge.won,.badge.paid_registered,.badge.confirmed,.badge.completed,.badge.attended{background:var(--al-success-bg);color:var(--al-success)}.badge-success::before,.badge.won::before,.badge.paid_registered::before,.badge.confirmed::before,.badge.completed::before,.badge.attended::before{background:var(--al-success)}.badge-warning,.badge.high,.badge.warm,.badge.scheduled,.badge.upcoming{background:var(--al-warning-bg);color:var(--al-warning)}.badge-warning::before,.badge.high::before,.badge.warm::before,.badge.scheduled::before,.badge.upcoming::before{background:#D19B13}.badge-danger,.badge.critical,.badge.overdue,.badge.lost,.badge.no_show,.badge.at_risk{background:var(--al-danger-bg);color:var(--al-danger)}.badge-danger::before,.badge.critical::before,.badge.overdue::before,.badge.lost::before,.badge.no_show::before,.badge.at_risk::before{background:var(--al-danger)}.badge-info,.badge.interested,.badge.qualified,.badge.in_progress{background:var(--al-info-bg);color:var(--al-info)}.badge-info::before,.badge.interested::before,.badge.qualified::before,.badge.in_progress::before{background:var(--al-info)}.badge-gold{background:var(--al-gold-soft);color:#765c08}.badge-gold::before{background:var(--al-gold-dark)}
.profile-hero{background:linear-gradient(120deg,#101010 0%,#191919 66%,#27210d 100%);color:#fff;border-radius:var(--radius-lg);padding:21px 23px;box-shadow:var(--shadow);position:relative;overflow:hidden}.profile-hero::after{content:"";position:absolute;right:-55px;top:-85px;width:230px;height:230px;border:1px solid rgba(212,175,55,.17);border-radius:50%}.profile-hero-top{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;position:relative;z-index:1}.profile-code{font-size:11px;color:#A7A7A7;text-transform:uppercase;letter-spacing:.12em}.profile-name{font-size:26px;font-weight:850;letter-spacing:-.035em;margin:5px 0 8px}.profile-meta{display:flex;flex-wrap:wrap;gap:8px 15px;color:#B9B9B9;font-size:12px}.profile-meta span{display:flex;gap:6px;align-items:center}.profile-meta svg{width:14px;height:14px;color:var(--al-gold)}.profile-badges{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.profile-hero .badge{border:1px solid rgba(255,255,255,.08)}.profile-hero .badge:not(.badge-success):not(.badge-warning):not(.badge-danger):not(.badge-info):not(.badge-gold){background:#262626;color:#ddd}.profile-hero .badge:not(.badge-success):not(.badge-warning):not(.badge-danger):not(.badge-info):not(.badge-gold)::before{background:#777}
.info-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.info-item{padding:11px 12px;background:#FAF9F7;border:1px solid #EEECE6;border-radius:10px}.info-item .label{display:block;font-size:10px;color:#858585;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}.info-item .value{font-weight:700;word-break:break-word}.info-item.full{grid-column:1/-1}
.tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid var(--al-line);margin-bottom:16px}.tab-btn{appearance:none;border:0;background:transparent;padding:10px 11px;font-weight:750;font-size:12px;color:#707070;border-bottom:2px solid transparent;cursor:pointer}.tab-btn.active{color:#171717;border-color:var(--al-gold)}.tab-panel{display:none}.tab-panel.active{display:block}.timeline{display:grid;gap:0}.timeline-item{display:grid;grid-template-columns:23px 1fr;gap:10px;position:relative;padding-bottom:18px}.timeline-item:not(:last-child)::before{content:"";position:absolute;left:10px;top:21px;bottom:0;width:1px;background:#dedcd5}.timeline-dot{width:21px;height:21px;border-radius:50%;background:#fff;border:2px solid var(--al-gold);position:relative;z-index:1}.timeline-content{padding:0 0 0 2px}.timeline-title{font-weight:750}.timeline-time{font-size:11px;color:var(--al-muted);margin-top:2px}.timeline-summary{font-size:12px;color:#555;margin-top:5px}.timeline-payload{margin-top:6px;background:#f7f6f3;border-radius:8px;padding:7px 9px;font-size:11px;color:#666;word-break:break-word}
.alert-list{display:grid;gap:8px}.alert-item{display:flex;gap:10px;padding:11px 12px;border-radius:11px;border:1px solid var(--al-line);background:#fff}.alert-item.critical{border-left:4px solid var(--al-danger);background:#fffafa}.alert-item.high{border-left:4px solid #D19B13}.alert-item.medium{border-left:4px solid var(--al-info)}.alert-icon{width:28px;height:28px;border-radius:8px;background:#f5f4f1;display:grid;place-items:center;flex:0 0 auto}.alert-icon svg{width:15px;height:15px}.alert-main{min-width:0}.alert-main strong{font-size:12px}.alert-main p{margin:3px 0 0;color:#666;font-size:11px}
.progress{height:8px;border-radius:99px;background:#ECEAE4;overflow:hidden}.progress > span{display:block;height:100%;border-radius:inherit;background:var(--al-gold)}.stat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0}.stat-row .name{font-size:12px}.stat-row .value{font-weight:800;font-size:12px}.divider{border:0;border-top:1px solid var(--al-line);margin:16px 0}.muted{color:var(--al-muted)}.text-danger{color:var(--al-danger)}.text-success{color:var(--al-success)}.text-gold{color:var(--al-gold-dark)}.text-right{text-align:right}.nowrap{white-space:nowrap}.small{font-size:11px}.heading-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.heading-row h2,.heading-row h3{margin:0}.heading-row p{margin:4px 0 0;color:var(--al-muted)}
.details-box{border:1px solid var(--al-line);border-radius:11px;background:#fff;overflow:hidden}.details-box summary{cursor:pointer;padding:10px 12px;font-weight:750;background:#FAF9F6;list-style:none}.details-box summary::-webkit-details-marker{display:none}.details-box summary::after{content:"+";float:right;color:#777}.details-box[open] summary::after{content:"−"}.details-content{padding:12px;border-top:1px solid var(--al-line)}
.integration-off{border-left:4px solid #989898}.integration-on{border-left:4px solid var(--al-gold)}
.login-page{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(430px,47%) 1fr;background:#090909}.login-brand{min-height:100vh;min-height:100dvh;position:relative;overflow:hidden;padding:64px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(circle at 20% 20%,rgba(212,175,55,.13),transparent 35%),linear-gradient(145deg,#090909,#111)}.login-brand::after{content:"";position:absolute;right:-210px;bottom:-260px;width:620px;height:620px;border-radius:50%;border:1px solid rgba(212,175,55,.14);box-shadow:0 0 0 70px rgba(212,175,55,.025),0 0 0 140px rgba(212,175,55,.018)}.login-logo{width:min(520px,80%);position:relative;z-index:1}.login-copy{position:relative;z-index:1;max-width:540px}.login-copy .eyebrow{color:var(--al-gold);font-weight:800;text-transform:uppercase;letter-spacing:.17em;font-size:11px}.login-copy h1{color:#fff;font-size:44px;line-height:1.06;letter-spacing:-.045em;margin:11px 0 15px}.login-copy p{color:#8f8f8f;font-size:15px;max-width:460px}.login-form-wrap{min-height:100vh;min-height:100dvh;background:#F5F4F0;display:grid;place-items:center;padding:40px}.login-card{width:min(440px,100%);background:#fff;border:1px solid #e5e2d9;border-radius:20px;padding:30px;box-shadow:0 24px 80px rgba(0,0,0,.1)}.login-card h2{margin:0;font-size:25px;letter-spacing:-.03em}.login-card .sub{color:var(--al-muted);margin:6px 0 23px}.login-card .field{margin:13px 0}.login-card .btn{margin-top:7px}
@media(max-width:1350px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.filter-bar{grid-template-columns:repeat(4,1fr)}.form-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1080px){:root{--sidebar-w:235px}.brand img{width:190px}.page{padding:22px}.topbar{padding:0 22px}.kpi-grid{grid-template-columns:repeat(2,1fr)}.layout-main-side{grid-template-columns:1fr}.filter-bar{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.topbar-search{min-width:260px}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;left:-300px;width:280px;transition:left .2s ease;box-shadow:20px 0 50px rgba(0,0,0,.3)}body.nav-open .sidebar{left:0}.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:35}body.nav-open .sidebar-overlay{display:block}.mobile-menu{display:grid}.topbar{height:auto;min-height:68px;padding:12px 16px;flex-wrap:wrap}.page-title{min-width:0;flex:1}.page-title h1{font-size:19px}.page-title p{display:none}.topbar-search{order:3;width:100%;max-width:none;min-width:0}.page{padding:16px}.kpi-grid{grid-template-columns:1fr 1fr}.filter-bar,.filters{grid-template-columns:1fr 1fr}.form-grid,.form-grid.two,.form-grid.four,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}.profile-hero-top{display:grid}.profile-badges{justify-content:flex-start}.info-list{grid-template-columns:1fr}.login-page{grid-template-columns:1fr}.login-brand{display:none}.login-form-wrap{min-height:100vh;padding:24px}.login-card::before{content:"";display:block;background:url('/images/american-lab-logo.png') center/contain no-repeat;height:66px;margin-bottom:23px}.section-head{align-items:flex-start}.filter-panel{padding:10px}}
@media(max-width:520px){.kpi-grid{grid-template-columns:1fr}.filter-bar,.filters{grid-template-columns:1fr}.topbar-actions{margin-left:auto}.page{padding:12px}.card{padding:14px}.section-body{padding:14px}.profile-hero{padding:17px}.profile-name{font-size:22px}.login-card{padding:22px}.row-actions{flex-direction:column;align-items:stretch}.row-actions .btn{width:100%}}
@media print{.sidebar,.topbar,.btn,.filter-panel,.no-print{display:none!important}.app-shell{display:block}.page{padding:0}.card{box-shadow:none;break-inside:avoid}.table-wrap{overflow:visible;border:0}.data-table{min-width:0}}
/* Management dashboard completion pass */
.management-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}.kpi-value small{font-size:11px;font-weight:750;letter-spacing:0;color:var(--al-muted)}
.risk-card{border-left:4px solid var(--al-danger)!important}.warning-card{border-left:4px solid #d09a13!important}.funnel-list{display:grid;gap:13px}.funnel-row{display:grid;gap:6px}.funnel-label{display:flex;justify-content:space-between;gap:12px;font-size:12px}.funnel-label strong{font-variant-numeric:tabular-nums}.trend-list{display:grid;gap:14px}.trend-row{display:grid;gap:7px}.trend-top{display:flex;justify-content:space-between;gap:12px;font-size:12px}.trend-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--al-muted);font-size:10px}.compact-table{min-width:520px}
@media(max-width:1550px){.management-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1180px){.management-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.management-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.management-kpis{grid-template-columns:1fr}}
.audit-json{min-width:min(620px,75vw)}.audit-json pre{white-space:pre-wrap;word-break:break-word;background:#101010;color:#e7e7e7;border-radius:9px;padding:10px;max-height:260px;overflow:auto;font-size:11px}.idempotency-code{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#f5f3ec;border:1px solid #e5e0d1;border-radius:6px;padding:3px 6px}

/* ========================================================================== 
   FINAL UI LAYOUT HARDENING — American Lab CRM
   Purpose: keep navigation/content proportions stable across desktop, browser
   zoom, laptop, tablet and mobile widths. Avoid compressed KPI/table columns.
   ========================================================================== */
:root{
  --sidebar-w:272px;
  --page-gutter:clamp(16px,2.1vw,34px);
  --content-max:1760px;
}
html,body{max-width:100%;overflow-x:hidden}
body{min-width:0}
.app-shell{display:block;min-height:100vh;width:100%}
.sidebar{
  position:fixed;
  inset:0 auto 0 0;
  left:0!important;
  right:auto!important;
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  max-width:var(--sidebar-w);
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  z-index:50;
}
.sidebar-overlay{display:none}
.main-area{
  width:calc(100% - var(--sidebar-w));
  max-width:calc(100% - var(--sidebar-w));
  min-width:0;
  margin-left:var(--sidebar-w);
}
.topbar{width:100%;min-width:0;padding-inline:var(--page-gutter)}
.page{
  width:100%;
  max-width:var(--content-max);
  min-width:0;
  margin-inline:auto;
  padding:26px var(--page-gutter) 46px;
}
.page>*{min-width:0}
.brand{height:96px;padding:18px 20px 16px}.brand img{width:216px}
.sidebar-body{min-height:calc(100dvh - 96px);display:flex;flex-direction:column}.sidebar-body nav{min-width:0}.sidebar-user{margin-top:auto}
.nav-link{min-width:0}.nav-link span:not(.nav-count){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Grids choose readable column widths instead of forcing narrow columns. */
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.layout-main-side{grid-template-columns:minmax(0,1.75fr) minmax(300px,.8fr);gap:18px}
.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:14px}
.management-kpis{grid-template-columns:repeat(auto-fit,minmax(min(100%,205px),1fr))}
.kpi{min-width:0;min-height:112px}.kpi-value{overflow-wrap:anywhere}

/* Filters/forms reflow by minimum usable field width. */
.filter-bar,.filters{grid-template-columns:repeat(auto-fit,minmax(min(100%,185px),1fr));gap:10px}
.form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.form-grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.form-grid.four{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.filter-actions{align-self:end;min-height:40px;flex-wrap:wrap}
.filter-actions .btn{flex:0 0 auto}
.section-head{min-width:0}.section-head>div:first-child{min-width:0}.section-head h2,.section-head h3{overflow-wrap:anywhere}
.section-actions{min-width:0}.section-actions input,.section-actions select{width:auto;min-width:165px}

/* Tables preserve useful column widths and scroll horizontally when needed. */
.table-wrap{
  max-width:100%;
  overflow-x:auto;
  overflow-y:visible;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
.data-table{
  width:max-content;
  min-width:100%;
  max-width:none;
  table-layout:auto;
}
.data-table th,.data-table td{min-width:88px}
.data-table th:first-child,.data-table td:first-child{min-width:145px}
.data-table th{top:0}
.data-table td{max-width:360px;overflow-wrap:anywhere}
.data-table td.money,.data-table td.nowrap{white-space:nowrap;overflow-wrap:normal}
.data-table .row-actions{min-width:150px}
.compact-table{width:100%;min-width:520px}
.table-wrap:focus-within{outline:2px solid rgba(212,175,55,.16);outline-offset:2px}

/* Profile/tabs remain readable rather than wrapping into a tall wall. */
.tabs{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;scrollbar-width:thin;padding-bottom:1px}
.tab-btn{white-space:nowrap;flex:0 0 auto}
.profile-hero-top{min-width:0}.profile-hero-top>div{min-width:0}.profile-meta{min-width:0}

/* Topbar never steals the content width. */
.page-title{min-width:190px;max-width:420px}.topbar-search{min-width:240px;max-width:500px;width:min(42%,500px)}

@media(max-width:1240px){
  :root{--sidebar-w:244px}
  .brand img{width:188px}
  .topbar{gap:12px}
  .topbar-search{min-width:220px;width:min(38%,420px)}
  .layout-main-side{grid-template-columns:1fr}
}

/* Drawer mode also covers narrow CSS viewports caused by browser zoom. */
@media(max-width:940px){
  :root{--sidebar-w:272px}
  .app-shell{display:block}
  .main-area{width:100%;max-width:100%;margin-left:0}
  .sidebar{
    position:fixed;
    width:min(292px,calc(100vw - 52px));
    min-width:0;
    max-width:min(292px,calc(100vw - 52px));
    left:0;
    top:0;
    height:100dvh;
    z-index:50;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:22px 0 60px rgba(0,0,0,.34);
  }
  body.nav-open{overflow:hidden}
  body.nav-open .sidebar{transform:translateX(0)}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:45;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s ease}
  body.nav-open .sidebar-overlay{opacity:1;visibility:visible;pointer-events:auto}
  .mobile-menu{display:grid}
  .topbar{min-height:72px;padding:11px var(--page-gutter);flex-wrap:wrap}
  .page-title{min-width:0;max-width:none;flex:1}
  .page-title p{display:none}
  .topbar-search{order:3;width:100%;max-width:none;min-width:0;flex:1 0 100%}
  .topbar-actions{margin-left:auto}
  .page{padding-top:18px}
}

@media(max-width:700px){
  :root{--page-gutter:14px}
  .page-title h1{font-size:19px}
  .kpi-grid,.management-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2,.grid-3,.grid-4,.layout-main-side{grid-template-columns:1fr}
  .filter-bar,.filters,.form-grid,.form-grid.two,.form-grid.four{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:stretch}
  .section-actions{width:100%}.section-actions input,.section-actions select,.section-actions .btn{width:100%}
  .profile-hero-top{display:grid}.profile-badges{justify-content:flex-start}
  .info-list{grid-template-columns:1fr}
}

@media(max-width:460px){
  .kpi-grid,.management-kpis{grid-template-columns:1fr}
  .page{padding-inline:12px}
  .card{padding:14px}
  .section-body{padding:14px}
  .section-head{padding:14px}
  .row-actions{flex-direction:column;align-items:stretch}.row-actions .btn{width:100%}
  .sidebar{width:min(280px,calc(100vw - 36px));max-width:min(280px,calc(100vw - 36px))}
}

@media print{
  .main-area{width:100%;max-width:none;margin-left:0}
  .page{max-width:none}
}

/* Wide management/financial tables keep identity column visible while scrolling. */
.table-freeze-first th:first-child,.table-freeze-first td:first-child{position:sticky;left:0;z-index:3;background:#fff;box-shadow:1px 0 0 var(--al-line)}
.table-freeze-first th:first-child{z-index:4;background:#F8F7F4}
.table-freeze-first tbody tr:hover td:first-child{background:#FFFDF8}
.table-freeze-first .money{text-align:right}
@media(max-width:700px){.table-freeze-first th:first-child,.table-freeze-first td:first-child{position:static;box-shadow:none}}

/* ========================================================================== 
   RESPONSIVE DEVICE MATRIX — laptop / tablet / mobile final pass
   ========================================================================== */
/* Search dropdown is part of the shell and must never overflow the viewport. */
.lead-search{position:relative;width:100%;min-width:0}
.lead-search-input-wrap{position:relative;min-width:0}
.lead-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#999;pointer-events:none;display:grid;place-items:center}
.lead-search-icon svg{width:17px;height:17px}
.lead-search-input{padding-left:38px;background:#FAFAF8}
.lead-search-results{position:absolute;z-index:80;width:100%;min-width:min(420px,calc(100vw - 32px));padding:6px;top:47px;right:0;max-height:min(380px,55vh);overflow:auto}
.lead-search-result{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 11px;text-decoration:none;border-radius:9px;min-width:0}
.lead-search-result:hover,.lead-search-result:focus{background:#FAF7E9;outline:none}
.lead-search-result>span:first-child{display:grid;min-width:0}.lead-search-result strong,.lead-search-result small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lead-search-result small{color:var(--al-muted);font-size:10px;margin-top:2px}.lead-search-result-meta{flex:0 0 auto;color:var(--al-muted);font-size:11px}.lead-search-empty{padding:18px 12px}

/* Semantic table widths: important identity/action columns remain readable. */
.table-workspace th:nth-child(1),.table-workspace td:nth-child(1){min-width:132px}
.table-workspace th:nth-child(2),.table-workspace td:nth-child(2){min-width:175px}
.table-workspace th:nth-child(3),.table-workspace td:nth-child(3){min-width:280px;max-width:360px}
.table-workspace th:nth-child(4),.table-workspace td:nth-child(4),.table-workspace th:nth-child(5),.table-workspace td:nth-child(5){min-width:105px}
.table-workspace th:nth-child(6),.table-workspace td:nth-child(6){min-width:155px}
.table-workspace th:nth-child(7),.table-workspace td:nth-child(7){min-width:240px;max-width:none}
.table-leads th:nth-child(1),.table-leads td:nth-child(1){min-width:190px}.table-leads th:nth-child(2),.table-leads td:nth-child(2){min-width:170px}.table-leads th:nth-child(3),.table-leads td:nth-child(3){min-width:150px}.table-leads th:nth-child(5),.table-leads td:nth-child(5){min-width:145px}.table-leads th:nth-child(6),.table-leads td:nth-child(6){min-width:155px}
.table-appointments th:nth-child(1),.table-appointments td:nth-child(1){min-width:145px}.table-appointments th:nth-child(2),.table-appointments td:nth-child(2){min-width:190px}.table-appointments th:nth-child(5),.table-appointments td:nth-child(5),.table-appointments th:nth-child(6),.table-appointments td:nth-child(6){min-width:150px}.table-appointments th:nth-child(7),.table-appointments td:nth-child(7){min-width:270px;max-width:none}
.table-employees th:nth-child(1),.table-employees td:nth-child(1){min-width:180px}.table-employees th:nth-child(3),.table-employees td:nth-child(3){min-width:220px}.table-employees th:nth-child(5),.table-employees td:nth-child(5){min-width:180px}.table-employees th:nth-child(8),.table-employees td:nth-child(8){min-width:180px;max-width:none}
.table-audit th:nth-child(1),.table-audit td:nth-child(1){min-width:155px}.table-audit th:nth-child(2),.table-audit td:nth-child(2){min-width:170px}.table-audit th:nth-child(5),.table-audit td:nth-child(5){min-width:220px}.table-audit th:nth-child(6),.table-audit td:nth-child(6){min-width:180px;max-width:none}
.table-integrations th:nth-child(1),.table-integrations td:nth-child(1){min-width:155px}.table-integrations th:nth-child(3),.table-integrations td:nth-child(3){min-width:190px}.table-integrations th:nth-child(7),.table-integrations td:nth-child(7){min-width:180px}.table-integrations th:nth-child(8),.table-integrations td:nth-child(8){min-width:230px}
.table-closed th:nth-child(1),.table-closed td:nth-child(1){min-width:185px}.table-closed th:nth-child(3),.table-closed td:nth-child(3){min-width:155px}.table-closed th:nth-child(4),.table-closed td:nth-child(4),.table-closed th:nth-child(5),.table-closed td:nth-child(5){min-width:165px}

/* Open table actions should remain usable inside horizontally scrolling tables. */
.data-table details{position:relative}.data-table .details-content{min-width:min(320px,calc(100vw - 56px));max-width:min(480px,calc(100vw - 40px))}
.data-table .details-content .form-grid,.data-table .details-content .form-grid.two,.data-table .details-content .form-grid.four{grid-template-columns:1fr}

/* Laptop: preserve content real estate while keeping full desktop navigation. */
@media (min-width:941px) and (max-width:1366px){
  :root{--sidebar-w:236px;--page-gutter:20px}
  .brand{height:90px;padding:17px 16px}.brand img{width:186px}.sidebar-body{min-height:calc(100dvh - 90px);padding-inline:10px}
  .nav-link{padding-inline:9px;gap:9px}.nav-label{padding-left:9px;padding-right:9px}
  .topbar{min-height:72px;gap:12px}.page-title{min-width:170px}.page-title h1{font-size:20px}.page-title p{font-size:11px}
  .topbar-search{min-width:210px;width:min(38%,420px)}
  .page{padding-top:22px}
  .kpi-grid,.management-kpis{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .filter-bar,.filters{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
  .form-grid{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
}

/* Small laptop / large tablet landscape: navigation becomes an overlay drawer. */
@media (min-width:769px) and (max-width:940px){
  :root{--page-gutter:20px}
  .topbar{align-items:flex-start}
  .page-title h1{font-size:20px}
  .kpi-grid,.management-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filter-bar,.filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid,.form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .btn,.topbar-action,input,select,textarea{min-height:44px}
  .btn-sm{min-height:36px}
}

/* Tablet portrait: two-card rhythm, stacked content sections, touch-friendly controls. */
@media (min-width:601px) and (max-width:768px){
  :root{--page-gutter:16px}
  .topbar{gap:10px}.topbar-action{width:42px;height:42px}.mobile-menu{width:42px;height:42px}
  .kpi-grid,.management-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{min-height:108px}.kpi-value{font-size:27px}
  .filter-bar,.filters,.form-grid,.form-grid.two,.form-grid.four{grid-template-columns:1fr 1fr}
  .layout-main-side,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .section-head{flex-direction:column;align-items:stretch}.section-actions{width:100%}.section-actions .btn{flex:1 1 180px}
  .btn,.topbar-action,input,select,textarea{min-height:44px}.btn-sm{min-height:38px}
  .data-table th,.data-table td{padding:10px 11px}.data-table{font-size:13px}
  .login-form-wrap{padding:28px}.login-card{width:min(480px,100%)}
}

/* Mobile: one-column forms/cards; data tables stay horizontally scrollable rather than crushing columns. */
@media (max-width:600px){
  :root{--page-gutter:12px}
  body{font-size:13px}
  .topbar{gap:8px;padding:10px var(--page-gutter)}.page-title h1{font-size:18px}.topbar-action,.mobile-menu{width:42px;height:42px}
  .topbar-search{order:3;flex-basis:100%;width:100%}.lead-search-results{position:fixed;left:12px;right:12px;top:118px;width:auto;min-width:0;max-height:48vh}
  .page{padding:14px var(--page-gutter) 34px}
  .kpi-grid,.management-kpis,.filter-bar,.filters,.form-grid,.form-grid.two,.form-grid.four,.grid-2,.grid-3,.grid-4,.layout-main-side{grid-template-columns:1fr}
  .kpi{min-height:100px}.kpi-value{font-size:27px}
  .card{border-radius:12px}.section-card{border-radius:12px}.section-head{gap:10px;padding:14px;flex-direction:column;align-items:stretch}.section-body{padding:14px}
  .section-actions{display:grid;grid-template-columns:1fr;align-items:stretch}.section-actions>*{width:100%!important;min-width:0!important}
  .filter-panel{padding:10px}.filter-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}.filter-actions .btn{width:100%}
  input,select,textarea{font-size:16px;min-height:46px} /* Prevent iOS focus zoom. */
  .btn{min-height:44px;padding-inline:12px}.btn-sm{min-height:40px}.icon-btn{width:42px;height:42px}
  .profile-hero{padding:16px}.profile-name{font-size:22px}.profile-meta{display:grid;grid-template-columns:1fr;gap:6px}.profile-badges{justify-content:flex-start}
  .tabs{margin-inline:-14px;padding-inline:14px;scroll-padding-inline:14px}.tab-btn{min-height:43px}
  .table-wrap{margin-inline:0;border-radius:10px}.data-table{font-size:12px;min-width:680px}.data-table th{font-size:9px;padding:9px 10px}.data-table td{padding:10px;max-width:300px}
  .row-actions{min-width:190px}.row-actions .btn{width:auto;min-height:38px}.row-actions details{width:auto}
  .heading-row{flex-direction:column;align-items:stretch}.heading-row>.btn{width:100%}
  .alert-item{padding:10px}.audit-json{min-width:min(520px,calc(100vw - 70px))}
  .login-form-wrap{padding:18px}.login-card{padding:22px;border-radius:16px}
}

@media (max-width:390px){
  .topbar-actions{gap:5px}.topbar-action,.mobile-menu{width:40px;height:40px}
  .page-title h1{font-size:17px}
  .filter-actions{grid-template-columns:1fr}
  .lead-search-results{top:114px;left:8px;right:8px}
  .page{padding-inline:10px}.section-head,.section-body,.card{padding-left:12px;padding-right:12px}
}

/* Landscape phones: use available width without reintroducing desktop sidebar. */
@media (max-height:520px) and (max-width:940px) and (orientation:landscape){
  .sidebar{width:min(300px,46vw);max-width:min(300px,46vw)}
  .brand{height:76px;padding:12px 16px}.brand img{width:175px}.sidebar-body{min-height:calc(100dvh - 76px)}
  .topbar-search{order:0;flex:1 1 260px;width:auto}.page-title p{display:none}
}

/* Branded error surfaces are responsive and do not expose framework internals. */
.error-page{min-height:100dvh;background:radial-gradient(circle at 20% 15%,rgba(212,175,55,.12),transparent 34%),#090909;color:#fff;display:grid;place-items:center;padding:24px}
.error-shell{width:min(720px,100%);text-align:center}.error-logo{width:min(300px,72vw);height:auto;margin-bottom:32px}.error-code{font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--al-gold);font-weight:850}.error-title{font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:-.045em;margin:10px 0 12px}.error-copy{color:#aaa;max-width:560px;margin:0 auto 24px;font-size:15px}.error-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.error-actions .btn{min-width:150px}
@media(max-width:520px){.error-page{padding:18px}.error-logo{margin-bottom:24px}.error-copy{font-size:14px}.error-actions{display:grid;grid-template-columns:1fr;width:100%}.error-actions .btn{width:100%}}