/* ==========================================================================
   inbefore — admin dashboard skin
   --------------------------------------------------------------------------
   A token stylesheet layered on top of Bootstrap 4 / Tabler (bundle.css).
   It never removes anything Bootstrap does; it only re-points the surfaces
   the dashboard actually uses at the same design tokens as the new frontend,
   so admin and site finally look like one product.

   Loaded after bundle.css, so plain specificity wins without !important.

   Structure:
     01. Tokens (shared with the frontend)
     02. Navbar
     03. Sidebar
     04. Content shell & page header
     05. Cards
     06. Tables
     07. Form controls & switches
     08. Buttons
     09. Badges, alerts, dropdowns
     10. Responsive
     11. The reader dashboard
   ========================================================================== */

/* 01. Tokens ============================================================== */

:root {
  color-scheme: light;

  /* Brand — the same deep green as the public site. Links, primary buttons,
     switches, active nav rows and pagination all read from these four. */
  --brand: oklch(0.44 0.09 158);
  --brand-hover: oklch(0.37 0.08 158);
  --brand-soft: oklch(0.955 0.022 158);
  --brand-ink: oklch(1 0 0);

  --bg: oklch(0.985 0.002 260);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.965 0.004 260);
  --text: oklch(0.24 0.021 265);
  --text-strong: oklch(0.17 0.024 265);
  --muted: oklch(0.55 0.019 265);
  --muted-2: oklch(0.66 0.015 265);
  --line: oklch(0.918 0.006 265);
  --line-strong: oklch(0.86 0.008 265);
  /* Section-head rule. Subtle grey: it separates cards, it is not a bar. */
  --rule-strong: oklch(0.8 0.008 265);

  --accent-good: oklch(0.62 0.16 150);
  --accent-warn: oklch(0.72 0.15 75);
  --accent-danger: oklch(0.58 0.2 25);

  /* Admin bar. The public brand's green: the site and the panel it is run
     from are one product. Only the border and the ink are the bar's own. */
  --admin-green: oklch(0.44 0.09 158);
  --admin-green-deep: oklch(0.37 0.08 158);
  --admin-green-ink: oklch(0.99 0.008 158);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px oklch(0.2 0.02 265 / 0.06),
    0 1px 3px oklch(0.2 0.02 265 / 0.04);
  --shadow-md: 0 2px 6px oklch(0.2 0.02 265 / 0.07),
    0 8px 24px oklch(0.2 0.02 265 / 0.06);

  --font: "DM Sans", "Public Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --sidebar-w: 258px;
  --navbar-h: 60px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Opt-in dark admin. Nothing turns this on yet, the tokens are here so a
   future theme switcher only has to flip one attribute. */
[data-theme="dark"] {
  color-scheme: dark;

  --brand: oklch(0.68 0.13 158);
  --brand-hover: oklch(0.75 0.13 158);
  --brand-soft: oklch(0.27 0.05 158);
  --brand-ink: oklch(0.16 0.02 158);

  --bg: oklch(0.165 0.012 265);
  --surface: oklch(0.205 0.014 265);
  --surface-2: oklch(0.245 0.016 265);
  --text: oklch(0.93 0.006 265);
  --text-strong: oklch(0.985 0.003 265);
  --muted: oklch(0.71 0.014 265);
  --muted-2: oklch(0.6 0.014 265);
  --line: oklch(0.29 0.014 265);
  --line-strong: oklch(0.36 0.016 265);
  --rule-strong: oklch(0.38 0.012 265);
}

html,
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

body {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand);
}

a:hover,
a:focus {
  color: var(--brand-hover);
}

/* 02. Navbar ============================================================== */

/* The admin bar is the one green surface in the product, kept apart from the
   crimson brand so nobody mistakes the control panel for the public site. It
   is also the only bar wide enough to carry the wordmark as text. */
