/* v1.40.91 — whole-app role polish loaded last.
   Presentation only: permissions and workflow authority remain unchanged. */

:root{
  --role-surface:#0b151d;
  --role-surface-2:#0f1d27;
  --role-line:rgba(153,199,223,.14);
  --role-line-strong:rgba(153,205,232,.25);
  --role-muted:#7f97a4;
  --role-soft:#a8bdc8;
}

/* Shared desktop role identity */
.desktop-role-context{
  display:grid;
  gap:2px;
  margin:0 8px 14px;
  padding:10px 11px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(17,32,42,.78),rgba(10,21,29,.68));
}
.desktop-role-context strong{font-size:11px;letter-spacing:.025em;color:#d4e7ef}
.desktop-role-context small{font-size:9.5px;line-height:1.35;color:#77909d}
.role-readonly .desktop-role-context{
  border-color:rgba(133,186,211,.18);
  background:linear-gradient(180deg,rgba(23,42,53,.78),rgba(12,24,32,.72));
}
.role-readonly .desktop-role-context strong:before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  margin-right:7px;
  border-radius:999px;
  background:#86afc3;
  vertical-align:1px;
}

/* Shared shell rhythm */
.shell-v2 .heading h1,.field-heading h1{max-width:100%;overflow-wrap:anywhere}
.shell-v2 .heading p,.field-heading p{max-width:760px;line-height:1.45}
.shell-v2 .panel-head>div{min-width:0}
.shell-v2 .panel-head h2,.shell-v2 .panel-head strong{overflow-wrap:anywhere}
.shell-v2 button,.shell-v2 a,.field-shell button,.field-shell a{touch-action:manipulation}
.field-empty,.empty,.transport-table-empty{
  border-radius:11px;
  line-height:1.45;
}
.field-empty strong,.empty strong{display:block;margin-bottom:3px;color:#b9ccd5}
.field-empty p,.empty p{margin:0}

/* Read-only roles should look intentionally read-only, not disabled. */
.role-readonly .topbar .primary[data-new-operation],
.role-readonly .mobile-capture{display:none!important}
.role-readonly .sidebar .nav button{opacity:.96}
.role-readonly .sidebar .eyebrow{color:#698493}
.role-readonly .profile-card small{text-transform:capitalize}
.role-engineer .sidebar .nav button.active,
.role-shift-supervisor .sidebar .nav button.active{
  background:linear-gradient(90deg,rgba(100,158,185,.17),rgba(100,158,185,.04))!important;
}
.role-engineer .heading .primary,
.role-shift-supervisor .heading .primary{display:none!important}

/* Desktop Admin / Supervisor: reduce button competition and improve hierarchy. */
.role-admin .top-actions .primary,
.role-supervisor .top-actions .primary{
  min-height:38px;
  padding:8px 13px;
  box-shadow:none;
}
.role-admin .sidebar .nav button,
.role-supervisor .sidebar .nav button,
.role-controller .sidebar .nav button{
  min-height:41px;
}
.role-admin .sidebar .nav b,
.role-supervisor .sidebar .nav b{
  min-width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(117,174,202,.12);
  color:#bcd3de;
}

/* Transport Controller: transport is the focal operation. */
.role-controller .desktop-role-context{border-color:rgba(104,180,217,.18)}
.role-controller .sidebar .nav button[data-page="transport"]{
  color:#e3f0f5;
  background:rgba(74,145,180,.08);
}
.role-controller .transport-toolbar,
.role-controller .transport-command-strip{box-shadow:none!important}
.role-controller .transport-table td,
.role-controller .transport-table th{white-space:normal}
.role-controller .transport-load-cell strong,
.role-controller .transport-load-cell small{max-width:28ch}

/* Engineer: reports/stock should scan clearly without looking editable. */
.role-engineer .yard-intel-page,
.role-engineer .engineering-reports-page{max-width:1500px}
.role-engineer .intel-kpi,
.role-engineer .engineering-report-card{
  border-color:rgba(146,195,218,.13)!important;
}
.role-engineer .intel-filter .primary,
.role-engineer .engineering-report-card .primary{box-shadow:none}
.role-engineer .material-browser-actions .stock-confidence{
  border:1px solid rgba(140,185,207,.12);
  border-radius:999px;
  padding:4px 7px;
}

/* Field header and role note */
.field-role-note{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin:-3px 0 16px;
  padding:11px 12px;
  border:1px solid rgba(133,188,214,.15);
  border-radius:13px;
  background:rgba(75,128,153,.065);
}
.field-role-note-icon{
  display:grid;place-items:center;
  width:34px;height:34px;
  border-radius:10px;
  background:#132632;
  color:#9fc4d5;
}
.field-role-note-icon .icon{width:16px;height:16px}
.field-role-note>span:last-child{display:grid;gap:2px;min-width:0}
.field-role-note strong{font-size:12px;color:#c9dee8}
.field-role-note small{font-size:10.5px;line-height:1.4;color:#7f99a6}

/* Mobile navigation across roles */
@media(max-width:760px){
  .field-shell{--role-mobile-gap:14px}
  .field-main{padding-left:12px!important;padding-right:12px!important}
  .field-top{
    padding-left:12px!important;
    padding-right:10px!important;
    gap:8px;
  }
  .field-top>.brand{min-width:0}
  .field-top>.brand strong,.field-top>.brand small{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .field-site-switch{min-width:0;max-width:40vw}
  .field-site-switch select{max-width:100%;text-overflow:ellipsis}
  .field-nav{
    gap:4px!important;
    padding-left:7px!important;
    padding-right:7px!important;
    padding-bottom:max(7px,env(safe-area-inset-bottom))!important;
    backdrop-filter:blur(18px);
  }
  .field-nav button{
    min-width:0!important;
    padding-left:5px!important;
    padding-right:5px!important;
  }
  .field-nav button span{font-size:9.5px!important;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .field-nav .icon{width:20px!important;height:20px!important}
  .field-section>header{
    min-height:34px;
    align-items:center!important;
  }
  .field-section>header h2{font-size:13px!important;letter-spacing:.01em}
  .field-section>header>button{min-height:34px;padding:6px 9px!important;font-size:10.5px}
  .field-heading{padding-top:4px}
  .field-heading h1{font-size:27px!important;line-height:1.05}
  .field-heading p{font-size:11.5px!important}
  .field-card,.field-container-card,.field-onsite-card,.driver-home-job{
    border-color:rgba(148,195,218,.11)!important;
    box-shadow:none!important;
  }
  .field-card:active,.driver-home-job:active{transform:scale(.995)}
  .field-card-copy,.field-container-card-copy,.driver-home-job-copy{min-width:0}
  .field-card-copy strong,.field-container-card-copy strong,.driver-home-job-copy strong{
    overflow-wrap:anywhere;
  }
  .field-more-section button{min-height:49px}
  .field-more-section button span{min-width:0;overflow-wrap:anywhere}
}

/* Worker / Yardman — physical recording first, everything else secondary. */
@media(max-width:760px){
  .role-worker .field-worker-primary-actions{
    gap:9px!important;
    margin-bottom:10px!important;
  }
  .role-worker .field-worker-primary-actions>button{
    min-height:112px!important;
    padding:15px!important;
    border-radius:15px!important;
  }
  .role-worker .field-worker-primary-actions .field-worker-action-copy strong{
    font-size:21px!important;
    line-height:1!important;
  }
  .role-worker .field-worker-primary-actions .field-worker-action-copy em{
    margin-top:4px;
    font-size:10.5px!important;
    line-height:1.3;
  }
  .role-worker .field-worker-tools{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .role-worker .field-worker-tools>button{
    min-height:78px!important;
    padding:10px!important;
    border-radius:12px!important;
  }
  .role-worker .field-worker-tools>button>span{min-width:0}
  .role-worker .field-worker-tools strong{font-size:12.5px!important}
  .role-worker .field-worker-tools small{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:9.5px!important;
  }
  .role-worker .field-worker-arrival-row{
    min-height:64px;
    grid-template-columns:48px minmax(0,1fr) 20px!important;
  }
  .role-worker .field-worker-arrival-row em{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}

/* Driver — first job and next action dominate, tabs stay compact. */
@media(max-width:760px){
  .role-driver .field-hero.role-home{min-height:168px!important}
  .role-driver .driver-home-job{
    min-height:96px!important;
    padding:13px!important;
  }
  .role-driver .driver-home-job.featured,
  .role-driver .driver-home-job:first-child{
    border-color:rgba(121,197,232,.24)!important;
    background:linear-gradient(180deg,rgba(18,43,57,.94),rgba(9,25,34,.95))!important;
  }
  .role-driver .driver-home-job-top time{font-variant-numeric:tabular-nums}
  .role-driver .driver-home-route{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .role-driver .driver-workspace-tabs{
    gap:6px!important;
    position:sticky;
    top:calc(60px + env(safe-area-inset-top));
    z-index:4;
    padding:6px 0;
    background:#091118;
  }
  .role-driver .driver-workspace-tabs button{
    min-height:58px!important;
    padding:8px 5px!important;
  }
  .role-driver .driver-workspace-tabs strong{font-size:17px!important}
  .role-driver .driver-workspace-tabs span{font-size:9.5px!important}
  .role-driver .driver-action-block{
    position:sticky;
    bottom:0;
    z-index:4;
    border-color:rgba(118,193,228,.20)!important;
    box-shadow:0 -10px 28px rgba(5,12,18,.72)!important;
  }
}

/* Controller — exceptions before volume, creation button never dwarfs live work. */
@media(max-width:760px){
  .role-controller .field-hero.role-home{min-height:174px!important}
  .role-controller .field-quick-grid{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .role-controller .field-quick-grid button{
    min-height:50px!important;
    font-size:12px!important;
  }
  .role-controller .field-section .field-card{
    min-height:70px!important;
  }
  .role-controller .field-card-copy>small.field-kicker{
    color:#d2a66f!important;
  }
}

/* Engineer + Shift Supervisor — read-only visibility is calm and explicit. */
@media(max-width:760px){
  .role-engineer .field-hero.role-home,
  .role-shift_supervisor .field-hero.role-home{min-height:168px!important}
  .role-engineer .field-hero .field-kicker,
  .role-shift_supervisor .field-hero .field-kicker{color:#8eb5c8!important}
  .role-engineer .field-nav button[aria-current=page],
  .role-shift_supervisor .field-nav button[aria-current=page]{
    background:rgba(91,151,179,.16)!important;
  }
  .field-readonly-tools{display:grid;gap:8px;margin:0 0 20px}
  .field-readonly-tools>button{
    display:grid;
    grid-template-columns:28px minmax(0,1fr) 20px;
    gap:10px;
    align-items:center;
    min-height:68px;
    padding:11px 12px!important;
    border:1px solid rgba(145,194,217,.12)!important;
    border-radius:12px!important;
    background:#101d27!important;
    text-align:left;
  }
  .field-readonly-tools>button>.icon:first-child{width:20px;height:20px;color:#a8c6d5}
  .field-readonly-tools>button>span{display:grid;gap:2px;min-width:0}
  .field-readonly-tools strong{font-size:15px;line-height:1.15;color:#dbeaf0}
  .field-readonly-tools small{font-size:10.5px;line-height:1.35;color:#7f9baa}
  .field-readonly-tools>button>.icon:last-child{width:17px;height:17px;color:#9cb6c2}
  .field-readonly-tools.compact>button{min-height:64px}
  .role-readonly .field-card-cta{display:none!important}
  .role-readonly .field-onsite-card-actions button{min-height:42px}
  .role-shift_supervisor .field-onsite-report .primary{display:none!important}
}

/* Admin + Supervisor phone: action density without cramped buttons. */
@media(max-width:760px){
  .role-supervisor .field-admin-home-actions,
  .role-admin .field-admin-home-actions{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
  }
  .role-supervisor .field-home-actions button,
  .role-admin .field-home-actions button{
    min-height:72px!important;
    padding:9px 6px!important;
    font-size:10.5px!important;
    line-height:1.2;
  }
  .role-supervisor .field-home-actions .icon,
  .role-admin .field-home-actions .icon{width:20px!important;height:20px!important}
  .role-admin .field-astra-home{margin-top:4px!important}
  .role-admin .field-astra-primary{min-height:72px!important}
  .role-admin .field-admin-today-row{
    min-height:62px!important;
    grid-template-columns:34px minmax(0,1fr) 20px!important;
  }
}

/* Narrow phones — prevent labels from fighting for width. */
@media(max-width:390px){
  .role-worker .field-worker-tools{grid-template-columns:1fr!important}
  .role-admin .field-admin-home-actions,
  .role-supervisor .field-admin-home-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .field-nav button span{font-size:9px!important}
  .field-site-switch{max-width:36vw}
}

/* Desktop/tablet role polish. */
@media(min-width:761px){
  .shell-v2.role-engineer main,.shell-v2.role-shift-supervisor main{max-width:none}
  .shell-v2.role-controller .workspace main{padding-top:24px}
  .shell-v2.role-admin .sidebar-bottom,
  .shell-v2.role-supervisor .sidebar-bottom,
  .shell-v2.role-controller .sidebar-bottom{padding-top:12px}
  .shell-v2.role-worker .sidebar .notice,
  .shell-v2.role-driver .sidebar .notice{font-size:10px}
  .shell-v2.role-readonly .top-avatar{border-color:rgba(136,188,212,.16)}
}

/* Dialog consistency across every role. */
@media(max-width:760px){
  #dialog.field-dialog .modal-head{
    min-height:58px;
    align-items:center;
  }
  #dialog.field-dialog .modal-head>div{min-width:0}
  #dialog.field-dialog .modal-head h2{
    overflow-wrap:anywhere;
    font-size:19px!important;
  }
  #dialog.field-dialog .modal-body{scrollbar-gutter:stable}
  #dialog.field-dialog .field-two{gap:8px}
  #dialog.field-dialog .field-two>button,
  #dialog.field-dialog .field-two>a{min-height:46px}
}

/* v1.40.91 visual QA correction — read-only mobile action rows */
.field-readonly-tools{display:grid;gap:8px;margin:0 0 16px}
.field-readonly-tools>button{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 18px;
  gap:10px;
  align-items:center;
  width:100%;
  min-height:66px;
  padding:10px 12px;
  border:1px solid rgba(148,195,218,.12);
  border-radius:12px;
  background:#12212b;
  text-align:left;
}
.field-readonly-tools>button>.icon:first-child{
  width:18px;height:18px;
  justify-self:center;
  color:#b5d0dd;
}
.field-readonly-tools>button>.icon:last-child{
  width:16px;height:16px;
  justify-self:end;
  color:#8ca7b4;
}
.field-readonly-tools>button>span{
  display:grid;
  gap:2px;
  min-width:0;
}
.field-readonly-tools>button strong{
  display:block;
  font-size:14px;
  line-height:1.2;
  color:#f1f7fa;
  overflow-wrap:anywhere;
}
.field-readonly-tools>button small{
  display:block;
  font-size:10.5px;
  line-height:1.35;
  color:#7f9ba9;
  overflow-wrap:anywhere;
}
@media(max-width:390px){
  .field-readonly-tools>button{grid-template-columns:30px minmax(0,1fr) 16px;padding:9px 10px}
  .field-readonly-tools>button strong{font-size:13.5px}
  .field-readonly-tools>button small{font-size:10px}
}

/* Keep shell controls usable between the phone and wide-desktop layouts.
   Do not compress action text into vertical stacks when the sidebar is present. */
@media (min-width:801px){
 .shell-v2 .topbar{height:auto;min-height:72px!important;flex-wrap:wrap;row-gap:8px}
 .shell-v2 .topbar .breadcrumbs{flex:1 1 160px;min-width:0}
 .shell-v2 .topbar .site-switch{min-width:0;flex:0 1 140px;max-width:210px}
 .shell-v2 .topbar .site-switch select{width:100%;max-width:100%;min-height:44px;text-overflow:ellipsis}
 .shell-v2 .topbar .breadcrumbs strong{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .shell-v2 .topbar .search-launch{flex:0 0 220px;white-space:nowrap}
 .shell-v2 .topbar .top-actions{flex:0 0 auto;margin-left:auto;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
 .shell-v2 .topbar .top-actions>button{flex-shrink:0;white-space:nowrap;min-height:44px!important}
 .shell-v2 .topbar .top-avatar{min-width:44px}
}
@media (min-width:801px) and (max-width:1200px){
 .shell-v2 .topbar .search-launch{display:none}
}
@media (min-width:641px) and (max-width:800px){
 .shell-v2 .topbar .top-actions>button{min-height:44px;min-width:44px}
}
@media (min-width:900px){
 /* Match the desktop rail width declared by design-system.css. */
 .shell-v2 .workspace{margin-left:236px}
}
@media (min-width:801px){
 /* Map fills the remaining viewport even when the header wraps or text is enlarged. */
 .shell-v2 .workspace:has(>main>.yard-map-app){height:100dvh;display:flex;flex-direction:column}
 .shell-v2 .workspace:has(>main>.yard-map-app)>.topbar{flex-shrink:0}
 .shell-v2 .workspace:has(>main>.yard-map-app)>main{flex:1;min-height:0;height:auto;width:100%}
 .shell-v2 .workspace main>.yard-map-app{min-height:0}
}