/* Clover Flex portrait fit: keep every action visible and prevent modules from
   painting over one another. Scoped to the Flex-sized viewport only. */
@media (max-width: 800px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .dashboard.menu-open > .sidebar {
    width: min(270px,82vw) !important;
    padding: 7px 8px !important;
  }
  .dashboard.menu-open > .sidebar .side-brand { gap: 8px !important; padding: 0 3px 5px !important; }
  .dashboard.menu-open > .sidebar .side-brand .brand-mark { width: 38px !important; height: 38px !important; }
  .dashboard.menu-open > .sidebar .side-brand strong { font-size: 12px !important; letter-spacing: 1.2px !important; }
  .dashboard.menu-open > .sidebar .side-brand span { font-size: 9px !important; }
  .dashboard.menu-open > .sidebar nav { gap: 2px !important; overflow-y: visible !important; }
  .dashboard.menu-open > .sidebar nav button {
    min-height: 40px !important;
    padding: 5px 9px !important;
    gap: 8px !important;
    font-size: 13px !important;
    line-height: 1.1 !important;
  }
  .dashboard.menu-open > .sidebar nav b { font-size: 16px !important; }
  .dashboard.menu-open > .sidebar .side-foot { margin-top: 3px !important; padding: 5px 5px 0 !important; }
  .dashboard.menu-open > .sidebar .side-foot button { padding: 5px 0 !important; font-size: 12px !important; }
  .dashboard.module-active > .dash-main > .dash-head { display: none !important; }
  .dashboard[data-active-module="posboard"] #featureContent > .feature-heading,
  .dashboard[data-active-module="pos"] #featureContent > .feature-heading { display: none !important; }
  .dash-main { width: 100% !important; padding: 8px 7px 32px !important; overflow-x: hidden; }

  .dash-head {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center !important;
    gap: 8px;
    padding: 5px 0;
  }
  .dash-head > div:nth-child(2) { min-width: 0; }
  .dash-head h2 { margin: 2px 0 !important; font-size: 28px !important; line-height: 1.05; }
  .dash-head .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .dash-head .muted { margin: 4px 0; font-size: 13px; }
  .profile > div { width: 36px; height: 36px; }

  .toolbar:not(.hidden) {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px !important;
    margin: 10px 0 !important;
  }
  .range-buttons { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); min-width: 0; }
  .range-buttons button { min-width: 0; padding: 8px 3px !important; font-size: 9px !important; white-space: normal; }
  .toolbar > span { grid-column: 1; min-width: 0; font-size: 11px; }
  .toolbar > .refresh { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; margin: 0 !important; min-height: 44px; padding: 7px 10px; }

  html.nsp-clover-legacy .metric-grid,
  .metric-grid { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; }
  html.nsp-clover-legacy .metric-grid > *,
  .metric-grid > * {
    width: calc(50% - 4px) !important;
    min-width: 0 !important;
    min-height: 118px !important;
    flex: 0 0 calc(50% - 4px) !important;
    padding: 13px !important;
  }
  .metric-grid strong { margin: 7px 0 4px !important; font-size: 25px !important; }
  .content-grid { gap: 8px !important; margin-top: 8px !important; }
  .panel { min-width: 0; padding: 11px !important; }
  .panel-head { flex-wrap: wrap; gap: 7px; }
  .panel h3 { margin: 4px 0 10px; font-size: 19px; }

  .feature-heading {
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center !important;
    gap: 7px !important;
    margin: 4px 0 9px !important;
  }
  .feature-heading > div { min-width: 0; }
  .feature-heading h2 { margin: 2px 0 !important; font-size: 26px !important; line-height: 1.05; }
  .feature-heading .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .feature-heading .muted { margin: 3px 0; font-size: 12px; line-height: 1.25; }
  .feature-heading > .refresh { margin: 0 !important; min-height: 44px; padding: 7px 9px; }

  html.nsp-clover-legacy .feature-grid > *,
  html.nsp-clover-legacy .content-grid > *,
  html.nsp-clover-legacy .kiosk-layout > * { min-width: 0 !important; width: 100% !important; flex: 1 1 100% !important; }

  .turn-commandbar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px !important; margin-bottom: 8px; padding: 7px; }
  .turn-commandbar button { min-width: 0; min-height: 44px; padding: 7px !important; font-size: 11px; white-space: normal; }
  .turn-commandbar span { grid-column: 1 / -1; width: auto !important; margin: 0 !important; font-size: 9px; text-align: center; }
  .turn-technician-grid { grid-template-columns: 1fr !important; gap: 8px; }

  .pos-register-commandbar { grid-template-columns: auto minmax(0,1fr) auto !important; gap: 6px !important; }
  .pos-tabs { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px !important; }
  .pos-tabs button { min-width: 0; min-height: 44px; padding: 7px !important; white-space: normal; }
  .pos-sale-grid, .pos-ticket-grid { gap: 8px !important; }
  .pos-catalog { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px; }
  .pos-service { min-width: 0; min-height: 64px; padding: 8px; }
  .pos-payment, html.nsp-clover-legacy .pos-payment {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
    left: 0; right: 0; bottom: 0;
    padding: 8px !important;
  }
  .pos-payment label, html.nsp-clover-legacy .pos-payment label { grid-column: 1 / -1 !important; min-width: 0 !important; }
  .pos-payment button, html.nsp-clover-legacy .pos-payment button { min-width: 0 !important; width: 100% !important; min-height: 48px !important; padding: 6px !important; }
  .pos-refund, .pos-clock { display: grid !important; grid-template-columns: 1fr 1fr; gap: 7px; }
  .pos-refund h4, .pos-refund button, .pos-clock label { grid-column: 1 / -1; }

  .gcv2-head { display: grid !important; grid-template-columns: auto minmax(0,1fr); gap: 8px !important; padding: 10px !important; }
  .gcv2-head h2 { font-size: 23px !important; }
  .gcv2-head p { font-size: 11px; line-height: 1.25; }
  .gcv2-head-actions { grid-column: 1 / -1; width: 100%; gap: 7px !important; }
  .gcv2-online-link { min-width: 0; min-height: 44px; padding: 6px 9px !important; white-space: normal !important; text-align: center; }
  .gcv2-tabs { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px !important; padding: 7px !important; }
  .gcv2-tabs button { min-width: 0; min-height: 44px; padding: 6px !important; font-size: 11px; white-space: normal; }
  .gcv2-tabs button:nth-child(5) { grid-column: 1 / -1; }
  .gcv2-metrics { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .gcv2-metrics article { min-width: 0; padding: 10px !important; }
  .gcv2-metrics strong { font-size: 20px !important; }
  .gcv2-card { min-width: 0; padding: 11px !important; }
  .gcv2-fields.two, .gcv2-paymethods { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 6px !important; }
  .gcv2-paymethods button { min-width: 0; height: 52px; padding: 5px; font-size: 12px; }

  .booking-compact-bar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px !important; padding: 6px !important; }
  .booking-compact-bar button { min-width: 0; min-height: 40px; height: auto !important; padding: 5px !important; white-space: normal; }
  .booking-compact-bar span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .booking-toolbar, .booking-filter { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .booking-toolbar button, .booking-filter button { min-height: 42px; }
  .booking-board-shell { height: calc(100vh - 180px) !important; min-height: 430px; }
  .booking-dialog { max-height: 94vh; overflow: auto; }
  .booking-dialog footer button { min-height: 44px; }

  .kiosk-page > header { padding: 11px !important; }
  .kiosk-page > header h2 { margin: 4px 0; font-size: 27px; }
  .kiosk-layout { display: block !important; }
  .kiosk-main, .kiosk-summary { width: 100% !important; min-width: 0 !important; }
  .kiosk-service-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .kiosk-service-assignment { grid-template-columns: 1fr !important; gap: 5px !important; }

  .owner-admin-toolbar { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  .owner-admin-toolbar > * { min-width: 0 !important; width: 100% !important; }
  .owner-admin-range, .manager-tabs { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px !important; }
  .owner-admin-range > * { min-width: 0 !important; margin: 0 !important; }
  .owner-admin-range input { width: 100% !important; min-width: 0 !important; padding: 8px !important; font-size: 13px !important; }
  .owner-admin-range button { grid-column: 1 / -1; width: 100% !important; }
  .owner-admin-tabs { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px !important; }
  .owner-admin-toolbar button, .owner-admin-range button, .owner-admin-tabs button, .manager-tabs button { min-width: 0; min-height: 44px; padding: 6px !important; white-space: normal; }
  .owner-admin-live { display: flex !important; flex-wrap: wrap; gap: 6px; }
  .owner-admin-cards { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .owner-admin-cards > * { min-width: 0 !important; padding: 12px !important; }
  .manager-summary-cards { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 7px !important; }
  .manager-summary-cards > * { min-width: 0 !important; padding: 12px !important; }
}