/*
 * Aphaw Mon UI system
 *
 * This file is the final visual authority for shared controls and data views.
 * Module files own layout and business-specific presentation; shared component
 * changes belong here so later modules cannot silently drift from the app.
 */

:root,
:host {
  --ui-font: "Aphaw Inter", "Aphaw Myanmar", sans-serif;
  --ui-ink: #1d1d1f;
  --ui-muted: #6e6e73;
  --ui-line: #dedee2;
  --ui-line-strong: #c8c8cd;
  --ui-surface: #ffffff;
  --ui-surface-subtle: #fafafa;
  --ui-header: #f5f5f6;
  --ui-hover: #e5edf3;
  --ui-table-hover: #f1f1f2;
  --ui-selected: #edf4f9;
  --ui-selected-hover: #e7f0f7;
  --ui-accent: #2878f5;
  --ui-accent-hover: #1e65d8;
  --ui-danger: #1d1d1f;
  --ui-radius: 7px;
  --ui-card-radius: 8px;
  --ui-pill-radius: 999px;
  --ui-control-height: 38px;
  --ui-icon-slot: 32px;
  --ui-icon-size: 16px;
  --ui-toolbar-gap: 2px;
  --ui-table-header-size: 11px;
  --ui-table-body-size: 13px;
  --ui-dashboard-number-size: 24px;
  --ui-dashboard-secondary-number-size: 20px;
  --ui-dashboard-number-weight: 500;
  --ui-dashboard-title-size: 12px;
  --ui-dashboard-unit-size: 11px;
  --ui-dashboard-context-size: 9.5px;
  --ui-dashboard-card-height: 118px;
  --ui-dashboard-card-padding: 11px 12px;
  --dashboard-number-size: var(--ui-dashboard-number-size);
  --dashboard-secondary-number-size: var(--ui-dashboard-secondary-number-size);
  --dashboard-number-weight: var(--ui-dashboard-number-weight);
  --dashboard-card-min-height: var(--ui-dashboard-card-height);
  --dashboard-card-padding: var(--ui-dashboard-card-padding);
}

body,
button,
input,
select,
textarea,
:host {
  font-family: var(--ui-font);
  font-synthesis: none;
}

/* Keep sidebar branding and account controls outside the scrollable module list. */
@media screen and (min-width: 768px) {
  .app-shell {
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  }

  .app-shell .settings-sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding: 5px 9px 14px;
    overflow: visible;
  }

  .settings-sidebar > .sidebar-brand,
  .settings-sidebar > .sidebar-footer {
    flex: 0 0 auto;
  }

  .settings-sidebar > .module-nav {
    flex: 1 1 0;
    min-height: 0;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media screen and (min-width: 768px) and (max-width: 920px) {
  .settings-sidebar .nav-group,
  .settings-sidebar .nav-group-items {
    min-width: 0;
  }
  .settings-sidebar .nav-group + .nav-group {
    border-left: 0;
  }
}

/* Allow panning and pinch zoom without waiting for double-tap gestures. */
button, summary, [role="button"] { touch-action: manipulation; }

/* Controls */
input,
select,
textarea,
:host input,
:host select,
:host textarea {
  color: var(--ui-ink);
  background: var(--ui-surface);
  border-color: var(--ui-line-strong);
  border-radius: var(--ui-radius);
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus,
:host input:focus,
:host select:focus,
:host textarea:focus {
  border-color: #8e8e93;
  box-shadow: 0 0 0 2px rgba(0, 113, 227, 0.12);
  outline: none;
}

.primary,
.new-action,
.save-action-button,
:host .primary,
:host .new-action,
:host .save-action-button {
  min-height: var(--ui-control-height);
  color: #fff;
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  border-radius: var(--ui-radius);
  box-shadow: none;
  font-weight: 600;
}

.primary:hover,
.new-action:hover,
.save-action-button:hover,
:host .primary:hover,
:host .new-action:hover,
:host .save-action-button:hover {
  color: #fff;
  background: var(--ui-accent-hover);
  border-color: var(--ui-accent-hover);
}

.secondary,
.ghost,
.cancel-action-button,
.clear-action-button,
:host .secondary,
:host .ghost,
:host .cancel-action-button,
:host .clear-action-button {
  color: var(--ui-ink);
  background: var(--ui-surface);
  border-color: var(--ui-line-strong);
  border-radius: var(--ui-radius);
  box-shadow: none;
}

.danger,
.delete-action-button,
:host .danger,
:host .delete-action-button {
  color: #fff;
  background: var(--ui-danger);
  border-color: var(--ui-danger);
}

/* Tabs */
.segmented-view-tabs,
.finished-product-tabs,
.finance-view-tabs,
.plastics-view-tabs,
.purchase-top-tabs,
:host .plastics-view-tabs,
:host .purchase-top-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  padding: 3px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-card-radius);
  box-shadow: none;
}

