/**
 * @file hivelog.css
 * Beeswax skin for the HiveLog module — gives every HiveLog surface the
 * Fraunces / IBM Plex + beeswax / pine identity of the dashboard mockup
 * (hivelog/docs/project-management/projects/dashboard-landing-page-mockup.html).
 *
 * ADR-0060 / tasks 0061-0062. Plain CSS, loaded globally from the
 * theme's `global` library (beeswax.libraries.yml) — not via
 * `libraries-extend`, which does not reach the module CSS that the
 * entity-list SDCs pull in only transitively. Every selector here is
 * `.hivelog-*`- or `body.hivelog-page`-scoped, so loading it site-wide
 * is inert off HiveLog. preprocess: false — edit without rebuilding.
 *
 * Rules here mirror the module's own selectors so, loading after them,
 * equal-specificity wins. Colours come from the --bw-* tokens in
 * src/theme.css; where the module exposes tokens (--hivelog-btn-* and,
 * since hivelog 1.8.3, the --hivelog-* surface set) we redefine the
 * token, not the rule — the blocks below only carry what the token
 * surface can't express (type, layout, additive hovers, and the few
 * spots where the skin deliberately picks a different role than the
 * module's own token).
 */

/* ------------------------------------------------------------------ *
 * Button tokens — re-skin every HiveLog button at once (ADR-0012).
 * ------------------------------------------------------------------ */
:root {
  --hivelog-btn-bg: var(--bw-surface-2);
  --hivelog-btn-fg: var(--bw-ink);
  --hivelog-btn-border: var(--bw-hairline);
  --hivelog-btn-bg-hover: var(--bw-accent-tint);
  --hivelog-btn-border-hover: var(--bw-ink-faint);

  --hivelog-btn-primary-bg: var(--bw-accent);
  --hivelog-btn-primary-fg: #ffffff;
  --hivelog-btn-primary-border: var(--bw-accent);
  --hivelog-btn-primary-bg-hover: var(--bw-accent-hover);
  --hivelog-btn-primary-border-hover: var(--bw-accent-hover);

  --hivelog-btn-danger-bg: var(--bw-critical);
  --hivelog-btn-danger-fg: #ffffff;
  --hivelog-btn-danger-border: var(--bw-critical);
  --hivelog-btn-danger-bg-hover: var(--bw-critical-hover);
  --hivelog-btn-danger-border-hover: var(--bw-critical-hover);

  --hivelog-btn-radius: 6px;
}

.dark {
  --hivelog-btn-primary-fg: #12201a;
  --hivelog-btn-danger-fg: #12201a;
}

/* ------------------------------------------------------------------ *
 * Surface token bridge (hivelog >= 1.8.3, task 0062).
 *
 * The module's dashboard / attention / stat-tile / split / entity-table
 * / filter-form / report CSS reads these --hivelog-* properties; point
 * them at the beeswax palette and every one of those surfaces re-skins
 * with no per-selector rule. --bw-* already flip in .dark, so this
 * follows the colour scheme for free. Scoped to body.hivelog-page (not
 * :root) so the mapping can't leak to a non-HiveLog page that happens
 * to reuse a class name.
 *
 * Where the skin wants a *different* role than the module's token (the
 * pine hexagon vs --hivelog-warning, the muted week badge and tile
 * label, the pine upcoming week number) the deviating rule is kept in
 * its section below.
 * ------------------------------------------------------------------ */
body.hivelog-page {
  --hivelog-surface: var(--bw-surface);
  --hivelog-surface-2: var(--bw-surface-2);
  --hivelog-ground: var(--bw-surface-2);
  --hivelog-ink: var(--bw-ink);
  --hivelog-ink-muted: var(--bw-ink-muted);
  --hivelog-ink-faint: var(--bw-ink-faint);
  --hivelog-hairline: var(--bw-hairline);
  --hivelog-border: var(--bw-hairline);
  --hivelog-rule: var(--bw-hairline);
  --hivelog-critical: var(--bw-critical);
  --hivelog-critical-tint: var(--bw-critical-tint);
  --hivelog-warning: var(--bw-warning);
  --hivelog-warning-tint: var(--bw-warning-tint);
}

