/* Shared responsive layer. Important declarations are layered so older page
   ID selectors cannot restore desktop dimensions. Print keeps its own layout. */
.master-mobile-menu-toggle, .master-scroll-hint { display: none; }
.master-table-scroll { max-width: 100%; overflow-x: auto; }
@layer master-mobile {
  @media screen {
    .onboarding-shell { margin: 0 !important; width: 100% !important; box-sizing: border-box !important; }
  }
  @media screen and (min-width: 1025px) and (max-width: 1550px) {
    .produto-list-header, .produto-card-shell { grid-template-columns: 70px minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr) 120px !important; min-width: 0 !important; }
    .produto-card-shell > *, .produto-list-header > * { min-width: 0 !important; overflow-wrap: anywhere !important; }
  }
  @media screen and (max-width: 1024px) {
    html, body, .layout { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
    body { overflow-x: visible !important; }
    .layout { display: block !important; }
    .layout > .sidebar {
      position: sticky !important; inset: 0 0 auto !important; z-index: 1000 !important;
      width: 100% !important; height: auto !important; min-height: 60px !important;
      max-height: 100dvh !important; padding: 6px 90px 6px 12px !important;
      overflow: auto !important; box-sizing: border-box !important;
    }
    .sidebar .brand { width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 4px 0 !important; border: 0 !important; }
    .sidebar .brand::before { width: 142px !important; height: 38px !important; }
    .master-mobile-menu-toggle {
      display: inline-flex !important; position: absolute !important; top: 8px !important; right: 12px !important;
      align-items: center; justify-content: center; min-width: 64px; min-height: 44px;
      padding: 8px 12px; border: 1px solid #ffffff88; border-radius: 6px;
      background: #ffffff20; color: #fff; font: inherit; font-weight: 600; cursor: pointer;
    }
    .sidebar:not(.mobile-menu-open) > .nav-group,
    .sidebar:not(.mobile-menu-open) .portal-menu-organized { display: none !important; }
    .sidebar.mobile-menu-open { padding-right: 12px !important; }
    .sidebar.mobile-menu-open > .nav-group,
    .sidebar.mobile-menu-open .portal-menu-organized { display: grid !important; grid-template-columns: minmax(0,1fr) !important; width: 100% !important; margin: 6px 0 !important; gap: 4px !important; }
    .sidebar .menu-box, .sidebar .nav-item { width: 100% !important; min-width: 0 !important; }
    .sidebar .nav-item, .sidebar summary, .sidebar .menu-subitem { min-height: 44px !important; height: auto !important; padding: 10px !important; box-sizing: border-box !important; }
    .sidebar .menu-box-items, .sidebar .menu-subgroup-items { position: static !important; width: 100% !important; max-height: none !important; overflow: visible !important; }
    .sidebar details:not([open]) > :not(summary) { display: none !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page), .layout > :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) {
      width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important;
      padding: 8px 8px calc(68px + env(safe-area-inset-bottom)) !important; overflow: visible !important;
      box-sizing: border-box !important; overflow-wrap: anywhere !important;
    }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) *, :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) *::before, :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) *::after { box-sizing: border-box; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) > *, :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(main, section, article, form, fieldset, .card, .panel, .toolbar, .topbar) { min-width: 0 !important; max-width: 100% !important; }
    /* Compact reading rhythm. Inputs keep 16px to avoid zoom while typing on iOS. */
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :where(p, li, td, th, label, .muted, .flash, .card, .panel, .proposal-box) { font-size: 13px !important; line-height: 1.35 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.card, .panel, .form-card, .master-form-surface, .proposal-box, .exec-section) { padding: 8px !important; margin-bottom: 8px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) p { margin-top: 4px !important; margin-bottom: 6px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.flash, .notice) { padding: 7px 8px !important; margin-bottom: 6px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(small, .summary-card-label, .summary-card-meta, .field > span:first-child, .field > label) { font-size: 12px !important; line-height: 1.3 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .field { gap: 3px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .person-form-actions { margin: 8px 0 0 !important; padding: 8px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .person-form-section-heading { padding: 6px 8px !important; gap: 6px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .topbar { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; margin-bottom: 8px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .proposal-heading { gap: 6px !important; margin-bottom: 8px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .topbar > * { flex: 0 1 auto !important; min-height: 0 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .topbar-action-bar { flex: 0 1 auto !important; width: 100% !important; min-height: 0 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.toolbar, .inline-actions, .actions, .form-actions, .master-mobile-flex) { flex-wrap: wrap !important; gap: 6px !important; min-width: 0 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-mobile-flex > * { min-width: 0 !important; max-width: 100% !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.grid, .form-grid, .filters-grid, .master-mobile-grid, [style*="grid-template-columns"]) {
      grid-template-columns: repeat(2,minmax(0,1fr)) !important; grid-auto-columns: minmax(0,1fr) !important; gap: 8px !important; min-width: 0 !important;
    }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.grid, .form-grid, .filters-grid, .master-mobile-grid, [style*="grid-template-columns"]) > * { min-width: 0 !important; max-width: 100% !important; grid-column: auto !important; grid-row: auto !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-mobile-grid > .master-mobile-full { grid-column: 1 / -1 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) h1 { font-size: 19px !important; line-height: 1.25 !important; margin: 0 0 4px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) h2 { font-size: 16px !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(h3,h4) { font-size: 14px !important; line-height: 1.3 !important; margin: 0 0 4px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.summary-card, .metric-card, .fatura-summary-card, .contract-summary-card, .contrato-summary-card, .card:has(> .metric), .exec-metrics > div, .contrato-compact-metric, .mini-metric, .hero-pill) { min-height: 0 !important; height: auto !important; padding: 8px !important; gap: 4px !important; margin-bottom: 0 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.metric, .summary-card strong, .metric-card strong, .fatura-summary-card strong, .contract-summary-card strong, .contrato-summary-card strong, .exec-metrics dd, .contrato-compact-metric strong, .mini-metric strong, .hero-pill strong) { font-size: 16px !important; line-height: 1.25 !important; margin: 2px 0 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.summary-card-label, .metric-card > .muted:first-child, .financeiro-overview-card > .muted:first-child) { min-height: 0 !important; padding: 3px 5px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
      width: 100% !important; min-width: 0 !important; max-width: 100% !important;
      min-height: 44px !important; font-size: 16px !important; line-height: 1.35 !important;
    }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) textarea { resize: vertical !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(input[type=checkbox],input[type=radio]) { width: 22px !important; height: 22px !important; min-width: 22px !important; flex: 0 0 22px !important; vertical-align: middle !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(button, .btn, .button, summary), .exec-menu-floating :is(a,button), .fatura-menu-panel :is(a,button), .proposal-row-actions-panel :is(a,button) {
      min-height: 44px !important; min-width: 44px !important; max-width: 100% !important;
      white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.3 !important;
    }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(button, .btn, .button) { padding: 8px 10px !important; font-size: 12px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(img, svg, canvas, video, iframe) { max-width: 100% !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) pre { white-space: pre-wrap !important; overflow-wrap: anywhere !important; max-width: 100% !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-table-scroll {
      display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important;
      overflow: auto !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-table-scroll > table { min-width: 640px !important; width: 100% !important; max-width: none !important; table-layout: auto !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-table-scroll :is(th,td) { overflow-wrap: normal !important; }
    .master-scroll-hint { display: block !important; margin: 4px 0 6px; color: #47637c; font-size: 12px; }
    .master-scroll-hint[hidden] { display: none !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) [hidden] { display: none !important; }
    .master-table-scroll:focus-visible { outline: 2px solid #1689c6; outline-offset: 2px; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.kanban-board, .kanban-columns) { display: flex !important; overflow-x: auto !important; width: 100% !important; max-width: 100% !important; scroll-snap-type: x proximity; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.kanban-board, .kanban-columns) > * { flex: 0 0 min(82vw,360px) !important; min-width: 0 !important; scroll-snap-align: start; }
    :is(dialog, .modal-content, .dialog-card, .modal-card) { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: auto !important; }
    :is(.exec-menu-floating, .fatura-menu-panel, .proposal-row-actions-panel) { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow-y: auto !important; }
    #master-support-shortcut { bottom: max(12px,env(safe-area-inset-bottom)) !important; }
    #master-support-shortcut :is(a,button) { width: 44px !important; height: 44px !important; }
    .onboarding-shell { margin: 0 !important; padding: 8px !important; width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
    .capepay-shell { grid-template-columns: minmax(0,1fr) !important; margin: 0 !important; padding: 8px !important; min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; }
    .capepay-shell-sidebar { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; box-sizing: border-box !important; }
    .capepay-side-link { max-width: 100% !important; box-sizing: border-box !important; }
    .capepay-shell-content { padding: 0 !important; }
    .capepay-modal-card { max-width: calc(100vw - 24px) !important; max-height: calc(100dvh - 24px) !important; overflow: auto !important; }
    .onboarding-content { padding: 0 !important; }
    .master-pdv-login :is(input,select,textarea) { font-size: 16px !important; min-height: 44px !important; }
    .master-pdv-login :is(button,.master-pdv-submit) { min-height: 44px !important; }
  }
  @media screen and (max-width: 600px) {
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.grid, .form-grid, .filters-grid, .master-mobile-grid, [style*="grid-template-columns"]) { grid-template-columns: minmax(0,1fr) !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.grid, .form-grid, .filters-grid, .master-mobile-grid, [style*="grid-template-columns"]) > * { grid-column: 1 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.inline-actions, .form-actions, .topbar-action-bar) { width: 100% !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.form-actions, .topbar-action-bar) > :is(a,button) { flex: 1 1 auto !important; text-align: center !important; justify-content: center !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-table-scroll > .master-editable-table { min-width: 0 !important; width: 100% !important; display: block !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-editable-table thead { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-editable-table tbody { display: block !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-editable-table tbody tr { display: block !important; margin-bottom: 8px !important; padding: 6px !important; border: 1px solid #cfdeea !important; background: #fff !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-editable-table tbody td { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 4px !important; border: 0 !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) .master-editable-table tbody td::before { content: attr(data-mobile-label); display: block; font-size: 12px; color: #47637c; margin-bottom: 2px; }
    /* Only summary grids share columns on phones; regular form fields stay full width. */
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.summary-card-grid, .exec-metrics, .contrato-commercial-metrics, .payroll-metrics, .financeiro-overview-grid, .dashboard-overview, .hero-metrics, .grid:has(> .card > .metric)) { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.summary-card-grid, .exec-metrics, .contrato-commercial-metrics, .payroll-metrics, .financeiro-overview-grid, .dashboard-overview, .hero-metrics, .grid:has(> .card > .metric)) > * { grid-column: auto !important; }
    :is(.content, .onboarding-content, .capepay-shell-content, .cs-support-page) :is(.summary-card-grid, .exec-metrics, .contrato-commercial-metrics, .payroll-metrics, .financeiro-overview-grid, .dashboard-overview, .hero-metrics, .grid:has(> .card > .metric)) > .master-mobile-full { grid-column: 1 / -1 !important; }
    /* The product checkbox/name form one header; quantity and value share the next row. */
    #propostas-page #proposal-products.master-editable-table tbody tr { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 2px !important; }
    #propostas-page #proposal-products.master-editable-table tbody td:first-child { min-height: 44px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
    #propostas-page #proposal-products.master-editable-table tbody td:nth-child(2) { align-self: center !important; font-weight: 600 !important; }
    #propostas-page #proposal-products.master-editable-table tbody td:nth-child(2)::before { display: none; }
    #propostas-page #proposal-products.master-editable-table tbody td:last-child { grid-column: 1 / -1 !important; }
  }
}
@media print {
  .master-mobile-menu-toggle, .master-scroll-hint { display: none !important; }
  .master-table-scroll { overflow: visible; }
}