/* Service CRM v4.7.0 — Modern Live UI
   Global visual/adaptive layer. It intentionally sits AFTER app.css and
   feature CSS so the entire CRM can share one interaction language. */

:root{
  --sc-bg:#f4f7fb;
  --sc-surface:#ffffff;
  --sc-surface-soft:#f8fbff;
  --sc-line:#dfe7f2;
  --sc-line-strong:#cfdbea;
  --sc-ink:#102039;
  --sc-muted:#6c7d95;
  --sc-blue:#2563eb;
  --sc-blue-dark:#174fd1;
  --sc-green:#0f9f60;
  --sc-amber:#d68910;
  --sc-red:#c73535;
  --sc-radius:16px;
  --sc-radius-sm:11px;
  --sc-shadow:0 10px 30px rgba(15,23,42,.045);
  --sc-shadow-raised:0 18px 48px rgba(15,23,42,.075);
  --sc-topbar-height:68px;
}

/* ------------------------------------------------------------------ */
/* Workspace geometry: use the available canvas instead of narrow docs */
/* ------------------------------------------------------------------ */
html,body{min-height:100%;background:var(--sc-bg)}
body{overflow-x:hidden}
.shell{min-width:0}
.content{
  width:100%;
  max-width:none!important;
  margin:0!important;
  padding:18px clamp(14px,1.6vw,28px) 34px!important;
}
.content>*{
  min-width:0;
}

