/* Gold Digger v51: canonical responsive application frame.
   This file intentionally owns shell geometry, viewport containment and
   component overflow. Feature CSS may style content, but must not move the
   application frame or widen the document. */

:root {
  --gd-rail-wide: 248px;
  --gd-rail-compact: 88px;
  --gd-page-gutter-wide: 48px;
  --gd-page-gutter-compact: 24px;
  --gd-page-gutter-mobile: 12px;
}

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

body,
#app,
.shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body {
  overflow-x: hidden;
}

.shell,
.sidebar,
.workspace,
.topbar,
.page,
.page > *,
.card {
  box-sizing: border-box;
  min-width: 0;
}

.workspace {
  width: calc(100% - var(--gd-rail-wide));
  max-width: calc(100% - var(--gd-rail-wide));
  margin-left: var(--gd-rail-wide);
}

.topbar,
.page {
  width: 100%;
}

.topbar {
  padding-inline: var(--gd-page-gutter-wide);
}

.topbar > div:first-child,
.actions {
  min-width: 0;
}

.actions > * {
  flex: 0 0 auto;
}

.page {
  width: min(100%, 1540px);
  max-width: 1540px;
  padding-inline: var(--gd-page-gutter-wide);
  container-type: inline-size;
  container-name: gd-page;
}

img,
svg,
video,
canvas,
table,
input,
select,
textarea {
  max-width: 100%;
}

.tablewrap,
.mt5-table,
.bulk-sheet-card,
.bulk-sheet-scroll {
  max-width: 100%;
}

