/* Responsive comune dei moduli applicativi.
   Il foglio viene caricato per ultimo per armonizzare i CSS delle singole pagine. */

@media (max-width: 1199.98px) {
	.product-page-layout,
	.company-dashboard__layout,
	.contact-dashboard__layout,
	.shipper-dashboard__content,
	.lavorazione-detail__top {
		grid-template-columns: 1fr !important;
	}

	.product-page-layout__left,
	.company-dashboard__sidebar,
	.company-dashboard__main,
	.shipper-dashboard__sidebar,
	.shipper-dashboard__main {
		min-width: 0;
	}

	.products-list-toolbar,
	.lavorazioni-list__toolbar,
	.commesse-list__toolbar,
	.settings-panel__toolbar,
	.company-widget__header,
	.company-widget__header--split {
		align-items: flex-start !important;
		flex-wrap: wrap;
		gap: 16px;
	}

	.products-list-toolbar__actions,
	.lavorazioni-list__toolbar > *,
	.commesse-list__toolbar > *,
	.settings-panel__toolbar > * {
		max-width: 100%;
	}

	.product-overview-card__body {
		grid-template-columns: 1fr !important;
	}

	.product-photo-dropzone {
		max-height: 320px;
	}

	.company-dashboard-panels,
	.company-products-card-grid,
	.shipper-dashboard__metrics {
		min-width: 0;
	}

	.commessa-products-scroll,
	.commessa-products-table,
	.commesse-table,
	.lavorazioni-table,
	.settings-colors-table,
	.company-documents-table__wrapper,
	.document-widget__table,
	.dispositions-table-wrap {
		max-width: 100%;
		overflow-x: auto;
	}

	.commessa-products-table,
	.commesse-table,
	.lavorazioni-table,
	.settings-colors-table,
	.company-documents-table,
	.dispositions-table {
		min-width: 720px;
	}

	.commessa-product-picker__grid,
	.commessa-product-picker__colors > div {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	.product-figma-top,
	.product-figma-notes,
	.product-figma-care,
	.product-figma-spec-grid,
	.lavorazione-spec-grid,
	.company-address-grid,
	.company-products-card-grid,
	.shipper-type-card__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.product-figma-top,
	.product-figma-notes,
	.product-figma-care,
	.lavorazione-detail__top {
		gap: 16px;
	}

	.company-dashboard,
	.product-detail-page,
	.product-page-layout,
	.commesse-page,
	.commessa-detail,
	.settings-page,
	.shipper-dashboard {
		max-width: 100%;
		min-width: 0;
	}

	.company-dashboard-tabs,
	.product-detail-tabs,
	.commesse-tabs,
	.settings-module-tabs {
		max-width: 100%;
		overflow-x: auto;
		padding-bottom: 1px;
		white-space: nowrap;
	}

	.company-widget,
	.company-note-card,
	.company-address-card,
	.product-figma-card,
	.commessa-card,
	.settings-list-card,
	.shipper-summary-card,
	.shipper-credential-card {
		min-width: 0;
		max-width: 100%;
	}

	.product-figma-toolbar,
	.product-figma-table-head,
	.commessa-products-toolbar,
	.commessa-products-toolbar__actions {
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 12px;
	}

	.commessa-products-scroll {
		padding-bottom: 4px;
	}

	.commessa-products-table,
	.commessa-products-row {
		min-width: 1040px;
	}

	.modal-richiesta-prodotto,
	.commessa-add-modal,
	.product-add-modal {
		max-width: 100%;
	}

	.global-search-modal .modal-dialog {
		max-width: calc(100% - 40px);
	}
}

@media (max-width: 767.98px) {
	.product-figma-top,
	.product-figma-notes,
	.product-figma-care,
	.product-figma-spec-grid,
	.lavorazione-spec-grid,
	.company-address-grid,
	.company-products-card-grid,
	.shipper-type-card__grid,
	.shipper-dashboard__metrics {
		grid-template-columns: 1fr !important;
	}

	.product-overview-card__body,
	.product-tech-grid,
	.product-figma-summary,
	.company-dashboard__layout,
	.company-dashboard-panels,
	.shipper-dashboard__content {
		gap: 16px;
	}

	.product-overview-card,
	.product-flags-card,
	.product-tech-card,
	.product-figma-card,
	.company-widget,
	.commessa-card,
	.settings-list-card,
	.shipper-summary-card,
	.shipper-credential-card {
		border-radius: 10px !important;
	}

	.company-dashboard-tabs,
	.product-detail-tabs,
	.commesse-tabs,
	.settings-module-tabs {
		gap: 20px;
	}

	.company-dashboard-tabs > div,
	.product-detail-tabs > button,
	.commesse-tabs > *,
	.settings-module-tabs > div {
		flex: 0 0 auto;
	}

	.product-figma-toolbar,
	.products-list-toolbar,
	.commesse-products-toolbar,
	.commessa-status-panel,
	.company-widget__header,
	.shipper-summary-card__header,
	.shipper-credential-card__header {
		align-items: stretch !important;
		flex-direction: column;
	}

	.products-list-toolbar__actions,
	.products-list-toolbar__actions > *,
	.commesse-products-toolbar__actions,
	.commesse-products-toolbar__actions > *,
	.product-figma-toolbar > .btn,
	.company-widget__header > .btn,
	.company-widget__header--split > .btn {
		width: 100%;
	}

	.company-products-block__actions,
	.company-products-block__actions > *,
	.settings-panel__toolbar > *,
	.lavorazioni-list__toolbar > * {
		max-width: 100%;
		width: 100%;
	}

	.product-photo-dropzone {
		height: 240px;
		min-height: 240px;
	}

	.commessa-product-picker__grid,
	.commessa-product-picker__colors > div {
		grid-template-columns: 1fr;
	}

	.commessa-product-picker__card,
	.commessa-product-picker__colors button {
		min-width: 0;
	}

	.company-product-color-picker-grid {
		grid-template-columns: 1fr;
	}

	.action-bar-salvataggio,
	.product-figma-bottom-bar,
	.commessa-bottom-bar,
	.lavorazione-bottom-bar {
		align-items: stretch !important;
		flex-direction: column;
		gap: 10px;
	}

	.action-bar-salvataggio > *,
	.product-figma-bottom-bar__start,
	.product-figma-bottom-bar__end,
	.commessa-bottom-bar .product-figma-bottom-bar__start,
	.commessa-bottom-bar .product-figma-bottom-bar__end,
	.lavorazione-bottom-bar .product-figma-bottom-bar__start,
	.lavorazione-bottom-bar .product-figma-bottom-bar__end {
		justify-content: stretch;
		width: 100%;
	}

	.action-bar-salvataggio .btn,
	.product-figma-bottom-bar .btn,
	.commessa-bottom-bar .btn,
	.lavorazione-bottom-bar .btn {
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}

	.modal-richiesta-prodotto-body,
	.commessa-add-modal,
	.product-add-modal {
		gap: 16px;
	}

	.global-search-modal .modal-dialog {
		max-width: calc(100% - 32px);
	}
}

@media (max-width: 575.98px) {
	.product-figma-card,
	.company-widget,
	.commessa-card,
	.settings-list-card {
		border-radius: 8px !important;
	}

	.product-figma-card,
	.company-widget,
	.settings-panel,
	.shipper-dashboard {
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.company-dashboard-tabs,
	.product-detail-tabs,
	.commesse-tabs,
	.settings-module-tabs {
		gap: 16px;
	}

	.product-figma-price-table,
	.lavorazione-prices,
	.commessa-products-scroll,
	.company-activity__table-wrap,
	.document-widget__table,
	.settings-colors-table {
		margin-right: -12px;
		padding-right: 12px;
		width: calc(100% + 12px);
	}

	.modal-richiesta-prodotto-footer,
	.commessa-add-modal .modal-footer,
	.product-add-modal .modal-footer {
		align-items: stretch;
		flex-direction: column;
	}
}

/* Tabelle informative: su smartphone ogni riga diventa una scheda compatta
   con il nome della colonna davanti al valore. */
@media (max-width: 767.98px) {
	#app-content .product-figma-price-table,
	#app-content .raw-material-price-table {
		border: 1px solid var(--bs-black-20);
		border-radius: 8px;
		overflow: visible;
	}

	#app-content .product-figma-price-table > .product-figma-price-table__row.is-header,
	#app-content .raw-material-price-table > .raw-material-price-table__row.is-header {
		display: none;
	}

	#app-content .product-figma-price-table > .product-figma-price-table__row:not(.is-header),
	#app-content .raw-material-price-table > .raw-material-price-table__row:not(.is-header) {
		border-top: 1px solid var(--bs-black-20);
		display: grid;
		gap: 0;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-width: 0;
		padding: 4px;
	}

	#app-content .product-figma-price-table > .product-figma-price-table__row:first-of-type,
	#app-content .raw-material-price-table > .raw-material-price-table__row:first-of-type {
		border-top: 0;
	}

	#app-content .product-figma-price-table__row:not(.is-header) > span,
	#app-content .raw-material-price-table__row:not(.is-header) > span {
		align-items: stretch;
		flex-direction: column;
		justify-content: flex-start !important;
		min-height: 0;
		padding: 8px 10px !important;
		text-align: left !important;
	}

	#app-content .product-figma-price-table__row:not(.is-header) > span::before,
	#app-content .raw-material-price-table__row:not(.is-header) > span::before {
		color: var(--bs-black-60);
		content: attr(data-label);
		font-size: 10px;
		font-weight: 600;
		line-height: 14px;
		margin-bottom: 4px;
	}

	#app-content .product-figma-price-table__row:not(.is-header) > span:nth-child(4),
	#app-content .raw-material-price-table__row:not(.is-header) > span:nth-child(4) {
		grid-column: 1 / -1;
	}

	#app-content .product-figma-price-table__row:not(.is-header) > span:nth-child(5),
	#app-content .raw-material-price-table__row:not(.is-header) > span:nth-child(5) {
		align-items: center;
		grid-column: 1 / -1;
		min-height: 32px;
	}

	#app-content .product-figma-price-table__row:not(.is-header) > span > input,
	#app-content .raw-material-price-table__row:not(.is-header) > span > input,
	#app-content .raw-material-price-table__price,
	#app-content .raw-material-price-table__price strong {
		max-width: 100%;
		width: 100%;
	}

	#app-content .responsive-price-rows {
		gap: 8px;
	}

	#app-content .responsive-price-rows .lavorazione-price-row {
		border: 1px solid var(--bs-black-20);
		border-radius: 8px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 8px;
	}

	#app-content .responsive-price-rows .lavorazione-price-grip,
	#app-content .responsive-price-rows .lavorazione-price-row > button {
		display: none;
	}

	#app-content .responsive-price-rows .lavorazione-price-input {
		grid-column: auto;
	}

	#app-content .responsive-price-rows .lavorazione-price-input::before {
		color: var(--bs-black-60);
		content: attr(data-label);
		font-size: 10px;
		font-weight: 600;
		line-height: 14px;
		margin-bottom: 4px;
	}

	#app-content .responsive-price-rows .lavorazione-price-input label {
		display: none;
	}

	#app-content .responsive-price-rows .lavorazione-price-input > div {
		width: 100%;
	}

	#app-content .table-responsive:has(.responsive-table-cards) {
		overflow: visible;
	}

	#app-content table.responsive-table-cards {
		border-collapse: separate;
		border-spacing: 0;
		display: block;
		min-width: 0 !important;
		width: 100% !important;
	}

	#app-content table.responsive-table-cards thead {
		border: 0;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	#app-content table.responsive-table-cards tbody,
	#app-content table.responsive-table-cards tr,
	#app-content table.responsive-table-cards td {
		display: block;
		width: 100%;
	}

	#app-content table.responsive-table-cards tbody tr {
		border-bottom: 1px solid var(--bs-black-20);
		padding: 8px 0;
	}

	#app-content table.responsive-table-cards tbody tr:last-child {
		border-bottom: 0;
	}

	#app-content table.responsive-table-cards tbody td {
		align-items: baseline;
		border: 0 !important;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		min-height: 32px;
		padding: 7px 12px;
		text-align: right;
		white-space: normal;
	}

	#app-content table.responsive-table-cards tbody td::before {
		color: var(--bs-black-60);
		content: attr(data-label);
		flex: 0 0 38%;
		font-size: 11px;
		font-weight: 600;
		line-height: 16px;
		text-align: left;
	}

	#app-content table.responsive-table-cards tbody td > * {
		max-width: 62%;
	}

	#app-content table.responsive-table-cards tbody td:empty {
		display: none;
	}

	/* Le righe div con role=table usate per le tabelle personalizzate seguono
	   lo stesso principio, mantenendo i controlli interni a tutta larghezza. */
	#app-content .responsive-role-table-cards {
		display: block;
		min-width: 0 !important;
		width: 100%;
	}

	#app-content .responsive-role-table-cards > [role="row"]:first-child {
		display: none;
	}

	#app-content .responsive-role-table-cards > [role="row"]:not(:first-child) {
		border-bottom: 1px solid var(--bs-black-20);
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;
		min-width: 0;
		padding: 8px 0;
	}

	#app-content .responsive-role-table-cards > [role="row"]:not(:first-child) > [role="cell"] {
		align-items: baseline;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		min-width: 0;
		padding: 7px 12px;
		text-align: right;
	}

	#app-content .responsive-role-table-cards > [role="row"]:not(:first-child) > [role="cell"]::before {
		color: var(--bs-black-60);
		content: attr(data-label);
		flex: 0 0 38%;
		font-size: 11px;
		font-weight: 600;
		line-height: 16px;
		text-align: left;
	}

	#app-content .responsive-role-table-cards > [role="row"]:not(:first-child) input,
	#app-content .responsive-role-table-cards > [role="row"]:not(:first-child) .ts-wrapper,
	#app-content .responsive-role-table-cards > [role="row"]:not(:first-child) select {
		max-width: 62%;
		min-width: 0;
	}

	#app-content .responsive-grid-table-cards {
		min-width: 0 !important;
		overflow: visible;
	}

	#app-content .responsive-grid-table-cards > .responsive-grid-table-row {
		display: grid;
		gap: 0;
		grid-template-columns: 1fr;
		min-width: 0;
		padding: 8px 0;
	}

	#app-content .responsive-grid-table-cards > .responsive-grid-table-row > * {
		align-items: baseline;
		display: flex;
		gap: 12px;
		justify-content: space-between;
		min-width: 0;
		padding: 7px 12px;
		text-align: right;
	}

	#app-content .responsive-grid-table-cards > .responsive-grid-table-row > *::before {
		color: var(--bs-black-60);
		content: attr(data-label);
		flex: 0 0 38%;
		font-size: 11px;
		font-weight: 600;
		line-height: 16px;
		text-align: left;
	}

	#app-content .responsive-grid-table-cards > .responsive-grid-table-row input,
	#app-content .responsive-grid-table-cards > .responsive-grid-table-row .ts-wrapper,
	#app-content .responsive-grid-table-cards > .responsive-grid-table-row select {
		max-width: 62%;
		min-width: 0;
	}
}

