/* Shared surface finish, loaded after module styles. V1 stays unchanged.
   Patterns belong to the workspace/navigation; data surfaces stay quiet. */
body.pantau-ui-v2 {
  --p-workspace: #eaf1f5;
  --p-pattern-dot: rgba(40, 91, 118, .13);
  --p-card-tint: #e2eef6;
  --p-card-base: #f0f6f9;
  --p-surface-container-lowest: #f3f8fb;
  --p-card-line: #cadde6;
  --p-card-shadow: 0 3px 14px rgba(21, 63, 86, .045), 0 1px 2px rgba(21, 63, 86, .04);
  --p-table-head: #24566c;
  --p-table-stripe: #e5f0f5;
  --p-table-hover: #d6eaef;
  --p-nav-base: #123e56;
  --p-nav-end: #174f5b;
  --p-nav-ink: #e4eff5;
  --p-nav-muted: #b1cbd8;
  --p-nav-line: rgba(210, 234, 244, .18);
  --p-nav-hover: rgba(220, 241, 250, .09);
  background:
    radial-gradient(ellipse at 95% 0%, rgba(127, 191, 184, .14), transparent 48%) 0 0 / 100% 750px no-repeat,
    radial-gradient(circle, var(--p-pattern-dot) .7px, transparent .9px) 0 0 / 22px 22px,
    var(--p-workspace);
}

