/* =====================================================================
   Responsive layer: makes the whole app fit any screen (loaded last).
   - every tab is always visible (tabs wrap instead of hiding behind a scroll)
   - fluid spacing, no sideways scrolling, tables scroll inside their own box
   ===================================================================== */

/* ----- page shell ----- */
.dash-wrap{ padding:clamp(16px, 3.5vw, 48px) clamp(12px, 3vw, 28px) 80px; }
body.pc-view .dash-wrap{ max-width:min(100%, 1440px); }
.dash-header{ flex-wrap:wrap; gap:12px 16px; }
.dash-header > *{ min-width:0; }
.greeting{ max-width:100%; }

/* ----- tabs: all visible, wrapping onto more rows when needed ----- */
.tabs{ flex-wrap:wrap; overflow:visible; row-gap:0; }
.tab-btn{ flex:0 0 auto; }

/* ----- long content never forces the page wider than the screen ----- */
.panel, .tab-panel, .stat-card{ min-width:0; }
img, svg, video, canvas{ max-width:100%; }
.cust-name, .emp-name, .emp-username, .at-title, .at-sub, .task-title{ overflow-wrap:anywhere; }
.att-badge{ white-space:normal; }
.modal-card{ max-height:92vh; overflow-y:auto; }

/* ----- phones and small tablets ----- */
@media (max-width:640px){
  .tabs{ display:grid; grid-template-columns:repeat(auto-fit, minmax(128px, 1fr)); gap:6px; border-bottom:none; margin-bottom:20px; }
  .tab-btn{
    white-space:normal; text-align:center; line-height:1.25; font-size:11px; padding:10px 8px;
    background:#fff; border:1px solid var(--rule); border-radius:10px;
  }
  .tab-btn.active{ background:var(--amber); color:#fff; border-color:var(--amber); }
  .tab-btn .task-badge{ margin-left:4px; }
}

/* ----- wide tables scroll inside their own box; soft shadows hint that there is more to swipe ----- */
.table-wrap{
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,    rgba(60,40,10,.20), rgba(60,40,10,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(60,40,10,.20), rgba(60,40,10,0)) right center;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll;
  -webkit-overflow-scrolling:touch;
}

/* ----- full-screen popups stay usable on short screens (landscape phones, tiny windows) ----- */
.att-overlay{ overflow-y:auto; align-items:flex-start; justify-content:center; }
.att-box{ margin:auto; }
@media (max-height:520px){
  .att-title{ font-size:22px; }
  .att-text{ margin-bottom:16px; }
  .att-eyebrow{ margin-bottom:12px; }
}

/* ----- rows of buttons/fields that were built with inline "display:flex" now wrap instead of overflowing ----- */
[style*="display:flex"], [style*="display: flex"]{ flex-wrap:wrap; gap:8px; }

/* ----- a button inside a "flex:0" field sets the field's width (no more 7px spill-over) ----- */
.field[style*="flex:0"]{ min-width:max-content; }

/* ----- money figures shrink to fit their card instead of spilling out (Accounts screens only;
         dashboard counts like "25" keep their full size) ----- */
#tab-admin-accounts .stat-value, #tab-accounts .stat-value{ overflow-wrap:anywhere; }
@supports (container-type:inline-size){
  #tab-admin-accounts .stat-card, #tab-accounts .stat-card{ container-type:inline-size; }
  #tab-admin-accounts .stat-value, #tab-accounts .stat-value{ font-size:clamp(18px, 14cqw, 34px); }
}

/* ----- "Staff tools" group in the admin / boss tab bar ----- */
.tabs-label{
  flex:0 0 100%; padding:10px 2px 2px; font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim);
}
@media (max-width:640px){ .tabs-label{ grid-column:1 / -1; padding:6px 2px 0; } }
body.is-boss .staff-timelog{ display:none; }          /* the boss does not check in */