/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-white: #fff;
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --animate-spin: spin 1s linear infinite;
}
.fixed {
  position: fixed;
}
.sticky {
  position: sticky;
}
.top-0 {
  top: calc(var(--spacing) * 0);
}
.left-0 {
  left: calc(var(--spacing) * 0);
}
.left-\[390px\] {
  left: 390px;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.mt-1 {
  margin-top: calc(var(--spacing) * 1);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}
.mr-3 {
  margin-right: calc(var(--spacing) * 3);
}
.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}
.mb-3 {
  margin-bottom: calc(var(--spacing) * 3);
}
.mb-5 {
  margin-bottom: calc(var(--spacing) * 5);
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-3 {
  height: calc(var(--spacing) * 3);
}
.h-9 {
  height: calc(var(--spacing) * 9);
}
.h-10 {
  height: calc(var(--spacing) * 10);
}
.h-\[42px\] {
  height: 42px;
}
.h-\[66px\] {
  height: 66px;
}
.h-\[180px\] {
  height: 180px;
}
.h-\[210px\] {
  height: 210px;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.min-h-\[48px\] {
  min-height: 48px;
}
.min-h-\[72px\] {
  min-height: 72px;
}
.min-h-\[285px\] {
  min-height: 285px;
}
.min-h-\[360px\] {
  min-height: 360px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-3 {
  width: calc(var(--spacing) * 3);
}
.w-10 {
  width: calc(var(--spacing) * 10);
}
.w-\[135px\] {
  width: 135px;
}
.w-\[250px\] {
  width: 250px;
}
.w-full {
  width: 100%;
}
.max-w-full {
  max-width: 100%;
}
.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}
.min-w-\[78px\] {
  min-width: 78px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[390px\] {
  min-width: 390px;
}
.flex-1 {
  flex: 1;
}
.border-collapse {
  border-collapse: collapse;
}
.animate-spin {
  animation: var(--animate-spin);
}
.cursor-pointer {
  cursor: pointer;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-\[1fr_1fr_1fr_1\.05fr\] {
  grid-template-columns: 1fr 1fr 1fr 1.05fr;
}
.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}
.grid-cols-\[24px_1fr_auto\] {
  grid-template-columns: 24px 1fr auto;
}
.grid-cols-\[92px_1fr\] {
  grid-template-columns: 92px 1fr;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-stretch {
  align-items: stretch;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.gap-6 {
  gap: calc(var(--spacing) * 6);
}
.space-y-4 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-l {
  border-left-style: var(--tw-border-style);
  border-left-width: 1px;
}
.border-l-4 {
  border-left-style: var(--tw-border-style);
  border-left-width: 4px;
}
.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}
.border-\[\#102C4D\] {
  border-color: #102C4D;
}
.border-\[\#AFC8E6\] {
  border-color: #AFC8E6;
}
.border-\[\#C6D0DC\] {
  border-color: #C6D0DC;
}
.border-\[\#C9D3DF\] {
  border-color: #C9D3DF;
}
.border-\[\#CBD5E1\] {
  border-color: #CBD5E1;
}
.border-\[\#D7DFE8\] {
  border-color: #D7DFE8;
}
.border-\[\#D8E0EA\] {
  border-color: #D8E0EA;
}
.border-\[\#D9E1EB\] {
  border-color: #D9E1EB;
}
.border-\[\#E2A72B\] {
  border-color: #E2A72B;
}
.border-amber-200 {
  border-color: var(--color-amber-200);
}
.border-emerald-100 {
  border-color: var(--color-emerald-100);
}
.border-emerald-200 {
  border-color: var(--color-emerald-200);
}
.border-red-100 {
  border-color: var(--color-red-100);
}
.border-red-300 {
  border-color: var(--color-red-300);
}
.border-slate-200 {
  border-color: var(--color-slate-200);
}
.border-slate-300 {
  border-color: var(--color-slate-300);
}
.bg-\[\#1B5C9B\] {
  background-color: #1B5C9B;
}
.bg-\[\#1D426E\] {
  background-color: #1D426E;
}
.bg-\[\#81B982\] {
  background-color: #81B982;
}
.bg-\[\#087D4B\] {
  background-color: #087D4B;
}
.bg-\[\#A6B3C2\] {
  background-color: #A6B3C2;
}
.bg-\[\#E8EDF2\] {
  background-color: #E8EDF2;
}
.bg-\[\#E9EEF4\] {
  background-color: #E9EEF4;
}
.bg-\[\#E9EFF5\] {
  background-color: #E9EFF5;
}
.bg-\[\#EFF6FF\] {
  background-color: #EFF6FF;
}
.bg-\[\#F7F9FC\] {
  background-color: #F7F9FC;
}
.bg-\[\#F9FBFD\] {
  background-color: #F9FBFD;
}
.bg-\[\#FFF9E8\] {
  background-color: #FFF9E8;
}
.bg-amber-50 {
  background-color: var(--color-amber-50);
}
.bg-emerald-50 {
  background-color: var(--color-emerald-50);
}
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-slate-100 {
  background-color: var(--color-slate-100);
}
.bg-slate-300 {
  background-color: var(--color-slate-300);
}
.bg-white {
  background-color: var(--color-white);
}
.p-5 {
  padding: calc(var(--spacing) * 5);
}
.p-8 {
  padding: calc(var(--spacing) * 8);
}
.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}
.py-1 {
  padding-block: calc(var(--spacing) * 1);
}
.py-2 {
  padding-block: calc(var(--spacing) * 2);
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.pt-5 {
  padding-top: calc(var(--spacing) * 5);
}
.pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}
.pl-\[250px\] {
  padding-left: 250px;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[20px\] {
  font-size: 20px;
}
.leading-4 {
  --tw-leading: calc(var(--spacing) * 4);
  line-height: calc(var(--spacing) * 4);
}
.leading-5 {
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.tracking-\[\.04em\] {
  --tw-tracking: .04em;
  letter-spacing: .04em;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.text-\[\#0C8A5B\] {
  color: #0C8A5B;
}
.text-\[\#4F8667\] {
  color: #4F8667;
}
.text-\[\#5A6472\] {
  color: #5A6472;
}
.text-\[\#5B6472\] {
  color: #5B6472;
}
.text-\[\#173E68\] {
  color: #173E68;
}
.text-\[\#26384F\] {
  color: #26384F;
}
.text-\[\#29496C\] {
  color: #29496C;
}
.text-\[\#42536A\] {
  color: #42536A;
}
.text-\[\#53657A\] {
  color: #53657A;
}
.text-\[\#078558\] {
  color: #078558;
}
.text-\[\#596579\] {
  color: #596579;
}
.text-\[\#C45A68\] {
  color: #C45A68;
}
.text-\[\#D51B47\] {
  color: #D51B47;
}
.text-amber-800 {
  color: var(--color-amber-800);
}
.text-emerald-800 {
  color: var(--color-emerald-800);
}
.text-red-700 {
  color: var(--color-red-700);
}
.text-red-800 {
  color: var(--color-red-800);
}
.text-slate-400 {
  color: var(--color-slate-400);
}
.text-slate-500 {
  color: var(--color-slate-500);
}
.text-slate-700 {
  color: var(--color-slate-700);
}
.text-white {
  color: var(--color-white);
}
.shadow-\[0_1px_0_\#D7DFE8\] {
  --tw-shadow: 0 1px 0 var(--tw-shadow-color, #D7DFE8);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.filter {
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
.disabled\:cursor-not-allowed {
  &:disabled {
    cursor: not-allowed;
  }
}
.disabled\:border-slate-300 {
  &:disabled {
    border-color: var(--color-slate-300);
  }
}
.disabled\:bg-slate-300 {
  &:disabled {
    background-color: var(--color-slate-300);
  }
}
.disabled\:opacity-40 {
  &:disabled {
    opacity: 40%;
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
@layer properties;
:root, :host {
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-950: oklch(12.9% 0.042 264.695);
  --color-white: #fff;
  --spacing: 0.25rem;
  --text-xs: 0.75rem;
  --text-xs--line-height: calc(1 / 0.75);
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --radius-sm: 0.25rem;
  --animate-spin: spin 1s linear infinite;
}
.absolute {
  position: absolute;
}
.fixed {
  position: fixed;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: calc(var(--spacing) * 0);
}
.top-0 {
  top: calc(var(--spacing) * 0);
}
.bottom-3 {
  bottom: calc(var(--spacing) * 3);
}
.left-0 {
  left: calc(var(--spacing) * 0);
}
.left-4 {
  left: calc(var(--spacing) * 4);
}
.left-\[390px\] {
  left: 390px;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.mt-1 {
  margin-top: calc(var(--spacing) * 1);
}
.mt-2 {
  margin-top: calc(var(--spacing) * 2);
}
.mt-3 {
  margin-top: calc(var(--spacing) * 3);
}
.mt-4 {
  margin-top: calc(var(--spacing) * 4);
}
.mt-5 {
  margin-top: calc(var(--spacing) * 5);
}
.mr-3 {
  margin-right: calc(var(--spacing) * 3);
}
.mb-1 {
  margin-bottom: calc(var(--spacing) * 1);
}
.ml-auto {
  margin-left: auto;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-2 {
  height: calc(var(--spacing) * 2);
}
.h-8 {
  height: calc(var(--spacing) * 8);
}
.h-9 {
  height: calc(var(--spacing) * 9);
}
.h-10 {
  height: calc(var(--spacing) * 10);
}
.h-\[11px\] {
  height: 11px;
}
.h-\[16px\] {
  height: 16px;
}
.h-\[38px\] {
  height: 38px;
}
.h-\[42px\] {
  height: 42px;
}
.h-\[54px\] {
  height: 54px;
}
.h-\[58px\] {
  height: 58px;
}
.h-\[66px\] {
  height: 66px;
}
.h-\[180px\] {
  height: 180px;
}
.h-\[470px\] {
  height: 470px;
}
.h-full {
  height: 100%;
}
.h-screen {
  height: 100vh;
}
.max-h-\[620px\] {
  max-height: 620px;
}
.max-h-\[720px\] {
  max-height: 720px;
}
.min-h-\[72px\] {
  min-height: 72px;
}
.min-h-\[76px\] {
  min-height: 76px;
}
.min-h-\[130px\] {
  min-height: 130px;
}
.min-h-\[160px\] {
  min-height: 160px;
}
.min-h-\[166px\] {
  min-height: 166px;
}
.min-h-\[285px\] {
  min-height: 285px;
}
.min-h-\[360px\] {
  min-height: 360px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-2 {
  width: calc(var(--spacing) * 2);
}
.w-8 {
  width: calc(var(--spacing) * 8);
}
.w-10 {
  width: calc(var(--spacing) * 10);
}
.w-\[150px\] {
  width: 150px;
}
.w-\[155px\] {
  width: 155px;
}
.w-\[170px\] {
  width: 170px;
}
.w-\[190px\] {
  width: 190px;
}
.w-\[250px\] {
  width: 250px;
}
.w-\[760px\] {
  width: 760px;
}
.w-full {
  width: 100%;
}
.max-w-\[250px\] {
  max-width: 250px;
}
.max-w-\[260px\] {
  max-width: 260px;
}
.max-w-full {
  max-width: 100%;
}
.min-w-0 {
  min-width: calc(var(--spacing) * 0);
}
.min-w-\[78px\] {
  min-width: 78px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[130px\] {
  min-width: 130px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.min-w-\[240px\] {
  min-width: 240px;
}
.min-w-\[390px\] {
  min-width: 390px;
}
.min-w-\[1050px\] {
  min-width: 1050px;
}
.flex-1 {
  flex: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.animate-spin {
  animation: var(--animate-spin);
}
.cursor-pointer {
  cursor: pointer;
}
.resize-none {
  resize: none;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[1fr_1fr_1fr_1\.05fr\] {
  grid-template-columns: 1fr 1fr 1fr 1.05fr;
}
.grid-cols-\[1fr_32px\] {
  grid-template-columns: 1fr 32px;
}
.grid-cols-\[1fr_auto\] {
  grid-template-columns: 1fr auto;
}
.grid-cols-\[24px_1fr_auto\] {
  grid-template-columns: 24px 1fr auto;
}
.grid-cols-\[28px_1fr_auto\] {
  grid-template-columns: 28px 1fr auto;
}
.grid-cols-\[92px_1fr\] {
  grid-template-columns: 92px 1fr;
}
.grid-cols-\[190px_1fr_90px\] {
  grid-template-columns: 190px 1fr 90px;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-start {
  align-items: flex-start;
}
.items-stretch {
  align-items: stretch;
}
.justify-between {
  justify-content: space-between;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.gap-1\.5 {
  gap: calc(var(--spacing) * 1.5);
}
.gap-2 {
  gap: calc(var(--spacing) * 2);
}
.gap-3 {
  gap: calc(var(--spacing) * 3);
}
.gap-4 {
  gap: calc(var(--spacing) * 4);
}
.space-y-1\.5 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.space-y-2 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.space-y-3\.5 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.space-y-4 {
  :where(& > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }
}
.gap-x-5 {
  column-gap: calc(var(--spacing) * 5);
}
.gap-y-3 {
  row-gap: calc(var(--spacing) * 3);
}
.divide-x {
  :where(& > :not(:last-child)) {
    --tw-divide-x-reverse: 0;
    border-inline-style: var(--tw-border-style);
    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
}
.divide-y {
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
}
.divide-slate-200 {
  :where(& > :not(:last-child)) {
    border-color: var(--color-slate-200);
  }
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.rounded-sm {
  border-radius: var(--radius-sm);
}
.border {
  border-style: var(--tw-border-style);
  border-width: 1px;
}
.border-t {
  border-top-style: var(--tw-border-style);
  border-top-width: 1px;
}
.border-t-\[7px\] {
  border-top-style: var(--tw-border-style);
  border-top-width: 7px;
}
.border-t-\[12px\] {
  border-top-style: var(--tw-border-style);
  border-top-width: 12px;
}
.border-r {
  border-right-style: var(--tw-border-style);
  border-right-width: 1px;
}
.border-b {
  border-bottom-style: var(--tw-border-style);
  border-bottom-width: 1px;
}
.border-dashed {
  --tw-border-style: dashed;
  border-style: dashed;
}
.border-\[\#102C4D\] {
  border-color: #102C4D;
}
.border-\[\#AFC8E6\] {
  border-color: #AFC8E6;
}
.border-\[\#C9D3DF\] {
  border-color: #C9D3DF;
}
.border-\[\#CBD5E1\] {
  border-color: #CBD5E1;
}
.border-\[\#D8E0EA\] {
  border-color: #D8E0EA;
}
.border-\[\#D9E1EB\] {
  border-color: #D9E1EB;
}
.border-amber-200 {
  border-color: var(--color-amber-200);
}
.border-emerald-100 {
  border-color: var(--color-emerald-100);
}
.border-emerald-200 {
  border-color: var(--color-emerald-200);
}
.border-red-100 {
  border-color: var(--color-red-100);
}
.border-red-200 {
  border-color: var(--color-red-200);
}
.border-red-300 {
  border-color: var(--color-red-300);
}
.border-slate-200 {
  border-color: var(--color-slate-200);
}
.border-slate-300 {
  border-color: var(--color-slate-300);
}
.border-slate-400 {
  border-color: var(--color-slate-400);
}
.border-white\/10 {
  border-color: color-mix(in srgb, #fff 10%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
  }
}
.bg-\[\#1B5C9B\] {
  background-color: #1B5C9B;
}
.bg-\[\#1D426E\] {
  background-color: #1D426E;
}
.bg-\[\#5C78AF\] {
  background-color: #5C78AF;
}
.bg-\[\#087D4B\] {
  background-color: #087D4B;
}
.bg-\[\#A6B3C2\] {
  background-color: #A6B3C2;
}
.bg-\[\#E8EDF2\] {
  background-color: #E8EDF2;
}
.bg-\[\#E8EEF6\] {
  background-color: #E8EEF6;
}
.bg-\[\#E9EEF4\] {
  background-color: #E9EEF4;
}
.bg-\[\#E9EFF5\] {
  background-color: #E9EFF5;
}
.bg-\[\#EFF6FF\] {
  background-color: #EFF6FF;
}
.bg-\[\#F7F8FA\] {
  background-color: #F7F8FA;
}
.bg-\[\#F7F9FC\] {
  background-color: #F7F9FC;
}
.bg-\[\#F9FBFD\] {
  background-color: #F9FBFD;
}
.bg-amber-50 {
  background-color: var(--color-amber-50);
}
.bg-emerald-50 {
  background-color: var(--color-emerald-50);
}
.bg-red-50 {
  background-color: var(--color-red-50);
}
.bg-slate-300 {
  background-color: var(--color-slate-300);
}
.bg-slate-950\/35 {
  background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 35%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, var(--color-slate-950) 35%, transparent);
  }
}
.bg-white {
  background-color: var(--color-white);
}
.p-0 {
  padding: calc(var(--spacing) * 0);
}
.p-3 {
  padding: calc(var(--spacing) * 3);
}
.p-4 {
  padding: calc(var(--spacing) * 4);
}
.p-5 {
  padding: calc(var(--spacing) * 5);
}
.p-8 {
  padding: calc(var(--spacing) * 8);
}
.px-2 {
  padding-inline: calc(var(--spacing) * 2);
}
.px-3 {
  padding-inline: calc(var(--spacing) * 3);
}
.px-4 {
  padding-inline: calc(var(--spacing) * 4);
}
.px-5 {
  padding-inline: calc(var(--spacing) * 5);
}
.px-6 {
  padding-inline: calc(var(--spacing) * 6);
}
.py-1 {
  padding-block: calc(var(--spacing) * 1);
}
.py-2 {
  padding-block: calc(var(--spacing) * 2);
}
.py-3 {
  padding-block: calc(var(--spacing) * 3);
}
.py-4 {
  padding-block: calc(var(--spacing) * 4);
}
.pb-2 {
  padding-bottom: calc(var(--spacing) * 2);
}
.pb-3 {
  padding-bottom: calc(var(--spacing) * 3);
}
.pb-4 {
  padding-bottom: calc(var(--spacing) * 4);
}
.pl-\[250px\] {
  padding-left: 250px;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-xs {
  font-size: var(--text-xs);
  line-height: var(--tw-leading, var(--text-xs--line-height));
}
.text-\[9px\] {
  font-size: 9px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[26px\] {
  font-size: 26px;
}
.leading-4 {
  --tw-leading: calc(var(--spacing) * 4);
  line-height: calc(var(--spacing) * 4);
}
.leading-5 {
  --tw-leading: calc(var(--spacing) * 5);
  line-height: calc(var(--spacing) * 5);
}
.leading-none {
  --tw-leading: 1;
  line-height: 1;
}
.font-medium {
  --tw-font-weight: var(--font-weight-medium);
  font-weight: var(--font-weight-medium);
}
.font-semibold {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.tracking-\[\.04em\] {
  --tw-tracking: .04em;
  letter-spacing: .04em;
}
.tracking-\[\.05em\] {
  --tw-tracking: .05em;
  letter-spacing: .05em;
}
.tracking-\[\.06em\] {
  --tw-tracking: .06em;
  letter-spacing: .06em;
}
.text-\[\#0C8A5B\] {
  color: #0C8A5B;
}
.text-\[\#4F6077\] {
  color: #4F6077;
}
.text-\[\#4F8667\] {
  color: #4F8667;
}
.text-\[\#173E68\] {
  color: #173E68;
}
.text-\[\#243A55\] {
  color: #243A55;
}
.text-\[\#26384F\] {
  color: #26384F;
}
.text-\[\#27364B\] {
  color: #27364B;
}
.text-\[\#29496C\] {
  color: #29496C;
}
.text-\[\#40516A\] {
  color: #40516A;
}
.text-\[\#44556B\] {
  color: #44556B;
}
.text-\[\#52647A\] {
  color: #52647A;
}
.text-\[\#53657A\] {
  color: #53657A;
}
.text-\[\#078558\] {
  color: #078558;
}
.text-\[\#536177\] {
  color: #536177;
}
.text-\[\#607086\] {
  color: #607086;
}
.text-\[\#C45A68\] {
  color: #C45A68;
}
.text-\[\#D51B47\] {
  color: #D51B47;
}
.text-amber-700 {
  color: var(--color-amber-700);
}
.text-amber-800 {
  color: var(--color-amber-800);
}
.text-emerald-800 {
  color: var(--color-emerald-800);
}
.text-red-600 {
  color: var(--color-red-600);
}
.text-red-800 {
  color: var(--color-red-800);
}
.text-slate-400 {
  color: var(--color-slate-400);
}
.text-slate-500 {
  color: var(--color-slate-500);
}
.text-slate-700 {
  color: var(--color-slate-700);
}
.text-white {
  color: var(--color-white);
}
.shadow-\[0_1px_0_\#D7DFE8\] {
  --tw-shadow: 0 1px 0 var(--tw-shadow-color, #D7DFE8);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.disabled\:cursor-not-allowed {
  &:disabled {
    cursor: not-allowed;
  }
}
.disabled\:border-slate-300 {
  &:disabled {
    border-color: var(--color-slate-300);
  }
}
.disabled\:bg-slate-300 {
  &:disabled {
    background-color: var(--color-slate-300);
  }
}
.disabled\:opacity-40 {
  &:disabled {
    opacity: 40%;
  }
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-space-y-reverse: 0;
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-divide-y-reverse: 0;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}



:root {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #26384f;
  background: #e9eff5;
  --navy: #173e68;
  --navy-dark: #102b4b;
  --orange-gradient: linear-gradient(110deg, #d81b60 0%, #ed4b3e 48%, #f28c28 100%);
  --sidebar-gradient: linear-gradient(180deg, #173e68 0%, #102b4b 100%);
}

* { box-sizing: border-box; }
html, body, #root, button, input, select, textarea, table { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; }
body { margin: 0; min-width: 0; overflow-x: hidden; background: #e9eff5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.sidebar-shell { background: var(--sidebar-gradient); }
.sidebar-nav-button { border: 0; outline: 0; background: transparent; color: #fff; text-decoration: none; transition: background .16s ease, filter .16s ease, border-radius .16s ease; }
.sidebar-nav-button:hover, .sidebar-nav-button:focus-visible, .sidebar-nav-button:active, .sidebar-nav-button.is-active { background: var(--orange-gradient); filter: brightness(.98); }
.sidebar-main-item { width: calc(100% - 20px); margin: 3px 10px; border-radius: 8px; padding-left: 14px; padding-right: 14px; }
.sidebar-sub-item { width: calc(100% - 28px); margin: 3px 0 3px 28px; border-radius: 10px 0 0 10px; padding-left: 15px; padding-right: 14px; }
.sidebar-arrow { flex: none; transition: transform .18s ease; }
.sidebar-arrow.is-open { transform: rotate(90deg); }
.sidebar-subnav { background: transparent; }
.brand-mark { background: var(--orange-gradient); }

.kpi-scrollbar::-webkit-scrollbar { width: 9px; height: 9px; }
.kpi-scrollbar::-webkit-scrollbar-track { background: #eef2f6; }
.kpi-scrollbar::-webkit-scrollbar-thumb { background: #a7b4c3; border: 2px solid #eef2f6; }

.corporate-panel { border: 1px solid #c9d3df; background: #fff; border-radius: 0; }
.control { border: 1px solid #cbd5e1; border-radius: 0; background: #fff; color: #34465c; outline: none; }
.control:focus { border-color: #173e68; box-shadow: 0 0 0 1px #173e68; }
.icon-box, .icon-button { border-radius: 3px; }
.btn-primary { border: 1px solid #173e68; border-radius: 3px; background: #173e68; color: #fff; }
.btn-primary:hover { background: #102b4b; }
.btn-secondary { border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; color: #44566c; }
.btn-secondary:hover { border-color: #173e68; color: #173e68; }
.section-title { font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .03em; color: #293b51; }
.filter-label { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: #596b80; }
.status-ready { border: 1px solid #9adbbf; border-radius: 0; background: #e9f8f1; padding: 1px 5px; font-size: 8px; font-weight: 600; color: #0a8a59; }
.app-shell { width: 100%; max-width: 100vw; overflow-x: hidden; }
.kpi-capture { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.kpi-table { width: max-content; min-width: 100%; }
.kpi-table .kpi-numeric-cell,
.kpi-table .kpi-category-cell { font-size: 14px; font-weight: 700; line-height: 1.25; }
.preventive-table th { border-right: 1px solid #102c4d; padding: 13px 12px; text-align: left; font-weight: 600; white-space: nowrap; }
.preventive-table td { border-right: 1px solid #d7dfe8; border-bottom: 1px solid #d7dfe8; padding: 12px; color: #42536a; vertical-align: middle; white-space: nowrap; }
.preventive-table tbody tr:nth-child(even) td { background: #f7f9fc; }
.preventive-table tbody tr:hover td { background: #edf4fb; }
.preventive-status { display: inline-flex; min-width: 68px; justify-content: center; border: 1px solid; padding: 3px 7px; font-size: 9px; font-weight: 600; }
.preventive-status.is-done { border-color: #9adbbf; background: #e9f8f1; color: #0a8054; }
.preventive-status.is-pending { border-color: #f0c1c7; background: #fff1f2; color: #c63e4e; }
.preventive-info-card { box-sizing: border-box; width: 100%; border: 1px solid #cbd5e1; border-left: 4px solid #173e68; background: #fff; box-shadow: none; }
.preventive-info-card:hover { border-color: #aebdcd; border-left-color: #e27b2b; }
.preventive-info-card[open] { border-left-color: #e27b2b; box-shadow: 0 2px 7px rgba(23,62,104,.10); }
.preventive-card-label { font-size: 8px; line-height: 1.2; font-weight: 600; letter-spacing: .08em; color: #8090a2; }
.preventive-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px; }
.preventive-filter-search { min-width: 250px; flex: 1; margin-left: auto; }
.corporate-panel .punchlist-filter-grid { display:grid!important; grid-template-columns:minmax(320px,1fr) repeat(3,minmax(175px,220px))!important; align-items:end!important; gap:12px!important; border-bottom:1px solid #e2e8f0; padding-bottom:16px; }
.punchlist-filter-search, .punchlist-filter-field { min-width:0; }
.punchlist-filter-grid .control { min-width:0; }
.preventive-card-list { margin-top: 16px; max-height: 620px; overflow: auto; border: 1px solid #cbd5e1; background: #fff; padding: 0; }
.preventive-card-list > * + * { margin-top: 0; border-top: 0; }
.preventive-card-head { display: grid; width: 100%; grid-template-columns: 1fr 1.6fr 1fr 28px; align-items: center; text-align: left; }
.preventive-card-head { cursor: pointer; list-style: none; }
.preventive-card-head::-webkit-details-marker { display: none; }
.preventive-card-section { min-width: 0; padding: 12px 16px; }
.preventive-card-section.with-divider { border-left: 1px solid #d8e0ea; }
.preventive-card-chevron { color: #6b7e93; transition: transform .18s ease; }
.preventive-info-card[open] .preventive-card-chevron { transform: rotate(90deg); }
.preventive-card-details { min-width: 0; border-top: 1px solid #c9d3df; background: #fff; padding: 16px; }
.preventive-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 24px; row-gap: 16px; }
.preventive-detail-grid p { overflow-wrap: anywhere; }
.preventive-notes { min-width: 0; margin-top: 16px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.preventive-notes p:last-child { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.hover-detail-trigger { min-width: 0; cursor: help; outline: none; }
.hover-detail-trigger:focus-visible { box-shadow: 0 0 0 2px rgba(23, 62, 104, .25); }
.hover-detail-box { position: fixed; z-index: 1000; width: max-content; max-width: min(480px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; border: 1px solid #aebdce; border-radius: 6px; background: #fff; box-shadow: 0 12px 30px rgba(15, 35, 60, .2); padding: 12px 14px; color: #26384f; font-size: 11px; font-weight: 400; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; }

@media (max-width: 1100px) {
  .sidebar-shell { width: 220px; }
  .app-shell { padding-left: 220px; }
}



:root {
  font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #26384f;
  background: #e9eff5;
  --navy: #173e68;
  --navy-dark: #102b4b;
  --orange-gradient: linear-gradient(110deg, #d81b60 0%, #ed4b3e 48%, #f28c28 100%);
  --sidebar-gradient: linear-gradient(180deg, #173e68 0%, #102b4b 100%);
}

* { box-sizing: border-box; }
html, body, #root, button, input, select, textarea, table { font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; }
body { margin: 0; min-width: 0; overflow-x: hidden; background: #e9eff5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.sidebar-shell { background: var(--sidebar-gradient); }
.sidebar-brand { height:66px; display:flex; align-items:center; gap:10px; padding:6px 10px; overflow:hidden; background:#fff; color:#173e68; border-top:0; box-shadow:0 1px 0 #d7dfe8; }
.sidebar-brand img { width:38%; min-width:0; height:54px; flex-shrink:0; object-fit:contain; object-position:center; }
.sidebar-brand-copy { display:flex; min-width:0; flex:1; flex-direction:column; padding-left:10px; border-left:2px solid #cbd1d8; line-height:1.15; letter-spacing:.015em; }
.sidebar-brand-copy strong { margin-bottom:3px; font-size:19px; font-weight:800; white-space:nowrap; }
.sidebar-brand-copy span { margin:1px 0; font-size:9px; font-weight:700; }
.sidebar-nav-button { border: 0; outline: 0; background: transparent; color: #fff; text-decoration: none; transition: background .16s ease, filter .16s ease; }
.sidebar-nav-button:hover, .sidebar-nav-button:focus-visible, .sidebar-nav-button:active, .sidebar-nav-button.is-active { background: var(--orange-gradient); filter: brightness(.98); }
.sidebar-arrow { flex: none; transition: transform .18s ease; }
.sidebar-arrow.is-open { transform: rotate(90deg); }
.sidebar-subnav { background: rgba(5, 24, 48, .16); }
.brand-mark { background: var(--orange-gradient); }

.kpi-scrollbar::-webkit-scrollbar { width: 9px; height: 9px; }
.kpi-scrollbar::-webkit-scrollbar-track { background: #eef2f6; }
.kpi-scrollbar::-webkit-scrollbar-thumb { background: #a7b4c3; border: 2px solid #eef2f6; }

.corporate-panel { border: 1px solid #c9d3df; background: #fff; border-radius: 0; }
.control { border: 1px solid #cbd5e1; border-radius: 0; background: #fff; color: #34465c; outline: none; }
.control:focus { border-color: #173e68; box-shadow: 0 0 0 1px #173e68; }
.icon-box, .icon-button { border-radius: 3px; }
.btn-primary { border: 1px solid #173e68; border-radius: 3px; background: #173e68; color: #fff; }
.btn-primary:hover { background: #102b4b; }
.btn-secondary { border: 1px solid #cbd5e1; border-radius: 3px; background: #fff; color: #44566c; }
.btn-secondary:hover { border-color: #173e68; color: #173e68; }
.section-title { font-size: 14px; line-height: 1.4; font-weight: 600; letter-spacing: .03em; color: #293b51; }
.filter-label { flex: none; font-size: 10px; font-weight: 600; letter-spacing: .03em; color: #596b80; }
.status-ready { border: 1px solid #9adbbf; border-radius: 0; background: #e9f8f1; padding: 1px 5px; font-size: 8px; font-weight: 600; color: #0a8a59; }
.app-shell { width: 100%; max-width: 100vw; height:100vh; overflow:hidden; }
.app-shell > header { position:relative; z-index:30; }
.app-shell > main { height:calc(100vh - 66px); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.sidebar-shell { overflow:hidden; }
.kpi-capture { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.kpi-table { width: max-content; min-width: 100%; }
.kpi-table thead th { border-color:#c6d0dc; }
.kpi-table tbody td:first-child,
.kpi-table thead th[rowspan]:first-child { width:390px; min-width:390px; max-width:390px; white-space:normal; overflow-wrap:break-word; text-align:center; vertical-align:middle; }
.kpi-table tbody td:nth-child(2),
.kpi-table thead th[rowspan]:nth-child(2) { width:78px; min-width:78px; max-width:78px; }
.kpi-table .kpi-numeric-cell,
.kpi-table .kpi-category-cell { font-size: 12px; font-weight: 700; line-height: 1.25; }
.kpi-table th,
.kpi-table td:not(.kpi-numeric-cell):not(.kpi-category-cell) { font-size:12px; font-weight:700; line-height:1.25; }
.kpi-table.is-capturing th,
.kpi-table.is-capturing tbody td:first-child { height:auto; min-height:38px; padding-top:9px; padding-bottom:9px; font-size:14px; line-height:18px; white-space:normal; overflow-wrap:break-word; }
.kpi-nop-link{display:block;width:100%;padding:12px;color:#fff;font:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;cursor:pointer}
.kpi-nop-link:hover,.kpi-nop-link:focus-visible{background:#285486;text-decoration-color:#fff;outline:none}
.kpi-nop-detail{padding:22px}.kpi-nop-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:18px;padding-bottom:20px;border-bottom:1px solid #d6dee8}.kpi-nop-detail-head h2{margin:4px 0 6px;color:#173e68;font-size:25px;font-weight:700}.kpi-nop-detail-head p{color:#7d8ca1;font-size:11px}.kpi-nop-score{min-width:150px;border-left:4px solid #173e68;background:#f2f6fa;padding:12px 16px}.kpi-nop-score span,.kpi-nop-score small{display:block;color:#73839a;font-size:9px;font-weight:600}.kpi-nop-score strong{display:block;margin:3px 0;color:#173e68;font-size:25px}.kpi-mttr-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.kpi-mttr-summary article{border-top:4px solid #c87519;background:#f7f9fc;padding:14px}.kpi-mttr-summary article.is-green{border-color:#32936f}.kpi-mttr-summary article.is-red{border-color:#c4585d}.kpi-mttr-summary article.is-navy{border-color:#294d78}.kpi-mttr-summary span,.kpi-mttr-summary small{display:block;color:#7b899d;font-size:9px;font-weight:600}.kpi-mttr-summary strong{display:block;margin:5px 0;color:#26384f;font-size:22px}.kpi-mttr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kpi-mttr-card{border:1px solid #d8e0e9;background:#fff;padding:16px}.kpi-mttr-card header{display:flex;align-items:flex-start;justify-content:space-between}.kpi-mttr-card header span{color:#8390a1;font-size:9px;font-weight:700;letter-spacing:.09em}.kpi-mttr-card h3{margin-top:3px;color:#26384f;font-size:17px;font-weight:700}.kpi-mttr-card header b{padding:5px 8px;font-size:9px}.kpi-mttr-card.is-achieved header b{background:#daf0e5;color:#267452}.kpi-mttr-card.is-review header b{background:#f8dddd;color:#a53e45}.kpi-mttr-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.kpi-mttr-values div{border-left:3px solid #d5dde7;padding-left:10px}.kpi-mttr-values span{display:block;color:#8090a4;font-size:9px}.kpi-mttr-values strong{display:block;margin-top:3px;color:#173e68;font-size:18px}.kpi-mttr-track{position:relative;height:8px;margin:18px 0 10px;background:#e9eef4}.kpi-mttr-track i{display:block;height:100%;background:#81b982}.kpi-mttr-track em{position:absolute;top:-4px;width:3px;height:16px;background:#c4585d;transform:translateX(-2px)}.kpi-mttr-card p{min-height:17px;color:#64758a;font-size:10px}.kpi-mttr-card footer{display:flex;gap:16px;margin-top:14px;padding-top:10px;border-top:1px solid #e0e6ed;color:#53657a;font-size:9px;font-weight:600}.kpi-nop-empty{margin-top:18px;border:1px dashed #c8d2de;background:#f8fafc;padding:36px;text-align:center;color:#6f7f93}.kpi-nop-empty strong{display:block;margin-bottom:7px;color:#31445d;font-size:14px}.kpi-nop-empty p{font-size:10px}
.kpi-nop-count{min-width:130px;border-left:4px solid #c87519;background:#f5f8fb;padding:11px 15px}.kpi-nop-count strong,.kpi-nop-count span{display:block}.kpi-nop-count strong{color:#173e68;font-size:24px;line-height:1}.kpi-nop-count span{margin-top:5px;color:#7a899d;font-size:9px;font-weight:600}.kpi-improvement-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:20px;margin-top:18px;border-bottom:1px solid #e2e8f0;padding:0 0 16px;background:#fff}.kpi-improvement-filters>div{display:grid;min-width:0;gap:4px}.kpi-improvement-filters .control{height:36px;width:100%;min-width:0;padding:0 12px;font-size:10px;font-weight:600}.kpi-nop-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.kpi-nop-card{min-width:0;border:1px solid #d4dee9;border-top:5px solid #294d78;background:#fff}.kpi-nop-card:nth-child(3n+2){border-top-color:#c87519}.kpi-nop-card:nth-child(3n){border-top-color:#32936f}.kpi-nop-card[open]{grid-column:1/-1}.kpi-nop-card>summary{display:grid;grid-template-columns:minmax(145px,1.15fr) minmax(110px,.55fr) minmax(155px,.9fr) 20px;align-items:center;gap:15px;min-height:116px;padding:16px;cursor:pointer;list-style:none}.kpi-nop-card>summary::-webkit-details-marker{display:none}.kpi-nop-card>summary:hover{background:#f7f9fc}.kpi-nop-card[open]>summary{border-bottom:1px solid #d8e0e9;background:#f3f7fb}.kpi-nop-card-name span{color:#7a899c;font-size:9px;font-weight:700;letter-spacing:.05em}.kpi-nop-card-name h3{margin:4px 0;color:#173e68;font-size:17px;font-weight:700}.kpi-nop-card-name small{color:#91a0b1;font-size:9px}.kpi-nop-card-stat{min-height:58px;border-left:3px solid #d7e0e9;padding-left:12px}.kpi-nop-card-stat span,.kpi-nop-card-stat small{display:block;color:#7c8b9f;font-size:8px;font-weight:600}.kpi-nop-card-stat strong{display:block;margin:5px 0;color:#26384f;font-size:15px}.kpi-nop-card-stat b{display:inline-block;min-width:26px;padding:3px 7px;color:#fff;font-size:9px;text-align:center}.kpi-nop-card>summary>i{color:#728197;font-size:19px;font-style:normal;transition:transform .18s}.kpi-nop-card[open]>summary>i{transform:rotate(180deg)}.kpi-nop-card-body{padding:18px;background:#fbfcfe}.kpi-nop-card-body-head{display:flex;align-items:end;justify-content:space-between;gap:20px}.kpi-nop-card-body-head span,.kpi-nop-card-body-head strong{display:block}.kpi-nop-card-body-head span{color:#c87519;font-size:9px;font-weight:800;letter-spacing:.08em}.kpi-nop-card-body-head strong{margin-top:4px;color:#26384f;font-size:14px}.kpi-nop-card-body-head small{color:#8593a5;font-size:9px}
.preventive-table th { border-right: 1px solid #102c4d; padding: 13px 12px; text-align: left; font-weight: 600; white-space: nowrap; }
.preventive-table td { border-right: 1px solid #d7dfe8; border-bottom: 1px solid #d7dfe8; padding: 12px; color: #42536a; vertical-align: middle; white-space: nowrap; }
.preventive-table tbody tr:nth-child(even) td { background: #f7f9fc; }
.preventive-table tbody tr:hover td { background: #edf4fb; }
.preventive-status { display: inline-flex; min-width: 68px; justify-content: center; border: 1px solid; padding: 3px 7px; font-size: 9px; font-weight: 600; }
.preventive-status.is-done { border-color: #9adbbf; background: #e9f8f1; color: #0a8054; }
.preventive-status.is-pending { border-color: #f0c1c7; background: #fff1f2; color: #c63e4e; }
.preventive-info-card { box-sizing: border-box; width: 100%; border: 1px solid #cbd5e1; border-left: 4px solid #173e68; background: #fff; box-shadow: none; }
.preventive-info-card:hover { border-color: #aebdcd; border-left-color: #e27b2b; }
.preventive-info-card[open] { border-left-color: #e27b2b; box-shadow: 0 2px 7px rgba(23,62,104,.10); }
.preventive-card-label { font-size: 8px; line-height: 1.2; font-weight: 600; letter-spacing: .08em; color: #8090a2; }
.preventive-filter-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; border-bottom: 1px solid #e2e8f0; padding-bottom: 16px; }
.preventive-filter-search { min-width: 250px; flex: 1; margin-left: auto; }
.preventive-card-list { margin-top: 16px; max-height: 620px; overflow: auto; border: 1px solid #cbd5e1; background: #fff; padding: 0; }
.preventive-card-list > * + * { margin-top: 0; border-top: 0; }
.preventive-card-head { display: grid; width: 100%; grid-template-columns: 1fr 1.6fr 1fr 28px; align-items: center; text-align: left; }
.preventive-card-head { cursor: pointer; list-style: none; }
.preventive-card-head::-webkit-details-marker { display: none; }
.preventive-card-section { min-width: 0; padding: 12px 16px; }
.preventive-card-section.with-divider { border-left: 1px solid #d8e0ea; }
.preventive-card-chevron { color: #6b7e93; transition: transform .18s ease; }
.preventive-info-card[open] .preventive-card-chevron { transform: rotate(90deg); }
.preventive-card-details { min-width: 0; border-top: 1px solid #c9d3df; background: #fff; padding: 16px; }
.preventive-detail-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); column-gap: 24px; row-gap: 16px; }
.preventive-detail-grid p { overflow-wrap: anywhere; }
.preventive-notes { min-width: 0; margin-top: 16px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.preventive-notes p:last-child { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 1100px) {
  .sidebar-shell { width: 220px; }
  .app-shell { padding-left: 220px; }
}
.kpi-nop-focus{margin-top:18px;border:1px solid #d8e0e9;background:#f8fafc;padding:16px}.kpi-nop-focus .kpi-mttr-card{background:#fff}.kpi-nop-focus .kpi-sheet-simulation{margin:14px 0 0;border:0;border-top:1px solid #d8e0e9;background:transparent;padding:16px 0 0}.kpi-nop-focus .kpi-sheet-simulation h3{color:#26384f;font-size:13px;font-weight:700}.kpi-nop-focus .kpi-mttr-card footer{display:none}
.kpi-ticket-upload{max-width:560px;margin:18px auto 0;padding:14px;border:1px solid #d8e0e9;background:#fff;text-align:left}.kpi-ticket-upload p{margin:0 0 11px;color:#64758a;font-size:10px;line-height:1.55}.kpi-ticket-upload>div{display:flex;gap:8px}.kpi-ticket-upload .btn-secondary,.kpi-ticket-upload .btn-primary{display:flex;min-height:34px;align-items:center;padding:0 11px;font-size:10px;font-weight:700}.kpi-ticket-upload .btn-secondary{max-width:330px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.kpi-ticket-upload small{display:block;margin-top:9px;color:#b23b42;font-size:10px}
.kpi-b-component-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.kpi-b-component{min-width:0;border:1px solid #d7e0ea;border-top:4px solid #294d78;background:#fff}.kpi-b-component:nth-child(3n+2){border-top-color:#c87519}.kpi-b-component:nth-child(3n){border-top-color:#32936f}.kpi-b-component[open]{grid-column:1/-1}.kpi-b-component>summary{display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:center;gap:14px;min-height:96px;padding:14px 16px;cursor:pointer;list-style:none}.kpi-b-component>summary::-webkit-details-marker{display:none}.kpi-b-component>summary:hover{background:#f7f9fc}.kpi-b-component[open]>summary{min-height:76px;border-bottom:1px solid #d7e0ea;background:#f3f7fb}.kpi-b-component>summary>div:first-child span{display:block;margin-bottom:5px;color:#c87519;font-size:9px;font-weight:800;letter-spacing:.08em}.kpi-b-component>summary>div:first-child strong{display:block;color:#26384f;font-size:11px;line-height:1.45}.kpi-b-component-score{border-left:3px solid #294d78;padding-left:10px}.kpi-b-component-score b,.kpi-b-component-score small{display:block}.kpi-b-component-score b{color:#173e68;font-size:18px}.kpi-b-component-score small{color:#8390a1;font-size:8px}.kpi-b-component-body{padding:16px;background:#fff}.kpi-b-component-body .kpi-sheet-simulation{margin:0;border:0;padding:0}.kpi-severity-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}.kpi-severity-card{border:1px solid #d7e0ea;background:#f8fafc}.kpi-severity-card.is-needed{border-top:4px solid #c4585d}.kpi-severity-card.is-complete{border-top:4px solid #32936f}.kpi-severity-card>summary{display:flex;min-height:68px;align-items:center;justify-content:space-between;gap:10px;padding:12px;cursor:pointer;list-style:none}.kpi-severity-card>summary::-webkit-details-marker{display:none}.kpi-severity-card>summary span{color:#617287;font-size:10px;font-weight:700}.kpi-severity-card>summary strong{color:#173e68;font-size:15px}.kpi-severity-card>div{border-top:1px solid #d7e0ea;background:#fff;padding:11px}.kpi-severity-card>div p{margin:0 0 5px;color:#64758a;font-size:9px;line-height:1.45}.kpi-severity-card>div p:last-child{margin:8px 0 0;color:#33475f}.kpi-b-source-status{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:18px}.kpi-b-source-status>div{border-left:4px solid #c87519;background:#f7f9fc;padding:12px}.kpi-b-source-status span,.kpi-b-source-status strong{display:block}.kpi-b-source-status span{color:#8090a4;font-size:9px}.kpi-b-source-status strong{margin-top:4px;color:#173e68;font-size:20px}.kpi-b-source-status p{color:#64758a;font-size:10px;line-height:1.6}.kpi-improvement-filter-action{display:grid;gap:5px}.kpi-improvement-filter-action .filter-label{display:block}
@media(max-width:1100px){.kpi-nop-card-grid{grid-template-columns:1fr}.kpi-nop-card[open]{grid-column:auto}.kpi-b-component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kpi-b-component[open]{grid-column:1/-1}.kpi-severity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kpi-sheet-simulation{margin-top:18px;border:1px solid #d8e0e9;background:#f8fafc;padding:18px}.kpi-sheet-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;padding-bottom:14px;border-bottom:1px solid #d8e0e9}.kpi-sheet-heading h3{margin-top:4px;color:#26384f;font-size:15px;font-weight:700}.kpi-sheet-heading>p{max-width:510px;color:#75859a;font-size:9px;line-height:1.7}.kpi-simulation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}.kpi-simulation-grid article{border-left:4px solid #77ad86;background:#fff;padding:12px}.kpi-simulation-grid article.is-needed{border-color:#c4585d}.kpi-simulation-grid span,.kpi-simulation-grid small{display:block;color:#77869a;font-size:9px}.kpi-simulation-grid strong{display:block;margin:4px 0;color:#26384f;font-size:17px}.kpi-ticket-priority{margin-top:14px;border:1px solid #d8e0e9;background:#fff}.kpi-ticket-priority-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #d8e0e9}.kpi-ticket-priority-head h4{color:#26384f;font-size:11px;font-weight:700}.kpi-ticket-priority-head span{color:#8290a3;font-size:9px}.kpi-ticket-priority table{width:100%;border-collapse:collapse;font-size:9px}.kpi-ticket-priority th{background:#294d78;color:#fff;text-align:left;font-weight:600;padding:9px 12px}.kpi-ticket-priority td{border-bottom:1px solid #e1e6ed;color:#43546a;padding:9px 12px}.kpi-ticket-priority tbody tr:last-child td{border-bottom:0}@media(max-width:900px){.kpi-mttr-summary,.kpi-simulation-grid{grid-template-columns:repeat(2,1fr)}.kpi-mttr-grid{grid-template-columns:1fr}.kpi-sheet-heading{align-items:flex-start;flex-direction:column;gap:8px}}
.kpi-nop-detail{position:fixed;inset:66px 0 0 250px;z-index:45;overflow:auto;background:#fff;box-shadow:0 -1px 0 #d7dfe8}
.data-upload-page{position:fixed;inset:66px 0 0 250px;z-index:35;overflow:auto;background:#e9eff5;padding:20px}.sidebar-external{gap:10px}.sidebar-external small{color:#a9bdd5;font-size:7px;font-weight:700;letter-spacing:.08em}.upload-center-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.upload-center-tabs button{min-height:42px;white-space:normal;line-height:1.25}
.kpi-nop-card-grid{grid-template-columns:1fr}.kpi-nop-card[open]{grid-column:auto}.kpi-b-simple-list{display:grid;gap:10px;margin-top:16px}.kpi-b-simple{border:1px solid #d8e0e9;background:#fff}.kpi-b-simple>header{display:grid;grid-template-columns:1fr 120px;align-items:center;gap:16px;padding:12px 14px;background:#f4f7fa;border-bottom:1px solid #d8e0e9}.kpi-b-simple>header span,.kpi-b-simple>header strong,.kpi-b-simple>header b,.kpi-b-simple>header small{display:block}.kpi-b-simple>header span{color:#c87519;font-size:9px;font-weight:800}.kpi-b-simple>header strong{margin-top:3px;color:#26384f;font-size:11px}.kpi-b-simple>header>div:last-child{border-left:3px solid #294d78;padding-left:12px}.kpi-b-simple>header b{color:#173e68;font-size:17px}.kpi-b-simple>header small{color:#8390a1;font-size:8px}.kpi-b-simple-severity{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.kpi-b-simple-severity>div{min-height:82px;border-right:1px solid #e0e6ed;padding:12px}.kpi-b-simple-severity>div:last-child{border-right:0}.kpi-b-simple-severity span,.kpi-b-simple-severity strong,.kpi-b-simple-severity small{display:block}.kpi-b-simple-severity span{color:#718196;font-size:9px;font-weight:700}.kpi-b-simple-severity strong{margin:5px 0;color:#26384f;font-size:14px}.kpi-b-simple-severity small{color:#8290a2;font-size:8px;line-height:1.45}.kpi-b-simple-severity .needs-work{border-top:3px solid #c4585d}.kpi-b-simple-severity .achieved{border-top:3px solid #32936f}.kpi-b-simple-severity .unavailable{border-top:3px solid #aab5c2;background:#f8fafc}.kpi-b-simple-empty{margin:0;padding:16px;color:#7b899b;font-size:9px}

/* ==== Peningkatan KPI NOP: redesain card (mengikuti tema Preventive Management Dashboard) ==== */
.kpi-nop-improve-list{margin-top:18px}
.kpi-nop-improve-card{margin-top:0}
.kpi-nop-improve-head{grid-template-columns:100px 1.15fr 90px 1.3fr 1.35fr 20px}
.kpi-nop-improve-details{background:#fbfcfe}
.sidebar-links-bottom{position:absolute;right:0;bottom:10px;left:0;border-top:1px solid rgba(255,255,255,.14);padding-top:8px}
.kpi-b-component-grid{grid-template-columns:1fr}
.kpi-b-component[open]{grid-column:auto}
.kpi-nop-improve-head{grid-template-columns:175px 1.35fr 110px 1fr 20px}
.kpi-b-list-caption{margin:0 0 14px;color:#75859a;font-size:10px;line-height:1.6}
.kpi-category-tag{display:inline-block;margin-left:6px;padding:2px 8px;color:#fff;font-size:10px;border-radius:2px}
.kpi-status-tag{display:inline-block;padding:5px 8px;font-size:9px;border-radius:2px}
.kpi-status-tag.is-achieved{background:#daf0e5;color:#267452}
.kpi-status-tag.is-review{background:#f8dddd;color:#a53e45}
.kpi-mttr-empty{margin-top:16px;color:#7b899b;font-size:10px;line-height:1.6}
.kpi-mttr-note{margin-top:12px;padding-top:10px;border-top:1px solid #e0e6ed;color:#8390a1;font-size:9px;line-height:1.6}
.kpi-need-block{margin-top:16px;padding-top:16px;border-top:1px solid #d8e0e9}
.kpi-affected-sites{margin-top:12px;border-top:1px solid #e0e6ed;padding-top:10px;color:#53657a;font-size:9px;line-height:1.55}.kpi-affected-sites>span{display:block;color:#a53e45;font-size:9px;font-weight:700;letter-spacing:.04em}.kpi-affected-sites ul{margin:6px 0 0;padding-left:16px}.kpi-affected-sites li{margin:2px 0}.kpi-affected-sites b{color:#26384f}.kpi-affected-sites details{margin-top:7px}.kpi-affected-sites summary{cursor:pointer;color:#173e68;font-weight:700}.kpi-affected-sites details ul{margin-top:5px}
.kpi-focus-subtitle{margin:0 0 4px;color:#26384f;font-size:12px}

/* ==== Peningkatan KPI NOP: navigasi satu tingkat dan tipografi yang mudah dipindai ==== */
.kpi-nop-detail{font-weight:500}
.kpi-nop-detail h2,.kpi-nop-detail h3,.kpi-nop-detail strong,.kpi-nop-detail b,.kpi-nop-detail button,.kpi-nop-detail label,.kpi-nop-detail .preventive-card-label,.kpi-nop-detail .pm-site-work-value{font-weight:600}
.kpi-nop-detail .kpi-num{font-weight:700}
.kpi-nop-detail-head h2{font-weight:600}
.kpi-improvement-back{font-size:12px!important;font-weight:600!important;letter-spacing:.01em}
.kpi-b-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid #cad5e2;background:#edf2f7}
.kpi-b-tabs button{min-height:42px;border:0;border-right:1px solid #cad5e2;background:transparent;color:#65758a;font-size:11px;font-weight:600;cursor:pointer}
.kpi-b-tabs button:last-child{border-right:0}.kpi-b-tabs button:hover{background:#e4ebf3;color:#24466f}.kpi-b-tabs button.is-active{background:#24466f;color:#fff}
.kpi-b-tab-heading{display:grid;grid-template-columns:55px minmax(0,1fr) auto;align-items:center;gap:14px;border:1px solid #d5dde7;border-top:0;background:#fff;padding:12px 14px;color:#26384f}
.kpi-b-tab-heading>span{color:#c87519;font-size:10px;font-weight:700}.kpi-b-tab-heading>strong{font-size:11px;font-weight:600}.kpi-b-tab-heading>small{white-space:nowrap;color:#6f7f93;font-size:9px;font-weight:500}
.kpi-b-component-body{border:1px solid #d5dde7;border-top:0;padding:14px;background:#fbfcfe}
.kpi-simulation-grid article small{display:block;margin-top:7px;color:#607086;font-size:9px;font-weight:500;line-height:1.55}
.kpi-simulation-grid article small b{font-weight:600}
.kpi-boosting-summary{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 14px;border-left:4px solid #24466f;background:#f4f7fb;padding:14px 16px;color:#26384f}
.kpi-boosting-summary>span{font-size:9px;font-weight:700;letter-spacing:.09em;color:#72839a}.kpi-boosting-summary>strong{font-size:14px}.kpi-boosting-summary>p{grid-column:1/-1;margin:2px 0 0;font-size:10px;color:#607086}
.kpi-boosting-empty{margin:0;border:1px solid #b9ddc8;background:#f1faf5;padding:12px 14px;font-size:10px;color:#267148}
.kpi-boosting-detail{margin-top:14px;border:1px solid #d5dde7;background:#fff}.kpi-boosting-detail>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;border-bottom:1px solid #d5dde7;background:#f7f9fc}.kpi-boosting-detail>header div{display:flex;align-items:center;gap:12px}.kpi-boosting-detail>header span{font-size:9px;font-weight:700;letter-spacing:.06em;color:#72839a}.kpi-boosting-detail>header strong{font-size:12px;color:#26384f}.kpi-boosting-detail>header p{margin:0;font-size:10px;color:#607086}
.kpi-boosting-table-wrap{max-height:360px;overflow:auto}.kpi-boosting-table-wrap table{width:100%;min-width:1080px;border-collapse:collapse;font-size:9px}.kpi-boosting-table-wrap th{position:sticky;top:0;z-index:1;background:#24466f;color:#fff;text-align:left;font-weight:600;padding:9px 10px}.kpi-boosting-table-wrap td{border-bottom:1px solid #e1e6ed;padding:8px 10px;color:#405269;white-space:nowrap}.kpi-boosting-table-wrap tbody tr:nth-child(even){background:#f8fafc}

/* KPI NOP improvement readability and single-level tabs */
.kpi-nop-detail{font-weight:500}
.kpi-nop-detail-head h2{font-size:25px;font-weight:600;line-height:1.25}
.kpi-nop-detail-head>div:first-child>p,.kpi-nop-detail .kpi-mttr-card p,.kpi-nop-detail .kpi-boosting-summary>p,.kpi-nop-detail .kpi-simulation-grid article small,.kpi-nop-detail .kpi-b-tab-heading>small{font-weight:600}
.kpi-improvement-back{display:inline-flex;align-items:center;gap:9px;font-size:13px!important;font-weight:600!important;line-height:1.2}
.kpi-improvement-back>span{font-size:24px!important;font-weight:600;line-height:1}
.kpi-nop-improve-head{grid-template-columns:minmax(240px,1.5fr) minmax(180px,1.15fr) minmax(125px,.7fr) minmax(180px,.9fr) 24px}
.kpi-nop-improve-head>.preventive-card-section:first-child{min-width:240px}
.kpi-nop-improve-head>.preventive-card-section:first-child .pm-site-work-value{white-space:nowrap;overflow:visible;text-overflow:clip}
.kpi-nop-improve-head .preventive-card-label,.kpi-nop-improve-head .pm-site-work-value{font-weight:600}
.kpi-b-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;overflow:visible}
.kpi-b-tabs button{min-height:44px;font-size:12px;font-weight:600;white-space:nowrap}
.kpi-b-tab-heading>span,.kpi-b-tab-heading>strong{font-weight:600}
.kpi-mttr-card header span,.kpi-mttr-values span,.kpi-status-tag,.kpi-focus-subtitle,.kpi-simulation-grid article>span{font-weight:600}
@media(max-width:1050px){.kpi-nop-improve-head{grid-template-columns:minmax(205px,1.4fr) minmax(150px,1fr) 115px minmax(145px,.8fr) 22px}.kpi-nop-improve-head>.preventive-card-section:first-child{min-width:205px}}
.kpi-improvement-filters{display:flex;flex-direction:column;align-items:stretch;gap:14px}
.kpi-improvement-filter-date-row,.kpi-improvement-filter-secondary-row,.kpi-improvement-filter-monthly-row{display:grid!important;align-items:end;gap:16px}
.kpi-improvement-filter-date-row{grid-template-columns:repeat(2,minmax(220px,320px));justify-content:start}
.kpi-improvement-filter-secondary-row{grid-template-columns:minmax(220px,320px) minmax(220px,320px) max-content;justify-content:start}
.kpi-improvement-filter-monthly-row{grid-template-columns:minmax(200px,280px) minmax(200px,280px) minmax(185px,230px) minmax(0,1fr);justify-content:start}
.kpi-improvement-filter-date-row>div,.kpi-improvement-filter-secondary-row>div,.kpi-improvement-filter-monthly-row>div{display:grid;gap:4px}
.kpi-improvement-export-actions{align-self:end;justify-self:end}
.kpi-export-all-button,.kpi-nop-export-button{display:inline-flex;height:36px;align-items:center;gap:5px;padding:0 10px!important;background:#18864b!important;border-color:#18864b!important;color:#fff!important;font-size:10px!important;font-weight:600;line-height:1.2}.kpi-export-all-button:hover,.kpi-nop-export-button:hover{background:#126c3c!important;border-color:#126c3c!important}
.kpi-closing-period{display:flex;align-items:center;gap:9px;margin-top:10px;color:#5b6d82;font-size:10px}.kpi-closing-period b{color:#173e68}.kpi-closing-period span{color:#8090a4}
.source-upload-period{display:grid;gap:4px}.source-upload-period label{font-size:9px;font-weight:600;letter-spacing:.05em;color:#53657a}.source-upload-period .control{height:36px;min-width:220px;font-size:10px}.source-upload-note{grid-column:1/-1;margin:0;color:#718198;font-size:10px;line-height:1.45}
@media(max-width:760px){.kpi-improvement-filter-date-row,.kpi-improvement-filter-secondary-row,.kpi-improvement-filter-monthly-row{grid-template-columns:1fr}.kpi-improvement-export-actions{align-self:stretch}.kpi-export-all-button{justify-content:center}}

/* Responsive layout: tablet dan ponsel */
@media (max-width: 1180px) {
  .kpi-nop-detail, .data-upload-page { left:220px; }
  .upload-center-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .kpi-nop-improve-head { grid-template-columns:minmax(160px,1.3fr) minmax(130px,1fr) 88px minmax(120px,.8fr) 22px; }
  .kpi-table tbody td:first-child, .kpi-table thead th[rowspan]:first-child { width:280px; min-width:280px; max-width:280px; }
}

@media (max-width: 820px) {
  .app-shell > main { padding:14px!important; }
  .kpi-nop-detail, .data-upload-page { padding:14px; }
  .upload-center-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-improvement-filter-date-row, .kpi-improvement-filter-secondary-row, .kpi-improvement-filter-monthly-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .kpi-improvement-export-actions { justify-self:stretch; }
  .kpi-export-all-button { width:100%; justify-content:center; }
  .kpi-nop-improve-head { grid-template-columns:minmax(0,1fr) 24px; }
  .kpi-nop-improve-head .preventive-card-section { grid-column:1; border-left:0!important; padding:9px 12px; }
  .kpi-nop-improve-head .preventive-card-chevron { grid-column:2; grid-row:1 / span 4; align-self:center; }
  .kpi-b-tab-heading { grid-template-columns:42px minmax(0,1fr); }
  .kpi-b-tab-heading small { grid-column:1 / -1; white-space:normal; }
  .kpi-mttr-grid, .kpi-mttr-summary, .kpi-simulation-grid, .kpi-b-simple-severity { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preventive-detail-grid { grid-template-columns:1fr; }
  .preventive-filter-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .corporate-panel .punchlist-filter-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  .punchlist-filter-search { grid-column:1 / -1; }
  .kpi-capture, .kpi-boosting-table-wrap, .preventive-table { overflow-x:auto; }
  .kpi-capture { position:relative; padding-bottom:8px; }
  .kpi-capture .kpi-scrollbar { overflow-x:auto!important; overscroll-behavior-x:contain; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; }
  .kpi-table thead th:not([rowspan]), .kpi-table tbody td:nth-child(n+3) { min-width:96px!important; }
  .kpi-table tbody td:nth-child(2), .kpi-table thead th[rowspan]:nth-child(2) { left:280px!important; }
}

@media (max-width: 640px) {
  .sidebar-shell { width:64px!important; }
  .app-shell { padding-left:64px!important; }
  .kpi-nop-detail, .data-upload-page { left:64px; top:66px; padding:10px; }
  .sidebar-brand { padding:6px; justify-content:center; }
  .sidebar-brand img { width:100%; height:46px; }
  .sidebar-brand-copy, .sidebar-external small { display:none; }
  .sidebar-main-item { width:calc(100% - 8px); min-height:48px; height:auto!important; margin:3px 4px; padding:5px 3px!important; justify-content:center; text-align:center!important; font-size:7px!important; line-height:1.25!important; white-space:normal; }
  .sidebar-main-item:has(.sidebar-arrow) { flex-direction:column; gap:1px!important; }
  .sidebar-subnav { position:fixed; top:165px; left:64px; width:172px; padding:5px 0; background:#173e68; box-shadow:4px 6px 14px rgba(16,42,70,.22); }
  .sidebar-sub-item { width:100%; height:auto!important; min-height:38px; margin:0; border-radius:0; padding:8px 12px; font-size:10px!important; }
  .sidebar-links-bottom { display:none; }
  .app-shell > header > div { padding-left:14px!important; padding-right:14px!important; }
  .app-shell > header h1 { font-size:15px!important; }
  .app-shell > main { padding:10px!important; }
  .app-shell > main > div > .grid { grid-template-columns:1fr!important; }
  .corporate-panel { padding:12px!important; }
  .source-upload-form, .kpi-ticket-upload>div { flex-direction:column; align-items:stretch; }
  .source-file-picker, .kpi-ticket-upload .btn-secondary { max-width:none!important; width:100%; }
  .upload-center-tabs { grid-template-columns:1fr; }
  .kpi-improvement-filter-date-row, .kpi-improvement-filter-secondary-row, .kpi-improvement-filter-monthly-row, .preventive-filter-row, .corporate-panel .punchlist-filter-grid { grid-template-columns:1fr!important; }
  .kpi-improvement-export-actions { align-self:stretch; }
  .kpi-improvement-export-actions .kpi-export-all-button { min-width:0; }
  .kpi-nop-improve-head, .preventive-card-head { grid-template-columns:1fr 22px; }
  .kpi-nop-improve-head .preventive-card-section, .preventive-card-head .preventive-card-section { padding:8px 10px; }
  .kpi-mttr-grid, .kpi-mttr-summary, .kpi-simulation-grid, .kpi-b-simple-severity, .kpi-severity-grid { grid-template-columns:1fr; }
  .kpi-b-simple>header { grid-template-columns:1fr; gap:8px; }
  .kpi-b-simple>header>div:last-child { border-left:0; border-top:3px solid #294d78; padding:8px 0 0; }
  .kpi-b-tabs { overflow-x:auto; justify-content:flex-start; }
  .kpi-b-tabs button { flex:0 0 78px; }
  .kpi-sheet-heading, .kpi-ticket-priority-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .kpi-ticket-priority { overflow-x:auto; }
  .kpi-ticket-priority table { min-width:520px; }
  .kpi-table tbody td:first-child, .kpi-table thead th[rowspan]:first-child { width:118px; min-width:118px; max-width:118px; padding-left:5px!important; padding-right:5px!important; font-size:8px!important; line-height:1.2!important; }
  .kpi-table tbody td:nth-child(2), .kpi-table thead th[rowspan]:nth-child(2) { width:52px; min-width:52px; max-width:52px; left:118px!important; padding-left:4px!important; padding-right:4px!important; font-size:9px!important; }
  .kpi-table thead th:not([rowspan]), .kpi-table tbody td:nth-child(n+3) { min-width:82px!important; padding-left:6px!important; padding-right:6px!important; font-size:10px!important; }
  .kpi-capture::before { content:'Geser tabel ke samping untuk melihat NOP dan periode lainnya'; display:block; padding:7px 9px; background:#f3f6f9; color:#64758a; font-size:9px; font-weight:600; }
  .kpi-nop-title, .kpi-b-tab-heading strong, .kpi-affected-sites li { overflow-wrap:anywhere; }
  .corporate-panel[aria-label="Rekap distribusi kategori KPI"] > .grid { grid-template-columns:1fr!important; }
}