:root {
  --dashboard-enterprise-bg: #f7f9fc;
  --dashboard-enterprise-surface: #fff;
  --dashboard-enterprise-text: #0b1538;
  --dashboard-enterprise-secondary: #475467;
  --dashboard-enterprise-muted: #667085;
  --dashboard-enterprise-border: #e4eaf2;
  --dashboard-enterprise-blue: #0b6bff;
  --dashboard-enterprise-green: #12b76a;
  --dashboard-enterprise-orange: #ff8a00;
  --dashboard-enterprise-teal: #0ea5a4;
  --dashboard-enterprise-purple: #7c3aed;
  --dashboard-enterprise-amber: #f5b51b;
  --dashboard-enterprise-yellow: #d9a300;
  --dashboard-enterprise-red: #d92d3a;
  --dashboard-enterprise-money: #08704f;
}

.dashboard-enterprise-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(220px, 1fr) auto auto;
  align-items: center;
  min-block-size: 72px;
  padding-inline: clamp(20px, 3vw, 46px);
  color: var(--dashboard-enterprise-text);
  background: rgba(247, 249, 252, .92);
  border-block-end: 1px solid rgba(228, 234, 242, .7);
}

.dashboard-enterprise-header__brand,
.dashboard-enterprise-header__navigation,
.dashboard-enterprise-header__controls,
.dashboard-enterprise-header__profile {
  display: flex;
  align-items: center;
  min-inline-size: 0;
}

.dashboard-enterprise-header__navigation {
  justify-content: center;
  gap: 18px;
}

.dashboard-enterprise-header__controls {
  justify-content: flex-end;
  gap: 16px;
}

.dashboard-enterprise-header__profile {
  justify-content: flex-end;
  margin-inline-start: 18px;
}

.dashboard-enterprise-presentation {
  position: relative;
  isolation: isolate;
  inline-size: 100%;
  margin-inline: 0;
  overflow: clip;
  padding: 0 0 clamp(28px, 3vw, 44px);
  color: var(--dashboard-enterprise-text);
  background: var(--dashboard-enterprise-bg);
}

.dashboard-enterprise-hero {
  position: relative;
  z-index: 0;
  inline-size: 100%;
  block-size: clamp(231px, 20.3vw, 350px);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.dashboard-enterprise-hero::after {
  display: none;
}

.dashboard-enterprise-kpi-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(11px, 1.1vw, 15.5px);
  inline-size: calc(100% - clamp(40px, 5vw, 88px));
  margin: clamp(-120px, -7.7vw, -98px) auto 0;
}

/* Roles without KPI cards were left with nothing riding over the image, so the
   band simply ended and the seam between the photograph and the white page sat
   bare above the table. The lift the KPI grid performs is moved onto the block
   itself, so whatever comes next — the table — climbs over that seam by the same
   amount and covers it. Same offset in both cases, so the two layouts sit at the
   same height. */
.dashboard-enterprise-presentation:not(:has(.dashboard-enterprise-kpi-grid)) {
  margin-block-end: clamp(-72px, -4.6vw, -58px);
  padding-block-end: 0;
}

.dashboard-enterprise-kpi {
  --dashboard-kpi-accent: var(--dashboard-enterprise-blue);
  --dashboard-kpi-pale: #eaf2ff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(68px, .8fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(9px, .89vw, 15.5px);
  min-inline-size: 0;
  min-block-size: 120px;
  padding: clamp(15.5px, 1.28vw, 20px);
  overflow: hidden;
  background: var(--dashboard-enterprise-surface);
  border: 1px solid rgba(228, 234, 242, .94);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.dashboard-enterprise-kpi:hover {
  border-color: rgba(11, 107, 255, .15);
}

.dashboard-enterprise-kpi--yellow {
  --dashboard-kpi-accent: var(--dashboard-enterprise-yellow);
  --dashboard-kpi-pale: #fff7d6;
}

.dashboard-enterprise-kpi--red {
  --dashboard-kpi-accent: var(--dashboard-enterprise-red);
  --dashboard-kpi-pale: #fff0f1;
}

.dashboard-enterprise-kpi--green {
  --dashboard-kpi-accent: var(--dashboard-enterprise-green);
  --dashboard-kpi-pale: #e9f8f1;
}

.dashboard-enterprise-kpi--money {
  --dashboard-kpi-accent: var(--dashboard-enterprise-money);
  --dashboard-kpi-pale: #e8f6f0;
}

.dashboard-enterprise-kpi--amber {
  --dashboard-kpi-accent: var(--dashboard-enterprise-amber);
  --dashboard-kpi-pale: #fff7df;
}

.dashboard-enterprise-kpi__header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0 0 9px;
}

