/* SagaPOS V2 foundation. Load after existing Owner styles.
 * Reference: 00-fondasi/STRATEGI_MASTER.md and both selected foundation PNGs.
 * Written contrast/typography corrections take precedence over raster colors.
 * Visibility, authorization, drawer focus and data states belong to controllers.
 */
.surface-dashboard {
  --dashboard-canvas: #f6f5f2;
  --dashboard-surface: #fff;
  --dashboard-text: #222320;
  --dashboard-muted: #6b706c;
  --dashboard-border: #e8e6e1;
  --dashboard-brand: #f56a3a;
  --dashboard-brand-soft: #fff0e8;
  --dashboard-primary: #24241f;
  --dashboard-accent-text: #a63714;
  --dashboard-focus: #c54118;
  --dashboard-radius: 18px;
  --dashboard-gutter: 24px;
  --dashboard-sidebar-width: 232px;
  --dashboard-header-height: 64px;
  --dashboard-banner-height: 32px;
  --ink: #222320;
  --muted: #6b706c;
  --surface: #fff;
  --paper: #fff;
  --line: #e8e6e1;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--dashboard-canvas);
  color: var(--dashboard-text);
  accent-color: var(--dashboard-focus);
}

.surface-dashboard:has(.environment-banner[hidden]) { --dashboard-banner-height: 0px; }
.surface-dashboard .operator-shell {
  width: 100%;
  max-width: none;
  min-height: calc(100dvh - var(--dashboard-banner-height));
  padding: 0;
}
.surface-dashboard #operator-app {
  grid-template-columns: var(--dashboard-sidebar-width) minmax(0, 1fr);
  min-height: calc(100dvh - var(--dashboard-banner-height));
}
.surface-dashboard .operator-app-main { min-width: 0; }
.surface-dashboard .operator-header {
  min-height: var(--dashboard-header-height);
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 8px var(--dashboard-gutter);
  background: var(--dashboard-surface);
  border-bottom: 1px solid var(--dashboard-border);
  color: var(--dashboard-text);
  backdrop-filter: none;
}
.surface-dashboard .operator-header h1 {
  margin: 0;
  font-family: inherit;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.surface-dashboard .operator-header .eyebrow {
  font-size: 12px;
  font-weight: 500;
  color: var(--dashboard-muted);
  line-height: 1.4;
}
.surface-dashboard .operator-context { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.surface-dashboard .operator-content {
  padding: var(--dashboard-gutter) var(--dashboard-gutter) 40px;
  min-width: 0;
}
.surface-dashboard .dashboard-module {
  --dashboard-text: #222320;
  --dashboard-muted: #6b706c;
  --dashboard-border: #e8e6e1;
  --dashboard-surface: #fff;
  gap: 24px;
  min-width: 0;
  font-size: 14px;
}
.surface-dashboard .dashboard-module > * { min-width: 0; }
.surface-dashboard :is(.dashboard-card, .metric-card) {
  border: 1px solid var(--dashboard-border);
  border-radius: var(--dashboard-radius);
  background: var(--dashboard-surface);
  color: var(--dashboard-text);
  box-shadow: 0 2px 6px rgb(34 35 32 / 2%);
}
.surface-dashboard .dashboard-module .dashboard-card h2,
.surface-dashboard .owner-command h2 {
  font-family: inherit;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.02em;
}
.surface-dashboard .dashboard-module .metric-card strong {
  font-family: inherit;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.surface-dashboard :is(.dashboard-module-copy > p, .card-subtitle, .owner-card-note) {
  color: var(--dashboard-muted);
  font-size: 14px;
  line-height: 1.6;
}
.surface-dashboard :is(.dashboard-module-meta span, .dashboard-module-meta small, .dashboard-breadcrumb) {
  font-size: 12px;
  color: var(--dashboard-muted);
}
.surface-dashboard :is(button, input, select, textarea) { font-family: inherit; }
.surface-dashboard :is(.button, .operator-context .button) {
  min-height: 44px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.surface-dashboard .button-primary {
  background: var(--dashboard-primary);
  border-color: var(--dashboard-primary);
  color: #fff;
  box-shadow: none;
}
.surface-dashboard .button-primary:hover { background: #3b3d35; border-color: #3b3d35; }
.surface-dashboard .button-primary:disabled { cursor: not-allowed; }
.surface-dashboard :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-width: 100%;
  border-radius: 10px;
  font-size: 16px;
}
.surface-dashboard :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--dashboard-focus);
  outline-offset: 3px;
  scroll-margin-block: 96px;
}
.surface-dashboard .table-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
.surface-dashboard dialog {
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  border: 1px solid var(--dashboard-border);
  border-radius: 20px;
  background: var(--dashboard-surface);
  color: var(--dashboard-text);
}
.surface-dashboard dialog::backdrop { background: rgb(34 35 32 / 44%); }
.surface-dashboard dialog .owner-card-note[role="status"] { color: var(--dashboard-text); }

.surface-dashboard .dashboard-sidebar {
  width: var(--dashboard-sidebar-width);
  height: calc(100dvh - var(--dashboard-banner-height));
  padding: 20px 12px;
  gap: 20px;
  background: var(--dashboard-surface);
  border-right: 1px solid var(--dashboard-border);
  overscroll-behavior: contain;
  scroll-padding-block: 88px 24px;
}
.surface-dashboard .dashboard-brand { min-width: 0; gap: 10px; padding: 0 4px 16px; }
.surface-dashboard .dashboard-brand > span {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--dashboard-primary);
  color: #fff;
  font-weight: 700;
}
.surface-dashboard .dashboard-brand > div { min-width: 0; }
.surface-dashboard .dashboard-brand strong { font-size: 18px; font-weight: 700; }
.surface-dashboard .dashboard-brand small { font-size: 12px; color: var(--dashboard-muted); }
.surface-dashboard .dashboard-navigation { gap: 4px; }
.surface-dashboard .dashboard-nav-section { border-radius: 12px; }
.surface-dashboard .dashboard-nav-section > summary {
  min-height: 44px;
  grid-template-columns: 20px minmax(0, 1fr) 16px;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--dashboard-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.surface-dashboard .dashboard-nav-section > div {
  gap: 4px;
  margin: 2px 0 8px 16px;
  padding-left: 8px;
  border-left: 1px solid var(--dashboard-border);
}
.surface-dashboard :is(.dashboard-navigation, .dashboard-app-links) a {
  position: relative;
  min-height: 44px;
  gap: 8px;
  padding: 10px 8px;
  border-radius: 10px;
  color: var(--dashboard-muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}
.surface-dashboard .dashboard-nav-home a { color: var(--dashboard-text); font-weight: 600; }
.surface-dashboard :is(.dashboard-navigation, .dashboard-app-links) a > span:not(.dashboard-nav-badge) {
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.surface-dashboard :is(.dashboard-nav-section summary, .dashboard-navigation a, .dashboard-app-links a):hover {
  background: var(--dashboard-canvas);
  color: var(--dashboard-text);
}
.surface-dashboard .dashboard-navigation a[aria-current="page"] {
  background: var(--dashboard-brand-soft);
  color: var(--dashboard-accent-text);
  font-weight: 700;
}
.surface-dashboard .dashboard-navigation a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--dashboard-focus);
}
.surface-dashboard .dashboard-nav-badge { font-size: 12px; }
.surface-dashboard .dashboard-app-links > span { color: var(--dashboard-muted); font-size: 12px; font-weight: 600; }

/* V2 standalone icons are siblings of the full-row link, not link children. */
.surface-dashboard .v2-navigation { display: grid; gap: 4px; }
.surface-dashboard .v2-nav-standalone { position: relative; min-width: 0; }
.surface-dashboard .v2-nav-standalone > .feather {
  position: absolute;
  z-index: 1;
  inset-inline-start: 8px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--dashboard-text);
}
.surface-dashboard .v2-navigation .v2-nav-link {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: none;
  align-items: center;
}
.surface-dashboard .v2-navigation .v2-nav-link > span {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.surface-dashboard .v2-nav-standalone > .v2-nav-link {
  padding-inline-start: 36px;
  color: var(--dashboard-text);
  font-weight: 600;
}
.surface-dashboard .v2-nav-standalone:has([aria-current="page"]) > .feather {
  color: var(--dashboard-accent-text);
}
.surface-dashboard .v2-nav-chevron {
  justify-self: end;
  transition: transform 160ms ease-out;
}
.surface-dashboard .v2-nav-group[open] > summary .v2-nav-chevron { transform: rotate(180deg); }

@media (max-width: 1100px) and (min-width: 761px) {
  .surface-dashboard .operator-header { grid-template-columns: minmax(0, 1fr); }
  .surface-dashboard .operator-context { justify-content: flex-start; }
}

/* Match the controller's 760px drawer breakpoint, including browser zoom. */
@media (max-width: 760px) {
  .surface-dashboard { --dashboard-gutter: 16px; }
  .surface-dashboard .operator-header {
    position: relative;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 8px var(--dashboard-gutter);
  }
  .surface-dashboard .operator-header h1 { font-size: 22px; }
  .surface-dashboard .operator-header .eyebrow { max-width: none; white-space: normal; }
  .surface-dashboard .operator-context { gap: 6px; }
  .surface-dashboard .operator-context .button { min-height: 44px; font-size: 14px; }
  .surface-dashboard .dashboard-menu-button { width: 44px; min-height: 44px; border-radius: 10px; }
  .surface-dashboard .operator-content {
    padding: 20px max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .surface-dashboard .dashboard-module { gap: 20px; }
  .surface-dashboard .dashboard-module .dashboard-card h2,
  .surface-dashboard .owner-command h2 { font-size: 18px; }
  .surface-dashboard .dashboard-sidebar {
    inset: 0 auto 0 0;
    width: min(320px, 88vw);
    height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    gap: 16px;
    box-shadow: 16px 0 48px rgb(34 35 32 / 14%);
  }
  .surface-dashboard .dashboard-nav-backdrop:not([hidden]) { inset: 0; background: rgb(34 35 32 / 44%); }
  .surface-dashboard .dashboard-nav-heading {
    top: -16px;
    margin-top: -16px;
    padding-block: 16px;
    background: var(--dashboard-surface);
  }
  .surface-dashboard .dashboard-brand { padding-bottom: 0; border-bottom: 0; }
  .surface-dashboard .dashboard-nav-close { border: 0; border-radius: 10px; }
  .surface-dashboard .dashboard-navigation { gap: 0; }
  .surface-dashboard .dashboard-navigation > :is(.dashboard-nav-section, .dashboard-nav-home, .v2-nav-standalone) {
    padding-block: 6px;
    border-bottom: 1px solid var(--dashboard-border);
    border-radius: 0;
  }
  .surface-dashboard .dashboard-nav-section > summary,
  .surface-dashboard .dashboard-nav-home a { min-height: 48px; font-size: 16px; }
  .surface-dashboard .dashboard-nav-section > div { margin-left: 20px; border-left: 0; }
  .surface-dashboard .dashboard-navigation a { min-height: 44px; font-size: 14px; }
  .surface-dashboard .v2-nav-standalone > .v2-nav-link { min-height: 48px; font-size: 16px; }
  .surface-dashboard dialog { padding: 20px 16px max(20px, env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .surface-dashboard .operator-header { grid-template-columns: 44px minmax(0, 1fr); }
  .surface-dashboard .operator-context { grid-column: 1 / -1; justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  .surface-dashboard .dashboard-sidebar,
  .surface-dashboard .v2-nav-chevron,
  .surface-dashboard .dashboard-nav-section summary .feather:last-child { transition: none; }
}

/* Official Feather geometry keeps a consistent stroke across V2 states. */
.surface-dashboard .feather { stroke-width: 2; }

/* One route heading: breadcrumb belongs to shared header, panels own freshness. */
#dashboard-header-breadcrumb { display: none; }
.surface-dashboard #dashboard-header-breadcrumb { display: block; }
.surface-dashboard #surface-eyebrow { display: none; }
.surface-dashboard .operator-heading { min-width: 0; }
.surface-dashboard #dashboard-header-breadcrumb .dashboard-breadcrumb { margin: 0; gap: 6px; line-height: 1.4; }

#dashboard-module-actions { display: none; }
.surface-dashboard #dashboard-module-actions:not(:empty) { display: flex; gap: 8px; align-items: center; }
.surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) { grid-template-columns: minmax(0, 1fr) auto auto; }
@media (max-width:760px) {
  .surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) { grid-template-columns: 44px minmax(0, 1fr); }
  .surface-dashboard #dashboard-module-actions:not(:empty) { grid-column: 2; }
}
@media (max-width:760px) {
  .surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) #dashboard-module-actions { grid-column: 3; grid-row: 1; }
  .surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) .operator-context { grid-column: 1 / -1; width: auto; min-width: 0; max-width: 100%; justify-content: flex-end; }
}

/* Shared chrome: one route heading, one environment banner, real actions retained. */
.surface-dashboard .operator-header {
  min-height: 64px;
  padding-block: 5px;
  align-items: center;
}
.surface-dashboard .operator-context .service-state { display: none; } /* Runtime environment is already named in the banner. */
.surface-dashboard .operator-context .count-pill { background: var(--dashboard-canvas); color: var(--dashboard-text); font-weight: 500; }
.surface-dashboard .operator-context .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.surface-dashboard .operator-context :is(#dashboard-refresh-button,#logout-button,#dashboard-kds-link) { width: 44px; padding: 10px; }
.surface-dashboard .operator-context :is(#dashboard-refresh-button,#logout-button,#dashboard-kds-link) .dashboard-action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 761px) {
  .surface-dashboard .operator-header { grid-template-columns: minmax(0,1fr) auto; }
  .surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) { grid-template-columns: minmax(0,1fr) auto auto; }
  .surface-dashboard .operator-context { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .surface-dashboard .operator-header { grid-template-columns: 44px minmax(0,1fr) auto; gap: 8px; }
  .surface-dashboard .operator-header .operator-context { grid-column: 3; grid-row: 1; width: auto; gap: 4px; }
  .surface-dashboard #dashboard-header-breadcrumb { display: none; } /* Full route remains in title and canonical drawer. */
  .surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) #dashboard-module-actions { grid-column: 2 / -1; grid-row: 2; justify-content: flex-end; }
  .surface-dashboard .operator-header:has(#dashboard-module-actions:not(:empty)) .operator-context { grid-column: 3; grid-row: 1; }
  .surface-dashboard .operator-content { padding-top: 16px; }
}

/* D10's approved mobile route context precedes its primary action. Reuse the
   existing breadcrumb; its desktop placement and the canonical title stay intact. */
@media (max-width:760px) {
  .surface-dashboard[data-v2-destination="D10"] .operator-header { grid-template-rows:54px auto auto; row-gap:12px; padding:5px 16px 12px; }
  .surface-dashboard[data-v2-destination="D10"] .operator-heading { display:contents; }
  .surface-dashboard[data-v2-destination="D10"] #surface-title { grid-column:2; grid-row:1; }
  .surface-dashboard[data-v2-destination="D10"] #dashboard-header-breadcrumb { display:block; grid-column:1 / -1; grid-row:2; }
  .surface-dashboard[data-v2-destination="D10"] #dashboard-header-breadcrumb .dashboard-breadcrumb { font-size:14px; }
  .surface-dashboard[data-v2-destination="D10"] #dashboard-header-breadcrumb .dashboard-breadcrumb > span:not([aria-hidden]):not([aria-current]) { color:#c54118; }
  .surface-dashboard[data-v2-destination="D10"] #dashboard-module-actions > button { width:100%; }
  .surface-dashboard[data-v2-destination="D10"] #dashboard-header-breadcrumb a[href="#overview"],
  .surface-dashboard[data-v2-destination="D10"] #dashboard-header-breadcrumb a[href="#overview"] + span { display:none; }
  .surface-dashboard[data-v2-destination="D10"] .operator-header:has(#dashboard-module-actions:not(:empty)) #dashboard-module-actions { grid-column:1 / -1; grid-row:3; width:100%; }
}

@media (max-width:760px) {
 .surface-dashboard[data-v2-destination="D10"] .operator-header { grid-template-columns:44px minmax(0,1fr); }
 .surface-dashboard[data-v2-destination="D10"] .operator-content { padding-top:0; }
 .surface-dashboard #dashboard-mobile-context { padding:16px 12px; border-top:1px solid var(--dashboard-border); }
 .surface-dashboard #dashboard-mobile-context .operator-context { display:flex; flex-wrap:wrap; gap:8px; }
 .surface-dashboard #dashboard-mobile-context .operator-context :is(#dashboard-refresh-button,#logout-button) { width:auto; min-height:44px; padding:10px 12px; }
 .surface-dashboard #dashboard-mobile-context .operator-context :is(#dashboard-refresh-button,#logout-button) .dashboard-action-label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; }
}