/* Panaceamed Control + Color Grading v46
   Reference-driven finish from the supplied UI studies.

   Palette:
   - accent / active: #25D162
   - graphite surface: #2B2B2B
   - deep surface: #1D1D1D
   - optical white: #FFFFFF

   Material formulas translated from the reference:
   - dark control = graphite/deep gradient + soft ambient drop shadow
                  + dark lower inset + white upper specular inset
   - light control = white/off-white surface + opposing white/dark neumorphic shadows
   - active bubble = translucent glass + green tint + high white specular edge
   - motion = existing v45 liquid engine; this file changes material/color only.
*/

:root {
  --pmd-ref-green: #25d162;
  --pmd-ref-green-soft: rgba(37, 209, 98, .16);
  --pmd-ref-green-line: rgba(37, 209, 98, .48);
  --pmd-ref-graphite: #2b2b2b;
  --pmd-ref-deep: #1d1d1d;
  --pmd-ref-white: #ffffff;
  --pmd-ref-ink-on-green: #07150d;

  /* Remap the product accent without changing semantic warning/error colors. */
  --color-brand: var(--pmd-ref-green);
  --color-brand-dark: #0b7a4b; /* >=4.5:1 sobre branco/tint claro; #169c49 dava 3.3:1 (kontras-wcag) */

  /* v44/v45 liquid tokens: cyan/violet -> restrained green/neutral material. */
  --pmd-liquid-line-hot: rgba(37, 209, 98, .34);
  --pmd-action-cyan: rgba(37, 209, 98, .82);
  --pmd-action-violet: rgba(255, 255, 255, .18);
  --pmd-action-edge: rgba(255, 255, 255, .24);
}

html.dark,
.dark {
  --pmd-liquid-line: rgba(255, 255, 255, .10);
  --pmd-liquid-line-hot: rgba(37, 209, 98, .40);
  --pmd-liquid-specular: rgba(255, 255, 255, .20);
  --pmd-liquid-control: rgba(29, 29, 29, .62);
  --pmd-liquid-control-strong: rgba(43, 43, 43, .76);
  --pmd-liquid-content: rgba(29, 29, 29, .82);
  --pmd-liquid-shadow: 0 18px 54px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255,255,255,.10);
  --pmd-liquid-shadow-float: 0 28px 84px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255,255,255,.13);
  --pmd-canvas-0: #111312;
  --pmd-canvas-1: #171a18;
  --pmd-canvas-2: #0d0f0e;
}

html:not(.dark) {
  --pmd-liquid-line: rgba(13, 39, 26, .09);
  --pmd-liquid-line-hot: rgba(37, 209, 98, .34);
  --pmd-liquid-specular: rgba(255, 255, 255, .86);
  --pmd-liquid-control: rgba(248, 249, 249, .72);
  --pmd-liquid-control-strong: rgba(255, 255, 255, .86);
  --pmd-liquid-content: rgba(255, 255, 255, .90);
  --pmd-canvas-0: #f4f6f5;
  --pmd-canvas-1: #fbfcfb;
  --pmd-canvas-2: #eef2ef;
}

/* --------------------------------------------------------------------------
   Color grading: neutral carbon canvas with one green focal accent.
   The biomedical data palette remains untouched; only chrome/control ambience
   is graded here so clinical red/amber/blue still retain meaning.
   -------------------------------------------------------------------------- */