.tablewrap,
.mt5-table {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.modal,
.drawer,
.mt5-modal,
.lab-drawer {
  box-sizing: border-box;
  max-width: calc(100vw - 24px);
}

/* The worksheet may be wide, but only its own scroller may overflow. */
.bulk-review-page,
.bulk-review-toolbar,
.bulk-excel-panel,
.bulk-sheet-card {
  width: 100%;
  max-width: 100%;
}

.bulk-review-page {
  container-type: inline-size;
  container-name: bulk-review;
}

.bulk-review-page > *,
.bulk-review-hero > *,
.bulk-review-filters,
.bulk-apply-bar,
.bulk-sheet-help {
  min-width: 0;
  max-width: 100%;
}

.bulk-review-hero h2,
.bulk-review-hero p,
.bulk-excel-panel h3,
.bulk-excel-panel p,
.bulk-sheet-help span {
  overflow-wrap: anywhere;
}

.bulk-sheet-scroll,
.bulk-sheet-scroll:has(.bulk-sheet.full.expandable) {
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.bulk-sheet.full.expandable {
  width: 100%;
  min-width: 820px;
  table-layout: fixed;
}

.bulk-sheet.quick {
  width: 100%;
  min-width: 960px;
}

.bulk-review-filters > *,
.bulk-apply-bar > *,
.bulk-excel-panel > *,
.bulk-excel-actions {
  min-width: 0;
  max-width: 100%;
}

.bulk-save-dock {
  left: calc(var(--gd-rail-wide) + 28px);
  right: 28px;
}

/*
   The app can be shown inside a narrow Codex/browser panel whose usable
   content width is smaller than the layout viewport. Container queries make
   the worksheet respond to the space it actually receives instead of relying
   only on viewport media queries.
*/
@container gd-page (max-width: 700px) {
  .bulk-review-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  .bulk-review-hero h2 {
    font-size: clamp(24px, 9cqw, 31px);
  }

  .bulk-review-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    justify-content: stretch;
  }

  .bulk-review-stats span {
    min-width: 0;
    justify-content: center;
    padding-inline: 8px;
    white-space: normal;
    text-align: center;
  }

  .bulk-excel-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 14px;
    padding: 16px;
  }

  .bulk-excel-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .bulk-excel-actions button {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .bulk-review-toolbar {
    padding: 10px;
  }

  .bulk-review-filters,
  .bulk-apply-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    width: 100%;
  }

  .bulk-review-filters > input,
  .bulk-filter-tabs,
  .bulk-mode-switch,
  .bulk-apply-bar label,
  .bulk-apply-bar strong,
  .bulk-apply-bar select,
  .bulk-apply-bar button {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .bulk-filter-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .bulk-filter-tabs button {
    min-width: 0;
    padding-inline: 6px;
    white-space: normal;
  }

  .bulk-sheet-help {
    display: grid;
    gap: 3px;
  }
}

@container gd-page (max-width: 340px) {
  .bulk-review-page {
    margin-inline: 0;
  }

  .bulk-review-hero {
    margin-bottom: 12px;
  }

  .bulk-review-hero h2 {
    margin-block: 5px 7px;
    font-size: 23px;
    line-height: 1.12;
  }

  .bulk-review-hero p,
  .bulk-excel-panel p {
    font-size: 12px;
    line-height: 1.5;
  }

  .bulk-review-stats {
    gap: 5px;
  }

  .bulk-review-stats span {
    display: grid;
    gap: 3px;
    padding: 8px 4px;
    font-size: 10px;
  }

  .bulk-review-stats b {
    font-size: 16px;
  }

  .bulk-excel-panel {
    margin-block: 12px;
    padding: 12px;
  }

  .bulk-excel-panel h3 {
    font-size: 17px;
  }

  .bulk-review-toolbar {
    padding: 8px;
  }

  .bulk-filter-tabs button,
  .bulk-mode-switch,
  .bulk-apply-bar button,
  .bulk-excel-actions button {
    font-size: 11px;
  }

  .bulk-review-filters > input,
  .bulk-apply-bar select {
    font-size: 12px;
  }

  .bulk-sheet.full.expandable tbody {
    padding-inline: 4px;
  }

  .bulk-sheet.full.expandable .bulk-main-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
  }

  .bulk-sheet.full.expandable .bulk-check {
    padding-left: 7px;
  }

  .bulk-sheet.full.expandable .bulk-identity {
    grid-column: 2;
  }

  .bulk-sheet.full.expandable .bulk-readonly {
    grid-column: 3;
  }

  .bulk-sheet.full.expandable .bulk-main-row td:nth-child(4),
  .bulk-sheet.full.expandable .bulk-main-row td:nth-child(5),
  .bulk-sheet.full.expandable .bulk-main-row td:nth-child(6),
  .bulk-sheet.full.expandable .bulk-main-row td:nth-child(7),
  .bulk-sheet.full.expandable .bulk-main-row td:nth-child(8),
  .bulk-sheet.full.expandable .bulk-main-row td:nth-child(9) {
    grid-column: 1 / -1;
  }

  .bulk-detail-row .bulk-review-field-grid,
  .bulk-detail-row .bulk-indicator-grid,
  .bulk-detail-row .bulk-tv-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .bulk-detail-row .bulk-mini-field.wide {
    grid-column: auto;
  }
}

/* Compact desktop: a real rail rather than a squeezed full sidebar. */
@media (min-width: 901px) and (max-width: 1179px) {
  .sidebar {
    width: var(--gd-rail-compact);
    padding: 24px 10px;
  }

  .brand {
    justify-content: center;
    padding: 0 0 22px;
  }

  .brand > div,
  .sidefoot {
    display: none;
  }

  .mark {
    width: 44px;
    height: 44px;
  }

  .nav {
    gap: 7px;
    margin-top: 20px;
  }

  .nav button {
    min-height: 54px;
    padding: 7px 4px;
    text-align: center;
    font-size: 10px;
    line-height: 1.1;
  }

  .nav i {
    display: block;
    width: auto;
    margin-bottom: 3px;
    font-size: 20px;
  }

  .nav button.active {
    box-shadow: inset 3px 0 #d5ad4b;
  }

  .workspace {
    width: calc(100% - var(--gd-rail-compact));
    max-width: calc(100% - var(--gd-rail-compact));
    margin-left: var(--gd-rail-compact);
  }

  .topbar {
    height: 104px;
    padding-inline: var(--gd-page-gutter-compact);
    gap: 16px;
  }

  .topbar h1 {
    font-size: clamp(22px, 2.5vw, 31px);
  }

  .actions {
    max-width: 58%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }

  .actions .secondary {
    display: none;
  }

  .page {
    padding-inline: var(--gd-page-gutter-compact);
  }

  .bulk-sheet.full.expandable {
    min-width: 800px;
  }

  .bulk-save-dock {
    left: calc(var(--gd-rail-compact) + 18px);
    right: 18px;
  }
}