#topnavbar.navbar {
  /* !important because the element also carries Tabler's .bg-primary utility,
     and bundle.css paints that one crimson with an !important of its own
     ("background-color: #E2043D !important") — which is why the bar still
     came up red whatever this file said. The utility is gone from the markup
     as well; the flag stays so a re-added class can never repaint the bar. */
  background: var(--admin-green) !important;
  border-bottom: 1px solid var(--admin-green-deep);
  box-shadow: none;
  min-height: var(--navbar-h);
}

#topnavbar .navbar-brand,
#topnavbar .navbar-brand:hover {
  color: var(--admin-green-ink);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-right: 16px;
}

/* A text wordmark rather than the vendor's calligraphic SVG mark: the site
   name from Settings is the only logo an operator ever has to know. */
#topnavbar .brand-word {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--admin-green-ink);
}

#topnavbar .brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.16);
  color: var(--admin-green-ink);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

#topnavbar .site-logo {
  height: 26px;
  width: auto;
}

#topnavbar .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  transition: color 0.16s var(--ease), background 0.16s var(--ease);
}

#topnavbar .navbar-nav .nav-link:hover,
#topnavbar .navbar-nav .nav-link:focus,
#topnavbar .navbar-nav .nav-link.active {
  color: var(--admin-green-ink);
  background: rgba(255, 255, 255, 0.14);
}

#topnavbar .avatar {
  border: 1px solid rgba(255, 255, 255, 0.35);
}

#topnavbar .navbar-toggler {
  color: var(--admin-green-ink);
  border: 0;
}

#topnavbar .icon-bar {
  background: var(--admin-green-ink);
}

/* The non-logged screens (sign in, register, password reset) sit outside the
   dashboard chrome but load this skin, and they carry the same wordmark rule
   as the bar: an uploaded logo when Settings has one, otherwise the site's
   name over its initials. */
.auth-wrap .auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.auth-wrap .auth-brand .brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
}

.auth-wrap .auth-brand .brand-word {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand);
}

/* 03. Sidebar ============================================================= */

/* bundle.css pins the sidebar at top: 0 with height: 100%, which puts its
   first rows behind the fixed admin bar. Start it below the bar and give it
   the height that is left, so the nav list and the bar never overlap. */
#sidebar {
  top: var(--navbar-h);
  height: calc(100% - var(--navbar-h));
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: none;
}

/* The menu is taller than the viewport once a submenu is open, so the sidebar
   scrolls — but it scrolls with a 7px track painted down its edge, which sits
   inside the panel and cuts into the labels. The track is decoration, not
   affordance: the list is obviously cut off and keeps scrolling by wheel,
   trackpad and keyboard either way. Hide the paint, keep the behaviour — the
   same treatment the frontend uses for its own rails.

   `width: 0` rather than `display: none` on the webkit pseudo-element: with
   `display: none` Chromium stops reserving the track but can also stop the
   corner/overflow handling from reporting the scroll range, and the legacy
   `scrollbar-width` property does not cover older WebKit anyway. */
#sidebar {
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sidebar::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox honours `scrollbar-width` on the scroller above; WebKit needs the
   same treatment on the list itself, because a sticky child that outgrows its
   parent can end up owning the scroll instead of the panel. */
#sidebar > ul {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#sidebar > ul::-webkit-scrollbar {
  width: 0;
  height: 0;
}

#sidebar .sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 1px 8px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 500;
  font-size: 14.5px;
  line-height: 1.3;
  transition: background 0.14s var(--ease), color 0.14s var(--ease);
}

#sidebar .sidebar-nav-link:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

#sidebar .sidebar-nav-link.active,
#sidebar .sidebar-nav-link.settings-active,
#sidebar .sidebar-nav-link[class*="-active"] {
  background: var(--brand-soft);
  color: var(--brand);
}

#sidebar .sidebar-nav-item-icon svg,
#sidebar .sidebar-nav-item-icon svg.svg {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}

#sidebar .sidebar-nav-item-caret {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted-2);
}

