/* Mate X7 unfolded inner display: 2416 x 2210 physical pixels.
 * Every rule is device-gated so desktop and monitor-wall displays stay intact. */
html[data-s2r-device="mate-x7-inner"] {
  --s2r-safe-top: env(safe-area-inset-top, 0px);
  --s2r-safe-right: env(safe-area-inset-right, 0px);
  --s2r-safe-bottom: env(safe-area-inset-bottom, 0px);
  --s2r-safe-left: env(safe-area-inset-left, 0px);
  --s2r-page-pad: 14px;
  --s2r-gap: 12px;
  --s2r-control: 42px;
  --s2r-topbar: calc(56px + var(--s2r-safe-top));
  --s2r-radius: 9px;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: #f4f6f8;
}

html[data-s2r-device="mate-x7-inner"],
html[data-s2r-device="mate-x7-inner"] body {
  width: 100%;
  max-width: 100%;
  min-width: 0 !important;
  overscroll-behavior-x: none;
}

html[data-s2r-device="mate-x7-inner"] body {
  overflow-x: hidden !important;
  min-height: var(--s2r-vh, 100dvh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

html[data-s2r-device="mate-x7-inner"] *,
html[data-s2r-device="mate-x7-inner"] *::before,
html[data-s2r-device="mate-x7-inner"] *::after {
  box-sizing: border-box;
}

html[data-s2r-device="mate-x7-inner"] button,
html[data-s2r-device="mate-x7-inner"] input,
html[data-s2r-device="mate-x7-inner"] select,
html[data-s2r-device="mate-x7-inner"] textarea {
  font: inherit;
}

html[data-s2r-device="mate-x7-inner"] button,
html[data-s2r-device="mate-x7-inner"] a,
html[data-s2r-device="mate-x7-inner"] label,
html[data-s2r-device="mate-x7-inner"] input,
html[data-s2r-device="mate-x7-inner"] select {
  touch-action: manipulation;
}

html[data-s2r-device="mate-x7-inner"] button:active:not(:disabled),
html[data-s2r-device="mate-x7-inner"] .btn:active:not(:disabled) {
  transform: scale(.975);
}

html[data-s2r-device="mate-x7-inner"] :focus-visible {
  outline: 3px solid rgba(64, 158, 255, .36);
  outline-offset: 2px;
}

/* Full-width application surface. Restrict selectors to top-level page shells. */
html[data-s2r-device="mate-x7-inner"] body > .container,
html[data-s2r-device="mate-x7-inner"] body > .wrap,
html[data-s2r-device="mate-x7-inner"] body > .page,
html[data-s2r-device="mate-x7-inner"] body > .shell {
  width: 100% !important;
  max-width: none !important;
  padding-left: calc(var(--s2r-page-pad) + var(--s2r-safe-left)) !important;
  padding-right: calc(var(--s2r-page-pad) + var(--s2r-safe-right)) !important;
  padding-bottom: calc(var(--s2r-page-pad) + var(--s2r-safe-bottom)) !important;
}

html[data-s2r-device="mate-x7-inner"] body > .header,
html[data-s2r-device="mate-x7-inner"] body > header,
html[data-s2r-device="mate-x7-inner"] body > .topbar {
  position: sticky !important;
  top: 0;
  z-index: 9000 !important;
  width: 100%;
  height: auto !important;
  min-height: var(--s2r-topbar);
  padding-top: var(--s2r-safe-top) !important;
  padding-left: calc(10px + var(--s2r-safe-left)) !important;
  padding-right: calc(10px + var(--s2r-safe-right)) !important;
  flex-wrap: wrap;
  backdrop-filter: saturate(1.2) blur(16px);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
}

html[data-s2r-device="mate-x7-inner"] body > .header h1,
html[data-s2r-device="mate-x7-inner"] body > header h1,
html[data-s2r-device="mate-x7-inner"] body > .topbar h1 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Portal is a stable native-like shell; the drawer overlays rather than shrinking content. */
html[data-s2r-device="mate-x7-inner"] body { margin-left: 0 !important; }
html[data-s2r-device="mate-x7-inner"] #s2rTop {
  display: flex !important;
  height: var(--s2r-topbar) !important;
  padding: var(--s2r-safe-top) calc(8px + var(--s2r-safe-right)) 0 calc(8px + var(--s2r-safe-left)) !important;
  background: rgba(48, 65, 86, .97) !important;
  contain: layout paint;
}
html[data-s2r-device="mate-x7-inner"] #s2rBtn { display: inline-flex !important; }
html[data-s2r-device="mate-x7-inner"] #s2rBtn.bar { width: 44px; height: 44px; }
html[data-s2r-device="mate-x7-inner"] #s2rNav {
  width: min(84vw, 360px) !important;
  max-width: calc(100vw - 42px) !important;
  padding-left: var(--s2r-safe-left);
  padding-bottom: var(--s2r-safe-bottom);
  transition: transform 190ms cubic-bezier(.2,.8,.2,1) !important;
  will-change: transform;
}
html[data-s2r-device="mate-x7-inner"] #s2rMask {
  transition: opacity 170ms ease !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