.dashboard-enterprise-kpi__header h2 {
  margin: 0;
  overflow: hidden;
  color: var(--dashboard-enterprise-text);
  font: 600 clamp(12px, .94vw, 15px)/1.25 Inter, "SF Pro Text", system-ui, sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-enterprise-kpi__icon {
  display: inline-grid;
  place-items: center;
  inline-size: 38px;
  block-size: 38px;
  color: var(--dashboard-kpi-accent);
  background: var(--dashboard-kpi-pale);
  border-radius: 11px;
}

.dashboard-enterprise-kpi__icon i {
  font-size: 21px;
  line-height: 1;
}

.dashboard-enterprise-kpi__value {
  grid-column: 1;
  display: block;
  align-self: end;
  min-block-size: 36px;
  color: var(--dashboard-enterprise-text);
  font: 650 clamp(27px, 1.95vw, 36px)/1.05 Inter, "SF Pro Display", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}

.dashboard-enterprise-kpi.is-unavailable .dashboard-enterprise-kpi__value {
  color: #98a2b3;
}

.dashboard-enterprise-kpi__comparison {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-block-size: 22px;
  margin-block-start: 3.5px;
  font: 500 clamp(10px, .76vw, 12px)/1.3 Inter, "SF Pro Text", system-ui, sans-serif;
  white-space: nowrap;
}

.dashboard-enterprise-kpi__comparison span {
  color: var(--dashboard-enterprise-secondary);
}

.dashboard-enterprise-kpi__comparison strong {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--dashboard-enterprise-muted);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dashboard-enterprise-kpi__comparison strong i {
  font-style: normal;
}

.dashboard-enterprise-kpi__comparison--favorable strong {
  color: var(--dashboard-enterprise-green);
}

.dashboard-enterprise-kpi__comparison--unfavorable strong {
  color: #f04438;
}

.dashboard-enterprise-kpi__spark {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
  min-block-size: 48px;
  margin-block-start: 0;
  color: var(--dashboard-kpi-accent);
}

.dashboard-enterprise-kpi__spark .kpi-sparkline {
  min-block-size: 50px;
}

.dashboard-enterprise-kpi__spark .kpi-sparkline svg {
  inline-size: 100%;
  block-size: 50px;
  overflow: visible;
}

.dashboard-enterprise-kpi__spark .kpi-sparkline__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  vector-effect: non-scaling-stroke;
}

.dashboard-enterprise-kpi__spark .kpi-sparkline__area {
  fill: currentColor;
  opacity: .11;
}

.dashboard-enterprise-kpi__spark .kpi-sparkline__area-stop--top,
.dashboard-enterprise-kpi__spark .kpi-sparkline__area-stop--bottom {
  stop-color: currentColor;
  stop-opacity: 1;
}

.dashboard-enterprise-kpi__spark .kpi-sparkline__baseline {
  stroke: #edf2f7;
  stroke-width: 1;
}

.dashboard-enterprise-kpi__spark .kpi-sparkline__cursor,
.dashboard-enterprise-kpi__spark .kpi-sparkline__point,
.dashboard-enterprise-kpi__spark .kpi-sparkline__tooltip {
  opacity: 0;
  pointer-events: none;
}

.dashboard-enterprise-kpi__spark--unavailable {
  display: flex;
  align-items: flex-end;
  border-block-end: 1px solid #edf2f7;
}

.dashboard-enterprise-kpi__spark--unavailable span {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 1260px) {
  .dashboard-enterprise-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block-start: -67px;
  }

  .dashboard-enterprise-header {
    grid-template-columns: auto 1fr auto;
  }

  .dashboard-enterprise-header__controls {
    grid-column: 1 / -1;
    justify-content: center;
    padding-block: 10px;
    border-block-start: 1px solid rgba(228, 234, 242, .72);
  }
}

@media (max-width: 760px) {
  .dashboard-enterprise-header {
    grid-template-columns: minmax(0, 1fr) auto;
    min-block-size: 58px;
    padding-inline: 16px;
  }

  .dashboard-enterprise-header__navigation {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-content: flex-start;
    overflow-x: auto;
    padding-block: 8px;
  }

  .dashboard-enterprise-header__controls {
    grid-row: 3;
    justify-content: flex-start;
    overflow-x: auto;
  }

  .dashboard-enterprise-presentation {
    inline-size: 100%;
  }

  .dashboard-enterprise-hero {
    block-size: 189px;
    background-position: 58% 48%;
  }

  .dashboard-enterprise-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    inline-size: calc(100% - 28px);
    margin-block-start: -50px;
  }

  .dashboard-enterprise-kpi {
    min-block-size: 112px;
  }
}