#sidebar .sidebar-children {
  margin: 0 0 4px 0;
  padding-left: 8px;
  border-left: 1px solid var(--line);
  margin-left: 22px;
}

#sidebar .sidebar-children .sidebar-nav-link {
  font-size: 14px;
  padding: 7px 12px;
  color: var(--muted);
}

#sidebar .sidebar-children .sidebar-nav-link:hover {
  color: var(--text-strong);
}

/* bundle.css reaches these same links through #sidebar .sidebar-nav-item
   .sidebar-nav-link…, one class deeper than the rules above, so it out-ranked
   them: the active row kept Tabler's grey pill (#868e96) and hover kept the
   vendor's crimson. These states are repeated through the vendor's own chain —
   equal specificity, and this sheet loads last — so the skin wins without
   adding !important to a stylesheet that has managed without them. */
#sidebar .sidebar-nav-item .sidebar-nav-link:hover,
#sidebar .sidebar-nav-item .sidebar-nav-link:focus {
  background: var(--surface-2);
  color: var(--brand);
}

#sidebar .sidebar-nav-item .sidebar-nav-link.active,
#sidebar .sidebar-nav-item .sidebar-nav-link.settings-active,
#sidebar .sidebar-nav-item .sidebar-nav-link[class*="-active"] {
  background: var(--brand-soft);
  color: var(--brand);
}

#sidebar .sidebar-nav-item .sidebar-nav-link.active:hover,
#sidebar .sidebar-nav-item .sidebar-nav-link.active:focus {
  background: var(--brand-soft);
  color: var(--brand-hover);
}

#sidebar .sidebar-nav-item .sidebar-nav-link.active .sidebar-nav-item-icon,
#sidebar .sidebar-nav-item .sidebar-nav-link:hover .sidebar-nav-item-icon {
  color: var(--brand);
}

/* A submenu row is already inside the active parent, so it is text, not a pill. */
#sidebar .sidebar-nav-item .sidebar-children .sidebar-nav-link.active {
  background: transparent;
  color: var(--brand);
}

#sidebar .nav-heading {
  padding: 18px 8px 6px 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* 04. Content shell & page header ========================================= */

/* The admin bar is fixed, so the shell has to reserve its height — but it must
   reserve it exactly once.

   bundle.css already pads <body> by 55px to clear the bar, and this skin then
   added another `var(--navbar-h)` on top of it. The two stacked, so every
   screen opened with 55px of dead space between the bar and its own heading,
   and the page header read as detached from the bar it belongs to. There was
   also a 5px mismatch in the other direction: the body padding cleared 55px
   for a bar that the skin sizes at 60px, so the top 5px of the header sat
   underneath the bar.

   Own the space once, from the real token. <body> carries the bar's height and
   the shell adds nothing, so the page header starts on the bar's bottom edge —
   measured at y=60 with the bar ending at y=60, a gap of 0.

   Scoped to `:has(#topnavbar)` because the sign-in, register and reset screens
   use nonlogged_skeleton.php, which renders no bar at all. Without the scope
   they would gain 60px of empty space at the top for a bar that is not there. */
body:has(#topnavbar) {
  padding-top: var(--navbar-h);
}

body:has(#topnavbar) #wrapper {
  padding-top: 0;
}

#body-content {
  padding-bottom: 24px;
}

#body-content,
.content-section {
  background: var(--bg);
}

/* The page header is a full-width band that ends in a hairline border, and
   `.content-section` carried no vertical padding at all — so the first card on
   the screen began on the header's bottom edge and the two appeared welded
   together. Measured on the account screen: the header's box ended at y=193 and
   the first card started at y=193, a gap of exactly 0.

   Above the header there is already room (body padding plus #wrapper's own
   navbar allowance), so this is the missing half of the rhythm, and it matches
   the 24px #body-content already keeps at the foot of every screen. */
.content-section {
  padding-top: 24px;
}

.page-header.dash-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding-top: 26px !important;
  padding-bottom: 22px !important;
}

.page-header.dash-header .page-title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0;
}

