/* Homepage intro row above the feature cards */
.page-intro { padding: clamp(30px, 5vw, 50px) 0 10px; }
.page-intro p { color: var(--ink-muted); max-width: 60ch; }

/* KB article grid thumbnails */
.flat-card__media { aspect-ratio: 16/9; object-fit: cover; width: 100%; background: var(--panel); }
.kb-filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.kb-filter-bar a {
  font-size: .82rem; font-weight: 700; text-decoration: none;
  padding: .4em .9em; border: 1px solid var(--line); color: var(--ink-muted);
}
.kb-filter-bar a.is-active, .kb-filter-bar a:hover { border-color: var(--accent); color: var(--accent); }

/* Single article page */
.article-body { max-width: 720px; line-height: 1.75; }
.article-body img { border-radius: var(--radius); margin: 1.2em 0; }
.article-video { position: relative; padding-top: 56.25%; margin: 1.2em 0; background: #000; }
.article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-meta { color: var(--ink-muted); font-size: .85rem; margin-bottom: 1.5em; }

/* Simple breadcrumb-ish back link used on sub-pages */
.back-link { display: inline-block; margin-bottom: 20px; font-size: .85rem; font-weight: 700; text-decoration: none; color: var(--ink-muted); }
.back-link:hover { color: var(--accent); }

/* Admin nav dropdown groups ("Content", "System") — plain hover-triggered
   menu, no click needed and no disclosure-triangle marker. Each item is
   its own block-level line inside the menu. */
.nav-dropdown { position: relative; display: inline-block; padding-bottom: 10px; margin-bottom: -10px; }
.nav-dropdown__label {
  cursor: pointer; font-weight: 600; color: var(--ink-muted);
}
.nav-dropdown:hover .nav-dropdown__label,
.nav-dropdown:focus-within .nav-dropdown__label,
.nav-dropdown.has-active .nav-dropdown__label { color: var(--accent); }
.nav-dropdown__menu {
  display: none;
  position: absolute; top: 100%; right: 0;
  background: var(--paper); border: 1px solid var(--line);
  min-width: 180px; z-index: 20; box-shadow: 0 4px 10px rgba(0,0,0,.08);
  padding: .3rem 0;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu { display: block; }
.nav-dropdown__menu a {
  display: block; padding: .55rem 1.1rem; font-weight: 600;
  text-decoration: none; color: var(--ink); font-size: .91rem; white-space: nowrap;
}
.nav-dropdown__menu a:hover, .nav-dropdown__menu a.is-active { color: var(--accent); background: var(--panel); }

/* Gmail-style "X–Y of Z" + Prev/Next pagination, used on every admin list */
.range-nav { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; font-size: .85rem; color: var(--ink-muted); }
.range-nav__arrows { display: flex; gap: .3rem; }
.range-nav__arrow {
  border: 1px solid var(--line); background: transparent;
  width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; color: var(--ink);
}
.range-nav__arrow[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.range-nav__arrow:hover { border-color: var(--accent); color: var(--accent); }

/* Bulk-select action bar shown above a list once at least one row is checked */
.bulk-bar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .6rem 1rem; background: var(--panel); border: 1px solid var(--line);
  margin-bottom: 1rem; font-size: .85rem;
}
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font-weight: 700; }
.list-checkbox-col { width: 2rem; }

/* Collapsed, clickable list rows (Requests) — the row itself isn't a link
   (tables can't do that), so the ref cell carries the link and the row
   just gets a hover cue to match. */
.cart-table tr.is-linked-row:hover { background: var(--panel); }
.list-snippet { color: var(--ink-muted); font-size: .85rem; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Google's Sign-In button tops out at data-size="large" (~40px tall) with
   no bigger built-in preset — data-width="320" widens it (set on the
   button itself), and this wrapper scales the whole rendered widget up
   further for real visual size. Extra bottom margin compensates for the
   scale pushing past the wrapper's normal box so it doesn't crowd
   whatever follows it. */
.google-signin-wrap { margin: 6px 0 26px; }

/* Bolder variant of .flat-card (defined in brand.css) — used for the
   admin dashboard's "waiting on action" tiles (Machines/Requests/
   Orders/Document Library/Customers). Same border-and-shadow-on-hover
   weight as the Store's .spare-card product cards below, minus the
   photo — these are stat counters, not photographed items. Layered on
   top of .flat-card rather than replacing it, so .flat-card__body/
   __eyebrow/__title stay shared, unchanged, with every other
   .flat-card use (KB grid, admin/items.php, etc.). */
.flat-card--stat {
  border-top: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
}
.flat-card--stat:hover {
  border-color: var(--ink);
  box-shadow: 0 12px 28px rgba(21, 29, 37, .10);
  transform: translateY(-2px);
}
.flat-card--stat .flat-card__body { padding: 26px; }
.flat-card--stat .flat-card__title { font-size: 1.45rem; }

/* -------------------------------------------------------------------- */
/* Spare / machine cards — Store catalog + My Machines. Styled to match */
/* sevana.com's product-card visual language (border/radius/hover lift, */
/* contained image, tight text grid). Deliberately its own class set    */
/* (.spare-*), NOT a redefinition of .flat-card/.card-grid — those are  */
/* shared by many other pages (KB, homepage, admin lists, account       */
/* addresses/documents) that must keep their existing look untouched.   */
/* Fixed 3/2/1 column breakpoints (not auto-fit) so a card always has   */
/* enough width for its action buttons to sit on one row before         */
/* wrapping, instead of silently clipping past .flat-card's old         */
/* overflow:hidden.                                                     */
/* -------------------------------------------------------------------- */
.spare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .spare-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .spare-grid { grid-template-columns: 1fr; } }

.spare-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--paper); box-shadow: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.spare-card:hover { border-color: var(--ink); box-shadow: 0 12px 28px rgba(21, 29, 37, .10); transform: translateY(-2px); }

