/* ShahrVam v662 — root responsive/zoom hardening.
   Final stylesheet: protects the whole workspace from browser zoom / narrow effective widths
   without scaling the UI artificially. Page-level clipping is forbidden; dense modules
   wrap or scroll inside their own container. */

/* ---------- root sizing ---------- */
html,body{max-width:100%;min-width:0}
*,*::before,*::after{box-sizing:border-box}
.app-shell,.workspace,.page-content,.page-content>*{min-width:0;max-width:100%}
.workspace{overflow-x:visible}
.page-content{width:100%;min-width:0;container-type:inline-size;container-name:sv-page}
@media(min-width:701px){
  body:not(.auth-active) #page-content.page-content{overflow-x:auto!important;overflow-y:visible;overscroll-behavior-inline:contain}
}
.page-content :is(section,article,main,form,header,footer,nav,.card,.panel,.workspace,.shell){min-width:0;max-width:100%}
.page-content img,.page-content video,.page-content canvas{max-width:100%;height:auto}

/* Flex/grid children are allowed to shrink instead of pushing the page outside viewport. */
.page-content :is(.page-actions,.card-head,.filter-bar,.toolbar,.actions,.modal-actions)>*,
.page-content :is(.form-grid,.grid,.kpi-grid,.summary-grid)>*{min-width:0}

/* ---------- global action/header wrapping ---------- */
.page-actions,.card-head,.filter-bar,.form-footer,.modal-actions,
.settings-section-toolbar,.audit-filter-actions{flex-wrap:wrap;min-width:0}
.page-actions .btn,.filter-bar .btn,.form-footer .btn,.modal-actions .btn{max-width:100%}

/* Do not let long labels, IDs or phone numbers enlarge a grid/flex track. */
.page-content :is(b,strong,span,small,p,label,a){overflow-wrap:anywhere}
.page-content :is(.ltr-cell,[dir="ltr"]){overflow-wrap:normal}

/* ---------- forms ---------- */
.field,.date-control,.money-input-shell,.commission-input-wrap{min-width:0;max-width:100%}
.field :is(input,select,textarea),.date-control input,.money-input-shell{max-width:100%}
.allocation-topbar .date-field{max-width:100%}

@media(max-width:1180px){
  .form-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finance-mini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .form-grid,.form-grid.cols-3{grid-template-columns:1fr}
  .inline-holiday-form{grid-template-columns:1fr!important}
}


/* Page-content based fallbacks: useful when a sidebar + browser zoom makes the real workspace
   narrower than viewport media queries expect. */