.page-header.dash-header .page-title small {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 8px;
}

.page-header.dash-header .breadcrumb {
  font-size: 13px;
  color: var(--muted);
}

.page-header.dash-header .breadcrumb a {
  color: var(--muted);
}

.page-header.dash-header .breadcrumb a:hover {
  color: var(--brand);
}

/* Section headings inside a screen, using the same heavy rule the frontend
   puts under its section titles. */
.content-section h3.card-title,
.content-section .card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 14px;
}

/* 05. Cards =============================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-header,
.card-footer {
  background: transparent;
  border-color: var(--line);
  padding: 14px 16px;
}

.card-body {
  padding: 18px 16px;
}

.card-header .card-title,
.card-header h3 {
  border: 0;
  padding: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.card-table {
  margin-bottom: 0;
}

/* 06. Tables ============================================================== */

.table {
  color: var(--text);
  margin-bottom: 0;
}

.table thead th {
  border-bottom: 1px solid var(--line-strong);
  border-top: 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 11px 12px;
  white-space: nowrap;
}

.table td {
  border-top: 1px solid var(--line);
  padding: 12px;
  vertical-align: middle;
}

.table-hover tbody tr {
  transition: background 0.14s var(--ease);
}

.table-hover tbody tr:hover {
  background: var(--surface-2);
}

.table-outline {
  border: 0;
}

.table .text-muted,
.text-muted {
  color: var(--muted) !important;
}

/* 07. Form controls & switches ============================================ */

.form-control,
.custom-select {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14.5px;
  min-height: 40px;
  padding: 8px 12px;
  transition: border-color 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
  background: var(--surface);
  color: var(--text);
}

.form-control::placeholder {
  color: var(--muted-2);
}

.form-label,
label.form-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 6px;
}

.form-text {
  font-size: 12.5px;
}

textarea.form-control {
  min-height: 96px;
}

/* Custom switch — Bootstrap 4 markup, token colours */
.custom-switch {
  padding-left: 3.05rem;
  min-height: 22px;
}

.custom-switch .custom-control-label::before {
  width: 2.2rem;
  height: 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  left: -3.05rem;
  top: 0.1rem;
}

.custom-switch .custom-control-label::after {
  width: calc(1.3rem - 4px);
  height: calc(1.3rem - 4px);
  border-radius: 50%;
  background: var(--muted-2);
  left: calc(-3.05rem + 2px);
  top: calc(0.1rem + 2px);
  transition: transform 0.16s var(--ease), background 0.16s var(--ease);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background: var(--brand);
  border-color: var(--brand);
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  background: var(--brand-ink);
  transform: translateX(0.9rem);
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.custom-switch-description {
  color: var(--muted);
  font-size: 14px;
}

.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--brand);
  border-color: var(--brand);
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.custom-radio .custom-control-label::before,
.custom-checkbox .custom-control-label::before {
  border-color: var(--line-strong);
  background: var(--surface);
}

.input-icon-addon {
  color: var(--muted-2);
}

/* 08. Buttons ============================================================= */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 14.5px;
  padding: 8px 14px;
  transition: background 0.14s var(--ease), color 0.14s var(--ease),
    border-color 0.14s var(--ease);
}

.btn-primary,
.btn-brand {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

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

.btn-secondary {
  background: var(--surface-2);
  border-color: var(--line-strong);
  color: var(--text-strong);
}

.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--surface);
  border-color: var(--muted-2);
  color: var(--text-strong);
}

.btn-success {
  background: var(--accent-good);
  border-color: var(--accent-good);
  color: var(--brand-ink);
}

/* Tabler's blue. This dashboard hands btn-info the same "primary action" role
   as btn-primary — the two "Set now" buttons on the overview are the only
   users — so it speaks the brand colour too instead of leaving a vendor blue
   in a green panel. */
.btn-info {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.btn-info:hover,
.btn-info:focus {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--brand-ink);
}

