/* Fasad Kabul shared component system
   One canonical layout layer for every authenticated role and workspace. */

:root{
  --app-header-height:68px;
  --app-content-max:1460px;
  --app-control-size:40px;
  --app-section-gap:16px;
}

/* PageContainer */
.page-container{width:min(var(--app-content-max),calc(100% - 40px));max-width:var(--app-content-max);margin-inline:auto;padding:0 0 40px;min-width:0}

/* IconButton */
:is(.icon-button,.menu-trigger,.preference-button,.notification-button,.kebab){display:grid!important;place-items:center!important;width:var(--app-control-size)!important;height:var(--app-control-size)!important;min-width:var(--app-control-size)!important;min-height:var(--app-control-size)!important;padding:0!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:color-mix(in srgb,var(--color-surface-2) 78%,transparent)!important;color:var(--color-text)!important;box-shadow:none!important;transition:background .18s ease,border-color .18s ease,color .18s ease!important}
:is(.icon-button,.menu-trigger,.preference-button,.notification-button,.kebab):hover{background:var(--color-surface-3)!important;border-color:color-mix(in srgb,var(--color-accent) 52%,var(--color-border))!important}
:is(.icon-button,.menu-trigger,.preference-button,.notification-button,.kebab):focus-visible{outline:2px solid var(--color-accent)!important;outline-offset:2px!important}