/* ------------------------------------------------------------------ *
 * Typography — HiveLog scope only.
 * ------------------------------------------------------------------ */
.hivelog-dashboard,
.hivelog-attention,
.hivelog-stat-tiles,
[class*="hivelog-inventory-report"],
[class^="hivelog-"][class*="-table"] {
  font-family: var(--font-body);
  color: var(--bw-ink);
}

.hivelog-masthead__word,
.hivelog-attention__heading,
.hivelog-dashboard__block-heading {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.005em;
}

.hivelog-dashboard__week,
.hivelog-attention__count,
.hivelog-attention__chip,
.hivelog-stat-tile__value,
.hivelog-stat-tile__sub,
.hivelog-upcoming__wk,
.hivelog-recent__when {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * Masthead. The hexagon mark is pine, not the module's amber
 * --hivelog-warning — kept here as a deliberate deviation.
 * ------------------------------------------------------------------ */
.hivelog-masthead__mark {
  color: var(--bw-accent);
}

/* ------------------------------------------------------------------ *
 * Header strip — week badge. Deviates from the token surface: a white
 * ground (not surface-2), muted text (not --hivelog-ink) and a softer
 * radius.
 * ------------------------------------------------------------------ */
.hivelog-dashboard__week {
  border-radius: 5px;
  background: var(--bw-surface);
  color: var(--bw-ink-muted);
}

/* CBR line — border + background now come from the token bridge
 * (--hivelog-border / --hivelog-surface-2), and the link colour from the
 * --hivelog-btn-primary-bg bridge. Kept: the softer radius and muted
 * text, since the module hard-codes a 4px radius and color: #374151. */
.hivelog-cbr-summary {
  border-radius: 6px;
  color: var(--bw-ink-muted);
}

/* ------------------------------------------------------------------ *
 * "Needs attention". Panel / row / chip colours all come from the
 * token bridge now; only the drop shadow and the hover affordances
 * (the module has none) live here. The chip text is muted rather than
 * the module's --hivelog-ink.
 * ------------------------------------------------------------------ */
.hivelog-attention {
  box-shadow: var(--shadow);
}

.hivelog-attention__row:hover {
  background: var(--bw-surface-2);
}

.hivelog-attention__chip {
  color: var(--bw-ink-muted);
  letter-spacing: 0.04em;
}

.hivelog-attention__ctx a:hover {
  color: var(--bw-accent);
}

/* ------------------------------------------------------------------ *
 * Stat tiles. Grid / tile / hover / sub colours come from the token
 * bridge; the label is deliberately fainter than the module's
 * --hivelog-ink-muted, and the value gets the lighter weight + tighter
 * tracking of the mockup.
 * ------------------------------------------------------------------ */
.hivelog-stat-tile__value {
  font-weight: 500;
  letter-spacing: -0.01em;
}

.hivelog-stat-tile__label {
  color: var(--bw-ink-faint);
  letter-spacing: 0.06em;
}

/* ------------------------------------------------------------------ *
 * "Upcoming" / "Recent activity" split. Row rules and the empty line
 * come from the token bridge; the week number is pine and the "when" /
 * "where" columns are faint — both deviations from the module tokens.
 * ------------------------------------------------------------------ */
.hivelog-upcoming__wk {
  color: var(--bw-accent);
}

.hivelog-recent__when,
.hivelog-upcoming__where {
  color: var(--bw-ink-faint);
}

/* ------------------------------------------------------------------ *
 * Entity-list tables (hivelog:entity-table SDC) + detail / report
 * tables (hivelog/tables). One surface-2 header, hairline rows, mono
 * numerics.
 * ------------------------------------------------------------------ */
.hivelog-entity-table,
[class^="hivelog-"][class$="-table"] {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
}

.hivelog-entity-table th,
.hivelog-entity-table td,
[class^="hivelog-"][class$="-table"] th,
[class^="hivelog-"][class$="-table"] td {
  padding: 0.55rem 0.85rem;
  vertical-align: top;
}

/* Weak left default so the financial-report tables can right-align their
   figure columns from css/hivelog.tables.css without a specificity war. */
:where(.hivelog-entity-table, [class^="hivelog-"][class$="-table"]) th,
:where(.hivelog-entity-table, [class^="hivelog-"][class$="-table"]) td {
  text-align: left;
}

.hivelog-entity-table thead th,
[class^="hivelog-"][class$="-table"] thead th {
  border-bottom: 1px solid var(--bw-hairline);
  background: var(--bw-surface-2);
  color: var(--bw-ink-faint);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

[class^="hivelog-"][class$="-table"] tr:last-child td {
  border-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Embedded child-list filter form (apiary / hive canonical pages).
 * Panel ground + border come from the token bridge; here we round it
 * a little more than the module's 4px, force the label colour (the
 * module sets an explicit near-black #1a1a1a for contrast on a plain
 * page, which reads heavy on the tinted panel) and give the fields a
 * real border so they read on the panel. Non-layered so they beat
 * Mercury's @layer form rules.
 * ------------------------------------------------------------------ */
.hivelog-filter-form {
  border-radius: 6px;
}

.hivelog-filter-form .form-item label {
  color: var(--bw-ink-muted);
}

.hivelog-filter-form .form-item input,
.hivelog-filter-form .form-item select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--bw-hairline);
  border-radius: 4px;
  background: var(--bw-surface);
  color: var(--bw-ink);
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.4;
}

