/*
 * V106 responsive authority
 * Direction: adaptive-density retail operations cockpit.
 * The page keeps its light SaaS visual language while progressively changing
 * information density: full ledger -> compact workspace -> operational cards.
 */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

.app-shell,
.main,
.topbar,
.topbar > *,
.topbar-actions,
.view-root,
.view-root > *,
.panel,
.panel-header,
.panel-header > *,
.toolbar,
.inline-actions,
.row-actions,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.topbar-actions select {
  width: clamp(180px, 22vw, 310px);
  min-width: 0 !important;
  max-width: 100%;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
  flex-wrap: wrap;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header > div:first-child {
  flex: 1 1 250px;
  min-width: 0;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar {
  flex: 1 1 480px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .toolbar > input,
.view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .toolbar > select {
  flex: 1 1 150px;
  width: auto;
  min-width: 0;
}

.view-root .table-wrap {
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

/* 用户管理是人员权限总账：每一列按信息权重占满卡片，不预留无业务含义的空白。 */
.view-root[data-view="settings"] .settings-user-panel,
.view-root[data-view="settings"] .settings-user-panel .table-wrap {
  width: 100%;
  min-width: 0;
}

.view-root[data-view="settings"] .settings-user-panel .table-wrap {
  overflow-x: hidden;
}

.view-root[data-view="settings"] .settings-user-panel table {
  width: 100% !important;
  min-width: 0 !important;
  table-layout: fixed !important;
}

.view-root[data-view="settings"] .settings-user-panel th,
.view-root[data-view="settings"] .settings-user-panel td {
  box-sizing: border-box;
  min-width: 0;
  padding-inline: clamp(8px, .8vw, 14px);
}

.view-root[data-view="settings"] .settings-user-panel th:nth-child(1) { width: 9% !important; }
.view-root[data-view="settings"] .settings-user-panel th:nth-child(2) { width: 15% !important; }
.view-root[data-view="settings"] .settings-user-panel th:nth-child(3) { width: 11% !important; }
.view-root[data-view="settings"] .settings-user-panel th:nth-child(4) { width: 15% !important; }
.view-root[data-view="settings"] .settings-user-panel th:nth-child(5) { width: 16% !important; }
.view-root[data-view="settings"] .settings-user-panel th:nth-child(6) { width: 9% !important; }
.view-root[data-view="settings"] .settings-user-panel th:nth-child(7) { width: 13% !important; }
.view-root[data-view="settings"] .settings-user-panel th:nth-child(8) { width: 12% !important; }

.view-root[data-view="settings"] .settings-user-panel th:last-child,
.view-root[data-view="settings"] .settings-user-panel td:last-child {
  text-align: right;
}

.view-root[data-view="settings"] .settings-user-panel td:last-child .small-button {
  min-width: 64px;
}

.modal {
  width: min(var(--modal-width, 820px), calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
}

.modal-body,
.form-grid,
.form-grid > *,
.modal-footer {
  min-width: 0;
}

/* Expanded/compact desktop: reclaim workspace without shrinking content text. */
@media (max-width: 1439px) and (min-width: 1181px) {
  body[data-ui-version="44"] .sidebar {
    width: 236px;
  }

  body[data-ui-version="44"] .main {
    margin-left: 236px;
  }

  body[data-ui-version="44"] .sidebar > .brand {
    min-height: 64px;
  }

  body[data-ui-version="44"] .nav > button,
  body[data-ui-version="44"] .nav .nav-group-toggle {
    min-height: 43px;
    font-size: 14.5px;
  }

  body[data-ui-version="44"] .nav .nav-sub-item {
    min-height: 36px;
    font-size: 13.5px;
  }

  body[data-ui-version="44"] .topbar {
    padding-inline: 20px;
  }

  body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) {
    padding-inline: 20px;
  }
}

/* Compressed desktop: title remains anchored; controls reflow on the same bar. */
@media (max-width: 1180px) and (min-width: 981px) {
  body[data-ui-version="44"] .sidebar {
    width: 218px;
    padding-inline: 10px;
  }

  body[data-ui-version="44"] .main {
    margin-left: 218px;
  }

  body[data-ui-version="44"] .sidebar > .brand {
    min-height: 60px;
    padding-inline: 6px;
  }

  body[data-ui-version="44"] .sidebar .brand-mark {
    width: 39px;
    height: 39px;
  }

  body[data-ui-version="44"] .sidebar .brand strong {
    font-size: 16px;
  }

  body[data-ui-version="44"] .nav > button,
  body[data-ui-version="44"] .nav .nav-group-toggle {
    min-height: 40px;
    gap: 9px;
    padding-inline: 10px;
    font-size: 14px;
  }

  body[data-ui-version="44"] .nav .nav-sub-item {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 13px;
  }

  body[data-ui-version="44"] .topbar {
    display: grid;
    grid-template-columns: minmax(160px, auto) minmax(0, 1fr);
    min-height: 84px;
    gap: 12px;
    padding: 12px 16px;
  }

  body[data-ui-version="44"] .topbar-actions {
    gap: 7px;
  }

  body[data-ui-version="44"] .topbar-actions .user-label {
    display: none;
  }

  body[data-ui-version="44"] .topbar-actions select {
    flex: 1 1 190px;
    width: auto;
  }

  body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) {
    gap: 14px;
    padding: 16px 16px 28px;
  }

  body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
    padding-inline: 18px;
  }
}

/* Work-plan ledger becomes a genuine responsive card system before controls clip. */
@media (max-width: 1180px) {
  .office-os-page,
  .office-execution-layout,
  .office-plan-ledger,
  .office-plan-list,
  .office-performance-panel,
  .office-performance-table {
    min-width: 0;
    max-width: 100%;
  }

  .office-plan-ledger,
  .office-performance-table {
    overflow: hidden;
  }

  .office-ledger-columns,
  .office-performance-head {
    display: none !important;
  }

  .office-plan-list {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: #f7f9fc;
  }

  .office-plan-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px 16px;
    width: 100%;
    min-width: 0;
    padding: 16px;
    border: 1px solid #e1e7f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(39, 55, 87, .045);
  }

  .office-plan-main {
    grid-column: 1 / -1;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f6;
  }

  .office-plan-copy > strong,
  .office-plan-copy > small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .office-plan-tags {
    flex-wrap: wrap;
  }

  .office-plan-tags b,
  .office-plan-tags em,
  .office-plan-tags em.assignment-review {
    max-width: 100%;
  }

  .office-plan-owner { grid-column: 1 / 4; }
  .office-plan-due { grid-column: 4 / 7; }
  .office-plan-progress { grid-column: 7 / 10; }
  .office-plan-health { grid-column: 10 / 13; }

  .office-plan-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    padding-top: 2px;
  }

  .office-plan-actions .small-button {
    min-height: 34px;
    padding-inline: 12px;
    font-size: 10px;
  }

  .office-performance-table {
    display: grid;
    gap: 10px;
    padding: 10px;
    background: #f7f9fc;
  }

  .office-performance-table article {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    width: 100%;
    min-width: 0;
    padding: 15px;
    border: 1px solid #e1e7f0;
    border-radius: 14px;
    background: #fff;
  }

  .office-performance-table article > .office-person {
    grid-column: span 2;
  }

  .office-performance-table article > p {
    grid-column: 1 / -2;
  }

  .office-performance-table article > button {
    align-self: end;
  }

  .office-filter-fields,
  .office-filter-fields select,
  .office-search {
    min-width: 0;
  }

  .office-filter-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .office-search {
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Tablet/small-window shell. Navigation becomes an off-canvas drawer. */
@media (max-width: 980px) {
  body[data-ui-version="44"] .main {
    width: 100%;
    margin-left: 0;
  }

  body[data-ui-version="44"] .sidebar {
    width: min(86vw, 300px) !important;
    max-width: 300px !important;
  }

  body[data-ui-version="44"] .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    min-height: 0;
    gap: 10px;
    padding: 12px 14px 12px 78px !important;
  }

  body[data-ui-version="44"] .topbar > div:first-child {
    min-width: 0;
  }

  body[data-ui-version="44"] .topbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  body[data-ui-version="44"] .topbar-actions .cloud-status,
  body[data-ui-version="44"] .topbar-actions .user-label {
    display: none;
  }

  body[data-ui-version="44"] .topbar-actions select {
    flex: 1 1 210px;
    width: auto;
  }

  body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]),
  body[data-ui-version="44"] .view-root[data-view="dashboard"] {
    width: 100%;
    min-height: 0;
    padding: 14px;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
    align-items: stretch;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar > input,
  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar > select {
    flex: 1 1 220px;
  }

  .product-catalog-actions,
  .store-catalog-actions,
  .news-filter-bar,
  .customer-queue-toolbar,
  .purchase-store-toolbar,
  .unified-order-toolbar {
    flex-wrap: wrap;
    height: auto;
    min-height: 0;
  }

  .dashboard-work-list {
    overflow: visible;
  }

  .dashboard-work-item {
    display: grid;
    grid-template-columns: 8px repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    width: 100%;
    min-width: 0;
    padding: 14px 16px;
  }

  .dashboard-work-item > i {
    grid-row: 1 / span 2;
  }

  .dashboard-work-title {
    grid-column: 2 / -1;
  }

  .dashboard-work-owner { grid-column: 2; }
  .dashboard-work-date { grid-column: 3; }
  .dashboard-work-progress { grid-column: 2 / -1; }
}

