/* ============================================================================
   radionAI — YashTech Ltd. AI Labs
   Translucent "glass" surface, light and dark, on Apple's system font stack.
   Loaded by app.py via gr.Blocks(css=...). Everything is driven by the two
   variable blocks below, so a re-skin is a colour edit, not a CSS rewrite.
   ========================================================================= */

:root,
.gradio-container {
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --glass-blur: 22px;
  --ink: #1d1d1f;
  --ink-soft: #6e6e73;
  --accent: #0071e3;
  --danger: #d70015;
  --page: linear-gradient(160deg, #f5f5f7 0%, #e8eef5 55%, #eef1f6 100%);
  --radius: 18px;
}

.dark,
.dark .gradio-container {
  --glass-bg: rgba(28, 28, 30, 0.58);
  --glass-bg-strong: rgba(28, 28, 30, 0.84);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --ink: #f5f5f7;
  --ink-soft: #a1a1a6;
  --accent: #0a84ff;
  --danger: #ff453a;
  --page: linear-gradient(160deg, #000000 0%, #14161a 55%, #1c1c1e 100%);
}

body,
.gradio-container {
  background: var(--page) fixed !important;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
.prose h1,
.prose h2 {
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}

/* ---------------------------------------------------------------- surfaces */

/* Blur is applied ONLY to the outer chrome. An element with backdrop-filter
   becomes a containing block and a new stacking context, so any dropdown,
   tooltip or modal rendered inside it as an overlay gets clipped or painted
   underneath — which looks exactly like "the dropdown won't open". Inner
   blocks get the translucency without the filter. */
.gradio-container .block,
.gradio-container .form,
.gradio-container .panel {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow);
}

#ct-header,
#ct-admin-card {
  background: var(--glass-bg) !important;
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--glass-shadow);
}

/* ---------------------------------------------------------------- overlays */

/* The option list must escape its parent and paint above everything. */
.gradio-container .block:has(ul.options),
.gradio-container .form:has(ul.options),
.gradio-container .wrap:has(ul.options) {
  overflow: visible !important;
}

ul.options,
.gradio-container ul.options {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--glass-shadow);
  color: var(--ink) !important;
  z-index: 2000 !important;
}

ul.options li.item {
  color: var(--ink) !important;
  border-radius: 8px;
}

ul.options li.item:hover,
ul.options li.item.selected,
ul.options li.item.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.gradio-container .tabs>.tab-nav {
  background: var(--glass-bg-strong);
  backdrop-filter: saturate(180%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(180%) blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}

.gradio-container .tabs>.tab-nav>button {
  border: none !important;
  border-radius: 999px !important;
  color: var(--ink-soft);
  font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease;
}

.gradio-container .tabs>.tab-nav>button.selected {
  background: var(--glass-bg-strong);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------------- controls */

.gradio-container button.primary {
  background: var(--accent) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 590;
  box-shadow: 0 2px 10px rgba(0, 113, 227, 0.3);
}

.gradio-container button.secondary {
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  color: var(--ink) !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select {
  border-radius: 12px !important;
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-border) !important;
}

/* ---------------------------------------------------------------- header */

#ct-header {
  padding: 14px 20px;
  margin-bottom: 12px;
}

#ct-identity {
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 500;
}

#ct-theme-toggle button {
  min-width: 44px;
  border-radius: 999px !important;
}

#ct-disclaimer {
  border-left: 3px solid var(--danger);
  padding-left: 12px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

/* Disabled tabs are hidden outright rather than shown greyed: a radiographer
   should not be offered a task the department has switched off. */
.ct-hidden {
  display: none !important;
}

/* Print: strip the glass so a report prints black on white. */
@media print {

  body,
  .gradio-container,
  .gradio-container .block {
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #000 !important;
  }

  .tabs>.tab-nav,
  #ct-header,
  button {
    display: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {

  .gradio-container .block,
  #ct-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--glass-bg-strong) !important;
  }
}