.hivelog-filter-form .form-item input:focus,
.hivelog-filter-form .form-item select:focus {
  outline: none;
  border-color: var(--bw-accent);
  box-shadow: 0 0 0 2px var(--bw-accent-tint);
}

/* ------------------------------------------------------------------ *
 * Financial reports (per-apiary + combined). The module
 * (css/hivelog.tables.css) owns the right-alignment and the total-row
 * emphasis; here we only recolour and set the mono figure face. Rules
 * target cells directly so they beat the body face the generic table
 * rule above puts on the <table> element.
 * ------------------------------------------------------------------ */
.hivelog-inventory-report-table td,
.hivelog-inventory-report-table th {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Text columns (apiary name / year in the labelled summary + trend,
   Item / Type / Quantity in the breakdown) go back to the body face. */
.hivelog-inventory-report-table--labelled td:first-child,
.hivelog-inventory-report-table--labelled th:first-child,
.hivelog-inventory-report-trend .hivelog-inventory-report-table td:first-child,
.hivelog-inventory-report-trend .hivelog-inventory-report-table th:first-child,
.hivelog-inventory-report-breakdown .hivelog-inventory-report-table td:not(:last-child),
.hivelog-inventory-report-breakdown .hivelog-inventory-report-table th:not(:last-child) {
  font-family: var(--font-body);
}

.hivelog-inventory-report-total td {
  background: var(--bw-surface-2);
}

/* ------------------------------------------------------------------ *
 * Plain entity-list collections — /hivelog/hives, /hivelog/inspections,
 * /hivelog/calendar-actions, … These use a core EntityListBuilder, so
 * the markup is a bare <table class="responsive-enabled"> with no
 * hivelog class. Scoped to the `hivelog-page` body class added by
 * beeswax's preprocess_html so the rest of the site is untouched, and
 * to `table:not([class*="hivelog"])` so the module's own classed tables
 * (dashboard, detail, financial report) keep their own styling —
 * including their right-aligned figure columns.
 * ------------------------------------------------------------------ */
body.hivelog-page {
  background: var(--bw-ground);
  color: var(--bw-ink);
  font-family: var(--font-body);
}

/* Also now covers the Financial Report's "Breakdown by item" / "5-Year
   Trend" headings — hivelog task 0128 moved them from h3 to h2, which
   made the old .hivelog-inventory-report-breakdown/-trend h3 selector
   here dead (removed above); this generic rule already produced the
   identical font-family/weight/letter-spacing, so there was no visual
   regression, just an unreachable selector. */
body.hivelog-page h1,
body.hivelog-page h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--bw-ink);
}

