:root {
  color-scheme: dark;
  --night: #050712;
  --white: #f8faff;
  --muted: #9ba6ba;
  --blue: #2c6bff;
  --violet: #8b45ff;
  --display: "Manrope", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--night);
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
}

.shell {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  transform: translateY(-160%);
  background: #fff;
  color: #000;
  font-weight: 700;
}

.skip-link:focus {
  transform: none;
}

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: background 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.site-header.scrolled {
  border-color: rgba(167, 181, 218, 0.2);
  background: rgba(5, 7, 18, 0.97);
}

.header-inner {
  min-height: 84px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.brand img {
  width: 52px;
  height: 32px;
  flex: 0 0 auto;
  object-fit: cover;
  object-position: center;
}

.brand-name > span {
  color: #bdc8dc;
  font-weight: 600;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.portal-link {
  position: relative;
  padding-block: 10px;
  color: #9ca7bb;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 180ms ease;
}

.portal-link::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: right;
  background: linear-gradient(90deg, var(--blue), var(--violet));
  content: "";
  transition: transform 200ms ease;
}

.portal-link:hover,
.portal-link:focus-visible {
  color: #fff;
}

.portal-link:hover::after,
.portal-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 18px;
  padding: 0 6px 0 17px;
  border: 1px solid rgba(138, 151, 190, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.nav-cta span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}

.nav-cta:hover,
.nav-cta:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(104, 130, 255, 0.48);
  background: rgba(68, 88, 182, 0.12);
}

.coming-soon {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
  place-items: center;
  background:
    radial-gradient(105% 115% at -18% 2%, rgba(44, 107, 255, 0.14) 0%, rgba(44, 107, 255, 0.075) 24%, rgba(44, 107, 255, 0.026) 44%, rgba(44, 107, 255, 0.008) 57%, transparent 71%),
    radial-gradient(96% 118% at 118% 108%, rgba(139, 69, 255, 0.15) 0%, rgba(139, 69, 255, 0.078) 26%, rgba(139, 69, 255, 0.028) 46%, rgba(139, 69, 255, 0.008) 60%, transparent 74%),
    radial-gradient(ellipse at 50% 34%, rgba(50, 72, 142, 0.1), transparent 43%),
    linear-gradient(180deg, #050712 0%, #070a16 72%, #080b18 100%);
}

.coming-soon::after {
  position: absolute;
  z-index: -2;
  right: -10%;
  bottom: -4%;
  left: -10%;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(66, 55, 175, 0.14) 0%, rgba(66, 55, 175, 0.075) 32%, rgba(66, 55, 175, 0.025) 58%, transparent 86%);
  content: "";
}

.aurora {
  display: none;
}

.coming-soon-copy {
  position: relative;
  z-index: 2;
  width: min(100% - 48px, 1100px);
  text-align: center;
}

.coming-soon h1 {
  margin: 0;
  padding-bottom: 0.12em;
  background: linear-gradient(100deg, #f8faff 8%, #9bcfff 35%, #858dff 62%, #b178ff 92%);
  background-clip: text;
  color: transparent;
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(4.2rem, 10vw, 9.5rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 1;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.footer {
  position: relative;
  z-index: 5;
  border-top: 1px solid rgba(255, 255, 255, 0.065);
  background: #040610;
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 72px;
  align-items: start;
  padding-block: 54px 42px;
}

.footer-brand {
  margin-bottom: 18px;
}

.footer-intro > p {
  max-width: 360px;
  margin: 0;
  color: #69758b;
  font-size: 12px;
  line-height: 1.7;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: clamp(32px, 5vw, 72px);
}

.footer-links > div {
  display: grid;
  align-content: start;
  gap: 11px;
}

.footer-links span {
  margin-bottom: 4px;
  color: #566176;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer-links a,
.footer-link-disabled {
  color: #929db1;
  font-size: 11px;
}

.footer-links a {
  transition: color 160ms ease;
}

.footer-link-disabled {
  cursor: default;
  user-select: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
}

.footer-bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  padding-block: 22px 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  color: #4f596b;
  font-size: 9px;
  line-height: 1.7;
}

.footer-bottom p {
  max-width: 760px;
  margin: 0;
}

.footer-bottom > span {
  white-space: nowrap;
}

.legal-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 134px 24px 64px;
  background:
    radial-gradient(circle at 30% 22%, rgba(44, 107, 255, 0.12), transparent 34%),
    radial-gradient(circle at 75% 78%, rgba(139, 69, 255, 0.13), transparent 38%),
    linear-gradient(180deg, #050712 0%, #070a16 100%);
}

.legal-card {
  width: min(720px, 100%);
  padding: clamp(30px, 6vw, 62px);
  border: 1px solid rgba(138, 151, 190, 0.16);
  border-radius: 18px;
  background: rgba(8, 12, 28, 0.78);
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.28);
}

.legal-card .eyebrow {
  margin: 0 0 16px;
  color: #69b9ff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.legal-card h1 {
  margin: 0 0 20px;
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  letter-spacing: -0.06em;
  line-height: 1;
}

.legal-card p:not(.eyebrow) {
  margin: 0;
  color: #9ba6ba;
  font-size: 14px;
  line-height: 1.8;
}

.legal-card a {
  color: #71bfff;
  font-weight: 600;
}

.auth-page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  overflow: hidden;
  place-items: center;
  padding: 126px 24px 76px;
  background:
    radial-gradient(115% 135% at -24% -12%, rgba(44, 107, 255, 0.16) 0%, rgba(44, 107, 255, 0.08) 25%, rgba(44, 107, 255, 0.026) 46%, rgba(44, 107, 255, 0.007) 61%, transparent 75%),
    radial-gradient(105% 130% at 125% 112%, rgba(139, 69, 255, 0.17) 0%, rgba(139, 69, 255, 0.085) 27%, rgba(139, 69, 255, 0.028) 48%, rgba(139, 69, 255, 0.007) 63%, transparent 77%),
    radial-gradient(ellipse at 48% 42%, rgba(64, 82, 167, 0.09), transparent 43%),
    linear-gradient(180deg, #050712 0%, #070a16 100%);
}

.auth-page::after {
  display: none;
}

.auth-page::before {
  display: none;
}

.auth-header {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
}

.auth-header-inner {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 10px;
  color: #929db1;
  font-size: 12px;
  font-weight: 600;
  transition: color 160ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: #fff;
}

.auth-card {
  width: min(470px, 100%);
  padding: clamp(30px, 5vw, 48px);
  border: 1px solid rgba(145, 160, 204, 0.16);
  border-radius: 24px;
  background: rgba(7, 10, 24, 0.78);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(20px);
}

.auth-eyebrow,
.dashboard-eyebrow {
  margin: 0 0 16px;
  color: #76bfff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.auth-card h1,
.dashboard-card h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.35rem, 8vw, 3.55rem);
  letter-spacing: -0.06em;
  line-height: 1;
}

.auth-subtitle {
  margin: 18px 0 30px;
  color: #8d98ad;
  font-size: 14px;
  line-height: 1.7;
}

.auth-form {
  display: grid;
  gap: 19px;
}

.field {
  display: grid;
  gap: 8px;
}

.field > label {
  color: #c4ccdb;
  font-size: 11px;
  font-weight: 600;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.field-label-row > label {
  color: #c4ccdb;
  font-size: 11px;
  font-weight: 600;
}

.forgot-button {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: #8492aa;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  transition: color 160ms ease;
}

.forgot-button:hover,
.forgot-button:focus-visible {
  color: #9dcaff;
}

.forgot-button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.field input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(142, 158, 202, 0.2);
  border-radius: 11px;
  outline: 0;
  background: rgba(255, 255, 255, 0.035);
  color: #fff;
  font: inherit;
  font-size: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field input::placeholder {
  color: #505b70;
}

.field input:focus {
  border-color: rgba(91, 127, 255, 0.72);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 4px rgba(62, 102, 255, 0.11);
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 66px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 13px;
  padding: 6px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #7f8aa0;
  cursor: pointer;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.password-toggle:hover,
.password-toggle:focus-visible {
  color: #fff;
}

.auth-submit,
.sign-out-button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(130, 146, 255, 0.4);
  border-radius: 999px;
  background: linear-gradient(115deg, #2d68f6, #7747f7);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 13px 35px rgba(59, 74, 215, 0.25);
  transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.auth-submit:hover,
.auth-submit:focus-visible,
.sign-out-button:hover,
.sign-out-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.auth-submit:disabled {
  cursor: wait;
  opacity: 0.64;
}

.auth-status {
  min-height: 20px;
  margin: -3px 0 0;
  color: #ff9aab;
  font-size: 11px;
  line-height: 1.55;
}

.auth-status.success {
  color: #83d8bd;
}

.reset-status {
  margin: 0 0 22px;
}

.reset-return {
  display: inline-flex;
  margin-top: 18px;
  color: #aeb8ca;
  font-size: 11px;
  font-weight: 600;
}

.reset-return:hover,
.reset-return:focus-visible {
  color: #fff;
}

.auth-help {
  margin: 26px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: #687389;
  font-size: 11px;
  line-height: 1.65;
  text-align: center;
}


.auth-help a {
  color: #aeb8ca;
  font-weight: 600;
}

.auth-help a:hover,
.auth-help a:focus-visible {
  color: #fff;
}

.dashboard-page {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 126px 24px 76px;
  background:
    radial-gradient(circle at 18% 18%, rgba(44, 107, 255, 0.14), transparent 35%),
    radial-gradient(circle at 82% 82%, rgba(139, 69, 255, 0.14), transparent 38%),
    #050712;
}

.dashboard-card {
  width: min(720px, 100%);
  padding: clamp(34px, 7vw, 66px);
  border: 1px solid rgba(145, 160, 204, 0.16);
  border-radius: 24px;
  background: rgba(7, 10, 24, 0.82);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.3);
}

.dashboard-copy {
  max-width: 570px;
  margin: 20px 0 0;
  color: #8d98ad;
  font-size: 14px;
  line-height: 1.8;
}

.dashboard-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.dashboard-account p {
  margin: 0;
  color: #778298;
  font-size: 11px;
  line-height: 1.6;
}

.dashboard-account strong {
  display: block;
  overflow: hidden;
  max-width: 360px;
  color: #dbe1ec;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sign-out-button {
  min-height: 42px;
  padding-inline: 22px;
  box-shadow: none;
}

.auth-loading {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  background: #050712;
  color: #778298;
  font-size: 12px;
}

.auth-loading[hidden] {
  display: none;
}

@media (max-width: 680px) {
  .shell {
    width: min(100% - 24px, 620px);
  }

  .header-inner {
    min-height: 74px;
    gap: 10px;
  }

  .brand {
    gap: 7px;
    font-size: 12px;
  }

  .brand img {
    width: 44px;
    height: 28px;
  }

  .header-actions {
    gap: 10px;
  }

  .portal-link {
    font-size: 10px;
  }

  .nav-cta {
    min-height: 38px;
    gap: 8px;
    padding: 0 5px 0 12px;
    font-size: 10px;
  }

  .nav-cta span {
    width: 28px;
    height: 28px;
  }

  .coming-soon-copy {
    width: min(100% - 30px, 600px);
  }

  .coming-soon h1 {
    font-size: clamp(3.4rem, 18vw, 6rem);
    letter-spacing: -0.065em;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-block: 42px 34px;
  }

  .footer-links {
    grid-template-columns: 1fr 1fr;
    gap: 34px 26px;
  }

  .footer-links > div:first-child {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    display: grid;
    gap: 18px;
  }

  .auth-header-inner {
    min-height: 74px;
  }

  .auth-page,
  .dashboard-page {
    padding: 104px 14px 40px;
  }

  .auth-card,
  .dashboard-card {
    border-radius: 19px;
  }

  .dashboard-account {
    display: grid;
  }

  .dashboard-account strong {
    max-width: min(330px, 78vw);
  }

  .sign-out-button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .brand-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Owner operations workspace */
.owner-dashboard-body {
  overflow: hidden;
  background: #070916;
}

/* The signed-in portal is intentionally dark on every device and OS theme. */
.owner-dashboard-body {
  color-scheme: only dark;
  background-color: #060812;
}

.owner-dashboard-body input,
.owner-dashboard-body select,
.owner-dashboard-body textarea,
.owner-dashboard-body button,
.owner-dashboard-body option {
  color-scheme: dark;
}

.owner-dashboard-body select option {
  color: #f4f6ff;
  background: #090d18;
}

.owner-dashboard-body input:-webkit-autofill,
.owner-dashboard-body input:-webkit-autofill:hover,
.owner-dashboard-body input:-webkit-autofill:focus,
.owner-dashboard-body textarea:-webkit-autofill,
.owner-dashboard-body select:-webkit-autofill {
  -webkit-text-fill-color: #f4f6ff;
  caret-color: #f4f6ff;
  box-shadow: 0 0 0 1000px #090d18 inset;
  transition: background-color 9999s ease-out 0s;
}

.owner-dashboard-body ::selection {
  color: #fff;
  background: rgba(124, 92, 255, .48);
}

.owner-dashboard-body,
.owner-dashboard-body * {
  scrollbar-color: rgba(124, 92, 255, .42) #070a12;
}

/* True-black authenticated canvas; panels retain their raised dark surfaces. */
body.owner-dashboard-body,
.owner-dashboard-body .owner-app,
.owner-dashboard-body .owner-main {
  background: #000;
}

.owner-dashboard-body .owner-topbar {
  background: rgba(0, 0, 0, .84);
}

/* One continuous header seam across the sidebar and workspace. */
.owner-dashboard-body {
  --portal-header-height: 76px;
}

.owner-dashboard-body .owner-sidebar-top,
.owner-dashboard-body .owner-topbar {
  height: var(--portal-header-height);
  min-height: var(--portal-header-height);
  box-sizing: border-box;
  border-bottom-color: rgba(151, 166, 211, .085);
}

.owner-page-identity {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(127, 110, 255, .2);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(73, 92, 255, .12), rgba(143, 72, 255, .065));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}

.owner-page-identity img {
  display: block;
  width: 27px;
  height: 19px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(112, 107, 255, .2));
}

.owner-topbar-left > div:last-child {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
}

.owner-dashboard-body button {
  color: inherit;
  font: inherit;
}

.owner-app {
  min-height: 100svh;
  background:
    radial-gradient(circle at 78% 10%, rgba(76, 68, 226, 0.08), transparent 27%),
    #080a13;
}

.owner-sidebar {
  position: fixed;
  z-index: 40;
  top: 0;
  bottom: 0;
  left: 0;
  width: 264px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(145, 160, 204, 0.1);
  background: #060812;
}

.owner-sidebar-top {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid rgba(145, 160, 204, 0.08);
}

.owner-brand img {
  width: 45px;
  height: 28px;
}

.owner-brand {
  font-size: 13px;
}

.owner-mobile-close {
  display: none;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #8e98aa;
  cursor: pointer;
  font-size: 23px;
}

.owner-workspace-chip {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 11px;
  margin: 18px 14px 8px;
  padding: 10px;
  border: 1px solid rgba(139, 155, 198, 0.12);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.025);
}

.owner-workspace-mark,
.owner-avatar {
  display: grid;
  place-items: center;
  border: 1px solid rgba(122, 134, 255, 0.26);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(58, 108, 255, 0.22), rgba(130, 70, 255, 0.2));
  color: #dce5ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.owner-workspace-mark {
  width: 34px;
  height: 34px;
}

.owner-workspace-chip strong,
.owner-workspace-chip small,
.owner-account-copy strong,
.owner-account-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-workspace-chip strong {
  color: #dfe4ef;
  font-size: 11px;
  font-weight: 600;
}

.owner-workspace-chip small {
  margin-top: 3px;
  color: #667187;
  font-size: 9px;
}

.owner-workspace-caret {
  color: #5d687c;
  font-size: 14px;
}

.owner-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(134, 147, 183, 0.18) transparent;
}

.owner-nav-label {
  margin: 13px 10px 9px;
  color: #505b70;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.owner-nav-label-system {
  margin-top: 24px;
}

.owner-nav-button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 3px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: #7f899d;
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  text-align: left;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
}

.owner-nav-button svg,
.owner-signout-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.owner-nav-button:first-of-type svg {
  fill: currentColor;
  stroke: none;
}

.owner-nav-button:hover,
.owner-nav-button:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  color: #c9d0dd;
}

.owner-nav-button.active {
  border-color: rgba(93, 107, 255, 0.18);
  background: linear-gradient(90deg, rgba(50, 96, 255, 0.14), rgba(110, 65, 255, 0.08));
  color: #f4f6fb;
}

.owner-nav-button.active svg {
  color: #7aa6ff;
}

.owner-sidebar-account {
  min-height: 74px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid rgba(145, 160, 204, 0.09);
  background: rgba(0, 0, 0, 0.13);
}

.owner-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.owner-account-copy {
  min-width: 0;
}

.owner-account-copy strong {
  color: #cbd2df;
  font-size: 10px;
  font-weight: 600;
}

.owner-account-copy small {
  margin-top: 4px;
  color: #5d687c;
  font-size: 8px;
}

.owner-signout-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #687388;
  cursor: pointer;
}

.owner-signout-icon:hover,
.owner-signout-icon:focus-visible {
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
}

.owner-main {
  height: 100svh;
  margin-left: 264px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(9, 12, 24, 0.5), rgba(7, 9, 18, 0.9));
}

.owner-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 clamp(24px, 3.5vw, 52px);
  border-bottom: 1px solid rgba(145, 160, 204, 0.09);
  background: rgba(8, 10, 19, 0.89);
  backdrop-filter: blur(18px);
}

.owner-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.owner-topbar-left p,
.owner-topbar-left h1 {
  margin: 0;
}

.owner-topbar-left p {
  margin-bottom: 3px;
  color: #566176;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.owner-topbar-left h1 {
  color: #e7eaf1;
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.035em;
}

.owner-menu-button {
  width: 38px;
  height: 38px;
  display: none;
  place-content: center;
  gap: 4px;
  padding: 0;
  border: 1px solid rgba(145, 160, 204, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.owner-menu-button span {
  width: 15px;
  height: 1px;
  background: #bac2d0;
}

.owner-topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.owner-private-pill,
.owner-today {
  color: #778297;
  font-size: 9px;
  font-weight: 500;
}

.owner-private-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(145, 160, 204, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
}

.owner-private-pill i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ae2a1;
  box-shadow: 0 0 10px rgba(74, 226, 161, 0.65);
}

.owner-profile-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid rgba(145, 160, 204, 0.13);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  color: #aeb8ca;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.owner-profile-button:hover,
.owner-profile-button:focus-visible {
  border-color: rgba(126, 137, 255, 0.34);
  background: rgba(106, 91, 255, 0.09);
  color: #f4f6fb;
  outline: none;
}

.owner-profile-avatar {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(138, 126, 255, 0.28);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(111, 139, 255, 0.22), rgba(137, 79, 255, 0.2));
  color: #e5e9ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.owner-view {
  width: min(1460px, 100%);
  margin-inline: auto;
  padding: 42px clamp(24px, 3.5vw, 52px) 70px;
}

.owner-welcome {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}

.owner-kicker,
.owner-panel-label {
  margin: 0 0 10px;
  color: #76aaff;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.owner-welcome h2,
.owner-module-view h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 3.15rem);
  letter-spacing: -0.055em;
  line-height: 1.05;
}

.owner-welcome > div > p:last-child {
  max-width: 660px;
  margin: 14px 0 0;
  color: #798499;
  font-size: 12px;
  line-height: 1.7;
}

.owner-primary-button,
.owner-secondary-button {
  min-height: 42px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 160ms ease, border-color 160ms ease, filter 160ms ease;
}

.owner-primary-button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 0 17px;
  border: 0;
  background: linear-gradient(135deg, #356dff, #7749f8);
  box-shadow: 0 10px 30px rgba(72, 82, 235, 0.2);
  color: #fff;
}

.owner-primary-button:hover,
.owner-primary-button:focus-visible,
.owner-secondary-button:hover,
.owner-secondary-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.owner-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.owner-metric-card,
.owner-panel {
  border: 1px solid rgba(145, 160, 204, 0.1);
  background: linear-gradient(145deg, rgba(14, 17, 31, 0.96), rgba(9, 11, 22, 0.94));
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.1);
}

.owner-metric-card {
  min-height: 148px;
  padding: 20px;
  border-radius: 13px;
}

.owner-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #768196;
  font-size: 9px;
  font-weight: 600;
}

.owner-metric-top i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.owner-metric-top .blue { background: #4b84ff; box-shadow: 0 0 12px rgba(75, 132, 255, 0.5); }
.owner-metric-top .violet { background: #9463ff; box-shadow: 0 0 12px rgba(148, 99, 255, 0.5); }
.owner-metric-top .cyan { background: #47c7e8; box-shadow: 0 0 12px rgba(71, 199, 232, 0.5); }
.owner-metric-top .amber { background: #f0b45e; box-shadow: 0 0 12px rgba(240, 180, 94, 0.5); }

.owner-metric-card > strong {
  display: block;
  margin-top: 18px;
  color: #f3f5f9;
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: -0.05em;
}

.owner-metric-card > p {
  margin: 9px 0 0;
  color: #4f5a6e;
  font-size: 8px;
  line-height: 1.5;
}

.owner-content-grid,
.owner-bottom-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.85fr);
  gap: 14px;
  margin-top: 14px;
}

.owner-bottom-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
}

.owner-panel {
  border-radius: 14px;
}

.owner-panel-heading {
  min-height: 77px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 21px;
  border-bottom: 1px solid rgba(145, 160, 204, 0.08);
}

.owner-panel-label {
  margin-bottom: 6px;
  color: #5d6a82;
  font-size: 7px;
}

.owner-panel-heading h3 {
  margin: 0;
  color: #e2e6ee;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: -0.025em;
}

.owner-status-badge {
  padding: 6px 9px;
  border: 1px solid rgba(241, 181, 94, 0.16);
  border-radius: 999px;
  background: rgba(241, 181, 94, 0.06);
  color: #bd8d4d;
  font-size: 7px;
  font-weight: 600;
}

.owner-empty-operation {
  min-height: 308px;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 36px 20px;
  text-align: center;
}

.owner-empty-visual {
  position: relative;
  width: 102px;
  height: 66px;
  margin-bottom: 21px;
}

.owner-empty-visual::before,
.owner-empty-visual::after,
.owner-empty-visual span {
  position: absolute;
  content: "";
}

.owner-empty-visual::before {
  inset: 6px 0 auto;
  height: 48px;
  border: 1px solid rgba(104, 125, 191, 0.2);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(46, 81, 177, 0.11), rgba(111, 67, 201, 0.05));
  transform: rotate(-3deg);
}

.owner-empty-visual::after {
  right: 5px;
  bottom: 1px;
  left: 8px;
  height: 48px;
  border: 1px solid rgba(120, 139, 207, 0.2);
  border-radius: 9px;
  background: #0c1020;
  transform: rotate(3deg);
}

.owner-empty-visual span {
  z-index: 2;
  left: 26px;
  width: 45px;
  height: 2px;
  border-radius: 4px;
  background: rgba(127, 149, 220, 0.2);
}

.owner-empty-visual span:nth-child(1) { top: 28px; }
.owner-empty-visual span:nth-child(2) { top: 38px; width: 33px; }
.owner-empty-visual span:nth-child(3) { top: 48px; width: 38px; }

.owner-empty-visual i {
  position: absolute;
  z-index: 3;
  right: 9px;
  bottom: 5px;
  width: 19px;
  height: 19px;
  border: 4px solid #10162d;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b77ff, #8750ff);
}

.owner-empty-operation h4 {
  margin: 0;
  color: #dce1eb;
  font-size: 12px;
  font-weight: 600;
}

.owner-empty-operation p {
  max-width: 380px;
  margin: 10px 0 19px;
  color: #59657a;
  font-size: 9px;
  line-height: 1.7;
}

.owner-secondary-button {
  padding: 0 15px;
  border: 1px solid rgba(118, 137, 194, 0.18);
  background: rgba(255, 255, 255, 0.03);
  color: #bcc4d3;
}

.owner-checklist-count {
  color: #657086;
  font-size: 8px;
}

.owner-progress {
  height: 2px;
  margin: 0 21px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.owner-progress span {
  display: block;
  width: 25%;
  height: 100%;
  background: linear-gradient(90deg, #3a74ff, #8554ff);
}

.owner-checklist {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 11px 21px 17px;
  list-style: none;
}

.owner-checklist li {
  display: grid;
  grid-template-columns: 27px 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(145, 160, 204, 0.06);
}

.owner-checklist li:last-child {
  border-bottom: 0;
}

.owner-checklist li > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 153, 191, 0.13);
  border-radius: 50%;
  color: #59647a;
  font-size: 8px;
  font-weight: 700;
}

.owner-checklist li.complete > span {
  border-color: rgba(76, 226, 162, 0.2);
  background: rgba(76, 226, 162, 0.08);
  color: #59dbaa;
}

.owner-checklist strong,
.owner-checklist small {
  display: block;
}

.owner-checklist strong {
  color: #aeb7c7;
  font-size: 9px;
  font-weight: 600;
}

.owner-checklist small {
  margin-top: 4px;
  color: #4f5a6e;
  font-size: 8px;
}

.owner-activity-row {
  min-height: 94px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 16px 21px;
}

.owner-activity-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(72, 215, 159, 0.15);
  border-radius: 9px;
  background: rgba(72, 215, 159, 0.07);
  color: #53d3a2;
  font-size: 10px;
}

.owner-activity-row strong,
.owner-activity-row small {
  display: block;
}

.owner-activity-row strong {
  color: #b9c1cf;
  font-size: 9px;
  font-weight: 600;
}

.owner-activity-row small,
.owner-activity-row time {
  color: #536074;
  font-size: 8px;
}

.owner-activity-row small {
  margin-top: 5px;
}

.owner-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 15px 18px 18px;
}

.owner-quick-actions button {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 1px solid rgba(145, 160, 204, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  color: #7f8a9f;
  cursor: pointer;
  font-size: 8px;
  font-weight: 500;
  text-align: left;
}

.owner-quick-actions button:hover,
.owner-quick-actions button:focus-visible {
  border-color: rgba(99, 117, 255, 0.25);
  background: rgba(80, 91, 226, 0.06);
  color: #d7dce6;
}

.owner-quick-actions button span {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: rgba(94, 106, 255, 0.1);
  color: #8e9cff;
  font-size: 10px;
}

.owner-module-view {
  min-height: calc(100svh - 78px);
  display: grid;
  justify-items: start;
  align-content: center;
  padding-bottom: 15vh;
}

.owner-module-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin-bottom: 25px;
  border: 1px solid rgba(105, 118, 255, 0.24);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(52, 104, 255, 0.16), rgba(129, 69, 255, 0.12));
  color: #a8b8ff;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
}

.owner-module-view > p:not(.owner-kicker) {
  max-width: 610px;
  margin: 17px 0 26px;
  color: #758096;
  font-size: 12px;
  line-height: 1.8;
}

.owner-toast {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  max-width: 330px;
  padding: 13px 16px;
  transform: translateY(12px);
  border: 1px solid rgba(123, 138, 188, 0.18);
  border-radius: 10px;
  background: rgba(15, 19, 35, 0.96);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.4);
  color: #c5ccda;
  font-size: 10px;
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
}

.owner-toast.visible {
  transform: translateY(0);
  opacity: 1;
}

.owner-sidebar-scrim {
  position: fixed;
  z-index: 35;
  inset: 0;
  background: rgba(2, 3, 8, 0.72);
  backdrop-filter: blur(4px);
}

/* V2 live station dashboard */
.owner-today {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.owner-today b {
  color: #aeb8cb;
  font-weight: 600;
}

.ops-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 440px);
  gap: 18px;
  align-items: stretch;
}

.ops-hero-copy {
  min-height: 244px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(121, 137, 189, 0.1);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 25%, rgba(39, 100, 255, 0.13), transparent 32%),
    linear-gradient(135deg, rgba(13, 17, 32, 0.95), rgba(7, 10, 20, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 28px 80px rgba(0, 0, 0, 0.18);
}

.ops-live-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #6e98f3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.ops-live-eyebrow i,
.ops-weather-live i,
.ops-live-bar i,
.ops-live-chip i {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 50%;
  background: #46e4a2;
  box-shadow: 0 0 12px rgba(70, 228, 162, 0.8);
  animation: ops-pulse 2s ease-in-out infinite;
}

@keyframes ops-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.ops-hero-copy h2 {
  margin: 16px 0 0;
  font-family: var(--display);
  font-size: clamp(2.05rem, 4.2vw, 3.8rem);
  letter-spacing: -0.065em;
  line-height: 1;
}

.ops-date-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  margin-top: 18px;
}

.ops-date-line span {
  color: #9da8bb;
  font-size: 11px;
  font-weight: 500;
}

.ops-date-line strong {
  color: #f3f6fc;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
}

.ops-date-line em {
  color: #4f5c72;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
}

.ops-hero-copy > p {
  max-width: 720px;
  margin: 15px 0 0;
  color: #69758b;
  font-size: 10px;
  line-height: 1.7;
}

.ops-weather-card,
.ops-glass-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(131, 149, 208, 0.13);
  background:
    linear-gradient(145deg, rgba(17, 21, 39, 0.91), rgba(8, 11, 23, 0.96));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.03), 0 24px 70px rgba(0, 0, 0, 0.17);
  backdrop-filter: blur(20px);
}

.ops-weather-card::before,
.ops-glass-card::before {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(74, 92, 255, 0.08);
  filter: blur(55px);
  content: "";
  pointer-events: none;
}

.ops-weather-card::before {
  top: -70px;
  right: -45px;
}

.ops-weather-card {
  min-height: 244px;
  padding: 22px;
  border-radius: 18px;
}

.ops-card-topline,
.ops-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ops-card-label {
  display: block;
  margin: 0;
  color: #667896;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.ops-card-topline small {
  display: block;
  margin-top: 5px;
  color: #46536a;
  font-size: 8px;
}

.ops-weather-live,
.ops-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6d7b91;
  font-size: 7px;
  font-weight: 600;
}

.ops-weather-main {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.ops-weather-icon {
  width: 61px;
  height: 61px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(135, 157, 226, 0.13);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(54, 111, 255, 0.12), rgba(133, 74, 255, 0.09));
  color: #92b8ff;
  font-size: 29px;
  text-shadow: 0 0 20px rgba(82, 131, 255, 0.45);
}

.ops-weather-icon.sun { color: #ffd06e; text-shadow: 0 0 22px rgba(255, 192, 79, 0.52); }
.ops-weather-icon.rain { color: #62c9ff; }
.ops-weather-icon.snow { color: #d5ecff; }
.ops-weather-icon.storm { color: #b08aff; }
.ops-weather-icon.fog { color: #a8b3c4; }

.ops-weather-main > div:last-child strong,
.ops-weather-main > div:last-child span {
  display: block;
}

.ops-weather-main > div:last-child strong {
  color: #f4f7fc;
  font-family: var(--display);
  font-size: 37px;
  letter-spacing: -0.06em;
  line-height: 1;
}

.ops-weather-main > div:last-child span {
  margin-top: 6px;
  color: #7c899e;
  font-size: 9px;
}

.ops-weather-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(139, 155, 201, 0.08);
}

.ops-weather-details span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #4f5c71;
  font-size: 8px;
}

.ops-weather-details strong {
  color: #9aa7ba;
  font-weight: 600;
}

.ops-live-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 16px 0 12px;
  padding: 0 14px;
  border: 1px solid rgba(104, 121, 175, 0.09);
  border-radius: 10px;
  background: rgba(8, 11, 21, 0.68);
}

.ops-live-bar > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #8ea2c4;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ops-live-bar p {
  flex: 1;
  margin: 0;
  color: #46546a;
  font-size: 8px;
}

.ops-live-bar small {
  color: #59677d;
  font-size: 8px;
}

.ops-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.ops-glass-card {
  min-width: 0;
  border-radius: 15px;
}

.ops-package-card {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 418px;
  padding: 24px;
}

.ops-card-heading h3 {
  margin: 7px 0 0;
  color: #dfe4ee;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: -0.03em;
}

.ops-live-chip {
  padding: 6px 9px;
  border: 1px solid rgba(72, 226, 162, 0.14);
  border-radius: 999px;
  background: rgba(72, 226, 162, 0.045);
  color: #58c89c;
}

.ops-live-chip i {
  width: 5px;
  height: 5px;
}

.ops-package-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 250px;
  padding: 34px clamp(10px, 3vw, 38px);
}

.ops-packages-left > span,
.ops-packages-left > strong,
.ops-packages-left > small {
  display: block;
}

.ops-packages-left > span {
  color: #65738a;
  font-size: 9px;
  font-weight: 600;
}

.ops-packages-left > strong {
  margin-top: 9px;
  color: #f5f7fb;
  font-family: var(--display);
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  letter-spacing: -0.075em;
  line-height: 1;
  text-shadow: 0 0 38px rgba(74, 105, 255, 0.16);
}

.ops-packages-left > small {
  margin-top: 13px;
  color: #59667c;
  font-size: 9px;
}

.ops-packages-left > small b {
  color: #a6b2c6;
  font-weight: 600;
}

.ops-progress-ring {
  position: relative;
  width: 145px;
  height: 145px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #3978ff 0deg, #8f57ff var(--progress), rgba(130, 147, 193, 0.09) var(--progress), rgba(130, 147, 193, 0.09) 360deg);
  box-shadow: 0 0 50px rgba(90, 81, 245, 0.12);
}

.ops-progress-ring::before {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #0b0e1b;
  box-shadow: inset 0 0 25px rgba(0, 0, 0, 0.3);
  content: "";
}

.ops-progress-ring > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ops-progress-ring strong,
.ops-progress-ring span {
  display: block;
}

.ops-progress-ring strong {
  color: #f2f4f9;
  font-family: var(--display);
  font-size: 23px;
  letter-spacing: -0.045em;
}

.ops-progress-ring span {
  margin-top: 5px;
  color: #536078;
  font-size: 7px;
  text-transform: uppercase;
}