html.dark body {
  background:
    radial-gradient(62rem 42rem at 6% -12%, rgba(37, 209, 98, .13), transparent 61%),
    radial-gradient(48rem 34rem at 96% 102%, rgba(255,255,255,.025), transparent 68%),
    linear-gradient(180deg, #171a18 0%, #111312 42%, #0d0f0e 100%) !important;
}

html:not(.dark) body {
  background:
    radial-gradient(52rem 36rem at 8% -12%, rgba(37, 209, 98, .055), transparent 64%),
    linear-gradient(180deg, #fbfcfb 0%, #f4f6f5 54%, #eef2ef 100%) !important;
}

html.dark #root::before {
  background:
    radial-gradient(34rem 28rem at 16% 12%, rgba(37, 209, 98, .075), transparent 72%),
    radial-gradient(30rem 26rem at 86% 78%, rgba(255,255,255,.025), transparent 76%) !important;
}

/* Normalize common dark utility surfaces into the supplied graphite pair. */
html.dark .bg-white,
html.dark .bg-neutral-50 { background-color: var(--pmd-ref-deep) !important; }
html.dark .bg-neutral-100 { background-color: var(--pmd-ref-graphite) !important; }
html.dark .bg-neutral-200 { background-color: #343434 !important; }
html.dark .text-brand-dark { color: #54e486 !important; }

/* --------------------------------------------------------------------------
   Universal material for real buttons.
   Restrict the full material treatment to controls that already declare a
   rounded/surface/border intent, so text-only semantic buttons are not turned
   into heavy pills by accident.
   -------------------------------------------------------------------------- */
html.pmd-liquid-actions-v45 :where(
  button[class*='rounded'],
  button[class*='kaca'],
  button[class*='bg-'],
  button[class*='border'],
  input[type='button'],
  input[type='submit'],
  input[type='reset']
) {
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(255,255,255,.10) !important;
  /* Kebalikan persis dari kasus mode terang di bawah, dan sama merusaknya:
     latar grafit gelap dipaksa dengan `!important`, jadi tombol ini SELALU
     gelap. Tanpa `!important` pada tintanya, utility teks gelap dari komponen
     (`text-ink`, `text-neutral-900`, dan sejenisnya) tetap menang, dan hasilnya
     tulisan gelap di atas kartu gelap. Satu aturan untuk kedua arah: yang
     memaksa latar harus ikut memaksa tintanya.
     Penjaganya: scripts/uji/kontras-kendali-terang.mts. */
  color: var(--pmd-ref-white) !important;
  background:
    radial-gradient(130% 120% at 18% -22%, rgba(255,255,255,.10), transparent 48%),
    linear-gradient(180deg, var(--pmd-ref-graphite), var(--pmd-ref-deep)) !important;
  box-shadow:
    inset -2px -4px 4px rgba(0,0,0,.35),
    inset 0 2px 10px rgba(255,255,255,.14),
    0 12px 30px rgba(0,0,0,.20) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

html:not(.dark).pmd-liquid-actions-v45 :where(
  button[class*='rounded'],
  button[class*='kaca'],
  button[class*='bg-'],
  button[class*='border'],
  input[type='button'],
  input[type='submit'],
  input[type='reset']
) {
  border-color: rgba(13,39,26,.10) !important;
  /* Flat solid: latar putih/off-white tanpa gradasi neumorphic.
     Warna teks wajib dipaksa bersamaan dengan latar — lihat komentar
     di atas (mode gelap) untuk alasan lengkapnya.
     Penjaganya: scripts/uji/kontras-kendali-terang.mts. */
  color: #18221d !important;
  background: #ffffff !important;
  box-shadow:
    0 1px 3px rgba(13,39,26,.08),
    0 1px 2px rgba(13,39,26,.04) !important;
}

/* Memaksa `color` pada TOMBOLNYA saja ternyata belum cukup, dan alasannya
   mudah terlewat: warna teks itu diwariskan, dan pewarisan kalah oleh nilai
   eksplisit di anak — berapa pun `!important`-nya. Label hasil pencarian
   ditulis `<span class="text-white">` di dalam tombol, jadi ia tetap putih di
   atas kartu terang meski tombolnya sudah bertinta gelap.

   Karena lapisan ini mengambil alih material tombol, ia harus mengambil alih
   tintanya sampai ke elemen teks di dalamnya. Dibatasi ke elemen pembawa teks
   (bukan `*`) supaya lencana, titik status dan ikon berwarna di dalam tombol
   tidak ikut diratakan. */
html.pmd-liquid-actions-v45 :where(
  button[class*='rounded'],
  button[class*='kaca'],
  button[class*='bg-'],
  button[class*='border'],
  input[type='button'],
  input[type='submit'],
  input[type='reset']
) :where(span, small, strong, b, em, i, label, p):where(:not([style*='color'])) {
  /* Elemen yang membawa warna inline sengaja memilih warnanya (mis. inisial avatar gelap di atas hijau merek,
     kontras 8,7:1); meratakannya ke warna tombol menjatuhkannya ke 1,84:1. :where() menjaga spesifisitas tetap nol. */
  color: inherit !important;
}

/* Primary/brand buttons become the clean green focal action from the reference.
   Dark ink is deliberate: white on #25D162 is too weak for normal-size text. */
html.pmd-liquid-actions-v45 :where(
  button.bg-brand,
  button[class~='bg-brand'],
  button[data-variant='primary'],
  button[data-tone='brand'],
  input[type='submit']
) {
  color: var(--pmd-ref-ink-on-green) !important;
  border-color: rgba(255,255,255,.30) !important;
  background: var(--pmd-ref-green) !important;
  box-shadow:
    0 2px 6px rgba(37,209,98,.30),
    0 1px 2px rgba(0,0,0,.08) !important;
}

/* Selected/toggled controls use a glass bubble rather than a flat fill. */
html.pmd-liquid-actions-v45 :where(
  button[aria-pressed='true'],
  button[aria-selected='true'],
  button[aria-current='page'],
  [role='tab'][aria-selected='true']
) {
  color: var(--pmd-ref-white) !important;
  border-color: var(--pmd-ref-green-line) !important;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.32) 0 7%, rgba(255,255,255,.12) 13%, transparent 31%),
    radial-gradient(120% 120% at 78% 88%, rgba(37,209,98,.24), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(29,29,29,.72)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -8px 18px rgba(0,0,0,.18),
    0 0 0 1px rgba(37,209,98,.10),
    0 10px 30px rgba(37,209,98,.15) !important;
}

html:not(.dark).pmd-liquid-actions-v45 :where(
  button[aria-pressed='true'],
  button[aria-selected='true'],
  button[aria-current='page'],
  [role='tab'][aria-selected='true']
) {
  /* Active/selected tab: solid brand green — tegas, mudah dibaca, klinisial. */
  color: #ffffff !important;
  background: #0b7a4b !important;
  box-shadow:
    0 2px 8px rgba(11,122,75,.25),
    0 1px 2px rgba(0,0,0,.06) !important;
}

/* Header, quick-nav and theme controls: same material language, no blue glow. */
header.kaca :where(.header-icon-btn, button[aria-label^='Search'], button[aria-label^='Notifications'], button[aria-label='Toggle theme'], button[aria-label*='tema' i]) {
  border-color: rgba(255,255,255,.11) !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.15), transparent 34%),
    linear-gradient(145deg, rgba(43,43,43,.80), rgba(29,29,29,.76)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -5px 12px rgba(0,0,0,.22),
    0 8px 24px rgba(0,0,0,.24) !important;
}

html:not(.dark) header.kaca :where(.header-icon-btn, button[aria-label^='Search'], button[aria-label^='Notifications'], button[aria-label='Toggle theme'], button[aria-label*='tema' i]) {
  background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(232,235,233,.80)) !important;
  box-shadow:
    -7px -7px 20px rgba(255,255,255,.72),
    8px 8px 22px rgba(13,39,26,.08),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

/* Navigation selection uses green as the single focal state. */
[data-pintasan] a[aria-current='page'],
nav[aria-label='Home spaces'] [role='tab'][aria-selected='true'],
aside.sticky[class*='h-screen'] nav a[aria-current='page'] {
  border-color: rgba(37,209,98,.34) !important;
  background:
    radial-gradient(100% 140% at 24% 0%, rgba(255,255,255,.12), transparent 52%),
    rgba(37,209,98,.13) !important;
  color: #66e793 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(37,209,98,.08) !important;
}

html:not(.dark) [data-pintasan] a[aria-current='page'],
html:not(.dark) nav[aria-label='Home spaces'] [role='tab'][aria-selected='true'],
html:not(.dark) aside.sticky[class*='h-screen'] nav a[aria-current='page'] {
  color: #0d7a36 !important;
  background: rgba(37,209,98,.11) !important;
}

/* v45 press ripple: white specular + green energy, no cyan/violet cast. */
#pmd-liquid-press-layer {
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.82) 0 7%, rgba(255,255,255,.26) 15%, transparent 31%),
    radial-gradient(circle at 58% 58%, rgba(37,209,98,.24), rgba(37,209,98,.08) 47%, transparent 72%) !important;
  border-color: rgba(255,255,255,.24) !important;
  box-shadow:
    0 0 0 1px rgba(37,209,98,.08),
    0 12px 42px rgba(37,209,98,.16),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}