/* Tablet and PWA: one coordinated switch to bottom navigation. */
@media (max-width: 900px) {
  body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .sidebar {
    position: fixed;
    inset: auto 0 0;
    display: block;
    width: 100%;
    height: calc(72px + env(safe-area-inset-bottom));
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .brand,
  .sidefoot {
    display: none;
  }

  .nav {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    margin: 0;
  }

  .nav button {
    min-width: 0;
    min-height: 54px;
    padding: 4px 1px;
    text-align: center;
    font-size: clamp(8px, 1.35vw, 10px);
    line-height: 1.12;
  }

  .nav i {
    display: block;
    width: auto;
    margin-bottom: 2px;
    font-size: 18px;
  }

  .nav button.active {
    box-shadow: inset 0 3px #d5ad4b;
  }

  .workspace {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
  }

  .topbar {
    width: 100%;
    height: auto;
    min-height: 88px;
    padding: 12px 18px;
    gap: 12px;
  }

  .topbar h1 {
    max-width: min(44vw, 330px);
    font-size: clamp(19px, 3.2vw, 25px);
    line-height: 1.15;
  }

  .actions {
    max-width: 55%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .actions::-webkit-scrollbar {
    display: none;
  }

  .actions .secondary {
    display: none;
  }

  .page {
    width: 100%;
    max-width: 100%;
    padding: 22px 18px 44px;
  }

  .bulk-review-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .bulk-sheet.full.expandable {
    min-width: 800px;
  }

  .bulk-save-dock {
    left: 14px;
    right: 14px;
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .bulk-save-dock:has(#bulkSaveAll:disabled) {
    display: none;
  }
}

/* Phone: retain the existing card-style worksheet and reserve both action bars. */
@media (max-width: 720px) {
  html,
  body,
  .page,
  .modal,
  .drawer {
    scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }

  body {
    padding-bottom: calc(146px + env(safe-area-inset-bottom));
  }

  .topbar {
    min-height: calc(76px + max(env(safe-area-inset-top), 12px));
    padding: calc(9px + max(env(safe-area-inset-top), 12px)) 14px 9px;
  }

  .topbar h1 {
    max-width: 48vw;
    font-size: 20px;
  }

  .actions {
    max-width: 48%;
  }

  .page {
    padding: 16px var(--gd-page-gutter-mobile) 30px;
  }

  .bulk-sheet-scroll:has(.bulk-sheet.full.expandable) {
    overflow-x: hidden !important;
  }

  .bulk-sheet.full.expandable {
    min-width: 0;
  }

  .bulk-save-dock {
    left: 10px;
    right: 10px;
    bottom: calc(148px + env(safe-area-inset-bottom));
  }

  body:has(.bulk-review-page) {
    padding-bottom: calc(146px + env(safe-area-inset-bottom));
  }

  body:has(.bulk-review-page) .mobile-quick-actions {
    display: grid;
  }

  body:has(.bulk-review-page) .bulk-save-dock {
    bottom: calc(148px + env(safe-area-inset-bottom));
  }

  body:has(.bulk-review-page .bulk-save-dock #bulkSaveAll:not(:disabled)) {
    padding-bottom: calc(270px + env(safe-area-inset-bottom));
    scroll-padding-bottom: calc(274px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 430px) {
  .nav button {
    font-size: 8px;
  }

  .nav i {
    font-size: 17px;
  }

  .topbar {
    padding-inline: 10px;
  }

  .page {
    padding-inline: 10px;
  }
}

@media (max-width: 340px) {
  .topbar {
    gap: 8px;
  }

  .topbar h1 {
    max-width: 42vw;
    font-size: 18px;
  }

  /* MT5/add are already available in the mobile action dock. Keep the
     ultra-narrow header to identity + sync instead of a clipped button rail. */
  .actions .pwa-btn,
  .actions .mt5-btn,
  .actions .primary {
    display: none !important;
  }

  .actions {
    max-width: none;
    overflow: visible;
  }
}