html[data-s2r-device="mate-x7-inner"].s2r-nav-open body { overflow: hidden !important; }
html[data-s2r-device="mate-x7-inner"] #s2rNav .fold,
html[data-s2r-device="mate-x7-inner"] #s2rNav .itm a {
  min-height: 42px;
  display: flex;
  align-items: center;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-mode="portal"] #s2rFrame {
  width: 100% !important;
  height: calc(var(--s2r-vh, 100dvh) - var(--s2r-topbar)) !important;
  margin: var(--s2r-topbar) 0 0 !important;
  background: #f4f6f8;
}

/* Stable loading veil for iframe navigation. */
html[data-s2r-device="mate-x7-inner"] #s2rFrameLoad {
  position: fixed;
  z-index: 4;
  top: var(--s2r-topbar);
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: start center;
  padding-top: 28px;
  background: rgba(244, 246, 248, .94);
  color: #65717d;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}
html[data-s2r-device="mate-x7-inner"] #s2rFrameLoad::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34%; height: 3px;
  border-radius: 2px;
  background: #409eff;
  animation: s2r-load-slide 1s ease-in-out infinite;
}
html[data-s2r-device="mate-x7-inner"] #s2rFrameLoad.loading {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
@keyframes s2r-load-slide { from { transform: translateX(-105%); } to { transform: translateX(300%); } }

/* Tables retain density but scroll inside a deliberate surface. */
html[data-s2r-device="mate-x7-inner"] .s2r-table-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  scrollbar-gutter: stable;
  border-radius: 7px;
  background: #fff;
}
html[data-s2r-device="mate-x7-inner"] .s2r-table-scroll > table {
  width: max-content !important;
  min-width: 100% !important;
}
html[data-s2r-device="mate-x7-inner"] .s2r-table-scroll > table th {
  position: sticky;
  top: 0;
  z-index: 3;
}
html[data-s2r-device="mate-x7-inner"] .s2r-table-scroll.can-left {
  box-shadow: inset 12px 0 10px -12px rgba(20, 36, 54, .42);
}
html[data-s2r-device="mate-x7-inner"] .s2r-table-scroll.can-right {
  box-shadow: inset -12px 0 10px -12px rgba(20, 36, 54, .42);
}

