:root{--bg:#f5f7fb;--panel:#fff;--ink:#172033;--muted:#667085;--line:#e5e7eb;--nav:#081c35;--nav2:#0b2849;--blue:#1267e5;--green:#16a34a;--red:#dc2626;--amber:#f59e0b;--purple:#7c3aed;--teal:#0891b2;--radius:14px;--shadow:0 8px 22px rgba(15,23,42,.06)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--ink)}a{color:var(--blue);text-decoration:none}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:linear-gradient(180deg,var(--nav),var(--nav2));color:#fff;padding:20px 16px;position:fixed;top:0;bottom:0;left:0;overflow:auto}.brand{display:flex;gap:12px;align-items:center;margin-bottom:26px}.brand-icon{width:42px;height:42px;border-radius:12px;background:#1369e9;display:grid;place-items:center;font-weight:800}.brand-title{font-size:18px;font-weight:800}.brand-sub{font-size:12px;color:#b9c6d6}.nav-section{margin:14px 0}.nav-title{font-size:11px;text-transform:uppercase;color:#8fa3bb;margin:18px 12px 8px}.nav-link{display:flex;gap:11px;align-items:center;padding:11px 12px;border-radius:10px;color:#dce6f2;font-size:14px}.nav-link.active,.nav-link:hover{background:#1267e5;color:#fff}.main{margin-left:270px;width:calc(100% - 270px)}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:10}.search{width:420px;max-width:45vw;border:1px solid var(--line);border-radius:10px;padding:10px 14px;color:var(--muted)}.top-user{display:flex;align-items:center;gap:14px}.avatar{width:36px;height:36px;border-radius:50%;background:#dbeafe;display:grid;place-items:center;font-weight:700}.content{padding:26px 28px}.page-title{font-size:26px;margin:0 0 6px}.page-subtitle{margin:0 0 24px;color:var(--muted)}.grid{display:grid;gap:18px}.grid.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.grid.two{grid-template-columns:2fr 1fr}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.metric{display:flex;align-items:center;gap:14px}.metric-icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:800}.metric h3{font-size:13px;color:var(--muted);margin:0 0 4px}.metric .value{font-size:24px;font-weight:800}.metric small{color:var(--green)}.blue{background:var(--blue)}.green{background:var(--green)}.red{background:var(--red)}.amber{background:var(--amber)}.purple{background:var(--purple)}.teal{background:var(--teal)}.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px}.data-table th{color:var(--muted);font-weight:700;background:#f8fafc}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700}.badge.success{background:#dcfce7;color:#166534}.badge.warning{background:#fef3c7;color:#92400e}.badge.danger{background:#fee2e2;color:#991b1b}.badge.info{background:#dbeafe;color:#1e40af}.badge.gray{background:#f1f5f9;color:#475569}.actions{display:flex;gap:8px;flex-wrap:wrap}.btn{border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;background:#e5e7eb;color:#111827}.btn.primary{background:var(--blue);color:#fff}.btn.danger{background:var(--red);color:#fff}.btn.ghost{background:#eef4ff;color:#1257bd}.form-group{margin-bottom:14px}.label{display:block;font-size:13px;font-weight:700;margin-bottom:6px}.input,.select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;background:#fff}.auth-body{min-height:100vh;background:linear-gradient(135deg,#071c35,#1267e5);display:grid;place-items:center;padding:20px}.auth-card{width:100%;max-width:430px;background:#fff;border-radius:18px;padding:28px;box-shadow:0 18px 60px rgba(0,0,0,.2)}.auth-card h1{margin:0 0 6px}.flash{border-radius:10px;padding:12px 14px;margin-bottom:16px}.flash.error{background:#fee2e2;color:#991b1b}.flash.success{background:#dcfce7;color:#166534}.placeholder-chart{height:260px;border:1px dashed #cbd5e1;border-radius:12px;background:linear-gradient(135deg,#eff6ff,#fff);display:grid;place-items:center;color:#64748b;font-weight:700}.progress{height:9px;background:#e5e7eb;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:var(--blue)}.module-card{display:flex;flex-direction:column;gap:10px}.module-card h3{margin:0}.module-card p{color:var(--muted);margin:0;min-height:42px}.footer-note{color:var(--muted);font-size:12px;margin-top:20px}@media(max-width:1100px){.sidebar{position:relative;width:100%;height:auto}.main{margin-left:0;width:100%}.app-shell{display:block}.grid.cards,.grid.two,.grid.three{grid-template-columns:1fr}.search{display:none}}

/* Phase 6.10C - Global App Shell Alignment Hotfix
   Keeps all tenant/admin pages aligned directly after the sidebar, removes the oversized left gutter,
   and makes cards/tables/grids fit within the available page width. */
:root{
  --sidebar-width:240px;
  --app-gutter-x:20px;
  --app-gutter-y:22px;
}
html,body{width:100%;max-width:100%;overflow-x:hidden}.app-shell{width:100%;max-width:100vw;overflow-x:hidden}.sidebar{width:var(--sidebar-width);padding:18px 12px}.main{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));min-width:0;max-width:none}.topbar{padding:0 var(--app-gutter-x);min-width:0}.topbar .search,.search{width:min(420px,42vw);max-width:100%}.content{padding:var(--app-gutter-y) var(--app-gutter-x);margin:0;width:100%;max-width:none;min-width:0}.content>*{max-width:100%}.content>:first-child{margin-top:0}.page-title{margin-top:0}.grid{width:100%;min-width:0}.grid.cards{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.grid.two{grid-template-columns:minmax(0,2fr) minmax(320px,1fr)}.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}.card{min-width:0;max-width:100%;overflow-x:auto}.data-table{width:100%;max-width:100%}table{max-width:100%}.actions{max-width:100%}.module-card,.metric{min-width:0}
/* Common generated phase wrappers/cards should not add a second page gutter. */
.content .p57b-wrap,.content .fc-wrap,.content .bc-wrap{padding:0!important;margin-left:0!important;margin-right:0!important;max-width:none!important;width:100%!important}.content .p57b-hero,.content .fc-hero,.content .bc-hero{max-width:100%}.content [class$="-grid"],.content [class$="-cards"],.content [class$="-table"],.content [class$="-form"]{min-width:0;max-width:100%}.content [class$="-card"]{min-width:0;max-width:100%}
@media(max-width:1280px){:root{--sidebar-width:225px;--app-gutter-x:18px}.grid.two{grid-template-columns:1fr}.grid.cards{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}}
@media(max-width:1100px){.sidebar{position:relative;width:100%;height:auto}.main{margin-left:0;width:100%}.app-shell{display:block}.grid.cards,.grid.two,.grid.three{grid-template-columns:1fr}.search{display:none}.content{padding:16px}.topbar{padding:0 16px}}
@media(max-width:760px){:root{--app-gutter-x:14px;--app-gutter-y:16px}.content{padding:16px 14px}.card{padding:14px}.page-title{font-size:23px}.top-user{gap:8px}.btn{padding:9px 11px}.data-table th,.data-table td{padding:9px;font-size:13px}}
/* Phase 6.10D - Sidebar stray flex-item gap hotfix
   Prevent any accidental direct app-shell shortcut links from creating a gutter between fixed sidebar and main content. */