/* A single dark anchor balances the pale analytical workspace. */
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) {
  color: var(--p-nav-ink);
  background:
    radial-gradient(ellipse at 100% 100%, rgba(58, 144, 139, .24), transparent 60%),
    linear-gradient(165deg, var(--p-nav-base), var(--p-nav-end));
  border-color: rgba(19, 67, 86, .24);
  box-shadow: 0 8px 26px rgba(17, 56, 77, .13);
}
body.pantau-ui-v2 .generated-sidebar .generated-brand {
  margin: 0 4px 12px;
  padding: 6px 8px;
  background: #eef5f7;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 15px;
}
body.pantau-ui-v2 .generated-sidebar-command {
  color: var(--p-nav-ink);
  background: var(--p-nav-hover);
  border-color: var(--p-nav-line);
}
body.pantau-ui-v2 .generated-sidebar-command kbd {
  color: var(--p-nav-ink);
  background: var(--p-nav-base);
  border-color: var(--p-nav-line);
}
body.pantau-ui-v2 .generated-sidebar-command:hover {
  background: rgba(220, 241, 250, .16);
  border-color: var(--p-nav-muted);
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) :is(.gen-nav-link, .gen-nav-section-header, .gen-nav-section-chevron) {
  color: var(--p-nav-ink);
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) :is(.gen-nav-section-label, .sidebar-copyright) {
  color: var(--p-nav-muted);
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) .gen-nav-section-rule {
  background: var(--p-nav-line);
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) :is(.gen-nav-link, .gen-nav-section-header):hover {
  color: #fff;
  background: var(--p-nav-hover);
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) .gen-nav-link.active {
  color: #f2fffe;
  background: #266a78;
  box-shadow: inset 0 0 0 1px rgba(148, 222, 212, .24);
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) .gen-nav-link.active svg {
  color: #a3e3d9;
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) .gen-nav-link.active::before {
  background: #a3e3d9;
}
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) .generated-sidebar-bottom {
  border-top-color: var(--p-nav-line);
}
body.pantau-ui-v2 .generated-sidebar .generated-nav {
  scrollbar-color: #739eae transparent;
}
body.pantau-ui-v2 .generated-sidebar .generated-nav::-webkit-scrollbar-thumb { background: #739eae; }
body.pantau-ui-v2 .v2-mobile-drawer-title { color: var(--p-nav-ink); }
body.pantau-ui-v2 .v2-mobile-drawer-grab { background: var(--p-nav-muted); }
body.pantau-ui-v2 :is(.generated-sidebar, .v2-mobile-drawer) :focus-visible {
  outline: 2px solid #a3e3d9;
  outline-offset: 2px;
}
body.pantau-ui-v2 .generated-sidebar-command:focus-visible {
  color: var(--p-nav-ink);
  background: var(--p-nav-hover);
}

/* Explicit component families avoid recoloring status badges or heatmaps.
   The top wash gives headers depth without placing patterns behind charts. */
body.pantau-ui-v2 .generated-content :is(
  .generated-card, .wtwl-card, .lanuri-target-card,
  .bpjs-form-card, .bpjs-calendar-card, .bpjs-agenda-card,
  .smartbox-card, .reports-card, .reference-card, .user-directory-card,
  .fourdx-form-card, .fourdx-scoreboard, .fourdx-goal-card,
  .gemba-kpi-card, .csti-settings-card, .csti-table-card,
  .csti-hour-card, .csti-service-card, .wtwl-trend-card,
  .wtwl-office-card, .wtwl-visits-card, .wtwl-service-card,
  .wtwl-sla-card, .wtwl-sla-officer-card, .complaint-trend-card,
  .complaint-kind-card, .complaint-list-card, .complaint-officer-card,
  .survey-priority-card, .survey-journey-card, .survey-record-card,
  .survey-aoi-table-card, .wtwl-upload-card, .wtwl-rules-card,
  .wtwl-history-card, .ae-plan-card, .ae-summary-card, .ae-filter-panel,
  .cmi-coverage, .garda-panel, .garda-report-card, .garda-kpi,
  .ov-hero, .ov-metrics, .ov-scene-card, .ov-detail-panel, .ov-area-menu,
  .csti-gemba-clip, .gemba-dash-chart, .gemba-dash-detail,
  .csti-prod-card, .csti-prod-hours-card, .csti-prod-queue-card,
  .fourdx-goals-section, .fourdx-side-card, .fourdx-chart-card,
  .fourdx-timeline-card, .fourdx-unit-card,
  .laporan-fieldset, .laporan-history, .report-chart-card,
  .panel, .alert-card, .action-card, .lanuri-placeholder,
  .lanuri-target-empty, .survey-filter-panel, .complaint-ew-monthly,
  .garda-toolbar, .garda-flow,
  .garda-report-feature, .cmi-context
):not(:where(.panel-dark, .faskes-analytics-warning-card, .complaint-ai-insight, .wtwl-ai-card)) {
  background: linear-gradient(180deg, var(--p-card-tint), var(--p-card-base) 150px);
  border-color: var(--p-card-line);
  box-shadow: var(--p-card-shadow);
}

/* Nested panels need a visible surface of their own, including empty states. */
body.pantau-ui-v2 .generated-content :is(
  .smartbox-formula-item, .gemba-set-item:not(.active), .csti-ext-item,
  .sv-map-filter-bar, .sv-map-legend, .garda-scope-controls,
  .garda-account-sections fieldset, .garda-tabs, .cmi-kpi article
) {
  background: var(--p-card-base);
  border-color: var(--p-card-line);
}
body.pantau-ui-v2 .generated-content .bpjs-calendar-grid { background: var(--p-card-line); }
body.pantau-ui-v2 .generated-content .bpjs-calendar-day:not(.today):not(.selected):not(.outside) {
  background-color: var(--p-card-base);
}
/* Only neutral productivity boards: warning/breach colors remain in charge. */
body.pantau-ui-v2 .generated-content .generated-card.csti-prod-board-card:not(.has-breach) {
  background: linear-gradient(150deg, #e4f2ed, var(--p-card-base));
}
body.pantau-ui-v2 .generated-content :is(.mppd-kpi, .fourdx-disciplines, .sv-map-kpi) > article,
body.pantau-ui-v2 .generated-content .bpjs-summary > span {
  background: linear-gradient(145deg, #e0edf6, #edf5f9);
  border-color: var(--p-card-line);
}
body.pantau-ui-v2 .generated-content :is(.mppd-kpi, .fourdx-disciplines) > article:nth-child(even) {
  background: linear-gradient(145deg, #dff0ed, #edf6f3);
}
body.pantau-ui-v2 .csti-wtwl-card.ok { background: #e5f2ec; }
body.pantau-ui-v2 .csti-wtwl-card.warning,
body.pantau-ui-v2 .generated-content .sv-map-kpi > article.waiting { background: #fff3da; }
body.pantau-ui-v2 .csti-wtwl-card.danger,
body.pantau-ui-v2 .generated-content .sv-map-kpi > article.danger { background: #fbe9e6; }

/* Virtual office: the header and metric strip previously hard-coded white. */
body.pantau-ui-v2 .office-viz-page .ov-hero {
  background: linear-gradient(110deg, #e0edf6, #e6f3ef);
  border-color: #bfd6e2;
}
body.pantau-ui-v2 .office-viz-page .ov-metrics .ov-metric {
  background: #e0edf6;
  border-color: #c2d9e4;
}
body.pantau-ui-v2 .office-viz-page .ov-metric:nth-child(2) { background: #ddf0ed; }
body.pantau-ui-v2 .office-viz-page .ov-metric:nth-child(3) { background: #e8f2e5; }
body.pantau-ui-v2 .office-viz-page .ov-metric:nth-child(4) { background: #e7edf5; }
body.pantau-ui-v2 .office-viz-page .ov-counter-card:not(.ov-is-selected):not(.ov-is-dimmed) { background-color: var(--p-card-base); }

/* Clip imagery keeps its own appearance; tint the metadata and action area. */
body.pantau-ui-v2 .csti-gemba-info { background: #e8f2f7; }
body.pantau-ui-v2 .csti-gemba-actions {
  background: #ddebf2;
  border-top-color: #bdd4e1;
}

/* Dialogs are attached outside generated-content, including Gemba scoring. */
body.pantau-ui-v2 :is(
  .gemba-score-dialog, .gemba-token-dialog, .ae-dialog, .action-create-dialog,
  .garda-dialog, .garda-detail-dialog, .cmi-dialog, .survey-aoi-dialog,
  .ov-detail-sheet
) { background: var(--p-card-base); }
body.pantau-ui-v2 :is(.gemba-score-section-head, .ae-dialog-head),
body.pantau-ui-v2 .gemba-score-item:not(.is-ya):not(.is-tidak):not(.is-na) {
  background: #e5f0f6;
  border-color: var(--p-card-line);
}
body.pantau-ui-v2 .generated-content :is(.generated-status-card, .generated-quality-card, .ae-tone-teal, .ae-tone-green) {
  --p-card-tint: #e6f3f0;
}
body.pantau-ui-v2 .generated-content .generated-kpi-card {
  background: linear-gradient(120deg, #e2eff7, #edf6f4);
}
body.pantau-ui-v2 .generated-card-head h2 > span {
  box-shadow: inset 0 0 0 1px rgba(11, 94, 138, .07);
}
body.pantau-ui-v2 .generated-assistant {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .6), transparent 55%),
    linear-gradient(145deg, #d8f2ee, #bfe8e4);
  border-color: #b4dcd7;
  box-shadow: var(--p-card-shadow);
}

/* Existing KPI tiles inherited two grid columns, squeezing 85% into 3 lines. */
body.pantau-ui-v2 .generated-kpi-row > div {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
}
body.pantau-ui-v2 .generated-kpi-row :is(p, strong, em) { grid-column: 1; }
body.pantau-ui-v2 .generated-kpi-row strong {
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.pantau-ui-v2 .generated-kpi-row :is(p, em) { white-space: normal; }

/* Keep the table search icon and field inside one control. */
body.pantau-ui-v2 .user-directory-toolbar .user-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.pantau-ui-v2 #user-search {
  min-width: 0;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: none;
}
body.pantau-ui-v2 .user-search-field:focus-within {
  outline: 2px solid var(--p-primary);
  outline-offset: 2px;
}

/* Opaque column headers also remain readable when sticky over scrolled rows.
   Use row backgrounds so semantic cell colors retain their own meaning. */
body.pantau-ui-v2 :is(.generated-content, dialog) table {
  background: var(--p-card-base);
  font-variant-numeric: tabular-nums;
}
body.pantau-ui-v2 :is(.generated-content, dialog) table thead :is(th, td) {
  color: #f0f8fc;
  background: var(--p-table-head);
  border-bottom: 2px solid #73b6bd;
  border-right: 1px solid #ffffff18;
  font-weight: 700;
}
body.pantau-ui-v2 :is(.generated-content, dialog) table thead :is(a, button) { color: inherit; }
body.pantau-ui-v2 :is(.generated-content, dialog) table tbody :is(td, th) {
  border-bottom: 1px solid #ccdfe8;
}
/* Row fills leave cell-level heatmap and SLA colors intact. */
body.pantau-ui-v2 :is(.generated-content, dialog) table:not(.mpp-matrix) tbody tr:nth-child(even) {
  background-color: var(--p-table-stripe);
}
body.pantau-ui-v2 :is(.generated-content, dialog) table:not(.mpp-matrix) tbody tr:is(:hover, :focus-within) {
  background-color: var(--p-table-hover);
}
body.pantau-ui-v2 .generated-content .gemba-detail-table tr:hover td { background-color: var(--p-table-hover); }
body.pantau-ui-v2 .generated-content :is(
  .wtwl-table-wrap, .user-table-wrap, .mpp-matrix-wrap,
  .complaint-table-wrap, .cmi-table-wrap, .garda-table-wrap, .faskes-analytics-table-wrap,
  .gemba-detail-table-wrap, .table-wrap, .ae-table-scroll, .pchart-table-scroll
) {
  border: 1px solid var(--p-card-line);
  border-radius: var(--p-radius-sm);
  background: var(--p-card-base);
}

body.pantau-ui-v2.p-scrolled .generated-topbar { background: rgba(234, 241, 245, .95); }

@media (max-width: 600px) {
  body.pantau-ui-v2 .garda-parameters { grid-template-columns: minmax(0, 1fr); }
  body.pantau-ui-v2 .garda-parameters > div { min-width: 0; }
  body.pantau-ui-v2 .garda-parameters :is(dt, dd) { min-width: 0; overflow-wrap: anywhere; }
}

@media print {
  body.pantau-ui-v2 { background: #fff; --p-card-tint: #fff; --p-card-base: #fff; --p-card-shadow: none; }
  body.pantau-ui-v2 :is(.generated-content, dialog) table thead :is(th, td) {
    background: #e5edf1;
    color: #14242e;
  }
}