/* Forms, toolbars and touch targets. */
html[data-s2r-device="mate-x7-inner"] :is(.toolbar,.filters,.filterbar,.form-row,.actions,.header-actions,.section-tools) {
  max-width: 100%;
  flex-wrap: wrap !important;
}
html[data-s2r-device="mate-x7-inner"] :is(input,select,textarea) { max-width: 100%; }
html[data-s2r-device="mate-x7-inner"] :is(button,.btn,input:not([type=checkbox]):not([type=radio]),select) {
  min-height: 38px;
}
html[data-s2r-device="mate-x7-inner"] :is(input[type=checkbox],input[type=radio]) {
  min-width: 18px; min-height: 18px;
}
html[data-s2r-device="mate-x7-inner"] :is(.toggle,.auto,.chk,.policy,.switch-row) {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
html[data-s2r-device="mate-x7-inner"] :is(.back,#backLink,.quick-link,.toplinks a) {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
}
html[data-s2r-device="mate-x7-inner"] .range-link {
  min-width: 44px;
  min-height: 38px;
  padding: 0 8px !important;
  border-radius: 6px;
}
html[data-s2r-device="mate-x7-inner"] :is(.card,.panel,.section,.workspace,.user-panel,.st-card) {
  scroll-margin-top: calc(var(--s2r-topbar) + 10px);
}
html[data-s2r-device="mate-x7-inner"] :is(.card h2,.panel-head,.section-head,.ph,.overview-head) {
  min-width: 0;
}
html[data-s2r-device="mate-x7-inner"] :is(.card h2,.section-head,.overview-head,.panel-head) {
  flex-wrap: wrap;
}

/* Generic near-square layout tiers. */
html[data-s2r-device="mate-x7-inner"][data-s2r-width="compact"] :is(.summary,.stats,.kpis,.summary-grid,.metrics,.facts) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-width="standard"] :is(.summary,.stats,.kpis,.summary-grid,.metrics,.facts) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-width="wide"] :is(.summary,.stats,.kpis,.summary-grid,.metrics,.facts) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-width="compact"] :is(.grid,.cards,.users-grid,.layout,.grid-main,.tables,.row2,.cols2,.split,.runtime-split,.detail-grid,.rules,.deploy-grid) {
  grid-template-columns: minmax(0, 1fr) !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-width="standard"] :is(.grid,.cards) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html[data-s2r-device="mate-x7-inner"] :is(.users-grid,.layout,.grid-main,.tables,.row2,.cols2,.split,.runtime-split,.rules) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Native-like overlays. JS identifies masks by computed fixed positioning. */
html[data-s2r-device="mate-x7-inner"] body.s2r-overlay-open {
  position: fixed;
  top: var(--s2r-lock-y, 0);
  right: 0; bottom: 0; left: 0;
  width: 100%;
  overflow: hidden !important;
}
html[data-s2r-device="mate-x7-inner"] .s2r-overlay-mask {
  padding: max(10px, var(--s2r-safe-top)) max(10px, var(--s2r-safe-right)) max(10px, var(--s2r-safe-bottom)) max(10px, var(--s2r-safe-left)) !important;
  align-items: flex-end !important;
  overscroll-behavior: contain;
}
html[data-s2r-device="mate-x7-inner"] .s2r-overlay-mask > :is(.mbox,.box,.modal,.modal-box,.response-modal,.detail-panel),
html[data-s2r-device="mate-x7-inner"] .s2r-overlay-panel {
  width: 100% !important;
  max-width: 100% !important;
  max-height: min(92dvh, var(--s2r-vh, 92dvh)) !important;
  border-radius: 16px 16px 10px 10px !important;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(15, 23, 42, .28);
  transform: translateZ(0);
}
html[data-s2r-device="mate-x7-inner"] :is(.modal-body,.box-body,.response-body,.detail-body) {
  max-height: calc(var(--s2r-vh, 100dvh) - 150px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
html[data-s2r-device="mate-x7-inner"] :is(.modal-foot,.box-foot) {
  position: sticky;
  bottom: 0;
  padding-bottom: max(12px, var(--s2r-safe-bottom)) !important;
  background: inherit;
}

/* Highest-risk pages: keep useful density while preventing narrow multi-column crush. */
html[data-s2r-device="mate-x7-inner"][data-s2r-page="opsdingdongding"] .detail-grid,
html[data-s2r-device="mate-x7-inner"][data-s2r-page="opsdingdongding"] .st-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-width="wide"][data-s2r-page="opsdingdongding"] .st-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="financemodel"] .users-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="financemodel"] .user-head { flex-wrap: wrap; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="financemodel"] .user-head :is(.u-station,.u-name) {
  width: 100% !important; flex: 1 1 220px;
}
html[data-s2r-device="mate-x7-inner"] :is(.chart,#chart,.flow-chart,.key-chart) {
  min-width: 0;
  contain: layout paint;
}