/* Top bar: i controlli desktop usano diversi elementi w-auto; qui vengono
   ricomposti senza larghezze fisse e senza margini orizzontali residui. */
@media (max-width: 1199.98px) {
	.hp-main-layout > header {
		height: auto !important;
		min-height: 0;
	}

	.hp-main-layout > header > .row,
	.hp-main-layout > header > .row > .col {
		height: auto !important;
		min-height: 64px;
	}

	.hp-main-layout > header > .row > .col {
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}

	.hp-main-layout > header nav {
		min-width: 0;
	}

	.hp-main-layout > header nav .breadcrumb {
		flex-wrap: wrap;
		margin-bottom: 0;
		max-width: 100%;
	}

	.hp-main-layout > header > .row > .col > .w-auto {
		align-items: center;
		display: flex;
		flex: 1 1 auto;
		flex-wrap: wrap;
		gap: 8px;
		min-width: 0;
		width: 100%;
	}

	.hp-main-layout > header .hp-mobile-sidebar-button {
		flex: 0 0 auto;
	}

	.hp-main-layout > header .hp-header-search-button {
		margin-right: 0 !important;
		min-width: 0;
		padding-left: 12px !important;
		padding-right: 12px !important;
	}

	.hp-main-layout > header .hp-header-search-button .me-80 {
		margin-right: 16px !important;
	}

	.hp-main-layout > header .js-menu-header {
		flex: 0 0 auto;
		margin-left: 0 !important;
	}

	.hp-main-layout > header .hp-header-profile-menu,
	.hp-main-layout > header .hp-notification-menu,
	.hp-main-layout > header .hp-lang-menu {
		max-width: calc(100vw - 32px);
		right: 0 !important;
	}

	.hp-main-layout > header .hp-notification-menu {
		width: min(380px, calc(100vw - 32px)) !important;
	}

	.hp-main-layout > header .hp-header-profile-menu {
		width: min(260px, calc(100vw - 32px)) !important;
	}
}