.segmented-view-tab,
.finished-product-tab,
.finance-view-tab,
.plastics-view-tab,
.purchase-top-tabs .subtab,
:host .plastics-view-tab,
:host .purchase-top-tabs .subtab {
  min-height: 30px;
  padding: 5px 10px;
  color: var(--ui-muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.segmented-view-tab:hover,
.finished-product-tab:hover,
.finance-view-tab:hover,
.plastics-view-tab:hover,
.purchase-top-tabs .subtab:hover,
:host .plastics-view-tab:hover,
:host .purchase-top-tabs .subtab:hover {
  color: var(--ui-ink);
  background: var(--ui-hover);
}

.segmented-view-tab.active,
.finished-product-tab.active,
.finance-view-tab.active,
.plastics-view-tab.active,
.purchase-top-tabs .subtab.active,
:host .plastics-view-tab.active,
:host .purchase-top-tabs .subtab.active {
  color: var(--ui-ink);
  background: var(--ui-selected);
  box-shadow: none;
}

/* Period controls and icon toolbars */
.module-period-toolbar,
.purchase-shared-header,
:host .purchase-shared-header,
:host .book-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.unified-period-control,
.module-period-quick,
.plastics-period-control,
:host .plastics-period-control {
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: none;
}

/* The unified picker already gives its summary button a border. Giving the
   wrapper another one creates the visible double outline around the date. */
.unified-period-control {
  border: 0;
  background: transparent;
}

.unified-period-summary,
.module-period-summary,
.header-period-summary,
.plastics-period-display,
:host .plastics-period-display,
:host .unified-period-summary {
  border-radius: var(--ui-radius);
  height: var(--ui-control-height);
  min-height: calc(var(--ui-control-height) - 2px);
  color: var(--ui-ink);
  font-family: var(--ui-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.unified-period-summary svg,
.module-period-summary i,
.header-period-summary i,
.plastics-period-display svg,
:host .plastics-period-display svg {
  display: block;
  align-self: center;
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  margin: 0;
  transform: none;
}

.filter-action-toolbar,
.purchase-shared-header .purchase-icon-tray,
.plastics-icon-tray,
:host .plastics-icon-tray {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--ui-toolbar-gap);
  height: var(--ui-control-height);
  min-height: var(--ui-control-height);
  padding: 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.filter-action-toolbar > button,
.filter-action-toolbar > .icon-button,
.filter-action-toolbar > .filter-icon-button,
.filter-action-toolbar > .selected-order-actions,
.filter-action-toolbar > .finished-product-selection-actions,
.purchase-shared-header .purchase-icon-tray > button,
.plastics-icon-tray .tool-icon,
:host .plastics-icon-tray .tool-icon {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  width: var(--ui-icon-slot) !important;
  min-width: var(--ui-icon-slot) !important;
  height: var(--ui-icon-slot) !important;
  min-height: var(--ui-icon-slot) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #242426;
  background: transparent;
  border: 0;
  border-radius: var(--ui-radius) !important;
  box-shadow: none;
  line-height: 0 !important;
  vertical-align: middle;
}

.filter-action-toolbar > .selected-order-actions > button,
.filter-action-toolbar > .finished-product-selection-actions > button {
  position: relative;
  display: grid !important;
  place-items: center !important;
  width: var(--ui-icon-slot) !important;
  min-width: var(--ui-icon-slot) !important;
  height: var(--ui-icon-slot) !important;
  min-height: var(--ui-icon-slot) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: var(--ui-radius) !important;
  line-height: 0 !important;
}

.filter-action-toolbar > button:hover,
.filter-action-toolbar > .icon-button:hover,
.filter-action-toolbar > .filter-icon-button:hover,
.filter-action-toolbar > .selected-order-actions > button:hover,
.filter-action-toolbar > .finished-product-selection-actions > button:hover,
.purchase-shared-header .purchase-toolbar-actions .icon-button:hover,
.header-data-tools .header-mounted-toolbar > button:hover,
.plastics-icon-tray .tool-icon:hover,
:host .plastics-icon-tray .tool-icon:hover {
  color: var(--ui-ink);
  background: var(--ui-hover) !important;
}

.filter-action-toolbar > button[aria-expanded="true"],
.filter-action-toolbar > button[aria-pressed="true"],
.plastics-icon-tray .tool-icon[aria-expanded="true"],
:host .plastics-icon-tray .tool-icon[aria-expanded="true"] {
  color: var(--ui-ink);
  background: var(--ui-selected);
}

.filter-action-toolbar > button::before,
.filter-action-toolbar > .selected-order-actions > button::before,
.filter-action-toolbar > .finished-product-selection-actions > button::before,
.plastics-icon-tray .tool-icon::before,
:host .plastics-icon-tray .tool-icon::before {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center !important;
}

.filter-action-toolbar > button.download-file-icon::before,
.plastics-icon-tray .download-tool::before,
:host .plastics-icon-tray .download-tool::before {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.filter-action-toolbar > button svg,
.filter-action-toolbar > .icon-button svg,
.filter-action-toolbar > .filter-icon-button svg,
.filter-action-toolbar > .selected-order-actions > button svg,
.filter-action-toolbar > .finished-product-selection-actions > button svg,
.plastics-icon-tray .tool-icon svg,
:host .plastics-icon-tray .tool-icon svg {
  position: static !important;
  display: block !important;
  align-self: center !important;
  justify-self: center !important;
  width: var(--ui-icon-size) !important;
  height: var(--ui-icon-size) !important;
  margin: 0 !important;
  transform: none !important;
  transform-origin: center !important;
  vertical-align: middle !important;
}

/* The funnel reads optically low at mathematical center. Keep its button
   centered and lift only the glyph by one pixel across every main toolbar. */
.filter-action-toolbar > .filter-icon-button::before,
.filter-action-toolbar > .filter-drawer-toggle.filter-icon-button::before {
  transform: translate(-50%, calc(-50% - 1px)) !important;
}

.filter-action-toolbar > .search-icon::before {
  transform: translate(-50%, calc(-50% - 1px)) !important;
}

.filter-action-toolbar > .filter-icon-button svg,
.filter-action-toolbar > .filter-drawer-toggle.filter-icon-button svg {
  transform: translateY(-1px) !important;
}

.filter-action-toolbar > .search-icon svg {
  transform: translateY(-1px) !important;
}

/* Tables */
.table-wrap,
.table-shell,
.responsive-table-wrap,
:host .table-wrap,
:host .purchase-table-wrap {
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-card-radius);
  background: var(--ui-surface);
  box-shadow: none;
  filter: none;
  overflow: auto;
}

.table-wrap table,
.table-shell table,
.responsive-table-wrap table,
:host table {
  background: var(--ui-surface);
  border-collapse: collapse;
  box-shadow: none;
  filter: none;
}

.table-wrap table th,
.table-shell table th,
.responsive-table-wrap table th,
:host table th {
  padding: 9px 10px;
  color: #52565a;
  background: var(--ui-header);
  border-color: var(--ui-line);
  font-size: var(--ui-table-header-size);
  font-weight: 700;
  line-height: 1.35;
  vertical-align: middle;
}

.table-wrap table td,
.table-shell table td,
.responsive-table-wrap table td,
:host table td {
  padding: 9px 10px;
  color: var(--ui-ink);
  background: var(--ui-surface);
  border-color: var(--ui-line);
  font-size: var(--ui-table-body-size);
  font-weight: 500;
  line-height: 1.4;
  vertical-align: middle;
  transition: background-color 120ms ease;
}

.table-wrap table tbody tr:not(.selected-row):not(.selected):not(.active):hover > td,
.table-shell table tbody tr:not(.selected-row):not(.selected):not(.active):hover > td,
.responsive-table-wrap table tbody tr:not(.selected-row):not(.selected):not(.active):hover > td,
:host table tbody tr:not(.selected-row):not(.selected):not(.active):hover > td {
  background: var(--ui-table-hover);
}

.selected-row > td,
tr.selected > td,
tr.active > td,
.selectable-order-row.selected > td,
.finished-product-entry-row.selected > td,
.purchase-row.active > td,
:host .purchase-row.active > td {
  background: var(--ui-selected) !important;
  border-color: var(--ui-line) !important;
  box-shadow: none !important;
}

.finished-product-date-cell.continued-date-cell {
  color: transparent;
}

.finished-product-entry-row.finished-product-date-group-start > td {
  border-top: 2px solid var(--ui-line-strong) !important;
}

/* Dashboards */
.dashboard-metrics,
.report-metrics,
.receivable-metrics,
.payable-summary-metrics,
.finished-product-summary-dashboard,
.finance-position-totals,
.finance-breakdown-grid,
.finance-report-metrics {
  gap: 8px;
}

.dashboard-metrics,
.report-metrics,
.receivable-metrics,
.finished-product-summary-dashboard,
.finance-position-totals,
.finance-breakdown-grid,
.finance-report-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.payable-summary-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.dashboard-metric,
.report-metric,
.finance-metric,
.finished-product-summary-card,
.finance-position-total,
.finance-breakdown-grid > section,
.finance-report-metrics > section {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(38px, 1fr) auto;
  column-gap: 8px;
  row-gap: 3px;
  align-items: start;
  min-height: var(--ui-dashboard-card-height);
  padding: var(--ui-dashboard-card-padding) !important;
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: var(--ui-card-radius);
  box-shadow: none !important;
  overflow: visible;
}

.dashboard-metric > span:not(.dashboard-period-label),
.report-metric > span:not(.dashboard-period-label),
.finance-metric > span:not(.dashboard-period-label),
.finished-product-summary-card > span:not(.dashboard-period-label),
.finance-position-total > span:not(.dashboard-period-label),
.finance-breakdown-grid section > span:not(.dashboard-period-label),
.finance-report-metrics section > span:not(.dashboard-period-label) {
  grid-column: 1;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: var(--ui-pill-radius);
  background: #f1f1f3 !important;
  color: #4f4f54 !important;
  font-size: var(--ui-dashboard-title-size);
  font-weight: 700;
  line-height: 16px;
}

.dashboard-metric > .dashboard-period-label,
.report-metric > .dashboard-period-label,
.finance-metric > .dashboard-period-label,
.finished-product-summary-card > .dashboard-period-label,
.finance-position-total > .dashboard-period-label,
.finance-breakdown-grid section > .dashboard-period-label,
.finance-report-metrics section > .dashboard-period-label {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  width: auto;
  min-width: 0;
  min-height: 18px;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--ui-muted) !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
}

.dashboard-metric > strong,
.report-metric > strong,
.finance-metric > strong,
.finished-product-summary-card > strong,
.finance-position-total > strong,
.finance-breakdown-grid section > strong,
.finance-report-metrics section > strong,
.dashboard-metric .invoice-pack-quantity em,
.report-metric .invoice-pack-quantity em,
.finished-product-summary-units b {
  color: var(--ui-ink) !important;
  font-size: var(--ui-dashboard-number-size) !important;
  font-weight: var(--ui-dashboard-number-weight) !important;
  line-height: 1.1;
}

.dashboard-metric > strong,
.report-metric > strong,
.finance-metric > strong,
.finished-product-summary-card > strong,
.finance-position-total > strong,
.finance-breakdown-grid section > strong,
.finance-report-metrics section > strong {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  width: 100%;
  margin: 4px 0;
  text-align: left;
}

.dashboard-metric > small,
.report-metric > small,
.finance-metric > small,
.finished-product-summary-card > small,
.finance-position-total > small,
.finance-breakdown-grid section > small,
.finance-report-metrics section > small {
  grid-column: 1 / -1;
  grid-row: 3;
  min-height: 15px;
  color: var(--ui-muted);
  font-size: var(--ui-dashboard-context-size);
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
}

.dashboard-card-context {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}

.dashboard-period-caption,
.dashboard-period-change {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-period-change {
  display: inline-flex !important;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  font-size: 9px !important;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.dashboard-period-change.is-good,
.dashboard-period-change.is-bad,
.dashboard-period-change.is-neutral {
  color: var(--ui-muted);
}

.dashboard-trend-indicator {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: currentColor;
  font-size: 9px !important;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.dashboard-trend-arrow {
  display: inline-block !important;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  overflow: visible;
  color: currentColor;
  fill: currentColor;
}

.dashboard-period-change.is-good .dashboard-trend-arrow {
  color: #15803d;
}

.dashboard-period-change.is-bad .dashboard-trend-arrow {
  color: #c9362b;
}

.dashboard-period-change.is-neutral .dashboard-trend-arrow {
  color: var(--ui-muted);
}

.dashboard-trend-arrow.is-flat {
  position: relative;
  background: transparent;
}

.dashboard-trend-arrow.is-flat::before {
  position: absolute;
  top: 6px;
  right: 1px;
  left: 1px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  content: "";
}

.dashboard-trend-percent {
  display: inline !important;
  color: var(--ui-muted) !important;
  font-size: 9px !important;
  font-variant-numeric: tabular-nums;
}

.dashboard-trend-reference {
  display: inline !important;
  flex: 0 0 auto;
  color: var(--ui-muted) !important;
  font-size: 9px !important;
  font-weight: 500;
  white-space: nowrap;
}

/* The Dashboard module follows one card rhythm: label and period above,
   centered value, then one uninterrupted comparison line. */
#dashboardView .dashboard-metric > strong {
  display: flex !important;
  align-items: baseline;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 4px;
  text-align: center;
  white-space: nowrap;
}

#dashboardView .dashboard-metric .invoice-pack-quantity {
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

#dashboardView .dashboard-currency-unit {
  display: inline-flex;
  align-self: baseline;
  margin-left: 0;
}

.dashboard-metric.accent-blue > span:not(.dashboard-period-label),
.report-metric.qty > span:not(.dashboard-period-label),
.finance-metric.outstanding > span:not(.dashboard-period-label),
.finished-product-summary-card.produced > span:not(.dashboard-period-label) {
  color: #135fa8 !important;
  background: #eaf4ff !important;
}

.dashboard-metric.accent-green > span:not(.dashboard-period-label),
.report-metric.delivered > span:not(.dashboard-period-label),
.finance-metric.collected > span:not(.dashboard-period-label),
.finance-metric.paid > span:not(.dashboard-period-label),
.finished-product-summary-card.delivered > span:not(.dashboard-period-label) {
  color: #15713a !important;
  background: #e8f7ed !important;
}

.dashboard-metric.accent-cyan > span:not(.dashboard-period-label),
.dashboard-metric.accent-teal > span:not(.dashboard-period-label) {
  color: #087078 !important;
  background: #e8f7f7 !important;
}

.dashboard-metric.accent-amber > span:not(.dashboard-period-label),
.report-metric.pending > span:not(.dashboard-period-label),
.finance-metric.payable > span:not(.dashboard-period-label),
.finished-product-summary-card.remaining.negative > span:not(.dashboard-period-label) {
  color: #a34b22 !important;
  background: #fff0e8 !important;
}

.dashboard-metric.accent-orange > span:not(.dashboard-period-label),
.finance-metric.purchase > span:not(.dashboard-period-label) {
  color: #8a5700 !important;
  background: #fff4dc !important;
}

.dashboard-metric .invoice-pack-quantity,
.report-metric .invoice-pack-quantity,
.finished-product-summary-units {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.dashboard-metric .invoice-pack-quantity em,
.report-metric .invoice-pack-quantity em,
.finished-product-summary-units b {
  font-size: var(--ui-dashboard-secondary-number-size) !important;
}

.dashboard-metric .invoice-pack-quantity small,
.report-metric .invoice-pack-quantity small,
.finished-product-summary-units small {
  font-size: var(--ui-dashboard-unit-size) !important;
  font-weight: 500 !important;
}

.dashboard-currency-unit {
  margin-left: 3px;
  color: #4f4f54;
  font-size: var(--ui-dashboard-unit-size) !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .dashboard-metrics,
  .report-metrics,
  .receivable-metrics,
  .finished-product-summary-dashboard,
  .finance-position-totals,
  .finance-breakdown-grid,
  .finance-report-metrics,
  .payable-summary-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 620px) {
  .dashboard-metrics,
  .report-metrics,
  .receivable-metrics,
  .finished-product-summary-dashboard,
  .finance-position-totals,
  .finance-breakdown-grid,
  .finance-report-metrics,
  .payable-summary-metrics {
    grid-template-columns: 1fr !important;
  }
}

/* Menus, panels, and details */
.panel,
.settings-section,
.finished-product-card,
.row-card,
.detail-card,
:host .panel,
:host .row-card,
:host .detail-card {
  border-color: var(--ui-line);
  box-shadow: none;
}

.row-card.selected,
.finished-product-card.selected,
.payable-order-card-selected,
:host .row-card.selected {
  background: var(--ui-selected) !important;
  border-color: var(--ui-line-strong) !important;
  box-shadow: none !important;
}

/* Material colour identifies the item, so interaction states preserve it.
   A neutral inner outline distinguishes hover from persistent selection. */
.inventory-card {
  box-shadow: none !important;
  transition: border-color 0.14s ease, box-shadow 0.14s ease !important;
}

.inventory-card:not(.active):hover {
  border-color: #aaaab0 !important;
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.12) !important;
  transform: none !important;
}

.inventory-card.active {
  border: 1px solid #7f7f85 !important;
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.34) !important;
  transform: none !important;
}

.inventory-card.active:hover {
  border-color: #6f6f74 !important;
  box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.42) !important;
}

.inventory-card.active::after {
  content: none !important;
}

/* The quantity dashboard is also the product-summary view switch. */
#productSummaryBtn[aria-pressed="true"] {
  background: var(--ui-selected) !important;
  border-color: var(--ui-line) !important;
  box-shadow: none !important;
}

#productSummaryBtn[aria-pressed="true"]:hover {
  background: var(--ui-selected-hover) !important;
}

