/* Responsive layout v1 — presentation-only. Applied last on every HTML page.
   No changes to application logic, payments, Power BI or Power Query. */
:root { --max: 1680px; }
@media (min-width: 2200px) { :root { --max: 2080px; } }

/* Fluid site width: utilize large monitors without making phone pages overflow. */
.container {
  width: min(calc(100% - clamp(28px, 5vw, 96px)), var(--max));
  max-width: 100%;
}
main, main > section, .container, .form-wrap, .form-card, .admin-card,
.request-card, .dashboard-card, .client-dashboard-card, .portal-head,
.admin-dashboard-grid, .grid3, .grid4, .form-grid, .hub-grid,
.client-dashboard-grid, .tool-grid, .metrics-panels, .metrics-grid {
  min-width: 0;
}
img, svg, video, canvas { max-width: 100%; }
iframe { max-width: 100%; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { max-width: 100%; min-width: 0; }
pre, code { overflow-wrap: anywhere; }

/* Global footer: wrapping instead of a desktop-only, nonwrapping link row. */
.footer { flex-wrap: wrap; min-width: 0; }
.footer-links { flex: 1 1 360px; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; justify-content: flex-end; }
.footer-links a { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.footer > p, .footer .muted { min-width: 0; overflow-wrap: anywhere; }

/* Responsive form and dashboard cards, with existing actions and DOM unchanged. */
.grid3 > *, .grid4 > *, .client-dashboard-grid > *, .form-wrap > *,
.form-grid > *, .metrics-grid > *, .metrics-panels > *, .tool-grid > * {
  min-width: 0;
}
.btn { max-width: 100%; }
.form-grid input, .form-grid select, .form-grid textarea { min-width: 0; max-width: 100%; }

/* ERP-specific surfaces retain their own theme; widen content on large desktop. */
@media (min-width: 1800px) {
  .erp-content { max-width: 1900px !important; width: 100%; }
  .erp-app .metric-grid, .erp-app .widget-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .setup-shell, .setup-top .inner { width: min(calc(100% - 96px), 1680px); }
}
@media (min-width: 2200px) {
  .erp-content { max-width: 2140px !important; }
  .setup-shell, .setup-top .inner { width: min(calc(100% - 120px), 2080px); }
}

@media (max-width: 1100px) {
  .hero-grid, .client-dashboard-grid, .hub-coming { min-width: 0; }
}
@media (max-width: 900px) {
  .container { width: calc(100% - 30px); }
  .footer { align-items: flex-start; }
  .footer-links { justify-content: flex-start; flex: 1 1 100%; }
  /* The admin page has expandable <details> menus. In flow prevents a
     submenu from being positioned outside the physical mobile viewport. */
  .admin-global-header .admin-global-nav { max-width: 100%; gap: 6px !important; }
  .admin-global-header .admin-global-nav .admin-nav-menu[open] {
    flex: 1 1 100%; width: 100%; min-width: 0;
  }
  .admin-global-header .admin-global-nav .admin-nav-menu[open] > .admin-nav-dropdown {
    position: static !important; inset: auto !important; width: 100%;
    min-width: 0; max-width: 100%; max-height: min(48vh, 340px);
    overflow-x: hidden; overflow-y: auto; margin: 5px 0 6px;
    box-sizing: border-box;
  }
  .admin-global-header .admin-global-nav .admin-nav-dropdown-link {
    white-space: normal; overflow-wrap: anywhere; min-width: 0;
  }
  .admin-global-header .admin-global-nav > .admin-nav-link,
  .admin-global-header .admin-global-nav > .admin-nav-menu { max-width: 100%; }
  .form-wrap, .hero-grid { min-width: 0; }
}
@media (max-width: 700px) {
  .container { width: calc(100% - 24px); }
  .section-head { flex-wrap: wrap; gap: 15px; }
  .footer { gap: 18px; }
  .footer-links { gap: 8px 16px; font-size: 12px; }
  .footer img { max-width: min(165px, 60vw); }
  .page-hero h1, .hero h1 { font-size: clamp(30px, 8.5vw, 48px); overflow-wrap: anywhere; }
  .section-head h2 { font-size: clamp(28px, 7vw, 43px); }
  .btn, .auth-nav .btn { min-height: 44px; }
  .actions, .hero-actions, .client-actions, .proposal-actions, .admin-actions,
  .dashboard-actions, .team-actions, .completed-actions { max-width: 100%; flex-wrap: wrap; }
  .form-card, .request-card, .admin-card, .dashboard-card { max-width: 100%; }
  .modal-card, .erp-modal .modal-card { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  /* Keep dense record tables usable via an intentional, touch-scrollable area. */
  .table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .erp-app .line-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .erp-app .line-row .line-desc { grid-column: 1 / -1; }
  .erp-app .line-row > * { min-width: 0; }
  .erp-app .invoice-top, .erp-app .panel-head { flex-wrap: wrap; }
  .erp-app .invoice-meta { grid-template-columns: minmax(0, 1fr); }
  .erp-app .searchbar { flex-wrap: wrap; }
  .erp-app .searchbar input { flex: 1 1 100%; }
  .erp-app .bulk-preview, .erp-app .invoice-preview { max-width: 100%; overflow-x: auto; }
  .erp-app .erp-content, .erp-app .erp-main { min-width: 0; width: 100%; }
  .erp-app .erp-topbar { gap: 8px; }
  .erp-app .top-actions, .erp-app .breadcrumb { min-width: 0; }
  .erp-app .breadcrumb b { overflow-wrap: anywhere; }
  .erp-app .icon-btn, .erp-app .close, .erp-app .widget-remove,
  .erp-app .widget-move { min-width: 44px; min-height: 44px; touch-action: manipulation; }
  .erp-app .widget-controls { flex-wrap: wrap; }
  .setup-shell, .setup-top .inner { max-width: 100%; }
  .setup-main, .setup-side, .setup-content { min-width: 0; }
  .setup-footer .btn, .setup-top .setup-back { min-height: 44px; }
}
@media (max-width: 600px) {
  .nav:has(.menu):not(.admin-global-header) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    height: auto; min-height: 70px; gap: 6px 10px;
    padding-top: 9px; padding-bottom: 9px;
  }
  .nav:has(.menu):not(.admin-global-header) > .brand { grid-column: 1; grid-row: 1; max-width: 100%; }
  .nav:has(.menu):not(.admin-global-header) > .menu { grid-column: 2; grid-row: 1; justify-self: end; }
  .nav:has(.menu):not(.admin-global-header) > .auth-nav {
    grid-column: 1 / -1; grid-row: 2;
    width: 100%; max-width: 100%; display: flex;
    justify-content: flex-start; gap: 8px; flex-wrap: wrap;
  }
  .nav:has(.menu):not(.admin-global-header) > .links.nav-open {
    top: 100%; left: 0; right: 0; max-height: min(70dvh, 560px);
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .nav:has(.menu):not(.admin-global-header) .brand-name {
    font-size: clamp(11px, 3.4vw, 14px); white-space: normal;
  }
  .nav:has(.menu):not(.admin-global-header) .brand img { flex-shrink: 0; }
  .admin-global-header .admin-global-nav { justify-content: flex-start; }
  .admin-global-header .auth-nav { flex-wrap: wrap; }
  .admin-global-header .nav, .admin-global-header.nav { max-width: 100%; }
  .erp-admin-page, .ei-layout { min-width: 0; }
  .erp-admin-toolbar, .erp-admin-grid, .erp-admin-grid.two,
  .erp-admin-grid.four, .erp-preview-card { min-width: 0; }
  .setup-top .inner { gap: 8px; }
  .setup-top .brand { min-width: 0; }
  .setup-top .brand strong { overflow-wrap: anywhere; }
}
@media (max-width: 400px) {
  .container { width: calc(100% - 20px); }
  .brand-name { overflow-wrap: anywhere; }
  .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-links a[href^="mailto:"] { grid-column: 1 / -1; }
  .admin-global-header .admin-global-nav .admin-nav-trigger,
  .admin-global-header .admin-global-nav .admin-nav-link { font-size: 11px; }
  .erp-app .metric-grid, .erp-app .widget-grid { grid-template-columns: minmax(0, 1fr); }
  .erp-app .widget-wide { grid-column: span 1; }
  .erp-app .modal-card { padding: 14px; }
  .setup-shell, .setup-top .inner { width: calc(100% - 20px); }
}
@media (pointer: coarse) {
  .admin-global-nav .admin-nav-trigger,
  .admin-global-nav .admin-nav-dropdown-link,
  .nav .links a { min-height: 44px; touch-action: manipulation; }
  .erp-app .widget-remove { opacity: 1; }
}
/* All admin shortcut links remain discoverable on a phone (no invisible scroll row). */
@media (max-width: 600px) {
  .admin-quick-nav { flex-wrap: wrap; overflow-x: visible; overflow-y: visible; }
  .admin-quick-nav a { flex: 0 1 auto; white-space: normal; }
}