/* ============================================================
   TechFit PLM Responsive Foundation
   Version: 20260622-responsive-r1
   Goal: desktop / laptop / iPad / mobile safe layout
   ============================================================ */

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

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

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

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

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

input,
select,
textarea {
  min-width: 0;
}

button,
.btn,
.tf-btn,
.tfsm-btn,
.fr6-btn,
.fr-v5-btn,
.m6b-btn,
.m6b3-btn,
.m6b4-btn,
.m6d1-btn,
a.btn {
  min-height: 40px;
  touch-action: manipulation;
}

/* ---------- Fluid containers ---------- */
main,
.page,
.shell,
.wrap,
.container,
.layout,
.tf-shell,
.tf-page,
.tfsm-page,
.plm-main,
.plm-page,
#techfit-style-master-app {
  max-width: 100%;
  min-width: 0;
}

.tf-card,
.tf-table-card,
.tf-v40-card,
.tf-v40-chart-card,
.tfsm-card,
.tfsm-drawer,
.plm-card,
.card,
.panel,
.notice,
.fr6-card,
.fr6-table-card,
.fr-v5-card,
.fr-v5-table-card,
.mgs-bridge,
.measurement-v1-panel,
.measurement-v1-final-card,
#measurementWorkspaceFinal,
#styleDetailBOMM6A,
#styleDetailBOMM6E,
#styleDetailCareConfirmedM6G,
#styleDetailCareExportStatusM6H2,
#styleDetailCareHistoryM6H1,
#careLabelPrefillM5C7P,
#careLabelGeneratorContextM5C7Q {
  max-width: 100%;
  min-width: 0;
}

/* ---------- Responsive text ---------- */
h1,
.tfsm-title {
  font-size: clamp(26px, 3vw, 42px);
}

h2,
.panel-title,
.tf-card-head h2,
.fr6-title,
.fr-v5-title {
  font-size: clamp(20px, 2.2vw, 32px);
}

.tf-style-no {
  font-size: clamp(28px, 4vw, 42px);
  word-break: break-word;
}

/* ---------- Tables: page should not overflow; table area can scroll ---------- */
.tf-table-wrap,
.table-wrap,
.fr6-scroll,
.fr-v5-scroll,
.mgs-table-wrap,
.measurement-table-wrap,
.measurement-v1-table-wrap,
.measurement-workspace-table-wrap,
.tf-v40-table-wrap,
.tfsm-table-wrap,
.bom-table-wrap,
.care-table-wrap,
#preview,
#list {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  max-width: 100%;
}

.tf-table,
.fr6-table,
.fr-v5-table,
.measurement-v1-table,
.mgs-table {
  width: 100%;
}

/* Keep dense business tables scrollable instead of crushing columns */
@media (max-width: 900px) {
  .tf-table,
  .fr6-table,
  .fr-v5-table,
  .measurement-v1-table,
  .mgs-table,
  #styleDetailBOMM6A table {
    min-width: 860px;
  }
}

/* ---------- Modals / drawers ---------- */
.tf-modal-card,
.tf-drawer-card,
.tfsm-drawer,
.fr6-modal,
.fr-v5-modal,
.m6d1-modal,
.m6b-modal,
.m6b3-modal,
.m6b4-modal,
.m6b-modal-backdrop .m6b-modal,
.m6b3-modal-backdrop .m6b3-modal,
.m6b4-modal-backdrop .m6b4-modal {
  width: min(96vw, 1180px) !important;
  max-width: 96vw !important;
  max-height: 90vh !important;
  overflow: auto !important;
}