/* Sidebar navigation uses the same neutral hover as tables and tool controls. */
.settings-sidebar .nav-group .tab:not(.active):hover,
.settings-sidebar .dashboard-nav-tab:not(.active):hover {
  color: var(--ui-ink);
  background: var(--ui-hover) !important;
  box-shadow: none !important;
}

.selected-order-actions-menu,
.context-menu,
:host .context-menu {
  padding: 6px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-card-radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}

.selected-order-actions-menu button,
.context-menu button,
:host .context-menu button {
  min-height: 36px;
  border-radius: 6px;
}

/* A lone inner- or outer-pack quantity belongs at the visual center of its
   dashboard card. Two-unit quantities retain their existing split layout. */
.dashboard-metric .invoice-pack-quantity.single-unit,
.report-metric .invoice-pack-quantity.single-unit {
  grid-template-columns: max-content !important;
  justify-content: center !important;
  justify-items: center;
  width: 100% !important;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.dashboard-metric .invoice-pack-quantity.single-unit > span,
.report-metric .invoice-pack-quantity.single-unit > span {
  justify-self: center;
}

/* Finished-product totals use their own legacy quantity wrapper. Keep the
   complete unit group centered, whether it contains one unit or two. */
.finished-product-summary-card .finished-product-summary-units {
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  gap: 24px;
  width: 100% !important;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.finished-product-summary-card .finished-product-summary-units > b {
  min-width: 48px;
  text-align: center;
}

/* Context below dashboard values is deliberately quieter than labels, units,
   and period headings. Keep this final so older module styles cannot enlarge it. */
.dashboard-metric > small,
.report-metric > small,
.finance-metric > small,
.finished-product-summary-card > small,
.finance-position-total > small,
.finance-breakdown-grid section > small,
.finance-report-metrics section > small,
.dashboard-card-context,
.dashboard-card-context .dashboard-period-caption,
.dashboard-card-context .dashboard-period-change,
.dashboard-card-context .dashboard-trend-indicator,
.dashboard-card-context .dashboard-trend-percent {
  min-height: 10px;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
}

@media (min-width: 768px) and (max-width: 1180px) {
  .module-period-toolbar,
  :host .book-toolbar {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  #orderView > .embedded-report,
  #orderView > .order-entry-layout,
  #invoiceView .invoice-layout,
  #receivableView .receivable-layout,
  #distributorView > .split,
  #payableSummaryView .payable-summary-layout,
  #finishedProductView .finished-product-layout,
  #rawMaterialView .raw-inventory-layout,
  #financePositionView .finance-workspace-layout {
    display: block !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
  }
}

@media (max-width: 700px) {
  :root,
  :host {
    --ui-table-body-size: 12px;
    --ui-dashboard-number-size: 20px;
  }

  .module-period-toolbar,
  :host .book-toolbar {
    width: 100%;
    overflow-x: auto;
  }
}

/* Shared by the main document and the Purchase/Plastic Roll shadow roots. */
@media screen and (any-pointer: coarse) {
  :root, :host {
    --ui-control-height: 48px;
    --ui-icon-slot: 44px;
  }

  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea {
    font-size: 13px !important;
    min-height: 44px;
  }

  .primary, .secondary, .ghost, .danger, .new-action,
  .segmented-view-tab, .finished-product-tab, .finance-view-tab,
  .plastics-view-tab, .subtab, .shortcut-button,
  .selected-order-menu-item, .calendar-day, .calendar-nav,
  .unified-period-presets button, .tablet-panel-close, .tablet-panel-launcher {
    min-height: 44px;
  }

  .icon-button, .utility-icon-button, .filter-action-button,
  .filter-icon-button, .tool-icon, .tablet-panel-close, .calendar-nav {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .module-period-toolbar, .book-toolbar, .purchase-toolbar-actions {
    flex-wrap: wrap;
    height: auto;
    max-width: 100%;
  }

  .table-wrap, .table-shell, .responsive-table-wrap,
  .tablet-drawer-panel, .module-nav {
    -webkit-overflow-scrolling: touch;
  }

  .tablet-drawer-panel { overscroll-behavior-y: contain; }
  .unified-calendar-shell { grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .calendar-prev { grid-column: 1; grid-row: 1; }
  .calendar-next { grid-column: 3; grid-row: 1; }
  .unified-calendars { grid-column: 1 / -1; grid-row: 2; }
  .calendar-days > span, .calendar-day { height: 44px; line-height: 44px; }
  .app-decision-dialog {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  .settings-sidebar .module-nav .tab { min-height: 44px; }

  /* Let entry fields shrink within narrow grids instead of overlapping. */
  form, label, input, select, textarea {
    min-width: 0;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}