.app-shell > .sidebar-link{display:none!important}
.app-shell > a:not(.nav-link):not(.btn){flex:0 0 auto}
.sidebar .sidebar-link{display:flex;gap:11px;align-items:center;padding:11px 12px;border-radius:10px;color:#dce6f2;font-size:14px}
.sidebar .sidebar-link:hover{background:#1267e5;color:#fff}
.main{margin-left:var(--sidebar-width)!important;width:calc(100% - var(--sidebar-width))!important}
@media(max-width:1100px){.main{margin-left:0!important;width:100%!important}}
/* Phase 6.10V2 - clickable topbar alert badges */
.topbar-icon{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:#f8fafc;color:#0f172a;text-decoration:none;border:1px solid transparent}
.topbar-icon:hover{background:#eef4ff;border-color:#dbeafe}
.topbar-icon em{position:absolute;top:-6px;right:-7px;min-width:18px;height:18px;border-radius:999px;background:#dc2626;color:#fff;font-style:normal;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;line-height:18px;box-shadow:0 3px 8px rgba(220,38,38,.24)}

/* Phase 7.12B - Sectioned accordion sidebar and responsive off-canvas navigation */
[hidden]{display:none!important}
.sidebar{display:flex;flex-direction:column;overflow:hidden}
.sidebar .brand{flex:0 0 auto;margin-bottom:10px;padding:0 2px 12px;border-bottom:1px solid rgba(255,255,255,.09)}
.brand-copy{min-width:0;flex:1}.brand-title,.brand-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 8px;color:#8fa3bb;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.sidebar-tools button{border:0;background:transparent;color:#9fb2c9;font:inherit;font-size:10px;letter-spacing:0;text-transform:none;cursor:pointer;padding:5px 7px;border-radius:7px}
.sidebar-tools button:hover,.sidebar-tools button:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none}
.sidebar-nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 2px 20px;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.45) transparent}
.sidebar-nav::-webkit-scrollbar{width:6px}.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px}
.nav-section{display:block;margin:7px 0;border:1px solid rgba(148,163,184,.14);border-radius:11px;background:rgba(255,255,255,.025);overflow:hidden}
.nav-section.has-active{border-color:rgba(96,165,250,.46);background:rgba(18,103,229,.09)}
.nav-section-toggle{list-style:none;min-height:43px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;cursor:pointer;color:#dce6f2;user-select:none}
.nav-section-toggle::-webkit-details-marker{display:none}.nav-section-toggle::marker{display:none;content:""}
.nav-section-toggle:hover,.nav-section-toggle:focus-visible{background:rgba(255,255,255,.07);outline:none}
.nav-section-heading,.nav-section-meta{display:flex;align-items:center;min-width:0}.nav-section-heading{gap:8px}.nav-section-meta{gap:7px;flex:0 0 auto}
.nav-section-icon{width:21px;text-align:center;flex:0 0 21px;font-size:14px}
.nav-section-name{font-size:11px;line-height:1.25;font-weight:800;letter-spacing:.045em;text-transform:uppercase;color:#9fb2c9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-section.has-active .nav-section-name,.nav-section[open] .nav-section-name{color:#fff}
.nav-section-count{min-width:21px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:rgba(148,163,184,.14);color:#b9c6d6;font-size:10px;font-weight:800}
.nav-section-chevron{font-size:19px;line-height:1;color:#9fb2c9;transform:rotate(90deg);transition:transform .18s ease}
.nav-section[open] .nav-section-chevron{transform:rotate(-90deg);color:#fff}
.nav-section-links{padding:0 6px 7px;border-top:1px solid rgba(148,163,184,.09)}
.nav-section-links .nav-link{padding:9px 9px;margin:3px 0 0;border-radius:8px;font-size:13px;line-height:1.25;min-height:37px}
.nav-section-links .nav-link.active{box-shadow:inset 3px 0 0 rgba(255,255,255,.72)}
.nav-link-label{min-width:0;overflow-wrap:anywhere}
.sidebar-close{display:none;width:34px;height:34px;border:0;border-radius:9px;background:rgba(255,255,255,.09);color:#fff;font-size:24px;line-height:1;cursor:pointer;place-items:center;flex:0 0 auto}
.sidebar-close:hover,.sidebar-close:focus-visible{background:rgba(255,255,255,.16);outline:none}
.sidebar-scrim{display:none}
.topbar-start{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.mobile-menu-toggle{display:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;flex:0 0 auto}
.mobile-menu-toggle span{display:block;width:20px;height:2px;border-radius:999px;background:#172033}
.mobile-menu-toggle:hover,.mobile-menu-toggle:focus-visible{background:#f8fafc;outline:2px solid #bfdbfe;outline-offset:1px}

@media(max-width:1100px){
  body.sidebar-open{overflow:hidden}
  .app-shell{display:block;min-height:100vh;overflow:visible}
  .sidebar{position:fixed!important;top:0;bottom:0;left:0;width:min(88vw,320px)!important;height:100dvh!important;padding:16px 12px!important;transform:translateX(-105%);transition:transform .22s ease;z-index:1001;box-shadow:18px 0 48px rgba(2,8,23,.28)}
  .sidebar.is-open{transform:translateX(0)}
  .sidebar-close{display:grid}
  .sidebar-scrim{position:fixed;inset:0;display:block;border:0;padding:0;background:rgba(2,8,23,.52);backdrop-filter:blur(2px);z-index:1000;cursor:pointer}
  .main{margin-left:0!important;width:100%!important;min-width:0}
  .topbar{min-height:64px;height:auto;padding:10px 16px!important;gap:12px;z-index:900}
  .topbar-start{flex:1}
  .mobile-menu-toggle{display:inline-flex}
  .search{display:block!important;width:min(420px,100%)!important;max-width:100%!important}
}
@media(max-width:760px){
  .topbar{padding:9px 12px!important}
  .topbar-start{flex:0 0 auto}
  .search{display:none!important}
  .top-user{margin-left:auto;gap:7px}
  .top-user-meta{display:none}
  .topbar-icon{width:34px;height:34px}
  .avatar{width:34px;height:34px}
  .top-user .btn{padding:8px 9px;font-size:12px}
  .mobile-menu-toggle{width:38px;height:38px}
  .sidebar .brand{margin-bottom:8px}
  .sidebar-tools{padding-bottom:6px}
  .nav-section{margin:6px 0}
  .nav-section-toggle{min-height:45px;padding:10px}
  .nav-section-links .nav-link{min-height:40px;padding:10px 9px}
}
@media(max-width:430px){
  .topbar-icon:nth-of-type(2){display:none}
  .avatar{display:none}
  .top-user .btn{padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){.sidebar,.nav-section-chevron{transition:none}}

/* Phase 9.2A — tenant user workspace boundary and wider desktop sidebar */
.tenant-user-boundary{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:14px 0 20px;padding:13px 16px;border:1px solid #bfdbfe;border-radius:13px;background:#eff6ff;color:#1e3a8a}
.tenant-user-boundary strong{display:block}.tenant-user-boundary span:not(.badge){display:block;margin-top:3px;font-size:12px;color:#475569}
@media(max-width:760px){.tenant-user-boundary{align-items:flex-start;flex-direction:column}}