/*
 * SYSTEM-VISUAL-UNIFIED-CLOSEOUT-V1
 * Final visual-only layer for the existing PC and Mobile DOM.
 * Department palettes may differ, while material, typography, controls,
 * semantic colors and gradients remain one coherent system.
 */

html body.layout-skin-only {
  --system-brand-blue: var(--color-primary, #2563eb);
  --system-brand-cyan: #06b6d4;
  --system-brand-mint: var(--color-success, #0d9488);
  --system-brand-gradient: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%);
  --system-brand-gradient-soft: linear-gradient(135deg, rgba(37, 110, 232, 0.12), rgba(18, 169, 216, 0.09));
  --system-canvas: #eef6fa;
  --system-canvas-mint: #eff9fc;
  --system-surface: #ffffff;
  --system-surface-soft: #f7fbfc;
  --system-line: #d5e4e9;
  --system-line-strong: #bdd5dd;
  --system-ink: #102b38;
  --system-ink-secondary: #3f5b67;
  --system-ink-muted: #687f89;
  --system-card-radius: 14px;
  --system-control-radius: 9px;
  --system-shadow-card: 0 8px 24px rgba(29, 96, 126, 0.09), 0 1px 2px rgba(18, 66, 86, 0.04);
  --system-shadow-raised: 0 16px 38px rgba(30, 101, 133, 0.14), 0 2px 5px rgba(18, 66, 86, 0.05);
  --system-shadow-float: 0 20px 52px rgba(27, 92, 124, 0.17), 0 4px 10px rgba(18, 66, 86, 0.06);
  --system-focus: rgba(37, 110, 232, 0.24);
  /* Stable public token aliases for future modules. */
  --brand-primary: var(--system-brand-blue);
  --brand-primary-hover: #1d5fcf;
  --brand-secondary: var(--system-brand-cyan);
  --brand-accent: var(--system-brand-mint);
  --brand-gradient-primary: var(--system-brand-gradient);
  --brand-gradient-soft: var(--system-brand-gradient-soft);
  --brand-focus-ring: var(--system-focus);
  /* Compatibility aliases: legacy modules keep their DOM and variable names,
   * while their structural color resolves to the active department palette. */
  --accent: var(--page-accent-start);
  --beauty-brand-950: color-mix(in srgb, var(--page-accent-start) 62%, var(--system-ink));
  --beauty-brand-900: color-mix(in srgb, var(--page-accent-start) 76%, var(--system-ink));
  --beauty-brand-700: color-mix(in srgb, var(--page-accent-start) 88%, var(--system-ink));
  --beauty-brand-600: var(--page-accent-start);
  --beauty-brand-100: var(--page-accent-soft);
  --beauty-page-bg: var(--system-canvas);
  --beauty-surface: var(--system-surface);
  --beauty-surface-soft: var(--system-surface-soft);
  --beauty-border-soft: var(--system-line);
  --beauty-border-strong: var(--system-line-strong);
  --beauty-text-primary: var(--system-ink);
  --beauty-text-secondary: var(--system-ink-secondary);
  --beauty-text-muted: var(--system-ink-muted);
  --beauty-accent-green: var(--status-success);
  --ysj-bg: var(--system-canvas);
  --ysj-bg-deep: #e8f4fa;
  --ysj-surface: var(--system-surface);
  --ysj-surface-soft: var(--system-surface-soft);
  --ysj-surface-tint: var(--page-accent-soft);
  --ysj-line: var(--system-line);
  --ysj-line-strong: var(--system-line-strong);
  --ysj-text: var(--system-ink);
  --ysj-text-soft: var(--system-ink-secondary);
  --ysj-muted: var(--system-ink-muted);
  --ysj-brand: var(--page-accent-start);
  --ysj-brand-strong: color-mix(in srgb, var(--page-accent-start) 80%, var(--system-ink));
  --ysj-brand-soft: var(--page-accent-soft);
  --op-brand: var(--page-accent-start);
  --op-brand-strong: color-mix(in srgb, var(--page-accent-start) 80%, var(--system-ink));
  --pd-green-900: color-mix(in srgb, var(--page-accent-start) 72%, var(--system-ink));
  --pd-green-700: var(--page-accent-start);
  --pd-green-50: var(--page-accent-soft);
  --page-bg: var(--system-canvas);
  --page-bg-soft: var(--system-canvas-mint);
  --surface-bg: var(--system-surface);
  --surface-bg-soft: var(--system-surface-soft);
  --surface-border: var(--system-line);
  --surface-border-strong: var(--system-line-strong);
  --surface-shadow-sm: var(--system-shadow-card);
  --surface-shadow-md: var(--system-shadow-raised);
  --surface-shadow-float: var(--system-shadow-float);
  --text-primary: var(--system-ink);
  --text-secondary: var(--system-ink-secondary);
  --text-muted: var(--system-ink-muted);
  --text-inverse: #ffffff;
  --text-link: var(--system-brand-blue);
  --text-link-hover: #1758c5;
  --button-primary-bg: var(--system-brand-gradient);
  --button-primary-text: #ffffff;
  --button-primary-hover: #1d78d4;
  --button-secondary-bg: #f8fcfd;
  --button-secondary-text: #174e68;
  --button-secondary-border: var(--system-line);
  --button-ghost-text: var(--system-brand-blue);
  --button-disabled-bg: #e8eff2;
  --button-disabled-text: #7a8d95;
  --input-bg: #ffffff;
  --input-text: var(--system-ink);
  --input-placeholder: #7d9199;
  --input-border: var(--system-line);
  --input-focus-border: var(--system-brand-blue);
  --input-focus-ring: var(--system-focus);
  --table-header-bg: #eaf4f8;
  --table-header-text: #174e68;
  --table-row-bg: #ffffff;
  --table-row-alt-bg: #f8fbfc;
  --table-row-hover: #edf7fa;
  --table-border: #e2ecef;
  --table-frozen-shadow: 7px 0 16px rgba(28, 99, 127, 0.11);
  --table-scrollbar: #9fc4d1;
  --status-success: #0f8f6f;
  --status-warning: #b7791f;
  --status-danger: #d92d20;
  --status-info: #256ee8;
  --trend-up: #b42318;
  --trend-up-soft: #fff2f1;
  --trend-down: #1d4ed8;
  --trend-down-soft: #eff6ff;
  --trend-flat: #475569;
  --trend-flat-soft: #f3f6fa;
  --sab-s: #ef4444;
  --sab-a: #facc15;
  --sab-b: #3b82f6;
  --sab-unrated: #9ca3af;
  --page-accent-start: #256ee8;
  --page-accent-end: #12a9d8;
  --page-accent-soft: rgba(37, 110, 232, 0.09);
  --page-accent-soft-end: rgba(6, 182, 212, 0.08);
  color: var(--system-ink);
  background-color: var(--system-canvas);
  background-image:
    radial-gradient(circle at 82% 0%, rgba(49, 164, 222, 0.13), transparent 34%),
    linear-gradient(135deg, var(--system-canvas) 0%, #f7fbfd 48%, #eff9fc 100%);
  font-family: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html body.layout-skin-only[data-visual-theme="product"] {
  --page-accent-start: #f38a28;
  --page-accent-end: #ef6255;
  --page-accent-soft: rgba(243, 138, 40, 0.12);
  --page-accent-soft-end: rgba(239, 98, 85, 0.08);
}

html body.layout-skin-only[data-visual-theme="operations"] {
  --page-accent-start: var(--color-primary, #2563eb);
  --page-accent-end: #06b6d4;
  --page-accent-soft: rgba(37, 110, 232, 0.1);
  --page-accent-soft-end: rgba(18, 169, 216, 0.08);
}

/* P0-VISUAL-DATA-007
 * Bridge legacy component names to the approved department palette. Structural
 * emphasis uses the page accent; teal remains reserved for compact success
 * semantics rather than whole panels, table headers or primary actions.
 */
html body.layout-skin-only .executive-dashboard {
  --ed-green: var(--page-accent-start);
  --ed-green-dark: color-mix(in srgb, var(--page-accent-start) 82%, var(--system-ink));
  --ed-green-soft: color-mix(in srgb, var(--page-accent-start) 8%, #ffffff);
}

html body.layout-skin-only .operations-store-board {
  --ops-green: var(--page-accent-start);
  --ops-green-dark: color-mix(in srgb, var(--page-accent-start) 82%, var(--system-ink));
}

html body.layout-skin-only .import-center-simple,
html body.layout-skin-only .manual-data-center {
  --import-green: var(--page-accent-start);
  --import-green-dark: color-mix(in srgb, var(--page-accent-start) 82%, var(--system-ink));
}

html body.layout-skin-only .mobile-c-premium {
  --cp-green: var(--page-accent-start);
  --cp-green-deep: color-mix(in srgb, var(--page-accent-start) 82%, var(--system-ink));
  --cp-green-bright: var(--page-accent-end);
}

html body.layout-skin-only .mobile-v3-office {
  --v3-system: var(--page-accent-start);
}

html body.layout-skin-only .mobile-c-native-workbench {
  --v2-teal: var(--page-accent-start);
  --native-mint: var(--page-accent-end);
}

html body.layout-skin-only .pcw-rail a.is-active,
html body.layout-skin-only .pcw-rank-row b {
  color: var(--page-accent-start) !important;
  background: var(--page-accent-soft) !important;
}

html body.layout-skin-only .pcw-eyebrow,
html body.layout-skin-only .pcw-route-card small,
html body.layout-skin-only .pcw-rank-row em,
html body.layout-skin-only .pkg-eyebrow,
html body.layout-skin-only .pkg-link-button,
html body.layout-skin-only .pkg-table .pkg-period-head.pkg-weekday,
html body.layout-skin-only .pkg-table .pkg-week-head,
html body.layout-skin-only .pkg-table .pkg-weekday-head,
html body.layout-skin-only .pkg-table th.pkg-grade,
html body.layout-skin-only .pkg-table td.pkg-grade {
  color: var(--page-accent-start) !important;
}

html body.layout-skin-only .pcw-metric.primary,
html body.layout-skin-only .pkg-tabs button.is-active,
html body.layout-skin-only .pkg-export-button {
  color: #ffffff !important;
  border-color: var(--page-accent-start) !important;
  background-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--page-accent-start) 20%, transparent) !important;
}

html body.layout-skin-only .pkg-page-header,
html body.layout-skin-only .pcw-hero,
html body.layout-skin-only .operations-board-status,
html body.layout-skin-only .import-center-header,
html body.layout-skin-only .manual-data-hero {
  border-color: color-mix(in srgb, var(--page-accent-start) 22%, var(--system-line)) !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(135deg, var(--page-accent-soft), #ffffff 55%, var(--page-accent-soft-end)) !important;
}

html body.layout-skin-only .pkg-table .pkg-period-head.pkg-weekday,
html body.layout-skin-only .pkg-table thead .pkg-sticky,
html body.layout-skin-only .pkg-table .pkg-week-head,
html body.layout-skin-only .pkg-table .pkg-weekday-head {
  background-color: #eaf4f8 !important;
  background-image: linear-gradient(180deg, #f5fafd 0%, #e5f1f5 100%) !important;
}

html body.layout-skin-only .pkg-table tbody tr:hover td,
html body.layout-skin-only .pkg-table tbody tr:hover td.pkg-sticky {
  background-color: var(--table-row-hover, #eff6ff) !important;
}

html body.layout-skin-only .mobile-action-button:not(.secondary),
html body.layout-skin-only .premium-filter-bar button,
html body.layout-skin-only .mobile-v3-detail-action:not(.secondary),
html body.layout-skin-only .mobile-native-table-shell .premium-filter-bar button,
html body.layout-skin-only .mobile-pkg-filter button {
  color: #ffffff !important;
  border-color: var(--page-accent-start) !important;
  background-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--page-accent-start) 20%, transparent) !important;
}

html body.layout-skin-only .ai-beta-note,
html body.layout-skin-only .agent-answer-card h4,
html body.layout-skin-only .agent-group-stat strong {
  color: var(--page-accent-start) !important;
}

html body.layout-skin-only .ai-beta-note {
  border-color: color-mix(in srgb, var(--page-accent-start) 22%, var(--system-line)) !important;
  background-color: var(--page-accent-soft) !important;
}

html body.layout-skin-only .agent-message.user .agent-bubble {
  color: #ffffff !important;
  border-color: var(--page-accent-start) !important;
  background-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
}

html body.layout-skin-only .home-hero-main,
html body.layout-skin-only .operations-entry-card.primary,
html body.layout-skin-only .mobile-hero,
html body.layout-skin-only .area-command-card.primary,
html body.layout-skin-only .task-command-card.primary,
html body.layout-skin-only .finance-command-card.primary,
html body.layout-skin-only .hr-command-card.primary,
html body.layout-skin-only .data-control-card.primary {
  border-color: color-mix(in srgb, var(--page-accent-start) 25%, var(--system-line)) !important;
  border-left-color: var(--page-accent-start) !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(135deg, var(--page-accent-soft), #ffffff 58%, var(--page-accent-soft-end)) !important;
}

html body.layout-skin-only .permission-approval-hero {
  color: #ffffff !important;
  border-color: color-mix(in srgb, var(--page-accent-start) 60%, #ffffff) !important;
  background-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
  box-shadow: 0 16px 38px color-mix(in srgb, var(--page-accent-start) 24%, transparent) !important;
}

html body.layout-skin-only .permission-approval-hero h1,
html body.layout-skin-only .permission-approval-hero p,
html body.layout-skin-only .permission-approval-owner strong {
  color: #ffffff !important;
}

html body.layout-skin-only .permission-tag:not(.pending):not(.off) {
  color: color-mix(in srgb, var(--page-accent-start) 82%, var(--system-ink)) !important;
  background-color: var(--page-accent-soft) !important;
}

html body.layout-skin-only .metric-bar-fill,
html body.layout-skin-only .mini-bar,
html body.layout-skin-only .task-flow-step::before,
html body.layout-skin-only .finance-tab.active,
html body.layout-skin-only .finance-month-pill.active {
  border-color: var(--page-accent-start) !important;
  background-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
}

html body.layout-skin-only .store-insight-block-title::before {
  background-color: var(--page-accent-start) !important;
}

html body.layout-skin-only .enterprise-lane .lane-kicker,
html body.layout-skin-only .operations-entry-kicker,
html body.layout-skin-only .mobile-top-kicker,
html body.layout-skin-only .office-copy-status {
  color: var(--page-accent-start) !important;
}

html body.layout-skin-only .finance-spark-line,
html body.layout-skin-only .spark-line-weekday {
  stroke: var(--page-accent-start) !important;
}

html body.layout-skin-only[data-visual-theme="supervision"] {
  --page-accent-start: #e9665f;
  --page-accent-end: #ef8b31;
  --page-accent-soft: rgba(233, 102, 95, 0.1);
  --page-accent-soft-end: rgba(239, 139, 49, 0.08);
}

html body.layout-skin-only[data-visual-theme="procurement"] {
  --page-accent-start: #d89b20;
  --page-accent-end: #769b42;
  --page-accent-soft: rgba(216, 155, 32, 0.1);
  --page-accent-soft-end: rgba(118, 155, 66, 0.08);
}

html body.layout-skin-only[data-visual-theme="brand"] {
  --page-accent-start: #7a66cf;
  --page-accent-end: #cc5f8d;
  --page-accent-soft: rgba(122, 102, 207, 0.1);
  --page-accent-soft-end: rgba(204, 95, 141, 0.07);
}

html body.layout-skin-only[data-visual-theme="hr"] {
  --page-accent-start: #8a6dd1;
  --page-accent-end: #5c68c9;
  --page-accent-soft: rgba(138, 109, 209, 0.09);
  --page-accent-soft-end: rgba(92, 104, 201, 0.07);
}

html body.layout-skin-only[data-visual-theme="finance"] {
  --page-accent-start: #347fe2;
  --page-accent-end: #465bc7;
  --page-accent-soft: rgba(52, 127, 226, 0.1);
  --page-accent-soft-end: rgba(70, 91, 199, 0.07);
}

html body.layout-skin-only[data-visual-theme="maintenance"] {
  --page-accent-start: #18a498;
  --page-accent-end: #4b9b5a;
  --page-accent-soft: rgba(24, 164, 152, 0.1);
  --page-accent-soft-end: rgba(75, 155, 90, 0.08);
}

html body.layout-skin-only[data-visual-theme="ai"] {
  --page-accent-start: #2c86e8;
  --page-accent-end: #6d5ed5;
  --page-accent-soft: rgba(44, 134, 232, 0.1);
  --page-accent-soft-end: rgba(109, 94, 213, 0.08);
}

html body.layout-skin-only .content,
html body.layout-skin-only .mobile-content {
  color: var(--system-ink);
}

/* Brand shell: preserve dimensions and navigation, refine material only. */
html body.layout-skin-only .sidebar {
  color: #f7fdff !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background-color: #126e9a !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.13), transparent 32%),
    linear-gradient(155deg, #2a72dc 0%, #159ed0 52%, #0b7fb5 100%) !important;
  box-shadow: 10px 0 34px rgba(24, 91, 122, 0.14) !important;
}

html body.layout-skin-only .sidebar .brand {
  border-color: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.15) !important;
}

html body.layout-skin-only .sidebar .brand-mark {
  border-color: rgba(255, 255, 255, 0.3) !important;
  background-color: rgba(255, 255, 255, 0.16) !important;
  box-shadow: 0 8px 20px rgba(6, 72, 106, 0.2) !important;
}

html body.layout-skin-only .sidebar .brand-title,
html body.layout-skin-only .sidebar .side-section-title {
  color: #ffffff !important;
}

html body.layout-skin-only .sidebar .brand-subtitle,
html body.layout-skin-only .sidebar small {
  color: rgba(245, 253, 255, 0.78) !important;
}

html body.layout-skin-only .sidebar .side-nav a,
html body.layout-skin-only .sidebar .side-subnav a,
html body.layout-skin-only .sidebar button {
  color: rgba(250, 254, 255, 0.9) !important;
  border-color: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  font-weight: 650;
}

html body.layout-skin-only .sidebar .side-nav a:hover,
html body.layout-skin-only .sidebar .side-subnav a:hover,
html body.layout-skin-only .sidebar button:hover {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.12) !important;
}

html body.layout-skin-only .sidebar .side-nav a.primary-link,
html body.layout-skin-only .sidebar .side-subnav a.primary-link,
html body.layout-skin-only .sidebar a.active,
html body.layout-skin-only .sidebar a[aria-current="page"] {
  color: #075b77 !important;
  border-color: rgba(255, 255, 255, 0.44) !important;
  background-color: rgba(255, 255, 255, 0.94) !important;
  background-image: linear-gradient(135deg, #f5fbff, #e7f7ff) !important;
  box-shadow: 0 9px 22px rgba(4, 72, 105, 0.17), inset 3px 0 #26a7df !important;
  font-weight: 800;
}

html body.layout-skin-only .topbar,
html body.layout-skin-only .mobile-top {
  border-color: rgba(181, 211, 222, 0.78) !important;
  background-color: rgba(255, 255, 255, 0.88) !important;
  background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.96), var(--page-accent-soft), var(--page-accent-soft-end)) !important;
  box-shadow: 0 8px 28px rgba(25, 95, 125, 0.08) !important;
  backdrop-filter: blur(18px) saturate(1.15);
}

html body.layout-skin-only .topbar h1,
html body.layout-skin-only .page-header h1,
html body.layout-skin-only .page-header-main h1 {
  color: var(--system-ink) !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

/* Unified material hierarchy without moving a single module. */
html body.layout-skin-only .card,
html body.layout-skin-only .panel,
html body.layout-skin-only .section,
html body.layout-skin-only .native-panel,
html body.layout-skin-only .pcw-card,
html body.layout-skin-only .pcw-panel,
html body.layout-skin-only .pcw-metric,
html body.layout-skin-only .ed-board-card,
html body.layout-skin-only .import-center-card,
html body.layout-skin-only .import-upload-panel,
html body.layout-skin-only .data-table-wrap,
html body.layout-skin-only .table-scroll,
html body.layout-skin-only .mobile-c-card,
html body.layout-skin-only .mobile-v3-card,
html body.layout-skin-only .mobile-sab-segment-card,
html body.layout-skin-only .mobile-sab-attention-row {
  color: var(--system-ink) !important;
  border-color: var(--system-line) !important;
  border-radius: var(--system-card-radius) !important;
  background-color: var(--system-surface) !important;
  box-shadow: var(--system-shadow-card) !important;
}

html body.layout-skin-only .card:hover,
html body.layout-skin-only .pcw-route-card:hover,
html body.layout-skin-only .mobile-v3-office-button:hover {
  border-color: var(--system-line-strong) !important;
  box-shadow: var(--system-shadow-raised) !important;
}

html body.layout-skin-only .card.primary,
html body.layout-skin-only .pcw-panel-primary,
html body.layout-skin-only .pcw-metric-primary,
html body.layout-skin-only .decision-hero,
html body.layout-skin-only .hero-main,
html body.layout-skin-only .finance-command-card.primary,
html body.layout-skin-only .page-header-main {
  border-color: color-mix(in srgb, var(--page-accent-start) 28%, #d7e5e9) !important;
  border-top-color: var(--page-accent-start) !important;
  background-color: #ffffff !important;
  background-image: linear-gradient(135deg, var(--page-accent-soft), rgba(255, 255, 255, 0.98) 55%, var(--page-accent-soft-end)) !important;
  box-shadow: var(--system-shadow-raised) !important;
}

html body.layout-skin-only .pcw-aside .pcw-metric strong {
  min-width: 0;
  font-size: clamp(14px, 1.08vw, 18px) !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

html body.layout-skin-only h1,
html body.layout-skin-only h2,
html body.layout-skin-only h3,
html body.layout-skin-only h4,
html body.layout-skin-only .value,
html body.layout-skin-only .metric-value,
html body.layout-skin-only .kpi-value {
  color: var(--system-ink) !important;
  font-variant-numeric: tabular-nums;
}

html body.layout-skin-only .value,
html body.layout-skin-only .metric-value,
html body.layout-skin-only .kpi-value,
html body.layout-skin-only td.numeric,
html body.layout-skin-only .tabulator-cell.numeric {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
}

html body.layout-skin-only p,
html body.layout-skin-only .small,
html body.layout-skin-only .muted,
html body.layout-skin-only .hint,
html body.layout-skin-only .label {
  color: var(--system-ink-secondary) !important;
}

html body.layout-skin-only .subtle,
html body.layout-skin-only .meta,
html body.layout-skin-only .caption {
  color: var(--system-ink-muted) !important;
}

/* Controls use the same geometry; theme accents are reserved for primary intent. */
html body.layout-skin-only .button,
html body.layout-skin-only button,
html body.layout-skin-only input,
html body.layout-skin-only select,
html body.layout-skin-only textarea,
html body.layout-skin-only .tabs,
html body.layout-skin-only .segmented {
  border-radius: var(--system-control-radius) !important;
}

html body.layout-skin-only .button,
html body.layout-skin-only button.primary,
html body.layout-skin-only input[type="submit"],
html body.layout-skin-only .pc-primary-action,
html body.layout-skin-only .mobile-v3-primary-action,
html body.layout-skin-only .native-primary-action {
  color: #ffffff !important;
  border-color: var(--page-accent-start) !important;
  background-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--page-accent-start) 20%, transparent) !important;
  font-weight: 750 !important;
}

html body.layout-skin-only .button.ghost,
html body.layout-skin-only .button.secondary,
html body.layout-skin-only button.secondary {
  color: color-mix(in srgb, var(--page-accent-start) 82%, #183846) !important;
  border-color: color-mix(in srgb, var(--page-accent-start) 25%, #d6e4e8) !important;
  background-color: #f8fcfd !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(25, 91, 119, 0.06) !important;
}

html body.layout-skin-only input,
html body.layout-skin-only select,
html body.layout-skin-only textarea {
  color: var(--system-ink) !important;
  border-color: var(--system-line) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  box-shadow: inset 0 1px 2px rgba(19, 67, 87, 0.04) !important;
}

html body.layout-skin-only input:focus,
html body.layout-skin-only select:focus,
html body.layout-skin-only textarea:focus,
html body.layout-skin-only button:focus-visible,
html body.layout-skin-only a:focus-visible {
  border-color: var(--page-accent-start) !important;
  outline: 0 !important;
  box-shadow: 0 0 0 3px var(--system-focus) !important;
}

html body.layout-skin-only .tabs,
html body.layout-skin-only .segmented,
html body.layout-skin-only .finance-tab-strip,
html body.layout-skin-only .mobile-v3-office-tabs {
  border-color: var(--system-line) !important;
  background-color: var(--system-surface-soft) !important;
  box-shadow: inset 0 1px 2px rgba(19, 67, 87, 0.04) !important;
}

html body.layout-skin-only .tabs .active,
html body.layout-skin-only .segmented .active,
html body.layout-skin-only .finance-tab-strip .active,
html body.layout-skin-only .mobile-v3-office-tabs a.active {
  color: #ffffff !important;
  border-color: var(--page-accent-start) !important;
  background-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
  box-shadow: 0 6px 15px color-mix(in srgb, var(--page-accent-start) 18%, transparent) !important;
}

/* Data surfaces: improve scanning while preserving columns, widths and frozen behavior. */
html body.layout-skin-only table,
html body.layout-skin-only .tabulator,
html body.layout-skin-only .mobile-tabulator-panel .tabulator {
  color: var(--system-ink) !important;
  border-color: var(--system-line) !important;
  border-radius: 12px !important;
  background-color: #ffffff !important;
  box-shadow: 0 12px 30px rgba(27, 94, 122, 0.1) !important;
}

html body.layout-skin-only table thead,
html body.layout-skin-only table th,
html body.layout-skin-only .tabulator .tabulator-header,
html body.layout-skin-only .tabulator .tabulator-headers,
html body.layout-skin-only .tabulator .tabulator-header .tabulator-col {
  color: #174e68 !important;
  border-color: #c7dce4 !important;
  background-color: #eaf4f8 !important;
  background-image: linear-gradient(180deg, #f5fafd 0%, #e5f1f5 100%) !important;
  font-weight: 800 !important;
}

html body.layout-skin-only table td,
html body.layout-skin-only .tabulator .tabulator-cell {
  color: #18333f !important;
  border-color: #e2ecef !important;
  background-color: #ffffff !important;
  font-variant-numeric: tabular-nums;
}

html body.layout-skin-only table tbody tr:nth-child(even) td,
html body.layout-skin-only .tabulator .tabulator-row.tabulator-row-even .tabulator-cell {
  background-color: #f8fbfc !important;
}

html body.layout-skin-only table tbody tr:hover td,
html body.layout-skin-only .tabulator .tabulator-row:hover .tabulator-cell {
  background-color: #edf7fa !important;
}

html body.layout-skin-only table th:first-child,
html body.layout-skin-only table td:first-child,
html body.layout-skin-only .tabulator .tabulator-frozen {
  box-shadow: 7px 0 16px rgba(28, 99, 127, 0.11) !important;
}

html body.layout-skin-only .pagination,
html body.layout-skin-only .pager,
html body.layout-skin-only .tabulator-footer,
html body.layout-skin-only .filter-bar,
html body.layout-skin-only .filters,
html body.layout-skin-only .toolbar,
html body.layout-skin-only .data-toolbar {
  color: var(--system-ink-secondary) !important;
  border-color: var(--system-line) !important;
  background-color: #f7fbfc !important;
  background-image: linear-gradient(90deg, #f3f9fc, #f7fcfa) !important;
}

/* Mobile shares material and color DNA while keeping all existing modules. */
html body.mobile-body.layout-skin-only,
html body.layout-skin-only .mobile-c-premium,
html body.layout-skin-only .mobile-c-native-workbench,
html body.layout-skin-only .mobile-layout-v2 {
  color: var(--system-ink) !important;
  background-color: var(--system-canvas) !important;
  background-image:
    linear-gradient(180deg, rgba(37, 110, 232, 0.14), rgba(238, 246, 250, 0) 220px),
    linear-gradient(120deg, rgba(37, 99, 235, 0.05), rgba(6, 182, 212, 0.08)) !important;
}

html body.layout-skin-only .premium-home-hero,
html body.layout-skin-only .premium-detail-header,
html body.layout-skin-only .mobile-native-hero {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background-color: var(--page-accent-start) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 44%),
    linear-gradient(135deg, var(--page-accent-start), var(--page-accent-end)) !important;
  box-shadow: 0 15px 34px color-mix(in srgb, var(--page-accent-start) 24%, transparent) !important;
}

html body.layout-skin-only .premium-home-hero h1,
html body.layout-skin-only .premium-detail-header h1,
html body.layout-skin-only .mobile-native-hero h1,
html body.layout-skin-only .mobile-native-hero h2 {
  color: #ffffff !important;
}

html body.layout-skin-only .mobile-bottom-nav,
html body.layout-skin-only .mobile-c-bottom-nav,
html body.layout-skin-only .mobile-v3-bottom-nav {
  color: var(--system-ink-secondary) !important;
  border-color: rgba(37, 110, 232, 0.14) !important;
  background-color: rgba(255, 255, 255, 0.97) !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.98), #f7fbfc) !important;
  box-shadow: 0 -10px 28px rgba(25, 92, 122, 0.13) !important;
  backdrop-filter: blur(18px) saturate(1.12);
}

html body.layout-skin-only .mobile-bottom-nav a.active,
html body.layout-skin-only .mobile-c-bottom-nav a.active,
html body.layout-skin-only .mobile-v3-bottom-nav a.active {
  color: #0d6e8d !important;
  border-color: rgba(37, 110, 232, 0.18) !important;
  background-color: #e9f6fa !important;
  background-image: linear-gradient(180deg, #edf7ff, #e4f7fd) !important;
  box-shadow: 0 6px 15px rgba(29, 105, 138, 0.11) !important;
}

/* Remove residual mint/green structural states from the legacy Mobile shell. */
html body.layout-skin-only .mobile-v3-office-segments span.active,
html body.layout-skin-only .premium-segment-tabs a.active,
html body.layout-skin-only .mobile-v3-office-kpi:first-child,
html body.layout-skin-only .premium-kpi-card:first-child,
html body.layout-skin-only .mobile-v3-office-tabs a.active,
html body.layout-skin-only .mobile-c-rework .mobile-v3-office-tabs a.active {
  color: #0f6f9f !important;
  border-color: rgba(37, 110, 232, 0.24) !important;
  background-color: #edf7ff !important;
  background-image: linear-gradient(180deg, #edf7ff, #e4f7fd) !important;
}

html body.layout-skin-only .tone-operations b,
html body.layout-skin-only .mobile-v3-office-row b {
  color: #176fa8 !important;
  background-color: #e9f5ff !important;
}

html body.layout-skin-only .premium-pc-link {
  color: #176fa8 !important;
  border-color: rgba(37, 110, 232, 0.24) !important;
}

/* Product and department accents apply to deliberate emphasis points only. */
html body.layout-skin-only[data-visual-theme="product"] .page-header-main,
html body.layout-skin-only[data-visual-theme="product"] .native-product-hero,
html body.layout-skin-only[data-visual-theme="product"] .native-product-sop,
html body.layout-skin-only[data-visual-theme="product"] .pc-command {
  border-top-color: var(--page-accent-start) !important;
  background-image: linear-gradient(135deg, var(--page-accent-soft), rgba(255, 255, 255, 0.98) 56%, var(--page-accent-soft-end)) !important;
}

html body.layout-skin-only[data-visual-theme]:not([data-visual-theme="default"]) .page-header-icon,
html body.layout-skin-only[data-visual-theme]:not([data-visual-theme="default"]) .pc-eyebrow,
html body.layout-skin-only[data-visual-theme]:not([data-visual-theme="default"]) .section-kicker {
  color: var(--page-accent-start) !important;
}

/* Locked business semantics: themes can never override these states. */
html body.layout-skin-only {
  --mtd-mom-warning-text: #d92d20;
  --mtd-mom-warning-bg: #fff1f0;
  --mtd-mom-warning-border: #ffccc7;
  --labor-ratio-warning-text: #d92d20;
  --labor-ratio-warning-bg: #fff1f0;
  --labor-ratio-warning-border: #ffccc7;
}

html body.layout-skin-only .mtd-mom-below-target,
html body.layout-skin-only .labor-ratio-warning {
  color: #d92d20 !important;
  border-color: #ffccc7 !important;
  background-color: #fff1f0 !important;
  background-image: none !important;
}

html body.layout-skin-only .mtd-mom-not-comparable,
html body.layout-skin-only .labor-ratio-not-available {
  color: #7b8990 !important;
  border-color: #d9e1e4 !important;
  background-color: #f5f7f8 !important;
  background-image: none !important;
}

html body.layout-skin-only .trend-up,
html body.layout-skin-only .ed-trend-up,
html body.layout-skin-only .delta-pill.good,
html body.layout-skin-only .mobile-c-trend.up,
html body.layout-skin-only .native-trend.up,
html body.layout-skin-only .mobile-sab-delta-up,
html body.layout-skin-only .mobile-tabulator-delta-up {
  color: #b42318 !important;
  border-color: rgba(180, 35, 24, 0.2) !important;
  background-color: #fff2f1 !important;
  background-image: none !important;
}

html body.layout-skin-only .trend-down,
html body.layout-skin-only .ed-trend-down,
html body.layout-skin-only .delta-pill.bad,
html body.layout-skin-only .mobile-c-trend.down,
html body.layout-skin-only .native-trend.down,
html body.layout-skin-only .mobile-sab-delta-down,
html body.layout-skin-only .mobile-tabulator-delta-down {
  color: #1d4ed8 !important;
  border-color: rgba(29, 78, 216, 0.2) !important;
  background-color: #eff6ff !important;
  background-image: none !important;
}

html body.layout-skin-only .trend-flat,
html body.layout-skin-only .delta-pill.warn,
html body.layout-skin-only .mobile-c-trend.flat,
html body.layout-skin-only .native-trend.flat,
html body.layout-skin-only .mobile-sab-delta-flat,
html body.layout-skin-only .mobile-tabulator-delta-flat {
  color: #475569 !important;
  border-color: rgba(71, 85, 105, 0.17) !important;
  background-color: #f3f6fa !important;
  background-image: none !important;
}

html body.layout-skin-only .sab-s,
html body.layout-skin-only .sab-badge-s,
html body.layout-skin-only .grade-s,
html body.layout-skin-only .level-tag.level-s,
html body.layout-skin-only .mobile-tabulator-sab-s {
  color: #ffffff !important;
  border-color: #ef4444 !important;
  background-color: #ef4444 !important;
  background-image: none !important;
}

html body.layout-skin-only .sab-a,
html body.layout-skin-only .sab-badge-a,
html body.layout-skin-only .grade-a,
html body.layout-skin-only .level-tag.level-a,
html body.layout-skin-only .mobile-tabulator-sab-a {
  color: #5f4300 !important;
  border-color: #facc15 !important;
  background-color: #facc15 !important;
  background-image: none !important;
}

html body.layout-skin-only .sab-b,
html body.layout-skin-only .sab-badge-b,
html body.layout-skin-only .grade-b,
html body.layout-skin-only .level-tag.level-b,
html body.layout-skin-only .mobile-tabulator-sab-b {
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  background-color: #3b82f6 !important;
  background-image: none !important;
}

html body.layout-skin-only .sab-unrated,
html body.layout-skin-only .sab-badge-unrated,
html body.layout-skin-only .grade-unrated,
html body.layout-skin-only .level-tag.unrated,
html body.layout-skin-only .mobile-tabulator-sab-unrated {
  color: #374151 !important;
  border-color: #9ca3af !important;
  background-color: #e5e7eb !important;
  background-image: none !important;
}

@media (max-width: 720px) {
  html body.layout-skin-only {
    --system-card-radius: 16px;
    --system-shadow-card: 0 7px 20px rgba(29, 96, 126, 0.08), 0 1px 2px rgba(18, 66, 86, 0.035);
    --system-shadow-raised: 0 12px 28px rgba(30, 101, 133, 0.12), 0 2px 4px rgba(18, 66, 86, 0.04);
  }

  html body.layout-skin-only table td,
  html body.layout-skin-only .tabulator .tabulator-cell {
    font-size: max(13px, 0.8125rem) !important;
  }

  html body.layout-skin-only .mobile-native-store-name,
  html body.layout-skin-only .tabulator-cell:first-child {
    color: #123847 !important;
    font-weight: 750 !important;
  }

  html body.layout-skin-only .hr-center[data-identity-self-service] .hr-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.layout-skin-only .hr-center[data-identity-self-service] .hr-card,
  html body.layout-skin-only .hr-center[data-identity-self-service] .hr-card p,
  html body.layout-skin-only .hr-center[data-identity-self-service] .hr-form-note {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}