.spare-card__media {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  padding: .55rem; background: var(--panel);
  object-fit: contain; object-position: center;
}
.spare-card__media--placeholder { display: flex; align-items: center; justify-content: center; }
.spare-card__media--placeholder svg { width: 42px; height: 42px; color: var(--ink-muted); }

.spare-card__body { display: grid; align-content: start; gap: .55rem; padding: 20px; flex: 1; }
.spare-card__eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: .72rem; letter-spacing: .1em; }
.spare-card__title {
  margin: 0; font-size: 1.1rem; line-height: 1.38;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.spare-card__desc {
  margin: 0; color: var(--ink-muted); font-size: .92rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Action buttons / add-to-cart form sit pinned to the card's bottom
   (margin-top: auto inside the flex column above) and wrap onto a new
   line instead of overflowing — the fix for buttons being clipped by
   the old .flat-card { overflow: hidden; } at narrower column widths. */
.spare-card__actions { margin-top: auto; padding: 0 20px 20px; display: flex; flex-wrap: wrap; gap: .5rem; }
.spare-card__actions:first-of-type { margin-top: auto; }
.spare-card__actions + .spare-card__actions { margin-top: 0; padding-top: 0; }

/* Small plain-text link style — used for lower-emphasis in-card actions
   (e.g. "Remove this machine") that shouldn't compete visually with the
   primary .button controls on a spare-card. */
.text-link { background: none; border: none; padding: 0; font-weight: 700; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; color: var(--ink); }
.text-link:hover { color: var(--accent); }
.text-link--danger { color: #b91c1c; }
.text-link--danger:hover { color: #991b1b; }
.spare-card__remove { margin-top: 0; padding: 0 20px 18px; }

/* -------------------------------------------------------------------- */
/* Link cards — pure "click anywhere to go to one destination" cards,   */
/* used site-wide: homepage feature links, Knowledge Base articles, the */
/* My Workspace dashboard summary tiles, and the New Request type       */
/* picker. Unlike .spare-card (Store/My Machines), these have nothing   */
/* interactive inside them, so the whole card is one real <a> — the     */
/* exact pattern sevana.com's own product cards use. Deliberately a     */
/* separate class from .flat-card/.card-grid: those stay untouched for  */
/* the info+button cards elsewhere (Recent Activity, Documents,         */
/* Addresses, admin lists) that still need embedded buttons.            */
/* -------------------------------------------------------------------- */
.link-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 820px) { .link-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .link-grid { grid-template-columns: 1fr; } }

.link-card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--paper); box-shadow: none; text-decoration: none; color: inherit;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.link-card:hover { border-color: var(--ink); box-shadow: 0 12px 28px rgba(21, 29, 37, .10); transform: translateY(-2px); }

.link-card__media {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  background: var(--panel); object-fit: cover; object-position: center;
}

.link-card__body { display: grid; align-content: start; gap: .6rem; padding: 22px; flex: 1; }
.link-card__eyebrow { color: var(--accent); font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .1em; }
.link-card__title { margin: 0; font-size: 1.18rem; line-height: 1.38; }
.link-card__desc { margin: 0; color: var(--ink-muted); font-size: .94rem; line-height: 1.6; }
.link-card__cta { margin-top: .25rem; font-weight: 700; font-size: .88rem; color: var(--ink); }
.link-card:hover .link-card__cta { color: var(--accent); }

/* Store category filter — desktop shows the tab bar (.kb-filter-bar);
   mobile swaps to a dropdown instead, since a long category list as
   wrapped tab pills eats a lot of vertical space on a narrow screen. */
.store-category-select { display: none; }
@media (max-width: 768px) {
  .store-category-tabs { display: none; }
  .store-category-select { display: block; margin-bottom: 24px; }
}

/* Equal-width button rows — for groups of buttons with uneven text
   length ("Order Spares" vs "My Orders" vs "Run Diagnostics") that
   should still all read as the same size. auto-fit + minmax lets the
   browser figure out how many fit per row at any width (2 on mobile,
   4 on desktop here) without a fixed breakpoint, and every cell in a
   row is exactly equal width regardless of its button's own text. */
.button-row-equal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
}
.button-row-equal .button { width: 100%; }

/* Same idea, scoped to a spare-card's own action row specifically (My
   Machines: Run Diagnostics/Order Spares/Request Service/Request a
   Quote) — narrower minmax to fit comfortably inside one card column,
   and applied as an addition alongside .spare-card__actions rather
   than changing that class's own rule, since .spare-card__actions is
   also used for the Store's Add to Cart form (qty input + button),
   which must keep its normal inline-flex layout. */
.spare-card__actions--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.spare-card__actions--grid .button { width: 100%; }