/* A selected service occupies its app workspace without the app home underneath. */
body .page:has(> .shell-option-workspace:not(.is-hidden)) > :not(.shell-option-workspace),
body [id$="Page"]:has(> .shell-option-workspace:not(.is-hidden)) > :not(.shell-option-workspace) { display:none!important; }
html body .shell-option-workspace:not(.is-hidden) { position:static!important; inset:auto!important; display:block!important; padding:0!important; margin:0!important; width:100%!important; min-height:0!important; height:auto!important; background:transparent!important; backdrop-filter:none!important; z-index:auto!important; }
html body .shell-option-workspace > .modal-card { width:100%!important; max-width:none!important; margin:0!important; max-height:calc(100dvh - 64px)!important; }
html body .shell-option-workspace .modal-body { max-height:calc(100dvh - 160px)!important; overflow:auto; }

html body[data-active-page] :is(#hrPage,#attendancePage,#settingsPage,#usersPage,#promotionsPage):has(> #detailModal.shell-option-workspace:not(.is-hidden)) > :not(#detailModal) { display:none!important; }
html body[data-active-page] :is(#hrPage,#attendancePage,#settingsPage,#usersPage,#promotionsPage) > #detailModal.shell-option-workspace:not(.is-hidden) { position:static!important; display:block!important; inset:auto!important; width:100%!important; padding:0!important; background:transparent!important; }
html body[data-active-page] :is(#hrPage,#attendancePage,#settingsPage,#usersPage,#promotionsPage) > #detailModal.shell-option-workspace > .modal-card { width:100%!important; max-width:none!important; margin:0!important; max-height:calc(100dvh - 64px)!important; }

html body #accountingPage:has(> .accounting-inline-workspace[open]) > :not(.accounting-inline-workspace){display:none!important}
html body #accountingPage > dialog.accounting-inline-workspace[open]{position:relative!important;inset:auto!important;display:block!important;width:100%!important;max-width:none!important;margin:0!important;box-sizing:border-box!important;max-height:calc(100dvh - 64px)!important}
html body #accountingPage > .accounting-inline-workspace .fa-body,html body #accountingPage > .accounting-inline-workspace .ac-ops-body{max-height:calc(100dvh - 150px)!important;overflow:auto}

#analyticsPage[data-selected-section] #analyticsCharts :not(.analytics-selected-path) > .analytics-chart:not(.analytics-selected-path),
#analyticsPage[data-selected-section] #analyticsCharts > :not(.analytics-selected-path),
#analyticsPage[data-selected-section] #analyticsCharts .analytics-selected-path:not(.analytics-chart) > :not(.analytics-selected-path){display:none!important}
#analyticsPage[data-selected-section] #analyticsCharts .analytics-selected-path:not(.analytics-chart){display:contents!important}
#analyticsPage[data-selected-section]:not([data-selected-section="kpis"]) #analyticsKpis{display:none!important}
#analyticsPage[data-selected-section="kpis"] #analyticsCharts{display:none!important}
#analyticsPage[data-selected-section] #analyticsCharts .analytics-chart.analytics-selected-path{width:100%!important;max-width:none!important;grid-column:1/-1!important}

/* Quotations provide their own heading and actions; keep the shared sidebar. */
body[data-active-page="salesPage"] #salesPage:has(#quotationWorkspace:not(.is-hidden)) > .dashboard-header,
body[data-active-page="salesPage"] #salesPage:has(#quotationWorkspace:not(.is-hidden)) #salesServiceGrid { display:none !important; }

/* Product editing is a bounded popup with reachable actions. */
@media screen {
 html body[data-active-page="inventoryPage"] #detailModal:has(.product-edit-modal) { inset:0 !important; width:100vw !important; height:100dvh !important; padding:16px !important; display:grid; place-items:center !important; overflow:hidden !important; box-sizing:border-box !important; }
 html body[data-active-page="inventoryPage"] #detailModal:has(.product-edit-modal) .detail-modal-card { width:min(1120px,100%) !important; height:calc(100dvh - 32px) !important; min-height:0 !important; max-height:calc(100dvh - 32px) !important; overflow:hidden !important; border-radius:12px !important; }
 html body[data-active-page="inventoryPage"] #detailModal:has(.product-edit-modal) #detailModalBody { display:block !important; min-height:0 !important; overflow:auto !important; }
 html body[data-active-page="inventoryPage"] #detailModal:has(.product-edit-modal) .erp-detail-frame { display:block !important; min-height:0 !important; }
 html body[data-active-page="inventoryPage"] #detailModal .product-edit-modal .product-modal-live-preview { position:static !important; }
 html body[data-active-page="inventoryPage"] #detailModal .product-edit-modal .product-modal-actions { position:sticky !important; bottom:0 !important; z-index:5 !important; background:#fff !important; padding:12px 0 !important; }
 html body[data-active-page="inventoryPage"] #detailModal .product-edit-modal .product-modal-actions > button.is-hidden { display:none !important; }
}

.tax-price-label { font-size:.72rem; font-weight:400; opacity:.8; white-space:nowrap; }
.inventory-value-summary,.count-price-basis { padding:10px; font-size:.85rem; }

/* Application navigation lives exclusively in the shared sidebar. */
@media screen {
 body :is(#salesPage,#purchasesPage,#inventoryPage,#accountingPage,#reportsPage,#usersPage,#promotionsPage,#settingsPage,#analyticsPage,#attendancePage,#hrPage,#posStationsPage) > :is(.dashboard-header,.erp-app-ribbon) { display:none!important; }
 body :is(#inventoryHub,#accountingHub,#reportsHub,#salesServiceGrid,#purchaseSummaryCards,#hrOverview),
 body #purchasesListView > .purchase-service-grid,
 body #hrPage > .hr-hub-grid,
 body #settingsPage > :is(.settings-flow,.ai-settings-entry),
 body #attendancePage > .attendance-hero-panel,
 body #salesListView > .sales-work-panel { display:none!important; }
}
@media screen {
 html body[data-active-page] :is(#inventoryPage,#accountingPage,#reportsPage,#salesPage,#purchasesPage,#hrPage,#settingsPage,#attendancePage) :is(#inventoryHub,#accountingHub,#reportsHub,#salesServiceGrid,#purchaseSummaryCards,#hrOverview,.purchase-service-grid,.hr-hub-grid,.settings-flow,.ai-settings-entry,.attendance-hero-panel) { display:none!important; }
 html body[data-active-page] #salesListView > .sales-work-panel {display:none!important;}
}

/* The product list provides its own search and filters. */
#inventoryServiceModal:has(#inventoryServiceBody #inventoryProductsTab) #inventoryServiceSearch {display:none!important;}

@media screen {
 html body[data-active-page] #inventoryCountsTab #countWorkspaceActions {display:none!important;}
 html body[data-active-page] #inventoryServiceModal:has(#inventoryCountsTab) .inventory-service-head {display:none!important;}
 html body[data-active-page] #inventoryCountsTab #countWorkspaceModal:not(.is-hidden) {position:static!important;inset:auto!important;display:block!important;padding:0!important;background:transparent!important;backdrop-filter:none!important;width:100%!important;height:auto!important;}
 html body[data-active-page] #countWorkspaceModal > .count-workspace-modal-card {width:100%!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:12px!important;box-shadow:none!important;}
 html body[data-active-page] #countWorkspaceModalBody {max-height:none!important;overflow:visible!important;}
 html body #countSidebarOptions[hidden] {display:none!important;}
 html body #countSidebarOptions {padding:4px 0 4px 12px;border-left:2px solid #edd5dd;margin:3px 8px;}
 html body #countSidebarOptions > button {font-size:12px!important;}
 html body #closeCountWorkspaceModal {display:none!important;}
}
@media screen {
 html body[data-active-page] #inventoryPage #inventoryServiceModal:has(#inventoryCountsTab) {position:static!important;inset:auto!important;padding:0!important;margin:0!important;width:100%!important;height:auto!important;background:transparent!important;backdrop-filter:none!important;}
 html body[data-active-page] #inventoryServiceModal:has(#inventoryCountsTab) > .inventory-service-card {width:100%!important;max-width:none!important;margin:0!important;height:calc(100dvh - 64px)!important;max-height:calc(100dvh - 64px)!important;border-radius:12px!important;}
}

/* POS station settings: compact layout, scoped to this form only. */
@media screen {
html body #detailModal:has(.station-settings-modal) {overflow-x:hidden!important}
html body #detailModal:has(.station-settings-modal) .detail-modal-card {height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;overflow:hidden!important}
html body #detailModal:has(.station-settings-modal) #detailModalBody {display:block!important;height:auto!important;min-height:0!important;max-height:calc(100dvh - 115px)!important;overflow-y:auto!important;overflow-x:hidden!important;padding:16px!important}
html body #detailModal:has(.station-settings-modal) .erp-detail-frame {display:block!important;min-height:0!important;height:auto!important}
html body #detailModal .station-settings-modal {display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;align-items:start!important;grid-auto-rows:auto!important;margin:0!important;min-height:0!important;height:auto!important}
html body #detailModal .station-settings-modal > label {display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;gap:6px!important;height:auto!important;min-height:0!important;margin:0!important}
html body #detailModal .station-settings-modal > .switch-line {flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;padding-top:28px!important}
html body #detailModal .station-settings-modal label {min-width:0!important;height:auto!important;min-height:0!important}
html body #detailModal .station-settings-modal input:not([type=checkbox]):not([type=hidden]),html body #detailModal .station-settings-modal select {width:100%!important;min-width:0!important;height:38px!important;min-height:38px!important;box-sizing:border-box!important}
html body #detailModal .station-settings-modal input[type=checkbox] {width:18px!important;height:18px!important;min-height:18px!important;flex:0 0 18px!important;accent-color:#794567}
html body #detailModal .station-settings-modal > section {grid-column:auto!important;display:block!important;min-width:0!important;min-height:0!important;height:auto!important;margin:0!important;padding:14px!important;box-sizing:border-box!important;background:#faf8fb!important}
html body #detailModal .station-settings-modal > section:first-of-type {grid-column:span 2!important}
html body #detailModal .station-settings-modal > section:first-of-type {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
html body #detailModal .station-settings-modal > section:first-of-type > :is(strong,p,.receipt-logo-preview) {grid-column:1/-1!important}
html body #detailModal .station-settings-modal section > p {margin:6px 0 12px!important;font-size:12px!important;line-height:1.6!important}
html body #detailModal .station-settings-modal section label:not(.checkbox-row) {display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important}
html body #detailModal .station-settings-modal :is(#modalStationPayments,#modalStationEmployees) {display:flex!important;flex-direction:column!important;gap:6px!important;max-height:320px!important;overflow-y:auto!important}
html body #detailModal .station-settings-modal .checkbox-row {display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;padding:9px!important;margin:0!important;min-height:38px!important;box-sizing:border-box!important}
html body #detailModal .station-settings-modal .checkbox-row span {overflow-wrap:anywhere}
html body #detailModal .station-settings-modal .receipt-logo-preview {min-height:0!important;height:64px!important;margin:0!important;padding:6px!important}
html body #detailModal .station-settings-modal .receipt-logo-preview img {max-height:50px!important;width:auto!important;max-width:100%!important;object-fit:contain}
html body #detailModal:has(.station-settings-modal) .section-actions {display:flex!important;justify-content:flex-start!important;gap:8px!important;margin-top:14px!important;padding:12px 0 0!important;position:sticky!important;bottom:0!important;background:#fff!important;z-index:2!important}
html body #detailModal:has(.station-settings-modal) .detail-modal-header {padding-inline-end:64px!important}
}
@media screen and (max-width:1000px) {
html body #detailModal .station-settings-modal {grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media screen and (max-width:600px) {
html body #detailModal .station-settings-modal {grid-template-columns:minmax(0,1fr)!important}
html body #detailModal .station-settings-modal > section:first-of-type {grid-column:auto!important;grid-template-columns:minmax(0,1fr)!important}
html body #detailModal .station-settings-modal > .switch-line {padding-top:0!important}
}
@media screen {
html body[data-active-page] #detailModal:has(.station-settings-modal) .detail-modal-card {height:auto!important;min-height:0!important;max-height:calc(100dvh - 32px)!important;align-self:start!important}
html body[data-active-page] #detailModal:has(.station-settings-modal) #detailModalBody {height:auto!important;min-height:0!important;flex:0 1 auto!important}
html body[data-active-page] #detailModal:has(.station-settings-modal) .section-title-row {padding-inline-end:64px!important}
html body[data-active-page] #detailModal:has(.station-settings-modal) {align-items:start!important;height:auto!important;min-height:0!important}
}
@media screen {
html body[data-active-page] #detailModal:has(.station-settings-modal) .section-title-row > div {padding-inline-start:52px!important}
}