/*
 VERVE POS WEB-P1B.2.6 — RESPONSIVE FOUNDATION
 Scope: presentation only. No API/auth/database logic.
 Designed to layer after the existing VERVE styles without replacing them.
*/

:root{
  --verve-page-gutter: clamp(12px, 2vw, 24px);
  --verve-card-gap: clamp(10px, 1.5vw, 18px);
  --verve-control-h: 42px;
  --verve-radius: 14px;
}

html{
  width:100%;
  max-width:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

*, *::before, *::after{
  box-sizing:border-box;
}

img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

main,
[role="main"],
.main,
.main-content,
.content,
.page,
.page-content,
.app-content,
.shell-content,
.workspace,
.workspace-main,
.pos-main{
  min-width:0;
  max-width:100%;
}

main > *,
[role="main"] > *,
.main-content > *,
.content > *,
.page-content > *,
.app-content > *{
  min-width:0;
}

input,
select,
textarea,
button{
  max-width:100%;
}

input,
select,
textarea{
  min-height:var(--verve-control-h);
}

button,
.btn,
.button,
[role="button"]{
  min-height:40px;
}

table{
  max-width:100%;
}

.table-wrap,
.table-wrapper,
.table-scroll,
.responsive-table{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* Common VERVE/card grids: only applies if these classes exist. */
.grid,
.card-grid,
.cards-grid,
.product-grid,
.products-grid,
.catalog-grid,
.menu-grid,
.order-grid,
.orders-grid,
.member-grid,
.members-grid,
.dashboard-grid,
.stat-grid,
.stats-grid{
  min-width:0;
  max-width:100%;
}

.product-grid,
.products-grid,
.catalog-grid,
.menu-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));
  gap:var(--verve-card-gap);
}

.dashboard-grid,
.card-grid,
.cards-grid,
.stat-grid,
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:var(--verve-card-gap);
}

.card,
.panel,
.tile,
.product-card,
.order-card,
.member-card,
.stat-card{
  min-width:0;
  max-width:100%;
}

/* Flexible action rows. */
.toolbar,
.actions,
.page-actions,
.header-actions,
.top-actions,
.filter-row,
.filters,
.form-row,
.field-row{
  min-width:0;
  max-width:100%;
  flex-wrap:wrap;
}

.toolbar > *,
.actions > *,
.page-actions > *,
.header-actions > *,
.top-actions > *,
.filter-row > *,
.filters > *{
  min-width:0;
}

/* Prevent long IDs / URLs / member data from breaking the layout. */
.card,
.panel,
.tile,
td,
th,
label,
.value,
.meta,
.subtitle,
.description{
  overflow-wrap:anywhere;
}

/* Dialogs and sheets never exceed viewport. */
dialog,
.modal,
.modal-card,
.dialog,
.dialog-card,
.sheet,
.drawer-panel{
  max-width:min(94vw, 760px);
  max-height:92dvh;
}

/* Tablet */
@media (max-width: 900px){
  :root{
    --verve-page-gutter:16px;
    --verve-card-gap:12px;
  }

  main,
  [role="main"],
  .main,
  .main-content,
  .content,
  .page,
  .page-content,
  .app-content,
  .workspace-main,
  .pos-main{
    width:100%;
    max-width:100%;
  }

  .sale-layout,
  .checkout-layout,
  .payment-layout,
  .receipt-layout,
  .membership-layout,
  .admin-layout,
  .pos-layout,
  .split-layout,
  .two-column,
  .two-col{
    grid-template-columns:1fr !important;
  }

  .product-grid,
  .products-grid,
  .catalog-grid,
  .menu-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Phone */
@media (max-width: 600px){
  :root{
    --verve-page-gutter:12px;
    --verve-card-gap:10px;
    --verve-control-h:44px;
    --verve-radius:12px;
  }

  body{
    min-width:0 !important;
  }

  main,
  [role="main"],
  .main,
  .main-content,
  .content,
  .page,
  .page-content,
  .app-content,
  .workspace-main,
  .pos-main{
    padding-left:var(--verve-page-gutter);
    padding-right:var(--verve-page-gutter);
  }

  h1{font-size:clamp(1.35rem,7vw,1.75rem);}
  h2{font-size:clamp(1.15rem,6vw,1.45rem);}

  .page-header,
  .section-header,
  .toolbar,
  .actions,
  .page-actions,
  .header-actions,
  .top-actions,
  .filter-row,
  .filters{
    gap:8px;
  }

  .product-grid,
  .products-grid,
  .catalog-grid,
  .menu-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .dashboard-grid,
  .card-grid,
  .cards-grid,
  .stat-grid,
  .stats-grid,
  .order-grid,
  .orders-grid,
  .member-grid,
  .members-grid{
    grid-template-columns:1fr;
  }

  .card,
  .panel,
  .tile,
  .product-card,
  .order-card,
  .member-card,
  .stat-card{
    border-radius:var(--verve-radius);
  }

  dialog,
  .modal,
  .modal-card,
  .dialog,
  .dialog-card,
  .sheet,
  .drawer-panel{
    width:min(94vw, 560px);
    max-width:94vw;
  }
}

/* Narrow phone: keep product grid useful without forcing horizontal scrolling. */
@media (max-width: 390px){
  .product-grid,
  .products-grid,
  .catalog-grid,
  .menu-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .toolbar,
  .actions,
  .page-actions,
  .header-actions,
  .top-actions{
    row-gap:8px;
  }
}

/* Landscape phones / small tablets */
@media (orientation:landscape) and (max-height:520px){
  dialog,
  .modal,
  .modal-card,
  .dialog,
  .dialog-card,
  .sheet,
  .drawer-panel{
    max-height:88dvh;
    overflow:auto;
  }
}

/*
 Intentionally NOT changed here:
 - sidebar open/close logic
 - ghost / server icon
 - K help shield
 - auth
 - API routing
 - server / database
 Existing VERVE shell JS remains source of truth.
*/