/* ==========================================================================
   Responsive layer — loaded after design-system.css on the admin panel,
   member portal and public pages. Mobile-first intent: below 900px the
   sidebar becomes a slide-in drawer (see js/responsive.js), the top bar is
   compact, tables turn into labelled cards below 640px, and every tap
   target is at least 44px. No desktop rule above 900px is changed.
   ========================================================================== */

/* ---- safety net: nothing may push the page wider than the screen ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,video,svg,canvas,iframe{max-width:100%}
img,video{height:auto}
.content,.page,.card{min-width:0}
.card{overflow-wrap:anywhere}
.page{overflow-x:clip}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}

/* a checkbox/radio with its text: one row, box beside the words (was stacked + centred in grid forms) */
label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:flex!important;flex-direction:row!important;align-items:center;justify-content:flex-start;gap:10px;text-align:left}

/* hamburger + overlay exist in the DOM on every screen but only show on small ones */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--wine,#68192f);font-size:22px;line-height:1;padding:0;flex:none}
.nav-overlay{display:none}

/* ---- laptop / small desktop ---- */
@media (max-width:1180px){
  .cards-4{grid-template-columns:repeat(2,1fr)}
  .page{padding:28px}
}

/* ---- tablet & phone: drawer navigation ---- */
@media (max-width:900px){
  .app>.side{position:fixed;inset:0 auto 0 0;z-index:60;width:min(290px,86vw);height:100%;display:block;padding:20px 14px;overflow-y:auto;transform:translateX(-102%);transition:transform .28s cubic-bezier(.2,.7,.2,1);box-shadow:none;visibility:hidden}
  .app>.side .logo,.app>.side .nav-label{display:block}
  .app>.side a{white-space:normal;min-height:44px;font-size:15px}
  body.nav-open .app>.side{transform:none;visibility:visible;box-shadow:12px 0 40px rgba(20,0,7,.35)}
  .nav-overlay{position:fixed;inset:0;z-index:55;background:rgba(23,2,7,.55);opacity:0;pointer-events:none;transition:opacity .25s;display:block}
  body.nav-open .nav-overlay{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .nav-toggle{display:inline-flex}

  .top{height:64px;padding:0 14px;gap:10px;justify-content:flex-start}
  .top strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px}
  .top .user{gap:8px;flex:none}
  .top .user>span:not(.avatar){display:none}
  .page{padding:22px 20px}

  /* two-column inline grids used on a few pages collapse to one column */
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns:1fr 3fr"],
  [style*="grid-template-columns:1fr 1.4fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  .range-row{grid-template-columns:1fr}
  .profile{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .toolbar{flex-wrap:wrap}
}

/* ---- phone ---- */
@media (max-width:640px){
  .top .user a.btn{display:none}
  .top .user .btn{padding:0 12px}
  .page{padding:18px 14px}
  .page h1{font-size:28px}
  .card{padding:16px}
  .card h2,.card h3{font-size:20px}
  .cards-4,.cards-3,.cards-2,.cards-4>*,.cards-3>*{grid-template-columns:1fr}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .toolbar{align-items:stretch;flex-direction:column}
  .toolbar>*,.toolbar input,.toolbar select,.toolbar .btn{width:100%}
  .btn-row,.actions{display:flex;flex-wrap:wrap;gap:8px}
  .btn-row>.btn,.btn-row>form{flex:1 1 140px}
  .btn-row>form>.btn{width:100%}
  .modal{padding:10px}
  .modal .card{width:100%;max-height:92vh;overflow:auto}
  .modal-dialog{margin:10px!important;width:auto!important;max-width:none!important}
  .notice{font-size:13px}
  .pager-list{gap:4px}.pager-item a,.pager-item span{min-width:40px;height:40px}
  .tags span{margin:2px}

  /* tables -> labelled cards (labels are filled in by js/responsive.js) */
  table.table-stack{display:block;width:100%;border:0}
  table.table-stack thead{display:none}
  table.table-stack tbody{display:block}
  table.table-stack tr{display:block;border:1px solid var(--line);border-radius:14px;margin:0 0 12px;padding:6px 14px;background:#fff;box-shadow:0 3px 12px rgba(42,6,16,.04)}
  table.table-stack td{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border:0;border-bottom:1px dashed #eadde0;text-align:right;min-height:40px;word-break:break-word}
  table.table-stack td:last-child{border-bottom:0}
  table.table-stack td::before{content:attr(data-label);flex:none;max-width:42%;text-align:left;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  table.table-stack td[data-label=""]::before{display:none}
  table.table-stack td[data-label=""]{justify-content:flex-start}
  table.table-stack td[data-label=""]:last-child{justify-content:flex-end;flex-wrap:wrap}
  table.table-stack td[colspan]{display:block;text-align:center}
  table.table-stack td[colspan]::before{display:none}
  table.table-stack td .btn{margin:2px 0}
  table.table-stack td>form{display:inline-block}
  .table-wrap{overflow:visible;border:0;background:none;padding:0;box-shadow:none}
  .table-wrap.card{background:none;border:0;box-shadow:none;padding:0}
}

/* controls may shrink inside grids/flex rows (design-system gives .control a 190px minimum) */
@media (max-width:900px){
  input,select,textarea,.control,.toolbar input{min-width:0;max-width:100%}
  .card form,.card .form{min-width:0}
}

/* search-results filter panel: folded behind a button below 900px */
.filter-toggle{display:none;width:100%}
@media (max-width:900px){
  .filter-panel{position:static!important;top:auto}
  .filter-panel .filter-toggle{display:flex}
  .filter-panel:not(.open)>*:not(.filter-toggle){display:none!important}
  .filter-panel.open .filter-toggle{margin-bottom:14px}
}

/* ---- touch devices: comfortable tap targets, no iOS zoom-on-focus ---- */
@media (max-width:900px),(pointer:coarse){
  .btn,button.btn,a.btn,input[type=submit],input[type=button]{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2}
  .control,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),select,textarea{min-height:44px;font-size:16px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px;accent-color:var(--wine,#68192f)}
  table .btn{min-height:40px}
  .pager-item a,.pager-item span{min-width:42px;height:42px}
  label{cursor:pointer}
}
@media (prefers-reduced-motion:reduce){.app>.side,.nav-overlay{transition:none}}

/* ---- admin dashboard (stacked below 1024px) ---- */
@media (max-width:1023px){
  .page .dash-canvas{padding:16px;border-radius:20px}
  .dash-canvas .panel{min-width:0;max-width:100%}
  .dash-canvas .panel-head{flex-wrap:wrap;gap:10px}
  .dash-canvas .panel-head h2{min-width:0}
  .dash-head{align-items:flex-start}
}
@media (max-width:640px){
  .page .dash-canvas{padding:12px;margin:0 -4px}
  .page .stat-strip{gap:8px}
  .page .stat-strip>*,.page .stat-chip{min-width:0}
  .page .stat-chip{padding:12px 10px;gap:8px;flex-direction:column;align-items:flex-start}
  .page .stat-chip .stat-label{overflow-wrap:anywhere}
}