/* Shared page shell in the Service style: heading with icon, tab strip, metric cards,
   panels and record cards. Pages use these classes instead of their own variants. */
.page-shell { width: 100%; max-width: none; margin: 0; min-width: 0; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.page-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-heading-icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ccdcf1; border-radius: 12px; background: #fff; color: #2d4e8a; flex-shrink: 0; }
.page-heading-icon .ui-icon { width: 23px; height: 23px; }
.page-title h1 { margin: 0; font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; }
.page-title p { margin: 3px 0 0; color: #607792; font-size: .8rem; }
.page-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.page-actions .button, .page-actions button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 8px 12px; font-size: .85rem; border-radius: 9px; }
.page-actions .ui-icon { width: 19px; height: 19px; }

.page-tabs { display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 4px; gap: 3px; margin: 0 0 14px; background: #fff; border: 1px solid #d0dff0; border-radius: 12px; }
.page-tabs a, .page-tabs button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 8px; background: transparent; color: #607792; font-size: .87rem; text-decoration: none; }
.page-tabs [aria-current] { background: #1d4178; color: #fff; box-shadow: 0 2px 5px #1d417822; }
.page-tabs .ui-icon { display: none; width: 21px; height: 21px; }

.page-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 9px; margin: 0 0 12px; }
.page-metrics > * { position: relative; display: grid; grid-template-rows: minmax(34px, auto) auto; align-content: space-between; gap: 8px; min-height: 110px; min-width: 0; padding: 13px 14px 11px; border: 1px solid #d2dff0; border-top: 3px solid #3155a1; border-radius: 12px; background: linear-gradient(130deg, #fff, #eef4ff); box-shadow: 0 2px 4px #193d6810; color: #1b3e73; text-decoration: none; }
.page-metrics > :nth-child(even) { background: linear-gradient(130deg, #fff, #eaf7fc); border-top-color: #07829e; }
.page-metrics > * > span:not(.page-metric-icon) { padding-right: 28px; font-size: .8rem; line-height: 1.35; }
.page-metrics strong { font-size: 1.7rem; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.page-metrics small { color: #607792; font-size: .75rem; overflow-wrap: anywhere; }
.page-metric-icon { position: absolute; top: 11px; right: 10px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #e2ecfc; color: #3155a1; }
.page-metric-icon .ui-icon { width: 17px; height: 17px; }
.page-metrics > .page-metric-alert { border-top-color: #cd8525; background: linear-gradient(130deg, #fff, #fff5e8); }
.page-metric-alert .page-metric-icon { color: #a46c1a; background: #ffebcd; }

.page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.page-panel { min-width: 0; margin: 0 0 10px; padding: 14px; border: 1px solid #d2dff0; border-radius: 12px; background: #fff; box-shadow: 0 2px 4px #193d6808; }
.page-grid > .page-panel { margin: 0; }
.page-wide { grid-column: 1 / -1; }
.page-panel > h2, .page-panel-head h2 { margin: 0; font-size: .95rem; }
.page-panel > h2, .page-panel-head { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #e1e9f4; }
.page-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.page-panel p { overflow-wrap: anywhere; }
.page-note { color: #607792; font-size: .83rem; }

.page-records { display: grid; gap: 6px; }
.page-record { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; border: 1px solid #c9dbf2; border-left: 3px solid #343698; border-radius: 10px; background: #fff; font-size: .88rem; }
.page-record:nth-child(even) { background: #e7f1ff; }
.page-record > * { min-width: 0; overflow-wrap: anywhere; }
.page-record small { display: block; color: #607792; font-size: .8rem; }
.page-record.is-muted { border-left-color: #9aa9bd; opacity: .8; }
.page-record-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.page-record-actions form { margin: 0; }
.page-record-actions .button, .page-record-actions button { min-height: 44px; }
.page-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #e2ecfc; color: #1d4178; font-size: .75rem; font-weight: 600; }
.page-badge.is-ok { background: #dcf3e8; color: #0b6b3f; }
.page-badge.is-warn { background: #ffebcd; color: #8a5612; }
.page-badge.is-off { background: #edf0f5; color: #5b6b80; }

@media (hover: hover) { .page-metrics > a:hover { border-color: #8faed7; box-shadow: 0 4px 10px #193d6818; } }
@media (max-width: 1100px) { .page-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .page-heading { gap: 8px; margin-bottom: 10px; }
  .page-title { gap: 7px; }
  .page-heading-icon { display: none; }
  .page-title h1 { font-size: 1.3rem; }
  .page-title p { font-size: .75rem; }
  .page-actions { flex-wrap: nowrap; gap: 5px; }
  .page-actions .button, .page-actions button { width: 44px; padding: 0; justify-content: center; }
  .page-actions .button > span, .page-actions button > span { display: none; }
  .page-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); width: 100%; margin-bottom: 10px; }
  .page-tabs a, .page-tabs button { justify-content: center; padding: 8px; }
  .page-tabs .ui-icon { display: block; }
  .page-tabs a > span, .page-tabs button > span { display: none; }
  .page-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .page-metrics > * { min-height: 88px; padding: 10px; }
  .page-metrics strong { font-size: 1.3rem; }
  .page-panel { padding: 10px; }
  .page-record { grid-template-columns: minmax(0, 1fr); }
  .page-record-actions { justify-content: flex-start; }
  .page-shell input, .page-shell select, .page-shell textarea { font-size: 16px; }
}

/* ---------------------------------------------------------------------------------------------
   One look for every screen (user request: everything like Service, full width).
   Prefixed with .content so these win over the older per-page rules loaded after this file.
   --------------------------------------------------------------------------------------------- */
.content .page-title { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-width: 0; }
.content .page-title > .page-heading-icon { grid-row: 1 / span 2; }
.content .page-title:not(:has(> p, > .page-subtitle)) > .page-heading-icon { grid-row: auto; }
.content .page-title > :not(.page-heading-icon) { grid-column: 2; }
.content .page-title > p, .content .page-title .page-subtitle { margin: 3px 0 0; color: #607792; font-size: .8rem; }
.content .page-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.content .page-heading h1, .content > h1, .content .settings-heading h1 { margin: 0; font-size: 1.45rem; line-height: 1.2; overflow-wrap: anywhere; }
.content .page-heading .export-actions { margin-left: auto; }

.content :is(.company-tabs, .supplier-tabs, .product-tabs, .history-tabs, .customer-tabs, .crm-tabs, .crm-stage-tabs) {
  display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; padding: 4px; gap: 3px; margin: 0 0 14px;
  background: #fff; border: 1px solid #d0dff0; border-radius: 12px; box-shadow: none;
}
.content :is(.company-tabs, .supplier-tabs, .product-tabs, .history-tabs, .customer-tabs, .crm-tabs, .crm-stage-tabs) :is(a, button) {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0; padding: 8px 14px;
  border: 0; border-radius: 8px; background: transparent; color: #607792; font-size: .87rem; font-weight: 500; box-shadow: none;
}
.content :is(.company-tabs, .supplier-tabs, .product-tabs, .history-tabs, .customer-tabs, .crm-tabs, .crm-stage-tabs) :is([aria-current], [aria-selected="true"], .is-active, .primary) {
  background: #1d4178; color: #fff; box-shadow: 0 2px 5px #1d417822;
}

.content :is(.company-kpis, .sales-kpis, .product-kpis, .count-stats, .crm-metrics) > * {
  position: relative; min-width: 0; border: 1px solid #d2dff0; border-top: 3px solid #3155a1; border-radius: 12px;
  background: linear-gradient(130deg, #fff, #eef4ff); box-shadow: 0 2px 4px #193d6810; color: #1b3e73;
}
.content :is(.company-kpis, .sales-kpis, .product-kpis, .count-stats, .crm-metrics) > :nth-child(even) {
  background: linear-gradient(130deg, #fff, #eaf7fc); border-top-color: #07829e;
}
.content :is(.company-kpis, .sales-kpis, .product-kpis, .count-stats, .crm-metrics) strong { font-variant-numeric: tabular-nums; }
.content .panel { border-color: #d2dff0; border-radius: 12px; box-shadow: 0 2px 4px #193d6808; }

@media (max-width: 760px) {
  .content .page-heading { gap: 8px; margin-bottom: 10px; }
  .content .page-heading h1, .content > h1, .content .settings-heading h1 { font-size: 1.3rem; }
  .content .page-title > .page-heading-icon { display: none; }
  .content :is(.company-tabs, .supplier-tabs, .product-tabs, .history-tabs, .customer-tabs, .crm-tabs) {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); width: 100%;
  }
  .content :is(.company-tabs, .supplier-tabs, .product-tabs, .history-tabs, .customer-tabs, .crm-tabs) :is(a, button) { justify-content: center; padding: 8px; }
}

/* Sortable column headers: server links (grid_sort tag) and in-page buttons (table-sort.js). */
th .sort-link, th .sort-button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; text-align: inherit; text-decoration: none; cursor: pointer; }
th.num .sort-link, th.num .sort-button, th.numeric .sort-link, th.numeric .sort-button { flex-direction: row-reverse; }
th .sort-indicator { font-size: .72em; opacity: .5; }
th .is-active .sort-indicator, th[aria-sort] .sort-indicator { opacity: 1; }
th .sort-link:focus-visible, th .sort-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) { th .sort-link:hover, th .sort-button:hover { text-decoration: underline; } }
.client-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .85rem; color: #607792; }
.client-sort[hidden] { display: none; }
.client-sort select { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; }