/* ============================================================================
   polish.css — subtle "sheen" / soft-depth visual layer (Phase 890)
   ----------------------------------------------------------------------------
   A gentle, professional polish for a clinical app: a faint top-light sheen
   and soft shadows on buttons + icons, light elevation on cards/panels, and a
   whisper of depth on headings. Everything is layered so it does NOT change
   the app's existing colors:
     • buttons keep their background-COLOR; we only add a translucent
       background-IMAGE gradient on top + box-shadow.
     • effects are deliberately understated. To dial the whole thing up/down,
       tweak the --sheen-* values below. To remove it entirely, delete the
       <link> to this file in index.html.
   ============================================================================ */
:root {
  --sheen-top:    rgba(255,255,255,0.16);  /* top highlight strength */
  --sheen-bottom: rgba(0,0,0,0.06);        /* bottom shade strength */
  --sheen-shadow: 0 1px 2px rgba(0,0,0,0.12);
  --sheen-shadow-lg: 0 2px 6px rgba(0,0,0,0.10);
}

/* ---- Buttons: top-light sheen + soft drop shadow + pressed feedback ----
   background-image composites over each button's own background-color, so
   colored buttons (navy, etc.) and white buttons both get the effect without
   losing their hue. */
button {
  background-image: linear-gradient(to bottom, var(--sheen-top), var(--sheen-bottom)) !important;
  box-shadow: var(--sheen-shadow), inset 0 1px 0 rgba(255,255,255,0.22);
  transition: box-shadow 0.12s ease, transform 0.06s ease;
}
button:hover {
  box-shadow: var(--sheen-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.28);
}
button:active {
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.22);
  transform: translateY(0.5px);
}

/* The sidebar emoji nav + topbar icon buttons read as flat glyphs — give the
   icons themselves a faint drop shadow so they feel raised, but keep their
   button backgrounds transparent (no sheen box on these). */
#cf-sidebar .cf-nav-btn,
#cf-topbar button {
  background-image: none !important;
  box-shadow: none;
}
#cf-sidebar .cf-nav-btn { text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
#cf-topbar button:active { transform: translateY(0.5px); }

/* ---- Top bar + sidebar: subtle vertical gradient + edge shadow for depth -- */
#cf-topbar {
  background-image: linear-gradient(to bottom, #ffffff, #f3f5f8) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#cf-sidebar {
  background-image: linear-gradient(to bottom, #33455f, #283750) !important;
  box-shadow: 1px 0 4px rgba(0,0,0,0.18);
}

/* ---- Headings: a whisper of depth (very light, never embossed-looking) ---- */
h1, h2, h3 { text-shadow: 0 1px 1px rgba(0,0,0,0.06); }

/* ---- Cards / panels: soft elevation so white boxes lift off the page.
   Targets the common "white box with rounded border" pattern used across the
   app (patient list, calendar wrap, preview panes, inbox rows container). --- */
#pat-list,
#cal-week-wrap,
#pat-task-list,
#pat-details-body,
#dcm-list,
#pat-bill-list {
  box-shadow: var(--sheen-shadow-lg);
}

/* Status / count chips + badges get a tiny lift so they pop. */
[id$="-badge"], .cf-inbox-ico { text-shadow: 0 1px 1px rgba(0,0,0,0.15); }

/* On mobile keep it lighter — small screens + heavy shadows feel busy. */
@media (max-width: 760px) {
  :root { --sheen-shadow: 0 1px 1px rgba(0,0,0,0.10); --sheen-shadow-lg: 0 1px 3px rgba(0,0,0,0.08); }
  h1, h2, h3 { text-shadow: none; }
}

/* Patient chart header: single horizontally-scrollable row of icon-only
   action buttons (Phase 822b). Buttons never shrink; the row scrolls. */
#pat-actions { scrollbar-width: thin; }
#pat-actions::-webkit-scrollbar { height: 6px; }
#pat-actions::-webkit-scrollbar-thumb { background: #c8d0dc; border-radius: 3px; }
#pat-actions > button { flex: 0 0 auto; font-size: 1.15em; line-height: 1; }

/* Prior-notes / Files reference panels: tapping a row shouldn't start a text
   selection (which on mobile highlighted random text across the page). */
#cf-prior-panel, #cf-cab-panel,
#cf-prior-list, #cf-cab-list,
.cf-prior-row, .cf-cab-row {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}