/* ============================================================================
   www/app.css — Minimal Pairs Explorer
   Base styles (Bootstrap 5 / Flatly + Noto Sans).
   Override any rule below for a custom theme without touching app.R.
   For a background-image variant, see the commented section at the bottom.
   ============================================================================ */

/* ── Custom properties (easy theming entry points) ──────────────────────── */
:root {
  --app-title-size:       2rem;  /* navbar title font size */
  --app-header-info-size: 1rem;  /* subtitle / citation in navbar */
  --app-header-info-opacity: 0.80;
  --app-body-font-size:   0.95rem;
  --app-table-font-size:  0.9rem;
  --app-bg-image:         none;     /* set to url('bg.jpg') for image variant */
  --app-bg-overlay:       transparent; /* semi-transparent overlay colour */
}

/* ── Global body ─────────────────────────────────────────────────────────── */
body {
  font-size: var(--app-body-font-size);
  background-image:    var(--app-bg-image);
  background-size:     cover;
  background-position: center center;
  background-attachment: fixed;
}

/* Optional overlay behind content (useful with a background image) */
body::before {
  content:    "";
  position:   fixed;
  inset:      0;
  background: var(--app-bg-overlay);
  pointer-events: none;
  z-index:    0;
}

/* ── Navbar title ────────────────────────────────────────────────────────── */
.app-title {
  font-size:   var(--app-title-size);
  font-weight: 600;
  line-height: 1.3;
}

/* Subtitle / citation displayed inline after the title */
.app-header-info {
  font-size:      var(--app-header-info-size);
  opacity:        var(--app-header-info-opacity);
  vertical-align: middle;
  font-weight:    400;
}

/* ── Data table ──────────────────────────────────────────────────────────── */
body .dataTables_wrapper,
body td {
  font-size: var(--app-table-font-size);
}

/* Prevent value-box row from being compressed by the flex-fill table card */
.stats-row {
  flex-shrink: 0;
}

/* ── Sidebar font size (optional comfort adjustment) ─────────────────────── */
.bslib-sidebar-layout > .sidebar {
  font-size: 0.88rem;
}

/* ============================================================================
   CUSTOM THEME EXAMPLE
   Copy the block below into a separate file (e.g. www/theme-custom.css),
   load it after app.css in app.R:
     tags$link(rel="stylesheet", href="app.css"),
     tags$link(rel="stylesheet", href="theme-custom.css")
   Then adjust the variables and rules to taste.

:root {
  --app-title-size:           1.4rem;
  --app-header-info-size:     0.8rem;
  --app-bg-image:             url('bg.jpg');
  --app-bg-overlay:           rgba(255, 255, 255, 0.55);
}

.app-title {
  font-family: 'Playfair Display', serif;
  color: #ffffff;
}

.app-header-info {
  color: #f0f0f0;
}

   ============================================================================ */