/*
  Admin-only brand pins.

  WHY THIS FILE IS UNLAYERED: madmin's reset ships unlayered CSS
  (`* { border-width: 0 }`, `a { color: var(--primary-color) }`), and unlayered
  rules out-cascade every Tailwind v4 layer. So inside /madmin the brand system
  loses exactly two things — borders and link color — and only unlayered rules
  can win them back.

  WHY EVERY SELECTOR IS SCOPED: `stylesheet_link_tag :app` bundles EVERY
  stylesheet in the load path, so this file is served on public pages too.
  Unlayered rules on a shared class (`.wrap a { color: inherit }`) therefore
  leak out and beat the public site's own components — that is how the header's
  "Get the dispatch" button lost its paper text and turned black on clay.

  Only these roots may start a selector here, because none of them exists in a
  public view (admin_css_scoping_test.rb enforces both halves of that):
    .admin-surface — our own operator pages; add it alongside `wrap`
    #sidebar, #navbar, .table-scroll — madmin's own chrome
*/

.admin-surface a { color: inherit; }
.admin-surface a.text-oak { color: var(--color-oak); }

.admin-surface .card { border: 1px solid var(--color-limestone); }
.admin-surface .desk-row { border: 1px solid var(--color-limestone); }
.admin-surface .desk-row:hover { border-color: var(--color-dust); }

.admin-surface .desk-count { border: 2px solid var(--color-ink); }
.admin-surface .desk-row-overdue .desk-count { border-color: var(--color-clay-deep); }

.admin-surface .desk-dateline { border-block: 1px solid var(--color-ink); }
.admin-surface .desk-leader { border-bottom: 2px dotted var(--color-dust); }
.admin-surface .desk-stamp { border: 2px solid currentColor; }
.admin-surface .desk-allclear { border: 4px solid var(--color-oak-deep); }
.admin-surface .road { border-top: 2px dashed var(--color-dust); }

.admin-surface .chip { border: 1px solid var(--color-limestone); color: var(--color-ink-soft); }
/* Unlayered and more specific, so it beat `text-cream` on a selected chip and
   painted ink on ink. Anything that sets .chip's colour here has to answer for
   the selected state too, or the utility that looks like it should win never does. */
.admin-surface .chip-active,
.admin-surface a.chip-active:hover {
  background-color: var(--color-oak);
  border-color: var(--color-oak);
  color: var(--color-paper);
}
.admin-surface a.chip:hover { color: var(--color-oak-deep); border-color: var(--color-oak); }

.admin-surface .marker { border: 2px solid var(--color-ink); }
.admin-surface .field { border: 1px solid var(--color-limestone); }

/* ---- madmin's own chrome ---- */

/*
  The show page prints one label/value row per attribute. madmin pins the label
  column at 16rem and doesn't wrap it, which was fine at its own font size —
  loading the brand serif (17px) pushed long labels straight across their value.
  Wrap them, top-align the pair, and set labels in the mono field-note voice.

  Scoped via :has(th.label) because only the show page has that column; index
  tables must keep auto layout so columns size to content and .table-scroll
  scrolls them.
*/
.table-scroll table:has(th.label) { width: 100%; }

.table-scroll th.label {
  width: 15rem;
  white-space: normal;
  overflow-wrap: break-word;
  vertical-align: top;
  padding: 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.table-scroll table:has(th.label) td {
  vertical-align: top;
  padding: 0.75rem 1rem;
  overflow-wrap: break-word;
}

/* Index tables: keep headers on one line and let the container scroll. */
.table-scroll th { vertical-align: bottom; white-space: nowrap; }
.table-scroll th.label { white-space: normal; }

/* ---- sidebar: groups you can scan, one obvious "you are here" ---- */

#sidebar { background-color: var(--color-paper); }

#sidebar nav h4 {
  margin: 1.5rem 0 0.35rem;
  padding: 0 0.5rem 0.35rem;
  border-bottom: 1px dashed var(--color-dust);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dust);
}

#sidebar nav a {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-ink);
  padding: 0.4rem 0.6rem;
  border-left: 2px solid transparent;
  border-radius: 0 0.375rem 0.375rem 0;
}

/*
  madmin writes these nested — `#sidebar { nav { a { &:hover / &.active } } }` —
  and a nested `&` carries the specificity of its whole parent selector, so their
  rules outrank an identical-looking flat one no matter the load order. Only the
  background is contested (they set no color), so !important on that single
  declaration is the least confusing way to win it. Without it the active item
  renders paper text on their light grey: invisible.
*/
#sidebar nav a:hover {
  background-color: var(--color-cream) !important;
  border-left-color: var(--color-sage);
  color: var(--color-oak-deep);
}

/* The current page is the one thing the eye should find without reading. */
#sidebar nav a.active {
  background-color: var(--color-oak) !important;
  border-left-color: var(--color-oak-deep);
  color: var(--color-paper);
  font-weight: 700;
}

#sidebar footer a { color: var(--color-dust); font-size: 0.8rem; }