@import url('https://fonts.googleapis.com/css2?family=Mali:wght@500;700&display=swap');

/* NIS — Shared theme override · meetmap-inspired palette (cream + sage)
 * Loaded LAST on every app page so it overrides each page's own
 * .light-theme / .dark-theme token values WITHOUT touching structure or JS.
 * Only color tokens are remapped — layout/spacing stays as each page defines. */

/* ── Light theme (default) — warm cream + sage green ── */
.light-theme {
  --bg-primary: #faf7f2;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f1ea;
  --body-bg: #faf7f2;

  --card-bg: #ffffff;
  --card-border: rgba(44, 62, 45, 0.1);

  --text-primary: #2c3e2d;
  --text-secondary: #6b7c6e;
  --text-tertiary: #9aa89c;

  --accent: #4d8b6f;
  --accent-gradient: linear-gradient(135deg, #4d8b6f 0%, #3a6f57 100%);
  --accent-hover: #3a6f57;
  --accent-glow: rgba(77, 139, 111, 0.12);
  --accent-soft: rgba(77, 139, 111, 0.12);
  --accent-rgb: 77, 139, 111;

  --input-bg: #ffffff;
  --input-border: rgba(44, 62, 45, 0.16);
  --input-focus-border: #4d8b6f;

  --shadow-main: 0 4px 14px -6px rgba(44, 62, 45, 0.12);
  --shadow-premium: 0 20px 40px -18px rgba(44, 62, 45, 0.18), 0 0 40px -16px rgba(77, 139, 111, 0.12);

  --scrollbar-thumb: #cdd5c8;
  --scrollbar-track: #f3f1ea;

  /* Page-specific surface tokens → solid (override per-page rgba vars) */
  --ced-surface: #ffffff;
  --ced-surface-2: #f3f1ea;
  --ced-border: rgba(44, 62, 45, 0.1);
  --sdb-surface: #ffffff;
  --sdb-surface-hover: #f3f1ea;
}

.dark-theme {
  --bg-primary: #060907;
  --bg-secondary: #0a0e0b;
  --bg-tertiary: #070a08;
  --body-bg: #060907;

  --card-bg: #111713;
  --card-border: rgba(72, 211, 144, 0.12);

  --text-primary: #f0f7f3;
  --text-secondary: #9ebbaf;
  --text-tertiary: #647b71;

  --accent: #10b981;
  --accent-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
  --accent-hover: #34d399;
  --accent-glow: rgba(16, 185, 129, 0.18);
  --accent-soft: rgba(16, 185, 129, 0.12);
  --accent-rgb: 16, 185, 129;

  --input-bg: #0a0e0b;
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus-border: #10b981;

  --shadow-main: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  --shadow-premium: 0 20px 40px -15px rgba(0, 0, 0, 0.65), 0 0 50px -10px rgba(16, 185, 129, 0.2);

  --scrollbar-thumb: #1b2620;
  --scrollbar-track: #060907;

  --ced-surface: #111713;
  --ced-surface-2: #0a0e0b;
  --ced-border: rgba(255, 255, 255, 0.08);
  --sdb-surface: #111713;
  --sdb-surface-hover: #0a0e0b;
}

.light-theme.theme-forest-dark {
  --bg-primary: #f2f5ef;
  --bg-secondary: #ffffff;
  --bg-tertiary: #e2e9da;
  --body-bg: #f2f5ef;
  --card-bg: #ffffff;
  --card-border: rgba(97, 135, 100, 0.12);
  --text-primary: #273338;
  --text-secondary: #2B5748;
  --text-tertiary: #618764;
  --accent: #618764;
  --accent-gradient: linear-gradient(135deg, #9CB080 0%, #2B5748 100%);
  --accent-hover: #2B5748;
  --accent-glow: rgba(97, 135, 100, 0.15);
  --accent-soft: rgba(97, 135, 100, 0.12);
  --accent-rgb: 97, 135, 100;
  --input-bg: #ffffff;
  --input-border: rgba(97, 135, 100, 0.18);
  --input-focus-border: #2B5748;
  --scrollbar-thumb: #e2e9da;
  --scrollbar-track: #f2f5ef;
  --ced-surface: #ffffff;
  --ced-surface-2: #e2e9da;
  --sdb-surface: #ffffff;
  --sdb-surface-hover: #e2e9da;
}

.dark-theme.theme-forest-dark {
  --bg-primary: #1f272b;
  --bg-secondary: #273338;
  --bg-tertiary: #192023;
  --body-bg: #1f272b;
  --card-bg: #2b393f;
  --card-border: rgba(156, 176, 128, 0.12);
  --text-primary: #e6ebd9;
  --text-secondary: #9CB080;
  --text-tertiary: #618764;
  --accent: #9CB080;
  --accent-gradient: linear-gradient(135deg, #9CB080 0%, #618764 100%);
  --accent-hover: #a9bc90;
  --accent-glow: rgba(156, 176, 128, 0.18);
  --accent-soft: rgba(156, 176, 128, 0.13);
  --accent-rgb: 156, 176, 128;
  --input-bg: #192023;
  --input-border: rgba(156, 176, 128, 0.16);
  --input-focus-border: #9CB080;
  --scrollbar-thumb: #273338;
  --scrollbar-track: #1f272b;
  --ced-surface: #2b393f;
  --ced-surface-2: #192023;
  --sdb-surface: #2b393f;
  --sdb-surface-hover: #192023;
}

.light-theme.theme-cozy-paper {
  --bg-primary: #fbf7ed;
  --bg-secondary: #f3ede0;
  --bg-tertiary: #ede4d2;
  --body-bg: #fbf7ed;
  --card-bg: #ffffff;
  --card-border: rgba(31, 26, 20, 0.12);
  --text-primary: #1f1a14;
  --text-secondary: #4a4338;
  --text-tertiary: #8a8378;
  --accent: #6B9071;
  --accent-gradient: linear-gradient(135deg, #6B9071 0%, #375534 100%);
  --accent-hover: #55721c;
  --accent-glow: rgba(107, 142, 35, 0.15);
  --accent-soft: rgba(107, 142, 35, 0.12);
  --accent-rgb: 107, 142, 35;
  --input-bg: #fbf7ed;
  --input-border: #e5dcc7;
  --input-focus-border: #1f1a14;
  --scrollbar-thumb: #ede4d2;
  --scrollbar-track: #fbf7ed;
  --ced-surface: #ffffff;
  --ced-surface-2: #f3ede0;
  --sdb-surface: #ffffff;
  --sdb-surface-hover: #f3ede0;
}

.dark-theme.theme-cozy-paper {
  --bg-primary: #1d1b18;
  --bg-secondary: #25221e;
  --bg-tertiary: #1a1816;
  --body-bg: #1d1b18;
  --card-bg: #2b2722;
  --card-border: rgba(229, 220, 199, 0.1);
  --text-primary: #f5f0e6;
  --text-secondary: #c8beac;
  --text-tertiary: #8e8270;
  --accent: #8cbd3f;
  --accent-gradient: linear-gradient(135deg, #8cbd3f 0%, #638c23 100%);
  --accent-hover: #a5d658;
  --accent-glow: rgba(140, 189, 63, 0.16);
  --accent-soft: rgba(140, 189, 63, 0.12);
  --accent-rgb: 140, 189, 63;
  --input-bg: #25221e;
  --input-border: #4d463d;
  --input-focus-border: #8cbd3f;
  --scrollbar-thumb: #3e3830;
  --scrollbar-track: #1d1b18;
  --ced-surface: #2b2722;
  --ced-surface-2: #25221e;
  --sdb-surface: #2b2722;
  --sdb-surface-hover: #25221e;
}

.light-theme.theme-cozy-paper-normal {
  --bg-primary: #fbf7ed;
  --bg-secondary: #f3ede0;
  --bg-tertiary: #ede4d2;
  --body-bg: #fbf7ed;
  --card-bg: #ffffff;
  --card-border: rgba(31, 26, 20, 0.12);
  --text-primary: #1f1a14;
  --text-secondary: #4a4338;
  --text-tertiary: #8a8378;
  --accent: #6B9071;
  --accent-gradient: linear-gradient(135deg, #6B9071 0%, #375534 100%);
  --accent-hover: #55721c;
  --accent-glow: rgba(107, 142, 35, 0.15);
  --accent-soft: rgba(107, 142, 35, 0.12);
  --accent-rgb: 107, 142, 35;
  --input-bg: #fbf7ed;
  --input-border: #e5dcc7;
  --input-focus-border: #1f1a14;
  --scrollbar-thumb: #ede4d2;
  --scrollbar-track: #fbf7ed;
  --ced-surface: #ffffff;
  --ced-surface-2: #f3ede0;
  --sdb-surface: #ffffff;
  --sdb-surface-hover: #f3ede0;
}

.dark-theme.theme-cozy-paper-normal {
  --bg-primary: #1d1b18;
  --bg-secondary: #25221e;
  --bg-tertiary: #1a1816;
  --body-bg: #1d1b18;
  --card-bg: #2b2722;
  --card-border: rgba(229, 220, 199, 0.1);
  --text-primary: #f5f0e6;
  --text-secondary: #c8beac;
  --text-tertiary: #8e8270;
  --accent: #8cbd3f;
  --accent-gradient: linear-gradient(135deg, #8cbd3f 0%, #638c23 100%);
  --accent-hover: #a5d658;
  --accent-glow: rgba(140, 189, 63, 0.16);
  --accent-soft: rgba(140, 189, 63, 0.12);
  --accent-rgb: 140, 189, 63;
  --input-bg: #25221e;
  --input-border: #4d463d;
  --input-focus-border: #8cbd3f;
  --scrollbar-thumb: #3e3830;
  --scrollbar-track: #1d1b18;
  --ced-surface: #2b2722;
  --ced-surface-2: #25221e;
  --sdb-surface: #2b2722;
  --sdb-surface-hover: #25221e;
}

/* ── Warm coral — a bright, friendly cream theme with a modern coral accent ── */
.light-theme.theme-warm-coral {
  --bg-primary: #fcf8f3;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8ede5;
  --body-bg: #fcf8f3;
  --card-bg: #ffffff;
  --card-border: rgba(72, 50, 43, 0.11);
  --text-primary: #302927;
  --text-secondary: #6e625c;
  --text-tertiary: #9a8d86;
  --accent: #f16643;
  --accent-gradient: linear-gradient(135deg, #ff7851 0%, #ec5a3d 100%);
  --accent-hover: #d94d32;
  --accent-glow: rgba(241, 102, 67, 0.18);
  --accent-soft: rgba(241, 102, 67, 0.12);
  --accent-rgb: 241, 102, 67;
  --input-bg: #ffffff;
  --input-border: rgba(72, 50, 43, 0.17);
  --input-focus-border: #f16643;
  --shadow-main: 0 8px 22px -14px rgba(72, 50, 43, 0.2);
  --shadow-premium: 0 20px 42px -20px rgba(72, 50, 43, 0.28), 0 0 36px -18px rgba(241, 102, 67, 0.24);
  --scrollbar-thumb: #ead6ca;
  --scrollbar-track: #f8ede5;
  --ced-surface: #ffffff;
  --ced-surface-2: #f8ede5;
  --ced-border: rgba(72, 50, 43, 0.11);
  --sdb-surface: #ffffff;
  --sdb-surface-hover: #f8ede5;
}

.dark-theme.theme-warm-coral {
  --bg-primary: #1d1715;
  --bg-secondary: #251d1a;
  --bg-tertiary: #302522;
  --body-bg: #1d1715;
  --card-bg: #302522;
  --card-border: rgba(255, 150, 116, 0.16);
  --text-primary: #fff5ef;
  --text-secondary: #d9c1b5;
  --text-tertiary: #a98d80;
  --accent: #ff8966;
  --accent-gradient: linear-gradient(135deg, #ff9675 0%, #e85d40 100%);
  --accent-hover: #ffad91;
  --accent-glow: rgba(255, 137, 102, 0.2);
  --accent-soft: rgba(255, 137, 102, 0.13);
  --accent-rgb: 255, 137, 102;
  --input-bg: #251d1a;
  --input-border: rgba(255, 255, 255, 0.12);
  --input-focus-border: #ff8966;
  --shadow-main: 0 12px 30px -12px rgba(0, 0, 0, 0.58);
  --shadow-premium: 0 20px 40px -15px rgba(0, 0, 0, 0.66), 0 0 50px -12px rgba(255, 137, 102, 0.2);
  --scrollbar-thumb: #4d3831;
  --scrollbar-track: #1d1715;
  --ced-surface: #302522;
  --ced-surface-2: #251d1a;
  --ced-border: rgba(255, 255, 255, 0.08);
  --sdb-surface: #302522;
  --sdb-surface-hover: #251d1a;
}

/* Theme-toggle icon visibility (sun in light, moon in dark) — centralised
 * so pages without their own rule behave correctly. */
.dark-theme .sun-icon,
.light-theme .moon-icon {
  display: none;
}

/* Theme color switcher */
.nis-palette-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.nis-palette-trigger {
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--text-secondary);
  box-shadow: var(--shadow-main);
  cursor: pointer;
  font-family: var(--font-thai, 'Sarabun', sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
}

.nis-palette-trigger:hover,
.nis-palette-switcher:focus-within .nis-palette-trigger {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.nis-palette-current-swatch,
.nis-palette-option-swatch {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}


.nis-palette-current-swatch[data-palette="forest-dark"],
.nis-palette-option-swatch[data-palette="forest-dark"] {
  background: linear-gradient(135deg, #2B5748, #9CB080);
}

.nis-palette-current-swatch[data-palette="cozy-paper"],
.nis-palette-option-swatch[data-palette="cozy-paper"] {
  background: linear-gradient(135deg, #6B9071, #fbf7ed);
}

.nis-palette-current-swatch[data-palette="cozy-paper-normal"],
.nis-palette-option-swatch[data-palette="cozy-paper-normal"] {
  background: linear-gradient(135deg, #6B9071, #ede4d2);
}

.nis-palette-current-swatch[data-palette="warm-coral"],
.nis-palette-option-swatch[data-palette="warm-coral"] {
  background: linear-gradient(135deg, #ff7851, #fcf8f3);
}


.nis-palette-caret {
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.75;
}

.nis-palette-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10060;
  min-width: 144px;
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  background: var(--card-bg);
  box-shadow: var(--shadow-premium);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.nis-palette-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.nis-palette-switcher:hover .nis-palette-menu,
.nis-palette-switcher:focus-within .nis-palette-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.nis-palette-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-thai, 'Sarabun', sans-serif);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: left;
}

.nis-palette-btn:hover,
.nis-palette-btn.is-active {
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
}

.nis-palette-floating {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10050;
}

/* ── Opaque form fields — ทุกหน้าแอป (ไม่ให้ grid โผล่ผ่านช่องกรอก) ── */
.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),
.light-theme select,
.light-theme textarea {
  background-color: #ffffff !important;
}

.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):hover,
.light-theme select:hover,
.light-theme textarea:hover,
.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):focus,
.light-theme select:focus,
.light-theme textarea:focus {
  background-color: #ffffff !important;
}

.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),
.dark-theme select,
.dark-theme textarea {
  background-color: var(--input-bg) !important;
}

.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):hover,
.dark-theme select:hover,
.dark-theme textarea:hover,
.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]):focus,
.dark-theme select:focus,
.dark-theme textarea:focus {
  background-color: var(--input-bg) !important;
}

.light-theme input:disabled,
.light-theme input[readonly]:not([type="checkbox"]):not([type="radio"]),
.light-theme select:disabled,
.light-theme textarea:disabled,
.light-theme textarea[readonly],
.light-theme .input-readonly {
  background-color: #f3f1ea !important;
}

.dark-theme input:disabled,
.dark-theme input[readonly]:not([type="checkbox"]):not([type="radio"]),
.dark-theme select:disabled,
.dark-theme textarea:disabled,
.dark-theme textarea[readonly],
.dark-theme .input-readonly {
  background-color: var(--card-bg) !important;
}

.light-theme input:-webkit-autofill,
.light-theme input:-webkit-autofill:hover,
.light-theme input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: 0 0 0 1000px #ffffff inset !important;
  transition: background-color 99999s ease-out;
}

.dark-theme input:-webkit-autofill,
.dark-theme input:-webkit-autofill:hover,
.dark-theme input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary);
  box-shadow: 0 0 0 1000px var(--input-bg) inset !important;
  transition: background-color 99999s ease-out;
}

/* ── Opaque cards/panels — ปิด backdrop-filter ไม่ให้ grid โผล่ (ทุกหน้า) ── */
.light-theme .card {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dark-theme .card {
  background-color: var(--card-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Opaque chrome — header, sidebar nav, save bar, cloud bar */
body.light-theme .app-header,
body.light-theme .case-form-nav,
body.light-theme .sticky-save-bar,
body.light-theme .ci-cloud-bar {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme .app-header,
body.dark-theme .case-form-nav,
body.dark-theme .sticky-save-bar {
  background-color: var(--card-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Opaque form panels & sections — ทุกหน้าแอป ── */
body.light-theme .form-section,
body.light-theme .party-item,
body.light-theme .party-details-section,
body.light-theme .party-group-box,
body.light-theme .progress-container,
body.light-theme .panel,
body.light-theme .panel-right,
body.light-theme .panel-left,
body.light-theme .ced-panel,
body.light-theme .ced-panel-head,
body.light-theme .ced-field-item,
body.light-theme .ced-values-field,
body.light-theme .station-db-panel,
body.light-theme .station-db-actions,
body.light-theme .station-db-link-banner,
body.light-theme .st-card,
body.light-theme .search-bar-container,
body.light-theme .variables-sidebar-full,
body.light-theme .variables-content-full,
body.light-theme .suspect-mgmt-group,
body.light-theme .extra-data-inline-group,
body.light-theme .extra-data-inline-empty,
body.light-theme .case-intro-banner,
body.light-theme .case-summary-banner,
body.light-theme .remand-page-panel,
body.light-theme .remand-case-picker-card {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme .form-section,
body.dark-theme .party-item,
body.dark-theme .party-details-section,
body.dark-theme .party-group-box,
body.dark-theme .progress-container,
body.dark-theme .panel,
body.dark-theme .panel-right,
body.dark-theme .panel-left,
body.dark-theme .ced-panel,
body.dark-theme .ced-panel-head,
body.dark-theme .ced-field-item,
body.dark-theme .ced-values-field,
body.dark-theme .station-db-panel,
body.dark-theme .station-db-actions,
body.dark-theme .st-card,
body.dark-theme .search-bar-container,
body.dark-theme .variables-sidebar-full,
body.dark-theme .variables-content-full,
body.dark-theme .suspect-mgmt-group,
body.dark-theme .extra-data-inline-group,
body.dark-theme .remand-page-panel,
body.dark-theme .remand-case-picker-card {
  background-color: var(--card-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.light-theme .ced-panel-head,
body.light-theme .ced-field-item,
body.light-theme .ced-values-field,
body.light-theme .remand-case-strip {
  background-color: #f3f1ea !important;
}

body.dark-theme .ced-panel-head,
body.dark-theme .ced-field-item,
body.dark-theme .ced-values-field,
body.dark-theme .remand-case-strip {
  background-color: var(--bg-tertiary) !important;
}

/* Display-only field chips (not real inputs) */
body.light-theme .remand-case-chip,
body.light-theme .remand-chip-suspect {
  background-color: #ffffff !important;
}

body.dark-theme .remand-case-chip,
body.dark-theme .remand-chip-suspect {
  background-color: var(--input-bg) !important;
}

/* Class-based selects & custom inputs */
body.light-theme .st-input,
body.light-theme .ced-case-select,
body.light-theme .ced-reuse-select,
body.light-theme .remand-suspect-select,
body.light-theme .remand-investigator-select,
body.light-theme .mgmt-option-card,
body.light-theme .mgmt-option-card.is-pending,
body.light-theme .top-filter-bar input,
body.light-theme .top-filter-bar select,
body.light-theme .input-search-wrapper input,
body.light-theme .form-group input,
body.light-theme .form-group select,
body.light-theme .form-group textarea,
body.light-theme .station-db-form input,
body.light-theme .ced-add-form input,
body.light-theme .ced-add-form textarea,
body.light-theme .ced-values-form input,
body.light-theme .ced-values-form textarea,
body.light-theme .ced-field-item input,
body.light-theme .extra-data-inline-input,
body.light-theme .remand-footer-field input,
body.light-theme .remand-round-btn,
body.light-theme .remand-table-wrap,
body.light-theme [contenteditable="true"] {
  background-color: #ffffff !important;
}

body.dark-theme .st-input,
body.dark-theme .ced-case-select,
body.dark-theme .ced-reuse-select,
body.dark-theme .remand-suspect-select,
body.dark-theme .remand-investigator-select,
body.dark-theme .mgmt-option-card,
body.dark-theme .mgmt-option-card.is-pending,
body.dark-theme .top-filter-bar input,
body.dark-theme .top-filter-bar select,
body.dark-theme .input-search-wrapper input,
body.dark-theme .form-group input,
body.dark-theme .form-group select,
body.dark-theme .form-group textarea,
body.dark-theme .station-db-form input,
body.dark-theme .ced-add-form input,
body.dark-theme .ced-add-form textarea,
body.dark-theme .ced-values-form input,
body.dark-theme .ced-values-form textarea,
body.dark-theme .ced-field-item input,
body.dark-theme .extra-data-inline-input,
body.dark-theme .remand-footer-field input,
body.dark-theme .remand-round-btn,
body.dark-theme .remand-table-wrap,
body.dark-theme [contenteditable="true"] {
  background-color: var(--input-bg) !important;
}

body.light-theme .mgmt-option-card.is-active {
  background-color: rgba(77, 139, 111, 0.08) !important;
}

body.dark-theme .mgmt-option-card.is-active {
  background-color: rgba(127, 196, 160, 0.1) !important;
}

body.light-theme #global-search {
  background-color: #ffffff !important;
}

body.dark-theme #global-search {
  background-color: var(--input-bg) !important;
}

body.light-theme .login-auth-panel {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme .login-auth-panel {
  background-color: var(--card-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Modals & dialogs — opaque form areas (keep ::backdrop overlay as-is) */
body.light-theme .case-modal,
body.light-theme .party-details-dialog-inner,
body.light-theme .detail-modal,
body.light-theme .appt-modal,
body.light-theme .modal-body,
body.light-theme .detail-modal-body,
body.light-theme .appt-modal-body {
  background-color: #ffffff !important;
}

body.dark-theme .case-modal,
body.dark-theme .party-details-dialog-inner,
body.dark-theme .detail-modal,
body.dark-theme .appt-modal,
body.dark-theme .modal-body,
body.dark-theme .detail-modal-body,
body.dark-theme .appt-modal-body {
  background-color: var(--card-bg) !important;
}

body.light-theme .modal-header {
  background-color: #f3f1ea !important;
}

body.dark-theme .modal-header {
  background-color: var(--bg-tertiary) !important;
}

/* Mail merge — drop zones & mapping fields */
body.light-theme .dropzone,
body.light-theme .mapping-row,
body.light-theme .file-info-bar {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme .dropzone,
body.dark-theme .mapping-row,
body.dark-theme .file-info-bar {
  background-color: var(--input-bg) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Final hard stop: no transparent data-entry fields anywhere ──
 * This intentionally does not depend on .light-theme because a few pages
 * mount before the theme class is applied. It targets data-entry controls
 * only, leaving buttons, checkboxes, radios, ranges, and color pickers alone.
 */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),
select,
textarea,
[contenteditable="true"],
.st-input,
#global-search,
.ced-case-select,
.ced-reuse-select,
.remand-suspect-select,
.remand-investigator-select,
.extra-data-inline-input,
.station-db-form input,
.top-filter-bar input,
.top-filter-bar select,
.input-search-wrapper input,
.form-group input,
.form-group select,
.form-group textarea,
.party-inputs-grid input,
.details-grid input,
.details-grid select,
.details-grid textarea,
.details-grid-address input,
.details-grid-address select,
.details-grid-address textarea,
.ced-add-form input,
.ced-add-form textarea,
.ced-values-form input,
.ced-values-form textarea,
.ced-field-item input,
.remand-footer-field input,
.mapping-row input,
.mapping-row select,
.file-info-bar input,
.file-info-bar select,
.login-field input {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="range"]):not([type="color"]),
body.dark-theme select,
body.dark-theme textarea,
body.dark-theme [contenteditable="true"],
body.dark-theme .st-input,
body.dark-theme #global-search,
body.dark-theme .ced-case-select,
body.dark-theme .ced-reuse-select,
body.dark-theme .remand-suspect-select,
body.dark-theme .remand-investigator-select,
body.dark-theme .extra-data-inline-input,
body.dark-theme .station-db-form input,
body.dark-theme .top-filter-bar input,
body.dark-theme .top-filter-bar select,
body.dark-theme .input-search-wrapper input,
body.dark-theme .form-group input,
body.dark-theme .form-group select,
body.dark-theme .form-group textarea,
body.dark-theme .party-inputs-grid input,
body.dark-theme .details-grid input,
body.dark-theme .details-grid select,
body.dark-theme .details-grid textarea,
body.dark-theme .details-grid-address input,
body.dark-theme .details-grid-address select,
body.dark-theme .details-grid-address textarea,
body.dark-theme .ced-add-form input,
body.dark-theme .ced-add-form textarea,
body.dark-theme .ced-values-form input,
body.dark-theme .ced-values-form textarea,
body.dark-theme .ced-field-item input,
body.dark-theme .remand-footer-field input,
body.dark-theme .mapping-row input,
body.dark-theme .mapping-row select,
body.dark-theme .file-info-bar input,
body.dark-theme .file-info-bar select,
body.dark-theme .login-field input {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Display-like fields that are spans/divs, not native form controls. */
.remand-case-strip,
.remand-case-chip,
.remand-chip-suspect,
.mgmt-option-card,
.mgmt-option-card.is-pending,
.party-group-box,
.ced-field-item,
.ced-values-field,
.mapping-row,
.dropzone,
.file-info-bar,
.search-bar-container,
.login-auth-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.dark-theme .remand-case-strip,
body.dark-theme .remand-case-chip,
body.dark-theme .remand-chip-suspect,
body.dark-theme .mgmt-option-card,
body.dark-theme .mgmt-option-card.is-pending,
body.dark-theme .party-group-box,
body.dark-theme .ced-field-item,
body.dark-theme .ced-values-field,
body.dark-theme .mapping-row,
body.dark-theme .dropzone,
body.dark-theme .file-info-bar,
body.dark-theme .search-bar-container,
body.dark-theme .login-auth-panel {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Palette-aware dark overrides. Keep this at the end so page CSS cannot
 * force the original green dark surfaces over blue/orange palettes. */
body.dark-theme .card,
body.dark-theme .app-header,
body.dark-theme .case-form-nav,
body.dark-theme .sticky-save-bar,
body.dark-theme .ci-cloud-bar,
body.dark-theme .form-section,
body.dark-theme .party-item,
body.dark-theme .panel,
body.dark-theme .panel-right,
body.dark-theme .ced-panel,
body.dark-theme .station-db-panel,
body.dark-theme .st-card,
body.dark-theme .variables-sidebar-full,
body.dark-theme .variables-content-full,
body.dark-theme .remand-page-panel,
body.dark-theme .remand-case-picker-card,
body.dark-theme .case-modal,
body.dark-theme .party-details-dialog-inner,
body.dark-theme .detail-modal,
body.dark-theme .appt-modal {
  background: var(--card-bg) !important;
  background-color: var(--card-bg) !important;
}

body.dark-theme .party-group-box,
body.dark-theme .party-details-section,
body.dark-theme .progress-container,
body.dark-theme .ced-field-item,
body.dark-theme .ced-values-field,
body.dark-theme .mapping-row,
body.dark-theme .dropzone,
body.dark-theme .file-info-bar,
body.dark-theme .search-bar-container,
body.dark-theme .login-auth-panel,
body.dark-theme .remand-case-chip,
body.dark-theme .remand-chip-suspect,
body.dark-theme .remand-round-btn,
body.dark-theme .remand-table-wrap,
body.dark-theme .mgmt-option-card,
body.dark-theme .mgmt-option-card.is-pending {
  background: var(--input-bg) !important;
  background-color: var(--input-bg) !important;
}

body.dark-theme .ced-panel-head,
body.dark-theme .remand-case-strip,
body.dark-theme .modal-header,
body.dark-theme #remand-page-root .remand-table-compact th {
  background: var(--bg-tertiary) !important;
  background-color: var(--bg-tertiary) !important;
}

/* ==========================================
   COZY PAPER THEME SPECIFIC AESTHETICS (Neo-Brutalist & Hand-Drawn)
   ========================================== */

/* Apply the wobbly hand-drawn filter to all SVGs and custom containers (excluding the clean modern logo) */
.theme-cozy-paper svg:not(.nis-brand-logo-svg),
.theme-cozy-paper [data-lucide],
.theme-cozy-paper .meetmap-how-icon {
  filter: url(#nis-sketchy) !important;
}

/* Cozy-paper layout fonts - Mali for headings, buttons, tags */
.theme-cozy-paper h1,
.theme-cozy-paper h2,
.theme-cozy-paper h3,
.theme-cozy-paper h4,
.theme-cozy-paper h5,
.theme-cozy-paper h6,
.theme-cozy-paper .meetmap-brand,
.theme-cozy-paper .meetmap-brand-a,
.theme-cozy-paper .meetmap-brand-b,
.theme-cozy-paper .meetmap-tagline,
.theme-cozy-paper .nis-brand-tagline,
.theme-cozy-paper .meetmap-hint,
.theme-cozy-paper button:not(.nis-palette-trigger):not(.nis-palette-btn),
.theme-cozy-paper .btn,
.theme-cozy-paper .meetmap-cta,
.theme-cozy-paper .page-nav-link,
.theme-cozy-paper .portal-greeting,
.theme-cozy-paper .dropdown-item,
.theme-cozy-paper .meetmap-pill,
.theme-cozy-paper th {
  font-family: 'Mali', 'Sarabun', sans-serif !important;
}

/* Bold borders and flat box shadows for cards/panels */
.theme-cozy-paper .card,
.theme-cozy-paper .form-section,
.theme-cozy-paper .panel,
.theme-cozy-paper .panel-left,
.theme-cozy-paper .panel-right,
.theme-cozy-paper .ced-panel,
.theme-cozy-paper .st-card,
.theme-cozy-paper .remand-page-panel,
.theme-cozy-paper .app-header,
.theme-cozy-paper .sticky-save-bar,
.theme-cozy-paper .party-item,
.theme-cozy-paper .search-bar-container,
.theme-cozy-paper .variables-sidebar-full,
.theme-cozy-paper .variables-content-full,
.theme-cozy-paper .login-auth-panel {
  border: 2px solid var(--text-primary) !important;
  box-shadow: 4px 4px 0 var(--text-primary) !important;
  border-radius: 12px !important;
  background-color: var(--bg-secondary) !important;
}

/* Form fields styled with bold border and soft transitions */
.theme-cozy-paper input:not([type="checkbox"]):not([type="radio"]),
.theme-cozy-paper select:not(.badge-status),
.theme-cozy-paper textarea {
  border: 2px solid var(--text-primary) !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  color: var(--text-primary) !important;
  font-family: 'Sarabun', sans-serif !important;
  transition: box-shadow 0.12s ease !important;
}
.theme-cozy-paper.dark-theme input:not([type="checkbox"]):not([type="radio"]),
.theme-cozy-paper.dark-theme select:not(.badge-status),
.theme-cozy-paper.dark-theme textarea {
  background-color: var(--bg-tertiary) !important;
}
.theme-cozy-paper input:not([type="checkbox"]):not([type="radio"]):focus,
.theme-cozy-paper select:not(.badge-status):focus,
.theme-cozy-paper textarea:focus {
  box-shadow: 3px 3px 0 var(--text-primary) !important;
  outline: none !important;
}

/* Buttons: Blocky 3D tactile buttons */
.theme-cozy-paper button:not(.nis-palette-trigger):not(.nis-palette-btn):not(.btn-icon):not(#theme-toggle),
.theme-cozy-paper .btn,
.theme-cozy-paper .btn-primary,
.theme-cozy-paper .btn-secondary,
.theme-cozy-paper .meetmap-cta {
  border: 2px solid var(--text-primary) !important;
  box-shadow: 3px 3px 0 var(--text-primary) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.12s !important;
}
.theme-cozy-paper .btn-primary,
.theme-cozy-paper .meetmap-cta {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}
.theme-cozy-paper.light-theme .meetmap-cta {
  color: #ffffff !important;
}
.theme-cozy-paper button:not(.nis-palette-trigger):not(.nis-palette-btn):not(.btn-icon):not(#theme-toggle):hover,
.theme-cozy-paper .btn:hover,
.theme-cozy-paper .btn-primary:hover,
.theme-cozy-paper .btn-secondary:hover,
.theme-cozy-paper .meetmap-cta:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--text-primary) !important;
  background-color: var(--bg-tertiary) !important;
}
.theme-cozy-paper .btn-primary:hover,
.theme-cozy-paper .meetmap-cta:hover {
  background-color: var(--accent-hover) !important;
}
.theme-cozy-paper button:not(.nis-palette-trigger):not(.nis-palette-btn):not(.btn-icon):not(#theme-toggle):active,
.theme-cozy-paper .btn:active,
.theme-cozy-paper .btn-primary:active,
.theme-cozy-paper .btn-secondary:active,
.theme-cozy-paper .meetmap-cta:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 1px 0 var(--text-primary) !important;
}

/* Cozy-paper table styling */
.theme-cozy-paper table {
  border: 2px solid var(--text-primary) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.theme-cozy-paper th {
  border-bottom: 2px solid var(--text-primary) !important;
  border-right: 1px solid var(--text-primary) !important;
  background-color: var(--bg-tertiary) !important;
  color: var(--text-primary) !important;
  padding: 10px 14px !important;
}
.theme-cozy-paper td {
  border-bottom: 1px solid var(--card-border) !important;
  border-right: 1px solid var(--card-border) !important;
  padding: 10px 14px !important;
}
.theme-cozy-paper tr:last-child td {
  border-bottom: none !important;
}
.theme-cozy-paper th:last-child,
.theme-cozy-paper td:last-child {
  border-right: none !important;
}

/* Nav links styling in cozy-paper */
.theme-cozy-paper .page-nav-link {
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
}
.theme-cozy-paper .page-nav-link.active {
  border: 2px solid var(--text-primary) !important;
  background-color: var(--bg-tertiary) !important;
  box-shadow: 2px 2px 0 var(--text-primary) !important;
}

/* Pills in login.html and index.html */
.theme-cozy-paper .meetmap-pill {
  border: 2px solid var(--text-primary) !important;
  box-shadow: 2px 2px 0 var(--text-primary) !important;
  background-color: var(--bg-tertiary) !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
}

/* =========================================================================
   Installed-PWA window dragging (Window Controls Overlay)
   When NIS is installed as a desktop app on macOS, the app header acts as the
   window title bar — drag it to move the window. Pages without a header get a
   thin draggable strip injected at the top (see nis-pwa.js / .nis-wco-dragbar).
   ========================================================================= */
.nis-wco-dragbar { display: none; }

@media (display-mode: window-controls-overlay) {
  /* Headerless pages (login, index, license): thin draggable strip up top */
  .nis-wco-dragbar {
    display: block;
    position: fixed;
    top: 0;
    left: env(titlebar-area-x, 0px);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 33px);
    -webkit-app-region: drag;
    app-region: drag;
    z-index: 2147483647;
  }

  /* The app header doubles as the window title bar — grab it to move the window */
  .app-header,
  .ipage-header,
  .nis-nav-header {
    -webkit-app-region: drag;
    app-region: drag;
    /* shift content clear of the macOS traffic-light buttons on the left */
    padding-left: max(18px, calc(env(titlebar-area-x, 0px) + 12px));
  }

  /* Keep every interactive control inside the header clickable */
  .app-header :where(button, a, input, select, textarea, label, summary, [role="button"], [contenteditable], [tabindex], .nis-nav-toggle, .nis-palette-trigger, .nis-palette-switcher),
  .ipage-header :where(button, a, input, select, textarea, label, summary, [role="button"], [contenteditable], [tabindex], .nis-palette-trigger, .nis-palette-switcher),
  .nis-nav-header :where(button, a, input, select, textarea, label, summary, [role="button"], [contenteditable], [tabindex], .nis-palette-trigger, .nis-palette-switcher) {
    -webkit-app-region: no-drag;
    app-region: no-drag;
  }
}