/* ---------- Desktop / laptop ---------- */
@media (max-width: 1440px) {
  .tf-shell,
  .tf-page,
  .tfsm-page,
  .page,
  .shell,
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }

  .tf-toolbar {
    grid-template-columns: minmax(280px, 1fr) repeat(4, minmax(140px, 180px)) repeat(4, auto) !important;
  }

  .tf-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .tf-v40-risk-buckets {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ---------- iPad / tablet ---------- */
@media (max-width: 1024px) {
  body {
    min-width: 0;
  }

  .tf-header,
  .tf-topbar,
  .tf-card-head,
  .tf-v40-head,
  .tfsm-header,
  .top,
  .panel-head,
  .fr6-header,
  .fr-v5-header,
  .mgs-head,
  .measurement-v1-head,
  #styleDetailBOMM6A .bom-head,
  #styleDetailCareConfirmedM6G .m6g-head,
  #styleDetailCareExportStatusM6H2 .m6h2-head {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .tf-header-meta,
  .tf-top-actions,
  .tf-actions,
  .tf-hero-actions,
  .actions,
  .top-actions,
  .fr6-header-actions,
  .fr6-action-row,
  .fr-v5-actions,
  .mww-actions,
  .m6h4x-actions,
  .clq-actions {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }

  .tf-hero-card,
  .tf-grid.two,
  .tf-main-grid,
  .tf-lower-grid,
  .tf-v40-grid,
  .tf-v40-chart-grid,
  .layout,
  .layout.two,
  .tf-fit-grid,
  .care-layout,
  .m6g-grid,
  #styleDetailCareConfirmedM6G .m6g-grid,
  .care-label-module-layout,
  .measurement-v1-toolbar,
  .mgs-controls {
    grid-template-columns: 1fr !important;
  }

  .tf-toolbar,
  .tf-toolbar.tf-toolbar-v32,
  .tfsm-toolbar,
  .toolbar,
  .search {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tf-search,
  #saveFilterBtn,
  #sortSelect,
  .help {
    grid-column: 1 / -1 !important;
  }

  .tf-kpi-grid,
  .summary,
  .kpis,
  .fr6-stats,
  .fr-v5-stats,
  .tf-v40-risk-buckets,
  #styleDetailCareExportStatusM6H2 .m6h2-grid,
  .care-label-m5c7-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tfsm-grid,
  .tfsm-card-grid,
  .grid,
  .grid-3,
  .form-grid,
  .m6d1-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .tf-v40-grid {
    gap: 14px !important;
  }

  .fr6-toolbar,
  .fr-v5-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .fr6-filter-group,
  .fr-v5-filter-group {
    width: 100%;
  }

  .fr6-field,
  .fr-v5-field,
  .fr6-field-wide,
  .fr-v5-field-wide {
    min-width: min(100%, 320px) !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body {
    display: block !important;
  }

  .tf-sidebar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    padding: 8px 10px !important;
    z-index: 80 !important;
  }

  .tf-logo,
  .tf-side-item {
    flex: 0 0 auto !important;
  }

  .tf-page {
    margin-left: 0 !important;
    width: 100% !important;
    padding: 14px !important;
  }

  .tf-shell,
  .tfsm-page,
  .page,
  .shell,
  .wrap,
  main {
    padding: 14px !important;
  }

  .tf-toolbar,
  .tf-toolbar.tf-toolbar-v32,
  .tf-date-grid,
  .tf-kpi-grid,
  .tfsm-toolbar,
  .toolbar,
  .search,
  .summary,
  .kpis,
  .form-grid,
  .grid,
  .grid-3,
  .tf-field-grid,
  .tf-form,
  .fr6-stats,
  .fr-v5-stats,
  .tf-v40-risk-buckets,
  .tf-v40-chart-grid,
  .m6d1-grid,
  .mgs-controls,
  .measurement-v1-toolbar,
  #styleDetailCareExportStatusM6H2 .m6h2-grid,
  .care-label-m5c7-grid {
    grid-template-columns: 1fr !important;
  }

  .tf-search,
  #saveFilterBtn,
  #sortSelect,
  .tf-filter-status,
  .tf-filter-fit-status,
  .tf-filter-vendor-id,
  .tf-filter-category,
  .tf-filter-season,
  .tf-filter-brand,
  .tf-filter-priority,
  .tf-filter-sample-type,
  .help {
    grid-column: 1 !important;
  }

  .tf-header-meta,
  .tf-top-actions,
  .tf-actions,
  .actions,
  .top-actions,
  .fr6-header-actions,
  .fr6-action-row,
  .fr-v5-actions,
  .fr-v5-action-row,
  .mww-actions,
  .m6h4x-actions,
  .clq-actions {
    width: 100% !important;
  }

  .tf-header-meta > *,
  .tf-top-actions > *,
  .tf-actions > *,
  .actions > *,
  .top-actions > *,
  .fr6-header-actions > *,
  .fr6-action-row > *,
  .fr-v5-actions > *,
  .fr-v5-action-row > *,
  .mww-actions > *,
  .m6h4x-actions > *,
  .clq-actions > * {
    flex: 1 1 100% !important;
  }

  .tf-btn,
  .btn,
  button,
  a.btn,
  .tfsm-btn,
  .fr6-btn,
  .fr-v5-btn,
  .m6d1-btn {
    width: 100%;
    justify-content: center;
  }

  .tf-tabs,
  .tfsm-tabs,
  .tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }

  .tf-tab,
  .tfsm-tab,
  .tabs button,
  .tabs a {
    flex: 0 0 auto !important;
    white-space: nowrap;
  }

  .tf-card,
  .tf-table-card,
  .tf-v40-card,
  .tf-v40-chart-card,
  .tfsm-card,
  .panel,
  .card,
  .fr6-card,
  .fr-v5-card,
  #styleDetailBOMM6A,
  #styleDetailBOMM6E,
  #styleDetailCareConfirmedM6G,
  #styleDetailCareExportStatusM6H2,
  #styleDetailCareHistoryM6H1,
  #measurementWorkspaceFinal {
    border-radius: 16px !important;
  }

  .tf-card,
  .tf-v40-card,
  .tf-v40-chart-card,
  .panel,
  .card,
  .fr6-card,
  .fr-v5-card {
    padding: 14px !important;
  }

  .tf-card-head,
  .panel-head,
  .tf-v40-head,
  .fr6-toolbar,
  .fr-v5-toolbar {
    padding: 12px !important;
  }

  .tf-stage-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .tf-stage {
    width: 100%;
  }

  .tf-drill-drawer,
  .tf-v40-risk-drawer,
  .tfsm-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  .tf-v40-risk-bucket,
  .tf-kpi,
  .metric,
  .fr6-stat,
  .fr-v5-stat {
    min-height: auto !important;
  }

  .tf-chart,
  .tf-v40-chart-card {
    min-height: 260px !important;
  }

  .m6b-modal-backdrop,
  .m6b3-modal-backdrop,
  .m6b4-modal-backdrop,
  .m6d1-backdrop {
    padding: 10px !important;
    align-items: stretch !important;
  }

  .m6b-modal,
  .m6b3-modal,
  .m6b4-modal,
  .m6d1-modal {
    width: 100% !important;
    max-height: 92vh !important;
    border-radius: 18px !important;
  }

  .m6b-modal-head,
  .m6b3-modal-head,
  .m6b4-modal-head,
  .m6d1-head {
    flex-direction: column !important;
  }
}

/* ---------- Small phone ---------- */
@media (max-width: 420px) {
  h1,
  .tfsm-title {
    font-size: 25px !important;
  }

  h2,
  .panel-title,
  .tf-card-head h2 {
    font-size: 20px !important;
  }

  .tf-style-no {
    font-size: 27px !important;
    letter-spacing: .06em !important;
  }

  .tf-shell,
  .tfsm-page,
  .tf-page,
  .page,
  .shell,
  .wrap,
  main {
    padding: 10px !important;
  }

  .tf-card,
  .tf-table-card,
  .tf-v40-card,
  .tf-v40-chart-card,
  .tfsm-card,
  .panel,
  .card,
  .fr6-card,
  .fr-v5-card {
    border-radius: 14px !important;
  }

  .tf-card-head,
  .panel-head,
  .tf-v40-head {
    padding: 10px !important;
  }
}