/* Phone: controls become touch-friendly rows; content hierarchy stays intact. */
@media (max-width: 720px) {
  body[data-ui-version="44"] .topbar {
    padding: 11px 12px 11px 66px !important;
  }

  body[data-ui-version="44"] .topbar h1 {
    overflow: hidden;
    font-size: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body[data-ui-version="44"] .topbar p {
    display: none;
  }

  body[data-ui-version="44"] .topbar-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  body[data-ui-version="44"] .topbar-actions select {
    grid-column: 1 / -1;
    width: 100%;
  }

  body[data-ui-version="44"] .topbar-actions button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }

  body[data-ui-version="44"] .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]),
  body[data-ui-version="44"] .view-root[data-view="dashboard"] {
    gap: 11px;
    padding: 10px;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px !important;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar > input,
  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar > select,
  .view-root:not([data-view="dashboard"]):not([data-view="shelfGuide"]) .panel-header .toolbar > .inline-select {
    grid-column: 1 / -1;
    width: 100%;
  }

  .office-os-hero {
    padding: 24px 20px;
  }

  .office-os-command {
    padding: 18px;
  }

  .office-filter-fields {
    grid-template-columns: 1fr;
  }

  .office-filter-fields > * {
    grid-column: 1;
    width: 100%;
  }

  .office-plan-row {
    gap: 12px;
    padding: 14px;
  }

  .office-plan-owner { grid-column: 1 / 7; }
  .office-plan-due { grid-column: 7 / 13; }
  .office-plan-progress { grid-column: 1 / 7; }
  .office-plan-health { grid-column: 7 / 13; }

  .office-plan-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-plan-actions .small-button {
    width: 100%;
  }

  .office-performance-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .office-performance-summary span {
    min-width: 0;
  }

  .office-performance-table article {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .office-performance-table article > .office-person,
  .office-performance-table article > p {
    grid-column: 1 / -1;
  }

  .office-performance-table article > button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .dashboard-work-head,
  .dashboard-work-layout {
    padding-inline: 16px;
  }

  .dashboard-work-item {
    grid-template-columns: 7px minmax(0, 1fr);
  }

  .dashboard-work-item > i {
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .dashboard-work-title,
  .dashboard-work-owner,
  .dashboard-work-date,
  .dashboard-work-progress {
    grid-column: 2;
  }

  .clean-work-list,
  .clean-store-list {
    overflow: visible;
  }

  .clean-work-row {
    grid-template-columns: 7px repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
    padding: 13px 15px;
  }

  .clean-work-row > i {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  .clean-work-row > span:nth-of-type(1) {
    grid-column: 2 / -1;
  }

  .clean-work-row > span:nth-of-type(2) {
    grid-column: 2;
  }

  .clean-work-row > span:nth-of-type(3) {
    grid-column: 3;
  }

  .clean-work-row > b {
    grid-column: 2 / -1;
    justify-self: start;
    text-align: left;
  }

  .clean-store-list > button {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    width: 100%;
    min-width: 0;
    padding: 13px 15px;
  }

  .clean-store-list > button > span:first-child,
  .clean-store-list > button > b {
    grid-column: 1 / -1;
  }

  .clean-store-list > button > b {
    justify-self: start;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .form-grid > *,
  .form-grid .full {
    grid-column: 1 !important;
  }

  .view-root[data-view="settings"] .settings-user-panel .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .view-root[data-view="settings"] .settings-user-panel table,
  .view-root[data-view="settings"] .settings-user-panel tbody,
  .view-root[data-view="settings"] .settings-user-panel tr,
  .view-root[data-view="settings"] .settings-user-panel td {
    display: block;
    width: 100% !important;
  }

  .view-root[data-view="settings"] .settings-user-panel thead {
    display: none;
  }

  .view-root[data-view="settings"] .settings-user-panel tbody {
    display: grid;
    gap: 10px;
    padding: 10px;
  }

  .view-root[data-view="settings"] .settings-user-panel tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 14px;
    padding: 11px 13px;
    border: 1px solid #e2e8f2;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(43, 58, 92, .06);
  }

  .view-root[data-view="settings"] .settings-user-panel tbody td {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    min-height: 35px;
    padding: 5px 0;
    overflow: visible;
    text-overflow: initial;
    white-space: normal;
    border: 0;
  }

  .view-root[data-view="settings"] .settings-user-panel tbody td::before {
    color: #8792a8;
    font-size: 11px;
    font-weight: 650;
  }

  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(1)::before { content: "账号"; }
  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(2)::before { content: "姓名"; }
  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(3)::before { content: "角色"; }
  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(4)::before { content: "部门"; }
  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(5)::before { content: "门店"; }
  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(6)::before { content: "状态"; }
  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(7)::before { content: "创建"; }
  .view-root[data-view="settings"] .settings-user-panel tbody td:nth-child(8)::before { content: "操作"; }

  .view-root[data-view="settings"] .settings-user-panel tbody td:last-child {
    grid-column: 1 / -1;
    grid-template-columns: 64px minmax(0, 1fr);
    text-align: left;
  }

  .view-root[data-view="settings"] .settings-user-panel tbody td:last-child .small-button {
    justify-self: start;
  }

  .modal-root {
    padding: 10px;
  }

  .modal {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 16px;
  }

  .modal-footer {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .office-os-hero h2 {
    font-size: clamp(25px, 8vw, 30px);
  }

  .office-os-rhythm i {
    min-width: 12px;
  }

  .office-scorecard,
  .office-performance-summary,
  .office-performance-table article {
    grid-template-columns: minmax(0, 1fr);
  }

  .office-plan-owner,
  .office-plan-due,
  .office-plan-progress,
  .office-plan-health,
  .office-performance-table article > * {
    grid-column: 1 / -1 !important;
  }

  .office-plan-main {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
  }

  .office-plan-index {
    width: 32px;
    height: 32px;
  }

  .office-plan-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-footer > button {
    flex: 1 1 calc(50% - 6px);
  }

  .view-root[data-view="settings"] .settings-user-panel tbody tr {
    grid-template-columns: minmax(0, 1fr);
  }

  .view-root[data-view="settings"] .settings-user-panel tbody td:last-child {
    grid-column: 1;
  }
}

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