html[data-s2r-device="mate-x7-inner"]:is([data-s2r-page="login"],[data-s2r-page="change-password"]) body {
  min-height: var(--s2r-vh, 100dvh) !important;
  padding: calc(24px + var(--s2r-safe-top)) calc(16px + var(--s2r-safe-right)) calc(24px + var(--s2r-safe-bottom)) calc(16px + var(--s2r-safe-left));
  align-items: center;
  overflow-y: auto !important;
}
html[data-s2r-device="mate-x7-inner"]:is([data-s2r-page="login"],[data-s2r-page="change-password"]) .box {
  width: min(100%, 460px) !important;
  padding: 28px 24px !important;
  border-radius: 14px !important;
}
html[data-s2r-device="mate-x7-inner"]:is([data-s2r-page="login"],[data-s2r-page="change-password"]) :is(input,button) {
  min-height: 48px;
}
@media (max-height: 620px) {
  html[data-s2r-device="mate-x7-inner"]:is([data-s2r-page="login"],[data-s2r-page="change-password"]) body { align-items: flex-start; }
}

/* Monitor wall has a dedicated scrollable near-square composition. */
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"],
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] body {
  height: auto !important;
  overflow: auto !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .wall {
  width: 100%;
  height: auto !important;
  min-height: var(--s2r-vh, 100dvh);
  padding: 8px !important;
  grid-template-rows: auto auto !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  min-height: 58px;
  padding: 8px !important;
  gap: 8px;
  flex-wrap: wrap;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .brand { min-width: 0; flex: 1; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .brand h1 { font-size: 21px; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .window-switch {
  order: 4; width: 100%; min-width: 0; margin: 0;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .window-seg { flex: 1; height: 40px; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .window-seg button { flex: 1; min-width: 0; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .world-clocks {
  order: 5; width: 100%; margin: 0; overflow-x: auto; display: grid;
  grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr); grid-template-columns: none;
  scroll-snap-type: x proximity;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .clock { scroll-snap-align: start; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .top-stats {
  order: 6; width: 100%; height: 50px; margin: 0; display: grid; grid-template-columns: repeat(3,1fr);
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .top-stat { min-width: 0; padding: 5px 8px; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .board {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  grid-template-areas: "flow" "side" "lower" !important;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .flow-panel { min-height: clamp(300px, 42dvh, 430px); }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .side-column {
  display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto auto !important; min-height: 0;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] :is(.stations-panel,.key-panel) { min-height: 330px; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .station-grid {
  grid-template-rows: none; grid-auto-rows: minmax(92px, auto);
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .lower-grid {
  display: grid !important; grid-template-columns: minmax(0,1fr) !important; min-height: 0;
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] :is(.proxies-panel,.claude-panel) { min-height: 360px !important; }
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] :is(.proxy-grid,.claude-grid) {
  overflow: auto; grid-template-columns: repeat(2,minmax(0,1fr));
}
html[data-s2r-device="mate-x7-inner"][data-s2r-width="compact"][data-s2r-page="monitorwall"] :is(.proxy-grid,.claude-grid) {
  grid-template-columns: minmax(0,1fr);
}
html[data-s2r-device="mate-x7-inner"][data-s2r-page="monitorwall"] .statusline {
  position: static; padding: 4px 10px calc(4px + var(--s2r-safe-bottom));
}

@media (prefers-reduced-motion: reduce) {
  html[data-s2r-device="mate-x7-inner"] *,
  html[data-s2r-device="mate-x7-inner"] *::before,
  html[data-s2r-device="mate-x7-inner"] *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}