@container sv-page (max-width:1100px){
  .form-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .asc-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .asc-staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .asc-filters{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .asc-filters .asc-search{grid-column:1/-1}
  .asc-intro,.asc-section-head{flex-wrap:wrap}
}
@container sv-page (max-width:760px){
  .form-grid,.form-grid.cols-3{grid-template-columns:1fr!important}
  .asc-metrics,.asc-staff-grid,.asc-filters{grid-template-columns:1fr!important}
  .asc-filters .asc-search{grid-column:auto}
}

/* ---------- tables: scroll locally, never clip the whole application ---------- */
:where(.table-wrap,.table-responsive,.data-table-wrap,.table-container,
       [class*="table-wrap"],[class*="table-container"],[class*="table-responsive"],
       .sm148-contact-table-wrap,.al-table-wrap,.customer-call-table-wrap,
       .asc-table-wrap){
  min-width:0!important;
  max-width:100%!important;
  overflow-x:auto!important;
  overflow-y:visible;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
:where(.table-wrap,.table-responsive,.data-table-wrap,.table-container)>.data-table{max-width:none}

/* Pagers stay usable when browser zoom reduces the effective width. */
.sm148-pagination,.sm564-pagination,.sm564-page-nav,.sm564-page-jump,
.pv-pager,.asc-pager,.audit-pagination{min-width:0;max-width:100%;flex-wrap:wrap!important}
.sm564-page-nav,.sm564-page-jump{max-width:100%}
.sm564-page-jump label{min-width:0;max-width:100%}
.sm564-page-jump input{max-width:100%}

/* ---------- modal / drawer safety ---------- */
.modal,.modal-wide,#modal,[role="dialog"]{max-width:calc(100vw - 24px)}
.modal-body{min-width:0;max-width:100%}
@media(max-width:720px){
  .modal-backdrop{padding:8px}
  .modal,.modal-wide,#modal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important}
}

/* ---------- reconciliation cards: respond to their real container width ---------- */
body[data-page="reconciliation"] .pv-list{min-width:0;max-width:100%}
body[data-page="reconciliation"] .pvx-card{min-width:0;max-width:100%;container-type:inline-size;container-name:pvx-card}
body[data-page="reconciliation"] .pvx-primary-v628{min-width:0!important;max-width:100%!important}
body[data-page="reconciliation"] .pvx-actions{min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;white-space:normal!important}
body[data-page="reconciliation"] .pvx-actions :is(.pv-btn,.pvx-btn){max-width:100%}
body[data-page="reconciliation"] .pvx-fact b,
body[data-page="reconciliation"] .pvx-service b,
body[data-page="reconciliation"] .pvx-customer b{min-width:0;max-width:100%}

@container pvx-card (max-width:1320px){
  body[data-page="reconciliation"] .pvx-primary-v628{
    grid-template-columns:24px minmax(170px,1.2fr) minmax(118px,.8fr) minmax(120px,.82fr) minmax(118px,.82fr) minmax(105px,.72fr) minmax(125px,.8fr)!important;
    grid-template-areas:"sel customer service amount datetime card state" "actions actions actions actions actions actions actions"!important;
    row-gap:8px!important
  }
  body[data-page="reconciliation"] .pvx-select-cell{grid-area:sel}
  body[data-page="reconciliation"] .pvx-customer{grid-area:customer}
  body[data-page="reconciliation"] .pvx-service{grid-area:service}
  body[data-page="reconciliation"] .pvx-amount{grid-area:amount}
  body[data-page="reconciliation"] .pvx-datetime{grid-area:datetime}
  body[data-page="reconciliation"] .pvx-card4{grid-area:card}
  body[data-page="reconciliation"] .pvx-state{grid-area:state}
  body[data-page="reconciliation"] .pvx-actions{
    grid-area:actions!important;border-top:1px solid #edf3f7!important;
    padding:8px 0 0!important;justify-content:flex-start!important
  }
}

@container pvx-card (max-width:980px){
  body[data-page="reconciliation"] .pvx-primary-v628{
    grid-template-columns:24px minmax(0,1fr) auto!important;
    grid-template-areas:"sel customer state" "service service service" "amount datetime card" "actions actions actions"!important;
    padding:10px!important
  }
  body[data-page="reconciliation"] .pvx-service{
    border-inline-start:0!important;border-top:1px solid #edf3f7!important;
    padding:8px 0!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important
  }
  body[data-page="reconciliation"] .pvx-fact{padding:8px 7px!important;border-top:1px solid #edf3f7!important;min-height:0!important}
  body[data-page="reconciliation"] .pvx-amount{border-inline-start:0!important}
  body[data-page="reconciliation"] .pvx-actions{overflow-x:auto!important;flex-wrap:nowrap!important;justify-content:flex-start!important}
}

@container pvx-card (max-width:620px){
  body[data-page="reconciliation"] .pvx-primary-v628{
    grid-template-columns:22px minmax(0,1fr) auto!important;
    grid-template-areas:"sel customer state" "service service service" "amount amount amount" "datetime card card" "actions actions actions"!important
  }
  body[data-page="reconciliation"] .pvx-state{border-inline-start:0!important;padding:0!important;align-items:flex-end!important}
  body[data-page="reconciliation"] .pvx-fact{border-inline-start:0!important}
}

/* ---------- sales contact workbench: use actual card width, not only viewport width ---------- */
body[data-page="sales-operations"] .sm590-expert-contact-wrap{
  min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:visible!important;
  container-type:inline-size;container-name:sm590-table
}
body[data-page="sales-operations"] .sm590-expert-contact-table,
body[data-page="sales-operations"] .sm590-archive-table{max-width:none!important}
body[data-page="sales-operations"] .sm590-expert-contact-table .sm148-row-actions,
body[data-page="sales-operations"] .sm590-archive-table .sm148-row-actions{min-width:0!important;max-width:100%!important}

@container sm590-table (max-width:1180px){
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-reminder{display:none!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-row{width:7%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-name{width:27%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-phone{width:21%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-status{width:23%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-actions{width:22%!important}
}

@container sm590-table (max-width:1000px){
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-row{display:none!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-name{width:29%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-phone{width:22%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-status{width:25%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm590-col-actions{width:24%!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm148-row-actions{gap:4px!important}
  body[data-page="sales-operations"] .sm590-expert-contact-table .sm148-icon-action{
    flex-basis:32px!important;width:32px!important;min-width:32px!important;height:32px!important;min-height:32px!important
  }
}

@media(min-width:701px){
  @container sm590-table (max-width:820px){
    body[data-page="sales-operations"] table.sm590-expert-contact-table{min-width:740px!important;width:740px!important;table-layout:fixed!important}
  }
}

/* ---------- dense generic workspaces ---------- */
@media(max-width:1250px){
  .sm240-inventory-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sm240-inline-actions{justify-content:flex-start;flex-wrap:wrap}
  .sm240-allocation-controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .sm240-allocation-controls>.btn{grid-column:1/-1}
  .v387-team-request-grid{grid-template-columns:1fr!important}
  .v387-request-sections{grid-template-columns:1fr!important}
}
@media(max-width:900px){
  .sm240-inventory-summary,.sm240-credit-metrics{grid-template-columns:1fr!important}
  .sm240-allocation-controls{grid-template-columns:1fr!important}
}

/* ---------- final page-level escape hatch ---------- */
@media(max-width:1100px){
  .page-content :is(.page-actions,.card-head,.filter-bar,.toolbar){row-gap:8px}
  .page-content :is(.page-actions,.filter-bar)>.btn{white-space:normal}
}