.ops-package-bar {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(135, 151, 198, 0.08);
}

.ops-package-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3978ff, #8b57ff);
  box-shadow: 0 0 16px rgba(97, 87, 255, 0.45);
  transition: width 500ms ease;
}

.ops-package-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 13px;
  color: #4c596e;
  font-size: 8px;
}

.ops-package-footer b {
  color: #8793a8;
  font-weight: 600;
}

.ops-risk-card {
  min-height: 202px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.ops-card-orb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.ops-card-orb.blue { background: #4c83ff; box-shadow: 0 0 14px rgba(76, 131, 255, 0.64); }
.ops-card-orb.violet { background: #a267ff; box-shadow: 0 0 14px rgba(162, 103, 255, 0.64); }
.ops-card-orb.cyan { background: #45d2ee; box-shadow: 0 0 14px rgba(69, 210, 238, 0.64); }
.ops-card-orb.amber { background: #f5b75f; box-shadow: 0 0 14px rgba(245, 183, 95, 0.64); }

.ops-stat-value {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 28px;
}

.ops-stat-value strong {
  color: #f4f6fa;
  font-family: var(--display);
  font-size: 39px;
  letter-spacing: -0.065em;
  line-height: 1;
}

.ops-stat-value span {
  color: #59667b;
  font-size: 8px;
}

.ops-stat-value span b {
  color: #8a96aa;
  font-weight: 600;
}

.ops-stat-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid rgba(134, 150, 194, 0.07);
  color: #4e5b70;
  font-size: 8px;
}

.ops-stat-footer i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.ops-stat-footer i.healthy { background: #43d59a; box-shadow: 0 0 10px rgba(67, 213, 154, 0.55); }
.ops-stat-footer i.risk { background: #ff6d72; box-shadow: 0 0 10px rgba(255, 109, 114, 0.62); }
.ops-stat-footer i.warning { background: #f1b55e; box-shadow: 0 0 10px rgba(241, 181, 94, 0.55); }
.ops-stat-footer i.neutral { background: #58667e; }

.ops-compliance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  color: #536078;
  font-size: 8px;
}

.ops-compliance-row strong {
  color: #a4afc1;
  font-size: 10px;
}

.ops-data-note {
  margin: 16px 3px 0;
  color: #3f4b5e;
  font-size: 7px;
  line-height: 1.6;
  text-align: right;
}

@media (max-width: 1180px) {
  .ops-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  }

  .ops-dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ops-package-card {
    grid-column: span 2;
    grid-row: auto;
  }
}

@media (max-width: 820px) {
  .ops-hero {
    grid-template-columns: 1fr;
  }

  .ops-hero-copy,
  .ops-weather-card {
    min-height: 0;
  }

  .ops-live-bar {
    align-items: flex-start;
    flex-wrap: wrap;
    padding-block: 12px;
  }

  .ops-live-bar p {
    flex-basis: calc(100% - 120px);
  }

  .ops-live-bar small {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .ops-hero-copy {
    padding: 26px 20px;
  }

  .ops-hero-copy h2 {
    font-size: 2.4rem;
  }

  .ops-weather-card {
    padding: 19px;
  }

  .ops-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .ops-package-card {
    grid-column: auto;
    min-height: 0;
    padding: 20px;
  }

  .ops-package-layout {
    display: grid;
    justify-items: center;
    padding: 34px 0;
    text-align: center;
  }

  .ops-progress-ring {
    width: 132px;
    height: 132px;
  }

  .ops-package-footer {
    display: grid;
  }

  .ops-risk-card {
    min-height: 190px;
  }

  .ops-weather-details {
    grid-template-columns: 1fr;
  }

  .ops-data-note {
    text-align: left;
  }
}

@media (max-width: 1100px) {
  .owner-sidebar {
    transform: translateX(-102%);
    box-shadow: 30px 0 80px rgba(0, 0, 0, 0.5);
    transition: transform 200ms ease;
  }

  .owner-sidebar.open {
    transform: translateX(0);
  }

  .owner-mobile-close,
  .owner-menu-button {
    display: grid;
  }

  .owner-main {
    margin-left: 0;
  }
}

@media (max-width: 860px) {
  .owner-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .owner-content-grid,
  .owner-bottom-grid {
    grid-template-columns: 1fr;
  }

  .owner-checklist-panel {
    order: -1;
  }
}

@media (max-width: 620px) {
  .owner-topbar {
    min-height: 70px;
    padding: 0 14px;
  }

  .owner-private-pill,
  .owner-today {
    display: none;
  }

  .owner-profile-button {
    width: 38px;
    height: 38px;
    padding: 4px;
  }

  .owner-view {
    padding: 28px 14px 50px;
  }

  .owner-welcome {
    display: grid;
    align-items: start;
  }

  .owner-welcome h2,
  .owner-module-view h2 {
    font-size: 2.2rem;
  }

  .owner-welcome .owner-primary-button {
    width: 100%;
    justify-content: space-between;
  }

  .owner-metrics {
    grid-template-columns: 1fr;
  }

  .owner-metric-card {
    min-height: 125px;
  }

  .owner-quick-actions {
    grid-template-columns: 1fr;
  }

  .owner-activity-row {
    grid-template-columns: 34px 1fr;
  }

  .owner-activity-row time {
    display: none;
  }

  .owner-toast {
    right: 14px;
    bottom: 14px;
    left: 14px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* V2 command center — premium visual system */
@property --progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.owner-dashboard-body {
  --ops-ink: #f7f9ff;
  --ops-muted: #8490a8;
  --ops-dim: #536078;
  --ops-line: rgba(157, 174, 226, 0.11);
  --ops-blue: #6b8cff;
  --ops-violet: #9b6cff;
  --ops-cyan: #4ed7ea;
  --ops-green: #43d9a0;
  --ops-red: #ff6d78;
  background: #050711;
}

.owner-app {
  background:
    radial-gradient(circle at 80% -10%, rgba(101, 83, 255, 0.105), transparent 31%),
    radial-gradient(circle at 20% 88%, rgba(36, 106, 255, 0.045), transparent 32%),
    #060812;
}

.owner-sidebar {
  border-right-color: rgba(157, 174, 226, 0.09);
  background:
    radial-gradient(circle at 12% 0%, rgba(88, 76, 235, 0.09), transparent 27%),
    linear-gradient(180deg, #070914, #05070f 72%);
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.15);
}

.owner-sidebar-top {
  min-height: 84px;
  padding-inline: 24px;
}

.owner-brand {
  font-size: 14px;
  letter-spacing: -0.025em;
}

.owner-brand img {
  width: 47px;
  height: 30px;
  filter: drop-shadow(0 0 15px rgba(107, 115, 255, 0.15));
}

.owner-workspace-chip {
  margin: 20px 14px 12px;
  padding: 11px;
  border-color: rgba(147, 163, 217, 0.12);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.owner-workspace-chip strong {
  color: #eef1f8;
  font-size: 11px;
}

.owner-workspace-chip small {
  color: #69758a;
  font-size: 9px;
}

.owner-workspace-mark {
  border-color: rgba(119, 132, 255, 0.3);
  background: linear-gradient(145deg, rgba(60, 112, 255, 0.25), rgba(139, 76, 255, 0.22));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07), 0 8px 24px rgba(70, 61, 213, 0.13);
}

.owner-nav {
  padding: 12px 13px 24px;
}

.owner-nav-label {
  margin: 16px 12px 10px;
  color: #59647a;
  font-size: 8px;
  letter-spacing: 0.18em;
}

.owner-nav-button {
  position: relative;
  min-height: 45px;
  gap: 13px;
  margin-bottom: 4px;
  padding-inline: 13px;
  border-radius: 10px;
  color: #78849a;
  font-size: 11px;
  transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.owner-nav-button::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: -13px;
  width: 2px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #5d8cff, #a66aff);
  box-shadow: 0 0 14px rgba(102, 111, 255, 0.65);
  content: "";
  opacity: 0;
  transform: scaleY(0.5);
  transition: opacity 180ms ease, transform 180ms ease;
}

.owner-nav-button:hover,
.owner-nav-button:focus-visible {
  background: rgba(255, 255, 255, 0.035);
  color: #d5dbe7;
  transform: translateX(2px);
}

.owner-nav-button.active {
  border-color: rgba(107, 129, 255, 0.13);
  background: linear-gradient(90deg, rgba(72, 105, 255, 0.14), rgba(126, 74, 255, 0.055));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.owner-nav-button.active::before {
  opacity: 1;
  transform: scaleY(1);
}

.owner-nav-button.active svg {
  color: #8cb0ff;
  filter: drop-shadow(0 0 7px rgba(99, 132, 255, 0.3));
}

.owner-sidebar-account {
  min-height: 82px;
  padding-inline: 17px;
  background: rgba(1, 3, 9, 0.4);
}

.owner-avatar {
  width: 36px;
  height: 36px;
  font-size: 10px;
}

.owner-account-copy strong {
  color: #d7dce7;
  font-size: 10px;
}

.owner-account-copy small {
  color: #68748a;
  font-size: 8px;
}

/* Scalable command navigation */
.owner-workspace-chip {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
}

.owner-workspace-mark {
  width: 38px;
  font-size: 7px;
  letter-spacing: 0.04em;
}

.owner-workspace-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid rgba(67, 217, 160, 0.13);
  border-radius: 999px;
  background: rgba(67, 217, 160, 0.055);
  color: #73dcb5;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.owner-workspace-live i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #43d9a0;
  box-shadow: 0 0 8px rgba(67, 217, 160, 0.75);
}

.owner-nav {
  padding: 10px 11px 20px;
  overscroll-behavior: contain;
}

.owner-nav::-webkit-scrollbar {
  width: 4px;
}

.owner-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(134, 147, 183, 0.16);
}

.owner-nav-label {
  margin: 13px 13px 8px;
}

.owner-nav-groups {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.owner-nav-group {
  min-width: 0;
  border-radius: 11px;
}

.owner-nav-group-toggle {
  width: 100%;
  min-height: 43px;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  padding: 0 9px 0 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #7c879b;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  text-align: left;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.owner-nav-group-toggle:hover,
.owner-nav-group-toggle:focus-visible {
  border-color: rgba(140, 158, 211, 0.09);
  background: rgba(255, 255, 255, 0.032);
  color: #d9dfea;
  outline: none;
}

.owner-nav-group.open .owner-nav-group-toggle,
.owner-nav-group:has(.owner-nav-button.active) .owner-nav-group-toggle {
  border-color: rgba(108, 130, 255, 0.1);
  background: linear-gradient(90deg, rgba(68, 99, 224, 0.09), rgba(114, 75, 220, 0.025));
  color: #eef1f8;
}

.owner-nav-group-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(142, 158, 206, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  color: #75829a;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.owner-nav-group.open .owner-nav-group-icon,
.owner-nav-group:has(.owner-nav-button.active) .owner-nav-group-icon {
  border-color: rgba(113, 143, 255, 0.17);
  background: linear-gradient(145deg, rgba(68, 116, 255, 0.15), rgba(133, 77, 255, 0.1));
  color: #96b4ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 0 15px rgba(80, 95, 229, 0.08);
}

.owner-nav-group-icon svg,
.owner-nav-chevron {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.owner-nav-chevron {
  width: 14px;
  height: 14px;
  color: #4f5a6f;
  transition: transform 200ms ease, color 180ms ease;
}

.owner-nav-group.open .owner-nav-chevron {
  color: #8995aa;
  transform: rotate(90deg);
}

.owner-nav-submenu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 220ms ease, opacity 160ms ease;
}

.owner-nav-group.open .owner-nav-submenu {
  grid-template-rows: 1fr;
  opacity: 1;
}

.owner-nav-submenu-inner {
  min-height: 0;
  position: relative;
  overflow: hidden;
  padding-left: 20px;
}

.owner-nav-submenu-inner::before {
  position: absolute;
  top: 4px;
  bottom: 7px;
  left: 21px;
  width: 1px;
  background: linear-gradient(180deg, rgba(104, 132, 255, 0.3), rgba(138, 86, 255, 0.08));
  content: "";
}

.owner-nav-button.owner-nav-child {
  min-height: 32px;
  margin: 1px 0;
  padding: 0 10px 0 20px;
  border: 0;
  border-radius: 7px;
  color: #68758a;
  font-size: 9.5px;
}

.owner-nav-button.owner-nav-child::before {
  top: 50%;
  bottom: auto;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #566177;
  box-shadow: 0 0 0 3px #060812;
  opacity: 1;
  transform: translateY(-50%);
}

.owner-nav-button.owner-nav-child:hover,
.owner-nav-button.owner-nav-child:focus-visible {
  background: rgba(255, 255, 255, 0.025);
  color: #cbd2df;
  transform: none;
}

.owner-nav-button.owner-nav-child.active {
  background: linear-gradient(90deg, rgba(74, 105, 235, 0.1), rgba(120, 72, 226, 0.025));
  color: #f2f4fa;
  box-shadow: none;
}

.owner-nav-button.owner-nav-child.active::before {
  width: 5px;
  height: 5px;
  background: #86a8ff;
  box-shadow: 0 0 0 3px #060812, 0 0 11px rgba(105, 132, 255, 0.8);
  transform: translateY(-50%);
}

.owner-nav-label-system {
  margin-top: 18px;
}

.owner-sidebar-account {
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.16);
}

/* Refined module sidebar — quiet, flat, and easy to scan */
.owner-sidebar {
  background:
    radial-gradient(circle at 15% 0%, rgba(78, 70, 208, 0.055), transparent 25%),
    #060810;
  box-shadow: none;
}

.owner-sidebar-top {
  min-height: 76px;
  padding-inline: 22px;
  border-bottom-color: rgba(151, 166, 211, 0.07);
}

.owner-workspace-chip {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  margin: 15px 20px 3px;
  padding: 0 0 16px;
  border: 0;
  border-bottom: 1px solid rgba(151, 166, 211, 0.07);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.owner-workspace-mark {
  width: 36px;
  height: 36px;
  border-color: rgba(113, 132, 255, 0.22);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(67, 94, 217, 0.17), rgba(121, 66, 215, 0.13));
  box-shadow: none;
}

.owner-workspace-chip strong {
  color: #e4e8f1;
  font-size: 10px;
  font-weight: 650;
}

.owner-workspace-chip small {
  margin-top: 3px;
  color: #657086;
  font-size: 8px;
}

.owner-workspace-live {
  display: none;
}

.owner-nav {
  padding: 8px 14px 22px;
}

.owner-nav-label.owner-nav-section {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 17px 10px 7px;
  color: #5f6c83;
  font-size: 7.5px;
  font-weight: 750;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.owner-nav-label.owner-nav-section::after {
  height: 1px;
  flex: 1;
  background: rgba(145, 161, 209, 0.085);
  content: "";
}

.owner-nav > .owner-nav-button {
  min-height: 39px;
  gap: 11px;
  margin-bottom: 2px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #8994a8;
  font-family: Inter, sans-serif;
  font-size: 10.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.owner-nav > .owner-nav-button::before {
  display: none;
}

.owner-nav > .owner-nav-button svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #748096;
  stroke-width: 1.55;
  transition: color 150ms ease;
}

.owner-nav > .owner-nav-button:first-of-type svg {
  fill: currentColor;
  stroke: none;
}

.owner-nav > .owner-nav-button:hover,
.owner-nav > .owner-nav-button:focus-visible {
  border-color: rgba(133, 149, 196, 0.075);
  background: rgba(255, 255, 255, 0.025);
  color: #dbe0ea;
  outline: none;
  transform: none;
}

.owner-nav > .owner-nav-button.active {
  border-color: rgba(113, 104, 255, 0.14);
  background: linear-gradient(90deg, rgba(75, 100, 226, 0.13), rgba(118, 69, 218, 0.08));
  color: #f2f4fa;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018);
}

.owner-nav > .owner-nav-button.active svg {
  color: #8ea8ff;
  filter: none;
}

.owner-nav-label-system {
  margin-top: 19px !important;
}

.owner-sidebar-account {
  min-height: 72px;
  padding-inline: 17px;
  border-top-color: rgba(151, 166, 211, 0.07);
  background: #05070e;
  box-shadow: none;
}

.owner-main {
  position: relative;
  background:
    radial-gradient(circle at 77% 0%, rgba(82, 71, 218, 0.075), transparent 27%),
    linear-gradient(180deg, rgba(8, 11, 23, 0.65), rgba(5, 7, 15, 0.96));
  scrollbar-color: rgba(117, 133, 181, 0.24) transparent;
}

.owner-topbar {
  min-height: 84px;
  padding-inline: clamp(24px, 3.1vw, 48px);
  border-bottom-color: rgba(157, 174, 226, 0.085);
  background: rgba(6, 8, 16, 0.76);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(26px) saturate(125%);
}

.owner-topbar-left p {
  color: #5d6980;
  font-size: 8px;
  letter-spacing: 0.13em;
}

.owner-topbar-left h1 {
  color: #f3f5fa;
  font-size: 18px;
}

.owner-topbar-actions {
  gap: 15px;
}

.owner-private-pill {
  padding: 8px 12px;
  border-color: rgba(89, 220, 166, 0.13);
  background: rgba(59, 211, 151, 0.035);
  color: #8e9aad;
}

.owner-today {
  gap: 8px;
  color: #68758b;
  font-size: 9px;
}

.owner-today b {
  color: #c6cedb;
}

.owner-profile-button {
  width: 38px;
  height: 38px;
  border-color: rgba(157, 174, 226, 0.13);
  background: rgba(255, 255, 255, 0.025);
}

.owner-view {
  width: min(1500px, 100%);
  padding: 34px clamp(24px, 3.1vw, 48px) 58px;
}

.ops-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.72fr);
  gap: 14px;
}

.ops-hero-copy,
.ops-weather-card,
.ops-glass-card {
  border: 1px solid var(--ops-line);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.035),
    0 24px 70px rgba(0, 0, 0, 0.18);
}

.ops-hero-copy {
  position: relative;
  min-height: 284px;
  overflow: hidden;
  justify-content: flex-start;
  padding: clamp(28px, 3.2vw, 44px);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 6% 15%, rgba(49, 112, 255, 0.17), transparent 38%),
    radial-gradient(ellipse at 86% 102%, rgba(133, 73, 255, 0.11), transparent 42%),
    linear-gradient(135deg, rgba(13, 17, 33, 0.97), rgba(7, 10, 20, 0.99));
}

.ops-hero-copy::before {
  position: absolute;
  top: -45%;
  right: 8%;
  width: 26%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(128, 148, 255, 0.032), transparent);
  content: "";
  pointer-events: none;
  transform: rotate(18deg);
}

.ops-hero-copy::after,
.ops-weather-card::after,
.ops-glass-card::after {
  position: absolute;
  top: -1px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(173, 187, 255, 0.3), transparent);
  content: "";
  pointer-events: none;
}

.ops-hero-topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ops-live-eyebrow {
  color: #8ba9ea;
  font-size: 8px;
  letter-spacing: 0.2em;
}

.ops-station-code {
  padding: 7px 9px;
  border: 1px solid rgba(121, 148, 255, 0.15);
  border-radius: 7px;
  background: rgba(73, 105, 239, 0.06);
  color: #9eb5ef;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ops-hero-copy h2 {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 28px 0 0;
  color: var(--ops-ink);
  font-size: clamp(2.15rem, 4vw, 3.65rem);
  line-height: 0.98;
  text-wrap: balance;
  text-shadow: 0 12px 45px rgba(52, 74, 183, 0.14);
}

.ops-hero-description {
  position: relative;
  z-index: 1;
  max-width: 650px;
  margin: 16px 0 0 !important;
  color: #748097 !important;
  font-size: 11px !important;
  line-height: 1.65 !important;
}

.ops-hero-meta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.86fr 1.22fr;
  gap: 0;
  margin-top: auto;
  padding-top: 22px;
}

.ops-date-line,
.ops-pulse-state {
  min-width: 0;
  margin: 0;
  padding-right: 20px;
}

.ops-date-line + .ops-date-line,
.ops-pulse-state {
  padding-left: 20px;
  border-left: 1px solid rgba(147, 164, 215, 0.09);
}

.ops-date-line {
  display: grid;
  align-content: start;
  gap: 7px;
}

.ops-date-line small,
.ops-pulse-state small {
  display: block;
  color: #505d73;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ops-date-line > span {
  color: #b5bece;
  font-size: 10px;
  font-weight: 600;
}

.ops-time-line > span {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.ops-date-line strong {
  color: #eef1f7;
  font-size: 11px;
}

.ops-date-line em {
  color: #637087;
  font-size: 7px;
}

.ops-pulse-state {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ops-pulse-state > span:last-child {
  min-width: 0;
}

.ops-pulse-state strong {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: #b9c2d1;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-pulse-beacon {
  position: relative;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(67, 217, 160, 0.15);
  border-radius: 50%;
  background: rgba(67, 217, 160, 0.035);
}

.ops-pulse-beacon i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ops-green);
  box-shadow: 0 0 12px rgba(67, 217, 160, 0.72);
}

.ops-pulse-beacon b {
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(67, 217, 160, 0.15);
  border-radius: 50%;
  animation: ops-beacon 2.6s ease-out infinite;
}

.ops-pulse-state.has-risk .ops-pulse-beacon {
  border-color: rgba(255, 109, 120, 0.2);
  background: rgba(255, 109, 120, 0.04);
}

.ops-pulse-state.has-risk .ops-pulse-beacon i {
  background: var(--ops-red);
  box-shadow: 0 0 12px rgba(255, 109, 120, 0.72);
}

.ops-pulse-state.has-risk .ops-pulse-beacon b {
  border-color: rgba(255, 109, 120, 0.2);
}

.ops-pulse-state.has-risk strong {
  color: #e2afb5;
}

.ops-pulse-state.waiting .ops-pulse-beacon {
  border-color: rgba(131, 145, 179, 0.16);
  background: rgba(131, 145, 179, 0.035);
}

.ops-pulse-state.waiting .ops-pulse-beacon i {
  background: #77839a;
  box-shadow: none;
}

.ops-pulse-state.waiting .ops-pulse-beacon b {
  border-color: rgba(131, 145, 179, 0.14);
}

@keyframes ops-beacon {
  0% { opacity: 0.65; transform: scale(0.75); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

.ops-weather-card {
  min-height: 284px;
  padding: 25px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 78% 25%, rgba(74, 109, 255, 0.15), transparent 37%),
    radial-gradient(circle at 20% 110%, rgba(109, 65, 226, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(15, 20, 37, 0.97), rgba(7, 10, 20, 0.98));
}

.ops-weather-card::before {
  top: -80px;
  right: -50px;
  width: 220px;
  height: 220px;
  background: rgba(88, 101, 255, 0.075);
  filter: blur(65px);
}

.ops-card-topline small {
  margin-top: 7px;
  color: #5a6780;
  font-size: 9px;
}

.ops-card-label {
  color: #71809b;
  font-size: 8px;
  letter-spacing: 0.17em;
}

.ops-weather-live,
.ops-live-chip {
  font-size: 7px;
  letter-spacing: 0.03em;
}

.ops-weather-main {
  gap: 20px;
  margin-top: 25px;
}

.ops-weather-icon {
  width: 72px;
  height: 72px;
  border-color: rgba(135, 157, 226, 0.14);
  border-radius: 21px;
  background: linear-gradient(145deg, rgba(58, 111, 255, 0.12), rgba(132, 78, 255, 0.07));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.035), 0 14px 40px rgba(22, 43, 113, 0.13);
}

.ops-weather-icon svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
  filter: drop-shadow(0 0 10px currentColor);
}

.ops-weather-main > div:last-child strong {
  font-size: 42px;
}

.ops-weather-main > div:last-child span {
  margin-top: 7px;
  color: #8a96aa;
  font-size: 10px;
}

.ops-weather-details {
  gap: 10px 21px;
  margin-top: 23px;
  padding-top: 17px;
  border-top-color: rgba(144, 160, 209, 0.09);
}

.ops-weather-details span {
  color: #5c6880;
  font-size: 8px;
}

.ops-weather-details strong {
  color: #b4bdcd;
}

.ops-live-bar {
  min-height: 46px;
  gap: 18px;
  margin: 14px 0;
  padding-inline: 16px;
  border-color: rgba(114, 133, 191, 0.1);
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(12, 16, 29, 0.86), rgba(7, 10, 19, 0.76));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018);
}

.ops-live-bar > span {
  color: #a1b0c9;
  font-size: 8px;
  letter-spacing: 0.12em;
}

.ops-live-bar p {
  color: #56637a;
  font-size: 8px;
}

.ops-live-bar p b {
  color: #8794aa;
  font-weight: 600;
}

.ops-live-bar p span {
  padding-inline: 7px;
  color: #354055;
}

.ops-live-bar small {
  color: #707d92;
  font-size: 8px;
}

.ops-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(430px, 1fr);
  gap: 14px;
}

.ops-glass-card {
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(96, 83, 245, 0.052), transparent 32%),
    linear-gradient(145deg, rgba(15, 19, 35, 0.97), rgba(7, 10, 19, 0.985));
  transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.ops-glass-card:hover {
  border-color: rgba(146, 164, 224, 0.17);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.04), 0 28px 80px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}

.ops-package-card {
  grid-column: auto;
  grid-row: auto;
  min-height: 454px;
  padding: 27px;
  background:
    radial-gradient(circle at 89% 38%, rgba(101, 73, 235, 0.12), transparent 30%),
    radial-gradient(circle at 8% 97%, rgba(36, 112, 255, 0.065), transparent 28%),
    linear-gradient(145deg, rgba(15, 19, 36, 0.98), rgba(7, 10, 20, 0.99));
}

.ops-card-heading {
  position: relative;
  z-index: 1;
}

.ops-card-heading h3 {
  margin-top: 8px;
  color: #edf0f6;
  font-size: 15px;
}

.ops-card-heading > div > small {
  display: block;
  margin-top: 7px;
  color: #536078;
  font-size: 8px;
}

.ops-live-chip {
  padding: 7px 10px;
  border-color: rgba(67, 217, 160, 0.16);
  background: rgba(67, 217, 160, 0.045);
  color: #6fd7ae;
}

.ops-package-layout {
  min-height: 288px;
  padding: 36px clamp(4px, 2.8vw, 40px) 30px;
}

.ops-packages-left > span {
  color: #748199;
  font-size: 9px;
  letter-spacing: 0.03em;
}

.ops-packages-left > strong {
  margin-top: 10px;
  font-size: clamp(4rem, 6.3vw, 5.8rem);
  text-shadow: 0 0 42px rgba(74, 105, 255, 0.18);
}

.ops-packages-left > small {
  margin-top: 15px;
  color: #657188;
  font-size: 9px;
}

.ops-packages-left > small b {
  color: #bdc5d2;
}

.ops-progress-ring-wrap {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  gap: 15px;
}

.ops-progress-ring {
  width: 170px;
  height: 170px;
  background: conic-gradient(from -90deg, #4a8bff 0deg, #9d65ff var(--progress), rgba(130, 147, 193, 0.08) var(--progress), rgba(130, 147, 193, 0.08) 360deg);
  box-shadow: 0 0 70px rgba(91, 80, 245, 0.13);
  transition: --progress 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ops-progress-ring::before {
  inset: 12px;
  border: 1px solid rgba(150, 164, 213, 0.06);
  background:
    radial-gradient(circle at 50% 20%, rgba(83, 95, 166, 0.08), transparent 45%),
    #090c18;
}

.ops-progress-ring strong {
  font-size: 26px;
}

.ops-progress-ring span {
  margin-top: 6px;
  color: #68758a;
  font-size: 7px;
  letter-spacing: 0.12em;
}

.ops-ring-caption {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #59667d;
  font-size: 8px;
}

.ops-ring-caption i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #658fff;
  box-shadow: 0 0 9px rgba(101, 143, 255, 0.68);
}

.ops-package-bar {
  height: 6px;
  border: 1px solid rgba(126, 144, 199, 0.04);
  background: rgba(136, 152, 199, 0.075);
}

.ops-package-bar span {
  position: relative;
  background: linear-gradient(90deg, #3988ff, #746dff 58%, #a164ff);
  box-shadow: 0 0 20px rgba(96, 96, 255, 0.48);
}

.ops-package-bar span::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72));
  content: "";
  opacity: 0.48;
}

.ops-package-footer {
  margin-top: 15px;
  color: #59667c;
  font-size: 8px;
}

.ops-package-footer b {
  color: #aab4c5;
}

.ops-signals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ops-risk-card {
  min-height: 220px;
  padding: 21px;
}

.ops-card-icon {
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

.ops-card-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.ops-card-icon.blue { color: #78a5ff; border-color: rgba(89, 137, 255, 0.18); background: rgba(72, 124, 255, 0.07); box-shadow: 0 10px 25px rgba(55, 104, 232, 0.08); }
.ops-card-icon.violet { color: #b084ff; border-color: rgba(158, 103, 255, 0.18); background: rgba(145, 87, 255, 0.07); box-shadow: 0 10px 25px rgba(111, 65, 214, 0.08); }
.ops-card-icon.cyan { color: #63d7e9; border-color: rgba(65, 203, 230, 0.18); background: rgba(53, 191, 219, 0.065); box-shadow: 0 10px 25px rgba(40, 156, 180, 0.07); }
.ops-card-icon.amber { color: #efbd70; border-color: rgba(235, 173, 86, 0.18); background: rgba(232, 166, 75, 0.065); box-shadow: 0 10px 25px rgba(194, 125, 42, 0.07); }

.ops-risk-card .ops-card-heading h3 {
  font-size: 12px;
}

.ops-stat-value {
  gap: 8px;
  margin-top: 28px;
}

.ops-stat-value strong {
  font-size: 43px;
}

.ops-stat-value span {
  max-width: 72px;
  color: #626f85;
  font-size: 8px;
  line-height: 1.4;
}

.ops-stat-footer {
  padding-top: 16px;
  color: #59667b;
  font-size: 8px;
  line-height: 1.4;
}

.ops-risk-card:has(.ops-stat-footer i.risk) {
  border-color: rgba(255, 109, 120, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 76, 91, 0.09), transparent 34%),
    linear-gradient(145deg, rgba(21, 18, 31, 0.98), rgba(9, 10, 19, 0.99));
}

.ops-compliance-row {
  margin-top: 13px;
  padding: 8px 9px;
  border: 1px solid rgba(145, 162, 213, 0.07);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
}

.ops-data-note {
  margin-top: 17px;
  color: #465269;
  font-size: 8px;
}

.metric-updated {
  animation: ops-data-flash 460ms ease-out;
}

@keyframes ops-data-flash {
  0% { color: #ffffff; text-shadow: 0 0 22px rgba(115, 146, 255, 0.9); }
  100% { text-shadow: 0 0 0 transparent; }
}

@media (max-width: 1320px) {
  .ops-dashboard-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(390px, 1fr);
  }

  .ops-package-layout {
    padding-inline: 0;
  }

  .ops-progress-ring {
    width: 150px;
    height: 150px;
  }

  .ops-risk-card {
    padding: 18px;
  }
}

@media (max-width: 1180px) {
  .ops-dashboard-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(400px, 1fr);
  }
}

@media (max-width: 960px) {
  .ops-hero {
    grid-template-columns: 1fr;
  }

  .ops-hero-copy,
  .ops-weather-card {
    min-height: 0;
  }

  .ops-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .ops-package-card {
    min-height: 430px;
  }

  .ops-weather-card {
    display: grid;
    grid-template-columns: minmax(180px, 0.75fr) minmax(250px, 1fr);
    align-items: center;
    gap: 10px 30px;
  }

  .ops-card-topline {
    grid-column: 1 / -1;
  }

  .ops-weather-main {
    margin-top: 8px;
  }

  .ops-weather-details {
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 700px) {
  .owner-topbar {
    min-height: 72px;
    padding-inline: 15px;
  }

  .owner-topbar-actions .owner-today,
  .owner-private-pill {
    display: none;
  }

  .owner-view {
    padding: 20px 14px 45px;
  }

  .ops-hero-copy {
    padding: 25px 20px;
  }

  .ops-hero-copy h2 {
    margin-top: 24px;
    font-size: clamp(2.25rem, 11vw, 3.1rem);
  }

  .ops-hero-description {
    font-size: 10px !important;
  }

  .ops-hero-meta {
    grid-template-columns: 1fr 1fr;
    row-gap: 19px;
    margin-top: 28px;
  }

  .ops-pulse-state {
    grid-column: 1 / -1;
    padding-top: 18px;
    padding-left: 0;
    border-top: 1px solid rgba(147, 164, 215, 0.09);
    border-left: 0;
  }

  .ops-weather-card {
    display: block;
    padding: 22px 20px;
  }

  .ops-weather-main {
    margin-top: 24px;
  }

  .ops-weather-details {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid rgba(144, 160, 209, 0.09);
  }

  .ops-live-bar {
    align-items: flex-start;
    gap: 8px 14px;
    padding: 13px 14px;
  }

  .ops-live-bar p {
    flex-basis: auto;
  }

  .ops-live-bar small {
    width: 100%;
    padding-left: 14px;
  }

  .ops-package-card {
    min-height: 0;
    padding: 22px 20px;
  }

  .ops-package-layout {
    display: grid;
    justify-items: center;
    gap: 30px;
    min-height: 0;
    padding: 39px 0 34px;
    text-align: center;
  }

  .ops-progress-ring {
    width: 145px;
    height: 145px;
  }

  .ops-package-footer {
    display: flex;
  }

  .ops-signals-grid {
    grid-template-columns: 1fr;
  }

  .ops-risk-card {
    min-height: 200px;
    padding: 20px;
  }
}

@media (max-width: 430px) {
  .ops-hero-meta {
    grid-template-columns: 1fr;
  }

  .ops-date-line + .ops-date-line,
  .ops-pulse-state {
    padding-top: 16px;
    padding-left: 0;
    border-top: 1px solid rgba(147, 164, 215, 0.09);
    border-left: 0;
  }

  .ops-package-footer {
    display: grid;
  }
}

/* BeyondFantastic Live Operations */
.bf-live-view {
  padding: 26px clamp(18px, 2.5vw, 38px) 52px;
  color: #eef2ff;
}

.bf-live-view button,
.bf-live-view input,
.bf-live-view select {
  font: inherit;
}

.bf-live-hero,
.bf-live-datebar,
.bf-live-package-panel,
.bf-live-command-panel {
  border: 1px solid rgba(145, 162, 214, 0.1);
  background: linear-gradient(145deg, rgba(13, 17, 32, 0.96), rgba(7, 10, 20, 0.94));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018), 0 22px 60px rgba(0, 0, 0, 0.12);
}

.bf-live-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 122px;
  padding: 23px 26px;
  border-radius: 14px 14px 6px 6px;
  background:
    radial-gradient(circle at 83% 10%, rgba(104, 83, 255, 0.11), transparent 27%),
    linear-gradient(145deg, rgba(13, 17, 32, 0.98), rgba(7, 10, 20, 0.96));
}

.bf-live-eyebrow,
.bf-live-package-panel header p,
.bf-live-command-header p,
.bf-live-map-panel > header p,
.bf-return-drawer header p {
  margin: 0 0 8px;
  color: #71809d;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.bf-live-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #86a8ff;
}

.bf-live-eyebrow i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #5ff0bd;
  box-shadow: 0 0 12px rgba(95, 240, 189, 0.7);
}

.bf-live-hero h2 {
  margin: 0;
  color: #f7f8fd;
  font-family: Manrope, sans-serif;
  font-size: clamp(27px, 2.45vw, 40px);
  font-weight: 700;
  letter-spacing: -0.055em;
  line-height: 1.08;
}

.bf-live-hero > div:first-child > p:last-child {
  margin: 10px 0 0;
  color: #75829b;
  font-size: 10px;
  line-height: 1.6;
}

.bf-live-hero-status {
  display: flex;
  align-items: stretch;
  gap: 9px;
  flex: 0 0 auto;
}

.bf-live-connection,
.bf-live-snapshot {
  min-width: 142px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  gap: 3px 8px;
  padding: 13px 15px;
  border: 1px solid rgba(139, 155, 201, 0.11);
  border-radius: 10px;
  background: rgba(3, 6, 14, 0.4);
}

.bf-live-connection > i {
  grid-row: 1 / 3;
  align-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #768198;
  box-shadow: 0 0 10px rgba(118, 129, 152, 0.25);
}

.bf-live-connection.connected > i {
  background: #4be0a7;
  box-shadow: 0 0 12px rgba(75, 224, 167, 0.55);
}

.bf-live-connection strong,
.bf-live-snapshot strong {
  color: #e8ebf3;
  font-size: 9px;
  font-weight: 650;
}

.bf-live-connection small,
.bf-live-snapshot small {
  color: #627087;
  font-size: 7px;
}

.bf-live-snapshot {
  grid-template-columns: 1fr;
}

.bf-live-datebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 9px;
  padding: 15px 18px;
  border-radius: 7px;
}