/* GlobalHeader */
.app-header{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;align-items:center!important;height:var(--app-header-height)!important;min-height:var(--app-header-height)!important;padding:0 clamp(16px,2vw,36px)!important;gap:16px!important;background:rgba(8,21,27,.97)!important;color:#f3f7f6!important;border-color:rgba(255,255,255,.12)!important}
.app-header .header-left{grid-column:1;justify-self:start;display:flex;align-items:center;gap:10px;min-width:0}
.app-header .header-mark,.app-header .system-name{display:none!important}
.app-header .menu-trigger{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:10px!important}
.app-header .menu-trigger i{display:block!important;width:17px!important;height:1.5px!important;flex:0 0 1.5px!important;border:0!important;border-radius:2px!important;background:var(--color-text)!important;opacity:.9!important}
.app-header .header-logo{grid-column:2!important;justify-self:center!important;align-self:center!important;position:static!important;inset:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;width:176px!important;max-width:176px!important;height:auto!important;margin:0!important;padding:0!important;transform:none!important;border:0!important;background:transparent!important;box-shadow:none!important}
.app-header .header-logo img{display:block!important;width:100%!important;height:auto!important;max-height:31px!important;object-fit:contain!important}
.app-header .brand-context{display:block!important;max-width:190px!important;overflow:hidden!important;color:#88a39f!important;font-size:7px!important;font-weight:650!important;line-height:1!important;letter-spacing:.11em!important;text-align:center!important;text-overflow:ellipsis!important;text-transform:uppercase!important;white-space:nowrap!important}.app-header .brand-context b{display:none}
.app-header .header-actions{grid-column:3!important;justify-self:end!important;display:flex!important;align-items:center!important;gap:8px!important;min-width:0}
.app-header .user-chip{height:var(--app-control-size)!important;min-height:var(--app-control-size)!important;min-width:170px!important;max-width:230px!important;margin:0!important;border-radius:var(--radius-sm)!important;box-shadow:none!important}
.app-header :is(.preference-button,.notification-button) svg{width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.7!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.app-header :is(.menu-trigger,.preference-button,.notification-button),.app-header .user-chip{color:#eef5f3!important;border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.055)!important}.app-header .menu-trigger i{background:#eef5f3!important}.app-header .user-chip small,.app-header .user-chip em{color:#8fa6a2!important}
.app-header :is(.preference-button,.notification-button) svg{display:block!important;visibility:visible!important;opacity:1!important;color:#eef5f3!important}
.app-header .notification-button b{position:absolute!important;top:-5px!important;right:-5px!important;display:grid!important;place-items:center!important;min-width:18px!important;height:18px!important;padding:0 4px!important;border:2px solid #08151b!important;border-radius:9px!important;background:#ef476f!important;color:#fff!important;font-size:9px!important;line-height:1!important}

/* Shared drawer colors: the same semantic tokens in light and dark themes. */
.command-drawer{color:var(--color-text)!important}
.command-drawer .drawer-top h2,.command-drawer nav>a,.command-drawer nav>a span{color:var(--color-text)!important}
.command-drawer .drawer-top p,.command-drawer nav>a em,.command-drawer nav>small{color:var(--color-text-muted)!important}
.command-drawer .drawer-top button{color:var(--color-text)!important;background:var(--color-surface-2)!important;border-color:var(--color-border)!important}
.command-drawer nav>a>b{color:var(--color-text)!important;border-color:var(--color-border)!important;background:var(--color-surface-2)!important}
.command-drawer nav>a:hover,.command-drawer nav>a[aria-current="page"]{color:var(--color-text)!important;background:var(--color-surface-3)!important}
.command-drawer .drawer-logout{color:#d84b5b!important;background:var(--color-surface-2)!important;border-color:var(--color-border)!important}
.drawer-preferences{display:none}.drawer-preferences>small{display:block;margin-bottom:8px;color:var(--color-text-muted);font-size:8px;letter-spacing:.16em}.drawer-preferences>div{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}.drawer-preferences button{min-height:44px;padding:0 8px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-2);color:var(--color-text);font-size:10px}.drawer-preferences button.selected{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 13%,var(--color-surface-2));color:var(--color-text)}

/* PageHeader + WorkspaceTabs */
.page-header{display:grid!important;grid-template-rows:auto auto!important;gap:18px!important;min-height:0!important;margin:18px 0 12px!important;padding:22px 28px 0!important;border:0!important;border-bottom:1px solid var(--color-border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--color-text)!important}
.page-header:before,.page-header:after{content:none!important}
.page-header .page-heading-row{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important}
.page-header .eyebrow{margin:0 0 7px!important;color:var(--color-accent)!important;font-size:11px!important;font-weight:750!important;letter-spacing:.14em!important}
.page-header h1{margin:0!important;color:var(--color-text)!important;font-size:clamp(32px,2.3vw,38px)!important;line-height:1.08!important;letter-spacing:-.035em!important}
.page-header p{margin:7px 0 0!important;color:var(--color-text-muted)!important;font-size:14px!important;line-height:1.45!important}
.workspace-switch{display:flex!important;align-items:stretch!important;gap:clamp(24px,3vw,42px)!important;width:100%!important;height:56px!important;min-height:56px!important;margin:0!important;padding:0!important;overflow-x:auto!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;scrollbar-width:none!important}
.workspace-switch::-webkit-scrollbar,.clean-tabs::-webkit-scrollbar{display:none}
.workspace-switch a{position:relative!important;display:flex!important;flex:0 0 auto!important;align-items:center!important;height:56px!important;padding:0!important;color:var(--color-text-muted)!important;font-size:12px!important;font-weight:680!important;letter-spacing:.035em!important;text-transform:uppercase!important;white-space:nowrap!important;background:transparent!important;box-shadow:none!important}
.workspace-switch a:after{content:"";position:absolute;inset:auto 0 0;height:2px;background:var(--color-accent);transform:scaleX(0);transition:transform .18s ease}
.workspace-switch a:hover,.workspace-switch a.active{color:var(--color-text)!important}.workspace-switch a.active:after{transform:scaleX(1)}

/* StateTabs */
.records-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;height:56px!important;min-height:56px!important;margin:0 0 8px!important;padding:0 8px 0 4px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:color-mix(in srgb,var(--color-surface-1) 90%,transparent)!important;box-shadow:none!important}
.records-toolbar .clean-tabs{display:flex!important;align-items:stretch!important;height:54px!important;min-width:0!important;overflow-x:auto!important;scrollbar-width:none!important}
.records-toolbar .clean-tabs a{display:flex!important;align-items:center!important;height:54px!important;padding:0 16px!important;color:var(--color-text-muted)!important;font-size:12px!important;font-weight:670!important;white-space:nowrap!important}
.records-toolbar .clean-tabs a.active{color:var(--color-text)!important;background:transparent!important;box-shadow:inset 0 -2px var(--color-accent)!important}
.filter-trigger{position:relative!important;display:inline-grid!important;grid-auto-flow:column!important;place-items:center!important;gap:7px!important;color:var(--color-text)!important}
.filter-trigger:before,.filter-trigger:after{content:none!important;display:none!important}
.filter-trigger .filter-icon{display:block!important;visibility:visible!important;opacity:1!important;width:19px!important;height:19px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}

/* SummaryStrip */
.summary-strip,.metric-grid.operational-metrics{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;min-height:96px!important;margin:14px 0 18px!important;overflow:hidden!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:color-mix(in srgb,var(--color-surface-1) 88%,transparent)!important;box-shadow:none!important}
.operational-metrics .metric-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto auto!important;align-content:center!important;gap:5px 12px!important;min-height:96px!important;padding:14px clamp(14px,1.35vw,20px)!important;border:0!important;border-right:1px solid var(--color-border)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transform:none!important}
.operational-metrics .metric-card:last-child{border-right:0!important}.operational-metrics .metric-card>i{display:none!important}
.operational-metrics .metric-card small{grid-column:1;grid-row:1;color:var(--color-text-muted)!important;font-size:9px!important;font-weight:720!important;letter-spacing:.09em!important;text-transform:uppercase}
.operational-metrics .metric-card strong{grid-column:2;grid-row:1/3;align-self:center;color:var(--color-text)!important;font-size:clamp(27px,2vw,32px)!important;font-variant-numeric:tabular-nums}
.operational-metrics .metric-card span{grid-column:1;grid-row:2;color:var(--color-text-muted)!important;font-size:10px!important}

/* SectionHeader + DataTable */
.operational-records{margin:0!important;padding:16px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:var(--color-surface-1)!important;box-shadow:none!important}
.operational-records .section-title{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0 0 12px!important}
.operational-records .section-title h2{margin:0!important;color:var(--color-text)!important;font-size:18px!important;line-height:1.25!important}.operational-records .section-title p{margin:3px 0 0!important;color:var(--color-text-muted)!important;font-size:10px!important}
.app-data-table{overflow:visible!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:transparent!important}
@media(min-width:1101px){.app-data-table .data-head{min-height:38px!important;height:38px!important;padding:0 12px!important;background:var(--color-surface-2)!important;font-size:9px!important}.app-data-table .data-row:not(.data-head){min-height:68px!important;padding:8px 12px!important;border-bottom:1px solid var(--color-border-soft)!important}.app-data-table .data-row:not(.data-head):last-child{border-bottom:0!important}.app-data-table .doc-preview{width:48px!important;height:48px!important}}

/* Dashboard brand experience, adapted from the public Fasad Stroy visual language. */
.operational-hero{isolation:isolate}
.operational-hero:before{content:"FASAD\A STROY";white-space:pre;position:absolute!important;z-index:-1;left:49%;top:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.035);font:700 clamp(76px,10vw,150px)/.72 var(--font-display);letter-spacing:-.075em;text-align:center;pointer-events:none}
.capability-rail{display:flex;align-items:center;justify-content:flex-start;gap:22px;min-height:52px;margin:10px 0 0;padding:0;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface-1);scrollbar-width:none}
.capability-rail::-webkit-scrollbar{display:none}.capability-rail span{flex:0 0 auto;display:flex;align-items:center;gap:10px;color:var(--color-text-muted);font-size:9px;font-weight:720;letter-spacing:.12em;white-space:nowrap}.capability-rail span:before{content:"";width:5px;height:5px;border:1px solid var(--color-accent);transform:rotate(45deg)}
.capability-track{display:flex;width:max-content;animation:capability-marquee 44s linear infinite;will-change:transform;transform:translate3d(0,0,0)}.capability-group,.capability-clone{display:flex;align-items:center;gap:clamp(30px,5vw,86px);padding-right:clamp(30px,5vw,86px)}
.platform-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.85fr);gap:clamp(38px,6vw,92px);align-items:center;min-height:360px;margin-top:18px;padding:clamp(34px,4.5vw,68px);overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-md);background:linear-gradient(115deg,rgba(5,14,18,.98),rgba(6,18,22,.9) 52%,rgba(8,27,29,.78)),url('/static/brand/fasad-hero-v1.png') center 63%/cover;color:#f4f8f7;box-shadow:0 24px 60px rgba(5,18,24,.14)}
.platform-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,#000,transparent 75%);pointer-events:none}
.platform-stage>*{position:relative;z-index:1}.platform-stage-copy>span{display:block;margin-bottom:18px;color:#7bdcc3;font-size:9px;font-weight:740;letter-spacing:.18em}.platform-stage h2{margin:0;color:#f5f8f7;font:500 clamp(34px,3.3vw,50px)/1.03 var(--font-display);letter-spacing:-.045em}.platform-stage h2 em{color:#75d8bf;font-style:normal}.platform-stage-copy>p{max-width:600px;margin:18px 0 24px;color:#b8c8c5;font-size:13px;line-height:1.65}.platform-stage-copy>a{display:inline-flex;align-items:center;gap:24px;min-height:42px;padding:0 15px;border:1px solid rgba(117,216,191,.42);border-radius:var(--radius-sm);background:rgba(16,119,105,.25);color:#f4f8f7;font-size:11px;font-weight:700}.platform-stage-copy>a:hover{background:rgba(16,119,105,.42)}
.platform-modules{border-top:1px solid rgba(255,255,255,.15)}.platform-modules article{display:grid;grid-template-columns:34px minmax(0,1fr);gap:16px;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.15)}.platform-modules article>small{color:#70d8bd;font-size:9px;letter-spacing:.1em}.platform-modules strong{display:block;color:#f3f7f6;font-size:13px}.platform-modules p{margin:5px 0 0;color:#92a6a2;font-size:10px;line-height:1.5}

/* Premium dark surfaces keep intentional contrast in both global themes. */
.activity-panel,.operational-hero,.platform-stage{color:#f3f7f6!important}
.activity-panel :is(h2,h3,strong),.operational-hero :is(h1,h2,h3,strong){color:#f3f7f6!important}
.activity-panel :is(p,small,.activity-meta),.operational-hero :is(p,small){color:#9eb0ad!important}
.project-card{color:#f4f8f7!important;background:linear-gradient(125deg,#071820,#0c3034 62%,#0b5d53)!important;border-color:rgba(91,219,190,.22)!important}
.project-card :is(h2,h3,strong){color:#f4f8f7!important}.project-card :is(p,small){color:#a8bfbb!important}

@media(max-width:820px){.app-header{gap:10px!important;padding-inline:16px!important}.app-header .header-mark,.app-header .system-name{display:none!important}.app-header .user-chip{width:40px!important;min-width:40px!important;max-width:40px!important}.app-header .user-chip>span,.app-header .user-chip>em{display:none!important}.app-header .header-logo{width:144px!important;max-width:144px!important}}
@media(max-width:700px){:root{--app-header-height:62px;--app-control-size:36px}.page-container{width:calc(100% - 20px);padding-bottom:28px}.page-header{gap:15px!important;margin:10px 0!important;padding:18px 16px 0!important}.page-header h1{font-size:clamp(27px,8vw,32px)!important}.page-header p{font-size:13px!important}.workspace-switch{height:54px!important;min-height:54px!important;gap:26px!important}.workspace-switch a{height:54px!important;font-size:11px!important}.records-toolbar{height:52px!important;min-height:52px!important}.records-toolbar .clean-tabs,.records-toolbar .clean-tabs a{height:50px!important}.records-toolbar .clean-tabs a{padding-inline:12px!important;font-size:11px!important}.summary-strip,.metric-grid.operational-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.operational-metrics .metric-card{min-height:88px!important;padding:13px 14px!important;border-bottom:1px solid var(--color-border)!important}.operational-metrics .metric-card:nth-child(even){border-right:0!important}.operational-metrics .metric-card:nth-child(5){grid-column:1/-1!important;min-height:78px!important;border:0!important}.operational-records{padding:12px!important}}
@media(max-width:900px){.platform-stage{grid-template-columns:1fr;gap:30px}.platform-modules{max-width:none}}
@media(max-width:700px){.capability-rail{justify-content:flex-start;min-height:46px;margin-top:8px;padding-inline:0;overflow:hidden}.capability-track{animation-duration:38s}.capability-group{gap:30px;padding-right:30px}.capability-rail span{font-size:8px}.platform-stage{min-height:0;margin-top:14px;padding:28px 22px;border-radius:var(--radius-sm)}.platform-stage-copy>span{margin-bottom:13px;font-size:8px}.platform-stage h2{font-size:31px}.platform-stage-copy>p{margin:14px 0 19px;font-size:11px}.platform-modules article{padding:15px 0}.operational-hero:before{font-size:72px}}
@keyframes capability-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-33.333333%,0,0)}}
@media(max-width:430px){.app-header{grid-template-columns:36px minmax(82px,1fr) auto!important;padding-inline:8px!important;gap:6px!important}.app-header .header-logo{width:min(108px,29vw)!important}.app-header .header-actions{gap:4px!important}.app-header .user-chip{width:36px!important;min-width:36px!important;max-width:36px!important}.page-container{width:calc(100% - 16px)}}

/* Mobile foundation v1.3 — canonical rules loaded after all legacy mobile CSS. */
@media(max-width:700px){
  :root{--app-header-height:64px;--app-control-size:44px;--mobile-edge:10px;--mobile-gap:12px}
  html,body{width:100%;max-width:100%}
  body{padding-top:var(--app-header-height)!important}
  body *,body *:before,body *:after{box-sizing:border-box}
  .page-container,main.page-container{width:calc(100% - (var(--mobile-edge) * 2))!important;max-width:none!important;margin-inline:var(--mobile-edge)!important;padding:10px 0 32px!important;min-width:0!important}
  .page-container>*{min-width:0;max-width:100%}

  /* Compact, touch-safe header. */
  body .app-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;height:64px!important;min-height:64px!important;padding:0 8px!important;gap:5px!important}
  .app-header .header-left{grid-column:1!important;display:block!important;width:44px!important;min-width:44px!important}
  .app-header .header-logo{grid-column:2!important;width:min(118px,31vw)!important;max-width:118px!important;justify-self:center!important;gap:2px!important}
  .app-header .header-logo img{max-height:25px!important}.app-header .brand-context{max-width:118px!important;font-size:6px!important;letter-spacing:.07em!important}.app-header .brand-context span{display:none}.app-header .brand-context b{display:block}
  .app-header .header-actions{grid-column:3!important;gap:4px!important;width:auto!important;min-width:0!important}
  body .app-header .header-actions .preference-control{display:none!important}
  .app-header :is(.menu-trigger,.preference-button,.notification-button),.app-header .user-chip{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;max-width:44px!important;flex:0 0 44px!important;border-radius:var(--radius-sm)!important}
  .app-header .user-chip{display:grid!important;grid-template-columns:34px!important;padding:4px!important;place-items:center!important}
  .app-header .user-chip>b{width:34px!important;height:34px!important;border-radius:5px!important}
  .app-header .user-chip>span,.app-header .user-chip>em{display:none!important}
  .app-header :is(.preference-button,.notification-button) svg{width:19px!important;height:19px!important}
  .drawer-preferences{display:block;margin:14px 0;padding-top:14px;border-top:1px solid var(--color-border)}

  /* Shared mobile spacing and text wrapping. */
  :is(.page-header,.records-toolbar,.operational-records,.records-section,.activity-panel,.today-arrivals,.viewer-date-bar,.operator-overview,.summary-strip,.platform-stage,.capability-rail){max-width:100%!important;margin-left:0!important;margin-right:0!important}
  :is(h1,h2,h3,.section-title,.activity-primary,.page-heading-copy){min-width:0;overflow-wrap:anywhere;word-break:normal}
  .page-header{padding:16px 14px 0!important;margin:0 0 10px!important;gap:12px!important}
  .page-header .page-heading-row{align-items:flex-start!important;gap:10px!important}
  .page-header h1{font-size:clamp(25px,7.5vw,30px)!important;line-height:1.08!important}
  .page-header p{max-width:100%!important;font-size:12px!important;line-height:1.45!important}
  .page-header .primary-action{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;overflow:hidden!important}
  .workspace-switch{height:50px!important;min-height:50px!important;gap:24px!important}
  .workspace-switch a{height:50px!important;min-height:50px!important;font-size:10px!important}

  /* State toolbar and filter control. */
  .records-toolbar{grid-template-columns:minmax(0,1fr) 44px!important;height:54px!important;min-height:54px!important;padding:0 5px 0 2px!important}
  .records-toolbar .clean-tabs{height:52px!important;min-width:0!important}
  .records-toolbar .clean-tabs a{height:52px!important;min-height:52px!important;flex:0 0 auto!important;padding:0 12px!important;font-size:10px!important}
  body .records-toolbar .filter-trigger,body .viewer-filter-trigger{display:grid!important;place-items:center!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;margin:0!important}
  .records-toolbar .filter-trigger span,.viewer-filter-trigger span{display:none!important}
  .filter-trigger svg{width:19px!important;height:19px!important}
  .filter-overlay{display:none!important;position:fixed!important;inset:0!important;z-index:3190!important;background:rgb(4 15 20 / 68%)!important;backdrop-filter:blur(5px)!important;-webkit-backdrop-filter:blur(5px)!important;touch-action:none!important}
  .filter-overlay.open{display:block!important}
  .filter-drawer.open{position:fixed!important;z-index:3200!important;inset:auto 8px max(8px,env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;max-height:min(88dvh,720px)!important;margin:0!important;padding:16px!important;padding-bottom:max(16px,env(safe-area-inset-bottom))!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important;border-radius:20px 20px 14px 14px!important;transform:none!important;animation:mobileFilterSheetIn .22s cubic-bezier(.22,1,.36,1)!important;box-shadow:0 28px 90px rgb(2 12 17 / 48%)!important}
  .filter-drawer.open:before{content:"";display:block!important;width:42px;height:4px;margin:0 auto 8px;border-radius:999px;background:var(--color-border)!important}
  .filter-drawer .filter-title{position:sticky!important;top:-16px!important;z-index:2!important;margin:0 0 12px!important;padding:8px 0 12px!important;background:var(--color-surface-2)!important;border-bottom:1px solid var(--color-border)!important}
  .filter-drawer .filter-title button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .filter-grid{grid-template-columns:1fr!important;gap:11px!important}
  .filter-grid label{min-width:0!important}.filter-grid input,.filter-grid select{width:100%!important;min-width:0!important;min-height:44px!important}
  .filter-actions{position:sticky!important;bottom:-16px!important;gap:8px!important;padding:12px 0 2px!important;background:var(--color-surface-2)!important}.filter-actions a,.filter-actions button{min-height:44px!important}
  body.filter-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
  body.filter-open .filter-drawer{touch-action:pan-y!important}

  /* Date picker becomes an intentional two-row tool, not a squeezed desktop bar. */
  .viewer-date-bar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px!important;padding:12px!important}
  .viewer-date-bar label{grid-column:1/-1!important;min-width:0!important}.viewer-date-bar input{width:100%!important;min-width:0!important;min-height:44px!important}
  .viewer-date-bar>button:not(.filter-trigger),.viewer-date-bar>a{min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 12px!important}
  .viewer-date-bar .viewer-filter-trigger{grid-column:2!important;grid-row:2!important}

  /* Compact KPI and operator summaries. */
  .metric-grid.operational-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:10px 0 14px!important}
  .operational-metrics .metric-card{min-width:0!important;min-height:82px!important;padding:12px!important;gap:4px 8px!important}
  .operational-metrics .metric-card strong{font-size:25px!important}.operational-metrics .metric-card small{font-size:7.5px!important;line-height:1.25!important}.operational-metrics .metric-card span{font-size:9px!important;line-height:1.3!important}
  .operational-metrics .metric-card:nth-child(5){min-height:72px!important}
  .operator-overview{grid-template-columns:1fr!important;margin:10px 0 12px!important;border-radius:var(--radius-sm)!important}
  .operator-overview-title{padding:12px 14px!important}.operator-summary-strip{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .summary-stat{min-width:0!important;min-height:72px!important;padding:10px 8px!important}.summary-stat strong{font-size:23px!important}.summary-stat span{font-size:8px!important;line-height:1.25!important;overflow-wrap:anywhere}

  /* DataTable becomes one consistent mobile record card. */
  .operational-records,.records-section{padding:12px!important;border-radius:var(--radius-sm)!important}
  .operational-records .section-title,.records-section .section-title{align-items:flex-start!important;gap:10px!important;margin-bottom:10px!important}
  .operational-records .section-title h2,.records-section .section-title h2{font-size:17px!important;line-height:1.2!important}
  .app-data-table,.data-table{width:100%!important;min-width:0!important;border:0!important;background:transparent!important}
  .data-head{display:none!important}
  .app-data-table .data-row:not(.data-head),.data-row:not(.data-head){display:grid!important;grid-template-columns:58px minmax(0,1fr) 44px!important;grid-template-rows:auto!important;gap:7px 10px!important;width:100%!important;min-width:0!important;min-height:0!important;margin:0 0 10px!important;padding:12px!important;overflow:visible!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:var(--color-surface-2)!important;box-shadow:none!important}
  .data-row:not(.data-head)>span{grid-column:2!important;grid-row:auto!important;min-width:0!important;max-width:100%!important;padding:1px 0!important;color:var(--color-text)!important;font-size:10px!important;line-height:1.35!important;overflow-wrap:anywhere!important}
  .data-row:not(.data-head)>span:before{display:block!important;margin:0 0 2px!important;color:var(--color-text-muted)!important;font-size:7px!important;line-height:1.2!important;letter-spacing:.08em!important}
  .data-row:not(.data-head)>.cell-visual{grid-column:1!important;grid-row:1/8!important;align-self:start!important}.data-row:not(.data-head)>.cell-visual:before,.data-row:not(.data-head)>.row-actions:before{display:none!important}
  .data-row:not(.data-head)>.row-actions{grid-column:3!important;grid-row:1/8!important;display:flex!important;justify-content:flex-end!important;align-items:flex-start!important}
  .doc-preview{width:56px!important;height:62px!important;min-width:56px!important;max-width:56px!important;border-radius:var(--radius-sm)!important;overflow:hidden!important}.doc-preview img{width:100%!important;height:100%!important;object-fit:cover!important}
  body .operational-records .kebab,body .records-section .kebab{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .state{max-width:100%!important;min-height:30px!important;padding:6px 8px!important;font-size:8px!important;line-height:1.25!important;white-space:normal!important;text-align:left!important}
  .action-menu{position:fixed!important;z-index:3300!important;left:8px!important;right:8px!important;top:auto!important;bottom:max(8px,env(safe-area-inset-bottom))!important;width:auto!important;max-width:none!important;max-height:min(72dvh,560px)!important;margin:0!important;padding:8px!important;overflow:auto!important;transform:none!important;border-radius:var(--radius-md)!important}.action-menu a,.action-menu button{min-height:44px!important}

  /* Dashboard cards and lists. */
  .activity-panel{padding:12px!important;border-radius:var(--radius-sm)!important}.activity-head{align-items:flex-start!important;gap:8px!important}.activity-head>div{min-width:0!important}.activity-head h2{font-size:17px!important;line-height:1.2!important}.activity-head>a{flex:0 0 88px!important;max-width:88px!important;font-size:9px!important;line-height:1.3!important}
  .activity-list{display:grid!important;gap:8px!important}.activity-item{display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;gap:5px 10px!important;min-width:0!important;min-height:0!important;padding:12px!important;border:1px solid var(--color-border)!important;border-radius:var(--radius-sm)!important;background:var(--color-surface-2)!important}.activity-primary{min-width:0!important}.activity-primary strong,.activity-primary small{white-space:normal!important;overflow-wrap:anywhere!important}.activity-meta,.activity-arrow{display:none!important}.activity-item>div:nth-of-type(5){grid-column:2!important}
  .capability-rail{width:100%!important}.platform-stage{width:100%!important;padding:26px 20px!important}.platform-modules article{grid-template-columns:28px minmax(0,1fr)!important;gap:12px!important}

  /* Image viewer uses the safe viewport, with a standard close target. */
  .photo-modal{inset:0!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;padding:max(62px,calc(env(safe-area-inset-top) + 54px)) 10px max(12px,env(safe-area-inset-bottom))!important}
  .photo-modal .modal-body{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;min-width:0!important;overflow:hidden!important}.photo-modal .modal-body img{max-width:100%!important;max-height:calc(100dvh - 104px - env(safe-area-inset-bottom))!important;object-fit:contain!important}
  .photo-modal .modal-close{top:max(8px,env(safe-area-inset-top))!important;right:8px!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border-radius:var(--radius-sm)!important}.photo-modal .modal-close span{display:none!important}.photo-modal .modal-close b{font-size:21px!important;line-height:1!important}
}

@keyframes mobileFilterSheetIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.filter-drawer.open{animation:none!important}}

/* Final header authority: legacy light-theme bundles must not wash out controls. */
html[data-theme] body .command-header.app-header{background:rgba(8,21,27,.98)!important;border-bottom-color:rgba(255,255,255,.12)!important;color:#eef5f3!important}
html[data-theme] body .command-header.app-header :is(.menu-trigger,.preference-button,.notification-button,.user-chip){color:#eef5f3!important;border-color:rgba(255,255,255,.18)!important;background:rgba(255,255,255,.055)!important}
html[data-theme] body .command-header.app-header :is(.preference-button,.notification-button) svg{color:#eef5f3!important;stroke:#eef5f3!important}
html[data-theme] body .command-header.app-header .menu-trigger i{background:#eef5f3!important}

@media(max-width:430px){
  .app-header .header-logo{width:min(110px,29vw)!important}.app-header .header-actions{gap:3px!important}body .app-header .header-actions .preference-control{display:none!important}
}
@media(max-width:390px){
  :root{--mobile-edge:8px}body .app-header{padding-inline:6px!important;gap:4px!important}.app-header .header-logo{width:104px!important;max-width:104px!important}.app-header .header-actions{gap:3px!important}
  .page-header{padding-inline:12px!important}.data-row:not(.data-head){grid-template-columns:54px minmax(0,1fr) 44px!important;gap:7px 8px!important;padding:10px!important}.doc-preview{width:52px!important;height:58px!important;min-width:52px!important;max-width:52px!important}
}
@media(max-width:340px){
  .app-header .preference-control:has(#theme-menu-button),.app-header #theme-menu-button{display:none!important}.app-header .header-logo{width:94px!important;max-width:94px!important}
  .records-toolbar .clean-tabs a{padding-inline:9px!important;font-size:9px!important}.data-row:not(.data-head){grid-template-columns:50px minmax(0,1fr) 44px!important;gap:6px!important;padding:9px!important}.doc-preview{width:48px!important;height:54px!important;min-width:48px!important;max-width:48px!important}
  .summary-stat{padding-inline:6px!important}.platform-stage{padding-inline:17px!important}
}