/* Link colour goes in the Tailwind `base` layer: unlayered CSS beats every
   layered utility, which made `.text-primary-foreground` lose on Canvas
   buttons (green text on a green button) on HiveLog pages. */
@layer base {
  body.hivelog-page a {
    color: var(--bw-accent);
  }
}

body.hivelog-page .region-content table:not([class*="hivelog"]) {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

body.hivelog-page .region-content table:not([class*="hivelog"]) th,
body.hivelog-page .region-content table:not([class*="hivelog"]) td {
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid var(--bw-hairline);
  text-align: left;
  vertical-align: top;
}

body.hivelog-page .region-content table:not([class*="hivelog"]) thead th {
  border-bottom: 1px solid var(--bw-hairline);
  background: var(--bw-surface-2);
  color: var(--bw-ink-faint);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

body.hivelog-page .region-content table:not([class*="hivelog"]) tbody tr:hover {
  background: var(--bw-surface-2);
}

body.hivelog-page .region-content table:not([class*="hivelog"]) tbody tr:last-child td {
  border-bottom: 0;
}

/* Core list tables sit in a scroll wrapper on some builders; give the
   table itself a hairline frame so it reads as a panel like the
   dashboard surfaces. */
body.hivelog-page .region-content table.responsive-enabled {
  border: 1px solid var(--bw-hairline);
  border-radius: 6px;
  overflow: hidden;
}

/* Pager. */
body.hivelog-page .pager__link {
  color: var(--bw-accent);
}

/* ------------------------------------------------------------------ *
 * Vertical tabs on entity edit/add forms (queen, hive, inspection …).
 * Core (core/misc/vertical-tabs.css) paints these flat #ccc / #eee
 * with a dotted hover outline. Keep core's left-rail layout but
 * recolour the rail, the tabs and the selected state to the beeswax
 * surface / ink / pine palette so the forms match the rest of
 * HiveLog. Non-layered + `body.hivelog-page` prefix so these beat the
 * un-layered core rules on load order and specificity.
 * ------------------------------------------------------------------ */
body.hivelog-page .vertical-tabs {
  border: 1px solid var(--bw-hairline);
  border-radius: 6px;
  background: var(--bw-surface);
}

body.hivelog-page .vertical-tabs__menu {
  border: 1px solid var(--bw-hairline);
  border-radius: 6px 0 0 6px;
  background: var(--bw-surface-2);
}

body.hivelog-page .vertical-tabs__menu-item {
  border: 0;
  border-bottom: 1px solid var(--bw-hairline);
  background: transparent;
}

body.hivelog-page .vertical-tabs__menu-item:last-child {
  border-bottom: 0;
}

body.hivelog-page .vertical-tabs__menu-item a {
  padding: 0.6rem 0.85rem;
  color: var(--bw-ink-muted);
}

body.hivelog-page .vertical-tabs__menu-item a:hover {
  outline: 0;
  background: var(--bw-surface);
}

body.hivelog-page .vertical-tabs__menu-item a:focus-visible {
  outline: 2px solid var(--bw-accent);
  outline-offset: -2px;
}

body.hivelog-page .vertical-tabs__menu-item.is-selected {
  border-right: 0;
  border-left: 3px solid var(--bw-accent);
  background: var(--bw-surface);
}

body.hivelog-page .vertical-tabs__menu-item.is-selected a {
  padding-left: calc(0.85rem - 3px);
}

body.hivelog-page .vertical-tabs__menu-item-title {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--bw-ink);
}

body.hivelog-page .vertical-tabs__menu-item.is-selected .vertical-tabs__menu-item-title {
  color: var(--bw-accent);
}

body.hivelog-page .vertical-tabs__menu-item-summary {
  margin-top: 0.15rem;
  color: var(--bw-ink-faint);
  font-size: 0.8rem;
}

body.hivelog-page .vertical-tabs__pane {
  padding: 0.5rem 1.25rem 1rem;
}