/* Global responsive foundation */
:root{
  --responsive-gap:clamp(8px,1vw,16px);
  --responsive-pad:clamp(10px,1.5vw,24px);
}

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

body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:hidden;
}

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

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

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

textarea{
  resize:vertical;
}

:where(
  .layout,
  .app-layout,
  .admin-layout,
  .page-shell,
  .main,
  main,
  #mainContent,
  .main-content,
  .page-content,
  .content
){
  min-width:0;
  max-width:100%;
}

:where(.main,main,#mainContent,.main-content,.page-content){
  overflow-x:hidden;
}

:where(
  .card,
  .panel,
  .panel-modern,
  .od-card,
  .tc,
  .section-card,
  .modal-card
){
  min-width:0;
  max-width:100%;
}

:where(
  .sg,
  .stats-grid,
  .summary-grid,
  .kpi-grid,
  .cards-grid,
  .dashboard-grid
){
  min-width:0;
  max-width:100%;
  gap:var(--responsive-gap);
  grid-template-columns:repeat(
    auto-fit,
    minmax(min(100%,160px),1fr)
  );
}

:where(
  .topbar,
  .page-header,
  .pg-hdr,
  .panel-modern-head,
  .tc-h,
  .toolbar,
  .action-bar,
  .actions,
  .filters-actions
){
  min-width:0;
  max-width:100%;
  gap:var(--responsive-gap);
}

:where(
  .topbar,
  .page-header,
  .pg-hdr,
  .panel-modern-head,
  .tc-h,
  .toolbar,
  .action-bar,
  .actions
) > *{
  min-width:0;
}

:where(
  .table-responsive,
  .table-wrap,
  .table-container,
  .tbl-wrap,
  .tc,
  .data-table-wrap,
  .orders-table-wrap
){
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}

@supports selector(:has(*)){
  :where(
    .card,
    .panel,
    .panel-modern,
    .od-card,
    .section-card
  ):has(table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

table{
  max-width:100%;
  border-collapse:collapse;
}

th,
td{
  overflow-wrap:break-word;
}

:where(
  .modal,
  .overlay,
  .modal-overlay,
  [class*="modal-overlay"]
){
  max-width:100vw;
  max-height:100dvh;
}

:where(
  .modal-card,
  .dialog-card,
  .drawer,
  .sheet,
  [class$="-card"]
){
  max-width:min(100%,calc(100vw - 20px));
}

:where(.sidebar,#sidebar){
  max-width:min(86vw,320px);
}

@media (max-width:1200px){
  :where(
    .stats-grid,
    .summary-grid,
    .kpi-grid,
    .dashboard-grid
  ){
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:900px){
  :where(
    .topbar,
    .page-header,
    .pg-hdr,
    .panel-modern-head,
    .tc-h,
    .toolbar,
    .action-bar,
    .actions,
    .filters-actions
  ){
    flex-wrap:wrap;
  }

  :where(
    .topbar,
    .page-header,
    .pg-hdr,
    .toolbar,
    .action-bar
  ) > *{
    max-width:100%;
  }

  :where(
    .stats-grid,
    .summary-grid,
    .kpi-grid,
    .dashboard-grid
  ){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  :where(.main,main,#mainContent,.main-content,.page-content){
    width:100%;
    padding-inline:clamp(8px,2vw,16px);
  }

  :where(.modal-card,.dialog-card,.sheet){
    max-height:94dvh;
    overflow-y:auto;
  }
}

@media (max-width:700px){
  :where(
    .form-grid,
    .fg-grid,
    .grid-2,
    .grid-3,
    .od-grid,
    .details-grid,
    .filters-grid,
    .two-columns,
    .three-columns
  ){
    grid-template-columns:1fr !important;
  }

  :where(
    .form-row,
    .filter-row,
    .button-row,
    .actions-row
  ){
    flex-wrap:wrap !important;
  }

  :where(
    .table-responsive,
    .table-wrap,
    .table-container,
    .tbl-wrap,
    .tc,
    .data-table-wrap,
    .orders-table-wrap,
    .card,
    .panel,
    .panel-modern
  ) table{
    width:100%;
    min-width:680px;
  }

  :where(.modal,.overlay,.modal-overlay){
    padding:8px !important;
  }
}

@media (max-width:480px){
  :where(
    .stats-grid,
    .summary-grid,
    .kpi-grid,
    .dashboard-grid,
    .cards-grid,
    .sg
  ){
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  :where(.main,main,#mainContent,.main-content,.page-content){
    padding-inline:8px;
  }

  :where(.btn,button){
    white-space:normal;
  }

  :where(h1,.page-title){
    font-size:clamp(1rem,5vw,1.35rem);
  }

  :where(h2,h3){
    overflow-wrap:anywhere;
  }
}

@media (max-width:340px){
  :where(
    .stats-grid,
    .summary-grid,
    .kpi-grid,
    .dashboard-grid,
    .cards-grid,
    .sg
  ){
    grid-template-columns:1fr;
  }
}

@media (max-height:620px) and (orientation:landscape){
  :where(.modal-card,.dialog-card,.drawer,.sheet){
    max-height:96dvh;
    overflow-y:auto;
  }
}