@media (max-width: 767.98px) {
	.hp-main-layout > header > .row > .col {
		align-items: stretch;
		padding: 10px 12px !important;
	}

	.hp-main-layout > header nav {
		flex: 1 1 100%;
		order: 1;
		width: 100%;
	}

	.hp-main-layout > header > .row > .col > .w-auto {
		order: 2;
	}

	.hp-main-layout > header .hp-mobile-sidebar-button {
		align-self: center;
	}

	.hp-main-layout > header .hp-header-search-button {
		padding-bottom: 6px !important;
		padding-top: 6px !important;
	}

	.hp-main-layout > header .hp-header-search-button .me-80 {
		margin-right: 8px !important;
	}

	.hp-main-layout > header .hp-notification-menu,
	.hp-main-layout > header .hp-header-profile-menu,
	.hp-main-layout > header .hp-lang-menu {
		margin-top: 4px;
		max-width: calc(100vw - 24px);
		right: 0 !important;
	}

	.hp-main-layout > header .hp-notification-menu {
		width: calc(100vw - 24px) !important;
	}
}

@media (max-width: 575.98px) {
	.hp-main-layout > header > .row > .col {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.hp-main-layout > header .hp-header-search-button > span:last-child {
		display: none;
	}

	.hp-main-layout > header .hp-header-search-button .me-80 {
		margin-right: 0 !important;
	}

	.hp-main-layout > header .hp-notification-menu,
	.hp-main-layout > header .hp-header-profile-menu,
	.hp-main-layout > header .hp-lang-menu {
		max-width: calc(100vw - 16px);
	}

	.hp-main-layout > header .hp-notification-menu {
		width: calc(100vw - 16px) !important;
	}
}