:root {
  --cadd-bg: #f6f9fb;
  --cadd-surface: rgba(255, 255, 255, 0.94);
  --cadd-surface-strong: #ffffff;
  --cadd-border: rgba(0, 55, 84, 0.12);
  --cadd-text: #102033;
  --cadd-muted: #5b6a78;
  --cadd-primary: #003754;
  --cadd-primary-strong: #00263b;
  --cadd-accent: #009aa9;
  --cadd-accent-soft: #e7f7f8;
  --cadd-shadow: 0 12px 40px rgba(0, 55, 84, 0.10);
  --cadd-radius: 18px;
}

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

body {
  font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--cadd-text);
  background:
    radial-gradient(circle at top left, rgba(0, 55, 84, 0.10), transparent 32%),
    radial-gradient(circle at top right, rgba(0, 154, 169, 0.12), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, var(--cadd-bg) 100%);
}

.app-brand {
  letter-spacing: -0.04em;
}

.navbar {
  box-shadow: 0 10px 30px rgba(0, 55, 84, 0.18);
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: rgba(255, 255, 255, 0.96) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: #ffffff !important;
  opacity: 0.9;
}

.cadd-card,
.card {
  border: 1px solid var(--cadd-border);
  border-radius: var(--cadd-radius);
  background: var(--cadd-surface);
  box-shadow: var(--cadd-shadow);
  backdrop-filter: blur(12px);
}

.cadd-card:hover,
.card:hover {
  box-shadow: 0 18px 48px rgba(0, 55, 84, 0.16);
}

.cadd-card .card-header,
.card .card-header {
  background: linear-gradient(180deg, #ffffff 0%, #f2f8fb 100%);
  border-bottom: 1px solid var(--cadd-border);
  font-weight: 650;
  color: var(--cadd-text);
  padding: 1rem 1.15rem;
}

.cadd-card .card-body,
.card .card-body {
  padding: 1rem 1.15rem 1.15rem;
}

.cadd-stack {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
  align-items: stretch;
}

.cadd-stack > * {
  width: 100%;
}

.cadd-stack .card {
  width: 100%;
}

.plot-card {
  width: 100%;
}

.plot-card .shiny-bound-output,
.plot-card .html-widget,
.plot-card .html-fill-item,
.plot-card .html-fill-container,
.plot-card .shiny-plot-output,
.plot-card .js-plotly-plot {
  width: 100% !important;
  max-width: 100% !important;
}

/* Specific Genes: ensure metrics plot stretches across the full card width */
#basic_plot_genes,
#basic_plot_genes > div,
#basic_plot_genes .html-widget,
#basic_plot_genes .html-fill-item,
#basic_plot_genes .html-fill-container,
#basic_plot_genes .plot-container,
#basic_plot_genes .svg-container,
#basic_plot_genes .main-svg {
  width: 100% !important;
  max-width: none !important;
}

.content-container {
  max-width: 1080px;
  margin: 24px auto;
}

.content-container h1,
.content-container h2,
.content-container h3,
.content-container h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.content-container p {
  line-height: 1.65;
  margin-bottom: 0.9rem;
}

.content-container table {
  width: 100%;
  border-collapse: collapse;
}

.content-container table,
.content-container th,
.content-container td {
  border: 1px solid rgba(16, 32, 51, 0.10);
}

.content-container th,
.content-container td {
  padding: 8px 10px;
  text-align: left;
}

.content-container thead th {
  background: #f4f7fb;
  font-weight: 650;
}

.shiny-plot-output,
.js-plotly-plot {
  width: 100% !important;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,251,255,0.95));
}

.form-control,
.form-select,
.input-group-text {
  border-radius: 12px;
  border-color: rgba(16, 32, 51, 0.14);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(16, 42, 67, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(16, 42, 67, 0.12);
}

.btn-primary {
  background: var(--cadd-primary);
  border-color: var(--cadd-primary);
  border-radius: 12px;
  font-weight: 650;
  box-shadow: 0 8px 18px rgba(0, 55, 84, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--cadd-primary-strong);
  border-color: var(--cadd-primary-strong);
}

.support-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 14px;
}

.support-label-prefix {
  font-weight: 650;
  color: var(--cadd-text);
}

.support-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
}

.support-pill.support-low {
  background: #fdecea;
  color: #af1821;
  border-color: #ffb0ac;
}

.support-pill.support-moderate {
  background: #fff4db;
  color: #9d7220;
  border-color: #f0d08a;
}

.support-pill.support-good {
  background: #e7f7f8;
  color: #003754;
  border-color: #009aa9;
}

.support-info {
  cursor: help;
  color: var(--cadd-muted);
  font-size: 0.86rem;
  border-bottom: 1px dotted #94a3b8;
  user-select: none;
}

.ag-root,
.data-grid,
.datagrid {
  border: 1px solid rgba(16, 32, 51, 0.10);
  border-radius: 14px;
  overflow: hidden;
}

@media (max-width: 768px) {
  body {
    background: linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%);
  }

  .cadd-card,
  .card {
    border-radius: 14px;
  }

  .content-container {
    margin: 12px;
  }
}