/* ProMaint system design layer — shared visual standards for every module. */
:root {
  --pm-accent: #f59e0b;
  --pm-accent-strong: #d97706;
  --pm-info: #38bdf8;
  --pm-success: #22c55e;
  --pm-danger: #ef4444;
  --pm-surface-0: #0f172a;
  --pm-surface-1: #172033;
  --pm-surface-2: #1c2639;
  --pm-border: #2d3a52;
  --pm-text: #e7edf6;
  --pm-muted: #94a3b8;
  --pm-radius-sm: 8px;
  --pm-radius-md: 12px;
  --pm-radius-lg: 16px;
  --pm-shadow-card: 0 8px 24px rgb(0 0 0 / 10%);
  --pm-shadow-float: 0 22px 55px rgb(0 0 0 / 32%);
  --pm-ease: cubic-bezier(.2, .8, .2, 1);
}

html, body, #root { min-height: 100%; }

body {
  color: var(--pm-text);
  background: var(--pm-surface-0);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  line-height: 1.5;
}

#root { isolation: isolate; }

#root :where(h1, h2, h3, h4) {
  text-wrap: balance;
  letter-spacing: -.025em;
}

#root :where(p, td, th, label, span) { text-wrap: pretty; }

#root main {
  min-width: 0;
}

#root main > :where(div, section) {
  max-width: 1680px;
}

/* Shared controls */
#root :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  min-height: 40px;
  border-radius: var(--pm-radius-sm) !important;
  transition: border-color .18s var(--pm-ease), box-shadow .18s var(--pm-ease), background-color .18s var(--pm-ease);
}

#root textarea { min-height: 96px; line-height: 1.55; }

#root :where(input, select, textarea)::placeholder { color: #718198; opacity: 1; }

#root :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--pm-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgb(245 158 11 / 16%) !important;
}

#root :where(input, select, textarea):disabled {
  opacity: .58;
  filter: saturate(.65);
}

#root :where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--pm-accent); }

/* Buttons and interactive elements */
#root button {
  min-height: 36px;
  border-radius: var(--pm-radius-sm);
  font-weight: 650;
  transition: transform .16s var(--pm-ease), border-color .16s var(--pm-ease), background-color .16s var(--pm-ease), box-shadow .16s var(--pm-ease), opacity .16s;
}

@media (hover: hover) {
  #root button:hover:not(:disabled) { transform: translateY(-1px); }
}

#root button:active:not(:disabled) { transform: translateY(0) scale(.985); }

#root :where(button, a, [role="button"]):focus-visible {
  outline: 3px solid rgb(56 189 248 / 72%) !important;
  outline-offset: 2px !important;
}

#root :where(a, button, [role="button"]) > svg { flex: 0 0 auto; }

/* Data tables */
#root :where(table) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

#root :where(table) th {
  height: 44px;
  padding: 10px 14px;
  color: var(--pm-muted);
  background: rgb(15 23 42 / 58%);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .065em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

#root :where(table) td {
  min-height: 48px;
  padding: 12px 14px;
  vertical-align: middle;
}

#root :where(table) tbody tr { transition: background-color .16s var(--pm-ease); }

@media (hover: hover) {
  #root :where(table) tbody tr:hover { background: rgb(148 163 184 / 5%); }
}

#root :where(table) tbody tr:last-child td { border-bottom-color: transparent !important; }

/* Dialogs, menus and overlays */
#root :where([role="dialog"], [aria-modal="true"]) {
  max-width: min(calc(100vw - 32px), 960px);
  max-height: min(calc(100dvh - 32px), 900px);
  border-radius: var(--pm-radius-lg) !important;
  box-shadow: var(--pm-shadow-float) !important;
  overflow: auto;
  overscroll-behavior: contain;
}

#root :where([role="menu"], [role="listbox"]) {
  border-radius: 10px !important;
  box-shadow: 0 14px 38px rgb(0 0 0 / 28%) !important;
}

#root :where([role="menuitem"], [role="option"]) { min-height: 38px; }

/* Tabs, status chips and navigation feedback */
#root :where([role="tablist"]) {
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

#root :where([role="tablist"])::-webkit-scrollbar { display: none; }
#root :where([role="tab"]) { min-height: 38px; white-space: nowrap; }

#root :where([aria-current="page"], [aria-selected="true"]) { font-weight: 700; }

/* Charts */
#root :where(.recharts-wrapper) { max-width: 100%; }
#root :where(.recharts-default-tooltip) {
  border: 1px solid var(--pm-border) !important;
  border-radius: 10px !important;
  background: rgb(23 32 51 / 96%) !important;
  box-shadow: 0 12px 32px rgb(0 0 0 / 24%) !important;
}
#root :where(.recharts-tooltip-label) { color: var(--pm-text) !important; font-weight: 750; }
#root :where(.recharts-cartesian-axis-tick text) { font-family: inherit; }

/* Images, empty content and loading feedback */
#root img { object-fit: cover; }
#root :where([aria-busy="true"]) { cursor: progress; }
#root :where(.animate-spin) { transform-origin: center; }

/* Keep third-party map canvases isolated from generic UI rules. */
#root :where(.leaflet-container) {
  min-height: 320px;
  border-radius: var(--pm-radius-md);
  font-family: inherit;
  isolation: isolate;
}

/* Consistent responsive density */
@media (max-width: 1024px) {
  #root :where(table) { min-width: 720px; }
  #root :where(table) th, #root :where(table) td { padding-inline: 12px; }
}

@media (max-width: 640px) {
  #root main { padding-inline: 14px !important; }
  #root :where(h1) { font-size: 23px !important; }
  #root :where(h2) { font-size: 19px !important; }
  #root :where([role="dialog"], [aria-modal="true"]) {
    width: calc(100vw - 20px) !important;
    max-width: none;
    max-height: calc(100dvh - 20px);
    border-radius: 14px !important;
  }
  #root button { min-height: 40px; }
  #root :where(table) { min-width: 660px; }
}

@media (prefers-reduced-motion: reduce) {
  #root *, #root *::before, #root *::after { transition-duration: .01ms !important; }
}

@media print {
  #root :where(nav, aside, button, [role="button"]) { box-shadow: none !important; }
  #root :where(table) { min-width: 0; }
}