.bf-live-date-copy {
  min-width: 180px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: start;
  gap: 3px 9px;
}

.bf-live-date-copy > span {
  grid-column: 1 / -1;
  color: #59667d;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.bf-live-date-copy > strong {
  color: #eff2f8;
  font-size: 12px;
}

.bf-live-date-copy > small {
  color: #657188;
  font-size: 8px;
}

.bf-live-date-actions {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.bf-live-date-actions > button,
.bf-live-date-picker {
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(143, 159, 207, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  color: #7d899e;
  cursor: pointer;
  font-size: 8px;
  font-weight: 650;
}

.bf-live-date-actions > button:hover,
.bf-live-date-actions > button:focus-visible,
.bf-live-date-actions > button.active {
  border-color: rgba(110, 131, 255, 0.21);
  background: linear-gradient(90deg, rgba(75, 106, 235, 0.13), rgba(132, 76, 231, 0.09));
  color: #ecf0f9;
  outline: none;
}

.bf-live-date-actions > button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.bf-live-date-actions > .bf-live-date-arrow {
  width: 36px;
  padding: 0;
  font-size: 20px;
  font-weight: 400;
}

.bf-live-calendar-control {
  position: relative;
  min-width: 190px;
}

.bf-live-date-picker {
  width: 100%;
  min-width: 190px;
  min-height: 44px;
  position: relative;
  align-items: center;
  flex-direction: column;
  gap: 2px;
  padding-inline: 20px;
  text-align: center;
}

.bf-live-date-picker span {
  width: 100%;
  color: #77849a;
  font-size: 7.5px;
  letter-spacing: 0.11em;
  text-align: center;
  text-transform: uppercase;
}

.bf-live-date-picker strong {
  color: #eef2fb;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.bf-live-date-picker[aria-expanded="true"] {
  border-color: rgba(116, 137, 255, 0.35);
  background: linear-gradient(90deg, rgba(75, 106, 235, 0.13), rgba(132, 76, 231, 0.09));
  box-shadow: 0 0 0 3px rgba(88, 104, 230, 0.06);
}

.bf-live-calendar {
  position: absolute;
  z-index: 80;
  top: calc(100% + 9px);
  left: 50%;
  width: 286px;
  padding: 12px;
  border: 1px solid rgba(139, 155, 213, 0.2);
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 0%, rgba(113, 80, 245, 0.12), transparent 31%),
    linear-gradient(155deg, rgba(15, 19, 35, 0.99), rgba(7, 10, 20, 0.99));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(22px) saturate(125%);
  transform: translateX(-50%);
}

.bf-live-calendar::before {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1px solid rgba(139, 155, 213, 0.2);
  border-left: 1px solid rgba(139, 155, 213, 0.2);
  background: #0e1222;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.bf-live-calendar[hidden] {
  display: none;
}

.bf-live-calendar header {
  display: grid;
  grid-template-columns: 30px 1fr 30px;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.08);
}

.bf-live-calendar header strong {
  color: #f2f4fa;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.bf-live-calendar header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(142, 158, 207, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: #8793aa;
  cursor: pointer;
}

.bf-live-calendar header button:hover,
.bf-live-calendar header button:focus-visible {
  border-color: rgba(115, 137, 255, 0.3);
  background: rgba(96, 82, 226, 0.11);
  color: #eef1f8;
  outline: none;
}

.bf-live-calendar header button:disabled {
  cursor: not-allowed;
  opacity: 0.24;
}

.bf-live-calendar header svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.bf-live-calendar-weekdays,
.bf-live-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.bf-live-calendar-weekdays {
  padding: 11px 0 5px;
}

.bf-live-calendar-weekdays span {
  color: #65728a;
  font-size: 7px;
  font-weight: 750;
  text-align: center;
  text-transform: uppercase;
}

.bf-live-calendar-grid button {
  position: relative;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #c3cad8;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
}

.bf-live-calendar-grid button:hover,
.bf-live-calendar-grid button:focus-visible {
  border-color: rgba(114, 136, 255, 0.25);
  background: rgba(95, 83, 224, 0.1);
  color: #f4f6fb;
  outline: none;
}

.bf-live-calendar-grid button.outside {
  color: #465168;
}

.bf-live-calendar-grid button.today:not(.selected)::after {
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #6b98ff;
  content: "";
  transform: translateX(-50%);
}

.bf-live-calendar-grid button.selected {
  border-color: rgba(139, 151, 255, 0.38);
  background: linear-gradient(145deg, rgba(73, 112, 238, 0.88), rgba(127, 77, 226, 0.84));
  color: #fff;
  box-shadow: 0 7px 18px rgba(67, 69, 194, 0.28);
}

.bf-live-calendar-grid button:disabled {
  cursor: not-allowed;
  opacity: 0.22;
}

.bf-live-calendar footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(145, 162, 214, 0.08);
}

.bf-live-calendar footer span {
  color: #56637a;
  font-size: 7px;
}

.bf-live-calendar footer button {
  min-width: 60px;
  height: 29px;
  padding: 0 12px;
  border: 1px solid rgba(114, 136, 255, 0.22);
  border-radius: 7px;
  background: rgba(91, 81, 221, 0.11);
  color: #cfd6e6;
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
}

.bf-live-calendar footer button:hover,
.bf-live-calendar footer button:focus-visible {
  border-color: rgba(123, 143, 255, 0.38);
  background: rgba(91, 81, 221, 0.18);
  color: #fff;
  outline: none;
}

.bf-live-package-panel {
  margin-top: 9px;
  overflow: hidden;
  border-radius: 7px;
}

.bf-live-package-panel > header {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 17px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.08);
}

.bf-live-package-panel header p,
.bf-live-command-header p,
.bf-live-map-panel > header p {
  margin-bottom: 4px;
}

.bf-live-package-panel header h3,
.bf-live-command-header h3,
.bf-live-map-panel > header h3 {
  margin: 0;
  color: #e8ecf5;
  font-family: Manrope, sans-serif;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.bf-live-package-panel > header > span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #657188;
  font-size: 7px;
  font-weight: 650;
}

.bf-live-package-panel > header > span i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #536079;
}

.bf-live-package-panel > header > span strong {
  color: #8490a6;
  font-weight: 600;
}

.bf-live-package-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.bf-live-package-grid article {
  min-width: 0;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px 17px;
  border-right: 1px solid rgba(145, 162, 214, 0.075);
  background: rgba(255, 255, 255, 0.006);
}

.bf-live-package-grid article:last-child {
  border-right: 0;
}

.bf-live-package-grid article > span {
  min-height: 20px;
  color: #66738b;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

.bf-live-package-grid article > strong {
  margin-top: 2px;
  color: #eef2fb;
  font-family: Manrope, sans-serif;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.05em;
  line-height: 1.1;
}

.bf-live-package-grid article > small {
  margin-top: 5px;
  color: #59667d;
  font-size: 7px;
}

.bf-live-package-grid article.progress > strong { color: #89aaff; }
.bf-live-package-grid article.warning > strong { color: #f2c878; }
.bf-live-package-grid article.risk > strong { color: #ff7d8b; }
.bf-live-package-grid article.returned > strong { color: #b993ff; }

.bf-live-command-panel {
  margin-top: 9px;
  overflow: hidden;
  border-radius: 7px 7px 14px 14px;
}

.bf-live-command-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 17px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.08);
}

.bf-live-command-header > div:first-child > span {
  display: block;
  margin-top: 5px;
  color: #5d6a81;
  font-size: 7px;
}

.bf-live-searches {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 6px;
}

.bf-live-searches > label {
  min-width: 142px;
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid rgba(144, 160, 207, 0.1);
  border-radius: 8px;
  background: rgba(3, 6, 13, 0.36);
}

.bf-live-searches label:focus-within {
  border-color: rgba(111, 137, 255, 0.24);
  box-shadow: 0 0 0 3px rgba(81, 101, 230, 0.055);
}

.bf-live-searches svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #66738a;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.bf-live-searches input,
.bf-live-searches select {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #d2d8e5;
  font-size: 8px;
}

.bf-live-searches input::placeholder {
  color: #58647a;
}

.bf-live-searches > .bf-live-select {
  min-width: 125px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 1px;
  border-color: rgba(139, 154, 211, 0.22);
  background: rgba(11, 15, 29, 0.84);
}

.bf-live-select > span {
  color: #98a6bf;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bf-live-searches select {
  color-scheme: dark;
  color: #f1f4fb;
  cursor: pointer;
  font-weight: 700;
}

.bf-live-searches select option {
  background: #090d18;
  color: #f1f4fb;
}

.bf-live-filterbar {
  min-height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.08);
  background: rgba(2, 5, 12, 0.32);
}

.bf-live-filters,
.bf-live-filter-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.bf-live-filters button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #66738a;
  cursor: pointer;
  font-size: 7.5px;
  font-weight: 600;
}

.bf-live-filters button:hover,
.bf-live-filters button:focus-visible,
.bf-live-filters button.active {
  border-color: rgba(125, 142, 193, 0.1);
  background: rgba(255, 255, 255, 0.028);
  color: #e3e7ef;
  outline: none;
}

.bf-live-filters button > i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.bf-live-filters button > i.red { background: #ff6678; box-shadow: 0 0 8px rgba(255, 102, 120, 0.42); }
.bf-live-filters button > i.yellow { background: #f4c46d; box-shadow: 0 0 8px rgba(244, 196, 109, 0.35); }
.bf-live-filters button > i.green { background: #4ed9a6; box-shadow: 0 0 8px rgba(78, 217, 166, 0.35); }
.bf-live-filters button > i.blue { background: #7198ff; box-shadow: 0 0 8px rgba(113, 152, 255, 0.35); }

.bf-live-filters button > strong {
  min-width: 16px;
  display: grid;
  place-items: center;
  padding: 2px 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.035);
  color: #9aa5b9;
  font-size: 6.5px;
}

.bf-live-filter-actions > span {
  margin-right: 6px;
  color: #5c6980;
  font-size: 7px;
}

.bf-live-summary-button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(114, 132, 255, 0.15);
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(73, 102, 224, 0.1), rgba(126, 71, 218, 0.08));
  color: #b8c6eb;
  cursor: pointer;
  font-size: 7.5px;
  font-weight: 650;
}

.bf-live-summary-button:hover,
.bf-live-summary-button:focus-visible {
  border-color: rgba(122, 143, 255, 0.3);
  color: #f1f3fa;
  outline: none;
}

.bf-live-summary-button svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.bf-live-workspace {
  min-height: 610px;
  display: grid;
  grid-template-columns: minmax(330px, 38%) minmax(0, 1fr);
}

.bf-live-route-rail {
  min-width: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(145, 162, 214, 0.08);
  background: rgba(2, 5, 12, 0.24);
}

.bf-live-route-rail > header {
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.07);
}

.bf-live-route-rail > header span {
  color: #68758c;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bf-live-route-rail > header small {
  color: #515e74;
  font-size: 6.5px;
}

.bf-live-route-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(123, 139, 184, 0.18) transparent;
}

.bf-live-route-row {
  width: 100%;
  min-height: 104px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  gap: 7px 10px;
  padding: 13px 14px 12px 17px;
  border: 0;
  border-bottom: 1px solid rgba(145, 162, 214, 0.065);
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 150ms ease;
}

.bf-live-route-row:hover,
.bf-live-route-row:focus-visible,
.bf-live-route-row.selected {
  background: linear-gradient(90deg, rgba(62, 86, 183, 0.09), rgba(117, 65, 191, 0.035));
  outline: none;
}

.bf-live-route-edge {
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 0;
  width: 2px;
  border-radius: 0 3px 3px 0;
  background: #69758b;
}

.bf-live-route-row.tone-red .bf-live-route-edge { background: #ff6577; box-shadow: 0 0 10px rgba(255, 101, 119, 0.4); }
.bf-live-route-row.tone-yellow .bf-live-route-edge { background: #efc66f; }
.bf-live-route-row.tone-green .bf-live-route-edge { background: #4ed8a5; }
.bf-live-route-row.tone-blue .bf-live-route-edge { background: #7197ff; }

.bf-live-route-row > span:nth-of-type(1) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.bf-live-route-row > span:nth-of-type(1) strong {
  color: #e8ecf5;
  font-size: 11px;
  font-weight: 650;
}

.bf-live-route-row > span:nth-of-type(1) small,
.bf-live-route-timing small,
.bf-live-route-footer {
  overflow: hidden;
  color: #657289;
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-live-route-timing {
  align-self: center;
}

.bf-live-route-timing small {
  color: #8793a8;
}

.bf-live-route-track {
  height: 4px;
  position: relative;
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(151, 166, 211, 0.09);
}

.bf-live-route-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #5a86ff, #9a6cff);
  box-shadow: 0 0 12px rgba(91, 123, 255, 0.25);
}

.bf-live-route-footer {
  grid-column: 1 / -1;
}

.bf-live-empty {
  min-height: 290px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 32px;
  text-align: center;
}

.bf-live-empty > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 13px;
  border: 1px solid rgba(115, 135, 255, 0.16);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(70, 102, 225, 0.1), rgba(130, 75, 221, 0.07));
}

.bf-live-empty > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #66758d;
  box-shadow: 0 0 12px rgba(102, 117, 141, 0.4);
}

.bf-live-empty strong {
  color: #bdc5d4;
  font-size: 10px;
}

.bf-live-empty p {
  max-width: 270px;
  margin: 8px 0 0;
  color: #556278;
  font-size: 8px;
  line-height: 1.6;
}

.bf-live-map-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.bf-live-map-panel > header {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 13px 10px 15px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.07);
}

.bf-live-map-tools {
  display: flex;
  gap: 4px;
}

.bf-live-map-tools button {
  min-width: 30px;
  height: 29px;
  padding: 0 9px;
  border: 1px solid rgba(143, 159, 207, 0.12);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.024);
  color: #7f8ba1;
  cursor: pointer;
  font-size: 10px;
}

.bf-live-map-tools button:first-child {
  font-size: 7px;
  font-weight: 650;
}

.bf-live-map-tools button:hover,
.bf-live-map-tools button:focus-visible {
  border-color: rgba(116, 139, 255, 0.25);
  color: #ecf0f8;
  outline: none;
}

.bf-live-map-wrap {
  min-height: 555px;
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 20%, rgba(83, 72, 211, 0.08), transparent 34%),
    #070a12;
}

.bf-live-map {
  width: 100%;
  height: 100%;
  min-height: 555px;
  background: #070a12;
}

.bf-live-map-empty {
  position: absolute;
  z-index: 500;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 18px 22px;
  border: 1px solid rgba(143, 159, 207, 0.11);
  border-radius: 12px;
  background: rgba(7, 10, 20, 0.82);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  text-align: center;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(18px);
}

.bf-live-map-empty[hidden] { display: none; }