/* The outlined variant is the dashboard's "secondary action" — the theme
   Activate buttons, the Back button on every delete-confirmation screen, and
   the Back link after email activation. bundle.css draws all of them crimson.
   btn-outline-danger, which the destructive flows use, keeps its red. */
.btn-outline-primary {
  background: none;
  border-color: var(--brand);
  color: var(--brand);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  border-color: var(--line-strong);
  color: var(--muted);
}

.btn-warning {
  background: var(--accent-warn);
  border-color: var(--accent-warn);
  color: oklch(0.24 0.05 75);
}

.btn-danger {
  background: var(--accent-danger);
  border-color: var(--accent-danger);
  color: var(--brand-ink);
}

.btn-outline-dark {
  border-color: var(--line-strong);
  color: var(--text);
}

.btn-outline-dark:hover {
  background: var(--surface-2);
  border-color: var(--muted-2);
  color: var(--text-strong);
}

.btn-outline-danger {
  border-color: var(--accent-danger);
  color: var(--accent-danger);
}

.btn-outline-danger:hover {
  background: var(--accent-danger);
  color: var(--brand-ink);
}

.btn-link {
  color: var(--brand);
}

.btn-sm {
  font-size: 13px;
  padding: 5px 9px;
}

/* 09. Badges, alerts, dropdowns =========================================== */

.badge {
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  padding: 0.32em 0.6em;
}

.badge-primary,
.badge-info {
  background: var(--brand-soft);
  color: var(--brand);
}

/* bundle.css paints .bg-primary crimson with an !important of its own. It is
   the brand colour, and the card status stripes on the overview are what ask
   for it — the two that were still red. The semantic stripe colours beside it
   (bg-danger on "delete old posts", bg-warning on the cron card) stay as they
   are: those say something, they are not the brand. */
.bg-primary {
  background-color: var(--brand) !important;
  color: var(--brand-ink);
}

.badge-success {
  background: oklch(0.94 0.05 150);
  color: oklch(0.4 0.12 150);
}

.badge-warning {
  background: oklch(0.95 0.06 75);
  color: oklch(0.45 0.12 65);
}

.badge-danger {
  background: oklch(0.95 0.05 25);
  color: oklch(0.45 0.16 25);
}

.badge-secondary,
.badge-dark {
  background: var(--surface-2);
  color: var(--muted);
}

.badge-light {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

.alert {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.alert-success {
  border-left: 4px solid var(--accent-good);
}

.alert-warning {
  border-left: 4px solid var(--accent-warn);
}

.alert-danger {
  border-left: 4px solid var(--accent-danger);
}

.alert-info {
  border-left: 4px solid var(--brand);
}

.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 14.5px;
}

.dropdown-item.active,
.dropdown-item:active {
  background: var(--brand);
  color: var(--brand-ink);
}

.dropdown-item:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}

.pagination {
  margin: 0;
}

.page-link {
  border-color: var(--line);
  color: var(--text);
  border-radius: var(--radius-xs);
  margin: 0 2px;
}

.page-item.active .page-link {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}

.list-inline-item a {
  color: var(--muted);
}

/* Sub-tabs. The settings screen renders a vertical .nav-tabs list beside its
   form; any screen that sets parent_tabs_key renders them horizontally under
   the page header, and both come out of sp_render_tabs(). Tabler paints the
   active one near-black when vertical and crimson when horizontal, so the
   sidebar's "you are here" treatment is applied to both shapes: a soft brand
   wash with brand ink for the vertical list, a brand underline for the
   horizontal one. */