#pmd-liquid-morph-layer {
  background:
    radial-gradient(18rem 8rem at 18% 0%, rgba(255,255,255,.14), transparent 62%),
    radial-gradient(15rem 9rem at 100% 100%, rgba(37,209,98,.12), transparent 70%),
    linear-gradient(135deg, rgba(43,43,43,.94), rgba(29,29,29,.92) 55%, rgba(18,20,19,.96)) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow:
    0 26px 80px rgba(0,0,0,.42),
    0 0 38px rgba(37,209,98,.10),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.pmd-liquid-morph-orb {
  background:
    radial-gradient(circle at 32% 24%, #fff 0 8%, rgba(255,255,255,.30) 13%, transparent 31%),
    radial-gradient(circle at 64% 68%, #1aa94c, transparent 64%),
    var(--pmd-ref-green) !important;
  box-shadow: 0 0 26px rgba(37,209,98,.22), inset 0 1px 1px rgba(255,255,255,.62) !important;
}

.pmd-liquid-morph-trace::after {
  background: linear-gradient(90deg, transparent, rgba(37,209,98,.96), rgba(255,255,255,.82), transparent) !important;
}

/* Press/hover polish stays restrained; no cartoon bounce or neon blast. */
@media (hover:hover) and (pointer:fine) {
  html.pmd-liquid-actions-v45 [data-pmd-liquid-action]:not(:disabled):not([aria-disabled='true']):hover {
    filter: saturate(1.03) brightness(1.035) !important;
  }
}

html.pmd-liquid-actions-v45 [data-pmd-liquid-action].pmd-liquid-pressed {
  filter: saturate(1.06) brightness(1.04) !important;
  outline-color: rgba(37,209,98,.50) !important;
}

html.pmd-liquid-actions-v45 [data-pmd-liquid-action].pmd-liquid-focus:focus-visible {
  outline-color: rgba(37,209,98,.88) !important;
  box-shadow: 0 0 0 4px rgba(37,209,98,.13) !important;
}

/* Touch target and disabled-state safeguards. */
@media (pointer: coarse) {
  button:not([aria-hidden='true']),
  [role='button']:not([aria-hidden='true']) { min-height: 44px; }
}

button:disabled,
button[aria-disabled='true'],
[role='button'][aria-disabled='true'] {
  filter: saturate(.55) opacity(.58) !important;
  box-shadow: none !important;
}

@media (prefers-contrast: more) {
  html.pmd-liquid-actions-v45 :where(button[aria-pressed='true'], button[aria-selected='true'], [role='tab'][aria-selected='true']) {
    border-color: var(--pmd-ref-green) !important;
    box-shadow: 0 0 0 2px rgba(37,209,98,.32) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.pmd-liquid-actions-v45 [data-pmd-liquid-action] {
    transition: none !important;
  }
}