/* Shared responsive safeguards, loaded last in Sales, Commercial and Warehouse. */
html {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body.dorsa-app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body.dorsa-app *,
body.dorsa-app *::before,
body.dorsa-app *::after { box-sizing: border-box; }

body.dorsa-app :is(main, .content-shell, .container, .main-content),
body.dorsa-app :is(.card, .chart-card, .chart-panel, .filter-group, .form-group,
  .page-header, .table-card, .glass-card, .modal-content) {
  min-width: 0;
}

body.dorsa-app :is(img, svg, video) { max-width: 100%; }
body.dorsa-app img { height: auto; }
body.dorsa-app canvas { display: block; max-width: 100% !important; }

.mobile-table-scroll {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.mobile-table-scroll[data-mobile-overflow="true"] {
  border-inline: 1px solid color-mix(in srgb, var(--border, #d8e0e8) 75%, transparent);
  touch-action: pan-x pan-y;
}
.mobile-table-scroll:focus-visible {
  outline: 2px solid var(--primary, #315c91);
  outline-offset: -2px;
}
.mobile-table-hint {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  color: var(--text-muted, #6c7889);
  font-size: 11px;
  line-height: 1.6;
}
@media screen and (max-width: 1024px) {
  body.dorsa-app .sidebar {
    width: min(var(--sidebar-width, 320px), calc(100vw - 44px));
    max-width: calc(100vw - 44px);
    height: 100dvh;
    overscroll-behavior-y: contain;
  }
  body.dorsa-app.has-ticker .sidebar { height: calc(100dvh - 44px); }
}

/*
 * The procurement navigation is wider and denser than the other portals.
 * Treat compact laptops and split-screen windows as a drawer layout; keeping
 * the 284px rail pinned at these widths leaves the dashboard with too little
 * room for its decision cards and was the cause of the clipped /commercial/
 * view. This breakpoint must match commercial.js.
 */
@media screen and (max-width: 1100px) {
  body.commercial-app.sidebar-open { overflow: hidden; }

  body.commercial-app .sidebar {
    width: min(300px, calc(100vw - 44px));
    max-width: calc(100vw - 44px);
    transform: translateX(105%);
  }

  body.commercial-app.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: -12px 0 35px rgba(23, 38, 36, .2);
  }

  body.commercial-app.sidebar-open .sidebar-backdrop { display: block; }
  body.commercial-app :is(.sidebar-close, .sidebar-toggle) { display: inline-flex; }
  body.commercial-app .topbar { right: 0; padding-inline: 18px; }
  body.commercial-app .main-content { margin-right: 0; }
  body.commercial-app .content-shell { padding-inline: clamp(18px, 3vw, 30px); }
}

@media screen and (max-width: 900px) {
  /* Inventory uses the same 900px drawer breakpoint as purchasing. */
  body.inventory-app.sidebar-open .sidebar { transform: translateX(0); }
  body.inventory-app .topbar-actions .user-chip { display: flex; }
}
@media screen and (max-width: 768px) {
  .mobile-table-hint { display: flex; }
  body.dorsa-app :is(.container, .content-shell) {
    width: 100%;
    max-width: 100%;
    padding-inline: clamp(12px, 4vw, 20px);
  }
  body.dorsa-app :is(.page-title, h1) {
    overflow-wrap: anywhere;
    font-size: clamp(1.35rem, 7vw, 2rem);
    line-height: 1.45;
  }
  body.dorsa-app :is(.page-subtitle, .page-description) {
    max-width: 100%;
    line-height: 1.8;
  }
  body.dorsa-app :is(.page-header, .header-actions, .page-header-actions,
    .table-header, .table-toolbar, .chart-header, .chart-panel-head,
    .pagination, .filter-actions) { flex-wrap: wrap; gap: 10px; }
  body.dorsa-app :is(.filter-group, .form-group) { max-width: 100%; }
  body.dorsa-app :is(.filter-panel, .filters-panel, .filters-card, .search-panel,
    .toolbar, .form-card) { min-width: 0; max-width: 100%; }
  body.dorsa-app :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea),
  body.auth-page :is(input, select, textarea),
  body.portal-profile-shell :is(input, select, textarea) {
    font-size: 16px; /* Prevent iOS focus zoom without disabling pinch zoom. */
    max-width: 100%;
    min-width: 0;
  }
  body.dorsa-app select { text-overflow: ellipsis; }
  body.dorsa-app :is(.btn, .btn-filter, .nav-icon-btn, .sidebar-toggle-btn,
    .sidebar-toggle, .sidebar-close, .sidebar-close-mobile, .topbar-back,
    .nav-link, .nav-group-toggle) { min-height: 44px; }
  body.dorsa-app :is(.nav-icon-btn, .sidebar-toggle-btn, .sidebar-toggle,
    .sidebar-close, .sidebar-close-mobile, .topbar-back) { min-width: 44px; }
  body.dorsa-app :is(.table-responsive, .table-wrapper, .table-scroll, .table-container) {
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.dorsa-app table { max-width: none; }
  body.dorsa-app :is(th, td) { overflow-wrap: normal; }
  body.dorsa-app :is(.chart-card, .chart-panel) { min-width: 0; max-width: 100%; }
  body.dorsa-app .chart-card { height: auto; }
  body.dorsa-app :is(.chart-wrapper, .chart-pie-wrapper, .chart-box,
    .chart-card-body, .chart-shell) {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  body.dorsa-app .chart-export-menu {
    position: fixed;
    inset: auto 12px max(12px, env(safe-area-inset-bottom)) 12px;
    width: auto;
    max-height: min(70dvh, 440px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 14px;
  }
  body.dorsa-app .chart-export-menu :is(.chart-excel-export, .chart-image-export, .chart-pdf-export) {
    min-height: 44px;
  }
  body.dorsa-app .health-grid-container { grid-template-columns: minmax(0, 1fr); }
  body.dorsa-app .health-card { padding: 24px 16px; }
  body.dorsa-app :is(.modal-content, .modal-dialog, .dorsa-dialog__panel) {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  body.dorsa-app :is(.quick-settings-dropdown, .notifications-dropdown) {
    position: fixed;
    top: calc(var(--navbar-height, 58px) + 6px);
    right: 12px;
    left: 12px;
    width: auto;
    max-height: calc(100dvh - var(--navbar-height, 58px) - 24px);
    overflow-y: auto;
  }
  body.dorsa-app .sidebar-nav { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  body.dorsa-app.has-ticker :is(.quick-settings-dropdown, .notifications-dropdown) {
    top: calc(var(--navbar-height, 58px) + 50px);
    max-height: calc(100dvh - var(--navbar-height, 58px) - 68px);
  }
  body.dorsa-app .nav-content { gap: 4px; }
  body.dorsa-app .nav-brand { flex-shrink: 0; }
  body.dorsa-app .nav-actions { flex-shrink: 0; gap: 0; }
  body.dorsa-app .navbar .system-test-warning { min-width: 0; flex: 1; padding-inline: 2px; }
  body.dorsa-app .navbar .system-test-warning > i { display: none; }

  /* Dense business dashboards become a readable two-column summary first. */
  body.dorsa-app :is(.stats-grid, .kpi-grid, .metric-grid, .summary-grid,
    .commercial-pulse, .health-grid, .quick-stats-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.dorsa-app :is(.modal-footer, .form-actions, .action-row) {
    flex-wrap: wrap;
    gap: 8px;
  }
}
@media screen and (max-width: 480px) {
  body.dorsa-app :is(.filter-controls, .filter-select-grid, .supplier-filter-grid,
    .transaction-filter-grid, .profile-history-filter-grid, .stats-grid,
    .kpi-grid, .field-grid, .field-grid.three) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.dorsa-app :is(.filter-controls, .profile-history-search-row) {
    flex-direction: column;
    align-items: stretch;
  }
  body.dorsa-app .profile-history-search-row .search-input-wrapper { min-width: 0; }
  body.dorsa-app .navbar { padding-inline: 8px; }
  body.dorsa-app :is(.header-actions, .page-header-actions) .btn { flex: 1 1 auto; }
  body.dorsa-app .money-value { flex-wrap: wrap; }
  body.dorsa-app :is(.stats-grid, .kpi-grid, .metric-grid, .summary-grid,
    .commercial-pulse, .health-grid, .quick-stats-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.dorsa-app :is(.card, .chart-card, .chart-panel, .table-card, .glass-card) {
    border-radius: clamp(12px, 4vw, 18px);
  }
  body.dorsa-app :is(.modal-footer, .form-actions, .action-row) > :is(.btn, button, a) {
    min-height: 44px;
    flex: 1 1 100%;
    justify-content: center;
  }
}
@media screen and (max-width: 360px) {
  body.dorsa-app :is(.container, .content-shell) { padding-inline: 10px; }
  body.dorsa-app .navbar-context,
  body.dorsa-app .topbar .context-copy { display: none; }
}
@media (orientation: landscape) and (max-height: 520px) {
  body.dorsa-app .sidebar { height: 100dvh; }
  body.dorsa-app :is(.modal-content, .dorsa-dialog__panel) { max-height: calc(100dvh - 12px); }
}
@media print {
  .mobile-table-scroll { overflow: visible; max-height: none; }
}

/* Pricing Intelligence portal entry — premium navy + gold.
   This block is deliberately stronger than the generic portal-card rules.
   The production screenshot exposed a cascade mismatch where the white card
   background survived while the new white text had already loaded. */
body.dorsa-portal .workspace .cards > .card.pricing-intelligence {
  --accent: #c9a24f;
  --card-accent: #c9a24f;
  color: #ffffff !important;
  background-color: #0b1f35 !important;
  background-image:
    radial-gradient(circle at 12% 12%, rgba(234,211,155,.16), transparent 16rem),
    radial-gradient(circle at 92% 96%, rgba(201,162,79,.10), transparent 13rem),
    linear-gradient(135deg, #071522 0%, #0b1f35 58%, #173b60 100%) !important;
  border-color: rgba(217,186,115,.58) !important;
  box-shadow: 0 18px 42px rgba(7,21,34,.24), inset 0 1px 0 rgba(255,255,255,.06) !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence::before {
  width: 5px !important;
  opacity: 1 !important;
  background: linear-gradient(180deg,#f0dda8,#c9a24f 58%,#8f6a2a) !important;
  box-shadow: 0 0 24px rgba(201,162,79,.24);
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence::after {
  width: 220px;
  height: 220px;
  left: -120px;
  bottom: -135px;
  background: #d9ba73 !important;
  opacity: .08 !important;
  box-shadow: 0 0 0 38px rgba(217,186,115,.025);
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  font-size: 18px;
  font-weight: 900;
  text-shadow: none;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence p {
  color: #d8e2ec !important;
  -webkit-text-fill-color: #d8e2ec !important;
  opacity: 1 !important;
  max-width: 420px;
  font-size: 12px;
  line-height: 1.95;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence small {
  color: #ead39b !important;
  -webkit-text-fill-color: #ead39b !important;
  opacity: 1 !important;
  font-weight: 850;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence .icon {
  color: #071522 !important;
  border: 1px solid rgba(255,255,255,.26) !important;
  background: linear-gradient(145deg,#f2dfaa,#c9a24f 65%,#ad8438) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 24px rgba(201,162,79,.24) !important;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence .icon svg {
  color: #071522 !important;
  stroke: currentColor !important;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence .executive-badge,
body.dorsa-portal .workspace .cards > .card.pricing-intelligence .last-workspace-badge {
  color: #f6e8bf !important;
  -webkit-text-fill-color: #f6e8bf !important;
  border-color: rgba(234,211,155,.38) !important;
  background: rgba(201,162,79,.12) !important;
  opacity: 1 !important;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence .arrow {
  color: #ead39b !important;
  border-color: rgba(234,211,155,.28) !important;
  background: rgba(255,255,255,.05) !important;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence:hover,
body.dorsa-portal .workspace .cards > .card.pricing-intelligence:focus-visible {
  background-color: #0b1f35 !important;
  background-image:
    radial-gradient(circle at 12% 12%, rgba(234,211,155,.20), transparent 17rem),
    radial-gradient(circle at 92% 96%, rgba(201,162,79,.13), transparent 14rem),
    linear-gradient(135deg,#071522 0%,#0d2741 58%,#1a456c 100%) !important;
  border-color: rgba(234,211,155,.78) !important;
  box-shadow: 0 27px 58px rgba(7,21,34,.30), 0 0 0 1px rgba(201,162,79,.08) inset !important;
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence:hover .arrow {
  color: #071522 !important;
  background: linear-gradient(145deg,#ead39b,#c9a24f) !important;
  box-shadow: 0 7px 18px rgba(201,162,79,.20);
}
body.dorsa-portal .workspace .cards > .card.pricing-intelligence:focus-visible {
  outline-color: rgba(201,162,79,.55) !important;
}