/* Root wrappers that historically left large blank side gutters. */
.content :is(
  .crew-page,
  .myshift,
  .do-wrap,
  .de-page,
  .team-page,
  .oi,
  .cc-wrap,
  .telematics-page,
  .rep,
  .sc-runtime-form-page
){
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Keep very large screens readable, but fill them with grids instead of
   creating dead side whitespace. */
.content :is(
  .panel,
  .card,
  .runtime-dashboard-hero,
  .designer-page-hero,
  .connections-hero,
  .sc-form-hero,
  .crew-hero,
  .ms-hero,
  .do-hero,
  .de-hero,
  .team-hero,
  .oi-hero,
  .cc-hero,
  .dm-hero,
  .dlw-hero
){
  box-shadow:var(--sc-shadow);
}

/* ----------------------------------- */
/* Navigation + top bar                */
/* ----------------------------------- */
.sidebar{
  width:244px!important;
  padding:14px!important;
  border-color:var(--sc-line)!important;
  box-shadow:6px 0 22px rgba(15,23,42,.025);
}
.shell{margin-left:244px!important}
.sidebar .workspace-card{
  margin:14px 0 11px!important;
  padding:12px!important;
}
.sidebar-nav{
  gap:4px!important;
}
.sidebar-nav .nav-group{
  margin-bottom:5px;
}
.sidebar .nav-group-title{
  margin:8px 9px 4px!important;
  color:#8190a5!important;
  font-size:9px!important;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.sidebar-nav a{
  position:relative;
  min-height:40px;
  display:flex!important;
  align-items:center;
  gap:9px;
  padding:9px 10px!important;
  border-radius:10px!important;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.sidebar-nav a:hover{
  background:#f5f8fc;
  transform:translateX(1px);
}
.sidebar-nav a.active{
  background:#eaf2ff!important;
  color:#174fd1!important;
}
.sidebar-nav a>span[aria-hidden="true"]{
  flex:0 0 21px;
  width:21px;
  display:grid;
  place-items:center;
}
.nav-item-label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-live-badge{
  margin-left:auto;
  min-width:20px;
  height:20px;
  padding:0 6px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:9px;
  font-weight:900;
  box-shadow:0 4px 12px rgba(37,99,235,.22);
}
.nav-live-badge[hidden]{display:none!important}

.topbar{
  min-height:var(--sc-topbar-height)!important;
  height:auto!important;
  padding:8px clamp(14px,1.5vw,24px)!important;
  gap:12px;
  backdrop-filter:saturate(1.2) blur(14px);
  background:rgba(255,255,255,.94)!important;
}
.topbar-title{
  min-width:160px;
}
.topbar-title b{
  display:block;
  font-size:14px;
  letter-spacing:-.01em;
}
.topbar-title small{
  margin-top:2px!important;
  font-size:10px;
}
.workspace-command-search{
  flex:1;
  max-width:520px;
  min-width:180px;
}
.command-search-trigger{
  min-height:40px!important;
  border-radius:11px!important;
  background:#f8fbff!important;
}
.topbar-actions{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
}
.topbar-live-cluster{
  display:flex;
  align-items:center;
  gap:5px;
}
.topbar-live-state{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:0 8px;
  border:1px solid #cfead9;
  border-radius:999px;
  background:#f2fbf5;
  color:#187a4b;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}
.topbar-live-state i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#16a765;
  box-shadow:0 0 0 4px rgba(22,167,101,.10);
}
.topbar-live-state.offline{
  border-color:#f0c7c7;
  background:#fff4f4;
  color:#a83232;
}
.topbar-live-state.offline i{
  background:#d94747;
  box-shadow:none;
}
.topbar-live-state.syncing{
  border-color:#d8e4f7;
  background:#f4f8ff;
  color:#3e67a9;
}
.topbar-live-state.syncing i{
  background:#5d8de3;
  animation:scPulse 1s infinite ease-in-out;
}
.topbar-notification-btn{
  position:relative;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--sc-line);
  border-radius:11px;
  background:#fff;
  color:#52657d;
}
.topbar-notification-btn>b{
  position:absolute;
  top:-5px;
  right:-5px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
  border-radius:999px;
  background:#2563eb;
  color:#fff;
  font-size:8px;
}
.topbar-notification-btn>b[hidden]{display:none!important}
.driver-finance-head{
  min-height:36px;
  display:flex!important;
  align-items:center;
  gap:7px;
  padding:0 8px;
  border:1px solid var(--sc-line);
  border-radius:11px;
  background:#fff;
  font-size:9px;
  white-space:nowrap;
}
.driver-finance-head span+span{
  padding-left:7px;
  border-left:1px solid #e5ebf3;
}

/* ---------------------------- */
/* Typography / hierarchy       */
/* ---------------------------- */
:is(
  .runtime-dashboard-hero,
  .designer-page-hero,
  .sc-form-hero,
  .crew-hero,
  .ms-hero,
  .do-hero,
  .de-hero,
  .team-hero,
  .oi-hero,
  .cc-hero,
  .dm-hero,
  .dlw-hero,
  .connections-hero,
  .comp-page-head,
  .rep-hero
) h1{
  letter-spacing:-.035em!important;
  line-height:1.04!important;
}
.content h2{
  letter-spacing:-.018em;
}
.content :is(.eyebrow,.sc-form-eyebrow,.team-eyebrow,.ms-eyebrow,.do-kicker,.oi-eyebrow,.dlw-eyebrow){
  font-size:10px!important;
  letter-spacing:.085em!important;
}

/* Top hero descriptions are moved into bottom help by JS. Prevent layout
   gaps once moved. */
.sc-help-moved{
  display:none!important;
}
.sc-page-help{
  margin-top:18px;
  border:1px solid var(--sc-line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--sc-shadow);
}
.sc-page-help>summary{
  min-height:46px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 13px;
  cursor:pointer;
  color:#52657d;
  font-size:11px;
  font-weight:850;
  list-style:none;
}
.sc-page-help>summary::-webkit-details-marker{display:none}
.sc-page-help>summary:before{
  content:'?';
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#edf4ff;
  color:#2563eb;
  font-weight:900;
}
.sc-page-help-body{
  display:grid;
  gap:8px;
  padding:0 13px 13px;
}
.sc-page-help-item{
  padding:10px 11px;
  border-radius:10px;
  background:#f8fbff;
  color:#63748c;
  font-size:11px;
  line-height:1.5;
}

/* ---------------------------- */
/* Cards / sections / grids     */
/* ---------------------------- */
:is(.panel,.card,.sc-form-section,.crew-card,.ms-card,.do-card,.de-card,.team-card,.cc-card,.oi-card,.dm-card){
  border-color:var(--sc-line)!important;
  box-shadow:var(--sc-shadow)!important;
}
:is(.panel-heading,.sc-section-head,.crew-card-head,.ms-head,.do-head,.team-head){
  border-color:#edf1f6!important;
}
:is(.panel,.card){
  min-width:0;
}
:is(
  .dashboard-metrics,
  .kpis,
  .comp-kpis,
  .crew-kpis,
  .de-kpis,
  .cc-kpis,
  .oi-grid,
  .dm-kpis
){
  gap:9px!important;
}
:is(
  .dashboard-metrics article,
  .kpis article,
  .comp-kpi,
  .crew-kpi,
  .de-kpi,
  .cc-kpi,
  .oi-kpi,
  .dm-kpis>div
){
  min-width:0;
  border-radius:13px!important;
  box-shadow:none!important;
}

/* Do not let short/empty columns create giant dead areas. */
:is(
  .builder-layout,
  .dashboard-main-grid,
  .crew-grid,
  .ms-grid,
  .do-grid,
  .team-grid,
  .cc-grid,
  .oi-two,
  .dm-grid,
  .dlw-workgrid
){
  align-items:start!important;
}
:is(.crew-list,.team-list,.entity-grid,.notification-list,.de-history){
  min-width:0;
}

/* Empty states should be compact and useful rather than huge whitespace. */
:is(.empty,.empty-state,.crew-empty,.ms-empty,.de-empty,.telemetry-empty,.dm-empty){
  min-height:0!important;
  padding:24px 18px!important;
  border-radius:12px;
  color:#718096!important;
}
.empty-icon{
  width:42px!important;
  height:42px!important;
  border-radius:12px!important;
  font-size:20px!important;
}

/* ----------------------------------- */
/* Buttons / inputs / action clarity   */
/* ----------------------------------- */
button,a,input,select,textarea{
  -webkit-tap-highlight-color:transparent;
}
:is(
  .btn,
  .dob-btn,
  .do-btn,
  .ms-btn,
  .crew-btn,
  .team-btn,
  .cc-btn,
  .dm-btn,
  .oi-ack
){
  border-radius:10px!important;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease;
}
:is(.btn,.dob-btn,.do-btn,.ms-btn,.crew-btn,.team-btn,.cc-btn,.dm-btn):not(:disabled):active{
  transform:translateY(1px);
}
:is(.btn.primary,.dob-btn.primary,.do-btn.primary,.ms-btn:not(.light):not(.warn):not(.danger),.team-btn.primary,.cc-btn.primary,.dm-btn.primary){
  box-shadow:0 7px 18px rgba(37,99,235,.16);
}
:is(input,select,textarea){
  border-color:#ccd8e8!important;
  outline:none;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
:is(input,select,textarea):focus{
  border-color:#77a1ef!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.09)!important;
}
.sc-auto-label{
  display:inline-flex!important;
  align-items:center;
  gap:6px;
}
.sc-auto-label .sc-generated-label{
  font-size:11px;
  font-weight:800;
}

/* Sticky actions are smaller and less intrusive. */
.sc-form-footer{
  bottom:8px!important;
  border-radius:13px!important;
  box-shadow:0 10px 28px rgba(15,23,42,.09)!important;
}

/* ----------------------------------- */
/* Generic adaptive table cards        */
/* ----------------------------------- */
.sc-mobile-table-wrap{
  overflow:visible!important;
}
@media(max-width:760px){
  table.sc-mobile-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
  }
  table.sc-mobile-table thead{
    display:none!important;
  }
  table.sc-mobile-table tbody{
    display:grid!important;
    gap:9px!important;
  }
  table.sc-mobile-table tr{
    display:grid!important;
    gap:0!important;
    padding:4px 11px!important;
    border:1px solid var(--sc-line)!important;
    border-radius:13px!important;
    background:#fff!important;
    box-shadow:0 4px 14px rgba(15,23,42,.03);
  }
  table.sc-mobile-table td{
    display:grid!important;
    grid-template-columns:minmax(96px,.7fr) minmax(0,1.3fr)!important;
    gap:10px!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
    padding:9px 0!important;
    border:0!important;
    border-bottom:1px solid #edf1f6!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  table.sc-mobile-table td:last-child{
    border-bottom:0!important;
  }
  table.sc-mobile-table td::before{
    content:attr(data-sc-label);
    color:#8190a5;
    font-size:9px;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.045em;
  }
  table.sc-mobile-table td[colspan]{
    display:block!important;
  }
  table.sc-mobile-table td[colspan]::before{
    display:none!important;
  }
  table.sc-mobile-table td :is(form,.actions,.cc-actions,.team-actions,.crew-actions){
    min-width:0;
  }
}

/* ----------------------------------- */
/* Realtime feedback                   */
/* ----------------------------------- */
.sc-live-updating{
  position:relative;
}
.sc-live-updating:after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);
  transform:translateX(-100%);
  animation:scShimmer .65s ease;
}
.sc-live-flash{
  animation:scLiveFlash .7s ease;
}
.sc-live-toast-stack{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:3000;
  width:min(360px,calc(100vw - 28px));
  display:grid;
  gap:8px;
}
.sc-live-toast{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:9px;
  align-items:start;
  padding:11px 12px;
  border:1px solid #d9e5f3;
  border-radius:13px;
  background:rgba(255,255,255,.97);
  color:#20314b;
  box-shadow:0 18px 46px rgba(15,23,42,.15);
  backdrop-filter:blur(14px);
}
.sc-live-toast>i{
  width:9px;height:9px;margin-top:5px;border-radius:50%;background:#2563eb;
}
.sc-live-toast strong{display:block;font-size:11px}
.sc-live-toast span{display:block;margin-top:2px;color:#6c7d95;font-size:10px;line-height:1.4}
.sc-live-toast button{
  width:28px;height:28px;border:0;border-radius:8px;background:#f1f5f9;color:#64748b;cursor:pointer
}
.sc-live-toast.success>i{background:#16a765}
.sc-live-toast.error>i{background:#d94747}

/* ----------------------------------- */
/* Desktop density / responsive layout */
/* ----------------------------------- */
@media(min-width:981px){
  .content{
    min-height:calc(100vh - var(--sc-topbar-height));
  }
  .runtime-dashboard-hero,
  .designer-page-hero,
  .sc-form-hero,
  .crew-hero,
  .ms-hero,
  .do-hero,
  .de-hero,
  .team-hero,
  .oi-hero,
  .cc-hero,
  .dm-hero,
  .dlw-hero,
  .connections-hero,
  .comp-page-head,
  .rep-hero{
    padding-top:16px!important;
    padding-bottom:16px!important;
    min-height:0!important;
  }
}

/* ----------------------------------- */
/* Tablet / mobile                     */
/* ----------------------------------- */
@media(max-width:1180px){
  .workspace-command-search{max-width:360px}
  .driver-finance-head span:last-child{display:none}
}
@media(max-width:980px){
  .shell{margin-left:0!important}
  .sidebar{
    width:min(360px,92vw)!important;
  }
  .content{
    padding:12px!important;
  }
  .topbar{
    min-height:58px!important;
    padding:7px 10px!important;
  }
  .workspace-command-search{
    display:none!important;
  }
  .topbar-title{
    flex:1;
    min-width:0;
  }
  .topbar-title b{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .topbar-live-state span{
    display:none;
  }
  .topbar-live-state{
    min-width:36px;
    justify-content:center;
  }
  .topbar-live-state b{
    display:none;
  }
  .driver-finance-head{
    display:none!important;
  }
  .user-chip{
    display:none!important;
  }
}
@media(max-width:700px){
  :root{--sc-radius:14px}
  .content{
    padding:9px!important;
  }
  :is(
    .runtime-dashboard-hero,
    .designer-page-hero,
    .sc-form-hero,
    .crew-hero,
    .ms-hero,
    .do-hero,
    .de-hero,
    .team-hero,
    .oi-hero,
    .cc-hero,
    .dm-hero,
    .dlw-hero,
    .connections-hero,
    .comp-page-head,
    .rep-hero
  ){
    padding:14px!important;
    border-radius:14px!important;
  }
  :is(
    .runtime-dashboard-hero,
    .designer-page-hero,
    .sc-form-hero,
    .crew-hero,
    .ms-hero,
    .do-hero,
    .de-hero,
    .team-hero,
    .oi-hero,
    .cc-hero,
    .dm-hero,
    .dlw-hero,
    .connections-hero,
    .comp-page-head,
    .rep-hero
  ) h1{
    font-size:clamp(24px,7.5vw,32px)!important;
    margin-top:4px!important;
    margin-bottom:4px!important;
  }

  /* Force desktop-only multi-column pages into readable single column. */
  :is(
    .builder-layout,
    .dashboard-main-grid,
    .crew-grid,
    .ms-grid,
    .do-grid,
    .team-grid,
    .cc-grid,
    .oi-two,
    .dm-grid,
    .dlw-workgrid,
    .de-grid
  ){
    grid-template-columns:1fr!important;
  }
  :is(
    .dashboard-metrics,
    .kpis,
    .comp-kpis,
    .crew-kpis,
    .de-kpis,
    .cc-kpis,
    .oi-grid,
    .dm-kpis
  ){
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .panel,.card{
    padding:14px!important;
    border-radius:14px!important;
  }
  .panel-heading{
    align-items:flex-start!important;
    flex-direction:column;
    gap:8px!important;
  }

  /* Actions stay obvious and finger-friendly. */
  :is(
    .actions,
    .hero-actions,
    .workflow-actions,
    .team-actions,
    .crew-actions,
    .do-actions,
    .ms-actions,
    .cc-actions,
    .oi-alert-actions,
    .oi-position-actions,
    .dm-form-actions
  ){
    gap:7px!important;
  }
  :is(
    .btn,
    .dob-btn,
    .do-btn,
    .ms-btn,
    .crew-btn,
    .team-btn,
    .cc-btn,
    .dm-btn
  ){
    min-height:44px!important;
    padding:9px 12px!important;
    font-size:12px!important;
  }
  .sc-generated-label{
    display:inline!important;
  }

  /* Avoid horizontal form/table overflow. */
  :is(.form-grid,.sc-section-body,.team-two,.cc-row,.do-info){
    grid-template-columns:1fr!important;
  }
  .sc-span-2,.span-2,.wide{
    grid-column:auto!important;
  }
  .sc-form-footer{
    position:sticky!important;
    bottom:6px!important;
  }

  .sc-live-toast-stack{
    right:8px;
    bottom:8px;
    width:calc(100vw - 16px);
  }
}
@media(max-width:520px){
  .topbar-live-state{display:none!important}
}

@media(max-width:460px){
  :is(
    .dashboard-metrics,
    .kpis,
    .comp-kpis,
    .crew-kpis,
    .de-kpis,
    .cc-kpis,
    .oi-grid,
    .dm-kpis
  ){
    grid-template-columns:1fr 1fr!important;
  }
  .topbar-actions{gap:4px}
  .topbar-notification-btn{
    width:34px;height:34px
  }
}


/* Public/mobile navigation */
.public-mobile-menu{display:none;position:relative}
.public-mobile-menu>summary{
  min-height:42px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid var(--sc-line);
  border-radius:11px;
  background:#fff;
  font-size:12px;
  font-weight:850;
  cursor:pointer;
  list-style:none;
}
.public-mobile-menu>summary::-webkit-details-marker{display:none}
.public-mobile-menu>div{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:120;
  width:min(300px,calc(100vw - 24px));
  display:grid;
  gap:4px;
  padding:8px;
  border:1px solid var(--sc-line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--sc-shadow-raised);
}
.public-mobile-menu a{
  min-height:42px;
  display:flex;
  align-items:center;
  padding:8px 10px;
  border-radius:9px;
  color:#41516a;
  font-size:13px;
  font-weight:750;
}
.public-mobile-menu a:hover{background:#f4f8ff}
.public-mobile-menu a.primary{background:#2563eb;color:#fff}
@media(max-width:980px){
  .public-header{
    height:auto!important;
    min-height:64px;
    padding:8px 12px!important;
    gap:8px!important;
  }
  .public-header nav{display:none!important}
  .public-mobile-menu{display:block}
  .public-header-actions{
    margin-left:auto;
  }
  .public-auth-actions{display:none!important}
}
@media(max-width:520px){
  .public-header .brand{
    min-width:0;
    font-size:13px;
  }
  .public-header .brand span{
    width:32px;height:32px
  }
  .public-locale-switcher button{
    min-width:32px!important;
    height:36px!important;
  }
}

/* ----------------------------------- */
/* Accessibility / motion              */
/* ----------------------------------- */
:focus-visible{
  outline:2px solid #4f85ea!important;
  outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@keyframes scPulse{
  0%,100%{opacity:.45;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.1)}
}
@keyframes scShimmer{
  to{transform:translateX(100%)}
}
@keyframes scLiveFlash{
  0%{box-shadow:0 0 0 0 rgba(37,99,235,.22)}
  100%{box-shadow:0 0 0 10px rgba(37,99,235,0)}
}