.nav-tabs .nav-link {
  color: var(--muted);
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.nav-tabs .nav-link:hover:not(.disabled),
.nav-tabs .nav-link:focus {
  color: var(--text-strong);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  background: transparent;
  border-color: var(--brand);
  color: var(--brand);
}

/* The vertical list is a stack of rows, not a strip: no negative pull, and a
   row reads as a row. */
.nav-tabs.tabs-vertical {
  margin: 0;
}

.nav-tabs.tabs-vertical .nav-link {
  padding: 8px 12px;
}

.nav-tabs.tabs-vertical .nav-link:hover:not(.disabled),
.nav-tabs.tabs-vertical .nav-link:focus {
  background: var(--surface-2);
  color: var(--text-strong);
}

.nav-tabs.tabs-vertical .nav-link.active,
.nav-tabs.tabs-vertical .nav-link.active:hover {
  background: var(--brand-soft);
  border: 0;
  color: var(--brand);
}

/* Utilities the form and theme screens actually render, all crimson in
   bundle.css: the "Filters & Conditions" / "Advanced" / "Feeds & Home"
   section dividers on the feed and site-settings forms are .text-primary
   (crimson, with an !important of its own), the theme-description help badges
   are .form-help, crimson on hover, and the update notice's left edge is
   .border-primary. None of these carries meaning the way btn-danger does —
   they are the vendor's accent — so they follow the brand. */
.text-primary {
  color: var(--brand) !important;
}

a.text-primary:hover,
a.text-primary:focus {
  color: var(--brand-hover) !important;
}

.border-primary {
  border-color: var(--brand) !important;
}

.form-help:hover,
.form-help[aria-describedby] {
  background: var(--brand);
  color: var(--brand-ink);
}

.list-inline-item a.text-dark {
  color: var(--text-strong) !important;
}

hr {
  border-color: var(--line);
}

/* 10. Responsive ========================================================== */

@media (max-width: 991px) {
  #sidebar {
    box-shadow: var(--shadow-md);
  }

  .page-header.dash-header {
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 18px !important;
    padding-bottom: 16px !important;
  }

  .page-header.dash-header .page-title {
    font-size: 21px;
  }

  .content-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .table td,
  .table thead th {
    padding: 10px;
  }
}

/* 11. The reader dashboard =============================================== */

/* The one dashboard screen a reader owns. It is built from these classes and
   not from the theme's card partials, because the dashboard never loads the
   theme stylesheet — anything borrowed from there would arrive unstyled. */
.reader-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* The shared card-title rule draws a heavy rule under every title; here the
   heading shares its row with a button, so the rule would cut through it. */
.reader-head .card-title {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 0;
}

.reader-saved {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reader-saved__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.reader-saved__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.reader-saved__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 54px;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}

.reader-saved__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reader-saved__text {
  min-width: 0;
}

.reader-saved__title {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-strong);
  text-decoration: none;
}

.reader-saved__title:hover {
  color: var(--brand);
}

.reader-saved__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--muted);
}

.reader-saved__meta a {
  color: var(--muted);
  text-decoration: none;
}

.reader-saved__meta a:hover {
  color: var(--brand);
}

.reader-saved__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--muted-2);
}

.reader-sources {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 12px;
}

.reader-source {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.reader-source__mark {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
}

.reader-source__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The frontend monogram helper sizes itself from the chip it sits in, so give
   it an explicit box here. */
.reader-source__mono {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
}

.reader-source__text {
  min-width: 0;
  flex: 1 1 auto;
}

.reader-source__name {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reader-source__name:hover {
  color: var(--brand);
}

.reader-source__meta {
  font-size: 12.5px;
  color: var(--muted);
}

/* The follow button is the frontend component; engagement.js drives it, and
   these are the two rules it needs to look right outside the theme. */
.reader-source .follow-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.reader-source .follow-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.reader-source .follow-btn[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

.reader-source .follow-btn .follow-icon--done {
  display: none;
}

.reader-source .follow-btn[aria-pressed="true"] .follow-icon--add {
  display: none;
}

.reader-source .follow-btn[aria-pressed="true"] .follow-icon--done {
  display: inline-flex;
}

.reader-source .follow-btn.is-busy {
  opacity: 0.6;
  cursor: progress;
}

.reader-perms {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}

.reader-perms li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}

.reader-perms li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}

.reader-note {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.reader-note strong {
  color: var(--text-strong);
}