/* Shared authenticated presentation: one edge-to-edge terminal image with
   localized controls floating over it instead of a full-width header slab. */
.authenticated-terminal-shell .app-main {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: var(--dashboard-enterprise-bg);
}

/* The photographic band is gone (Alan, 2026-08-08). It was a full-width image
   downloaded in front of the first paint, for a decoration nothing depended on -
   and with the Company Overview title removed the page beneath it had nothing to
   sit against anyway. What is left is the page colour and the borders the cards
   and the table already carry. */

.authenticated-terminal-shell .page {
  position: relative;
  z-index: 1;
}
.authenticated-terminal-shell .page:not(:has(.dashboard-enterprise-presentation, .team-enterprise-page, .business-status-page, .settings-page)) {
  padding-top: 92px;
}

.dashboard-enterprise-hero {
  background: transparent;
}

.dashboard-enterprise-presentation {
  background: transparent;
}

.dashboard-enterprise-hero::after,
.business-status-hero::before {
  display: none;
}

@media (min-width: 900px) {
  /**
   * A real bar, in the flow (Alan, 2026-08-09: "所有界面都有一个上面的横 boarder,
   * 然后按键在一个横条上而不是一个覆盖其他的").
   *
   * This was `position: absolute; inset: 0 0 auto; background: transparent` - a
   * transparent strip floating over the page with three white pills on it. Every
   * page then had to dodge it by hand, which is what the 194px of padding at the
   * top of Settings was for, and any page that did not reserve exactly the right
   * amount had its own header land underneath the pills.
   *
   * One opaque bar that takes its own height ends both problems: nothing overlaps,
   * and no page has to know how tall the chrome is.
   */
  html body .authenticated-terminal-shell.authenticated-terminal-shell .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 52px;
    gap: clamp(8px, 1vw, 14px);
    padding: 5px clamp(10px, 1vw, 16px);
    border: 0;
    border-bottom: 1px solid var(--semantic-edge);
    background: #fff;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* On a bar, the pills are three cards floating on a card. The bar is the
     surface now, so its contents sit on it. */
  html body .authenticated-terminal-shell.authenticated-terminal-shell .desktop-top-brand,
  html body .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation {
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .desktop-top-brand {
    display: flex;
    min-width: 126px;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid #e4eaf2;
    border-radius: 15px;
    background: #fff;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .desktop-top-brand__mark {
    width: 108px;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation {
    gap: 2px;
    margin: 0 0 0 -5px;
    padding: 4px 6px;
    border: 1px solid #e4eaf2;
    border-radius: 16px;
    background: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn {
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 12px;
    color: #102b55;
    perspective: none;
    transform-style: flat;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn__back {
    display: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn__front {
    position: static;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #102b55;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn__icon,
  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn__icon svg {
    width: 22px;
    height: 22px;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn__icon i {
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn:hover .icon-btn__front,
  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn:focus-visible .icon-btn__front {
    color: #0b6bff;
    background: rgba(237, 243, 255, .92);
    transform: none;
  }

  /* The active marker sits under the icon, inside the bar (Alan, 2026-08-09:
     "这个蓝色的 bar 往上放移动，现在遮挡了"). It hung 8px below the button, which was
     past the bar's own bottom edge and straight onto the first row of column
     headings — harmless while the bar floated over an empty margin, a line drawn
     across the table now that the grid starts directly beneath it. */
  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn.active::after {
    position: absolute;
    inset: auto 8px -2px;
    height: 2px;
    border-radius: 999px;
    background: #0b6bff;
    content: "";
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn.active .icon-btn__front {
    color: #0b6bff;
    background: rgba(237, 243, 255, .96);
    box-shadow: none;
    transform: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-glass-navigation .icon-btn__label {
    display: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-add-launcher {
    display: flex;
    height: 48px;
    align-items: center;
    align-self: center;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .top-add-launcher__toggle {
    margin: 0;
    transform: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .shell-profile-menu {
    padding: 0;
    border-radius: 999px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .shell-profile-stack {
    width: 36px;
    min-width: 36px;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .shell-profile-caption {
    display: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .shell-profile-avatar {
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .authenticated-terminal-shell.authenticated-terminal-shell .shell-profile-avatar .user-avatar {
    width: 36px;
    height: 36px;
  }
}

.container-operations-panel__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 52px;
  padding: 8px 12px;
}

/* The strip above the table (Alan, 2026-08-13). It replaced a slot in the topbar,
   where the row shared one line with the logo, the nav, the task shelf and the
   profile menu - fifteen controls in the width those left over, which on a
   narrower screen simply ran off the end. */
.container-operations-controls {
  margin-bottom: 8px;
}

.container-operations-controls:empty { display: none; }

.container-operations-command-row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  /* Wraps instead of overflowing. The row is as wide as the table, which is
     enough on a normal screen; on a small one it becomes two lines rather than
     hiding whatever did not fit - and Filters and the edit lock were the two
     that fell off the end, which are the ones you cannot do without. */
  flex-wrap: wrap;
  /* Right-aligned as one cluster (Alan, 2026-08-13: "整体靠右"). Spread across the
     full width it left a lane of empty space in the middle, with the last three
     controls stranded against the far edge. */
  justify-content: flex-end;
  gap: 6px;
  row-gap: 6px;
  margin-left: 0;
}

/* Search takes a fixed share and does not grow (Alan, 2026-08-13: "不要把search
   bar那吗长"). It had flex: 1 1 220px, which handed it every spare pixel in a row
   that is now full-page width - a search box wider than the table's first six
   columns, to hold a container number. */
.container-operations-controls .container-operations-command-row .topbar-search {
  width: 240px;
  min-width: 200px;
  flex: 0 1 240px;
}

/* The chips lead the row and everything else follows them to the right edge. */
.container-operations-controls .container-operations-command-row .dashboard-work-pool-bar {
  margin-inline-end: auto;
}

.container-operations-command-row .topbar-date,
.container-operations-command-row .topbar-search,
.container-operations-command-row .topbar-compact-action,
.container-operations-command-row .dashboard-edit-button {
  display: flex;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  border-color: #e4eaf2;
  border-radius: 9px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  color: #102b55;
  font: 600 11.5px/1 Inter, "SF Pro Text", system-ui, sans-serif;
  letter-spacing: 0;
}

.container-operations-command-row .topbar-date {
  width: 126px;
  min-width: 126px;
  gap: 5px;
  padding: 3px 8px;
}

.container-operations-command-row .topbar-date input {
  width: 88px;
  height: 28px;
  min-height: 28px;
  padding: 1px 2px;
  color: inherit;
  font: inherit;
  line-height: 1;
}

.container-operations-command-row .topbar-search {
  width: min(214px, 17vw);
  min-width: 172px;
  padding-inline: 8px;
}

.container-operations-command-row .topbar-search input {
  height: 28px;
  min-height: 28px;
  color: inherit;
  font: inherit;
  line-height: 1;
}

.container-operations-command-row .topbar-search kbd {
  font: 600 9.5px/1 Inter, "SF Pro Text", system-ui, sans-serif;
}

.container-operations-command-row .topbar-compact-action {
  padding: 0 10px;
}

.container-operations-command-row .dashboard-edit-button {
  width: 74px;
  min-width: 74px;
  flex: 0 0 74px;
  justify-content: center;
  gap: 6px;
  padding-inline: 10px;
}

.container-operations-command-row .dashboard-edit-button__icon {
  position: static;
  right: auto;
  width: 14px;
  height: 14px;
  margin: 0;
  font-size: 14px;
  line-height: 1;
}

html body .authenticated-terminal-shell .container-operations-command-row .topbar-copy-containers {
  width: auto;
  min-width: 132px;
  padding-inline: 11px;
}

html body .authenticated-terminal-shell .container-operations-command-row .topbar-copy-containers [data-copy-label] {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: nowrap;
}

@media (max-width: 1460px) and (min-width: 900px) {
  .container-operations-command-row {
    justify-content: flex-end;
    overflow-x: auto;
    padding-bottom: 2px;
  }
}

@media (max-width: 899px) {


  .container-operations-panel__header {
    justify-content: flex-start;
  }

  .container-operations-command-row {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 3px;
  }

  .container-operations-command-row .topbar-date,
  .container-operations-command-row .topbar-search,
  .container-operations-command-row .topbar-compact-action,
  .container-operations-command-row .dashboard-edit-button {
    flex: 0 0 auto;
  }
}

@media (max-width: 460px) {
  .dashboard-enterprise-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Picking the empty a driver takes back: the table is narrowed to the Containers
   reported empty, so it has to say so — a table that silently shows 6 of 410 rows
   reads as broken data (Alan, 2026-08-03). */
.dashboard-empty-pick-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ay-accent-border, #b8d4f5);
  border-radius: 6px;
  background: var(--ay-accent-surface, #eef5fe);
  font-size: 12px;
  font-weight: 600;
  color: var(--ay-text-primary, #1f2733);
}

.dashboard-empty-pick-banner__cancel {
  border: 1px solid var(--ay-border, #d3d8de);
  border-radius: 4px;
  padding: 4px 10px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}