.bf-live-map-empty > span {
  margin-bottom: 9px;
  color: #8ca8ff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.bf-live-map-empty strong { color: #dbe0eb; font-size: 10px; }
.bf-live-map-empty p { max-width: 220px; margin: 6px 0 0; color: #58667d; font-size: 7px; line-height: 1.5; }

.bf-live-map-legend {
  position: absolute;
  z-index: 600;
  right: 12px;
  bottom: 12px;
  display: flex;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(143, 159, 207, 0.11);
  border-radius: 8px;
  background: rgba(5, 8, 16, 0.84);
  color: #7b879c;
  font-size: 6.5px;
  backdrop-filter: blur(16px);
}

.bf-live-map-legend span { display: flex; align-items: center; gap: 5px; }
.bf-live-map-legend i { width: 5px; height: 5px; border-radius: 50%; }
.bf-live-map-legend i.active { background: #4ed8a5; }
.bf-live-map-legend i.risk { background: #ff6577; }
.bf-live-map-legend i.station { background: #9575ff; }

.bf-live-dark-tile {
  filter: invert(0.93) hue-rotate(180deg) brightness(0.34) saturate(0.7) contrast(1.18);
}

.bf-live-leaflet-icon {
  border: 0;
  background: transparent;
}

.bf-live-station-marker {
  width: 48px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(140, 117, 255, 0.75);
  border-radius: 9px;
  background: linear-gradient(145deg, #493fbc, #7451de);
  box-shadow: 0 0 0 4px rgba(95, 76, 222, 0.13), 0 9px 24px rgba(0, 0, 0, 0.38);
  color: white;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.bf-live-route-marker {
  min-width: 40px;
  height: 23px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border: 1px solid rgba(117, 148, 255, 0.72);
  border-radius: 7px;
  background: rgba(32, 61, 135, 0.94);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32);
  color: #fff;
  font-size: 7px;
  font-weight: 750;
}

.bf-live-route-marker.tone-red { border-color: rgba(255, 101, 119, 0.8); background: rgba(139, 39, 56, 0.95); }
.bf-live-route-marker.tone-yellow { border-color: rgba(239, 198, 111, 0.78); background: rgba(126, 87, 27, 0.95); }
.bf-live-route-marker.tone-green { border-color: rgba(78, 216, 165, 0.78); background: rgba(23, 107, 77, 0.95); }
.bf-live-route-marker.tone-blue { border-color: rgba(113, 151, 255, 0.78); background: rgba(45, 75, 160, 0.95); }

.bf-live-map .leaflet-control-attribution {
  border-radius: 7px 0 0 0;
  background: rgba(4, 7, 14, 0.74);
  color: #69758b;
  font-size: 7px;
}

.bf-live-map .leaflet-control-attribution a { color: #8797b5; }

.bf-return-drawer {
  position: fixed;
  z-index: 1200;
  inset: 0;
}

.bf-return-drawer[hidden] { display: none; }

.bf-return-scrim {
  position: absolute;
  inset: 0;
  background: rgba(1, 3, 9, 0.7);
  backdrop-filter: blur(7px);
}

.bf-return-drawer > article {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(430px, 94vw);
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(145, 162, 214, 0.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(107, 81, 242, 0.11), transparent 28%),
    #080b15;
  box-shadow: -30px 0 90px rgba(0, 0, 0, 0.42);
}

.bf-return-drawer > article > header {
  min-height: 108px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 23px 22px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.09);
}

.bf-return-drawer header h3 {
  margin: 0;
  color: #f2f4fa;
  font-family: Manrope, sans-serif;
  font-size: 24px;
  letter-spacing: -0.045em;
}

.bf-return-drawer header span {
  display: block;
  margin-top: 5px;
  color: #69758b;
  font-size: 8px;
}

.bf-return-drawer header button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(145, 162, 214, 0.12);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
  color: #8b96a9;
  cursor: pointer;
  font-size: 19px;
}

.bf-return-totals,
.bf-return-breakdown {
  display: grid;
  gap: 8px;
  padding: 16px 20px 0;
}

.bf-return-totals { grid-template-columns: 1fr 1fr; }
.bf-return-breakdown { grid-template-columns: 1fr 1fr; }

.bf-return-totals > span,
.bf-return-breakdown > span {
  min-height: 82px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 14px;
  border: 1px solid rgba(145, 162, 214, 0.09);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.016);
}

.bf-return-totals small,
.bf-return-breakdown small {
  color: #657188;
  font-size: 7px;
  text-transform: uppercase;
}

.bf-return-totals strong,
.bf-return-breakdown strong {
  margin-top: 6px;
  color: #eef2fb;
  font-family: Manrope, sans-serif;
  font-size: 23px;
}

.bf-return-totals > span:first-child strong { color: #b493ff; }

.bf-return-driver-list {
  flex: 1;
  margin: 16px 20px;
  overflow-y: auto;
  border: 1px solid rgba(145, 162, 214, 0.09);
  border-radius: 10px;
  background: rgba(2, 5, 12, 0.28);
}

.bf-return-driver-list > div {
  min-height: 60px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(145, 162, 214, 0.07);
}

.bf-return-driver-list > div:last-child { border-bottom: 0; }
.bf-return-driver-list strong { color: #cbd2df; font-size: 9px; }
.bf-return-driver-list small { margin-top: 5px; color: #626f85; font-size: 7.5px; line-height: 1.5; }

.bf-return-drawer footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px;
  border-top: 1px solid rgba(145, 162, 214, 0.09);
}

.bf-return-drawer footer span { color: #58657a; font-size: 7px; }
.bf-return-drawer footer button {
  min-width: 72px;
  height: 34px;
  border: 1px solid rgba(115, 136, 255, 0.2);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(70, 105, 235, 0.15), rgba(132, 74, 230, 0.12));
  color: #e6eaf4;
  cursor: pointer;
  font-size: 8px;
  font-weight: 650;
}

@media (max-width: 1300px) {
  .bf-live-package-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-live-package-grid article:nth-child(3) { border-right: 0; }
  .bf-live-package-grid article:nth-child(-n + 3) { border-bottom: 1px solid rgba(145, 162, 214, 0.075); }
  .bf-live-command-header { align-items: flex-start; flex-direction: column; }
  .bf-live-searches { width: 100%; justify-content: flex-start; }
  .bf-live-searches > label { flex: 1; }
}

@media (max-width: 980px) {
  .bf-live-workspace { grid-template-columns: 1fr; }
  .bf-live-route-rail { max-height: 430px; border-right: 0; border-bottom: 1px solid rgba(145, 162, 214, 0.08); }
  .bf-live-route-list { min-height: 270px; }
  .bf-live-map-wrap,
  .bf-live-map { min-height: 500px; }
}

@media (max-width: 760px) {
  .bf-live-view { padding: 16px 13px 42px; }
  .bf-live-hero { align-items: flex-start; flex-direction: column; }
  .bf-live-hero-status { width: 100%; }
  .bf-live-connection,
  .bf-live-snapshot { flex: 1; min-width: 0; }
  .bf-live-datebar { align-items: flex-start; flex-direction: column; }
  .bf-live-date-actions { width: 100%; flex-wrap: wrap; }
  .bf-live-date-actions > button:first-child { flex: 1; }
  .bf-live-calendar-control { flex: 1; }
  .bf-live-package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-live-package-grid article:nth-child(3) { border-right: 1px solid rgba(145, 162, 214, 0.075); }
  .bf-live-package-grid article:nth-child(2n) { border-right: 0; }
  .bf-live-package-grid article:nth-child(-n + 4) { border-bottom: 1px solid rgba(145, 162, 214, 0.075); }
  .bf-live-searches { display: grid; grid-template-columns: 1fr 1fr; }
  .bf-live-searches > label { min-width: 0; }
  .bf-live-searches > .bf-live-select { grid-column: 1 / -1; }
  .bf-live-filterbar { align-items: flex-start; flex-direction: column; }
  .bf-live-filters { width: 100%; overflow-x: auto; }
  .bf-live-filters button { flex: 0 0 auto; }
  .bf-live-filter-actions { width: 100%; justify-content: space-between; }
  .bf-live-map-wrap,
  .bf-live-map { min-height: 420px; }
}

/* Daily Rostering fidelity pass — exact DispatchOS proportions and component language. */
.owner-view.scheduling-page.bf-roster-view {
  --accent: #8b63ff;
  --accent-rgb: 139, 99, 255;
  --text: #f4f5f9;
  --muted: #78839b;
  --muted-strong: #a0aac0;
  --green: #48d89a;
  --orange: #ffab5e;
  --danger: #ff6f82;
  --line: rgba(163, 174, 195, .14);
  --line-strong: rgba(163, 174, 195, .24);
  --schedule-surface: #080b11;
  --schedule-surface-raised: #0d1119;
  --schedule-line: rgba(163, 174, 195, .14);
  --schedule-line-strong: rgba(163, 174, 195, .24);
  gap: 16px;
  padding: 18px 20px 42px;
  color: var(--text);
  background: #05070c;
}

.bf-roster-view svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bf-roster-view .eyebrow { color: var(--accent); font-size: 9px; font-weight: 900; letter-spacing: .13em; }

.scheduling-overhaul .scheduling-command-center {
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), .28);
  border-radius: 20px;
  background: radial-gradient(circle at 8% -30%, rgba(var(--accent-rgb), .17), transparent 38%), linear-gradient(150deg, #0d1017 0%, #07090e 72%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .28);
}

.scheduling-overhaul .scheduling-hero {
  min-height: 0;
  align-items: center;
  padding: 24px 26px 18px;
}
.scheduling-overhaul .scheduling-hero h2 { margin: 7px 0 0; font-size: clamp(22px, 2vw, 29px); font-weight: 760; line-height: 1.1; }
.scheduling-overhaul .scheduling-hero p { max-width: 680px; margin-top: 8px; font-size: 11px; line-height: 1.55; }
.scheduling-overhaul .scheduling-hero-actions { min-width: 300px; align-items: stretch; gap: 9px; }
.scheduling-shared-status { min-width: 0; padding: 8px 10px; border-radius: 11px; }
.scheduling-shared-status > span { width: 27px; height: 27px; border-radius: 8px; font-size: 14px; }
.scheduling-shared-status > div { gap: 3px; }
.scheduling-shared-status strong { font-size: 9px; }
.scheduling-shared-status small { font-size: 7px; }

.scheduling-overhaul .scheduling-date-stepper {
  align-self: flex-end;
  grid-template-columns: 36px 132px 36px;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--schedule-line-strong);
  border-radius: 13px;
  background: rgba(0, 0, 0, .25);
}
.scheduling-overhaul .scheduling-date-stepper > button,
.scheduling-overhaul .scheduling-date-stepper > label { height: 38px; }
.scheduling-overhaul .scheduling-date-stepper > button { border-color: var(--schedule-line); font-size: 21px; }
.scheduling-overhaul .scheduling-date-stepper > button svg { width: 21px; height: 21px; }

.scheduling-overhaul .scheduling-source-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 26px 18px; }
.scheduling-overhaul .scheduling-source-chip {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 82px;
  align-items: center;
  gap: 12px;
  padding: 14px 48px 14px 14px;
  border: 1px solid var(--schedule-line);
  border-radius: 14px;
  background: rgba(2, 4, 8, .42);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.scheduling-overhaul .scheduling-source-chip:hover { border-color: var(--schedule-line-strong); background: rgba(255, 255, 255, .034); transform: translateY(-1px); }
.scheduling-overhaul .source-icon { position: relative; display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; color: var(--muted-strong); background: rgba(255, 255, 255, .035); font-size: 18px; }
.scheduling-overhaul .scheduling-source-chip.ready .source-icon { color: var(--green); border-color: rgba(72, 216, 154, .18); background: rgba(72, 216, 154, .07); }
.scheduling-overhaul .scheduling-source-chip.checking .source-icon { color: var(--orange); border-color: rgba(255, 171, 94, .18); background: rgba(255, 171, 94, .07); }
.scheduling-overhaul .source-icon .source-dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border: 2px solid #090c12; border-radius: 50%; background: var(--danger); box-shadow: none; }
.scheduling-overhaul .scheduling-source-chip.ready .source-dot { background: var(--green); }
.scheduling-overhaul .scheduling-source-chip.checking .source-dot { background: var(--orange); }
.scheduling-overhaul .scheduling-source-chip > div { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.scheduling-overhaul .scheduling-source-chip > div > span { color: var(--green); font-size: 7px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.scheduling-overhaul .scheduling-source-chip.checking > div > span { color: var(--orange); }
.scheduling-overhaul .scheduling-source-chip.waiting > div > span { color: var(--danger); }
.scheduling-overhaul .scheduling-source-chip strong { color: var(--text); font-size: 11px; }
.scheduling-overhaul .scheduling-source-chip small { overflow: hidden; max-width: 100%; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.scheduling-overhaul .source-refresh { position: absolute; top: 50%; right: 12px; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted-strong); background: rgba(255, 255, 255, .035); transform: translateY(-50%); }

.scheduling-overhaul .sling-connection-panel { display: grid; min-height: 52px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 26px 14px; padding: 8px 11px; border: 1px solid var(--schedule-line); border-radius: 13px; background: rgba(0, 0, 0, .22); }
.scheduling-overhaul .sling-connection-icon { width: 31px; height: 31px; border-radius: 8px; color: #ffd0a5; background: rgba(255, 171, 94, .1); font-size: 16px; }
.scheduling-overhaul .slack-connection-panel .sling-connection-icon { color: #c6adff; background: rgba(166, 130, 255, .1); }
.scheduling-overhaul .sling-connection-copy { gap: 3px; }
.scheduling-overhaul .sling-connection-copy strong { font-size: 11px; }
.scheduling-overhaul .sling-connection-copy span { font-size: 8px; }
.scheduling-overhaul .sling-connection-actions button { min-height: 30px; padding: 0 12px; border-color: var(--line-strong); border-radius: 9px; background: rgba(255, 255, 255, .035); font-size: 9px; }
.scheduling-command-footer { min-height: 38px; padding: 0 26px; border-top: 1px solid var(--schedule-line); background: rgba(0, 0, 0, .22); font-size: 8px; }
.scheduling-command-footer strong { font-size: 10px; }
.scheduling-command-footer span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.scheduling-command-footer span svg { color: var(--green); font-size: 12px; }

.scheduling-overhaul .scheduling-progress-console { border-color: var(--schedule-line); border-radius: 16px; background: var(--schedule-surface); box-shadow: none; }
.scheduling-overhaul .scheduling-progress-console > header { min-height: 78px; padding: 15px 18px 13px; }
.scheduling-overhaul .scheduling-progress-title > span { width: 34px; height: 34px; border-radius: 10px; font-size: 18px; }
.scheduling-overhaul .scheduling-progress-title small { font-size: 8px; }
.scheduling-overhaul .scheduling-progress-title strong { font-size: 15px; }
.scheduling-overhaul .scheduling-progress-title p { display: none; }
.scheduling-overhaul .scheduling-progress-total > span { font-size: 15px; }
.scheduling-overhaul .scheduling-progress-total > span strong { font-size: 20px; }
.scheduling-overhaul .scheduling-progress-total small { font-size: 8px; }
.scheduling-overhaul .scheduling-progress-master { height: 5px; border: 0; border-radius: 0; background: #080b11; }
.scheduling-overhaul .scheduling-progress-master > span { border-radius: 0 999px 999px 0; background: linear-gradient(90deg, rgb(var(--accent-rgb)), #ff2d96 62%, #9f68ff); }
.scheduling-overhaul .scheduling-progress-stages article { min-height: 70px; padding: 12px 15px; border-right: 0; }
.scheduling-overhaul .scheduling-progress-stages article + article { border-left: 1px solid rgba(255, 255, 255, .07); }
.scheduling-overhaul .scheduling-progress-stage-icon { width: 28px; height: 28px; border-radius: 8px; font-size: 15px; }
.scheduling-overhaul .scheduling-progress-stage-copy strong { font-size: 10px; }
.scheduling-overhaul .scheduling-progress-stage-copy small { font-size: 8px; }
.scheduling-overhaul .scheduling-progress-stages article > b { font-size: 13px; }
.scheduling-overhaul .scheduling-progress-stage-track { right: 15px; bottom: 7px; left: 54px; }

.scheduling-overhaul .scheduling-kpi-grid { gap: 10px; }
.scheduling-overhaul .scheduling-kpi-grid article { min-height: 104px; align-items: flex-start; gap: 11px; padding: 17px; border-color: var(--schedule-line); border-radius: 15px; background: linear-gradient(150deg, rgba(255, 255, 255, .026), rgba(0, 0, 0, .18)); }
.scheduling-overhaul .scheduling-kpi-grid article > svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--accent); }
.scheduling-overhaul .scheduling-kpi-grid article.routes > svg { color: #77bfff; }
.scheduling-overhaul .scheduling-kpi-grid article.fleet > svg { color: #a68aff; }
.scheduling-overhaul .scheduling-kpi-grid article.extras > svg,
.scheduling-overhaul .scheduling-kpi-grid article.ready > svg { color: var(--green); }
.scheduling-overhaul .scheduling-kpi-grid small { font-size: 8px; letter-spacing: .04em; }
.scheduling-overhaul .scheduling-kpi-grid strong { margin-top: 4px; font-size: 31px; }
.scheduling-overhaul .scheduling-kpi-grid article > div > span { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.scheduling-overhaul .scheduling-analysis-grid { grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); align-items: stretch; gap: 14px; }
.scheduling-overhaul .capacity-panel,
.scheduling-overhaul .swap-panel,
.scheduling-overhaul .driver-plan-panel { border-color: var(--schedule-line); border-radius: 16px; background: var(--schedule-surface); box-shadow: none; }
.scheduling-overhaul .scheduling-panel-heading { min-height: 78px; padding: 17px 19px; border-bottom-color: var(--schedule-line); background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent); }
.scheduling-overhaul .scheduling-panel-heading h3 { margin-top: 6px; font-size: 16px; }
.scheduling-overhaul .scheduling-panel-heading > span { padding: 6px 9px; font-size: 9px; }
.scheduling-overhaul .capacity-table th { height: auto; padding: 12px 14px; background: rgba(255, 255, 255, .014); font-size: 7px; }
.scheduling-overhaul .capacity-table td { height: 76px; padding: 12px 14px; border-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: 9px; }
.scheduling-overhaul .capacity-table td:nth-child(2) strong { max-width: 350px; font-size: 10px; line-height: 1.35; }
.scheduling-overhaul .capacity-table td:nth-child(2) small { margin-top: 5px; font-size: 8px; }
.scheduling-overhaul .metric-value { font-size: 23px; }
.scheduling-overhaul .active-van-value { min-width: 42px; height: 31px; font-size: 23px; }
.scheduling-overhaul .difference-pill { min-width: 34px; height: 21px; font-size: 8px; }
.scheduling-overhaul .row-status { padding: 5px 8px; font-size: 8px; }
.scheduling-overhaul .swap-panel-body { min-height: 100%; }
.scheduling-overhaul .swap-empty { min-height: 180px; }

.scheduling-overhaul .driver-plan-heading { min-height: 92px; }
.scheduling-overhaul .driver-plan-heading p { margin-top: 6px; font-size: 9px; }
.scheduling-overhaul .driver-plan-heading-actions > span { padding: 7px 10px; font-size: 9px; }
.scheduling-overhaul .driver-plan-heading-actions button { min-height: 34px; padding: 0 12px; font-size: 8px; }
.scheduling-overhaul .roster-workbench { margin: 0 14px 12px; border-color: var(--schedule-line); border-radius: 14px; background: #070a0f; box-shadow: none; }
.scheduling-overhaul .roster-workbench-header { min-height: 96px; grid-template-columns: minmax(300px, 1.1fr) minmax(260px, .8fr) auto; gap: 18px; padding: 13px 15px; border-bottom-color: var(--schedule-line); background: linear-gradient(135deg, rgba(var(--accent-rgb), .06), transparent 40%); }
.scheduling-overhaul .roster-workbench-title > span { width: 42px; height: 42px; border-color: rgba(var(--accent-rgb), .18); border-radius: 11px; color: var(--accent); background: rgba(var(--accent-rgb), .07); font-size: 20px; }
.scheduling-overhaul .roster-workbench-title small { font-size: 8px; }
.scheduling-overhaul .roster-workbench-title strong { font-size: 15px; }
.scheduling-overhaul .roster-workbench-title p { max-width: 520px; margin-top: 3px; font-size: 9px; }
.scheduling-overhaul .roster-workbench-progress { gap: 8px; }
.scheduling-overhaul .roster-workbench-progress-copy { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.scheduling-overhaul .roster-workbench-progress-copy span { color: var(--accent); font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.scheduling-overhaul .roster-workbench-progress-copy strong { display: flex; align-items: baseline; gap: 4px; color: #fff; font-size: 15px; }
.scheduling-overhaul .roster-workbench-progress-copy strong i { position: static; display: inline; width: auto; height: auto; color: var(--accent); background: none; box-shadow: none; font-style: normal; transform: none; }
.scheduling-overhaul .roster-workbench-progress-copy strong small { margin-left: 4px; color: var(--accent); font-size: 8px; }
.scheduling-overhaul .roster-workbench-progress-track { width: 100%; height: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 999px; background: #11151d; box-shadow: none; }
.scheduling-overhaul .roster-workbench-progress-track > span { position: relative; display: block; width: 0; height: 100%; overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, rgb(var(--accent-rgb)), #a855f7); transition: width 340ms cubic-bezier(.2, .8, .2, 1); }
.scheduling-overhaul .roster-workbench-progress-track > span > i { position: absolute; top: 50%; right: 3px; display: block; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 9px #fff; transform: translateY(-50%); }
.scheduling-overhaul .roster-workbench-stats { border: 1px solid var(--schedule-line); border-radius: 10px; background: rgba(255, 255, 255, .018); }
.scheduling-overhaul .roster-workbench-stats article { min-width: 92px; padding: 10px 12px; }
.scheduling-overhaul .roster-workbench-stats strong { font-size: 16px; }
.scheduling-overhaul .roster-workbench-stats span { font-size: 8px; }
.scheduling-overhaul .roster-workbench-body { height: clamp(560px, 68vh, 720px); min-height: 0; grid-template-columns: 250px minmax(460px, 1fr) 278px; }
.scheduling-overhaul .roster-block-navigator,
.scheduling-overhaul .roster-driver-catalog { background: #090c12; }
.scheduling-overhaul .roster-block-navigator { border-right-color: var(--schedule-line); }
.scheduling-overhaul .roster-driver-catalog { border-left-color: var(--schedule-line); }
.scheduling-overhaul .roster-assignment-workspace { background: #070a0f; }
.scheduling-overhaul .roster-block-navigator > header { padding: 15px 13px 10px; }
.scheduling-overhaul .roster-block-navigator > header span { font-size: 8px; }
.scheduling-overhaul .roster-standby-nav { min-height: 68px; margin: 0 10px 9px; }
.scheduling-overhaul .roster-block-nav-list { gap: 8px; padding-block: 7px; }
.scheduling-overhaul .roster-wave-group > button { min-height: 53px; padding-block: 5px; }
.scheduling-overhaul .roster-wave-group > button strong { font-size: 9px; }
.scheduling-overhaul .roster-wave-group > button small { font-size: 7px; }
.scheduling-overhaul .roster-workspace-block-header { min-height: 94px; padding: 14px 16px; }
.scheduling-overhaul .roster-workspace-title > span { width: 42px; height: 42px; }
.scheduling-overhaul .roster-workspace-title h4 { font-size: 18px; }
.scheduling-overhaul .roster-workspace-title p { font-size: 8px; }
.scheduling-overhaul .roster-workspace-driver-section { padding: 16px; }
.scheduling-overhaul .roster-workspace-driver-section > header { padding-bottom: 11px; }
.scheduling-overhaul .roster-workspace-driver-section > header strong { font-size: 11px; }
.scheduling-overhaul .roster-workspace-driver-section > header small { font-size: 8px; }
.scheduling-overhaul .roster-driver-catalog > header { min-height: 72px; padding: 13px; }
.scheduling-overhaul .roster-driver-catalog > header strong { font-size: 11px; }
.scheduling-overhaul .roster-driver-catalog > label { margin: 10px 10px 7px; padding: 0 9px; }
.scheduling-overhaul .roster-driver-catalog > label svg { width: 15px; height: 15px; }
.scheduling-overhaul .roster-driver-catalog > label input { height: 37px; font-size: 9px; }
.scheduling-overhaul .roster-catalog-target { margin: 0 10px 9px; padding: 8px 9px; }
.scheduling-overhaul .roster-driver-catalog-list { padding: 0 10px 10px; }
.scheduling-overhaul .roster-driver-catalog-list > button { min-height: 48px; }
.scheduling-overhaul .driver-plan-summary { position: sticky; bottom: 10px; z-index: 6; min-height: 70px; margin: 0 10px 10px; padding: 13px; border: 1px solid var(--schedule-line-strong); border-radius: 12px; background: rgba(11, 14, 21, .96); box-shadow: 0 16px 36px rgba(0, 0, 0, .34); backdrop-filter: blur(16px); }
.scheduling-overhaul .driver-plan-summary p strong { font-size: 11px; }
.scheduling-overhaul .driver-plan-summary p small,
.scheduling-overhaul .driver-plan-summary > div:last-child > small { font-size: 9px; }

@media (max-width: 1480px) {
  .scheduling-overhaul .roster-workbench-body { height: auto; grid-template-columns: 220px minmax(400px, 1fr); }
  .scheduling-overhaul .roster-driver-catalog { height: clamp(360px, 55vh, 480px); min-height: 0; grid-column: 1 / -1; border-top: 1px solid var(--schedule-line); border-left: 0; }
}

@media (max-width: 1240px) {
  .scheduling-overhaul .scheduling-source-strip { grid-template-columns: 1fr; }
  .scheduling-overhaul .scheduling-progress-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scheduling-overhaul .scheduling-progress-stages article:nth-child(3) { border-top: 1px solid rgba(255, 255, 255, .07); border-left: 0; }
  .scheduling-overhaul .scheduling-progress-stages article:nth-child(4) { border-top: 1px solid rgba(255, 255, 255, .07); }
  .scheduling-overhaul .scheduling-analysis-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .owner-view.scheduling-page.bf-roster-view { padding: 12px 10px 28px; }
  .scheduling-overhaul .scheduling-source-strip { padding-inline: 14px; }
  .scheduling-overhaul .sling-connection-panel { margin-inline: 14px; }
  .scheduling-overhaul .scheduling-progress-stages { grid-template-columns: 1fr; }
  .scheduling-overhaul .scheduling-progress-stages article + article { border-top: 1px solid rgba(255, 255, 255, .07); border-left: 0; }
  .scheduling-overhaul .roster-workbench-header { grid-template-columns: 1fr; }
  .scheduling-overhaul .roster-workbench-body { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .bf-live-hero { padding: 20px 17px; }
  .bf-live-hero-status { display: grid; grid-template-columns: 1fr 1fr; }
  .bf-live-datebar { padding: 14px; }
  .bf-live-calendar-control { order: 2; flex-basis: calc(100% - 84px); }
  .bf-live-calendar { width: min(286px, calc(100vw - 56px)); }
  .bf-live-package-panel > header { align-items: flex-start; flex-direction: column; }
  .bf-live-package-grid article { padding: 13px; }
  .bf-live-package-grid article > strong { font-size: 20px; }
  .bf-live-command-header { padding-inline: 13px; }
  .bf-live-filterbar { padding-inline: 10px; }
  .bf-live-map-legend { right: 8px; bottom: 8px; left: 8px; justify-content: space-between; }
}

/* Live Operations visual refinement */
.bf-live-view {
  position: relative;
  padding-top: 22px;
}

#viewTitle {
  word-spacing: 0.08em;
}

.bf-live-view::before {
  position: absolute;
  z-index: -1;
  top: -130px;
  right: 4%;
  width: 520px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(101, 78, 244, 0.075), transparent 68%);
  content: "";
  pointer-events: none;
}

.bf-live-hero {
  min-height: 90px;
  padding: 14px 20px;
  border-color: rgba(145, 162, 214, 0.12);
  border-radius: 15px 15px 0 0;
  background:
    linear-gradient(105deg, rgba(72, 93, 205, 0.055), transparent 33%),
    radial-gradient(circle at 89% 4%, rgba(117, 83, 255, 0.13), transparent 27%),
    linear-gradient(145deg, rgba(14, 18, 35, 0.99), rgba(7, 10, 21, 0.98));
}

.bf-live-eyebrow,
.bf-live-package-panel header p,
.bf-live-command-header p,
.bf-live-map-panel > header p,
.bf-return-drawer header p {
  font-size: 8.5px;
}

.bf-live-hero h2 {
  font-size: clamp(28px, 2.3vw, 38px);
}

.bf-live-hero > div:first-child > p:last-child {
  max-width: 650px;
  margin-top: 6px;
  color: #8491aa;
  font-size: 10px;
}

.bf-live-hero-status {
  width: 330px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(145, 162, 214, 0.13);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(16, 21, 39, 0.7), rgba(5, 8, 17, 0.58));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
}

.bf-live-connection,
.bf-live-snapshot {
  min-width: 0;
  padding: 11px 15px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.bf-live-snapshot {
  border-left: 1px solid rgba(145, 162, 214, 0.1);
}

.bf-live-datebar .bf-live-connection,
.bf-live-datebar .bf-live-snapshot {
  padding: 8px 12px;
}

.bf-live-connection strong,
.bf-live-snapshot strong {
  font-size: 10px;
}

.bf-live-connection small,
.bf-live-snapshot small {
  font-size: 8px;
}

.bf-live-datebar {
  min-height: 56px;
  margin-top: 0;
  padding: 10px 14px 10px 20px;
  border-color: rgba(145, 162, 214, 0.12);
  border-radius: 13px;
  background: linear-gradient(90deg, rgba(11, 15, 29, 0.98), rgba(7, 10, 20, 0.97));
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.bf-live-date-copy > span {
  font-size: 7.5px;
}

.bf-live-date-copy > strong {
  font-size: 13px;
}

.bf-live-date-copy > small {
  font-size: 8.5px;
}

.bf-live-date-actions > button,
.bf-live-date-picker {
  min-height: 35px;
  font-size: 9px;
}

.bf-live-date-picker span {
  font-size: 7.5px;
}

.bf-live-date-picker strong {
  font-size: 12px;
}

.bf-live-date-actions .bf-live-date-picker {
  min-height: 44px;
}

.bf-live-package-panel {
  margin-top: 12px;
  padding-bottom: 10px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 12% 0%, rgba(75, 108, 231, 0.045), transparent 24%),
    linear-gradient(145deg, rgba(12, 16, 31, 0.98), rgba(7, 10, 20, 0.96));
}

.bf-live-package-panel > header {
  min-height: 53px;
  padding: 10px 15px 8px;
  border-bottom: 0;
}

.bf-live-package-panel header h3,
.bf-live-command-header h3,
.bf-live-map-panel > header h3 {
  font-size: 13px;
}

.bf-live-package-panel > header > span {
  font-size: 8px;
}

.bf-live-package-grid {
  gap: 8px;
  padding: 0 10px;
}

.bf-live-package-grid article,
.bf-live-package-grid article:last-child,
.bf-live-package-grid article:nth-child(3),
.bf-live-package-grid article:nth-child(-n + 4) {
  min-height: 83px;
  position: relative;
  overflow: hidden;
  padding: 13px 14px;
  border: 1px solid rgba(145, 162, 214, 0.09);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.018);
}

.bf-live-package-grid article::before {
  position: absolute;
  top: 0;
  right: 15%;
  left: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(102, 141, 255, 0.65), transparent);
  content: "";
}

.bf-live-package-grid article.progress {
  background: linear-gradient(145deg, rgba(60, 96, 210, 0.11), rgba(25, 35, 74, 0.025));
}

.bf-live-package-grid article.warning {
  background: linear-gradient(145deg, rgba(174, 116, 39, 0.07), rgba(56, 40, 19, 0.018));
}

.bf-live-package-grid article.warning::before {
  background: linear-gradient(90deg, transparent, rgba(242, 197, 108, 0.65), transparent);
}

.bf-live-package-grid article.risk {
  background: linear-gradient(145deg, rgba(178, 53, 78, 0.08), rgba(62, 23, 32, 0.018));
}

.bf-live-package-grid article.risk::before {
  background: linear-gradient(90deg, transparent, rgba(255, 103, 124, 0.72), transparent);
}

.bf-live-package-grid article.returned {
  background: linear-gradient(145deg, rgba(109, 70, 211, 0.1), rgba(42, 28, 77, 0.02));
}

.bf-live-package-grid article.returned::before {
  background: linear-gradient(90deg, transparent, rgba(174, 125, 255, 0.72), transparent);
}

.bf-live-package-grid article > span {
  min-height: 18px;
  color: #77849b;
  font-size: 8px;
}

.bf-live-package-grid article > strong {
  font-size: 25px;
}

.bf-live-package-grid article > small {
  font-size: 8px;
}

.bf-live-command-panel {
  margin-top: 12px;
  border-radius: 13px;
  background:
    radial-gradient(circle at 100% 0%, rgba(112, 78, 241, 0.045), transparent 24%),
    linear-gradient(145deg, rgba(11, 15, 29, 0.99), rgba(5, 8, 17, 0.98));
}

.bf-live-command-header {
  min-height: 70px;
  padding: 12px 15px;
}

.bf-live-command-header > div:first-child > span {
  color: #6b7890;
  font-size: 8px;
}

.bf-live-searches > label {
  min-width: 154px;
  height: 37px;
  border-color: rgba(145, 162, 214, 0.12);
  background: rgba(2, 5, 13, 0.46);
}

.bf-live-searches input,
.bf-live-searches select {
  font-size: 9px;
}

.bf-live-select > span {
  font-size: 6.5px;
}

.bf-live-filterbar {
  min-height: 49px;
}

.bf-live-filters button {
  min-height: 31px;
  padding-inline: 10px;
  font-size: 8.5px;
}

.bf-live-filters button > strong,
.bf-live-filter-actions > span {
  font-size: 7.5px;
}

.bf-live-summary-button {
  min-height: 33px;
  padding-inline: 12px;
  font-size: 8.5px;
}

.bf-live-workspace {
  min-height: 650px;
  grid-template-columns: minmax(350px, 36%) minmax(0, 1fr);
}

.bf-live-route-rail > header {
  min-height: 43px;
}

.bf-live-route-rail > header span {
  font-size: 8px;
}

.bf-live-route-rail > header small {
  font-size: 7.5px;
}

.bf-live-route-row {
  min-height: 98px;
  padding: 12px 14px 11px 17px;
}

.bf-live-route-row > span:nth-of-type(1) strong {
  font-size: 12px;
}

.bf-live-route-row > span:nth-of-type(1) small,
.bf-live-route-timing small,
.bf-live-route-footer {
  font-size: 8.5px;
}

.bf-live-route-row.selected {
  background:
    linear-gradient(90deg, rgba(65, 91, 204, 0.14), rgba(119, 70, 213, 0.05)),
    rgba(255, 255, 255, 0.008);
}

.bf-live-map-panel > header {
  min-height: 59px;
  padding-inline: 17px 13px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.01), transparent);
}

.bf-live-map-tools button {
  height: 31px;
}

.bf-live-map-tools button:first-child {
  font-size: 8px;
}

.bf-live-map-wrap,
.bf-live-map {
  min-height: 591px;
}

.bf-live-map-legend {
  padding: 9px 11px;
  border-color: rgba(143, 159, 207, 0.14);
  color: #8995a9;
  font-size: 7.5px;
}

.bf-live-map-empty > span {
  font-size: 9px;
}

.bf-live-map-empty strong {
  font-size: 11px;
}

.bf-live-map-empty p {
  font-size: 8px;
}

@media (max-width: 1300px) {
  .bf-live-package-grid article,
  .bf-live-package-grid article:nth-child(3),
  .bf-live-package-grid article:nth-child(-n + 4) {
    border: 1px solid rgba(145, 162, 214, 0.09);
  }
}

@media (max-width: 760px) {
  .bf-live-view { padding-top: 16px; }
  .bf-live-hero { border-radius: 13px 13px 0 0; }
  .bf-live-hero > div:first-child > p:last-child { font-size: 10px; }
  .bf-live-datebar { border-radius: 0 0 12px 12px; }
  .bf-live-package-grid { gap: 7px; padding: 0 8px; }
  .bf-live-package-grid article,
  .bf-live-package-grid article:nth-child(3),
  .bf-live-package-grid article:nth-child(-n + 4) {
    min-height: 94px;
    padding: 13px;
    border: 1px solid rgba(145, 162, 214, 0.09);
  }
  .bf-live-command-header { padding: 14px; }
  .bf-live-map-wrap,
  .bf-live-map { min-height: 460px; }
}

/* V3 dispatch console — map-first operations layout */
.dispatch-view {
  width: min(1580px, 100%);
  padding: 26px clamp(22px, 2.6vw, 42px) 48px;
}

.dispatch-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) minmax(190px, 230px);
  align-items: stretch;
  gap: 10px;
  margin-bottom: 10px;
}

.dispatch-heading-copy,
.dispatch-weather,
.dispatch-connector-card,
.dispatch-pulse,
.dispatch-kpi,
.dispatch-panel {
  border: 1px solid rgba(148, 163, 202, 0.105);
  background: rgba(10, 13, 23, 0.88);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.022), 0 14px 40px rgba(0, 0, 0, 0.12);
}

.dispatch-heading-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 21px 24px;
  border-radius: 13px 3px 3px 13px;
  background:
    radial-gradient(circle at 5% 20%, rgba(50, 105, 255, 0.08), transparent 34%),
    rgba(10, 13, 23, 0.88);
}

.dispatch-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #7693c5;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dispatch-eyebrow i,
.dispatch-map-status i,
.dispatch-map-feed i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #42d49a;
  box-shadow: 0 0 10px rgba(66, 212, 154, 0.6);
}

.dispatch-heading h2 {
  overflow: hidden;
  margin: 0;
  color: #f2f5fa;
  font-family: var(--display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  letter-spacing: -0.025em;
  line-height: 1.18;
  padding-bottom: 0.08em;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-spacing: 0.08em;
}

.dispatch-heading-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  color: #69758a;
  font-size: 9px;
}

.dispatch-heading-meta b {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #384357;
}

.dispatch-heading-meta strong {
  color: #9da7b8;
  font-weight: 600;
}

.dispatch-weather {
  min-width: 0;
  display: grid;
  grid-template-columns: 50px auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 7px 13px;
  padding: 15px 17px;
  border-radius: 3px;
  background:
    radial-gradient(circle at 14% 20%, rgba(72, 116, 245, 0.085), transparent 36%),
    rgba(10, 13, 23, 0.9);
}

.dispatch-weather-icon {
  width: 50px;
  height: 50px;
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border: 1px solid rgba(104, 137, 222, 0.16);
  border-radius: 12px;
  background: rgba(57, 97, 200, 0.065);
  color: #82a8fa;
}

.dispatch-weather-icon.sun { color: #f4c871; }
.dispatch-weather-icon.rain { color: #66c7ed; }
.dispatch-weather-icon.snow { color: #d8eafa; }
.dispatch-weather-icon.storm { color: #a982f7; }
.dispatch-weather-icon.fog { color: #9ba7b9; }

.dispatch-weather-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.dispatch-weather-now {
  align-self: end;
}

.dispatch-weather-now strong,
.dispatch-weather-now span,
.dispatch-weather-place span,
.dispatch-weather-place small {
  display: block;
}

.dispatch-weather-now strong {
  color: #f4f6fa;
  font-family: var(--display);
  font-size: 27px;
  letter-spacing: -0.055em;
  line-height: 1;
}

.dispatch-weather-now span {
  margin-top: 3px;
  color: #778399;
  font-size: 8px;
}

.dispatch-weather-place {
  min-width: 0;
  align-self: end;
  padding-left: 12px;
  border-left: 1px solid rgba(143, 159, 203, 0.09);
}

.dispatch-weather-place span {
  overflow: hidden;
  color: #9aa5b6;
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-weather-place small {
  overflow: hidden;
  margin-top: 4px;
  color: #566278;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-weather-details {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 9px;
  align-self: start;
}

.dispatch-weather-details span {
  color: #526078;
  font-size: 7px;
  white-space: nowrap;
}

.dispatch-weather-details strong {
  color: #8995a8;
  font-weight: 600;
}

.dispatch-pulse {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 3px 13px 13px 3px;
}

.dispatch-pulse > i {
  position: relative;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border: 1px solid rgba(66, 212, 154, 0.18);
  border-radius: 50%;
  background: rgba(66, 212, 154, 0.04);
}

.dispatch-pulse > i::before,
.dispatch-pulse > i::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.dispatch-pulse > i::before {
  width: 6px;
  height: 6px;
  background: #42d49a;
  box-shadow: 0 0 10px rgba(66, 212, 154, 0.7);
}

.dispatch-pulse > i::after {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(66, 212, 154, 0.15);
}

.dispatch-pulse small,
.dispatch-pulse strong {
  display: block;
}

.dispatch-pulse small {
  color: #59667b;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.dispatch-pulse strong {
  overflow: hidden;
  margin-top: 6px;
  color: #aab4c3;
  font-size: 9px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-pulse.has-risk > i {
  border-color: rgba(255, 104, 115, 0.22);
  background: rgba(255, 104, 115, 0.045);
}

.dispatch-pulse.has-risk > i::before {
  background: #ff6873;
  box-shadow: 0 0 10px rgba(255, 104, 115, 0.68);
}

.dispatch-pulse.has-risk > i::after { border-color: rgba(255, 104, 115, 0.17); }
.dispatch-pulse.has-risk strong { color: #dca8ae; }
.dispatch-pulse.waiting > i::before { background: #6b778c; box-shadow: none; }

.dispatch-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.dispatch-kpi {
  position: relative;
  min-width: 0;
  min-height: 143px;
  overflow: hidden;
  padding: 16px;
  border-radius: 10px;
  transition: border-color 160ms ease, background 160ms ease;
}

.dispatch-kpi::before {
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(126, 150, 229, 0.18), transparent);
  content: "";
}

.dispatch-kpi:hover {
  border-color: rgba(130, 150, 208, 0.17);
  background: rgba(12, 16, 28, 0.94);
}

.dispatch-kpi:has(.dispatch-kpi-status i.risk) {
  border-color: rgba(255, 103, 114, 0.2);
  background: linear-gradient(145deg, rgba(24, 15, 24, 0.94), rgba(11, 12, 21, 0.92));
}

.dispatch-kpi-top,
.dispatch-kpi-status,
.dispatch-kpi-foot {
  display: flex;
  align-items: center;
}

.dispatch-kpi-top {
  justify-content: space-between;
  gap: 10px;
  color: #71809a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dispatch-kpi-top i,
.dispatch-kpi-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.dispatch-kpi-top i.blue { background: #668dff; box-shadow: 0 0 10px rgba(102, 141, 255, 0.55); }
.dispatch-kpi-top i.violet { background: #a071ff; box-shadow: 0 0 10px rgba(160, 113, 255, 0.5); }
.dispatch-kpi-top i.cyan { background: #51cfe2; box-shadow: 0 0 10px rgba(81, 207, 226, 0.5); }
.dispatch-kpi-top i.amber { background: #ebb35f; box-shadow: 0 0 10px rgba(235, 179, 95, 0.5); }

.dispatch-kpi-value {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 20px;
}

.dispatch-kpi-value strong {
  color: #f1f3f8;
  font-family: var(--display);
  font-size: clamp(1.75rem, 2.35vw, 2.35rem);
  letter-spacing: -0.06em;
  line-height: 1;
}

.dispatch-kpi-value small {
  color: #5d697f;
  font-size: 7px;
  line-height: 1.4;
}

.dispatch-kpi-value small b {
  color: #909bad;
  font-weight: 600;
}

.dispatch-kpi-status {
  justify-content: space-between;
  gap: 8px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(143, 159, 203, 0.075);
  color: #58657a;
  font-size: 7px;
}

.dispatch-kpi-status span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-kpi-status i.healthy { background: #42d49a; box-shadow: 0 0 8px rgba(66, 212, 154, 0.5); }
.dispatch-kpi-status i.risk { background: #ff6873; box-shadow: 0 0 8px rgba(255, 104, 115, 0.58); }
.dispatch-kpi-status i.warning { background: #ebb35f; box-shadow: 0 0 8px rgba(235, 179, 95, 0.5); }
.dispatch-kpi-status i.neutral { background: #546177; }

.dispatch-progress {
  height: 4px;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(132, 148, 189, 0.08);
}

.dispatch-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4b85ff, #9a64ff);
  box-shadow: 0 0 12px rgba(92, 101, 255, 0.4);
  transition: width 500ms ease;
}

.dispatch-kpi-foot {
  gap: 3px;
  margin-top: 9px;
  color: #526078;
  font-size: 7px;
}

.dispatch-kpi-foot span { color: #8d98aa; }
.dispatch-kpi-foot b { display: none; }
.dispatch-kpi-foot em {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-left: auto;
  color: #79859a;
  font-style: normal;
  white-space: nowrap;
}

.dispatch-kpi-foot em strong {
  color: #d8deeb;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: -0.03em;
}

.dispatch-kpi-foot .dispatch-remaining-percent { display: none; }

.dispatch-compliant {
  position: absolute;
  top: 45px;
  right: 15px;
  color: #59667c;
  font-size: 7px;
}

.dispatch-compliant b {
  color: #9ba6b7;
  font-size: 9px;
}

.dispatch-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.78fr) minmax(330px, 0.72fr);
  gap: 10px;
}

.dispatch-panel {
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
}

.dispatch-panel-heading {
  min-height: 69px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 17px;
  border-bottom: 1px solid rgba(148, 163, 202, 0.09);
  background: rgba(10, 13, 22, 0.94);
}

.dispatch-panel-heading p,
.dispatch-panel-heading h3 {
  margin: 0;
}

.dispatch-panel-heading p {
  margin-bottom: 6px;
  color: #5d6a81;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dispatch-panel-heading h3 {
  color: #e8ebf1;
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: -0.025em;
}

.dispatch-map-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #667389;
  font-size: 8px;
}

.dispatch-map-wrap {
  position: relative;
  height: 525px;
  overflow: hidden;
  background: #080b12;
}

.dispatch-map {
  position: absolute;
  inset: 0;
}

.dispatch-map::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(107, 125, 177, 0.055);
  box-shadow: inset 0 0 80px rgba(4, 6, 12, 0.38);
  content: "";
  pointer-events: none;
}

.dispatch-map .dispatch-dark-tile {
  filter: invert(0.9) hue-rotate(180deg) saturate(0.48) contrast(1.08) brightness(0.68);
}

.dispatch-map .dispatch-streets-tile {
  filter: saturate(0.72) contrast(1.05) brightness(0.78);
}

.dispatch-map .dispatch-satellite-tile {
  filter: saturate(0.84) contrast(1.09) brightness(0.82);
}

.dispatch-map .dispatch-terrain-tile {
  filter: saturate(0.74) contrast(1.05) brightness(0.8);
}

.dispatch-map.leaflet-container {
  background: #080b12;
  font-family: var(--sans);
}

.dispatch-map .leaflet-top.leaflet-right {
  top: 9px;
  right: 9px;
}

.dispatch-map .leaflet-bar {
  overflow: hidden;
  border: 1px solid rgba(143, 159, 203, 0.14);
  border-radius: 8px;
  background: rgba(9, 12, 21, 0.88);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.dispatch-map .leaflet-bar a {
  width: 30px;
  height: 30px;
  border: 0;
  background: rgba(9, 12, 21, 0.88);
  color: #9ca7b8;
  font: 18px/30px var(--sans);
}

.dispatch-map .leaflet-bar a + a {
  border-top: 1px solid rgba(143, 159, 203, 0.1);
}

.dispatch-map .leaflet-bar a:hover,
.dispatch-map .leaflet-bar a:focus {
  background: #111625;
  color: #fff;
}

.dispatch-map-controls {
  position: relative;
  margin: 0;
}

.dispatch-map-toolbar,
.dispatch-map-style-menu {
  border: 1px solid rgba(143, 159, 203, 0.16);
  background: rgba(7, 10, 18, 0.92);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.dispatch-map-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: max-content;
  margin-left: auto;
  overflow: hidden;
  border-radius: 10px;
}

.dispatch-map-control-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 35px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid rgba(143, 159, 203, 0.1);
  background: transparent;
  color: #7f8ba0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.dispatch-map-control-button:first-child { border-left: 0; }
.dispatch-map-control-button.focus { padding: 0 12px; font-size: 8px; }
.dispatch-map-control-button.compact { padding: 0; }

.dispatch-map-control-button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #8f9fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.dispatch-map-control-button:hover,
.dispatch-map-control-button:focus-visible,
.dispatch-map-control-button.active {
  outline: 0;
  background: rgba(100, 116, 198, 0.12);
  color: #fff;
}

.dispatch-map-style-menu {
  width: 208px;
  margin-top: 7px;
  margin-left: auto;
  padding: 10px;
  border-radius: 11px;
}

.dispatch-map-style-menu[hidden] { display: none; }

.dispatch-map-style-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 2px 9px;
}

.dispatch-map-style-heading span {
  color: #8d98aa;
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dispatch-map-style-heading small {
  color: #657189;
  font-size: 7px;
}

.dispatch-map-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.dispatch-map-style-option {
  position: relative;
  display: grid;
  grid-template-columns: 25px 1fr;
  align-items: center;
  gap: 7px;
  min-height: 45px;
  padding: 7px;
  border: 1px solid rgba(143, 159, 203, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  color: #8792a5;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.dispatch-map-style-option:hover,
.dispatch-map-style-option:focus-visible {
  outline: 0;
  border-color: rgba(128, 147, 235, 0.28);
  background: rgba(90, 107, 185, 0.07);
  color: #eef1f9;
}

.dispatch-map-style-option.active {
  border-color: rgba(133, 112, 255, 0.42);
  background: linear-gradient(135deg, rgba(73, 98, 202, 0.14), rgba(118, 75, 204, 0.12));
  color: #f6f7ff;
}

.dispatch-map-style-option strong {
  overflow: hidden;
  font-size: 8px;
  font-weight: 690;
  text-align: left;
  text-overflow: ellipsis;
}

.dispatch-map-style-option i {
  position: absolute;
  top: 5px;
  right: 6px;
  color: #9d87ff;
  font-size: 7px;
  font-style: normal;
  opacity: 0;
}

.dispatch-map-style-option.active i { opacity: 1; }

.dispatch-map-style-swatch {
  width: 25px;
  height: 25px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.22);
}

.dispatch-map-style-swatch.dark { background: linear-gradient(145deg, #0d1423 25%, #29354e 26% 34%, #111929 35% 60%, #563f73 61% 67%, #111827 68%); }
.dispatch-map-style-swatch.streets { background: linear-gradient(145deg, #9eb28e 20%, #d8d0ae 21% 42%, #7095ad 43% 50%, #e2d7b8 51% 72%, #9a8d77 73%); }
.dispatch-map-style-swatch.satellite { background: radial-gradient(circle at 68% 30%, #7b9162 0 18%, transparent 19%), linear-gradient(140deg, #33452e 0 30%, #7b6751 31% 47%, #243928 48% 70%, #626d3d 71%); }
.dispatch-map-style-swatch.terrain { background: repeating-radial-gradient(ellipse at 70% 30%, #a0a476 0 2px, #6f7f5b 3px 5px, #ad9770 6px 8px); }

.dispatch-map .leaflet-control-attribution {
  background: rgba(6, 8, 14, 0.75);
  color: #5c687a;
  font-size: 7px;
}

.dispatch-map .leaflet-control-attribution a { color: #78859a; }

.dispatch-leaflet-icon {
  border: 0;
  background: transparent;
}

.dispatch-map-legend,
.dispatch-map-feed {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  border: 1px solid rgba(143, 159, 203, 0.12);
  background: rgba(7, 10, 18, 0.84);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(15px);
}

.dispatch-map-legend {
  right: 12px;
  bottom: 12px;
  gap: 15px;
  padding: 9px 11px;
  border-radius: 8px;
}

.dispatch-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #737f92;
  font-size: 7px;
}

.dispatch-map-legend i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.dispatch-map-legend i.route { background: #6390ff; box-shadow: 0 0 8px rgba(99, 144, 255, 0.55); }
.dispatch-map-legend i.risk { background: #ff6873; box-shadow: 0 0 8px rgba(255, 104, 115, 0.55); }
.dispatch-map-legend i.station { border: 1px solid #9b72ff; background: #312360; }

.dispatch-map-feed {
  top: 12px;
  left: 12px;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 8px;
  color: #8490a3;
  font-size: 8px;
}

.dispatch-station-marker {
  position: relative;
  width: 50px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #e7f0f8;
  box-shadow: 0 0 0 2px rgba(33, 69, 102, 0.22), 0 3px 10px rgba(31, 52, 72, 0.22);
  color: #183654;
  font-size: 8px;
  letter-spacing: 0.055em;
  font-weight: 800;
}

.dispatch-station-marker i {
  display: none;
}

.dispatch-route-marker {
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid rgba(122, 157, 255, 0.52);
  border-radius: 7px;
  background: rgba(31, 60, 132, 0.92);
  box-shadow: 0 0 0 5px rgba(83, 128, 255, 0.09), 0 6px 18px rgba(3, 8, 20, 0.55);
  color: #dbe5ff;
  cursor: pointer;
  font-size: 7px;
  font-weight: 700;
}

.dispatch-route-marker.at-risk {
  border-color: rgba(255, 111, 121, 0.7);
  background: rgba(137, 37, 51, 0.94);
  box-shadow: 0 0 0 5px rgba(255, 84, 99, 0.1), 0 0 20px rgba(255, 84, 99, 0.32);
  color: #fff;
}

.dispatch-leaflet-icon.route-focus .dispatch-route-marker {
  animation: dispatch-route-focus 900ms ease-out;
}

@keyframes dispatch-route-focus {
  0% { transform: scale(1); }
  35% { transform: scale(1.28); box-shadow: 0 0 0 9px rgba(110, 145, 255, 0.13), 0 0 24px rgba(88, 129, 255, 0.48); }
  100% { transform: scale(1); }
}

.dispatch-map .leaflet-popup-content-wrapper {
  padding: 11px 12px;
  border: 1px solid rgba(143, 159, 203, 0.14);
  border-radius: 9px;
  background: rgba(9, 12, 21, 0.97);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
  color: #dbe0e9;
}

.dispatch-map .leaflet-popup-content {
  margin: 0;
}

.dispatch-map .leaflet-popup-tip {
  background: rgba(9, 12, 21, 0.97);
  box-shadow: none;
}

.dispatch-map-popup strong,
.dispatch-map-popup span,
.dispatch-map-popup small {
  display: block;
}

.dispatch-map-popup strong { font-size: 10px; }
.dispatch-map-popup span { margin-top: 4px; color: #909bad; font-size: 8px; }
.dispatch-map-popup small { max-width: 190px; margin-top: 7px; color: #69758a; font-size: 7px; line-height: 1.5; }

.dispatch-risk-panel {
  display: flex;
  flex-direction: column;
  height: 595px;
}

.dispatch-risk-count {
  min-width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 104, 115, 0.2);
  border-radius: 9px;
  background: rgba(255, 104, 115, 0.055);
  color: #e9a1a8;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
}

.dispatch-risk-summary {
  min-height: 41px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 17px;
  border-bottom: 1px solid rgba(143, 159, 203, 0.07);
  background: rgba(7, 10, 18, 0.42);
}

.dispatch-risk-summary span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #6d798e;
  font-size: 7px;
}

.dispatch-risk-summary span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff6873;
  box-shadow: 0 0 8px rgba(255, 104, 115, 0.55);
}

.dispatch-risk-summary small {
  color: #4f5b70;
  font-size: 7px;
}

.dispatch-risk-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 132, 181, 0.2) transparent;
}

.dispatch-risk-empty {
  min-height: 100%;
  display: grid;
  justify-items: center;
  align-content: center;
  padding: 32px 24px;
  text-align: center;
}

.dispatch-risk-empty > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid rgba(125, 145, 204, 0.13);
  border-radius: 12px;
  background: rgba(80, 103, 175, 0.045);
  color: #7182a6;
}

.dispatch-risk-empty svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.dispatch-risk-empty strong {
  color: #a9b2c1;
  font-size: 10px;
  font-weight: 600;
}

.dispatch-risk-empty p {
  max-width: 230px;
  margin: 8px 0 0;
  color: #536078;
  font-size: 8px;
  line-height: 1.6;
}

.dispatch-route-risk {
  margin-bottom: 8px;
  padding: 13px;
  border: 1px solid rgba(143, 159, 203, 0.1);
  border-left: 2px solid #e4a858;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.018);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, transform 150ms ease;
}

.dispatch-route-risk:hover,
.dispatch-route-risk:focus-visible {
  border-color: rgba(132, 153, 218, 0.24);
  background: rgba(100, 125, 208, 0.04);
  outline: 0;
  transform: translateX(-2px);
}

.dispatch-route-risk.critical {
  border-color: rgba(255, 104, 115, 0.18);
  border-left-color: #ff6873;
  background: rgba(255, 75, 90, 0.032);
}

.dispatch-route-risk-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dispatch-route-risk-top strong { color: #dfe3ea; font-size: 10px; }
.dispatch-route-risk-top span { padding: 4px 6px; border-radius: 5px; background: rgba(235, 179, 95, 0.07); color: #c99754; font-size: 6px; font-weight: 700; text-transform: uppercase; }
.dispatch-route-risk.critical .dispatch-route-risk-top span { background: rgba(255, 104, 115, 0.07); color: #e98d96; }

.dispatch-route-driver { margin: 6px 0 0; color: #7d889b; font-size: 8px; }
.dispatch-route-reason { margin-top: 10px; padding: 8px 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.018); color: #667389; font-size: 7px; line-height: 1.45; }
.dispatch-route-details { display: flex; gap: 15px; margin-top: 11px; }
.dispatch-route-details span { min-width: 0; }
.dispatch-route-details small, .dispatch-route-details strong { display: block; }
.dispatch-route-details small { color: #49566b; font-size: 6px; text-transform: uppercase; }
.dispatch-route-details strong { margin-top: 4px; color: #8490a3; font-size: 7px; font-weight: 600; }

.dispatch-risk-footer {
  min-height: 41px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border-top: 1px solid rgba(143, 159, 203, 0.075);
  color: #566278;
  font-size: 7px;
}

.dispatch-risk-footer span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-risk-footer small { flex: 0 0 auto; color: #455167; font-size: 7px; }

.dispatch-data-note {
  margin: 14px 2px 0;
  color: #404c60;
  font-size: 7px;
  text-align: right;
}

@media (max-width: 1330px) {
  .dispatch-heading {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  }

  .dispatch-pulse,
  .dispatch-connector-card {
    grid-column: 1 / -1;
    min-height: 48px;
    border-radius: 4px 4px 11px 11px;
  }

  .dispatch-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dispatch-kpi {
    min-height: 132px;
  }
}

@media (max-width: 980px) {
  .dispatch-command-grid {
    grid-template-columns: 1fr;
  }

  .dispatch-risk-panel {
    height: 500px;
  }
}

@media (max-width: 760px) {
  .dispatch-view {
    padding: 16px 13px 42px;
  }

  .dispatch-heading {
    grid-template-columns: 1fr;
  }

  .dispatch-heading-copy,
  .dispatch-weather,
  .dispatch-connector-card,
  .dispatch-pulse {
    border-radius: 11px;
  }

  .dispatch-heading h2 {
    white-space: normal;
  }

  .dispatch-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dispatch-kpi {
    min-height: 139px;
  }

  .dispatch-map-wrap {
    height: 430px;
  }

  .dispatch-map-legend {
    right: 10px;
    bottom: 10px;
    left: 10px;
    justify-content: space-between;
  }

  .dispatch-risk-panel {
    height: 470px;
  }

  .dispatch-data-note {
    text-align: left;
    line-height: 1.6;
  }
}

@media (max-width: 430px) {
  .dispatch-weather {
    grid-template-columns: 50px 1fr;
  }

  .dispatch-weather-place {
    padding-left: 0;
    border-left: 0;
  }

  .dispatch-weather-details {
    grid-column: 1 / -1;
    margin-top: 7px;
  }

  .dispatch-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .dispatch-kpi {
    padding: 14px;
  }

  .dispatch-kpi-value {
    display: block;
  }

  .dispatch-kpi-value small {
    display: block;
    margin-top: 5px;
  }

  .dispatch-map-feed {
    max-width: calc(100% - 188px);
  }

  .dispatch-map-style-menu { width: 198px; }

  .dispatch-map-feed span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Live Operations date command — matched to the compact reference control. */
.bf-live-date-actions {
  flex: 0 0 auto;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(122, 139, 184, 0.22);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(15, 21, 37, 0.98), rgba(9, 13, 24, 0.98));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 12px 28px rgba(0, 0, 0, 0.16);
}

.bf-live-date-actions > button,
.bf-live-date-actions .bf-live-date-picker {
  min-height: 36px;
  border-color: rgba(120, 138, 184, 0.22);
  border-radius: 9px;
  background: rgba(4, 8, 17, 0.6);
}

.bf-live-date-actions > button:first-child,
.bf-live-date-actions > button:first-child:hover,
.bf-live-date-actions > button:first-child:focus-visible,
.bf-live-date-actions > button:first-child.active {
  flex: 0 0 auto;
  padding-inline: 16px;
  border-color: rgba(244, 57, 151, 0.58);
  background: linear-gradient(145deg, rgba(104, 18, 65, 0.54), rgba(51, 10, 38, 0.52));
  color: #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.055), 0 0 20px rgba(223, 35, 134, 0.06);
}

.bf-live-date-actions > .bf-live-date-arrow {
  flex: 0 0 36px;
  width: 36px;
  color: #a8b2c8;
  font-size: 24px;
}

.bf-live-date-actions > .bf-live-date-arrow:hover,
.bf-live-date-actions > .bf-live-date-arrow:focus-visible {
  border-color: rgba(142, 159, 207, 0.36);
  background: rgba(18, 25, 42, 0.88);
  color: #f2f5fb;
}

.bf-live-date-actions .bf-live-calendar-control {
  flex: 0 0 126px;
  min-width: 126px;
  order: initial;
}

.bf-live-date-actions .bf-live-date-picker {
  min-width: 126px;
  min-height: 36px;
  gap: 0;
  padding-inline: 14px;
}

.bf-live-date-actions .bf-live-date-picker span {
  color: #8ca9ff;
  font-size: 7px;
  letter-spacing: 0.12em;
}

.bf-live-date-actions .bf-live-date-picker strong {
  color: #ffffff;
  font-size: 10.5px;
  line-height: 1.05;
}

@media (max-width: 760px) {
  .bf-live-date-actions {
    width: 100%;
    flex-wrap: nowrap;
  }

  .bf-live-date-actions .bf-live-calendar-control {
    flex: 1 1 auto;
    min-width: 0;
    flex-basis: auto;
  }

  .bf-live-date-actions .bf-live-date-picker {
    min-width: 0;
  }
}

/* Let Live Operations use the full workspace at every desktop width. */
.owner-view.bf-live-view {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(16px, 1.25vw, 24px);
}

@media (max-width: 760px) {
  .owner-view.bf-live-view {
    padding-inline: 13px;
  }
}

/* BeyondFantastic custom route sort menu. */
.bf-live-searches > .bf-live-select {
  position: relative;
  min-width: 154px;
  height: 37px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 0;
  padding: 5px 11px 4px;
  overflow: visible;
  border: 1px solid rgba(139, 154, 211, 0.22);
  border-radius: 8px;
  background: rgba(11, 15, 29, 0.9);
}

.bf-live-searches > .bf-live-select.open,
.bf-live-searches > .bf-live-select:focus-within {
  border-color: rgba(139, 116, 255, 0.46);
  box-shadow: 0 0 0 3px rgba(92, 72, 226, 0.09), 0 0 22px rgba(99, 72, 226, 0.08);
}

.bf-live-select-label {
  color: #8d9bb6;
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  line-height: 1;
  text-transform: uppercase;
}

.bf-live-select-trigger {
  width: 100%;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #f4f6fc;
  cursor: pointer;
  text-align: left;
}

.bf-live-select-trigger strong {
  overflow: hidden;
  font-size: 9px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-live-select-trigger svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: #c8d0e2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 160ms ease;
}

.bf-live-select.open .bf-live-select-trigger svg {
  transform: rotate(180deg);
}

.bf-live-select-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 7px);
  left: 50%;
  right: auto;
  width: max(100%, 166px);
  padding: 6px;
  overflow: hidden;
  border: 1px solid rgba(140, 155, 211, 0.22);
  border-radius: 10px;
  background:
    radial-gradient(circle at 100% 0%, rgba(117, 73, 231, 0.17), transparent 48%),
    linear-gradient(155deg, rgba(13, 17, 33, 0.995), rgba(6, 8, 17, 0.995));
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.52), inset 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.bf-live-select-menu[hidden] {
  display: none;
}

.bf-live-select-menu > button {
  width: 100%;
  min-height: 33px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  outline: 0;
  background: transparent;
  color: #aeb8cb;
  cursor: pointer;
  font-size: 9px;
  font-weight: 650;
  text-align: left;
}

.bf-live-select-menu > button:hover,
.bf-live-select-menu > button:focus-visible {
  border-color: rgba(126, 111, 229, 0.2);
  background: rgba(91, 72, 190, 0.13);
  color: #ffffff;
}

.bf-live-select-menu > button[aria-selected="true"] {
  border-color: rgba(242, 61, 154, 0.34);
  background: linear-gradient(100deg, rgba(120, 23, 75, 0.55), rgba(77, 42, 154, 0.38));
  color: #ffffff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.045), 0 0 20px rgba(224, 44, 139, 0.06);
}

.bf-live-select-menu > button i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: transparent;
}

.bf-live-select-menu > button[aria-selected="true"] i {
  background: #f05aa8;
  box-shadow: 0 0 10px rgba(240, 90, 168, 0.7);
}

.bf-live-command-panel {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.bf-live-command-header {
  position: relative;
  z-index: 1000;
  overflow: visible;
}

.bf-live-filterbar {
  position: relative;
  z-index: 1;
}

.bf-live-workspace {
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 0 0 13px 13px;
}

/* Keep the main dashboard fluid across browser zoom and viewport changes. */
.owner-view.owner-overview-view.dispatch-view {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: clamp(16px, 1.25vw, 24px);
}

@media (max-width: 760px) {
  .owner-view.owner-overview-view.dispatch-view {
    padding-inline: 13px;
  }
}

/* Flat dashboard header and useful feed-health summary. */
.dispatch-heading-copy,
.dispatch-weather,
.dispatch-feed-health {
  box-shadow: none;
}

.dispatch-weather {
  background: rgba(10, 13, 23, 0.9);
}

.dispatch-weather-icon {
  background: rgba(15, 20, 34, 0.72);
  box-shadow: none;
}

.dispatch-feed-health {
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: stretch;
  gap: 11px;
  padding: 13px 14px;
  background: rgba(10, 13, 23, 0.9);
}

.dispatch-health-heading {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dispatch-health-heading > span {
  color: #66738a;
  font-size: 6.5px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.dispatch-health-heading > strong {
  overflow: hidden;
  color: #b9c2d1;
  font-size: 8.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-feed-health.has-risk .dispatch-health-heading > strong {
  color: #dfadb5;
}

.dispatch-health-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.dispatch-health-item {
  min-width: 0;
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 7px 6px;
  border: 1px solid rgba(145, 161, 202, 0.08);
  border-radius: 7px;
  background: rgba(4, 7, 14, 0.34);
}

.dispatch-health-item > i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #69758a;
}

.dispatch-health-item span,
.dispatch-health-item small,
.dispatch-health-item strong {
  min-width: 0;
  display: block;
}

.dispatch-health-item small {
  color: #58657a;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dispatch-health-item strong {
  overflow: hidden;
  margin-top: 3px;
  color: #929caf;
  font-size: 7.5px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-health-item.healthy > i { background: #45d7a0; }
.dispatch-health-item.risk > i { background: #ff6d78; }
.dispatch-health-item.offline > i { background: #ffb45e; }
.dispatch-health-item.waiting > i { background: #69758a; }

@media (max-width: 1330px) {
  .dispatch-feed-health {
    grid-template-columns: minmax(180px, 0.5fr) minmax(0, 1.5fr);
    grid-template-rows: 1fr;
    align-items: center;
  }
}

@media (max-width: 560px) {
  .dispatch-feed-health {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
}

/* Condition-aware weather card without luminous glow effects. */
.dispatch-weather {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color 260ms ease, border-color 260ms ease;
}

.dispatch-weather > * {
  position: relative;
  z-index: 2;
}

.dispatch-weather::before,
.dispatch-weather::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

.dispatch-weather.weather-sun {
  border-color: rgba(216, 170, 76, 0.18);
  background: linear-gradient(125deg, rgba(53, 38, 16, 0.46), rgba(10, 13, 23, 0.94) 66%);
}

.dispatch-weather.weather-sun::before {
  top: -38px;
  right: -28px;
  width: 118px;
  height: 118px;
  border: 1px solid rgba(238, 194, 91, 0.18);
  border-radius: 50%;
  background: rgba(221, 171, 62, 0.08);
}

.dispatch-weather.weather-sun::after {
  top: -54px;
  right: -44px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(239, 194, 91, 0.11) 0 5deg, transparent 5deg 25deg);
  animation: dispatch-weather-spin 24s linear infinite;
}

.dispatch-weather.weather-cloud,
.dispatch-weather.weather-partly {
  border-color: rgba(129, 151, 189, 0.16);
  background: linear-gradient(125deg, rgba(28, 38, 57, 0.46), rgba(10, 13, 23, 0.95) 70%);
}

.dispatch-weather.weather-partly {
  background: linear-gradient(125deg, rgba(61, 49, 27, 0.38), rgba(26, 36, 55, 0.42) 48%, rgba(10, 13, 23, 0.95));
}

.dispatch-weather.weather-cloud::after,
.dispatch-weather.weather-partly::after {
  top: 18px;
  right: -18px;
  width: 84px;
  height: 25px;
  border-radius: 999px;
  background: rgba(151, 169, 200, 0.11);
  box-shadow: -48px 22px 0 rgba(124, 144, 178, 0.075), 18px 42px 0 rgba(124, 144, 178, 0.06);
  animation: dispatch-weather-drift 8s ease-in-out infinite alternate;
}

.dispatch-weather.weather-rain {
  border-color: rgba(83, 167, 220, 0.18);
  background: linear-gradient(125deg, rgba(19, 45, 66, 0.52), rgba(9, 13, 23, 0.96) 72%);
}

.dispatch-weather.weather-rain::after {
  inset: -45px -25px;
  background: repeating-linear-gradient(112deg, transparent 0 18px, rgba(100, 190, 237, 0.13) 18px 19px, transparent 19px 34px);
  animation: dispatch-weather-rain 850ms linear infinite;
}

.dispatch-weather.weather-snow {
  border-color: rgba(190, 219, 237, 0.18);
  background: linear-gradient(125deg, rgba(37, 57, 73, 0.5), rgba(9, 13, 23, 0.96) 72%);
}

.dispatch-weather.weather-snow::after {
  inset: -30px 0;
  background-image:
    radial-gradient(circle, rgba(224, 239, 248, 0.3) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(224, 239, 248, 0.18) 0 1px, transparent 1.5px);
  background-position: 0 0, 14px 18px;
  background-size: 30px 30px, 42px 42px;
  animation: dispatch-weather-snow 6s linear infinite;
}

.dispatch-weather.weather-storm {
  border-color: rgba(155, 111, 222, 0.2);
  background: linear-gradient(125deg, rgba(48, 31, 73, 0.56), rgba(9, 12, 22, 0.97) 72%);
}

.dispatch-weather.weather-storm::before {
  top: 8px;
  right: 28px;
  width: 34px;
  height: 58px;
  background: rgba(204, 170, 255, 0.17);
  clip-path: polygon(56% 0, 100% 0, 67% 39%, 94% 39%, 27% 100%, 46% 54%, 14% 54%);
  animation: dispatch-weather-flash 5s step-end infinite;
}

.dispatch-weather.weather-storm::after {
  inset: -45px -25px;
  background: repeating-linear-gradient(112deg, transparent 0 21px, rgba(150, 123, 215, 0.1) 21px 22px, transparent 22px 38px);
  animation: dispatch-weather-rain 1s linear infinite;
}

.dispatch-weather.weather-fog {
  border-color: rgba(147, 160, 181, 0.16);
  background: linear-gradient(125deg, rgba(43, 49, 61, 0.48), rgba(10, 13, 23, 0.96) 72%);
}

.dispatch-weather.weather-fog::after {
  top: 12px;
  right: -30px;
  width: 180px;
  height: 90px;
  background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(175, 187, 203, 0.09) 12px 14px, transparent 14px 24px);
  animation: dispatch-weather-fog 8s ease-in-out infinite alternate;
}

@keyframes dispatch-weather-spin {
  to { transform: rotate(360deg); }
}

@keyframes dispatch-weather-drift {
  from { transform: translateX(-8px); }
  to { transform: translateX(10px); }
}

@keyframes dispatch-weather-rain {
  from { transform: translate3d(0, -18px, 0); }
  to { transform: translate3d(-18px, 18px, 0); }
}

@keyframes dispatch-weather-snow {
  from { transform: translateY(-18px); }
  to { transform: translateY(30px); }
}

@keyframes dispatch-weather-flash {
  0%, 88%, 100% { opacity: 0.12; }
  89%, 91% { opacity: 0.5; }
}

@keyframes dispatch-weather-fog {
  from { transform: translateX(-16px); opacity: 0.6; }
  to { transform: translateX(16px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .dispatch-weather::before,
  .dispatch-weather::after {
    animation: none !important;
  }
}

/* Reverted dashboard header: original layout, no decorative glow. */
.dispatch-weather {
  border-color: rgba(148, 163, 202, 0.105);
  background: rgba(10, 13, 23, 0.9);
}

.dispatch-weather::before,
.dispatch-weather::after {
  display: none;
}

.dispatch-heading-copy,
.dispatch-weather,
.dispatch-connector-card,
.dispatch-pulse {
  box-shadow: none;
}

/* Compact connector control for the dashboard heading. */
.dispatch-connector-card {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 3px 13px 13px 3px;
  background: rgba(10, 13, 23, 0.9);
}

.dispatch-connector-status {
  min-width: 0;
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.dispatch-connector-indicator {
  position: relative;
  width: 29px;
  height: 29px;
  border: 1px solid rgba(112, 128, 160, 0.22);
  border-radius: 50%;
  background: rgba(112, 128, 160, 0.055);
}

.dispatch-connector-indicator::before,
.dispatch-connector-indicator::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: "";
  transform: translate(-50%, -50%);
}

.dispatch-connector-indicator::before {
  width: 6px;
  height: 6px;
  background: #6f7b90;
}

.dispatch-connector-indicator::after {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(112, 128, 160, 0.18);
}

.dispatch-connector-copy {
  min-width: 0;
}

.dispatch-connector-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.dispatch-connector-label small {
  overflow: hidden;
  color: #657189;
  font-size: 6.5px;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dispatch-connector-label span {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid rgba(112, 128, 160, 0.18);
  border-radius: 999px;
  color: #7d899c;
  font-size: 5.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.dispatch-connector-copy > strong,
.dispatch-connector-copy > span {
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dispatch-connector-copy > strong {
  margin-top: 4px;
  color: #c4ccda;
  font-size: 9px;
  font-weight: 650;
}

.dispatch-connector-copy > span {
  margin-top: 2px;
  color: #637087;
  font-size: 6.5px;
  line-height: 1.35;
}

.dispatch-connector-download {
  min-width: 0;
  height: 30px;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  border: 1px solid rgba(112, 103, 255, 0.26);
  border-radius: 8px;
  background: rgba(96, 82, 255, 0.08);
  color: #cfd5e2;
  font-size: 7.5px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.dispatch-connector-download:hover,
.dispatch-connector-download:focus-visible {
  border-color: rgba(128, 112, 255, 0.5);
  background: rgba(96, 82, 255, 0.14);
  color: #fff;
  outline: none;
}

.dispatch-connector-download svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: #8f86ff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.dispatch-connector-download small {
  color: #777f91;
  font-size: 6px;
  font-weight: 700;
}

.dispatch-connector-card[data-state="live"] .dispatch-connector-indicator {
  border-color: rgba(66, 212, 154, 0.25);
  background: rgba(66, 212, 154, 0.055);
}

.dispatch-connector-card[data-state="live"] .dispatch-connector-indicator::before { background: #42d49a; }
.dispatch-connector-card[data-state="live"] .dispatch-connector-indicator::after { border-color: rgba(66, 212, 154, 0.2); }
.dispatch-connector-card[data-state="live"] .dispatch-connector-label span { border-color: rgba(66, 212, 154, 0.22); color: #62d8a9; }
.dispatch-connector-card[data-state="live"] .dispatch-connector-copy > strong { color: #d4e9df; }

.dispatch-connector-card[data-state="starting"] .dispatch-connector-indicator::before,
.dispatch-connector-card[data-state="idle"] .dispatch-connector-indicator::before { background: #8178ff; }
.dispatch-connector-card[data-state="starting"] .dispatch-connector-label span,
.dispatch-connector-card[data-state="idle"] .dispatch-connector-label span { border-color: rgba(129, 120, 255, 0.25); color: #9a93ff; }

.dispatch-connector-card[data-state="signin"] .dispatch-connector-indicator::before { background: #f2c45f; }
.dispatch-connector-card[data-state="signin"] .dispatch-connector-label span { border-color: rgba(242, 196, 95, 0.25); color: #f2c45f; }

.dispatch-connector-card[data-state="error"] .dispatch-connector-indicator::before { background: #ff6873; }
.dispatch-connector-card[data-state="error"] .dispatch-connector-label span { border-color: rgba(255, 104, 115, 0.25); color: #ff7d87; }

@media (max-width: 1330px) {
  .dispatch-connector-card {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
    align-items: center;
    border-radius: 4px 4px 11px 11px;
  }
}

@media (max-width: 760px) {
  .dispatch-connector-card {
    grid-template-columns: 1fr;
    border-radius: 11px;
  }
}

/* Daily Rostering — DispatchOS workflow, refined for BeyondFantastic. */
.owner-view.bf-roster-view {
  --roster-line: rgba(144, 158, 199, 0.13);
  --roster-line-strong: rgba(144, 158, 199, 0.22);
  --roster-surface: rgba(9, 12, 22, 0.94);
  --roster-surface-raised: rgba(14, 18, 31, 0.94);
  --roster-muted: #6e7a90;
  --roster-text: #e8ebf3;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding: 22px clamp(16px, 1.25vw, 24px) 48px;
  color: var(--roster-text);
}

.bf-roster-hero,
.bf-roster-progress,
.bf-roster-planner,
.bf-roster-driver-pool,
.bf-roster-insights,
.bf-roster-ready-bar {
  border: 1px solid var(--roster-line);
  background: var(--roster-surface);
}

.bf-roster-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 20px 22px;
  border-radius: 14px;
}

.bf-roster-hero-copy { min-width: 0; }
.bf-roster-hero-copy p,
.bf-roster-panel-heading p,
.bf-roster-driver-pool header p,
.bf-roster-review > article > header p {
  margin: 0;
  color: #8178ff;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bf-roster-hero-copy p {
  display: flex;
  align-items: center;
  gap: 7px;
}

.bf-roster-hero-copy p i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #42d49a;
}

.bf-roster-hero h2 {
  margin: 7px 0 0;
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.35vw, 2.2rem);
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.bf-roster-hero-copy > span {
  display: block;
  margin-top: 7px;
  color: var(--roster-muted);
  font-size: 9px;
  line-height: 1.55;
}

.bf-roster-hero-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.bf-roster-save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7f8ba0;
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.bf-roster-save-state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #42d49a;
}

.bf-roster-save-state.saving i { background: #f2c45f; }

.bf-roster-date-control {
  display: grid;
  grid-template-columns: 34px minmax(134px, 1fr) 34px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--roster-line-strong);
  border-radius: 10px;
  background: #090d17;
}

.bf-roster-date-control button {
  border: 0;
  background: rgba(255, 255, 255, 0.025);
  color: #8591a6;
  cursor: pointer;
  font-size: 21px;
}

.bf-roster-date-control button:hover { color: #fff; background: rgba(129, 120, 255, 0.1); }
.bf-roster-date-control label { display: grid; place-items: center; padding: 5px 10px; border-inline: 1px solid var(--roster-line); }
.bf-roster-date-control small { color: #5f6b81; font-size: 5.5px; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.bf-roster-date-control input { width: 118px; padding: 0; border: 0; outline: 0; color: #e7ebf4; background: transparent; font: inherit; font-size: 8px; font-weight: 750; color-scheme: dark; text-align: center; }

.bf-roster-source-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.bf-roster-source-strip article {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--roster-line);
  border-radius: 11px;
  background: rgba(10, 13, 23, 0.9);
}

.bf-roster-source-icon {
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(121, 134, 161, 0.18);
  border-radius: 9px;
  background: rgba(121, 134, 161, 0.05);
}

.bf-roster-source-icon i { width: 6px; height: 6px; border-radius: 50%; background: #6e798e; }
.bf-roster-source-strip article[data-state="ready"] .bf-roster-source-icon i { background: #42d49a; }
.bf-roster-source-strip article[data-state="checking"] .bf-roster-source-icon i { background: #8178ff; }
.bf-roster-source-strip article > div { min-width: 0; }
.bf-roster-source-strip small,
.bf-roster-source-strip strong,
.bf-roster-source-strip p { overflow: hidden; display: block; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-source-strip small { color: #58657b; font-size: 6px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.bf-roster-source-strip strong { margin-top: 3px; color: #c7ceda; font-size: 8px; }
.bf-roster-source-strip p { margin-top: 2px; color: #626f84; font-size: 6.5px; }
.bf-roster-source-strip article > b { padding: 3px 6px; border: 1px solid rgba(116, 128, 151, 0.16); border-radius: 999px; color: #7d899d; font-size: 5.5px; text-transform: uppercase; }
.bf-roster-source-strip article[data-state="ready"] > b { border-color: rgba(66, 212, 154, 0.2); color: #5ed7a6; }
.bf-roster-source-strip article[data-state="checking"] > b { border-color: rgba(129, 120, 255, 0.22); color: #9e97ff; }

.bf-roster-progress {
  margin-top: 9px;
  padding: 14px 15px;
  border-radius: 12px;
}

.bf-roster-progress > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bf-roster-progress > header > div small,
.bf-roster-progress > header > div strong,
.bf-roster-progress > header > div p { display: block; margin: 0; }
.bf-roster-progress > header > div small { color: #8178ff; font-size: 6px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.bf-roster-progress > header > div strong { margin-top: 4px; font-size: 10px; }
.bf-roster-progress > header > div p { margin-top: 2px; color: var(--roster-muted); font-size: 7px; }
.bf-roster-progress > header > span { text-align: right; }
.bf-roster-progress > header > span strong { display: block; color: #a7baff; font-size: 18px; }
.bf-roster-progress > header > span small { color: #5f6a7f; font-size: 5.5px; text-transform: uppercase; }

.bf-roster-progress-track {
  height: 5px;
  overflow: hidden;
  margin-top: 11px;
  border-radius: 999px;
  background: #171d2a;
}

.bf-roster-progress-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f78ff, #896cff); transition: width 220ms ease; }
.bf-roster-progress-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.bf-roster-progress-stages > span { min-width: 0; display: grid; grid-template-columns: 7px minmax(0, 1fr); gap: 2px 7px; align-items: center; padding: 7px 8px; border: 1px solid rgba(139, 154, 189, 0.09); border-radius: 8px; background: rgba(255, 255, 255, 0.018); }
.bf-roster-progress-stages i { grid-row: 1 / 3; width: 6px; height: 6px; border-radius: 50%; background: #586478; }
.bf-roster-progress-stages strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-progress-stages small { color: #657187; font-size: 6px; }
.bf-roster-progress-stages > span.complete i { background: #42d49a; }
.bf-roster-progress-stages > span.complete strong { color: #cde2d9; }

.bf-roster-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.bf-roster-kpis article {
  min-width: 0;
  min-height: 80px;
  padding: 13px 14px;
  border: 1px solid var(--roster-line);
  border-radius: 11px;
  background: rgba(10, 13, 23, 0.9);
}

.bf-roster-kpis span,
.bf-roster-kpis strong,
.bf-roster-kpis small { display: block; }
.bf-roster-kpis span { color: #657188; font-size: 6.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.bf-roster-kpis strong { margin-top: 5px; color: #edf0f6; font-size: 22px; }
.bf-roster-kpis small { margin-top: 3px; overflow: hidden; color: #59667c; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-kpis article:nth-child(3) strong { color: #91b2ff; }
.bf-roster-kpis article.standby strong { color: #aa8cff; }
.bf-roster-kpis article.attention strong { color: #ff7e89; }
.bf-roster-kpis article.healthy strong { color: #57d5a3; }

.bf-roster-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  align-items: start;
  gap: 9px;
  margin-top: 9px;
}

.bf-roster-planner,
.bf-roster-driver-pool,
.bf-roster-insights { border-radius: 13px; }
.bf-roster-planner { min-width: 0; padding: 15px; }
.bf-roster-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bf-roster-panel-heading > div { min-width: 0; }
.bf-roster-panel-heading h3,
.bf-roster-driver-pool h3 { margin: 4px 0 0; color: #e6eaf2; font-size: 12px; }
.bf-roster-panel-heading > div > span { display: block; margin-top: 3px; color: var(--roster-muted); font-size: 7px; }
.bf-roster-panel-heading > b { padding: 5px 8px; border: 1px solid var(--roster-line); border-radius: 999px; color: #768399; font-size: 6px; text-transform: uppercase; }

.bf-roster-demand {
  display: grid;
  grid-template-columns: auto 44px auto;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid var(--roster-line-strong);
  border-radius: 9px;
  background: #090d17;
}

.bf-roster-demand span,
.bf-roster-demand small { color: #67748a; font-size: 6px; font-weight: 700; text-transform: uppercase; }
.bf-roster-demand input { width: 44px; height: 25px; border: 1px solid rgba(129, 120, 255, 0.25); border-radius: 6px; outline: 0; color: #fff; background: rgba(129, 120, 255, 0.08); font: inherit; font-size: 10px; font-weight: 800; text-align: center; }

.bf-roster-wave-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.bf-roster-wave-card { min-width: 0; overflow: hidden; border: 1px solid var(--roster-line); border-radius: 11px; background: rgba(5, 8, 16, 0.68); transition: border-color 160ms ease, background-color 160ms ease; }
.bf-roster-wave-card.selected { border-color: rgba(129, 120, 255, 0.45); background: rgba(112, 92, 255, 0.055); }
.bf-roster-wave-card.standby.selected { border-color: rgba(171, 116, 255, 0.48); }
.bf-roster-wave-select { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px; border: 0; border-bottom: 1px solid var(--roster-line); color: inherit; background: rgba(255, 255, 255, 0.018); cursor: pointer; text-align: left; }
.bf-roster-wave-select > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(129, 120, 255, 0.24); border-radius: 8px; color: #a39cff; background: rgba(129, 120, 255, 0.08); font-size: 7px; font-weight: 800; }
.bf-roster-wave-select small,
.bf-roster-wave-select strong { display: block; }
.bf-roster-wave-select small { color: #5d697f; font-size: 5.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.bf-roster-wave-select strong { margin-top: 2px; font-size: 8px; }
.bf-roster-wave-select b { color: #758197; font-size: 6px; font-weight: 700; }
.bf-roster-wave-drivers { min-height: 122px; display: grid; align-content: start; gap: 6px; padding: 8px; }
.bf-roster-assigned-driver { min-width: 0; display: grid; grid-template-columns: 27px minmax(0, 1fr) 22px; align-items: center; gap: 8px; padding: 7px; border: 1px solid rgba(142, 156, 190, 0.11); border-radius: 8px; background: rgba(255, 255, 255, 0.023); }
.bf-roster-assigned-driver > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #cfd5ff; background: rgba(106, 94, 255, 0.12); font-size: 7px; font-weight: 800; }
.bf-roster-assigned-driver > div { min-width: 0; }
.bf-roster-assigned-driver strong,
.bf-roster-assigned-driver small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-assigned-driver strong { font-size: 7.5px; }
.bf-roster-assigned-driver small { margin-top: 2px; color: #637087; font-size: 6px; }
.bf-roster-assigned-driver > button { width: 22px; height: 22px; border: 0; border-radius: 6px; color: #718097; background: transparent; cursor: pointer; font-size: 14px; }
.bf-roster-assigned-driver > button:hover { color: #ff7d88; background: rgba(255, 104, 115, 0.08); }
.bf-roster-reason { grid-column: 1 / -1; display: grid; gap: 3px; margin-top: 5px; }
.bf-roster-reason span { color: #5f6b81; font-size: 5.5px; font-weight: 700; text-transform: uppercase; }
.bf-roster-reason input { width: 100%; height: 27px; padding: 0 8px; border: 1px solid rgba(172, 120, 255, 0.17); border-radius: 6px; outline: 0; color: #dce1ea; background: #090d17; font: inherit; font-size: 6.5px; }
.bf-roster-reason input:focus { border-color: rgba(172, 120, 255, 0.42); }
.bf-roster-wave-empty { min-height: 104px; display: grid; place-items: center; align-content: center; text-align: center; }
.bf-roster-wave-empty i { width: 27px; height: 27px; display: grid; place-items: center; border: 1px dashed rgba(129, 120, 255, 0.3); border-radius: 8px; color: #8279ff; font-size: 14px; font-style: normal; }
.bf-roster-wave-empty strong { margin-top: 6px; color: #7c879a; font-size: 7px; }
.bf-roster-wave-empty small { max-width: 180px; margin-top: 3px; color: #4f5c71; font-size: 6px; line-height: 1.4; }

.bf-roster-driver-pool { position: sticky; top: 88px; overflow: hidden; }
.bf-roster-driver-pool > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 13px 9px; }
.bf-roster-driver-pool > header > span { padding: 4px 7px; border: 1px solid var(--roster-line); border-radius: 999px; color: #768399; font-size: 6px; }
.bf-roster-search { height: 32px; display: grid; grid-template-columns: 15px 1fr; align-items: center; gap: 6px; margin: 0 12px 7px; padding: 0 9px; border: 1px solid var(--roster-line); border-radius: 8px; background: #080c15; }
.bf-roster-search svg { width: 13px; fill: none; stroke: #59667b; stroke-width: 1.7; }
.bf-roster-search input { min-width: 0; border: 0; outline: 0; color: #dfe4ed; background: transparent; font: inherit; font-size: 7px; }
.bf-roster-add-driver { display: grid; grid-template-columns: minmax(0, 1fr) 90px 42px; gap: 5px; padding: 0 12px 8px; }
.bf-roster-add-driver input,
.bf-roster-add-driver select,
.bf-roster-add-driver button { height: 29px; min-width: 0; border: 1px solid var(--roster-line); border-radius: 7px; color: #cfd5df; background: #090d17; font: inherit; font-size: 6.5px; }
.bf-roster-add-driver input { padding: 0 8px; outline: 0; }
.bf-roster-add-driver select { padding: 0 6px; color-scheme: dark; }
.bf-roster-add-driver button { border-color: rgba(129, 120, 255, 0.3); color: #dcd9ff; background: rgba(129, 120, 255, 0.1); cursor: pointer; font-weight: 750; }
.bf-roster-target { display: grid; grid-template-columns: 27px minmax(0, 1fr); align-items: center; gap: 8px; margin: 0 12px 8px; padding: 8px; border: 1px solid rgba(129, 120, 255, 0.2); border-radius: 8px; background: rgba(129, 120, 255, 0.055); }
.bf-roster-target > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #fff; background: #5d55d9; font-size: 6.5px; font-weight: 800; }
.bf-roster-target strong,
.bf-roster-target small { display: block; }
.bf-roster-target strong { font-size: 7px; }
.bf-roster-target small { margin-top: 2px; color: #6b7690; font-size: 6px; }
.bf-roster-driver-list { min-height: 190px; max-height: 374px; display: grid; align-content: start; gap: 5px; overflow-y: auto; padding: 0 12px 8px; scrollbar-width: thin; }
.bf-roster-driver-list > button { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; align-items: center; gap: 8px; padding: 7px; border: 1px solid rgba(143, 157, 190, 0.1); border-radius: 8px; color: inherit; background: rgba(255, 255, 255, 0.02); cursor: pointer; text-align: left; }
.bf-roster-driver-list > button:hover { border-color: rgba(129, 120, 255, 0.28); background: rgba(129, 120, 255, 0.055); }
.bf-roster-driver-list > button > span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: #ced5ff; background: rgba(91, 109, 220, 0.13); font-size: 7px; font-weight: 800; }
.bf-roster-driver-list > button strong,
.bf-roster-driver-list > button small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-driver-list > button strong { font-size: 7.5px; }
.bf-roster-driver-list > button small { margin-top: 2px; color: #637087; font-size: 6px; }
.bf-roster-driver-list > button > i { color: #8178ff; font-size: 15px; font-style: normal; }
.bf-roster-pool-empty { min-height: 180px; display: grid; place-items: center; align-content: center; padding: 18px; text-align: center; }
.bf-roster-pool-empty strong { color: #8994a7; font-size: 8px; }
.bf-roster-pool-empty small { max-width: 220px; margin-top: 5px; color: #59667a; font-size: 6.5px; line-height: 1.5; }
.bf-roster-driver-pool > footer { display: flex; justify-content: space-between; padding: 9px 12px; border-top: 1px solid var(--roster-line); color: #66738a; font-size: 6px; }
.bf-roster-driver-pool > footer strong { color: #a6b0c0; }

.bf-roster-insights { margin-top: 9px; padding: 15px; }
.bf-roster-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.bf-roster-insight-grid article { min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 11px; border: 1px solid var(--roster-line); border-radius: 10px; background: rgba(255, 255, 255, 0.018); }
.bf-roster-insight-grid article > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 9px; font-weight: 850; }
.bf-roster-insight-grid .rescue { color: #74b4ff; background: rgba(76, 137, 255, 0.1); }
.bf-roster-insight-grid .violation { color: #ff7e89; background: rgba(255, 104, 115, 0.09); }
.bf-roster-insight-grid .cdf { color: #f2c45f; background: rgba(242, 196, 95, 0.09); }
.bf-roster-insight-grid small,
.bf-roster-insight-grid strong,
.bf-roster-insight-grid p { display: block; margin: 0; }
.bf-roster-insight-grid small { color: #637087; font-size: 6px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.bf-roster-insight-grid strong { margin-top: 4px; font-size: 8px; }
.bf-roster-insight-grid p { margin-top: 3px; color: #5f6c81; font-size: 6.5px; line-height: 1.45; }

.bf-roster-ready-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 9px; padding: 12px 14px; border-radius: 11px; }
.bf-roster-ready-bar > div { display: flex; align-items: center; gap: 10px; }
.bf-roster-ready-bar > div > span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(129, 120, 255, 0.2); border-radius: 9px; color: #8e86ff; background: rgba(129, 120, 255, 0.07); font-size: 10px; }
.bf-roster-ready-bar p { margin: 0; }
.bf-roster-ready-bar p strong,
.bf-roster-ready-bar p small { display: block; }
.bf-roster-ready-bar p strong { font-size: 8px; }
.bf-roster-ready-bar p small { margin-top: 3px; color: #657188; font-size: 6.5px; }
.bf-roster-ready-bar > button { min-height: 33px; padding: 0 12px; border: 1px solid rgba(129, 120, 255, 0.34); border-radius: 8px; color: #e7e5ff; background: rgba(129, 120, 255, 0.12); cursor: pointer; font: inherit; font-size: 7px; font-weight: 750; }
.bf-roster-ready-bar > button:disabled { opacity: 0.38; cursor: not-allowed; }

.bf-roster-review { position: fixed; z-index: 1300; inset: 0; }
.bf-roster-review-scrim { position: absolute; inset: 0; background: rgba(2, 4, 10, 0.78); backdrop-filter: blur(6px); }
.bf-roster-review > article { position: absolute; top: 50%; left: 50%; width: min(760px, calc(100vw - 28px)); max-height: min(760px, calc(100vh - 34px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid rgba(149, 163, 205, 0.18); border-radius: 14px; background: #090c15; transform: translate(-50%, -50%); }
.bf-roster-review > article > header { display: flex; justify-content: space-between; gap: 16px; padding: 16px; border-bottom: 1px solid var(--roster-line); }
.bf-roster-review h3 { margin: 4px 0 0; font-size: 15px; }
.bf-roster-review > article > header span { display: block; margin-top: 3px; color: #69758b; font-size: 7px; }
.bf-roster-review > article > header button { width: 29px; height: 29px; border: 1px solid var(--roster-line); border-radius: 8px; color: #8995a7; background: rgba(255, 255, 255, 0.025); cursor: pointer; }
.bf-roster-review-body { overflow-y: auto; padding: 14px; }
.bf-roster-review-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.bf-roster-review-summary > span { padding: 10px; border: 1px solid var(--roster-line); border-radius: 9px; background: rgba(255, 255, 255, 0.018); }
.bf-roster-review-summary small,
.bf-roster-review-summary strong { display: block; }
.bf-roster-review-summary small { color: #647087; font-size: 6px; text-transform: uppercase; }
.bf-roster-review-summary strong { margin-top: 3px; font-size: 17px; }
.bf-roster-review-body > section { overflow: hidden; margin-top: 7px; border: 1px solid var(--roster-line); border-radius: 9px; }
.bf-roster-review-body > section > header { display: flex; justify-content: space-between; padding: 9px 10px; background: rgba(255, 255, 255, 0.02); }
.bf-roster-review-body > section > header div { display: flex; align-items: center; gap: 7px; }
.bf-roster-review-body > section > header small { width: 25px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #aca6ff; background: rgba(129, 120, 255, 0.1); font-size: 6px; }
.bf-roster-review-body > section > header strong,
.bf-roster-review-body > section > header b { font-size: 7px; }
.bf-roster-review-body > section > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 8px; }
.bf-roster-review-body > section > div > span { min-width: 0; display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 2px 7px; align-items: center; padding: 7px; border-radius: 7px; background: rgba(255, 255, 255, 0.018); }
.bf-roster-review-body > section > div > span b { grid-row: 1 / 3; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #ccd2ff; background: rgba(129, 120, 255, 0.1); font-size: 6px; }
.bf-roster-review-body > section > div > span strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-review-body > section > div > span small { overflow: hidden; color: #657188; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-review-body > section > div > p { grid-column: 1 / -1; margin: 8px; color: #5e6a80; font-size: 7px; text-align: center; }
.bf-roster-review > article > footer { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-top: 1px solid var(--roster-line); color: #5f6b80; font-size: 6px; }
.bf-roster-review > article > footer button { height: 30px; padding: 0 14px; border: 1px solid rgba(129, 120, 255, 0.34); border-radius: 8px; color: #e7e5ff; background: rgba(129, 120, 255, 0.12); font: inherit; font-size: 7px; cursor: pointer; }
.owner-modal-open { overflow: hidden; }

@media (max-width: 1180px) {
  .bf-roster-hero { grid-template-columns: 1fr; }
  .bf-roster-hero-tools { justify-content: space-between; }
  .bf-roster-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bf-roster-workspace { grid-template-columns: 1fr; }
  .bf-roster-driver-pool { position: static; }
  .bf-roster-driver-list { max-height: 310px; }
}

@media (max-width: 820px) {
  .owner-view.bf-roster-view { padding: 16px 13px 42px; }
  .bf-roster-source-strip,
  .bf-roster-insight-grid { grid-template-columns: 1fr; }
  .bf-roster-progress-stages,
  .bf-roster-wave-grid { grid-template-columns: 1fr 1fr; }
  .bf-roster-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bf-roster-hero-tools,
  .bf-roster-panel-heading,
  .bf-roster-ready-bar { align-items: stretch; flex-direction: column; }
  .bf-roster-date-control { width: 100%; }
  .bf-roster-progress-stages,
  .bf-roster-wave-grid,
  .bf-roster-kpis { grid-template-columns: 1fr; }
  .bf-roster-add-driver { grid-template-columns: 1fr 1fr; }
  .bf-roster-add-driver input { grid-column: 1 / -1; }
  .bf-roster-review-body > section > div { grid-template-columns: 1fr; }
}


.dispatch-pulse > i::before,
.dispatch-pulse.has-risk > i::before {
  box-shadow: none;
}

/* Cortex-style live operations split, re-skinned for BeyondFantastic */
.bf-live-command-panel {
  --bf-route-red: #ff5f78;
  --bf-route-yellow: #f2c45f;
  --bf-route-green: #36c9b2;
  --bf-route-blue: #668dff;
  overflow: hidden;
}

.bf-live-workspace {
  height: clamp(640px, 74vh, 900px);
  min-height: 640px;
  grid-template-columns: clamp(520px, 41%, 650px) minmax(0, 1fr);
  overflow: hidden;
}

.bf-live-route-rail,
.bf-live-map-panel {
  min-height: 0;
  overflow: hidden;
}

.bf-live-route-rail { background: #080c15; }

.bf-live-route-rail > header {
  height: 38px;
  min-height: 38px;
  flex: 0 0 38px;
  padding: 0 12px;
  background: #0d1220;
}

.bf-live-route-rail > header span { color: #dfe5f2; font-size: 8px; }
.bf-live-route-rail > header small { color: #63708a; font-size: 8px; }

.bf-live-route-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scrollbar-color: #29334a #080c15;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.bf-live-route-list::-webkit-scrollbar { width: 8px; }
.bf-live-route-list::-webkit-scrollbar-track { background: #080c15; }
.bf-live-route-list::-webkit-scrollbar-thumb {
  border: 2px solid #080c15;
  border-radius: 999px;
  background: #29334a;
}

.bf-live-route-row {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 3px 57px minmax(132px, 1.05fr) minmax(100px, 0.78fr) minmax(176px, 1.3fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 7px;
  row-gap: 3px;
  padding: 6px 8px 6px 0;
  border: 0;
  border-bottom: 1px solid rgba(132, 151, 198, 0.105);
  border-radius: 0;
  background: #0a0f1a;
  transition: background 120ms ease, box-shadow 120ms ease;
  content-visibility: auto;
  contain-intrinsic-size: auto 66px;
}

.bf-live-route-row:hover,
.bf-live-route-row:focus-visible,
.bf-live-route-row.map-highlighted { background: #111827; transition: none; }

.bf-live-route-row.selected {
  z-index: 1;
  background: linear-gradient(90deg, rgba(70, 103, 225, 0.15), rgba(121, 75, 215, 0.08)), #0f1522;
  box-shadow: inset 0 0 0 1px rgba(114, 133, 255, 0.48);
}

.bf-live-route-edge {
  position: static;
  width: 3px;
  height: 100%;
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: stretch;
  border-radius: 0 3px 3px 0;
  box-shadow: none;
  background: #667289;
}

.bf-live-route-row.tone-red .bf-live-route-edge,
.bf-live-route-row.tone-red .bf-live-route-track > i { background: var(--bf-route-red); box-shadow: none; }
.bf-live-route-row.tone-yellow .bf-live-route-edge,
.bf-live-route-row.tone-yellow .bf-live-route-track > i { background: var(--bf-route-yellow); }
.bf-live-route-row.tone-green .bf-live-route-edge,
.bf-live-route-row.tone-green .bf-live-route-track > i { background: var(--bf-route-green); }
.bf-live-route-row.tone-blue .bf-live-route-edge,
.bf-live-route-row.tone-blue .bf-live-route-track > i { background: var(--bf-route-blue); }

.bf-live-route-schedule,
.bf-live-route-identity,
.bf-live-route-timing,
.bf-live-route-metrics { min-width: 0; }

.bf-live-route-schedule {
  display: flex !important;
  min-height: 48px;
  grid-column: 2 !important;
  grid-row: 1 / 3;
  flex-direction: column;
  justify-content: center;
  gap: 1px !important;
}

.bf-live-route-schedule strong,
.bf-live-route-schedule span,
.bf-live-route-schedule small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-live-route-schedule strong {
  color: #f3f6fc !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.15;
}

.bf-live-route-schedule span { color: #91a0b7; font-size: 8px; font-weight: 600; }
.bf-live-route-schedule small { color: #5f6c83; font-size: 8px !important; }

.bf-live-route-identity {
  display: flex;
  grid-column: 3;
  grid-row: 1 / 3;
  flex-direction: column;
  justify-content: center;
}

.bf-live-route-identity small {
  overflow: visible !important;
  color: #e4e9f3 !important;
  font-size: 10.5px !important;
  font-weight: 700;
  line-height: 1.22;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  white-space: normal !important;
}

.bf-live-route-timing {
  display: flex;
  grid-column: 4;
  grid-row: 1 / 3;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow: hidden;
  padding-left: 8px;
  color: #718099;
  font-size: 8px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.bf-live-route-timing span,
.bf-live-route-timing small {
  width: 100%;
  overflow: hidden;
  color: #718099;
  font-size: 8px !important;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bf-live-route-timing b { color: #9eacc3; font-weight: 700; }
.bf-live-route-timing small,
.bf-live-route-timing small b { color: #8eb6ff; }

.bf-live-route-metrics {
  display: flex;
  grid-column: 5;
  grid-row: 1;
  flex-direction: column;
  justify-content: center;
}

.bf-live-route-track {
  position: relative;
  width: 100%;
  height: 11px;
  grid-column: auto;
  overflow: hidden;
  border: 1px solid #303a50;
  border-radius: 2px;
  background: #222b3c;
}

.bf-live-route-track > i {
  display: block;
  min-width: 2px;
  height: 100%;
  border-radius: 1px;
  background: #668dff;
  box-shadow: none;
  transition: width 250ms ease;
}

.bf-live-route-target {
  position: absolute;
  z-index: 2;
  top: -1px;
  bottom: -1px;
  width: 2px;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, #fff 0 2px, #080b12 2px 4px);
  box-shadow: 0 0 0 1px rgba(8, 11, 18, 0.48);
  transform: translateX(-1px);
}

.bf-live-route-footer {
  display: flex;
  min-width: 0;
  grid-column: 5;
  grid-row: 2;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  overflow: hidden;
  color: #a8b3c5;
  font-size: 8.5px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bf-live-route-footer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-live-route-footer span:nth-child(2) { color: #54d6bd; }
.bf-live-route-footer span.behind { color: #ff7589; }

.bf-live-map-panel {
  display: flex;
  flex-direction: column;
  background: #eef2f7;
}

.bf-live-map-panel > header {
  height: 54px;
  min-height: 54px;
  flex: 0 0 54px;
  padding: 0 13px;
  border-bottom-color: rgba(137, 157, 205, 0.13);
  background: #0d1320;
}

.bf-live-map-panel > header p { color: #3bcbb4; }
.bf-live-map-panel > header h3 { color: #eef2f9; }

.bf-live-map-tools button { border-color: rgba(139, 158, 208, 0.2); color: #9aa6ba; background: #121a2a; }
.bf-live-map-tools button:hover,
.bf-live-map-tools button:focus-visible { border-color: rgba(110, 137, 255, 0.55); color: #fff; background: #192239; }

.bf-live-map-wrap,
.bf-live-map { width: 100%; height: 100%; min-height: 0; }

.bf-live-map-wrap { flex: 1 1 auto; background: #eef2f7; }
.bf-live-map { background: #eef2f7; cursor: grab; }
.bf-live-map:active { cursor: grabbing; }

.bf-live-map-legend {
  right: 12px;
  bottom: 22px;
  gap: 10px;
  padding: 7px 9px;
  border-color: rgba(57, 79, 101, 0.2);
  border-radius: 9px;
  color: #2c4358;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 7px 22px rgba(31, 52, 72, 0.16);
  font-size: 8px;
  backdrop-filter: blur(10px);
}

.bf-live-map-legend i { width: 7px; height: 7px; }
.bf-live-map-legend i.red { background: var(--bf-route-red); }
.bf-live-map-legend i.yellow { background: var(--bf-route-yellow); }
.bf-live-map-legend i.green { background: var(--bf-route-green); }
.bf-live-map-legend i.blue { background: var(--bf-route-blue); }

.bf-live-route-marker {
  width: 28px;
  min-width: 28px;
  height: 28px;
  box-sizing: border-box;
  display: grid;
  padding: 0;
  place-items: center;
  border: 2px solid #111927;
  border-radius: 999px;
  color: #fff;
  background: #68768d;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.44);
  font: 900 11px/1 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
  text-shadow: -1px 0 #101820, 1px 0 #101820, 0 -1px #101820, 0 1px #101820;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.bf-live-route-marker.tone-red { background: var(--bf-route-red); }
.bf-live-route-marker.tone-yellow { color: #fff; background: var(--bf-route-yellow); }
.bf-live-route-marker.tone-green { background: var(--bf-route-green); }
.bf-live-route-marker.tone-blue { background: var(--bf-route-blue); }

.bf-live-route-marker:hover,
.bf-live-route-marker.highlighted { transform: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.78), 0 5px 15px rgba(0, 0, 0, 0.42); }

.bf-live-route-marker.selected { transform: scale(1.16); box-shadow: 0 0 0 3px rgba(116, 92, 255, 0.78), 0 5px 15px rgba(0, 0, 0, 0.44); }

.bf-live-station-marker {
  width: 46px;
  height: 23px;
  border: 1px solid #fff;
  border-radius: 5px;
  color: #183654;
  background: #e7f0f8;
  box-shadow: 0 0 0 2px rgba(33, 69, 102, 0.22), 0 3px 10px rgba(31, 52, 72, 0.22);
  font-size: 8px;
}

.bf-live-map .leaflet-control-attribution { color: #607286; background: rgba(255, 255, 255, 0.92); }
.bf-live-map .leaflet-control-attribution a { color: #36566f; }

.bf-live-map-empty {
  border-color: #d6e0e9;
  color: #607286;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(31, 52, 72, 0.16);
}

.bf-live-map-empty > span { color: #6f59f7; }
.bf-live-map-empty strong { color: #243a52; }
.bf-live-map-empty p { color: #647589; }

@media (max-width: 1240px) {
  .bf-live-workspace { grid-template-columns: minmax(455px, 45%) minmax(0, 1fr); }
  .bf-live-route-row { grid-template-columns: 3px 54px minmax(112px, 1fr) minmax(88px, 0.75fr) minmax(150px, 1.2fr); }
}

@media (max-width: 980px) {
  .bf-live-workspace { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .bf-live-route-rail { height: 470px; max-height: 470px; }
  .bf-live-map-panel { height: 540px; }
}

@media (max-width: 620px) {
  .bf-live-route-row {
    min-height: 82px;
    grid-template-columns: 3px 58px minmax(100px, 1fr) minmax(130px, 1.2fr);
    grid-template-rows: auto auto;
  }
  .bf-live-route-timing { display: none; }
  .bf-live-route-metrics { grid-column: 4; }
  .bf-live-route-footer { grid-column: 4; }
  .bf-live-map-legend { gap: 7px; font-size: 7px; }
}

/* Live Operations route overview */
body.bf-route-overview-open { overflow: hidden; }

.bf-route-overview[hidden] { display: none !important; }

.bf-route-overview {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: flex;
  justify-content: flex-end;
}

.bf-route-overview-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 12, 0.66);
  backdrop-filter: blur(4px);
}

.bf-route-overview-panel {
  position: relative;
  z-index: 1;
  width: min(900px, calc(100vw - 300px));
  height: 100%;
  overflow: hidden;
  border-left: 1px solid rgba(127, 143, 194, 0.2);
  color: #edf2ff;
  background: #080b15;
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.46);
  animation: bf-route-overview-in 220ms ease-out;
}

@keyframes bf-route-overview-in {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}

.bf-route-overview-header {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  left: 0;
  min-height: 92px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(122, 139, 190, 0.16);
  background: rgba(8, 11, 21, 0.94);
  backdrop-filter: blur(18px);
}

.bf-route-overview-header > div:first-child { min-width: 0; }

.bf-route-overview-header > div:first-child > button {
  padding: 0;
  border: 0;
  color: #8ea2c5;
  background: transparent;
  font: 700 10px/1.2 Inter, sans-serif;
  cursor: pointer;
}

.bf-route-overview-header > div:first-child > button:hover,
.bf-route-overview-header > div:first-child > button:focus-visible { color: #fff; }
.bf-route-overview-header > div:first-child > button span { margin-right: 4px; font-size: 18px; vertical-align: -2px; }
.bf-route-overview-header p { margin: 6px 0 2px; color: #6e7f9e; font: 700 8px/1.2 Inter, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; }
.bf-route-overview-header h2 { display: flex; min-width: 0; align-items: center; gap: 9px; margin: 0; font: 800 22px/1.2 Manrope, sans-serif; letter-spacing: -0.04em; }
.bf-route-overview-header h2 span,
.bf-route-overview-header h2 strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bf-route-overview-header h2 i { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: #6c78ff; }
.bf-route-overview-header h2 strong { color: #a9b7d2; font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }

.bf-route-overview-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.bf-route-overview-header-actions > button:not(.bf-route-overview-close) {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(119, 137, 190, 0.24);
  border-radius: 8px;
  color: #c5d0e4;
  background: #101625;
  font: 700 9px/1 Inter, sans-serif;
  cursor: pointer;
}

.bf-route-overview-header-actions > button:not(.bf-route-overview-close):hover,
.bf-route-overview-header-actions > button:not(.bf-route-overview-close):focus-visible { border-color: rgba(108, 120, 255, 0.65); color: #fff; background: #171d35; }

.bf-route-overview-close {
  width: 34px;
  height: 34px;
  display: grid;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(119, 137, 190, 0.24);
  border-radius: 8px;
  color: #9cabc3;
  background: #101625;
  font: 400 21px/1 Arial, sans-serif;
  cursor: pointer;
}

.bf-route-overview-close:hover,
.bf-route-overview-close:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.42); }

.bf-route-overview-status {
  display: inline-flex;
  min-height: 28px;
  box-sizing: border-box;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid rgba(57, 213, 172, 0.18);
  border-radius: 999px;
  color: #69dcbc;
  background: rgba(40, 178, 143, 0.08);
  font: 800 8px/1 Inter, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.bf-route-overview-status::before { width: 6px; height: 6px; content: ''; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.bf-route-overview-status.tone-red { color: #ff7589; border-color: rgba(255, 82, 112, 0.22); background: rgba(255, 60, 94, 0.08); }
.bf-route-overview-status.tone-yellow { color: #ffd15c; border-color: rgba(252, 194, 1, 0.22); background: rgba(252, 194, 1, 0.08); }
.bf-route-overview-status.tone-blue { color: #75c8ff; border-color: rgba(66, 166, 255, 0.22); background: rgba(66, 166, 255, 0.08); }

.bf-route-overview-body {
  height: calc(100% - 92px);
  box-sizing: border-box;
  margin-top: 92px;
  overflow-y: auto;
  padding: 18px 22px 38px;
  scrollbar-color: #313b59 transparent;
  scrollbar-width: thin;
}

.bf-route-overview-body > section { margin-bottom: 12px; }

.bf-route-overview-hero {
  display: grid;
  grid-template-columns: minmax(220px, 1.05fr) minmax(380px, 1.8fr);
  gap: 12px;
}

.bf-route-overview-summary,
.bf-route-overview-meta,
.bf-route-overview-chart-card,
.bf-route-overview-timing,
.bf-route-overview-progress-card,
.bf-route-overview-stops-card {
  border: 1px solid rgba(118, 136, 188, 0.16);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(17, 22, 39, 0.98), rgba(10, 13, 25, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

.bf-route-overview-summary { display: flex; min-height: 92px; box-sizing: border-box; align-items: center; gap: 13px; padding: 15px; }
.bf-route-overview-avatar { width: 47px; height: 47px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid rgba(117, 130, 255, 0.48); border-radius: 50%; color: #fff; background: linear-gradient(145deg, #29306c, #171d42); box-shadow: inset 0 0 14px rgba(116, 92, 255, 0.28); font: 800 14px/1 Manrope, sans-serif; }
.bf-route-overview-summary div { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.bf-route-overview-summary small { color: #64728e; font: 700 7px/1.2 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.bf-route-overview-summary strong { overflow: hidden; color: #f3f6ff; font: 800 14px/1.2 Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.bf-route-overview-summary div > span { color: #8897b2; font: 500 8px/1.3 Inter, sans-serif; }

.bf-route-overview-meta { display: grid; min-height: 92px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bf-route-overview-meta > span { display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 5px; padding: 12px 14px; border-left: 1px solid rgba(118, 136, 188, 0.12); }
.bf-route-overview-meta > span:first-child { border-left: 0; }
.bf-route-overview-meta small { color: #65738e; font: 700 7px/1.2 Inter, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.bf-route-overview-meta strong { overflow: hidden; color: #dfe6f5; font: 750 11px/1.25 Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }

.bf-route-overview-chart-card { padding: 15px 17px 10px; }
.bf-route-overview-chart-card > header,
.bf-route-overview-progress-card > header,
.bf-route-overview-stops-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.bf-route-overview-chart-card header p,
.bf-route-overview-progress-card header p,
.bf-route-overview-stops-card header p { margin: 0 0 3px; color: #6f7f9d; font: 800 7px/1.2 Inter, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; }
.bf-route-overview-chart-card header h3,
.bf-route-overview-progress-card header h3,
.bf-route-overview-stops-card header h3 { margin: 0; color: #eef3ff; font: 800 14px/1.25 Manrope, sans-serif; letter-spacing: -0.025em; }
.bf-route-overview-chart-card header > span,
.bf-route-overview-stops-card header > span { color: #74839f; font: 600 8px/1.2 Inter, sans-serif; }
.bf-route-overview-chart-wrap { height: 235px; margin-top: 8px; overflow: hidden; }
.bf-route-overview-chart-wrap svg { width: 100%; height: 100%; overflow: visible; }
#routeOverviewChart .grid { stroke: rgba(130, 148, 193, 0.1); stroke-width: 1; }
#routeOverviewChart .axis { stroke: rgba(154, 170, 211, 0.25); stroke-width: 1; }
#routeOverviewChart .axis-y,
#routeOverviewChart .axis-x { fill: #64738f; font: 500 9px Inter, sans-serif; }
#routeOverviewChart .empty { fill: #75839d; font: 600 11px Inter, sans-serif; }
#routeOverviewChart .actual-line { fill: none; stroke: #41d2bb; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
#routeOverviewChart .planned-line { fill: none; stroke: #7686a9; stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; stroke-linejoin: round; }
#routeOverviewChart .actual-point { fill: #41d2bb; stroke: #07111a; stroke-width: 2; }
#routeOverviewChart .planned-point { fill: #0c101c; stroke: #aab6cc; stroke-width: 2; }
#routeOverviewChart .actual-line.cortex { stroke-width: 2.4; }
#routeOverviewChart .planned-line.cortex { stroke-width: 1.6; stroke-dasharray: 3 4; opacity: 0.92; }
.bf-route-overview-chart-card > footer { display: flex; align-items: center; gap: 16px; padding: 0 2px 4px; color: #8492ac; font: 600 8px/1.2 Inter, sans-serif; }
.bf-route-overview-chart-card > footer span { display: inline-flex; align-items: center; gap: 6px; }
.bf-route-overview-chart-card > footer strong { color: #aebbd0; font-weight: 700; }
.bf-route-overview-chart-card > footer i { width: 9px; height: 9px; border-radius: 50%; }
.bf-route-overview-chart-card > footer i.actual { background: #41d2bb; }
.bf-route-overview-chart-card > footer i.planned { border: 1px solid #8c9bb7; background: transparent; }

.bf-route-overview-timing { overflow: hidden; }
.bf-route-overview-timing article { min-height: 48px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 14px; border-top: 1px solid rgba(118, 136, 188, 0.12); }
.bf-route-overview-timing article:first-child { border-top: 0; }
.bf-route-overview-timing article span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.bf-route-overview-timing small { color: #697894; font: 700 7px/1.2 Inter, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; }
.bf-route-overview-timing strong { overflow: hidden; color: #b9c5d9; font: 650 9px/1.3 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.bf-route-overview-timing b { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(108, 120, 255, 0.2); border-radius: 6px; color: #9daaff; background: rgba(108, 120, 255, 0.08); font: 800 9px/1 Inter, sans-serif; }

.bf-route-overview-progress-card { padding: 15px 16px 14px; }
.bf-route-overview-progress-card header > strong { color: #91adff; font: 800 22px/1 Manrope, sans-serif; letter-spacing: -0.045em; }
.bf-route-overview-progress-track { position: relative; height: 12px; margin-top: 13px; overflow: visible; border: 1px solid #303a50; border-radius: 3px; background: #20283a; }
.bf-route-overview-progress-track > i { display: block; min-width: 2px; max-width: 100%; height: 100%; border-radius: 2px; background: #42cbb7; transition: width 250ms ease; }
.bf-route-overview-progress-track > b { position: absolute; top: -2px; bottom: -2px; width: 2px; background: repeating-linear-gradient(to bottom, #fff 0 3px, #080b12 3px 6px); transform: translateX(-1px); }
.bf-route-overview-progress-copy { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; margin-top: 7px; color: #a3afc3; font: 650 8px/1.2 Inter, sans-serif; }
.bf-route-overview-progress-copy strong { color: #57d9c1; text-align: center; }
.bf-route-overview-progress-copy span:last-child { text-align: right; }
.bf-route-overview-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; overflow: hidden; border: 1px solid rgba(118, 136, 188, 0.13); border-radius: 9px; background: rgba(4, 7, 15, 0.28); }
.bf-route-overview-stat-grid article { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 12px 14px; border-left: 1px solid rgba(118, 136, 188, 0.12); }
.bf-route-overview-stat-grid article:first-child { border-left: 0; }
.bf-route-overview-stat-grid small { color: #687792; font: 800 7px/1.2 Inter, sans-serif; letter-spacing: 0.09em; text-transform: uppercase; }
.bf-route-overview-stat-grid strong { color: #f0f4ff; font: 800 14px/1.15 Manrope, sans-serif; }
.bf-route-overview-stat-grid span { overflow: hidden; color: #74829b; font: 550 8px/1.2 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }

.bf-route-overview-stops-card { padding: 15px 16px 16px; }
.bf-route-overview-stop-tools { display: flex; align-items: center; gap: 10px; margin-top: 13px; }
.bf-route-overview-stop-tools > label:first-child { min-height: 36px; box-sizing: border-box; display: flex; flex: 1 1 auto; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid rgba(118, 136, 188, 0.18); border-radius: 8px; background: #0a0e1a; }
.bf-route-overview-stop-tools svg { width: 13px; height: 13px; fill: none; stroke: #6d7c98; stroke-width: 1.7; }
.bf-route-overview-stop-tools input[type='search'] { min-width: 0; width: 100%; border: 0; outline: 0; color: #dbe3f2; background: transparent; font: 600 9px/1 Inter, sans-serif; }
.bf-route-overview-stop-tools input::placeholder { color: #5e6c86; }
.bf-route-overview-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; color: #8795ae; font: 650 8px/1.2 Inter, sans-serif; cursor: pointer; }
.bf-route-overview-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bf-route-overview-toggle span { position: relative; width: 27px; height: 15px; border: 1px solid #39435a; border-radius: 999px; background: #151b2a; }
.bf-route-overview-toggle span::after { position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; content: ''; border-radius: 50%; background: #7b879d; transition: transform 150ms ease, background 150ms ease; }
.bf-route-overview-toggle input:checked + span { border-color: #6d76ff; background: rgba(101, 91, 255, 0.25); }
.bf-route-overview-toggle input:checked + span::after { background: #fff; transform: translateX(12px); }
.bf-route-overview-stop-list { display: flex; flex-direction: column; gap: 7px; margin-top: 11px; }
.bf-route-overview-stop { position: relative; display: grid; min-height: 62px; box-sizing: border-box; grid-template-columns: 36px minmax(0, 1fr) minmax(130px, auto) 34px; align-items: center; gap: 11px; padding: 8px 10px; border: 1px solid rgba(118, 136, 188, 0.16); border-radius: 9px; background: #0a0f1c; }
.bf-route-overview-stop.completed { border-color: rgba(62, 203, 173, 0.2); }
.bf-route-overview-stop > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; color: #9fb0ce; background: #141b2c; font: 800 10px/1 Inter, sans-serif; }
.bf-route-overview-stop > div:nth-child(2) { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.bf-route-overview-stop > div:nth-child(2) strong { overflow: hidden; color: #e3e9f6; font: 750 10px/1.25 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.bf-route-overview-stop > div:nth-child(2) small { overflow: hidden; color: #72809a; font: 550 8px/1.25 Inter, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.bf-route-overview-stop > div:nth-child(3) { display: flex; min-width: 120px; flex-direction: column; align-items: flex-end; gap: 3px; }
.bf-route-overview-stop > div:nth-child(3) strong { color: #57d9c1; font: 800 9px/1.2 Inter, sans-serif; }
.bf-route-overview-stop > div:nth-child(3) small { color: #65738d; font: 550 7px/1.2 Inter, sans-serif; }
.bf-route-overview-stop-actions { width: 30px; height: 30px; display: grid; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 7px; color: #8290aa; background: transparent; font: 900 11px/1 Arial, sans-serif; letter-spacing: 1px; cursor: pointer; }
.bf-route-overview-stop-actions:hover,
.bf-route-overview-stop-actions:focus-visible { border-color: rgba(108, 120, 255, 0.35); color: #fff; background: rgba(108, 120, 255, 0.12); }
.bf-route-overview-stop-menu { position: absolute; z-index: 2; top: 48px; right: 9px; width: 230px; display: flex; flex-direction: column; gap: 5px; padding: 11px; border: 1px solid rgba(124, 140, 193, 0.28); border-radius: 9px; background: #151a29; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.bf-route-overview-stop-menu strong { color: #eef3ff !important; font: 750 9px/1.2 Inter, sans-serif !important; }
.bf-route-overview-stop-menu span { color: #8795ac; font: 550 8px/1.35 Inter, sans-serif; }
.bf-route-overview-stop-empty { min-height: 120px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; padding: 20px; border: 1px dashed rgba(118, 136, 188, 0.18); border-radius: 9px; color: #6f7d96; text-align: center; background: rgba(5, 8, 16, 0.36); }
.bf-route-overview-stop-empty > span { display: grid; min-width: 36px; height: 27px; place-items: center; border: 1px solid rgba(108, 120, 255, 0.26); border-radius: 8px; color: #9da8ff; background: rgba(108, 120, 255, 0.08); font: 800 9px/1 Arial, sans-serif; letter-spacing: 2px; }
.bf-route-overview-stop-empty strong { color: #b9c4d7; font: 750 10px/1.2 Inter, sans-serif; }
.bf-route-overview-stop-empty p { max-width: 420px; margin: 0; color: #68758d; font: 550 8px/1.45 Inter, sans-serif; }
.bf-route-detail-retry { margin-top: 5px; min-height: 30px; padding: 0 13px; border: 1px solid rgba(119, 112, 255, 0.42); border-radius: 8px; color: #f5f7ff; background: linear-gradient(135deg, rgba(82, 91, 255, 0.3), rgba(169, 78, 255, 0.24)); font: 750 8px/1 Inter, sans-serif; cursor: pointer; }
.bf-route-detail-retry:hover { border-color: rgba(143, 136, 255, 0.72); background: linear-gradient(135deg, rgba(82, 91, 255, 0.42), rgba(169, 78, 255, 0.34)); }
.bf-route-overview-stop-empty.compact { min-height: 80px; }

@media (max-width: 1180px) {
  .bf-route-overview-panel { width: min(860px, calc(100vw - 80px)); }
}

@media (max-width: 780px) {
  .bf-route-overview-panel { width: 100%; }
  .bf-route-overview-header { min-height: 104px; align-items: flex-start; padding: 13px 15px; }
  .bf-route-overview-header-actions { padding-top: 4px; }
  .bf-route-overview-header-actions > button:not(.bf-route-overview-close),
  .bf-route-overview-status { display: none; }
  .bf-route-overview-body { height: calc(100% - 104px); margin-top: 104px; padding: 14px 14px 30px; }
  .bf-route-overview-hero { grid-template-columns: 1fr; }
  .bf-route-overview-meta { grid-template-columns: repeat(2, 1fr); }
  .bf-route-overview-meta > span:nth-child(3) { border-left: 0; border-top: 1px solid rgba(118, 136, 188, 0.12); }
  .bf-route-overview-meta > span:nth-child(4) { border-top: 1px solid rgba(118, 136, 188, 0.12); }
  .bf-route-overview-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .bf-route-overview-stat-grid article:nth-child(3) { border-left: 0; border-top: 1px solid rgba(118, 136, 188, 0.12); }
  .bf-route-overview-stat-grid article:nth-child(4) { border-top: 1px solid rgba(118, 136, 188, 0.12); }
  .bf-route-overview-chart-wrap { height: 205px; }
}

@media (max-width: 520px) {
  .bf-route-overview-header h2 { display: block; font-size: 18px; }
  .bf-route-overview-header h2 i { display: none; }
  .bf-route-overview-header h2 strong { display: block; margin-top: 2px; font-size: 11px; }
  .bf-route-overview-chart-card { padding-right: 10px; padding-left: 10px; }
  .bf-route-overview-chart-wrap { height: 175px; }
  .bf-route-overview-stop-tools { align-items: flex-start; flex-direction: column; }
  .bf-route-overview-stop-tools > label:first-child { width: 100%; }
  .bf-route-overview-stop { grid-template-columns: 32px minmax(0, 1fr) 30px; }
  .bf-route-overview-stop > div:nth-child(3) { display: none; }
}

/* Daily Rostering — DispatchOS block-first assignment workbench. */
.bf-roster-workbench {
  --assignment-accent: 121, 113, 255;
  margin-top: 9px;
  overflow: hidden;
  border: 1px solid rgba(144, 158, 199, 0.14);
  border-radius: 15px;
  color: #e8ebf3;
  background: #080b13;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.23);
}

.bf-roster-workbench-header {
  display: grid;
  min-height: 104px;
  grid-template-columns: minmax(350px, 1.15fr) minmax(230px, 0.72fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(144, 158, 199, 0.12);
  background: radial-gradient(circle at 6% 0%, rgba(80, 115, 255, 0.11), transparent 34%), linear-gradient(120deg, #101626, #0b101b 62%, #090d16);
}

.bf-roster-workbench-title { display: flex; min-width: 0; align-items: center; gap: 12px; }
.bf-roster-workbench-title > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(var(--assignment-accent), 0.34); border-radius: 12px; color: #a8a4ff; background: rgba(var(--assignment-accent), 0.09); font-size: 17px; }
.bf-roster-workbench-title > div,
.bf-roster-workbench-progress,
.bf-roster-workbench-progress > div:first-child,
.bf-roster-workbench-stats article { display: flex; min-width: 0; flex-direction: column; }
.bf-roster-workbench-title small { color: #8f89ff; font-size: 6.5px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.bf-roster-workbench-title strong { margin-top: 3px; color: #f0f2f8; font-size: 12px; }
.bf-roster-workbench-title p { max-width: 560px; margin: 3px 0 0; color: #657188; font-size: 7px; line-height: 1.5; }
.bf-roster-workbench-progress { gap: 8px; }
.bf-roster-workbench-progress > div:first-child { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
.bf-roster-workbench-progress > div:first-child > span { color: #69758c; font-size: 6.5px; font-weight: 850; letter-spacing: 0.1em; text-transform: uppercase; }
.bf-roster-workbench-progress > div:first-child > strong { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }
.bf-roster-workbench-progress > div:first-child b { font: inherit; }
.bf-roster-workbench-progress > div:first-child small { margin-left: 5px; color: #9c97ff; font-size: 7px; }
.bf-roster-workbench-progress > div:last-child { width: 100%; height: 8px; overflow: hidden; border: 1px solid rgba(130, 143, 177, 0.15); border-radius: 999px; background: #141929; }
.bf-roster-workbench-progress > div:last-child i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3e76ff, #746bff 58%, #aa69ff); transition: width 220ms ease; }

.bf-roster-workbench-stats { display: flex; overflow: hidden; border: 1px solid rgba(144, 158, 199, 0.13); border-radius: 10px; background: rgba(255, 255, 255, 0.024); }
.bf-roster-workbench-stats article { min-width: 78px; gap: 2px; padding: 10px 11px; }
.bf-roster-workbench-stats article + article { border-left: 1px solid rgba(144, 158, 199, 0.1); }
.bf-roster-workbench-stats strong { color: #f0f2f8; font-size: 14px; }
.bf-roster-workbench-stats strong b { font: inherit; }
.bf-roster-workbench-stats strong small { margin-left: 1px; color: #68748a; font-size: 8px; }
.bf-roster-workbench-stats span { color: #667289; font-size: 5.8px; font-weight: 750; white-space: nowrap; }

.bf-roster-block-setup-button,
.bf-roster-block-setup > header button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 5px; padding: 0 10px; border: 1px solid rgba(var(--assignment-accent), 0.32); border-radius: 8px; color: #c8c5ff; background: rgba(var(--assignment-accent), 0.08); font: inherit; font-size: 6.5px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.bf-roster-block-setup-button:hover,
.bf-roster-block-setup > header button:hover { border-color: rgba(var(--assignment-accent), 0.55); background: rgba(var(--assignment-accent), 0.13); }
.bf-roster-block-setup { padding: 15px 18px 18px; border-bottom: 1px solid rgba(144, 158, 199, 0.12); background: #0b101b; }
.bf-roster-block-setup > header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.bf-roster-block-setup > header div { min-width: 0; }
.bf-roster-block-setup > header small,
.bf-roster-block-setup > header strong,
.bf-roster-block-setup > header p { display: block; margin: 0; }
.bf-roster-block-setup > header small { color: #8f89ff; font-size: 6px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.bf-roster-block-setup > header strong { margin-top: 3px; font-size: 10px; }
.bf-roster-block-setup > header p { margin-top: 3px; color: #657188; font-size: 6.5px; }
.bf-roster-capacity-grid { margin-top: 12px; overflow: hidden; border: 1px solid rgba(144, 158, 199, 0.12); border-radius: 10px; }
.bf-roster-capacity-head,
.bf-roster-capacity-row { display: grid; grid-template-columns: minmax(170px, 1fr) repeat(3, minmax(98px, 0.34fr)); align-items: center; }
.bf-roster-capacity-head { min-height: 30px; color: #68748a; background: rgba(255, 255, 255, 0.025); font-size: 5.8px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.bf-roster-capacity-head span,
.bf-roster-capacity-row > span,
.bf-roster-capacity-row > label { padding-inline: 10px; }
.bf-roster-capacity-head span:not(:first-child) { text-align: center; }
.bf-roster-capacity-row { min-height: 42px; border-top: 1px solid rgba(144, 158, 199, 0.09); }
.bf-roster-capacity-row > span { display: flex; align-items: center; gap: 8px; }
.bf-roster-capacity-row > span i { display: grid; width: 29px; height: 25px; place-items: center; border-radius: 7px; color: rgb(var(--service-color, 116, 139, 255)); background: rgba(var(--service-color, 116, 139, 255), 0.1); font-size: 5.7px; font-style: normal; font-weight: 900; }
.bf-roster-capacity-row > span strong { font-size: 7px; }
.bf-roster-capacity-row > label { display: flex; align-items: center; justify-content: center; gap: 5px; border-left: 1px solid rgba(144, 158, 199, 0.07); }
.bf-roster-capacity-row input { width: 45px; height: 27px; border: 1px solid rgba(144, 158, 199, 0.18); border-radius: 6px; outline: 0; color: #f2f4f9; background: #080c15; font: inherit; font-size: 8px; font-weight: 800; text-align: center; }
.bf-roster-capacity-row input:focus { border-color: rgba(var(--assignment-accent), 0.55); }
.bf-roster-capacity-row label small { color: #59667c; font-size: 5.5px; }

.bf-roster-workbench-body { display: grid; height: clamp(590px, 67vh, 760px); min-height: 590px; grid-template-columns: 225px minmax(330px, 1fr) 310px; overflow: hidden; background: #070a11; }
.bf-roster-block-navigator,
.bf-roster-driver-catalog,
.bf-roster-assignment-workspace { min-width: 0; min-height: 0; }
.bf-roster-block-navigator { display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid rgba(144, 158, 199, 0.11); background: #0b0f18; }
.bf-roster-block-navigator > header { display: flex; min-height: 52px; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 12px; border-bottom: 1px solid rgba(144, 158, 199, 0.1); }
.bf-roster-block-navigator > header span { color: #8390a8; font-size: 6px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.bf-roster-block-navigator > header small { color: #59667b; font-size: 6px; }
.bf-roster-standby-nav { width: calc(100% - 16px); min-height: 52px; display: grid; grid-template-columns: 29px minmax(0, 1fr) 12px; align-items: center; gap: 8px; margin: 8px; padding: 7px; border: 1px solid rgba(66, 213, 151, 0.17); border-radius: 9px; color: inherit; background: rgba(66, 213, 151, 0.035); text-align: left; cursor: pointer; }
.bf-roster-standby-nav:hover,
.bf-roster-standby-nav.active { border-color: rgba(66, 213, 151, 0.42); background: rgba(66, 213, 151, 0.085); }
.bf-roster-standby-nav > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #52d6a5; background: rgba(66, 213, 151, 0.11); }
.bf-roster-standby-nav > div { min-width: 0; }
.bf-roster-standby-nav strong,
.bf-roster-standby-nav small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-standby-nav strong { font-size: 7px; }
.bf-roster-standby-nav small { margin-top: 2px; color: #617087; font-size: 5.5px; }
.bf-roster-standby-nav > b { color: #6f7c92; font-size: 14px; }
.bf-roster-block-nav-list { min-height: 0; flex: 1; overflow-y: auto; padding: 0 8px 10px; scrollbar-width: thin; }
.bf-roster-block-nav-list > section + section { margin-top: 6px; }
.bf-roster-block-nav-list > section > header { display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 2px 5px; }
.bf-roster-block-nav-list > section > header div { display: flex; align-items: center; gap: 6px; }
.bf-roster-block-nav-list > section > header span { width: 23px; height: 20px; display: grid; place-items: center; border-radius: 6px; color: #aba6ff; background: rgba(var(--assignment-accent), 0.1); font-size: 5.5px; font-weight: 900; }
.bf-roster-block-nav-list > section > header strong { font-size: 6.5px; }
.bf-roster-block-nav-list > section > header small { color: #526076; font-size: 5.5px; }
.bf-roster-block-nav-list section > button { --service-color: 77, 184, 221; width: 100%; min-height: 54px; display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 8px 7px 0; border: 1px solid rgba(144, 158, 199, 0.1); border-radius: 8px; color: inherit; background: rgba(255, 255, 255, 0.018); text-align: left; cursor: pointer; }
.bf-roster-block-nav-list section > button:hover { border-color: rgba(var(--service-color), 0.32); background: rgba(var(--service-color), 0.045); }
.bf-roster-block-nav-list section > button.active { border-color: rgba(var(--service-color), 0.5); background: rgba(var(--service-color), 0.09); box-shadow: inset 0 0 0 1px rgba(var(--service-color), 0.06); }
.bf-roster-block-nav-list section > button > i { width: 3px; height: 100%; border-radius: 0 4px 4px 0; background: rgb(var(--service-color)); }
.bf-roster-block-nav-list section > button > div { min-width: 0; }
.bf-roster-block-nav-list section > button strong,
.bf-roster-block-nav-list section > button small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-block-nav-list section > button strong { font-size: 7px; }
.bf-roster-block-nav-list section > button small { margin-top: 2px; color: #617087; font-size: 5.5px; }
.bf-roster-block-nav-list section > button > div > span { display: block; height: 3px; overflow: hidden; margin-top: 5px; border-radius: 999px; background: #1a2130; }
.bf-roster-block-nav-list section > button > div > span i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--service-color)); }
.bf-roster-block-nav-list section > button > b { color: #dfe3ed; font-size: 10px; font-variant-numeric: tabular-nums; }
.bf-roster-block-nav-list section > button > b small { display: inline; color: #647188; font-size: 6px; }
.bf-roster-nav-empty { padding: 8px; border: 1px dashed rgba(144, 158, 199, 0.11); border-radius: 7px; color: #4f5c71; font-size: 5.5px; text-align: center; }
.service-cyan { --service-color: 72, 198, 226 !important; }
.service-purple { --service-color: 157, 128, 236 !important; }
.service-green { --service-color: 88, 205, 145 !important; }
.service-amber { --service-color: 242, 177, 91 !important; }
.service-blue { --service-color: 92, 149, 240 !important; }
.service-sand { --service-color: 194, 151, 109 !important; }

.bf-roster-assignment-workspace { display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(circle at 58% 0%, rgba(111, 101, 255, 0.045), transparent 35%), #090d16; }
.bf-roster-workspace-block-header,
.bf-roster-workspace-standby-header { --service-color: 121, 113, 255; display: grid; min-height: 104px; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 15px 16px; border-bottom: 1px solid rgba(144, 158, 199, 0.11); background: linear-gradient(125deg, rgba(var(--service-color), 0.08), rgba(255, 255, 255, 0.008) 55%, transparent); }
.bf-roster-workspace-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.bf-roster-workspace-title > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(var(--service-color), 0.32); border-radius: 11px; color: rgb(var(--service-color)); background: rgba(var(--service-color), 0.09); font-size: 7px; font-weight: 900; }
.bf-roster-workspace-title > div { min-width: 0; }
.bf-roster-workspace-title small,
.bf-roster-workspace-title h4,
.bf-roster-workspace-title p { overflow: hidden; display: block; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-workspace-title small { color: rgb(var(--service-color)); font-size: 6px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.bf-roster-workspace-title h4 { margin-top: 3px; color: #f0f2f8; font-size: 15px; letter-spacing: -0.025em; }
.bf-roster-workspace-title p { margin-top: 3px; color: #647188; font-size: 6.5px; }
.bf-roster-workspace-capacity { display: flex; min-width: 72px; flex-direction: column; align-items: flex-end; }
.bf-roster-workspace-capacity > strong { color: #f2f4f9; font-size: 20px; }
.bf-roster-workspace-capacity > strong span { color: #657188; font-size: 10px; }
.bf-roster-workspace-capacity > small { color: #647188; font-size: 5.8px; }
.bf-roster-workspace-capacity > div { width: 70px; height: 4px; overflow: hidden; margin-top: 5px; border-radius: 999px; background: #19202e; }
.bf-roster-workspace-capacity > div i { display: block; height: 100%; border-radius: inherit; background: rgb(var(--service-color)); }
.bf-roster-workspace-status { display: flex; min-width: 126px; align-items: center; gap: 8px; padding: 8px; border: 1px solid rgba(var(--service-color), 0.22); border-radius: 9px; background: rgba(var(--service-color), 0.05); }
.bf-roster-workspace-status > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: rgb(var(--service-color)); background: rgba(var(--service-color), 0.11); font-size: 10px; }
.bf-roster-workspace-status > div { min-width: 0; }
.bf-roster-workspace-status strong,
.bf-roster-workspace-status small { display: block; white-space: nowrap; }
.bf-roster-workspace-status strong { font-size: 7px; }
.bf-roster-workspace-status small { margin-top: 2px; color: #647188; font-size: 5.5px; }
.bf-roster-workspace-status.complete { border-color: rgba(66, 213, 151, 0.28); background: rgba(66, 213, 151, 0.06); }
.bf-roster-workspace-status.complete > span { color: #51d6a5; background: rgba(66, 213, 151, 0.12); }
.bf-roster-workspace-driver-section { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; padding: 14px; }
.bf-roster-workspace-driver-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 1px 10px; border-bottom: 1px solid rgba(144, 158, 199, 0.09); }
.bf-roster-workspace-driver-section > header > div { display: flex; flex-direction: column; gap: 3px; }
.bf-roster-workspace-driver-section > header span { color: #647188; font-size: 6px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.bf-roster-workspace-driver-section > header strong { font-size: 9px; }
.bf-roster-workspace-driver-section > header small { color: #647188; font-size: 6.5px; }
.bf-roster-workspace-driver-grid { display: grid; min-height: 0; flex: 1; grid-template-columns: repeat(2, minmax(145px, 1fr)); align-content: start; gap: 7px; overflow-y: auto; padding-top: 11px; scrollbar-width: thin; }
.bf-roster-workspace-driver-grid > article { min-width: 0; min-height: 50px; display: grid; grid-template-columns: 29px minmax(0, 1fr) 24px; align-items: center; gap: 8px; padding: 6px; border: 1px solid rgba(144, 158, 199, 0.1); border-radius: 9px; background: rgba(255, 255, 255, 0.022); }
.bf-roster-workspace-driver-grid > article > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; color: #aaa6ff; background: rgba(var(--assignment-accent), 0.1); font-size: 7px; font-weight: 900; }
.bf-roster-workspace-driver-grid > article > div { min-width: 0; }
.bf-roster-workspace-driver-grid > article strong,
.bf-roster-workspace-driver-grid > article small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-workspace-driver-grid > article strong { font-size: 7.5px; }
.bf-roster-workspace-driver-grid > article small { margin-top: 2px; color: #647188; font-size: 6px; }
.bf-roster-workspace-driver-grid > article button,
.bf-roster-workspace-standby-grid article > button { width: 24px; height: 24px; border: 0; border-radius: 6px; color: #6b778e; background: transparent; cursor: pointer; }
.bf-roster-workspace-driver-grid > article button:hover,
.bf-roster-workspace-standby-grid article > button:hover { color: #ff8a95; background: rgba(255, 111, 124, 0.07); }
.bf-roster-workspace-empty { display: flex; min-height: 220px; grid-column: 1 / -1; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px; color: #657188; text-align: center; }
.bf-roster-workspace-empty > span { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(var(--assignment-accent), 0.22); border-radius: 12px; color: #9690ff; background: rgba(var(--assignment-accent), 0.07); font-size: 15px; }
.bf-roster-workspace-empty strong { color: #d9dde7; font-size: 10px; }
.bf-roster-workspace-empty p { max-width: 320px; margin: 0; font-size: 6.5px; line-height: 1.5; }
.bf-roster-workspace-empty > button { min-height: 32px; margin-top: 4px; padding: 0 11px; border: 1px solid rgba(var(--assignment-accent), 0.33); border-radius: 8px; color: #c7c3ff; background: rgba(var(--assignment-accent), 0.08); font: inherit; font-size: 6.5px; font-weight: 800; cursor: pointer; }

.bf-roster-driver-catalog { display: flex; flex-direction: column; overflow: hidden; border-left: 1px solid rgba(144, 158, 199, 0.11); background: #0c111b; }
.bf-roster-driver-catalog > header { display: flex; min-height: 76px; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px; border-bottom: 1px solid rgba(144, 158, 199, 0.1); background: linear-gradient(135deg, rgba(var(--assignment-accent), 0.09), transparent 66%); }
.bf-roster-driver-catalog > header > div { min-width: 0; }
.bf-roster-driver-catalog > header span,
.bf-roster-driver-catalog > header strong,
.bf-roster-driver-catalog > header small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-driver-catalog > header span { color: #8f89ff; font-size: 6px; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.bf-roster-driver-catalog > header strong { margin-top: 4px; font-size: 9px; }
.bf-roster-driver-catalog > header small { margin-top: 3px; color: #647188; font-size: 5.8px; }
.bf-roster-driver-catalog > header > b { min-width: 40px; color: #eef0f6; font-size: 15px; text-align: right; }
.bf-roster-driver-catalog > header > b > span { color: inherit; font: inherit; letter-spacing: 0; }
.bf-roster-driver-catalog > header > b small { color: #647188; font-size: 5.5px; font-weight: 700; }
.bf-roster-driver-catalog .bf-roster-search { margin-top: 10px; }
.bf-roster-driver-catalog .bf-roster-add-driver { grid-template-columns: minmax(0, 1fr) 88px 39px; }
.bf-roster-catalog-target { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px; margin: 0 12px 8px; padding: 8px; border: 1px solid rgba(var(--assignment-accent), 0.2); border-radius: 8px; background: rgba(var(--assignment-accent), 0.045); }
.bf-roster-catalog-target > span { display: grid; min-width: 34px; height: 30px; place-items: center; border-radius: 7px; color: #a8a4ff; background: rgba(var(--assignment-accent), 0.1); font-size: 7px; font-weight: 900; }
.bf-roster-catalog-target strong,
.bf-roster-catalog-target small { display: block; }
.bf-roster-catalog-target strong { font-size: 7px; }
.bf-roster-catalog-target small { margin-top: 2px; color: #647188; font-size: 5.5px; }
.bf-roster-catalog-target.complete { border-color: rgba(66, 213, 151, 0.23); background: rgba(66, 213, 151, 0.05); }
.bf-roster-catalog-target.complete > span { color: #52d6a5; background: rgba(66, 213, 151, 0.11); }
.bf-roster-driver-catalog .bf-roster-driver-list { min-height: 0; max-height: none; flex: 1; }
.bf-roster-driver-catalog .bf-roster-driver-list > button { min-height: 48px; flex: 0 0 auto; }
.bf-roster-driver-catalog .bf-roster-driver-list > button:disabled { opacity: 0.34; cursor: not-allowed; }
.bf-roster-driver-catalog .bf-roster-driver-list > button:disabled:hover { border-color: rgba(143, 157, 190, 0.1); background: rgba(255, 255, 255, 0.02); }
.bf-roster-driver-catalog > footer { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-top: 1px solid rgba(144, 158, 199, 0.1); color: #647188; font-size: 5.8px; }
.bf-roster-driver-catalog > footer strong,
.bf-roster-driver-catalog > footer b { color: #c5cad5; font-size: 6.5px; }

.bf-roster-workspace-standby-header { --service-color: 66, 213, 151; grid-template-columns: minmax(0, 1fr) auto; }
.bf-roster-standby-add-actions { display: flex; gap: 5px; }
.bf-roster-standby-add-actions button { min-width: 59px; min-height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid rgba(66, 213, 151, 0.22); border-radius: 8px; color: #52d6a5; background: rgba(66, 213, 151, 0.05); font: inherit; cursor: pointer; }
.bf-roster-standby-add-actions button span { font-size: 7px; font-weight: 850; }
.bf-roster-standby-add-actions button small { color: #647188; font-size: 5.5px; }
.bf-roster-standby-add-actions button:hover,
.bf-roster-standby-add-actions button.active { border-color: rgba(66, 213, 151, 0.5); background: rgba(66, 213, 151, 0.12); }
.bf-roster-workspace-standby-grid { display: grid; min-height: 0; flex: 1; grid-template-columns: 1fr; align-content: start; gap: 7px; overflow-y: auto; padding-top: 11px; scrollbar-width: thin; }
.bf-roster-workspace-standby-grid article { min-width: 0; display: grid; grid-template-columns: minmax(150px, 0.9fr) minmax(130px, 1.1fr) 24px; align-items: center; gap: 7px; padding: 8px; border: 1px solid rgba(66, 213, 151, 0.15); border-radius: 9px; background: rgba(66, 213, 151, 0.025); }
.bf-roster-workspace-standby-grid article > div { min-width: 0; display: flex; align-items: center; gap: 7px; }
.bf-roster-workspace-standby-grid article > div > strong { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.bf-roster-standby-wave-picker { display: grid; flex: 0 0 auto; grid-template-columns: repeat(3, 29px); gap: 3px; }
.bf-roster-standby-wave-picker button { width: 29px; height: 28px; padding: 0; border: 1px solid rgba(66, 213, 151, 0.2); border-radius: 7px; color: #647188; background: #091212; font: inherit; font-size: 6.5px; font-weight: 900; cursor: pointer; }
.bf-roster-standby-wave-picker button:hover { color: #52d6a5; }
.bf-roster-standby-wave-picker button.active { border-color: rgba(66, 213, 151, 0.58); color: #07110d; background: #42d597; }
.bf-roster-workspace-standby-grid input { width: 100%; height: 32px; padding: 0 8px; border: 1px solid rgba(144, 158, 199, 0.14); border-radius: 7px; outline: 0; color: #e4e7ef; background: #080d15; font: inherit; font-size: 6.5px; }
.bf-roster-workspace-standby-grid input:focus { border-color: rgba(66, 213, 151, 0.48); }
.bf-roster-workspace-standby-grid input.required { border-color: rgba(242, 177, 91, 0.45); }

@media (max-width: 1420px) {
  .bf-roster-workbench-header { grid-template-columns: minmax(300px, 1fr) minmax(200px, 0.7fr) auto; }
  .bf-roster-block-setup-button { grid-column: 3; grid-row: 2; justify-self: end; }
  .bf-roster-workbench-stats { grid-column: 1 / 3; width: fit-content; }
  .bf-roster-workbench-body { grid-template-columns: 205px minmax(300px, 1fr) 280px; }
}

@media (max-width: 1080px) {
  .bf-roster-workbench-header { grid-template-columns: 1fr auto; }
  .bf-roster-workbench-progress { grid-column: 1 / -1; }
  .bf-roster-workbench-stats { grid-column: 1; }
  .bf-roster-block-setup-button { grid-column: 2; grid-row: 3; }
  .bf-roster-workbench-body { height: auto; min-height: 0; grid-template-columns: 210px minmax(0, 1fr); overflow: visible; }
  .bf-roster-driver-catalog { min-height: 480px; grid-column: 1 / -1; border-top: 1px solid rgba(144, 158, 199, 0.11); border-left: 0; }
  .bf-roster-assignment-workspace { min-height: 500px; }
}

@media (max-width: 720px) {
  .bf-roster-workbench-header { grid-template-columns: 1fr; }
  .bf-roster-workbench-stats { width: 100%; }
  .bf-roster-workbench-stats article { flex: 1; }
  .bf-roster-block-setup-button { grid-column: 1; grid-row: auto; justify-self: stretch; }
  .bf-roster-capacity-head,
  .bf-roster-capacity-row { grid-template-columns: minmax(130px, 1fr) repeat(3, minmax(62px, 0.38fr)); }
  .bf-roster-capacity-row label small { display: none; }
  .bf-roster-workbench-body { grid-template-columns: 1fr; }
  .bf-roster-block-navigator { max-height: 440px; border-right: 0; border-bottom: 1px solid rgba(144, 158, 199, 0.11); }
  .bf-roster-assignment-workspace { min-height: 520px; }
  .bf-roster-workspace-block-header,
  .bf-roster-workspace-standby-header { grid-template-columns: 1fr; }
  .bf-roster-workspace-capacity { align-items: flex-start; }
  .bf-roster-workspace-status { width: 100%; }
  .bf-roster-workspace-driver-grid { grid-template-columns: 1fr; }
  .bf-roster-workspace-standby-grid article { grid-template-columns: 1fr 24px; }
  .bf-roster-workspace-standby-grid input { grid-column: 1 / -1; grid-row: 2; }
}

/* Daily Rostering — DispatchOS command-center structure in the BeyondFantastic system. */
.owner-view.scheduling-page.bf-roster-view {
  --roster-accent: #8b63ff;
  --roster-accent-rgb: 139, 99, 255;
  --roster-pink: #f14ec6;
  --roster-cyan: #60a5fa;
  --roster-green: #45d6a0;
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px 30px;
  color: #f3f4fa;
  background: transparent;
  font-size: 12px;
}

.bf-roster-view button,
.bf-roster-view input { font: inherit; }
.bf-roster-view button { color: inherit; }
.bf-roster-view .eyebrow { color: var(--roster-pink); font-size: 9px; font-weight: 900; letter-spacing: .13em; }

.scheduling-command-center,
.scheduling-progress-console,
.capacity-panel,
.swap-panel,
.driver-plan-panel {
  min-width: 0;
  border: 1px solid rgba(157, 170, 211, .15);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(13, 17, 31, .98), rgba(7, 10, 18, .98));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .14);
}
.scheduling-command-center { overflow: hidden; border-top-color: rgba(241, 78, 198, .65); }
.scheduling-hero { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 20px 14px; }
.scheduling-hero > div:first-child { min-width: 0; }
.scheduling-hero h2 { margin: 6px 0 4px; color: #f7f8fd; font-size: clamp(21px, 2vw, 30px); line-height: 1.05; letter-spacing: -.045em; }
.scheduling-hero p { margin: 0; color: #7f8aa8; font-size: 10px; }
.scheduling-hero-actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 9px; }
.scheduling-shared-status { display: flex; min-width: 270px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(69, 214, 160, .24); border-radius: 9px; background: rgba(69, 214, 160, .045); }
.scheduling-shared-status > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(69, 214, 160, .24); border-radius: 7px; color: var(--roster-green); background: rgba(69, 214, 160, .08); }
.scheduling-shared-status > div { display: flex; flex-direction: column; gap: 1px; }
.scheduling-shared-status strong { font-size: 9px; }
.scheduling-shared-status small { max-width: 250px; color: #76829f; font-size: 7px; }
.scheduling-date-stepper { display: grid; grid-template-columns: 34px 126px 34px; gap: 6px; }
.scheduling-date-stepper > button,
.scheduling-date-stepper > label { height: 39px; border: 1px solid rgba(145, 159, 199, .2); border-radius: 9px; background: #0a0f1b; }
.scheduling-date-stepper > button { display: grid; place-items: center; color: #7f8ba9; font-size: 23px; line-height: 1; cursor: pointer; }
.scheduling-date-stepper > button:hover { border-color: rgba(var(--roster-accent-rgb), .5); color: #fff; background: rgba(var(--roster-accent-rgb), .08); }
.scheduling-date-stepper > label { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.scheduling-date-stepper label span { color: #8ca1dc; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.scheduling-date-stepper input { width: 100%; border: 0; outline: 0; color: #f4f6ff; background: transparent; font-size: 9px; font-weight: 850; text-align: center; color-scheme: dark; }

.scheduling-source-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 20px 10px; }
.scheduling-source-strip article { display: grid; min-height: 63px; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid rgba(145, 159, 199, .16); border-radius: 9px; background: rgba(3, 6, 12, .36); }
.scheduling-source-strip article.ready { border-color: rgba(69, 214, 160, .25); background: rgba(69, 214, 160, .025); }
.scheduling-source-strip article.checking { border-color: rgba(var(--roster-accent-rgb), .26); }
.source-state-icon { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--roster-green); background: rgba(69, 214, 160, .08); font-size: 16px; }
.scheduling-source-strip article > div { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.scheduling-source-strip article small { color: var(--roster-green); font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.scheduling-source-strip article strong { font-size: 9px; }
.scheduling-source-strip article p { overflow: hidden; margin: 0; color: #75819d; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.scheduling-source-strip article > button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(145, 159, 199, .16); border-radius: 7px; color: #8290b0; background: rgba(255, 255, 255, .02); cursor: pointer; }
.scheduling-source-strip article > button:disabled { opacity: .45; cursor: default; }

.sling-connection-panel { display: flex; min-height: 48px; align-items: center; gap: 10px; margin: 0 20px 8px; padding: 8px 10px; border: 1px solid rgba(145, 159, 199, .15); border-radius: 8px; background: rgba(3, 6, 12, .28); }
.sling-connection-icon { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 7px; color: var(--roster-green); background: rgba(69, 214, 160, .08); }
.sling-connection-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.sling-connection-copy strong { font-size: 9px; }
.sling-connection-copy span { color: #74809b; font-size: 7px; }
.sling-connection-actions button,
.driver-plan-heading-actions button,
.driver-plan-summary button { min-height: 29px; padding: 0 11px; border: 1px solid rgba(145, 159, 199, .2); border-radius: 7px; background: #0a0f1b; font-size: 7px; font-weight: 800; }
.sling-connection-actions button:disabled,
.driver-plan-heading-actions button:disabled,
.driver-plan-summary button:disabled { color: #7b87a6; opacity: .7; }
.scheduling-command-footer { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 20px 9px; color: #7b87a4; font-size: 7px; }
.scheduling-command-footer strong { color: #f0f2fa; font-size: 8px; }
.scheduling-command-footer span { color: #5cbf9d; }

.scheduling-progress-console { overflow: hidden; }
.scheduling-progress-console > header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 17px 10px; }
.scheduling-progress-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.scheduling-progress-title > span { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(241, 78, 198, .35); border-radius: 8px; color: var(--roster-pink); background: rgba(241, 78, 198, .08); }
.scheduling-progress-title > div { display: flex; min-width: 0; flex-direction: column; gap: 1px; }
.scheduling-progress-title small { color: var(--roster-pink); font-size: 7px; font-weight: 900; letter-spacing: .11em; }
.scheduling-progress-title strong { font-size: 13px; }
.scheduling-progress-title p { margin: 0; color: #737f9b; font-size: 7px; }
.scheduling-progress-total { display: flex; flex-direction: column; align-items: flex-end; }
.scheduling-progress-total > span { color: #f2f3fa; font-size: 18px; font-weight: 850; }
.scheduling-progress-total > span strong { color: var(--roster-pink); }
.scheduling-progress-total > span i { padding: 0 4px; color: #64708c; font-style: normal; }
.scheduling-progress-total small { color: var(--roster-pink); font-size: 7px; font-weight: 850; }
.scheduling-progress-master { height: 3px; background: rgba(151, 164, 203, .08); }
.scheduling-progress-master > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--roster-pink), var(--roster-accent)); transition: width .22s ease; }
.scheduling-progress-stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scheduling-progress-stages article { position: relative; display: grid; min-width: 0; min-height: 61px; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 10px 14px 11px; border-right: 1px solid rgba(145, 159, 199, .12); }
.scheduling-progress-stages article:last-child { border-right: 0; }
.scheduling-progress-stage-icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #8190b2; background: rgba(126, 142, 183, .08); }
.scheduling-progress-stages article.complete .scheduling-progress-stage-icon { color: var(--roster-green); background: rgba(69, 214, 160, .1); }
.scheduling-progress-stage-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.scheduling-progress-stage-copy strong { font-size: 8px; }
.scheduling-progress-stage-copy small { color: #6f7b96; font-size: 7px; }
.scheduling-progress-stages article > b { font-size: 9px; white-space: nowrap; }
.scheduling-progress-stages article > b i { padding: 0 3px; color: #58637d; font-style: normal; }
.scheduling-progress-stage-track { position: absolute; right: 14px; bottom: 6px; left: 14px; height: 2px; overflow: hidden; border-radius: 999px; background: rgba(145, 159, 199, .08); }
.scheduling-progress-stage-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--roster-accent), var(--roster-pink)); }

.scheduling-kpi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.scheduling-kpi-grid article { display: flex; min-width: 0; min-height: 78px; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid rgba(145, 159, 199, .15); border-radius: 10px; background: linear-gradient(145deg, rgba(12, 16, 29, .96), rgba(6, 9, 16, .96)); }
.scheduling-kpi-grid article > span { color: var(--roster-green); font-size: 19px; }
.scheduling-kpi-grid article.routes > span { color: #63a5ff; }
.scheduling-kpi-grid article.fleet > span { color: #a07bff; }
.scheduling-kpi-grid article.extras > span { color: #4fd8bb; }
.scheduling-kpi-grid article.ready > span { color: var(--roster-green); }
.scheduling-kpi-grid article > div { display: flex; min-width: 0; flex-direction: column; }
.scheduling-kpi-grid small { color: #7885a4; font-size: 7px; font-weight: 800; letter-spacing: .04em; }
.scheduling-kpi-grid strong { color: #f5f6fb; font-size: 26px; line-height: 1.1; letter-spacing: -.04em; }
.scheduling-kpi-grid p { overflow: hidden; margin: 1px 0 0; color: #6c7893; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }

.scheduling-analysis-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: 10px; }
.capacity-panel,
.swap-panel { overflow: hidden; }
.scheduling-panel-heading { display: flex; min-height: 60px; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 15px; border-bottom: 1px solid rgba(145, 159, 199, .13); }
.scheduling-panel-heading > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.scheduling-panel-heading h3 { margin: 0; color: #f2f3f8; font-size: 13px; }
.scheduling-panel-heading > span { padding: 5px 8px; border: 1px solid rgba(145, 159, 199, .14); border-radius: 999px; color: #7b87a3; background: rgba(255, 255, 255, .02); font-size: 7px; white-space: nowrap; }
.capacity-table-wrap { overflow-x: auto; }
.capacity-table { width: 100%; border-collapse: collapse; }
.capacity-table th { height: 30px; padding: 0 10px; color: #71809f; font-size: 6px; font-weight: 900; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.capacity-table td { height: 48px; padding: 6px 10px; border-top: 1px solid rgba(145, 159, 199, .09); color: #e9ebf3; font-size: 8px; }
.capacity-table td:nth-child(n+3) { text-align: center; }
.capacity-table td:nth-child(2) { min-width: 290px; }
.capacity-table td:nth-child(2) strong,
.capacity-table td:nth-child(2) small { display: block; }
.capacity-table td:nth-child(2) strong { font-size: 8px; }
.capacity-table td:nth-child(2) small { margin-top: 2px; color: #64708b; font-size: 6px; }
.priority-number { display: grid; width: 17px; height: 17px; place-items: center; border: 1px solid rgba(145, 159, 199, .22); border-radius: 5px; color: #95a0bd; font-size: 7px; }
.metric-value { color: #f6f7fc; font-size: 18px; }
.active-van-value { display: inline-grid; min-width: 34px; height: 25px; place-items: center; border-radius: 6px; color: #f6f7fd; background: rgba(123, 97, 255, .09); font-size: 15px; font-weight: 850; }
.difference-pill { display: inline-grid; min-width: 30px; height: 19px; place-items: center; border-radius: 999px; font-size: 7px; font-weight: 850; }
.difference-pill.positive { color: var(--roster-green); background: rgba(69, 214, 160, .1); }
.difference-pill.even { color: #8290ae; background: rgba(130, 144, 174, .08); }
.difference-pill.negative { color: #ff8fa5; background: rgba(255, 90, 130, .1); }
.row-status { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 999px; font-size: 7px; font-weight: 800; }
.row-status.covered { color: var(--roster-green); background: rgba(69, 214, 160, .08); }
.row-status.needs { color: #ff8fa5; background: rgba(255, 90, 130, .08); }
.swap-panel-body { display: grid; min-height: 300px; place-items: center; padding: 20px; }
.swap-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--roster-green); text-align: center; }
.swap-empty span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(69, 214, 160, .25); border-radius: 9px; background: rgba(69, 214, 160, .06); }
.swap-empty strong { max-width: 260px; font-size: 8px; }
.swap-empty.attention { color: #ff9bad; }

.driver-plan-panel { overflow: hidden; }
.driver-plan-heading { min-height: 77px; }
.driver-plan-heading p { margin: 1px 0 0; color: #707c96; font-size: 7px; }
.driver-plan-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 7px; }
.driver-plan-heading-actions > span { margin-right: 4px; padding: 6px 9px; border: 1px solid rgba(145, 159, 199, .15); border-radius: 999px; color: #7e8aa6; font-size: 7px; }
.driver-plan-heading-actions > span strong { color: #fff; }

.roster-workbench { margin: 0 12px 10px; overflow: hidden; border: 1px solid rgba(145, 159, 199, .15); border-radius: 10px; background: #070b13; }
.roster-workbench-header { display: grid; min-height: 86px; grid-template-columns: minmax(340px, 1.35fr) minmax(210px, .65fr) auto; align-items: center; gap: 18px; padding: 12px 14px; border-bottom: 1px solid rgba(145, 159, 199, .13); background: linear-gradient(90deg, rgba(241, 78, 198, .07), transparent 40%); }
.roster-workbench-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.roster-workbench-title > span { display: grid; width: 35px; height: 35px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(241, 78, 198, .28); border-radius: 9px; color: var(--roster-pink); background: rgba(241, 78, 198, .07); }
.roster-workbench-title > div { display: flex; min-width: 0; flex-direction: column; }
.roster-workbench-title small { color: var(--roster-pink); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.roster-workbench-title strong { font-size: 11px; }
.roster-workbench-title p { overflow: hidden; margin: 2px 0 0; color: #6f7b97; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.roster-workbench-progress { display: flex; flex-direction: column; gap: 6px; }
.roster-workbench-progress > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roster-workbench-progress span { color: #7a87a4; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.roster-workbench-progress strong { font-size: 11px; }
.roster-workbench-progress strong small { margin-left: 5px; color: var(--roster-pink); font-size: 7px; }
.roster-workbench-progress > div:last-child { height: 3px; overflow: hidden; border-radius: 999px; background: rgba(145, 159, 199, .09); }
.roster-workbench-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--roster-pink), var(--roster-accent)); }
.roster-workbench-stats { display: flex; align-items: stretch; }
.roster-workbench-stats article { display: flex; min-width: 72px; flex-direction: column; align-items: center; justify-content: center; padding: 0 9px; border-left: 1px solid rgba(145, 159, 199, .12); }
.roster-workbench-stats strong { color: #f5f6fb; font-size: 14px; }
.roster-workbench-stats strong small { color: #6f7a94; font-size: 9px; }
.roster-workbench-stats span { color: #6f7b96; font-size: 6px; }

.roster-workbench-body { display: grid; height: clamp(540px, 66vh, 700px); min-height: 0; grid-template-columns: 250px minmax(420px, 1fr) 278px; overflow: hidden; }
.roster-block-navigator { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow-y: auto; border-right: 1px solid rgba(145, 159, 199, .12); background: #080d15; }
.roster-block-navigator > header { display: flex; flex-direction: column; gap: 2px; padding: 13px 12px 9px; }
.roster-block-navigator > header span { color: #7e8ca9; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.roster-block-navigator > header small { color: #65718c; font-size: 7px; }
.roster-standby-nav { display: grid; min-height: 64px; grid-template-columns: 34px minmax(0, 1fr) 14px; align-items: center; gap: 9px; margin: 0 10px 10px; padding: 8px; border: 1px solid rgba(69, 214, 160, .22); border-radius: 9px; color: #e8ebf3; background: rgba(69, 214, 160, .04); text-align: left; cursor: pointer; }
.roster-standby-nav.active { border-color: rgba(69, 214, 160, .52); background: rgba(69, 214, 160, .09); box-shadow: inset 3px 0 0 var(--roster-green); }
.roster-standby-nav > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; color: var(--roster-green); background: rgba(69, 214, 160, .1); }
.roster-standby-nav > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.roster-standby-nav strong { font-size: 9px; }
.roster-standby-nav small { overflow: hidden; color: #78849f; font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.roster-standby-nav > b { color: #6f7c98; font-size: 17px; }
.roster-block-nav-list { display: flex; flex-direction: column; gap: 7px; padding: 0 10px 12px; }
.roster-wave-group { display: flex; flex-direction: column; gap: 5px; }
.roster-wave-group > header { display: flex; align-items: center; justify-content: space-between; padding: 5px 3px 2px; color: #69758f; }
.roster-wave-group > header span { font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.roster-wave-group > header small { font-size: 6px; }
.roster-wave-group > p { margin: 0; padding: 7px 8px; border: 1px dashed rgba(145, 159, 199, .11); border-radius: 7px; color: #546078; font-size: 7px; text-align: center; }
.roster-wave-group > button { display: grid; min-height: 51px; grid-template-columns: 30px minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 7px; border: 1px solid rgba(145, 159, 199, .12); border-radius: 8px; color: #e8ebf2; background: rgba(255, 255, 255, .018); text-align: left; cursor: pointer; }
.roster-wave-group > button.active { border-color: rgba(var(--roster-accent-rgb), .48); background: rgba(var(--roster-accent-rgb), .08); box-shadow: inset 3px 0 0 var(--roster-accent); }
.roster-wave-group > button > span { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 7px; color: #9b83ff; background: rgba(var(--roster-accent-rgb), .1); font-size: 7px; font-weight: 900; }
.roster-wave-group > button > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.roster-wave-group > button strong,
.roster-wave-group > button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-wave-group > button strong { font-size: 8px; }
.roster-wave-group > button small { color: #69758f; font-size: 6px; }
.roster-wave-group > button > b { color: #6d7892; }

.roster-assignment-workspace { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: #070b12; }
.roster-workspace-block-header { --service-color: 139, 99, 255; display: grid; min-height: 82px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid rgba(145, 159, 199, .1); background: linear-gradient(120deg, rgba(var(--service-color), .08), transparent 55%); }
.roster-workspace-block-header.service-electric { --service-color: 89, 179, 255; }
.roster-workspace-block-header.service-cdv { --service-color: 160, 123, 255; }
.roster-workspace-block-header.service-xl { --service-color: 69, 214, 160; }
.roster-workspace-block-header.service-large { --service-color: 245, 184, 92; }
.roster-workspace-block-header.service-medium { --service-color: 92, 158, 237; }
.roster-workspace-block-header.service-small { --service-color: 193, 151, 109; }
.roster-workspace-title { display: flex; min-width: 0; align-items: center; gap: 11px; }
.roster-workspace-title > span { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(var(--service-color), .28); border-radius: 10px; color: rgb(var(--service-color)); background: rgba(var(--service-color), .08); font-size: 10px; font-weight: 900; }
.roster-workspace-title > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.roster-workspace-title small { color: rgb(var(--service-color)); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.roster-workspace-title h4 { overflow: hidden; margin: 0; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.roster-workspace-title p { overflow: hidden; margin: 0; color: #6f7a94; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.roster-workspace-status { display: flex; min-width: 125px; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid rgba(var(--service-color), .2); border-radius: 8px; background: rgba(var(--service-color), .04); }
.roster-workspace-status > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; color: rgb(var(--service-color)); background: rgba(var(--service-color), .09); }
.roster-workspace-status > div { display: flex; flex-direction: column; }
.roster-workspace-status strong { font-size: 8px; }
.roster-workspace-status small { color: #6d7992; font-size: 6px; }
.roster-workspace-driver-section { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; padding: 13px; }
.roster-workspace-driver-section > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 1px 9px; border-bottom: 1px solid rgba(145, 159, 199, .09); }
.roster-workspace-driver-section > header > div { display: flex; flex-direction: column; gap: 2px; }
.roster-workspace-driver-section > header span { color: #75829f; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.roster-workspace-driver-section > header strong { font-size: 9px; }
.roster-workspace-driver-section > header small { color: #68748e; font-size: 7px; }
.roster-workspace-driver-grid,
.roster-workspace-standby-grid { display: grid; min-height: 0; flex: 1; align-content: start; gap: 7px; overflow-y: auto; padding-top: 11px; }
.roster-workspace-driver-grid { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
.roster-workspace-driver-grid > article { display: grid; min-height: 49px; grid-template-columns: 29px minmax(0, 1fr) 24px; align-items: center; gap: 8px; padding: 6px; border: 1px solid rgba(145, 159, 199, .1); border-radius: 9px; background: rgba(255, 255, 255, .02); }
.roster-workspace-driver-grid > article > span,
.roster-driver-initials { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #a78fff; background: rgba(var(--roster-accent-rgb), .1); font-size: 7px; font-weight: 900; }
.roster-workspace-driver-grid > article > div { display: flex; min-width: 0; flex-direction: column; }
.roster-workspace-driver-grid strong { font-size: 8px; }
.roster-workspace-driver-grid small { color: #69758f; font-size: 6px; }
.roster-workspace-driver-grid button,
.roster-workspace-standby-grid article > button { display: grid; width: 23px; height: 23px; place-items: center; border: 0; border-radius: 6px; color: #7b87a1; background: transparent; cursor: pointer; }
.roster-workspace-empty { display: flex; min-height: 220px; grid-column: 1 / -1; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #69758f; text-align: center; }
.roster-workspace-empty > span { display: grid; width: 43px; height: 43px; place-items: center; border: 1px solid rgba(var(--roster-accent-rgb), .22); border-radius: 12px; color: #a48bff; background: rgba(var(--roster-accent-rgb), .06); }
.roster-workspace-empty strong { color: #e9ebf3; font-size: 10px; }
.roster-workspace-empty p { margin: 0; font-size: 7px; }
.roster-workspace-standby-header { --service-color: 69, 214, 160; }
.roster-standby-add-actions { display: flex; gap: 6px; }
.roster-standby-add-actions button { display: flex; min-width: 58px; min-height: 38px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(69, 214, 160, .2); border-radius: 8px; color: var(--roster-green); background: rgba(69, 214, 160, .04); cursor: pointer; }
.roster-standby-add-actions button.active { border-color: rgba(69, 214, 160, .54); background: rgba(69, 214, 160, .11); }
.roster-standby-add-actions button span { font-size: 8px; font-weight: 850; }
.roster-standby-add-actions button small { color: #72809a; font-size: 6px; }
.roster-workspace-standby-grid { grid-template-columns: 1fr; }
.roster-workspace-standby-grid article { display: grid; grid-template-columns: minmax(130px, .8fr) auto minmax(130px, 1fr) 24px; align-items: center; gap: 7px; padding: 7px; border: 1px solid rgba(69, 214, 160, .13); border-radius: 9px; background: rgba(69, 214, 160, .02); }
.roster-workspace-standby-grid article > div:first-child { display: flex; min-width: 0; align-items: center; gap: 7px; }
.roster-workspace-standby-grid article strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.roster-standby-wave-picker { display: grid; grid-template-columns: repeat(3, 30px); gap: 3px; }
.roster-standby-wave-picker button { width: 30px; height: 28px; border: 1px solid rgba(69, 214, 160, .18); border-radius: 6px; color: #74809a; background: #091012; font-size: 7px; font-weight: 850; }
.roster-standby-wave-picker button.active { color: #06120d; background: var(--roster-green); }
.roster-workspace-standby-grid input { height: 31px; padding: 0 8px; border: 1px solid rgba(145, 159, 199, .13); border-radius: 7px; outline: 0; color: #ebedf5; background: #080d15; font-size: 7px; }

.roster-driver-catalog { display: flex; min-width: 0; min-height: 0; flex-direction: column; border-left: 1px solid rgba(145, 159, 199, .12); background: #0a0f18; }
.roster-driver-catalog > header { display: flex; min-height: 70px; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 12px; border-bottom: 1px solid rgba(145, 159, 199, .1); background: linear-gradient(135deg, rgba(var(--roster-accent-rgb), .09), transparent 65%); }
.roster-driver-catalog > header > div { display: flex; min-width: 0; flex-direction: column; }
.roster-driver-catalog > header span { color: #a48bff; font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.roster-driver-catalog > header strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.roster-driver-catalog > header small { color: #6c7891; font-size: 6px; }
.roster-driver-catalog > header > b { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; }
.roster-driver-catalog > header > b small { color: #6a7690; font-size: 6px; }
.roster-driver-catalog > label { display: flex; align-items: center; gap: 7px; margin: 9px 9px 6px; padding: 0 8px; border: 1px solid rgba(145, 159, 199, .14); border-radius: 8px; color: #6e7b96; background: #070b12; }
.roster-driver-catalog > label:focus-within { border-color: rgba(var(--roster-accent-rgb), .5); }
.roster-driver-catalog > label input { width: 100%; min-width: 0; height: 34px; border: 0; outline: 0; color: #f0f2f8; background: transparent; font-size: 8px; }
.roster-catalog-target { display: flex; align-items: center; gap: 8px; margin: 0 9px 8px; padding: 7px 8px; border: 1px solid rgba(var(--roster-accent-rgb), .2); border-radius: 8px; background: rgba(var(--roster-accent-rgb), .04); }
.roster-catalog-target > span { display: grid; min-width: 32px; height: 28px; place-items: center; border-radius: 7px; color: #aa92ff; background: rgba(var(--roster-accent-rgb), .1); font-size: 7px; font-weight: 900; }
.roster-catalog-target > div { display: flex; min-width: 0; flex-direction: column; }
.roster-catalog-target strong { font-size: 8px; }
.roster-catalog-target small { color: #68748e; font-size: 6px; }
.roster-driver-catalog-list { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: 5px; overflow-y: auto; padding: 0 9px 9px; }
.roster-driver-catalog-list > button { display: grid; min-height: 46px; flex: 0 0 auto; grid-template-columns: 29px minmax(0, 1fr) 23px; align-items: center; gap: 8px; padding: 6px 7px; border: 1px solid rgba(145, 159, 199, .09); border-radius: 8px; color: #e9ebf3; background: rgba(255, 255, 255, .018); text-align: left; cursor: pointer; }
.roster-driver-catalog-list > button:hover { border-color: rgba(var(--roster-accent-rgb), .38); background: rgba(var(--roster-accent-rgb), .065); }
.roster-driver-catalog-list > button:disabled { opacity: .35; cursor: not-allowed; }
.roster-driver-catalog-list > button > span { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 7px; color: #aa92ff; background: rgba(var(--roster-accent-rgb), .1); font-size: 7px; font-weight: 900; }
.roster-driver-catalog-list > button > div { display: flex; min-width: 0; flex-direction: column; }
.roster-driver-catalog-list strong,
.roster-driver-catalog-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-driver-catalog-list strong { font-size: 8px; }
.roster-driver-catalog-list small { color: #68748e; font-size: 6px; }
.roster-driver-catalog-list b { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; color: #a890ff; background: rgba(var(--roster-accent-rgb), .08); font-size: 13px; }
.roster-driver-catalog-empty { display: grid; min-height: 180px; place-items: center; padding: 20px; color: #66718a; font-size: 8px; text-align: center; }
.roster-driver-catalog > footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px 6px 11px; border-top: 1px solid rgba(145, 159, 199, .1); color: #67738d; font-size: 6px; }
.roster-driver-catalog > footer strong { color: #e9ebf3; font-size: 8px; }
.roster-driver-catalog > footer button { min-height: 25px; padding: 0 8px; border: 1px solid rgba(var(--roster-accent-rgb), .22); border-radius: 7px; color: #9d87f7; background: rgba(var(--roster-accent-rgb), .05); font-size: 7px; }

.driver-plan-summary { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 18px; margin: 0 12px 12px; padding: 10px 12px; border: 1px solid rgba(145, 159, 199, .13); border-radius: 9px; background: rgba(255, 255, 255, .015); }
.driver-plan-summary > div { display: flex; align-items: center; gap: 9px; }
.driver-plan-summary > div:first-child > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: var(--roster-green); background: rgba(69, 214, 160, .08); }
.driver-plan-summary p { display: flex; flex-direction: column; margin: 0; }
.driver-plan-summary p strong { font-size: 9px; }
.driver-plan-summary p small { color: #6d7992; font-size: 7px; }
.driver-plan-summary > div:last-child { justify-content: flex-end; }
.driver-plan-summary > div:last-child > small { color: #7b87a2; font-size: 7px; }

@media (max-width: 1380px) {
  .owner-view.scheduling-page.bf-roster-view { padding-inline: 16px; }
  .roster-workbench-body { grid-template-columns: 215px minmax(360px, 1fr) 250px; }
  .roster-workbench-header { grid-template-columns: minmax(290px, 1.2fr) minmax(190px, .7fr) auto; gap: 12px; }
  .scheduling-kpi-grid strong { font-size: 22px; }
}

@media (max-width: 1120px) {
  .scheduling-hero { align-items: flex-start; }
  .scheduling-source-strip { grid-template-columns: 1fr; }
  .scheduling-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scheduling-analysis-grid { grid-template-columns: 1fr; }
  .roster-workbench-header { grid-template-columns: 1fr auto; }
  .roster-workbench-progress { grid-column: 1 / -1; }
  .roster-workbench-body { height: auto; grid-template-columns: 220px minmax(0, 1fr); }
  .roster-driver-catalog { min-height: 450px; grid-column: 1 / -1; border-top: 1px solid rgba(145, 159, 199, .12); border-left: 0; }
  .roster-assignment-workspace { min-height: 500px; }
}

@media (max-width: 760px) {
  .owner-view.scheduling-page.bf-roster-view { padding: 12px 10px 24px; }
  .scheduling-hero { flex-direction: column; }
  .scheduling-hero-actions { width: 100%; align-items: stretch; }
  .scheduling-shared-status { min-width: 0; }
  .scheduling-date-stepper { justify-content: end; }
  .scheduling-progress-stages { grid-template-columns: 1fr 1fr; }
  .scheduling-kpi-grid { grid-template-columns: 1fr; }
  .sling-connection-panel { align-items: flex-start; flex-wrap: wrap; }
  .sling-connection-actions { width: 100%; }
  .driver-plan-heading { align-items: flex-start; flex-direction: column; }
  .driver-plan-heading-actions { justify-content: flex-start; }
  .roster-workbench-header { grid-template-columns: 1fr; }
  .roster-workbench-stats { justify-content: stretch; }
  .roster-workbench-stats article { flex: 1; }
  .roster-workbench-body { grid-template-columns: 1fr; }
  .roster-block-navigator { max-height: 420px; border-right: 0; border-bottom: 1px solid rgba(145, 159, 199, .12); }
  .roster-assignment-workspace { min-height: 520px; }
  .roster-workspace-block-header { grid-template-columns: 1fr; }
  .roster-workspace-standby-grid article { grid-template-columns: 1fr auto 24px; }
  .roster-workspace-standby-grid input { grid-column: 1 / -1; }
  .driver-plan-summary { align-items: flex-start; flex-direction: column; }
  .driver-plan-summary > div:last-child { flex-wrap: wrap; justify-content: flex-start; }
}