/*
 * Admin "user-facing preview" — collision overrides.
 *
 * Loaded ONLY on admin pages that re-use a user-facing partial inside the
 * Administrate chrome (currently: admin/analyses/show — see content_for(:stylesheet)
 * in app/views/admin/analyses/show.html.erb).
 *
 * Load order on those pages is:
 *   1. administrate/application.css   (admin chrome)
 *   2. admin.css                      (project admin overrides)
 *   3. theme.css                      (CSS custom properties)
 *   4. app.css                        (user-facing UI; needed for .analysis-* etc.)
 *   5. admin_user_preview.css         (THIS FILE — restore admin chrome)
 *
 * app.css contains a handful of top-level rules (body, a, table, .app-container,
 * .main-content, .navigation, .button) that collide with Administrate's chrome.
 * This file re-asserts the admin defaults so the admin layout still renders
 * correctly while the user-facing partial inside .meal-analysis gets its styles.
 *
 * Keep this file minimal. Only neutralize what actually collides — anything
 * scoped under .meal-analysis (the preview wrapper) should keep app.css behavior.
 */

/* ── Body: restore admin background/color ───────────────────────────────── */
body {
  background: #f7f8fb;
  color: #293f54;
  font-family: -apple-system, blinkmacsystemfont, "Segoe UI", "Roboto", "Oxygen",
               "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
               "Helvetica Neue", sans-serif;
}

/* ── Links: restore Administrate's blue link color outside the preview ──── */
:not(.meal-analysis) > a,
.app-container a:not(.meal-analysis a) {
  /* Selector intentionally narrow: only re-apply admin link color to chrome,
     leave links inside .meal-analysis (the user-facing preview) untouched. */
}

/* Catch-all: admin chrome links default back to admin blue. app.css resets
   `a { color: inherit; }` which would make sidebar links inherit body text. */
a {
  color: #1976d2;
}
a:hover { color: #13599e; }

/* Inside the user-facing preview wrapper, restore inherit (app.css behavior). */
.meal-analysis a,
.meal-analysis a:hover {
  color: inherit;
}

/* ── Layout containers: app.css declares grid-based .app-container and a
      different .main-content scheme. Restore Administrate's flex layout. ── */
.app-container {
  align-items: stretch;
  display: flex;
  grid-template-columns: none; /* unset the grid declared in app.css */
  margin-left: auto;
  margin-right: auto;
  max-width: 100rem;
  min-height: 100vh;
  padding: 1.5em;
  width: auto;
  gap: 0;
}

.main-content {
  background-color: #ffffff;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.2);
  flex: 1 1 100%;
  min-width: 800px;
  padding-bottom: 10vh;
}

/* ── Sidebar navigation: app.css styles .navigation as a card; admin uses
      a flat sidebar. Restore admin's behavior. ─────────────────────────── */
.navigation {
  background: transparent;
  border: 0;
  border-radius: 0;
  flex: 1 0 10rem;
  padding: 1.5em;
  padding-left: 0;
  position: static;
  align-self: auto;
}

/* Admin sidebar links must NOT pick up app.css's .navigation__link button
   pill styling. Reset to flat link appearance. */
.navigation__link {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: block;
  font-size: 1em;
  font-weight: 400;
  padding: 0.5em 1em;
  color: #1976d2;
}

/* ── Tables: app.css sets `table { width: 100%; border-collapse: collapse }`
      which matches admin's intent, but `thead th` / `tbody td` colour rules
      from app.css can leak. Restore admin defaults. ────────────────────── */
thead th {
  background: transparent;
  border-bottom: 1px solid #dfe0e1;
  color: inherit;
  padding: 0.75em;
}

tbody td {
  border-bottom: 1px solid #f0f0f0;
  padding: 0.75em;
}

tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}