/* Shared mobile safeguards. Wide data tables scroll within their own region. */
body { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--gp-primary); outline-offset: 3px; }
:is(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-block: 6rem 2rem; }
.content:focus-visible { outline: 3px solid var(--gp-primary); outline-offset: -3px; }
.skip-link { position: fixed; }
:is(.panel, .form-group, .input-with-icon, .chart-box, .page-head > div,
       .chat-layout > *, .order-detail-grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *) { min-width: 0; }
:is(input, select, textarea, fieldset) { min-width: 0; max-width: 100%; }
:is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { font-size: 1rem; }
:is(.btn, .btn-sm, .btn-lg, .page-btn) { min-height: 44px; height: auto; padding-block: .65rem; white-space: normal; line-height: 1.4; }
:is(.icon-btn, .user-avatar-btn) { width: 44px; height: 44px; flex-shrink: 0; }
:is(.form-check, summary, .sb-link) { min-height: 44px; }
.form-check { padding-block: .5rem; }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 24px; height: 24px; flex-shrink: 0; }
summary { padding-block: .5rem; }
:is(.badge, .store-status) { white-space: normal; }
.approval-status .badge { white-space: nowrap; overflow-wrap: normal; }
:is(.detail-row, .list-row, .review-meta, .panel-foot, .pagination-pages, .date-range) { flex-wrap: wrap; }
:is(.detail-row > *, .list-row > *, .logo-row form) { min-width: 0; }
:is(.table-wrap, .tabs) { max-width: 100%; }
.table-wrap { position: relative; }
.table-wrap:focus-visible, .tabs:focus-visible { outline-offset: -3px; }
.data-table thead th { font-size: .8125rem; }
.pagination-pages { row-gap: .5rem; }
.price-tier { margin-top: 1rem; padding: 1rem; border: 1px solid var(--gp-border-strong); }
.price-tier legend { padding-inline: .35rem; font-weight: 600; }
.price-tier .form-group { margin-bottom: .5rem; }
.logo-row form { flex-basis: 100%; }
.drawer-close { display: none; margin-left: auto; color: var(--sidebar-brand-name); }
.sidebar :focus-visible { outline-color: #fbbf24; outline-offset: -3px; }
.sb-user-name, .sb-user-role { white-space: normal; }
.sidebar { max-width: calc(100vw - 1rem); }
.dropdown-panel { min-width: 0; width: 20rem; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 6rem); overflow-y: auto; }
#notif-panel .dp-item { display: block; }
.dp-body { max-height: none; }
.chart-data { margin-top: 1rem; }
.chart-data table { min-width: 0; }
.chart-svg { overflow: hidden; }
.site-header { position: relative; }
.site-header-inner { flex-wrap: wrap; padding-block: .5rem; }
.brand { min-width: 0; }
.site-menu { max-height: 70dvh; overflow-y: auto; }
.site-menu a, .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
[data-theme="dark"] :focus-visible { outline-color: #93c5fd; }
[data-theme="dark"] .sidebar :focus-visible { outline-color: #fbbf24; }
[data-theme="dark"] .form-label .req { color: var(--gp-danger-text); }
[data-theme="dark"] .stars { color: #fbbf24; }
[data-theme="dark"] a { color: #93c5fd; }
[data-theme="dark"] a:hover { color: #bfdbfe; }
[data-theme="dark"] .btn-primary, [data-theme="dark"] .sb-link.is-active { background-color: #1d4ed8; color: #fff; }
[data-theme="dark"] .sb-link.is-active { background-color: var(--sidebar-active-bg); }
[data-theme="dark"] .btn-primary:hover { background-color: #1e40af; color: #fff; }
[data-theme="dark"] .btn-secondary, [data-theme="dark"] .dp-item, [data-theme="dark"] .sb-link { color: var(--gp-text-main); }
[data-theme="dark"] .tab.is-active, [data-theme="dark"] .dp-item.is-unread .dp-item-title,
[data-theme="dark"] .badge-accent { color: #93c5fd; }
[data-theme="dark"] .dp-item-danger { color: var(--gp-danger-text); }
[data-theme="dark"] .page-btn.is-active { background-color: #1d4ed8; color: #fff; }

/* Start with stacked filters and progressively place controls side by side. */
.toolbar { align-items: flex-end; }
.toolbar > :not(.visually-hidden):not([type="hidden"]), .toolbar .grow,
.toolbar .form-input, .toolbar .form-select { width: 100%; min-width: 0; flex-basis: 100%; }
.date-range { width: 100%; }
.date-range .form-input { width: 100%; min-width: 0; }
@media (min-width: 769px) {
  .toolbar > :not(.visually-hidden):not([type="hidden"]), .toolbar .form-input,
  .toolbar .form-select { width: auto; flex-basis: auto; }
  .toolbar .grow { flex: 1 1 15rem; }
  .toolbar-field .input-with-icon input { width: 100%; }
  .date-range { width: auto; }
  .date-range .form-input { width: auto; }
  .logo-row form { flex-basis: 15rem; }
}
@media (max-width: 992px) {
  .topbar { position: relative; flex-wrap: wrap; padding-block: .5rem; }
  .topbar-left { min-width: 0; flex: 1 1 8rem; }
  .breadcrumb { min-width: 0; flex-wrap: wrap; }
  .sidebar { height: 100dvh; max-height: 100dvh; visibility: hidden; }
  .sidebar.is-open { visibility: visible; }
  .drawer-close { display: inline-flex; }
  .drawer-open { overflow: hidden; }
  .dropdown-panel { position: fixed; top: 4.5rem; right: 1rem; left: 1rem; width: auto; }
  .sidebar-user { max-height: 25dvh; overflow-y: auto; }
  .sidebar-status { max-height: 15dvh; overflow-y: auto; }
}
@media (max-width: 640px) {
  .content { padding: 1rem; }
  .page-title { font-size: clamp(1.4rem, 5vw, 1.625rem); }
  .toolbar .btn, .form-actions .btn { width: 100%; }
  .form-actions .form-hint { text-align: left; }
  .chat-bubble { max-width: 95%; }
  .detail-row dd { text-align: left; }
  .rfq-item, .review-item { padding: 1rem; }
}
/* Navigation remains usable if scripts fail or are disabled. */
@media (max-width: 992px) {
  .no-script .app-shell { display: block; }
  .no-script .sidebar { position: static; transform: none; visibility: visible; width: 100%; max-width: none; height: auto; max-height: none; }
  .no-script .sidebar-nav { max-height: none; }
  .no-script .menu-toggle, .no-script .drawer-close { display: none; }
  .no-script .site-menu { max-height: none; }
}

/* Boundaries of native fields and secondary actions must be distinguishable. */
:is(.form-input, .form-select, .form-textarea, .btn-secondary, .icon-btn),
:is(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea) { border-color: #64748b; }
[data-theme="dark"] :is(.form-input, .form-select, .form-textarea, .btn-secondary, .icon-btn, input, select, textarea) { border-color: #94a3b8; }

/* Keep chart labels readable instead of shrinking the SVG text on phones. */
.chart-wide { overflow-x: auto; max-width: 100%; }
.chart-wide > svg { min-width: 40rem; }
.chart-wide:focus-visible { outline-offset: -3px; }