/*
 * MyLinkLine design system — shared tokens and global components for the
 * portal redesign. Pages must also load the font bundle:
 *   DM Sans / Sora / Bungee Hairline (see login.erb <head> for the
 *   fonts.googleapis.com link).
 */

:root {
  --page-bg: #F2F4F6;
  --panel-bg: #FAFAFA;
  --text-dark: #282828;
  --text-muted: #767676; /* AA (4.5:1) on white at small sizes */
  --input-bg: #F5F5F5;
  --input-border: #B0B0B0;
  --focus-mint: #1EFFBC;
  --brand-deep: #0E4348;
  --brand-bright: #13EF76;
  --link-coral: #F01456;

  /* App shell (authenticated pages) */
  --sidebar-bg: #2B2B2B;            /* admin section background (dark) */
  --sidebar-brand-bg: #0E4348;
  --sidebar-icon: #FFFFFF;
  --sidebar-icon-muted: #C9C9C9;
  --rail-icon-customer: #0E4348;    /* default icon on the white customer section */
  --rail-hover: #F5C000;            /* hover state — yellow, sampled from the nav PNG */
  --header-bg: #F7F8FA;
  --header-border: #E6E8EB;
  --card-bg: #FFFFFF;
  --card-border: #ECEEF1;
  --btn-blue: #1A73E8;
  --link-blue: #2F6FED;
  --rail-w: 64px;                   /* collapsed icon rail width */
  --rail-w-expanded: 224px;         /* expanded width (shows labels) */
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Geometric triangle motif (transparent PNG) layered over the page color */
  background: var(--page-bg) url("/pattern_Triangles.png") center / cover no-repeat fixed;
  color: var(--text-dark);
}

/*
 * Sticky-footer page scaffold: body becomes a full-height column and the
 * footer anchors to the bottom even on short pages. Center main content
 * with `margin: auto` (see .login-card) or let it flow from the top.
 */
body.ds-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Tiny utilities ---------- */

.muted { color: var(--text-muted); }
.ds-center { text-align: center; }

/* ---------- Global footer ---------- */

.page-footer {
  margin-top: auto; /* pushes the footer to the bottom of body.ds-page */
  padding: 28px 16px;
  text-align: center;
  color: var(--text-dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.6;
}

.page-footer a {
  color: var(--text-dark);
  text-decoration: underline;
  margin: 0 4px;
}

.page-footer .tagline {
  display: block;
  font-size: 11px;
  margin-top: 2px;
  color: var(--text-muted);
}

/* =====================================================================
 * App shell — global frame for authenticated, redesigned pages.
 * Layout: fixed-width icon rail (.app-sidebar) on the left, and a flex
 * column (.app-shell) holding the global header, the page content, and
 * the shared footer. Render a page into this shell with layout_app.erb;
 * a page only needs to provide its content plus optional @page_heading.
 * ===================================================================== */

body.ds-app {
  display: flex;
  min-height: 100vh;
  /* main.css sets `html, body { height: 100% }`, which caps this flex container
     at one viewport — and with it the sticky containing block of .app-sidebar,
     so the rail scrolled away after the first screenful and left a stub over the
     page. The class selector wins over that element rule regardless of load
     order; min-height still keeps a short page full-height. */
  height: auto;
  /* App pages use a flat surface — no triangle motif behind the shell */
  background: var(--page-bg);
}

.app-shell {
  flex: 1;
  min-width: 0; /* let content shrink instead of overflowing the viewport */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-shell .page-footer { color: var(--text-muted); }

/* ---------- Sidebar (icon rail; expandable) ----------
 * Two zones: a white "customer" section (top) and a dark "admin" section
 * (.rail-admin) that fills to the bottom. Icons are dark on white / white on
 * dark; both hover to yellow and turn green when active. The rail collapses to
 * an icon strip and expands (.is-expanded) to reveal text labels.
 */

.app-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  height: 100vh;
  /* On iOS, 100vh is the *large* viewport, so the collapse toggle pinned to the
     rail's bottom edge sat behind Safari's URL bar. dvh is what's visible. */
  height: 100dvh;
  background: #FFFFFF;            /* customer section default */
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: flex-basis 0.18s ease, width 0.18s ease;
}
.app-sidebar.is-expanded {
  flex-basis: var(--rail-w-expanded);
  width: var(--rail-w-expanded);
}

.app-sidebar .rail-brand {
  flex: 0 0 auto;
  height: 54px;
  background: var(--sidebar-brand-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-sidebar .rail-brand svg { width: 28px; height: auto; display: block; }
/* sidebar-logo.png is the green M on its own #0E4348 tile — matches the brand
 * box, so it blends seamlessly; size it to fill most of the box height. */
.app-sidebar .rail-brand img { height: 48px; width: 48px; display: block; }

.app-sidebar .rail-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Keeps an active first item's chip from merging into the brand tile above,
     which is the same --brand-deep colour. Static, so the rail doesn't shift
     as the active item changes from page to page. */
  padding-top: 4px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #bbb transparent;
}
.app-sidebar .rail-scroll::-webkit-scrollbar { width: 6px; }
.app-sidebar .rail-scroll::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }

/* Nav item: fixed-width icon cell + (revealed-on-expand) text label.
 * Row height is set per zone: the customer list is short and gets room to
 * breathe, while the admin list runs to a dozen entries and is deliberately
 * denser (see .rail-admin .rail-item below). */
.app-sidebar .rail-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  /* Customer rows are direct flex children of .rail-scroll, so they default to
     flex-shrink:1 and silently compress below the height above once the rail is
     taller than the viewport. Admin rows sit inside .rail-admin (a block), so
     they never shrink — which is what made the white zone read as cramped next
     to the admin zone whatever height was set. Hold the height and let
     .rail-scroll's own overflow-y do the scrolling. */
  flex: 0 0 auto;
  color: var(--rail-icon-customer);
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.app-sidebar .rail-item .rail-icon {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;               /* larger icons */
}
.app-sidebar .rail-item .rail-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.app-sidebar.is-expanded .rail-item .rail-text { opacity: 1; pointer-events: auto; }

.app-sidebar .rail-item:hover { color: var(--rail-hover); background: rgba(0,0,0,0.04); }
/* Active item in the customer (white) zone. The brand green reads at only
 * 1.54:1 on white — invisible — so the row takes the deep-brand colour behind
 * it and keeps the exact green on top: 7.12:1, the same green-on-dark pairing
 * the admin zone below already relies on. Flush left so the green indicator bar
 * still sits on the rail's edge. This rule comes after :hover deliberately, so
 * hovering the current page keeps the chip instead of flashing the hover grey. */
.app-sidebar .rail-item.is-active {
  color: var(--brand-bright);
  background: var(--brand-deep);
  border-radius: 0 8px 8px 0;
}
.app-sidebar .rail-item.is-active::before {
  content: "";
  position: absolute;
  left: 0; top: 7px; bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--brand-bright);
}

/* Hover tooltip — shown only while collapsed (labels are visible when
 * expanded). Rendered as a body-level element by app_sidebar.erb JS and
 * positioned with `position: fixed` so the sidebar's overflow:hidden can't
 * clip it. Matches design/Tooltip.png: yellow pill, dark-plum border + bold
 * caps text. */
.rail-tooltip {
  position: fixed;
  display: none;
  z-index: 1000;
  background: var(--rail-hover);   /* #F5C000 */
  color: #4A2E32;
  border: 3px solid #4A2E32;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(20,24,31,0.18);
  transform: translateY(-50%);
  pointer-events: none;
}
.rail-tooltip.show { display: block; }

/* Admin zone: dark background, white icons (still hover yellow / active green) */
.app-sidebar .rail-admin {
  flex: 1 0 auto;                /* fills down to the bottom edge */
  background: var(--sidebar-bg);
  padding-top: 6px;
}
/* Tighter rows than the customer zone above — this list is roughly twice as
 * long, so the density is intentional. Kept within ~6px of the customer zone:
 * further apart than that and the two sections stop looking like one rail. */
.app-sidebar .rail-admin .rail-item { color: var(--sidebar-icon); height: 34px; }
.app-sidebar .rail-admin .rail-item:hover { color: var(--rail-hover); background: rgba(255,255,255,0.06); }
/* The admin zone is already dark, so green-on-dark works here without a chip
 * (9.19:1) — drop the customer zone's background back off. */
.app-sidebar .rail-admin .rail-item.is-active { color: var(--brand-bright); background: none; }

.app-sidebar .rail-admin .rail-label {
  color: var(--sidebar-icon-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: center;
  padding: 10px 8px;
}

/* Drawer backdrop. Only the small-screen rail behaves as a drawer, so this is
 * inert everywhere else — and it must stay display:none there, since it is a
 * child of the flex `body.ds-app` and would otherwise take up a column. */
.rail-scrim { display: none; }

/* Expand/collapse toggle pinned at the bottom */
.app-sidebar .rail-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 40px;
  border: 0;
  border-top: 1px solid rgba(127,127,127,0.25);
  background: #F2F4F6;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
}
.app-sidebar .rail-toggle:hover { color: var(--rail-icon-customer); }
.app-sidebar .rail-toggle .rail-icon {
  flex: 0 0 var(--rail-w);
  width: var(--rail-w);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.18s ease;
}
.app-sidebar.is-expanded .rail-toggle .rail-icon { transform: rotate(180deg); }
.app-sidebar .rail-toggle .rail-text { white-space: nowrap; opacity: 0; }
.app-sidebar.is-expanded .rail-toggle .rail-text { opacity: 1; }

/* ---------- Global header ---------- */

.app-header {
  flex: 0 0 auto;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  padding: 14px 28px;
  display: flex;
  /* Top-aligned on purpose (v64). The header has no fixed height: when the
   * action buttons wrap onto a second line (a long heading such as
   * "MyEmergency Contacts", or a narrow window, tips them over) the header
   * grows, and a centred heading moved down with it — so "MyXxx" sat at a
   * different height from page to page. Every first-row item is now a 38px
   * box (the avatar's height) aligned to the top, so the heading stays put
   * and only the wrapped row grows below it. */
  align-items: flex-start;
  gap: 20px;
}

/* Hamburger that opens the rail drawer. Only phones get it — every wider
 * layout has the rail itself on screen. */
.header-menu {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text-dark);
  font-size: 20px;
  cursor: pointer;
}
.header-menu:hover { background: rgba(0,0,0,0.05); }

.app-header .header-heading {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 1.1;
  color: var(--text-dark);
  margin: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-height: 38px;
}
.app-header .header-heading .my { color: var(--brand-bright); }
.app-header .header-heading .admin-tag { color: var(--link-coral); font-weight: 300; }
.app-header .header-heading .syncing {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: 8px;
}

.app-header .header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* A small button is 30px tall; the margin makes its line 38px like the avatar,
 * so a row of buttons sits level with the heading whether or not it wraps. */
.app-header .header-actions > .ds-btn { margin: 4px 0; }

.app-header .header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.app-header .header-user .greeting {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  text-align: right;
  line-height: 1.25;
}
.app-header .header-user .greeting a {
  display: block;
  color: var(--link-blue);
  font-size: 12px;
  text-decoration: underline;
}
.app-header .header-user .greeting button.linklike {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--link-blue); font-size: 12px; text-decoration: underline;
  font-family: 'DM Sans', sans-serif;
}
.app-header .header-user .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand-deep); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex: 0 0 auto;
  overflow: hidden; text-decoration: none;
  transition: box-shadow 0.15s ease;
}
.app-header .header-user .avatar:hover { box-shadow: 0 0 0 2px var(--brand-bright); }
.app-header .header-user .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Buttons (shared) ---------- */

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 20px;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}
.ds-btn:hover { filter: brightness(1.06); }
.ds-btn--primary { background: var(--brand-deep); color: var(--brand-bright); }
.ds-btn--blue    { background: var(--btn-blue);   color: #fff; }
.ds-btn--green   { background: var(--brand-bright); color: var(--brand-deep); }
.ds-btn--sm      { padding: 9px 16px; font-size: 12px; }
.ds-btn--block   { width: 100%; }

/* ---------- Page content scaffold ---------- */

/* Layout content area is full-width (legacy wide tables need the room);
 * redesigned pages wrap their content in .ds-container to constrain + center. */
.app-content {
  flex: 1;
  padding: 32px 28px 48px;
  width: 100%;
}
.ds-container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
}

.ds-section-title {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  text-align: center;
  color: var(--text-dark);
  margin: 8px 0 28px;
  border: 0;                       /* override legacy main.css `h2` border-bottom */
}

/* ---------- Quick-link cards ---------- */

.quick-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .quick-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .quick-links { grid-template-columns: 1fr; } }

.ql-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 1px 2px rgba(20,24,31,0.04);
  display: flex;
  flex-direction: column;
}
.ql-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 8px;
  border: 0;
}
.ql-card h3 .my { color: var(--brand-bright); }
.ql-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 16px;
  flex: 1;
}
.ql-card .ql-actions { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Modal (shared, design-system) ---------- */

.ds-modal {
  display: none;
  position: fixed;
  inset: 0;
  /* iOS sizes a fixed inset:0 box to the large viewport, so the bottom of a tall
     modal — normally its action buttons — renders behind Safari's toolbar and
     can't be reached. dvh is the currently visible height. */
  height: 100dvh;
  z-index: 100;
  background: rgba(20,24,31,0.45);
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ds-modal.is-open { display: flex; align-items: flex-start; justify-content: center; }
.ds-modal__panel {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 620px;
  margin: auto;
  box-shadow: 0 12px 40px rgba(20,24,31,0.25);
  overflow: hidden;
}
.ds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--card-border);
}
.ds-modal__header h2 {
  font-family: 'Sora', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--text-dark);
  border: 0;                       /* override legacy main.css `h2` border-bottom */
}
.ds-modal__close {
  background: none; border: 0; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--text-muted);
}
.ds-modal__body { padding: 22px; }

/* ---------- Form controls (shared) ---------- */

.ds-field { margin-bottom: 18px; }
.ds-field label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 6px;
}
.ds-input, .ds-textarea, .ds-select {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 11px 12px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-input:focus, .ds-textarea:focus, .ds-select:focus {
  border-color: var(--focus-mint);
  box-shadow: 0 0 0 2px rgba(30,255,188,0.35);
}
.ds-textarea { resize: vertical; min-height: 120px; }
.ds-contact-bar {
  background: #EEF6FF;
  border: 1px solid #D6E6FB;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text-dark);
  margin-bottom: 18px;
}

/* ---------- Button extras (outline / large pill) ---------- */
.ds-btn--outline {
  background: transparent;
  border: 1px solid var(--input-border);
  color: var(--text-dark);
}
.ds-btn--outline:hover { filter: none; background: rgba(0,0,0,0.03); }
.ds-btn--lg { padding: 17px 24px; font-size: 14px; }

/* =====================================================================
 * Support-request form (modal). Matches "Support Request Popup form":
 * big title + lede, a bordered Contact Info card with underline-style
 * fields, device/monitor checkbox lists, and pill action buttons.
 * ===================================================================== */

.ds-modal__panel--form { max-width: 660px; position: relative; }
.ds-modal__x {
  position: absolute;
  top: 18px; right: 20px;
  background: none; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--text-muted);
  z-index: 2;
}
.ds-modal__x:hover { color: var(--text-dark); }

.sr-title {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.18;
  color: var(--text-dark);
  margin: 4px 44px 14px 0;   /* right gap clears the close button */
  border: 0;
}
.sr-lede {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dark);
  margin: 0 0 22px;
}
.sr-list {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dark);
  margin: -12px 0 22px;
  padding-left: 22px;
}
.sr-list li { margin-bottom: 6px; }

.sr-card {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 24px 22px;
}
.sr-section {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--text-dark);
  margin: 0 0 20px;
  border: 0;
}

/* Underline-style fields */
.field-underline { margin-bottom: 22px; }
.field-underline > label,
.sr-grouplabel {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 8px;
}
.input-underline {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--input-border);
  background: transparent;
  padding: 8px 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--text-dark);
  outline: none;
  transition: border-color 0.15s ease;
}
.input-underline::placeholder { color: var(--text-muted); }
.input-underline:focus { border-bottom: 2px solid var(--brand-bright); }
.sr-textarea {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 12px;
  resize: vertical;
  min-height: 130px;
  font-size: 15px;
}
.sr-textarea:focus { border: 1px solid var(--brand-bright); border-bottom-width: 1px; }
#ccEmailList .input-underline { margin-bottom: 10px; }

.sr-addlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--link-blue);
  text-decoration: none;
  margin: 4px 0 22px;
}
.sr-addlink:hover { text-decoration: underline; }
.sr-help {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--text-muted);
  margin: 8px 0 0;
}
.sr-fieldgroup { margin-bottom: 22px; }

/* Device / monitor checkbox lists */
.sr-checklist {
  border: 1px solid var(--input-border);
  border-radius: 8px;
  max-height: 168px;
  overflow-y: auto;
}
.sr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  border-bottom: 1px solid #F0F0F0;
}
.sr-check:last-child { border-bottom: 0; }
.sr-check:hover { background: #F7F9FB; }
.sr-check input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--brand-deep);
  flex: 0 0 auto;
  cursor: pointer;
}

.sr-reset {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--text-dark);
  text-align: center;
  margin: 22px 0 18px;
}
.sr-reset .linklike-blue {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--link-blue); text-decoration: underline;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
}
.sr-cancel { margin: 14px auto 0; display: flex; padding-left: 34px; padding-right: 34px; }

/* Two-up field row (e.g. State + Zip) */
.sr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 480px) { .sr-row { grid-template-columns: 1fr; } }

/* =====================================================================
 * Admin edit modals (design/AccountsEditModal.png). Extends the
 * support-form (.sr-*) components: role tag, section sub-notes, linked-
 * record chips with search-to-add, and the danger-outline pill.
 * ===================================================================== */

/* Coral role tag at the top of the modal (e.g. "Admin"). */
.sr-tag {
  display: inline-block;
  background: var(--link-coral); color: #fff;
  border-radius: 100px; padding: 7px 18px;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700;
  margin: 0 0 16px;
}

/* Muted sub-note directly under an .sr-section heading. */
.sr-section-note {
  font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-muted);
  margin: -14px 0 18px;
}

/* Linked-record chips (click to unlink). */
.co-chiplist { display: flex; flex-wrap: wrap; gap: 8px; }
.co-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--link-blue); color: #fff;
  border: 0; border-radius: 6px; padding: 8px 12px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500;
  line-height: 1.3; cursor: pointer; text-align: left;
  transition: filter 0.15s ease;
}
.co-chip:hover { filter: brightness(1.12); }
.co-chip .x { font-size: 15px; opacity: 0.8; line-height: 1; }

/* Document history — a dated list of downloadable files (the QuickBooks
 * attachments in the company modal). Deliberately not .co-chip: chips are for
 * tags you scan as a set, while these are records you scan by date, so they
 * read as one link per row with the date alongside. */
.doc-history li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid #ECECEC;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
}
.doc-history li:last-child { border-bottom: 0; }
.doc-history a {
  color: var(--link-blue);
  text-decoration: none;
  overflow-wrap: anywhere;   /* long QB filenames shouldn't push the date off */
}
.doc-history a:hover { text-decoration: underline; }
.doc-history .doc-meta {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}

/* Pill search input + result rows for adding linked records. */
.co-search {
  width: 100%;
  border: 1px solid var(--input-border); border-radius: 100px;
  background: var(--input-bg); padding: 13px 20px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark);
  outline: none; transition: border-color 0.15s ease;
}
.co-search::placeholder { color: var(--text-muted); }
.co-search:focus { border-color: var(--focus-mint); background: #fff; }
.co-results {
  border: 1px solid var(--input-border); border-radius: 8px;
  max-height: 180px; overflow-y: auto; margin-top: 10px;
}
.co-results:empty { display: none; }
.co-result {
  padding: 10px 14px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark);
  cursor: pointer; border-bottom: 1px solid #F0F0F0;
}
.co-result:last-child { border-bottom: 0; }
.co-result:hover { background: #F7F9FB; }
.co-result--empty { color: var(--text-muted); cursor: default; }
.co-result--empty:hover { background: none; }

/* ---------- Record picker ----------
   Type-to-search assignment control used by the admin modals: a .co-search pill
   input, a results list, and the chosen record shown as a card underneath.
   Originated on the Video Units modals; promoted here so the Device and
   Monitoring modals share it. Values are identical to the original page-local
   styles so that page renders exactly as before. Wired up by initDsPicker()
   in layout.erb. */
.search-results-container {
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ccc;
  background: white;
  margin-top: 4px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-result-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #eee;
}

.search-result-item:hover {
  background-color: #f1f1f1;
}

.search-result-item:last-child {
  border-bottom: none;
}

.selected-item-container {
  margin-top: 8px;
  padding: 8px 12px;
  background-color: #e8f5e8;
  border: 1px solid #4caf50;
  border-radius: 4px;
}

.selected-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.selected-item-text {
  font-weight: bold;
  color: #2e7d32;
}

.remove-selection {
  background: none;
  border: none;
  color: #d32f2f;
  cursor: pointer;
  font-size: 18px;
  padding: 0 4px;
}

.remove-selection:hover {
  color: #b71c1c;
}

/* Danger-outline pill (Delete User / Delete Company). */
.ds-btn--outline-danger {
  background: #FDF2F5; border: 1px solid #F3C2CE; color: var(--link-coral);
}
.ds-btn--outline-danger:hover { filter: none; background: #FBE4EA; }

/* Centered secondary-actions row under the big Save pill. */
.sr-btnrow { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }

/* =====================================================================
 * Uptime History modal (design/"Uptime History Popup (1).png").
 * Left column of gradient stat cards; right column with the pill-segment
 * uptime chart, timeframe pills, and legend. Used by the video-units admin
 * page and the customer dashboard.
 * ===================================================================== */
.up-layout { display: grid; grid-template-columns: 300px 1fr; gap: 24px; }
@media (max-width: 800px) { .up-layout { grid-template-columns: 1fr; } }

.up-card {
  border-radius: 12px; padding: 16px 18px; margin-bottom: 14px;
  color: #fff; font-family: 'DM Sans', sans-serif;
}
.up-card--status   { background: linear-gradient(135deg, #0E4348 0%, #1F8A78 100%); }
.up-card--pings    { background: linear-gradient(135deg, #3A0B33 0%, #7A1466 100%); }
.up-card--uptime   { background: linear-gradient(135deg, #22072E 0%, #41125E 100%); }
.up-card--lastping { background: linear-gradient(135deg, #2A0826 0%, #4A0F44 100%); }

.up-unit-tag {
  display: inline-block; background: #F0B429; color: #3A2A00;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 20px;
  letter-spacing: 1px; border-radius: 6px; padding: 2px 10px;
}
.up-status-val {
  font-family: 'Sora', sans-serif; font-weight: 300; font-size: 30px;
  letter-spacing: 2px; color: var(--brand-bright); line-height: 1.1;
}
.up-num { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 34px; line-height: 1.15; }
.up-card--pings .up-num    { color: #F0568C; }
.up-card--uptime .up-num   { color: #D89AE0; }
.up-card--lastping .up-num { color: #F06FC8; font-size: 30px; }
.up-label { font-size: 15px; color: #fff; margin-top: 4px; }
.up-sub { font-size: 12px; margin-top: 3px; }
.up-card--pings .up-sub    { color: #F06FC8; }
.up-card--uptime .up-sub   { color: #B98BD6; }
.up-card--lastping .up-sub { color: #D07BC4; }
.up-bar {
  height: 9px; border-radius: 5px; background: rgba(255,255,255,0.14);
  margin: 10px 0 10px; overflow: hidden;
}
.up-bar > span { display: block; height: 100%; border-radius: 5px; width: 0%;
  background: linear-gradient(90deg, #5B2ACD, #D06CF5); transition: width 0.25s ease; }

.up-chart-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 19px; color: var(--text-dark); margin: 0 0 2px; border: 0; }
.up-chart-sub { font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--text-muted); margin: 0 0 12px; }
.up-chartpanel {
  background: linear-gradient(135deg, #0E4348 0%, #14555C 100%);
  border-radius: 14px; padding: 16px;
  display: flex; flex-wrap: wrap; gap: var(--seg-gap, 6px); align-content: flex-start;
  min-height: 96px;
}
/* Segment size is set per-render by JS (as CSS vars) so every period fits in
   the panel without scrolling, even the 1-year daily view. */
.up-seg { width: var(--seg-w, 13px); height: var(--seg-h, 27px); border-radius: var(--seg-r, 8px); flex: none; }
.up-seg--empty { background: transparent !important; border: 2px solid #2BE080; }

.up-tfrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 4px; }
.up-tf {
  border: 0; background: #E7E7E9; color: #5A5A5E; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 12px 22px; border-radius: 100px; transition: filter 0.15s ease;
}
.up-tf:hover { filter: brightness(0.96); }
.up-tf.is-active { background: var(--brand-deep); color: #fff; }

.up-legend-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px; color: var(--text-dark); margin: 18px 0 10px; border: 0; }
.up-legend {
  display: grid; grid-template-columns: repeat(2, minmax(130px, max-content));
  gap: 10px 40px; font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark);
}
.up-legend .li { display: flex; align-items: center; gap: 10px; }
.up-legend .sw { width: 12px; height: 25px; border-radius: 7px; flex: none; }

/* Underline-style <select> (matches .input-underline) */
.select-underline {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--input-border);
  background: transparent;
  padding: 8px 2px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: var(--text-dark);
  outline: none;
}
.select-underline:focus { border-bottom: 2px solid var(--brand-bright); }
/* A select beside a text input (support request: Category | Subject): browsers
   size the two differently, so pin one height and the underlines meet. */
.sr-pair { align-items: flex-end; }
.sr-pair .input-underline,
.sr-pair .select-underline { box-sizing: border-box; height: 40px; margin: 0; line-height: 1.3; }

/* =====================================================================
 * Account / profile page (design/Profile Details Update Popup Form.png).
 * Reuses the support-form components inside a centered page column.
 * ===================================================================== */
.account-form { max-width: 560px; margin: 0 auto; position: relative; }
.account-close {
  position: absolute; top: -4px; right: 0;
  color: var(--text-muted); font-size: 28px; line-height: 1; text-decoration: none;
}
.account-close:hover { color: var(--text-dark); }

.profile-photo {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px;
}
.profile-photo__avatar {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--brand-deep); color: var(--brand-bright);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 30px;
  overflow: hidden; flex: 0 0 auto;
}
.profile-photo__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-photo__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.profile-photo__hint { font-size: 11px; color: var(--text-muted); }
.profile-photo input[type="file"] { display: none; }
.profile-photo__remove {
  display: flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 12px;
  color: var(--link-coral); cursor: pointer;
}
.profile-photo__remove input { accent-color: var(--link-coral); cursor: pointer; }

/* =====================================================================
 * Admin / list pages — stat cards, search bar, data table, pagination.
 * (design/Admin-Device-page.png + Page Navigation Space.png)
 * ===================================================================== */

/* Overview stat cards.
   Shared across all admin overview pages (Devices, Monitoring, Accounts,
   Companies) for a consistent look: one teal gradient "primary" headline card
   sitting beside a flat white panel that holds one or more plain stat cells. */
.stat-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; margin: 0 0 28px; }

/* Primary (headline) gradient card. */
.stat-card--primary {
  flex: 0 0 auto; min-width: 220px;
  border-radius: 14px; padding: 18px 22px; color: #FAFAFA;
  background: linear-gradient(135deg, #0E4348 0%, #1F8A78 100%);
  box-shadow: 0 4px 18px rgba(20,24,31,0.08);
  display: flex; flex-direction: column; justify-content: center;
}
.stat-card--primary .stat-num {
  font-family: 'Sora', sans-serif; font-weight: 300; font-size: 32px; line-height: 1.05;
  margin: 0 0 2px; color: #FAFAFA;
}
.stat-card--primary .stat-frac { opacity: 0.6; font-size: 26px; }
.stat-card--primary .stat-label { font-family: 'DM Sans', sans-serif; font-size: 13px; opacity: 0.9; }
.stat-card--primary .stat-link {
  display: inline-block; margin-top: 8px; font-family: 'DM Sans', sans-serif;
  font-size: 12px; color: var(--brand-bright); text-decoration: underline; cursor: pointer;
}

/* White panel holding secondary stat cells. */
.stat-panel {
  flex: 1 1 320px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 36px;
  background: #FFFFFF; border: 1px solid #ECECEC; border-radius: 14px; padding: 18px 28px;
  box-shadow: 0 4px 18px rgba(20,24,31,0.05);
}
.stat-cell { padding: 4px 0; }
.stat-cell .stat-num {
  font-family: 'Sora', sans-serif; font-weight: 300; font-size: 30px; line-height: 1.05;
  margin: 0 0 2px; color: var(--text-dark);
}
.stat-cell .stat-num--danger { color: #D64545; }
.stat-cell .stat-frac { color: var(--text-muted); font-size: 24px; }
.stat-cell .stat-label { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-dark); }
.stat-cell .stat-sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* QuickBooks-linked indicator: the QuickBooks "qb" logo before a company name,
   links to that company's QuickBooks billing page. */
.qb-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; margin-right: 8px; vertical-align: middle;
  text-decoration: none; cursor: pointer; border-radius: 4px;
}
.qb-badge img { width: 20px; height: 20px; display: block; }
.qb-badge:hover { box-shadow: 0 0 0 3px rgba(19,239,118,0.28); }

/* Combined action bar: "Add a New Device" pill + inline search, one control. */
.dev-actionbar {
  display: flex; align-items: center;
  max-width: 760px; margin: 0 auto 18px;
  background: #fff; border: 1px solid var(--input-border);
  border-radius: 100px; padding: 5px;
}
.dev-actionbar .add-btn {
  flex: 0 0 auto;
  background: var(--brand-deep); color: var(--brand-bright);
  border: 0; border-radius: 100px; height: 46px; padding: 0 28px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 14px;
  cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
  transition: filter 0.15s ease;
}
.dev-actionbar .add-btn:hover { filter: brightness(1.08); }
.dev-actionbar .search-seg { flex: 1; display: flex; align-items: center; padding: 0 20px; }
.dev-actionbar input {
  flex: 1; border: 0; outline: 0; background: transparent; height: 46px;
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text-dark);
}
.dev-actionbar input::placeholder { color: var(--text-muted); }

/* Clear ("x") button inside a search bar. The button is injected by the shared
   script in layout.erb, so every .search-seg gets one without per-page markup;
   it only shows while the field has text. */
.search-clear {
  display: none; flex: 0 0 auto;
  border: 0; background: transparent; cursor: pointer;
  width: 26px; height: 26px; margin-left: 8px; padding: 0; border-radius: 50%;
  font-family: 'DM Sans', sans-serif; font-size: 19px; line-height: 1;
  color: var(--text-muted);
  align-items: center; justify-content: center;
  transition: color 0.15s ease, background 0.15s ease;
}
.search-clear:hover { color: var(--text-dark); background: rgba(0,0,0,0.07); }
.search-clear:focus-visible { outline: 2px solid var(--link-blue); outline-offset: 1px; }
.search-seg.has-value .search-clear { display: inline-flex; }
.dev-toolbar-links { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.dev-toolbar-links a { color: var(--link-blue); text-decoration: none; }
.dev-toolbar-links a:hover { text-decoration: underline; }
/* "All Devices" heading on the left, hide-canceled / clear links on the right */
.dev-listhead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 24px 0 14px; }

/* Report filter row (date range / status) that sits above a search pill.
   Underline fields side by side; keep them out of .dev-actionbar, whose
   input rule would strip their borders. */
.rpt-filters { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-end; margin: 0 0 14px; }
.rpt-filters .field-underline { flex: 0 1 170px; min-width: 140px; margin: 0; }

/* Data table */
.ds-table-wrap { width: 100%; overflow-x: auto; border-radius: 10px; }
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: 'DM Sans', sans-serif; font-size: 13.5px; }
.ds-table thead th {
  background: #2B2B2B; color: #fff; font-weight: 600; text-align: left;
  padding: 14px 16px; white-space: nowrap; border-right: 1px solid rgba(255,255,255,0.08);
}
.ds-table thead th a.th-sort { color: #fff; text-decoration: none; }
.ds-table thead th a.th-sort:hover { text-decoration: underline; }
/* Accounts table uses a fixed layout (column widths from its <colgroup>) so the
   Email column stays narrow and Company — usually the longest data — gets the
   remaining space instead of the browser squeezing Email to fit. */
.ds-table--fixed { table-layout: fixed; }
.ds-table--fixed td, .ds-table--fixed th { overflow-wrap: break-word; word-wrap: break-word; }
/* Last Login: date on top, time stacked muted underneath. */
.ds-table .ll-date { color: var(--text-dark); }
.ds-table .ll-time { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
/* Stacked company names in the accounts table cell (wrap long names so the
   table stays within the container and the right-hand columns stay visible). */
.acct-company { line-height: 1.7; }
/* Clickable company name (opens the company dashboard modal). */
.company-name-link { color: var(--link-blue); text-decoration: none; cursor: pointer; font-weight: 500; }
.company-name-link:hover { text-decoration: underline; }
/* Inline associated-accounts list in the companies table cell. */
.acct-userline { line-height: 1.4; padding: 3px 0; }
.acct-userline + .acct-userline { border-top: 1px solid #ECECEC; margin-top: 3px; }
.ds-table thead th:last-child { border-right: 0; border-radius: 0 8px 0 0; }
.ds-table thead th:first-child { border-radius: 8px 0 0 0; }
.ds-table tbody td { padding: 13px 16px; color: var(--text-dark); border-bottom: 1px solid #ECECEC; vertical-align: middle; }
.ds-table tbody tr:nth-child(even) { background: #F7F8FA; }
.ds-table tbody tr.is-inactive { background: #FDECEC; }
.ds-table tbody tr.is-inactive:nth-child(even) { background: #FBE3E3; }
.ds-table .col-num { text-align: right; white-space: nowrap; }
.ds-table .col-nowrap { white-space: nowrap; }
.ds-table .muted { color: var(--text-muted); }
/* Wrap + break long unbreakable tokens (IPv6 addresses, snake_case event
   types, long request paths) so wide tables can't run off the page. Pair with
   an inline max-width on the cell to cap the column. */
.ds-table .col-break { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }

/* Status pill */
.status-pill { display: inline-block; padding: 5px 16px; border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.status-pill--active { background: var(--brand-deep); color: var(--brand-bright); }
.status-pill--inactive { background: #E5E7EB; color: #6B7280; }
.status-pill--link { cursor: pointer; }
/* Battery condition. Colours are lifted from the ds-banner--success/warning/
   danger palette rather than invented, so a warning reads the same here as it
   does in a banner. --good is deliberately quieter than --active: a healthy
   battery is reassurance, not a headline, and should not outshout the
   Online/Offline pill sitting beside it in the same card. */
.status-pill--good { background: #F1FBF5; color: #2F7A4C; }
.status-pill--warn { background: #FFF6E9; color: #7A4A12; }
.status-pill--bad  { background: #FDECEF; color: #B3324D; }

/* Monitoring service tags (/admin/monitors "Monitoring Service" column). Muted
   next to the green status pill — this labels a line, it isn't a state. */
.ml-service-tag { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.ml-service-tag-anserfone { background: #E3EDFB; color: #1B4C9E; }
.ml-service-tag-avantguard { background: #E7F1EC; color: #17604A; }

/* "Last Checkin" heartbeat-history link */
.checkin-link { color: var(--link-blue); text-decoration: underline; cursor: pointer; white-space: nowrap; }

/* Edit pencil */
.edit-icon-btn { background: none; border: 0; cursor: pointer; color: var(--link-blue); font-size: 15px; padding: 6px 8px; border-radius: 6px; }
.edit-icon-btn:hover { background: rgba(47,111,237,0.10); }

/* Pagination — will_paginate output styled to the dark pill in the design */
.pagination-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.ds-pagination {
  display: inline-flex; align-items: center; gap: 6px;
  background: #2B2B2B; padding: 7px 10px; border-radius: 24px;
  flex-wrap: wrap; justify-content: center; max-width: 100%;
}
.ds-pagination a, .ds-pagination span, .ds-pagination em {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
  color: #fff; font-style: normal; text-decoration: none;
}
.ds-pagination a:hover { background: rgba(255,255,255,0.16); }
.ds-pagination em.current { background: var(--btn-blue); color: #fff; }
.ds-pagination .gap { color: #fff; min-width: 18px; }
.ds-pagination .previous_page, .ds-pagination .next_page { background: #fff; color: #2B2B2B; font-size: 17px; }
.ds-pagination .previous_page:hover, .ds-pagination .next_page:hover { background: #e6e6e6; }
.ds-pagination .disabled { opacity: 0.35; pointer-events: none; }
.page-goto { display: inline-flex; }
/* will_paginate renders nothing when there's a single page, leaving the
   "Go to…" form as the row's only child — hide it, there's nowhere to go. */
.pagination-row .page-goto:only-child { display: none; }
.page-goto input {
  width: 96px; height: 38px; border: 1px solid var(--input-border); border-radius: 100px;
  padding: 0 16px; font-family: 'DM Sans', sans-serif; font-size: 13px; outline: none;
}
.page-goto input:focus { border-color: var(--brand-bright); }

/* ============================================================
   Dashboard (MyDashboard) — design/Dashboard.png
   ============================================================ */

/* Welcome info cards (shown to all; hideable via localStorage). */
.welcome-section { margin: 0 0 30px; }
.welcome-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
@media (max-width: 1100px) { .welcome-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .welcome-grid { grid-template-columns: 1fr; } }
.welcome-card {
  background: #fff; border: 1px solid #ECECEC; border-radius: 12px; padding: 20px 22px;
  text-align: center; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 3px 14px rgba(20,24,31,0.05);
}
.welcome-card h4 {
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; margin: 0 0 10px;
  color: var(--text-dark); border: 0;
}
.welcome-card h4 .my { color: var(--brand-bright); }
.welcome-card p { font-family: 'DM Sans', sans-serif; font-size: 13px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.5; }
.welcome-card .ds-btn { margin-top: auto; }
.welcome-foot { text-align: center; margin-top: 18px; }
.welcome-foot a { color: var(--link-blue); font-size: 13px; }
.welcome-foot .note { display: block; color: var(--text-muted); font-size: 12px; font-style: italic; margin-top: 4px; }
.welcome-show-link { font-size: 13px; color: var(--link-blue); cursor: pointer; text-decoration: underline; }

/* Customer overview stat cards (individually colored gradients). */
.dash-stat-grid { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 26px; }
.dash-stat {
  flex: 1 1 190px; min-width: 180px; border-radius: 14px; padding: 18px 20px;
  color: #FAFAFA; box-shadow: 0 4px 18px rgba(20,24,31,0.08);
  display: flex; flex-direction: column; justify-content: center;
}
.dash-stat--teal   { background: linear-gradient(135deg, #0E4348 0%, #1F8A78 100%); }
.dash-stat--purple { background: linear-gradient(135deg, #3A1538 0%, #5C2150 100%); }
.dash-stat--navy   { background: linear-gradient(135deg, #0C2233 0%, #16384F 100%); }
.dash-stat--empty  { background: #fff; border: 1px solid #ECECEC; color: var(--text-dark); box-shadow: 0 4px 18px rgba(20,24,31,0.05); }
.dash-stat .num { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 30px; line-height: 1.05; margin: 0 0 2px; }
.dash-stat--teal   .num { color: #13EF76; }
.dash-stat--purple .num { color: #D89AE0; }
.dash-stat--navy   .num { color: #5BA7D8; }
.dash-stat .label { font-family: 'DM Sans', sans-serif; font-size: 13px; opacity: 0.92; }
.dash-stat .sub { font-family: 'DM Sans', sans-serif; font-size: 11.5px; opacity: 0.8; margin-top: 4px; }
.dash-stat .link { font-family: 'DM Sans', sans-serif; font-size: 12px; color: var(--brand-bright); text-decoration: underline; margin-top: 8px; cursor: pointer; }
.dash-stat--empty .link { color: var(--link-blue); }
.dash-stat--empty .num { color: var(--text-dark); }

/* Card/table view toggle. */
.view-toggle { display: inline-flex; gap: 4px; background: #EEF0F3; border-radius: 9px; padding: 3px; }
.view-toggle button {
  border: 0; background: transparent; cursor: pointer; width: 34px; height: 30px;
  border-radius: 7px; color: var(--text-muted); font-size: 15px; display: inline-flex;
  align-items: center; justify-content: center;
}
.view-toggle button.is-active { background: #fff; color: var(--brand-deep); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Yellow Unit ID tag (uses the device/unit row id). */
.unit-tag {
  display: inline-block; background: #F5C000; color: #2B2B2B; font-family: 'DM Mono', 'Courier New', monospace;
  font-weight: 700; font-size: 16px; letter-spacing: 1px; padding: 4px 12px; border-radius: 6px;
}

/* Device card grid (card view). */
.device-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
/* A section with a single card keeps card width instead of stranding one
   card in a four-column row of empty cells. */
.device-card-grid:has(> .device-card:only-child) { grid-template-columns: minmax(0, 340px); }
@media (max-width: 1200px) { .device-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .device-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .device-card-grid { grid-template-columns: 1fr; } }
.device-card {
  background: #fff; border: 1px solid #ECECEC; border-radius: 12px; padding: 16px 18px;
  box-shadow: 0 3px 14px rgba(20,24,31,0.05); font-family: 'DM Sans', sans-serif;
}
.device-card .dc-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; color: var(--text-dark); margin: 0 0 12px; }
.device-card .dc-idrow { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.device-card .dc-idrow .lbl { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }
.device-card .dc-field { margin-bottom: 10px; }
.device-card .dc-field .lbl { font-size: 11px; color: var(--text-muted); display: block; }
.device-card .dc-field .val { font-size: 13.5px; color: var(--text-dark); }
.device-card .dc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.device-card .dc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 12px; border-top: 1px solid #ECECEC; }

/* Admin dashboard action / create cards. */
.dash-action-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin: 0 0 26px; }
@media (max-width: 1100px) { .dash-action-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .dash-action-grid { grid-template-columns: repeat(2, 1fr); } }
.dash-action-card {
  background: #fff; border: 1px solid #ECECEC; border-radius: 12px; padding: 18px 20px;
  box-shadow: 0 3px 14px rgba(20,24,31,0.05); display: flex; flex-direction: column; gap: 10px;
}
.dash-action-card h4 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; margin: 0; color: var(--text-dark); border: 0; }
.dash-action-card a.create-link { font-size: 13px; color: var(--link-blue); text-decoration: underline; }
.dash-action-card .reports { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.dash-action-card .reports a { font-size: 12.5px; color: var(--link-blue); }

/* Admin dashboard stacks several stat groups vertically. */
.dash-stat-stack { display: flex; flex-direction: column; gap: 18px; }
.dash-stat-stack .stat-row { margin: 0; }

/* ---- Admin dashboard Phase 2: SIM usage + heartbeat panels ---- */
.sim-panel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 18px; }
@media (max-width: 980px) { .sim-panel-grid { grid-template-columns: 1fr; } }
.sim-panel { background: #fff; border: 1px solid #ECECEC; border-radius: 14px; padding: 20px 22px; box-shadow: 0 4px 18px rgba(20,24,31,0.05); font-family: 'DM Sans', sans-serif; }
.sim-panel h4 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; margin: 0 0 4px; color: var(--text-dark); border: 0; }
.sim-panel .panel-link { font-size: 13px; color: var(--link-blue); text-decoration: underline; }
.sim-panel .synced { font-size: 12px; color: var(--text-muted); margin: 4px 0 14px; }
.sim-active-card { background: linear-gradient(135deg, #0E4348 0%, #1F8A78 100%); color: #fff; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.sim-active-card .n { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 28px; color: #13EF76; line-height: 1.05; }
.sim-active-card .lbl { font-size: 13px; opacity: 0.92; }
.sim-active-card ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 11.5px; color: #9FE8C4; }
.sim-stat { margin-bottom: 14px; }
.sim-stat .n { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 24px; color: var(--text-dark); line-height: 1.1; }
.sim-stat .lbl { font-size: 13px; color: var(--text-dark); }
.sim-stat .sub { font-size: 11.5px; color: var(--text-muted); }
.sim-mismatch { background: #EAF3FB; border: 1px solid #CFE2F3; border-radius: 10px; padding: 10px 12px; font-size: 12px; color: #2A6094; display: flex; gap: 8px; align-items: flex-start; }
.sim-mismatch i { color: #2A6094; margin-top: 2px; }
.hb-card { border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; color: #fff; }
.hb-card--a { background: linear-gradient(135deg, #3A0B33 0%, #7A1466 100%); }
.hb-card--b { background: linear-gradient(135deg, #2A0826 0%, #5A0F4D 100%); }
.hb-card .n { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 26px; color: #F06FC8; line-height: 1.05; }
/* Proposal notes & activity thread (2026-09-19) */
.pn-thread { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border, #E5E7EB); }
.pn-item { position: relative; padding: 6px 0 6px 16px; font-size: 13px; }
.pn-item--activity { color: var(--text-muted); font-size: 12px; }
.pn-item--activity .fa { width: 14px; text-align: center; margin-right: 4px; }
.pn-item--note { background: #F7FAF9; border-radius: 8px; margin: 6px 0 6px 10px; padding: 10px 12px; }
.pn-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.pn-body { white-space: pre-wrap; line-height: 1.45; }
.pn-when { opacity: 0.75; margin-left: 6px; }
.pn-request { background: #FFF8E6; border-radius: 8px; padding: 10px 12px; margin: 0 0 12px; font-size: 13px; }
.hb-card--c { background: linear-gradient(135deg, #0F2A3A 0%, #164A5E 100%); }
.hb-card--c .n { color: #6FE3C1; }
.hb-card .n .of { font-size: 13px; color: rgba(255,255,255,0.75); margin-left: 8px; font-family: inherit; }
.hb-card .lbl .muted-inline { opacity: 0.7; font-size: 12px; }
.hb-card .lbl { font-size: 13px; }
.hb-card .sub { font-size: 11.5px; opacity: 0.85; }
.hb-pct { margin-top: 8px; }
.hb-pct .n { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 24px; color: var(--text-dark); }
.hb-pct .lbl { font-size: 13px; color: var(--text-dark); }
.hb-bar { height: 6px; border-radius: 3px; background: #EEE; overflow: hidden; margin: 8px 0; }
.hb-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #7A1466, #F06FC8); }

/* Admin overview as vertical cards (gradient header + stacked cells),
   consistent with the SIM/heartbeat panel cards. */
.adm-overview-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1200px) { .adm-overview-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .adm-overview-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .adm-overview-grid { grid-template-columns: 1fr; } }
.adm-ov-card {
  background: #fff; border: 1px solid #ECECEC; border-radius: 14px; overflow: hidden;
  box-shadow: 0 4px 18px rgba(20,24,31,0.05); display: flex; flex-direction: column;
  font-family: 'DM Sans', sans-serif;
}
.adm-ov-primary {
  background: linear-gradient(135deg, #0E4348 0%, #1F8A78 100%); color: #FAFAFA; padding: 16px 18px;
}
.adm-ov-primary .num { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 28px; line-height: 1.05; color: #13EF76; }
.adm-ov-primary .frac { opacity: 0.55; font-size: 22px; }
.adm-ov-primary .label { font-size: 13px; opacity: 0.92; margin-top: 2px; }
.adm-ov-primary .link { display: inline-block; margin-top: 8px; font-size: 12px; color: #13EF76; text-decoration: underline; }
.adm-ov-cells { padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.adm-ov-cell .num { font-family: 'Sora', sans-serif; font-weight: 300; font-size: 23px; line-height: 1.1; color: var(--text-dark); }
.adm-ov-cell .num--danger { color: #D64545; }
.adm-ov-cell .frac { color: var(--text-muted); font-size: 18px; }
.adm-ov-cell .label { font-size: 12.5px; color: var(--text-dark); }
.adm-ov-cell .sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ---- Flash toasts (top-right notifications) ---- */
.toast-stack {
  position: fixed; top: 18px; right: 18px; z-index: 4000;
  display: flex; flex-direction: column; gap: 10px;
  width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  background: #fff; border: 1px solid #ECECEC; border-left: 4px solid var(--brand-bright);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 8px 26px rgba(20,24,31,0.16);
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--text-dark);
  animation: toast-in 0.25s ease;
}
.toast.toast-out { animation: toast-out 0.26s ease forwards; }
.toast-icon { font-size: 16px; line-height: 1.4; margin-top: 1px; }
.toast-msg { flex: 1; line-height: 1.45; }
.toast-close {
  background: none; border: 0; font-size: 19px; line-height: 1; cursor: pointer;
  color: var(--text-muted); padding: 0 2px; margin: -2px -2px 0 0;
}
.toast-close:hover { color: var(--text-dark); }
.toast--success { border-left-color: var(--brand-bright); }
.toast--success .toast-icon { color: #12B85F; }
.toast--error { border-left-color: var(--link-coral); }
.toast--error .toast-icon { color: var(--link-coral); }
.toast--info, .toast--notice { border-left-color: var(--link-blue); }
.toast--info .toast-icon, .toast--notice .toast-icon { color: var(--link-blue); }
@keyframes toast-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(24px); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast.toast-out { animation: none; } }

/* ---- Legal / policy pages (Terms of Use, etc.) ---- */
.legal-page { max-width: 880px; margin: 0 auto; padding: 6px 4px 48px; font-family: 'DM Sans', sans-serif; color: var(--text-dark); }
.legal-page .legal-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 30px; text-align: center; margin: 16px 0 6px; border: 0; color: var(--text-dark); }
.legal-page .legal-updated { text-align: center; color: var(--text-muted); font-size: 13px; margin: 0 0 26px; }
.legal-intro {
  background: #F1FBF5; border: 1px solid #CDEFD9; border-left: 4px solid var(--brand-bright);
  border-radius: 10px; padding: 14px 18px; margin: 0 0 30px;
}
.legal-intro p { margin: 0; font-size: 14px; line-height: 1.6; color: #2F4A3C; }
.legal-page h3 {
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 18px; color: var(--brand-deep);
  margin: 0 0 12px; padding-top: 26px; margin-top: 26px; border-top: 1px solid #ECECEC; border-bottom: 0;
}
.legal-page h3:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-page p { font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; color: #3A3A3A; }
.legal-page ul { margin: 0 0 16px; padding-left: 22px; }
.legal-page li { font-size: 14.5px; line-height: 1.7; margin-bottom: 6px; color: #3A3A3A; }
.legal-page a { color: var(--link-blue); text-decoration: underline; }
.legal-page strong { color: var(--text-dark); }
.legal-contact {
  background: #fff; border: 1px solid #ECECEC; border-radius: 10px; padding: 16px 18px; margin-top: 8px;
  box-shadow: 0 3px 14px rgba(20,24,31,0.05);
}

/* Amber warning callout for legal pages (e.g. emergency-services notice). */
.legal-warning {
  background: #FFF6E9; border: 1px solid #F3D9A8; border-left: 4px solid #E8902A;
  border-radius: 10px; padding: 14px 18px; margin: 0 0 30px;
}
.legal-warning p { margin: 0; font-size: 14px; line-height: 1.6; color: #7A4A12; }
.legal-warning strong { color: #7A4A12; }

/* Separator between the admin overview and the admin's own personal services
   (only rendered when an admin has personal devices/monitors/video units). */
.dash-section-gap { max-width: 1160px; margin: 40px auto; border-top: 1px solid var(--header-border); }

/* ---------- Filter tabs (Events Log category filter) ----------
   Underlined tab row: an inactive tab is plain text; the active tab gets a
   blue chip. A full-width blue baseline sits under the whole row. */
.ds-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  border-bottom: 2px solid var(--link-blue);
  margin: 0 0 20px; padding: 0;
}
.ds-tab {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500;
  color: var(--text-dark); text-decoration: none;
  padding: 9px 16px; border-radius: 6px 6px 0 0; line-height: 1.2;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.ds-tab:hover { background: rgba(47,111,237,0.08); }
.ds-tab.is-active { background: var(--link-blue); color: #fff; }
.ds-tab .ds-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.22); color: inherit;
}
.ds-tab:not(.is-active) .ds-tab-count { background: rgba(47,111,237,0.12); color: var(--link-blue); }

/* Small inline table tag (blue "chip" — Event user / Chat operator names). */
.ds-chip {
  display: inline-block; padding: 4px 12px; border-radius: 6px;
  background: var(--link-blue); color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1.3;
}
.ds-chip--success { background: var(--brand-deep); color: var(--brand-bright); }
.ds-chip--danger  { background: var(--link-coral); color: #fff; }
.ds-chip--warning { background: #F5C000; color: #3A2A00; }
.ds-chip--muted   { background: #E5E7EB; color: #6B7280; }
/* Row highlight for failure/attention rows in ds-table. */
.ds-table tbody tr.is-danger td { background: #FDECEF; }
/* Amber highlight for needs-review rows (e.g. unlinked company with services). */
.ds-table tbody tr.is-warning td { background: #FFF6E9; }

/* Click-to-sort table headers (JS-driven; used by the billing reports). */
.ds-table th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.ds-table th.th-sortable:hover { background: #3A3A3A; }
.ds-table th.th-sortable i { margin-left: 6px; opacity: 0.5; }
.ds-table th.th-sortable i.is-sorted { opacity: 1; color: var(--brand-bright); }

/* ---------- Quick-link card grid (Billing / Reporting quick links) ----------
   Centered white cards, each with a teal icon, title, subtitle, and a deep
   pill button. Used by /admin/billing, /admin/billing/reports, and the
   Support-page hero. Scoped under .ql-grid so it can't clobber the Support
   page's older left-aligned .quick-links .ql-card cards. */
.ql-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 30px;
  text-align: center; color: var(--text-dark); margin: 8px 0 28px; }
.ql-grid { display: grid; gap: 22px; margin: 0 0 20px; }
.ql-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ql-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .ql-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .ql-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ql-grid--4, .ql-grid--3 { grid-template-columns: 1fr; } }
.ql-grid .ql-card {
  background: #fff; border: 1px solid #ECECEC; border-radius: 14px;
  padding: 30px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 4px 18px rgba(20,24,31,0.05);
}
.ql-grid .ql-card .ql-icon { font-size: 26px; color: var(--brand-deep); margin-bottom: 6px; }
.ql-grid .ql-card h3 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 18px;
  color: var(--text-dark); margin: 0; }
.ql-grid .ql-card p { font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--text-muted); margin: 0; flex: none; }
.ql-btn {
  margin-top: 12px; display: inline-block;
  background: var(--brand-deep); color: var(--brand-bright);
  border-radius: 100px; padding: 11px 24px;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13.5px;
  text-decoration: none; cursor: pointer; transition: filter 0.15s ease;
}
.ql-btn:hover { filter: brightness(1.1); }

/* Two-column detail layout (invoice / payment detail pages). */
.detail-cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .detail-cols { grid-template-columns: 1fr; } }

/* "Back to ..." outline pill used above detail/report pages. */
.back-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 20px; border: 1px solid var(--input-border); border-radius: 100px;
  background: #fff; color: var(--text-dark); text-decoration: none;
  font-family: 'DM Sans', sans-serif; font-size: 14px;
}
.back-pill:hover { background: var(--input-bg); }

/* ---------- Inline warning banner (SIM unassigned tab, destructive notices) */
.ds-banner {
  border-radius: 10px; padding: 12px 16px; margin: 0 0 16px;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px;
  display: flex; gap: 10px; align-items: flex-start;
}
.ds-banner i { margin-top: 2px; }
.ds-banner--danger { background: #FDECEF; border: 1px solid #F5C6D0; color: #B3324D; }
.ds-banner--danger i { color: var(--link-coral); }
.ds-banner--info { background: #EAF3FB; border: 1px solid #CFE2F3; color: #2A6094; }
.ds-banner--info i { color: #2A6094; }
.ds-banner--success { background: #F1FBF5; border: 1px solid #CDEFD9; color: #2F7A4C; }
.ds-banner--success i { color: #12B85F; }
.ds-banner--warning { background: #FFF6E9; border: 1px solid #F3D9A8; color: #7A4A12; }
.ds-banner--warning i { color: #E8902A; }

/* ============================================================
   Documentation (MyResource Center) — design/Documentation.png
   ============================================================ */

/* FAQ category cards at the top of /documents. */
.faq-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 0 34px; }
@media (max-width: 1150px) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .faq-grid { grid-template-columns: 1fr; } }
.faq-card {
  background: #fff; border: 1px solid #ECECEC; border-radius: 12px; padding: 20px 22px;
  display: flex; flex-direction: column; align-items: flex-start;
  box-shadow: 0 3px 14px rgba(20,24,31,0.05);
}
.faq-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; margin-bottom: 10px; }
.faq-card-head h4 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15.5px; margin: 0; color: var(--text-dark); border: 0; }
.faq-count {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border: 1.5px solid var(--link-blue); border-radius: 50%;
  color: var(--link-blue); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600;
}
.faq-links { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; }
.faq-links a {
  color: var(--link-blue); text-decoration: underline; font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; line-height: 1.45; text-align: left; cursor: pointer;
}
.faq-card .ql-btn { margin-top: auto; padding: 10px 20px; font-size: 13px; }

/* Resource-category tree (left column below the FAQ cards). */
.doc-tree { max-width: 380px; }
.doc-tree-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; color: var(--text-dark); margin: 0 0 12px; }
.doc-tree-cat {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; padding: 8px 6px; margin-top: 4px; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 13.5px; color: var(--text-dark);
  text-align: left;
}
.doc-tree-cat .cat-icon { color: var(--text-muted); width: 16px; text-align: center; }
.doc-tree-cat .caret { margin-left: auto; color: var(--text-muted); font-size: 12px; transition: transform 0.15s ease; }
.doc-tree-cat.collapsed .caret { transform: rotate(-90deg); }
.doc-tree-links { display: flex; flex-direction: column; }
.doc-tree-cat.collapsed + .doc-tree-links { display: none; }
.doc-tree-link {
  display: block; padding: 7px 10px 7px 31px; border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 13px; line-height: 1.4;
  color: var(--link-blue); text-decoration: underline; cursor: pointer;
}
.doc-tree-link:hover { background: rgba(47,111,237,0.07); }
.doc-tree-link.is-active { background: var(--link-blue); color: #fff; text-decoration: none; }
.doc-tree-star { color: #F4C430; }

/* Rendered-markdown document styles (design's "Markdown Feature Test Document").
   Heading hierarchy: H1 Sora semibold → H2/H3 DM Sans heavy → H4 underline →
   H5 bold → H6 bold italic. */
.md-doc { font-family: 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.65; color: var(--text-dark); }
.md-doc > :first-child { margin-top: 0; }
.md-doc h1 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 28px; line-height: 1.25; margin: 28px 0 12px; color: var(--text-dark); border: 0; }
.md-doc h2 { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 22px; margin: 26px 0 10px; color: var(--text-dark); border: 0; }
.md-doc h3 { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 18px; margin: 22px 0 8px; color: var(--text-dark); border: 0; }
.md-doc h4 { font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 15.5px; text-decoration: underline; margin: 20px 0 8px; color: var(--text-dark); border: 0; }
.md-doc h5 { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 14.5px; margin: 18px 0 6px; color: var(--text-dark); border: 0; }
.md-doc h6 { font-family: 'DM Sans', sans-serif; font-weight: 700; font-style: italic; font-size: 14.5px; margin: 18px 0 6px; color: var(--text-dark); border: 0; }
.md-doc p { margin: 10px 0; }
.md-doc a { color: var(--link-blue); text-decoration: underline; }
.md-doc ul, .md-doc ol { padding-left: 26px; margin: 10px 0; }
.md-doc ul, .md-doc ul > li { list-style: disc outside; }
.md-doc ol, .md-doc ol > li { list-style: decimal outside; }
.md-doc ul ul, .md-doc ul ul > li { list-style: circle outside; }
.md-doc ol ol, .md-doc ol ol > li { list-style: lower-alpha outside; }
.md-doc li { margin: 5px 0; padding: 0; border: 0; display: list-item; }
.md-doc li.task-item { list-style: none; margin-left: -20px; }
.md-doc li.task-item input[type="checkbox"] {
  accent-color: var(--link-blue); width: 16px; height: 16px;
  margin-right: 8px; vertical-align: -3px;
  pointer-events: none; /* read-only without the washed-out disabled look */
}
.md-doc li.task-item p { display: inline; margin: 0; }
.md-doc blockquote {
  background: #EFF6FD; border-left: 4px solid #5B9BD5; border-radius: 0 10px 10px 0;
  padding: 14px 18px; margin: 14px 0; color: #2A6094; font-style: italic;
}
.md-doc blockquote p { margin: 6px 0; }
.md-doc code {
  font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px;
  background: #2D0A45; color: #FF7AC2; padding: 3px 9px; border-radius: 6px;
}
.md-doc pre {
  background: #2D0A45; color: #E3C9F5; padding: 16px 18px; border-radius: 10px;
  overflow-x: auto; margin: 14px 0; line-height: 1.55;
}
.md-doc pre code { background: transparent; color: inherit; padding: 0; border-radius: 0; }
.md-doc img { max-width: 100%; border-radius: 10px; border: 1px solid #ECECEC; }
.md-doc hr { border: 0; border-top: 1px solid var(--header-border); margin: 22px 0; }
.md-doc .ds-table-wrap { margin: 14px 0; }
/* Admonition cards: markdown blockquotes starting with [!INFO], [!TIP] or [!ALERT]. */
.md-note {
  border-radius: 10px; padding: 12px 14px; margin: 14px 0; max-width: 420px;
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-style: normal;
}
.md-note i { margin-top: 2px; }
.md-note p { margin: 0; }
.md-note--info  { background: #EAF3FB; border: 1px solid #CFE2F3; color: #2A6094; }
.md-note--info i { color: #2A6094; }
.md-note--tip   { background: #FFF6E9; border: 1px solid #F3D9A8; color: #9A6A1B; }
.md-note--tip i { color: #E8902A; }
.md-note--alert { background: #FDECEF; border: 1px solid #F5C6D0; color: #B3324D; }
.md-note--alert i { color: var(--link-coral); }


/* ============================================================
   Mobile refinements (small screens)
   ============================================================ */
@media (max-width: 640px) {
  :root { --rail-w: 56px; }

  /* Tighter page gutters so content uses the screen */
  .app-content { padding: 20px 12px 40px; }

  /* Header: smaller heading that can wrap; the report/order pills are hidden
     (those actions remain reachable from the sidebar and dashboard). It sticks
     to the top so the page title and Sign Out survive a long table. */
  .app-header {
    position: sticky; top: 0; z-index: 90;
    padding: 10px 12px; gap: 10px; flex-wrap: wrap;
  }
  /* Phones show the 44px menu button on the first row: match it. */
  .app-header .header-heading { font-size: 18px; white-space: normal; min-height: 44px; }
  .app-header .header-actions > .ds-btn { display: none; }
  .header-menu { display: inline-flex; }

  /* The collapsed icon rail cost 56px of a ~390px screen on every page, for a
     strip of unlabelled icons. On phones the menu lives behind the header's
     hamburger and opens as the drawer below; the rail itself is gone. */
  .app-sidebar { display: none; }
  .app-sidebar.is-expanded {
    display: flex;
    position: fixed; left: 0; top: 0; z-index: 95; height: 100dvh;
    box-shadow: 6px 0 28px rgba(20, 24, 31, 0.3);
  }
  /* Same zone difference as desktop, shifted up for touch: the customer rows
     hit the 44px target, and the long admin list stays tighter at 40px — close
     enough to the target to stay comfortable, and it keeps the drawer from
     needing much internal scrolling. Both selectors are named because
     .rail-admin .rail-item outranks the plain .rail-item rule. */
  .app-sidebar .rail-item { height: 44px; }
  .app-sidebar .rail-admin .rail-item { height: 40px; }

  /* Pagination wraps within the page width. Sized for a thumb rather than a
     mouse — these were 26px, well under the ~44px touch minimum. */
  .ds-pagination { gap: 5px; padding: 7px 9px; }
  .ds-pagination a, .ds-pagination span, .ds-pagination em {
    min-width: 34px; height: 36px; font-size: 13px; padding: 0 7px;
  }
  .page-goto input { width: 84px; height: 40px; }

  /* Remaining touch targets. Where a control has to keep its visual size (text
     links inside a header or a table row), padding grows the tappable box and
     an equal negative margin cancels the layout shift. */
  .app-header .header-user .greeting button.linklike {
    display: inline-block; padding: 14px 6px; margin: -14px -6px;
  }
  .stat-card--primary .stat-link { padding: 13px 8px; margin: -5px -8px -13px; }
  .dev-toolbar-links { gap: 4px; }
  .dev-toolbar-links a { display: inline-block; padding: 11px 6px; }
  .checkin-link { display: inline-block; padding: 9px 0; margin: -9px 0; }
  .edit-icon-btn { padding: 11px 13px; font-size: 16px; }
  .search-clear { width: 36px; height: 36px; }

  /* Tab strips scroll sideways instead of wrapping onto three ragged lines
     (SIM Admin's carrier row put "T-Mobile" alone on a second line). */
  .ds-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ds-tabs::-webkit-scrollbar { display: none; }
  .ds-tab { flex: 0 0 auto; padding: 12px 16px; }

  /* Add/search action bar stacks: full-width button, search below */
  .dev-actionbar { flex-direction: column; align-items: stretch; border-radius: 24px; padding: 8px; gap: 4px; }
  .dev-actionbar .add-btn { justify-content: center; }
  .dev-actionbar .search-seg { padding: 0 14px; }

  /* Safari on iOS zooms the viewport whenever a focused field's font-size is
     under 16px, and it never zooms back out on blur — one tap in a search box
     left the rest of the session panned sideways. Every search, paging and
     modal field was 13–14px; 16px is the threshold that stops the zoom.
     (.input-underline / .select-underline are already 16px.) */
  .dev-actionbar input,
  .page-goto input,
  .ds-input, .ds-textarea, .ds-select,
  .co-search { font-size: 16px; }

  /* Backdrop for the rail drawer — tapping it closes the menu. */
  .rail-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 94;                   /* under .app-sidebar.is-expanded (95) */
    background: rgba(20, 24, 31, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
  }
  body.rail-open .rail-scrim { opacity: 1; pointer-events: auto; }

  /* Tables: header labels wrap onto two lines instead of forcing every column
     as wide as its longest label. On a phone that nowrap header — "Assigned
     Monitoring", "Signal Strength (CSQ)", "Unpaid Invoices" — was setting the
     column width and pushing the rest of the row off-screen. Cell values keep
     their own col-num / col-nowrap rules, so only the headers wrap. */
  .ds-table thead th,
  .ds-table thead th.col-num,
  .ds-table thead th.col-nowrap,
  .ds-table thead th.th-sortable { white-space: normal; }
  .ds-table thead th { padding: 11px 12px; line-height: 1.3; }
  .ds-table tbody td { padding: 12px; }

  /* table-layout:fixed scales the <colgroup> pixel widths down proportionally
     to fit the screen, which squeezed the accounts table's Company column to a
     few pixels and stacked company names one letter per line. Content-driven
     widths with a floor let .ds-table-wrap scroll instead of crushing columns. */
  .ds-table--fixed { table-layout: auto; min-width: 720px; }

  /* The first column carries the row's identity on every admin table (phone
     number, company, ID) and it was the first thing to scroll away, leaving
     anonymous numbers behind. Pin it to the left edge of the scroller.
     A sticky cell needs its own opaque background: the row's background paints
     in a different order, so scrolled content shows through otherwise — hence
     the per-row-state repeats below. */
  .ds-table th:first-child,
  .ds-table td:first-child { position: sticky; left: 0; }
  .ds-table tbody td:first-child {
    z-index: 1;
    background: var(--page-bg);
    box-shadow: 1px 0 0 #ECECEC;
  }
  .ds-table tbody tr:nth-child(even) td:first-child { background: #F7F8FA; }
  .ds-table tbody tr.is-inactive td:first-child { background: #FDECEC; }
  .ds-table tbody tr.is-inactive:nth-child(even) td:first-child { background: #FBE3E3; }
  .ds-table tbody tr.is-danger td:first-child { background: #FDECEF; }
  .ds-table tbody tr.is-warning td:first-child { background: #FFF6E9; }
  /* thead already has an opaque background; it sticks vertically only in the
     wraps that scroll vertically (the billing pickers set their own
     max-height), and is inert in the rest. */
  .ds-table thead th { position: sticky; top: 0; z-index: 2; }
  .ds-table thead th:first-child { z-index: 3; }

  /* Modals hug the screen. The panel is capped to the visible viewport and its
     body does the scrolling, so the title and the close X stay put and the
     action buttons at the bottom are always reachable. */
  .ds-modal { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .ds-modal__panel { max-height: 100%; display: flex; flex-direction: column; }
  .ds-modal__body { padding: 18px 16px; overflow-y: auto; }
  .sr-title { font-size: 22px; }
  .sr-card { padding: 18px 14px; }
  /* Nothing in a modal may be wider than the panel (QR canvas, chart canvases,
     screenshots) — an oversized child overflowed past both panel edges. */
  .ds-modal canvas, .ds-modal img, .ds-modal svg { max-width: 100%; height: auto; }

  /* Stat cards go full-width instead of squeezing side by side */
  .stat-card--primary { flex: 1 1 100%; }
  .stat-panel { padding: 16px 18px; }
}

/* Equal-size stat cards (Sales > Proposals). The base .stat-panel centres
   children at their natural size, which is right for the dashboard's mixed
   cells but leaves a row of linked tiles ragged: .hb-pct has no box of its
   own and the cards wrap at different widths. This modifier gives every
   direct child the same flex basis, stretches them to one height and boxes
   the plain tiles like the coloured ones. (a.hb-card/a.hb-pct stay
   display:block from the link rules further down.) */
.stat-panel--equal { align-items: stretch; flex-wrap: nowrap; gap: 12px; }
.stat-panel--equal > a { flex: 1 1 0; min-width: 0; margin: 0; }
.stat-panel--equal > .hb-pct { padding: 14px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px #ECECEC; background: #FAFAFA; }
.stat-panel--equal > .hb-pct .n { font-size: 26px; line-height: 1.05; }
.stat-panel--equal .sub { padding-top: 4px; }
.stat-panel--equal > .hb-pct .sub { font-size: 11.5px; color: var(--text-muted); }
.stat-panel--equal .sub--lines { line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-panel--equal .sub--lines > div { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 760px) {
  .stat-panel--equal { flex-wrap: wrap; }
  .stat-panel--equal > a { flex: 1 1 45%; }
}

/* ---------- Org chart (/admin/org-chart) ---------- *
 * Colors sampled from design/org-chart.png: teal group headers with the brand
 * green title, dark panels holding the leads, white cards for their reports
 * and cream cards one level deeper.
 */

.org-toolbar { display: flex; gap: 12px; align-items: center; margin: 0 0 20px; flex-wrap: wrap; }

.org-empty {
  font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--text-muted);
  margin: 0 0 16px;
}

.org-board {
  background: #FAFAFA;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 4px 22px rgba(20, 24, 31, 0.07);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.org-group { border-radius: 12px; overflow: hidden; }
.org-group.is-hidden { display: none; }

.org-group__title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--brand-bright);
  background: var(--brand-deep);
  text-align: center;
  margin: 0;
  padding: 12px 16px;
  border: 0; /* defeats main.css's global h3 rules */
  /* Fixed height so a title that wraps in a narrow column still lines its
     header up with the others across the row. */
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.25;
}

.org-group__body {
  background: #3A3A3A;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The leadership banner is a full-width row of dark cards sitting on the board
   itself rather than inside a dark panel. */
.org-group--banner .org-group__body {
  background: transparent;
  padding: 6px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

/* Everything below the banner: one column per department. */
.org-columns {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.org-note {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #FAFAFA;
}

/* ---- A person's box ---- */

.org-person { font-family: 'DM Sans', sans-serif; }
.org-person.is-hidden { display: none; }
/* Kept on screen only to show where a match sits. Only the person's own row
   dims — dimming the whole box would fade the matched report nested inside it.
   :not(.is-match) because a manager can be both: a hit in their own right AND
   the context for a hit below them, and a hit must never look dimmed. */
.org-person.is-context:not(.is-match) > .org-person__head { opacity: 0.42; }

.org-person__head { display: flex; align-items: flex-start; gap: 12px; }
.org-person__id { min-width: 0; }

.org-avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(127, 127, 127, 0.25);
}

.org-name {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
}

.org-role { font-size: 13px; line-height: 1.45; margin-top: 3px; opacity: 0.82; }

.org-email {
  display: inline-block;
  font-size: 13px;
  line-height: 1.45;
  margin-top: 5px;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* Reports nest inside their manager's box. */
.org-reports { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }

/* ---- Depth variants ---- */

/* Dark cards in the leadership banner */
.org-person--exec {
  background: #363636;
  border-radius: 10px;
  padding: 18px 20px;
  height: 100%;
}

/* A department lead: plain text straight on the dark panel */
.org-person--exec .org-name,
.org-person--lead .org-name { color: #FAFAFA; }
.org-person--exec .org-role, .org-person--exec .org-email,
.org-person--lead .org-role, .org-person--lead .org-email { color: #E0E0E0; }

/* Their reports */
.org-person--card {
  background: #F6FCFF;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.org-person--card > .org-person__head .org-name,
.org-person--card > .org-person__head .org-role,
.org-person--card > .org-person__head .org-email { color: #0E2B58; }

/* One level deeper */
.org-person--sub {
  background: #FFF8F2;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}
.org-person--sub > .org-person__head .org-name,
.org-person--sub > .org-person__head .org-role,
.org-person--sub > .org-person__head .org-email { color: #6A463A; }

/* ---- Narrower screens ---- */

@media (max-width: 1180px) {
  .org-columns,
  .org-group--banner .org-group__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .org-board { padding: 14px; }
  .org-columns,
  .org-group--banner .org-group__body { grid-template-columns: minmax(0, 1fr); }
  .org-group__title { font-size: 16px; padding: 12px 14px; }
  .org-group__body { padding: 14px; }
}

/* ---------- Directory views (card + list) on /admin/org-chart ---------- *
 * Two alternate reads of the same org data, reached from the .view-toggle in
 * the toolbar. Grouping headings are inserted by the page's JS, so each person
 * is in the DOM exactly once per view.
 */

.org-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 100px; padding: 0 20px; height: 44px;
  box-shadow: 0 2px 10px rgba(20, 24, 31, 0.06);
}
.org-search input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-family: 'DM Sans', sans-serif; font-size: 13.5px;
}

/* .dir-card / .dir-row / .az-bar all set display, which beats the [hidden]
   attribute's UA default. Filtering and view switching rely on el.hidden. */
.dir-card[hidden], .dir-row[hidden], .dir-letter[hidden],
.dir-grid[hidden], .dir-rows[hidden], .az-bar[hidden],
.dir-controls[hidden], .org-board[hidden] { display: none !important; }

/* ---- Directory controls ---- */

.dir-controls {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin: 0 0 16px; font-family: 'DM Sans', sans-serif;
}
.dir-ctl { display: flex; align-items: center; gap: 8px; }
.dir-ctl__lbl { font-size: 12px; color: var(--text-muted); }

/* Text-sized segmented control (the .view-toggle above it is icon-sized). */
.seg { display: inline-flex; gap: 3px; background: #EEF0F3; border-radius: 8px; padding: 3px; }
.seg button {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12px; padding: 6px 11px; border-radius: 6px;
  color: var(--text-muted); white-space: nowrap;
}
.seg button:hover { color: var(--text-dark); }
.seg button.is-active {
  background: #fff; color: var(--brand-deep); font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ---- A-Z jump rail (only shown when grouping by letter) ---- */

.az-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 2px; align-items: center;
  background: rgba(250, 250, 250, 0.94); backdrop-filter: blur(6px);
  border: 1px solid var(--card-border); border-radius: 100px;
  padding: 6px 10px; margin: 0 0 18px;
}
.az {
  font-family: 'Sora', sans-serif; font-size: 11.5px; font-weight: 600;
  color: var(--brand-deep); text-decoration: none;
  min-width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 6px;
}
.az:hover { background: var(--brand-deep); color: var(--brand-bright); }
.az--off { color: #C4C9CF; pointer-events: none; }

/* ---- Group headings ---- */

.dir-letter {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 2px;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px;
  color: var(--brand-deep);
}
.dir-letter:first-child { margin-top: 0; }
.dir-letter > span {
  background: var(--brand-deep); color: var(--brand-bright);
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.dir-letter::after { content: ""; flex: 1; height: 1px; background: var(--card-border); }
.dir-letter--dept { color: var(--text-dark); font-size: 13.5px; }
/* The department dot is also a span, so it has to out-specify the tile above. */
.dir-letter > span.dir-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--brand-deep);
}
.dir-rows .dir-letter { margin: 18px 0 8px; }

/* ---- Avatars ---- */

.dir-av {
  width: 38px; height: 38px; border-radius: 50%;
  object-fit: cover; flex: none; display: block;
}
.dir-av--lg { width: 54px; height: 54px; }
.dir-av--mono {
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-deep); color: var(--brand-bright);
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px;
  letter-spacing: 0.02em;
}
.dir-av--lg.dir-av--mono { font-size: 19px; }

/* ---- Department chips + dots (coloured by position in org_chart.yml) ---- */

.dir-chip {
  display: inline-block; padding: 3px 10px; border-radius: 100px;
  font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600;
  line-height: 1.5; white-space: nowrap;
}
.dir-chip--d1 { background: #E7F1EC; color: #17604A; }
.dir-chip--d2 { background: #E3EDFB; color: #1B4C9E; }
.dir-chip--d3 { background: #EAF6EE; color: #226B3C; }
.dir-chip--d4 { background: #F1E9F8; color: #5B2A87; }
.dir-chip--d5 { background: #FDF0E2; color: #8A5216; }
.dir-chip--d6 { background: #FBE7EC; color: #90243F; }
.dir-letter > span.dir-dot--d1 { background: #17604A; }
.dir-letter > span.dir-dot--d2 { background: #1B4C9E; }
.dir-letter > span.dir-dot--d3 { background: #226B3C; }
.dir-letter > span.dir-dot--d4 { background: #5B2A87; }
.dir-letter > span.dir-dot--d5 { background: #8A5216; }
.dir-letter > span.dir-dot--d6 { background: #90243F; }

/* ---- Card view ---- */

.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }

.dir-card {
  background: #fff; border: 1px solid var(--card-border); border-radius: 14px;
  padding: 18px; box-shadow: 0 4px 18px rgba(20, 24, 31, 0.05);
  font-family: 'DM Sans', sans-serif;
  display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.dir-card:hover { box-shadow: 0 8px 26px rgba(20, 24, 31, 0.12); transform: translateY(-2px); }
.dir-card__top { display: flex; align-items: center; gap: 13px; }
.dir-card .dir-chip { align-self: flex-start; }

.dir-name {
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--text-dark); margin: 0; border: 0; line-height: 1.25;
}
.dir-title { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

.dir-meta { display: flex; flex-direction: column; gap: 6px; }
.dir-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-dark); }
.dir-line i { color: var(--text-muted); width: 14px; text-align: center; margin-top: 2px; flex: none; }
.dir-line a { color: var(--link-blue); text-decoration: none; overflow-wrap: anywhere; }
.dir-line a:hover { text-decoration: underline; }

/* ---- List view ---- */

.dir-row {
  display: grid;
  grid-template-columns: 38px minmax(170px, 1.4fr) minmax(140px, 0.9fr) minmax(120px, 0.9fr) minmax(180px, 1.2fr);
  gap: 14px; align-items: center;
  background: #fff; border: 1px solid var(--card-border); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 7px; font-family: 'DM Sans', sans-serif;
}
.dir-row:hover { border-color: #C8D2DD; background: #FBFCFE; }
.dir-row .dir-chip { justify-self: start; }
.dir-row__mgr { font-size: 12.5px; color: var(--text-muted); }
.dir-row__mail { font-size: 12.5px; }
.dir-row__mail a { color: var(--link-blue); text-decoration: none; overflow-wrap: anywhere; }
.dir-row__mail a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .dir-row {
    grid-template-columns: 38px 1fr;
    grid-template-areas: "av id" ". chip" ". mgr" ". mail";
    row-gap: 6px;
  }
  .dir-row > .dir-av { grid-area: av; }
  .dir-row__id { grid-area: id; }
  .dir-row .dir-chip { grid-area: chip; }
  .dir-row__mgr { grid-area: mgr; }
  .dir-row__mail { grid-area: mail; }
}

/* ---- Print ----
 * On paper the screen design works against itself: portrait drops the four
 * departments to two columns (so the chart sprawls over three pages with big
 * voids under the short ones), and the dark panels lay down a lot of toner for
 * something meant to be read. Printing therefore rebuilds the same chart as a
 * light, denser, landscape sheet — the tiers are carried by indentation and a
 * colored left rule instead of by fills, which also survives a grayscale
 * printer. Nothing here affects the screen.
 *
 * Everything is scoped to body.org-chart-page (set by @body_class on the org
 * chart route) because this is a global stylesheet — unscoped print rules would
 * quietly restyle every other printable page in the portal.
 */

.org-printhead { display: none; }

@media print {
  /* Landscape keeps all four departments side by side, the way they read on
     screen, and is what makes the whole chart fit one sheet. */
  @page { size: landscape; margin: 0.4in; }

  .org-chart-page .app-sidebar, .org-chart-page .app-header,
  .org-chart-page .page-footer, .org-chart-page .org-toolbar,
  .org-chart-page .ds-section-title, .org-chart-page .org-empty,
  .org-chart-page .rail-scrim, .org-chart-page .rail-tooltip,
  .org-chart-page .toast-stack, .org-chart-page .dir-controls,
  .org-chart-page .az-bar,
  .org-chart-page .ds-container > p.muted { display: none !important; }

  body.org-chart-page { background: #fff !important; }
  .org-chart-page .app-shell { margin-left: 0 !important; }
  .org-chart-page .app-content { padding: 0 !important; }
  .org-chart-page .ds-container { max-width: none; padding: 0; }

  /* Title block, print only — the on-screen lede is about adding a photo to
     your account, which is no use on paper. */
  .org-chart-page .org-printhead {
    display: block;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 1.5px solid var(--brand-deep);
  }
  .org-chart-page .org-printhead h2 {
    font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15pt;
    color: var(--brand-deep); margin: 0; border: 0;
  }
  .org-chart-page .org-printhead .meta {
    font-family: 'DM Sans', sans-serif; font-size: 8pt; color: #555; margin: 2px 0 0;
  }

  .org-chart-page .org-board { box-shadow: none; padding: 0; background: none; gap: 8px; }

  /* The width media queries above also apply to the page box, which would
     otherwise force this to two columns. This block is last, so it wins. */
  .org-chart-page .org-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .org-chart-page .org-group--banner .org-group__body { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

  /* Keep the teal header bars — they are thin, they carry the brand, and they
     are what makes the departments scannable. Everything below them goes to
     paper white with an outline. */
  .org-chart-page .org-group { border: 1px solid var(--brand-deep); border-radius: 6px; }
  .org-chart-page .org-group__title {
    font-size: 10.5pt; padding: 6px 8px; min-height: 0;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .org-chart-page .org-group__body { background: none; padding: 7px; gap: 7px; }

  .org-chart-page .org-note { color: var(--brand-deep); font-size: 9pt; }

  /* Type sizes drop to paper scale — but only as far as the sheet requires.
     The whole chart fits a landscape page at these sizes, so they are set for
     reading rather than squeezed to the minimum. */
  .org-chart-page .org-name  { font-size: 10.5pt; line-height: 1.2; }
  .org-chart-page .org-role  { font-size: 8.5pt; margin-top: 1px; opacity: 1; color: #444; }
  .org-chart-page .org-email { font-size: 8.5pt; margin-top: 2px; color: #222; text-decoration: underline; }
  .org-chart-page .org-avatar { width: 32px; height: 32px; }
  .org-chart-page .org-person__head { gap: 8px; }
  .org-chart-page .org-reports { gap: 6px; margin-top: 7px; }

  /* Tiers, without the fills: leads sit flush in the department, reports and
     their reports step in behind a colored rule. */
  .org-chart-page .org-person--exec {
    background: none; border: 1px solid #9AA3AA; border-radius: 6px; padding: 8px 10px;
  }
  .org-chart-page .org-person--exec .org-name,
  .org-chart-page .org-person--lead .org-name { color: var(--brand-deep); }
  .org-chart-page .org-person--exec .org-role, .org-chart-page .org-person--exec .org-email,
  .org-chart-page .org-person--lead .org-role, .org-chart-page .org-person--lead .org-email { color: #444; }

  .org-chart-page .org-person--card,
  .org-chart-page .org-person--sub {
    background: none;
    box-shadow: none;
    border: 1px solid #D5DBE2;
    border-left-width: 3px;
    border-radius: 4px;
    padding: 7px 9px;
  }
  .org-chart-page .org-person--card { border-left-color: #0E2B58; }
  .org-chart-page .org-person--sub  { border-left-color: #6A463A; }
  .org-chart-page .org-person--card > .org-person__head .org-name { color: #0E2B58; }
  .org-chart-page .org-person--sub  > .org-person__head .org-name { color: #6A463A; }
  .org-chart-page .org-person--card > .org-person__head .org-role,
  .org-chart-page .org-person--sub  > .org-person__head .org-role { color: #555; }
  .org-chart-page .org-person--card > .org-person__head .org-email,
  .org-chart-page .org-person--sub  > .org-person__head .org-email { color: #222; }

  /* A person's box never splits across a page, and a department header never
     ends up stranded at the foot of one. Groups themselves may break: a group
     taller than the page would have its avoid-rule ignored anyway, and forcing
     the break just wastes a sheet. */
  .org-chart-page .org-person { break-inside: avoid; page-break-inside: avoid; }
  .org-chart-page .org-group__title { break-after: avoid; page-break-after: avoid; }
  .org-chart-page .org-group--banner { break-inside: avoid; page-break-inside: avoid; }

  /* Whichever directory view is on screen is what prints (the other panes are
     display:none, so they never reach the page). Same treatment as the chart:
     paper white, no shadows, and no entry split across a page. */
  .org-chart-page .dir-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .org-chart-page .dir-card,
  .org-chart-page .dir-row {
    box-shadow: none; border: 1px solid #C9D0D8; border-radius: 6px;
    padding: 8px 10px; margin-bottom: 5px;
    break-inside: avoid; page-break-inside: avoid;
  }
  .org-chart-page .dir-card { gap: 7px; }
  .org-chart-page .dir-name { font-size: 10pt; }
  .org-chart-page .dir-title, .org-chart-page .dir-line,
  .org-chart-page .dir-row__mgr, .org-chart-page .dir-row__mail { font-size: 8.5pt; }
  .org-chart-page .dir-line a, .org-chart-page .dir-row__mail a { color: #222; }
  .org-chart-page .dir-av { width: 30px; height: 30px; }
  .org-chart-page .dir-av--lg { width: 38px; height: 38px; }
  .org-chart-page .dir-av--mono,
  .org-chart-page .dir-chip,
  .org-chart-page .dir-letter > span {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .org-chart-page .dir-letter { break-after: avoid; page-break-after: avoid; }
}

/* Not every browser honours `@page { size: landscape }` (and the user can
   override it in the print dialog). On a portrait page box, four columns would
   be too narrow to hold an email address, so fall back to two. */
@media print and (max-width: 800px) {
  .org-chart-page .org-columns,
  .org-chart-page .org-group--banner .org-group__body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
 * Section tabs (.ds-tabs) — sub-navigation inside a rail destination.
 * Introduced for the Sales section (Proposals / Contracts / …); the rail
 * marks the section, this marks the page within it. Horizontally
 * scrollable so a growing tab list never wraps or clips on narrow screens.
 * ===================================================================== */
.ds-tabs {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--card-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ds-tabs::-webkit-scrollbar { display: none; }

.ds-tab {
  flex: 0 0 auto;
  padding: 10px 16px 11px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.ds-tab:hover { color: var(--brand-deep); }
.ds-tab.is-active {
  color: var(--brand-deep);
  border-bottom-color: var(--brand-bright);
}
.ds-tab i { margin-right: 7px; opacity: .85; }

/* A tab can carry a count (e.g. proposals awaiting signature). */
.ds-tab .ds-tab-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--card-border);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.ds-tab.is-active .ds-tab-count { background: var(--brand-bright); }

/* Section heading inside a type-ahead dropdown — used when the list is a
   suggestion set rather than search results (e.g. the companies a selected
   customer already belongs to, offered before anything is typed). */
.search-result-head {
  padding: 7px 12px;
  background: var(--card-border);
  color: var(--brand-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}

/* =====================================================================
 * Pending-agreement callout (MyDashboard) + the customer's agreement view.
 * An unsigned agreement is the most actionable thing on the dashboard, so
 * it gets a band that reads before the stat cards.
 * ===================================================================== */
.agreement-callout {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--brand-deep);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 0 0 20px;
}
.agreement-callout__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  color: var(--brand-bright);
  font-size: 19px;
}
.agreement-callout__body { flex: 1 1 300px; color: #fff; }
.agreement-callout__body h3 {
  margin: 0 0 4px;
  font-size: 17px;
  color: #fff;
}
.agreement-callout__body p { margin: 0; color: rgba(255,255,255,0.92); font-size: 14px; }
.agreement-callout__body strong { color: var(--brand-bright); }
.agreement-callout__meta {
  margin-top: 6px !important;
  font-size: 12px !important;
  color: rgba(255,255,255,0.7) !important;
}
.agreement-callout__meta strong { color: #FFD166 !important; }
.agreement-callout__action { flex: 0 0 auto; }

/* Proposal ID, rendered the way the design highlights it. */
.proposal-id {
  display: inline-block;
  background: #FFE94D;
  color: #1a1a1a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .5px;
  padding: 3px 10px;
  border-radius: 3px;
}

/* "$39  Monthly Rate Per Unit" — figure first, label beneath. */
.price-line { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); }
.price-line span {
  display: block;
  color: #0077FF;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}

/* =====================================================================
 * Admin work queue (W6) — "what needs doing" above the totals on the
 * admin dashboard. Renders nothing when the queue is empty.
 * ===================================================================== */
.work-queue {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 28px;
}
.work-queue__item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 240px;
  padding: 14px 18px;
  border: 1px solid var(--card-border);
  border-left: 4px solid var(--brand-deep);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}
.work-queue__item:hover { transform: translateY(-1px); border-left-color: var(--brand-bright); }
.work-queue__item.is-urgent { border-left-color: #C0392B; }
.work-queue__count {
  font-family: 'Sora', -apple-system, sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--brand-deep);
}
.work-queue__item.is-urgent .work-queue__count { color: #C0392B; }
.work-queue__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.3;
}
.work-queue__label i { margin-right: 5px; opacity: .7; }

/* Sortable table header link (.ds-table th > .sort-link). */
.sort-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.sort-link:hover { color: var(--brand-deep); }
.sort-link i { font-size: 11px; opacity: .55; }
.sort-link.is-active i { opacity: 1; color: var(--brand-deep); }

/* =====================================================================
 * Customer agreement / signing page (Phase 3).
 * Two columns: a sticky completion index and the document itself. The
 * index is what turns a ~40-field page into "4 of 6 sections done".
 * ===================================================================== */
.sign-page {
  display: flex;
  gap: 34px;
  align-items: flex-start;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px;
}
.sign-doc { flex: 1 1 auto; min-width: 0; max-width: 720px; }

.sign-index {
  flex: 0 0 224px;
  position: sticky;
  top: 24px;
  align-self: flex-start;
}
.sign-index__head { margin-bottom: 14px; }
.sign-index__pct {
  font-family: 'Sora', sans-serif; font-size: 30px; font-weight: 700;
  color: var(--brand-deep); line-height: 1;
}
.sign-index__label { font-size: 12px; color: var(--text-muted); margin: 2px 0 8px; }
.sign-index__bar { height: 5px; border-radius: 3px; background: var(--card-border); overflow: hidden; }
.sign-index__bar span {
  display: block; height: 100%; background: var(--brand-bright);
  transition: width .3s ease;
}
.sign-index__item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 0; font-size: 13px; color: var(--text-muted); text-decoration: none;
}
.sign-index__item:hover { color: var(--brand-deep); }
.sign-index__item.is-current { color: var(--brand-deep); font-weight: 600; }
.sign-index__tick i { font-size: 13px; color: var(--card-border); }
.sign-index__tick.is-done i { color: var(--brand-bright); }
.sign-index__save { font-size: 11px; margin-top: 12px; min-height: 15px; }
.sign-index__save.is-error { color: #C0392B; font-weight: 600; }

.sign-cover { text-align: center; padding: 10px 0 22px; }
.sign-cover h1 { font-size: 26px; margin: 0 0 6px; }
.sign-cover__sub { font-weight: 600; margin: 0 0 4px; }

.sign-section {
  background: #fff; border: 1px solid var(--card-border); border-radius: 12px;
  padding: 22px 24px; margin-bottom: 18px;
}
.sign-section h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; margin: 0 0 10px;
}
.sign-tick i { font-size: 14px; color: var(--card-border); }
.sign-tick.is-done i { color: var(--brand-bright); }
.sign-section h4 { font-size: 13px; text-decoration: underline; margin: 0 0 12px; }
.sign-legend { font-size: 13px; font-weight: 700; text-decoration: underline; margin: 0 0 8px; }
.sign-cols { display: flex; gap: 18px; flex-wrap: wrap; }
.sign-cols > * { flex: 1 1 220px; min-width: 0; }
.sign-radios { display: flex; gap: 22px; flex-wrap: wrap; }

.sign-terms {
  max-height: 320px; overflow-y: auto;
  border: 1px solid var(--card-border); border-radius: 8px;
  padding: 14px 16px; font-size: 13px; line-height: 1.6;
  background: #FCFCFD;
}
.sign-terms h3 { font-size: 13px; margin: 14px 0 4px; }
.sign-terms h3:first-child { margin-top: 0; }

/* Ordered emergency-contact rows — the number is the call order. */
.sign-contact-row {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px dashed var(--card-border);
}
.sign-contact-row > .field-underline { flex: 1 1 180px; margin-bottom: 0; }
.sign-contact-row__order {
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--brand-deep); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; margin-bottom: 6px;
}

/* Signature capture */
.sign-sigblock {
  border: 1px solid var(--card-border); border-radius: 10px;
  padding: 14px 16px; margin-top: 16px;
}
.sign-sigblock__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: 14px;
}
.sign-pad { position: relative; }
.sign-pad__canvas {
  width: 100%; height: 150px; display: block;
  border: 2px solid var(--input-border); border-radius: 8px;
  background: #FDFDFE; touch-action: none; cursor: crosshair;
}
.sign-pad__canvas:hover { border-color: var(--brand-deep); }
.sign-pad__saved {
  width: 100%; max-height: 150px; object-fit: contain;
  border: 2px solid var(--card-border); border-radius: 8px; background: #fff;
}
/* Baseline + cross, so the box reads as somewhere to sign rather than an
   empty panel. Sits under the canvas and ignores pointer events. */
.sign-pad__hint {
  position: absolute; left: 0; right: 0; bottom: 78px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 22px; pointer-events: none;
}
.sign-pad__hint::before { content: '\2715'; font-size: 15px; color: var(--text-muted); }
.sign-pad__hint::after {
  content: ''; flex: 1; border-bottom: 1.5px solid var(--input-border);
}
.sign-pad__hint span {
  position: absolute; left: 44px; bottom: -20px;
  font-size: 11px; color: var(--text-muted);
}
.sign-pad__actions { display: flex; gap: 8px; margin-top: 8px; }

.sign-provider {
  font-family: 'Brush Script MT', 'Segoe Script', cursive;
  font-size: 26px; color: #12233f; margin: 4px 0 0;
  border-bottom: 1px solid #333; display: inline-block; padding: 0 12px 2px 0;
}

/* Submit bar — sticks to the bottom so the next action is always in reach. */
.sign-submit {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--card-border);
  border-radius: 12px; padding: 14px 18px; margin: 6px 0 26px;
  box-shadow: 0 -3px 14px rgba(0,0,0,0.06);
}
.sign-submit.is-ready { border-color: var(--brand-bright); }

@media (max-width: 860px) {
  .sign-page { flex-direction: column; gap: 16px; }
  .sign-index { position: static; flex: 1 1 auto; width: 100%; }
  .sign-index nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
}

/* Signature receipt — the evidence shown back to the customer after signing. */
.sign-receipt {
  border: 1px solid var(--card-border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 22px; background: #FCFDFC;
}
.sign-receipt summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--brand-deep);
}
.sign-submit__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sign-submit .ds-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; }
/* Not-ready Sign button: looks inactive but still takes the click, which is
   what points the customer at the missing fields. */
.sign-submit .ds-btn.is-not-ready { opacity: .6; filter: none; }
.sign-submit.is-attention { border-color: #C0392B; }
.sign-submit.is-attention #submitBlockers { color: #C0392B; }

/* Missing fields, marked after a premature Sign click (see showMissing in
   _signing_js.erb). Red label and underline on text fields and selects; red
   outline on a checkbox/radio row; red border on an unsigned pad. */
.field-underline.is-missing > label { color: #C0392B; }
/* A text field is as visible as a checkbox row: one forgotten field (a job
   title) was easy to miss with only a red label and underline. */
.field-underline.is-missing { outline: 2px solid #C0392B; outline-offset: 4px; border-radius: 6px; background: #FDF3F2; }
.field-underline.is-missing .input-underline,
.field-underline.is-missing .select-underline { border-bottom: 2px solid #C0392B; }
.sr-check.is-missing {
  outline: 2px solid #C0392B; outline-offset: -2px; border-radius: 6px;
  background: #FDF3F2;
}
.sign-pad.is-missing .sign-pad__canvas { border-color: #C0392B; background: #FFF8F7; }

/* Signature save status — replaces the old manual "Save signature" button.
   The pad now saves on its own, so this reports state instead of asking for
   an action the customer had no way of knowing was required. */
.sign-pad__status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-muted);
}
.sign-pad__status.is-saved   { color: #1B7F4B; }
.sign-pad__status.is-saving,
.sign-pad__status.is-pending { color: var(--text-muted); }
.sign-pad__status.is-error   { color: #C0392B; }
.sign-pad__status.is-empty   { color: var(--text-muted); }
.sign-pad__status .fa-spinner { animation: sign-spin 1s linear infinite; }
@keyframes sign-spin { to { transform: rotate(360deg); } }

/* Saved signatures get a green edge, so "this is committed" is visible on the
   pad itself rather than only in a status line. */
.sign-pad.is-saved .sign-pad__canvas,
.sign-pad.is-saved .sign-pad__saved { border-color: #1B7F4B; }

/* Bulk hardware assignment grid (W4). Dense on purpose — it exists to replace
   opening a 23-field modal per unit, so the columns are only what varies. */
.bulk-assign td { padding: 6px 8px; vertical-align: middle; }
.bulk-assign input.input-underline,
.bulk-assign select.select-underline { font-size: 13px; padding: 4px 0; margin: 0; }
.bulk-assign tbody tr:hover { background: #FAFBFC; }
.bulk-assign input:focus { background: #F6FBF8; }

/* Sales stat cards became links (each opens the filter matching its count).
   Anchors bring their own colour and underline, so the card look has to be
   restated — otherwise the numbers turn blue and underlined. */
a.hb-card, a.hb-pct { display: block; text-decoration: none; transition: transform .12s, box-shadow .12s; }
a.hb-card:hover, a.hb-pct:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
a.hb-card, a.hb-card:hover, a.hb-card:visited { color: #fff; }
a.hb-pct, a.hb-pct:hover, a.hb-pct:visited { color: var(--text-dark); }
a.hb-card .lbl, a.hb-card .sub, a.hb-pct .lbl { text-decoration: none; }

/* =====================================================================
 * Admin mega menu (design/Mega Menu.png, Dashboard-Showing-MegaMenu-And-
 * AdminIconPlacing.png). The rail's dark zone holds ONE control — ADMIN —
 * which opens a white panel over the page: four titled columns of links.
 * Markup: partials/app_sidebar.erb (.rail-admin-btn) + partials/admin_menu.erb.
 * ===================================================================== */

/* The ADMIN control: yellow icon over a yellow label, centred in the dark
 * zone; green when open or when the current page is an admin page. */
.app-sidebar .rail-admin-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 16px 4px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--rail-hover);
  font-family: 'DM Sans', sans-serif;
}
.app-sidebar .rail-admin-btn__icon { font-size: 30px; line-height: 1; }
.app-sidebar .rail-admin-btn__label { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.app-sidebar .rail-admin-btn:hover { color: #FFD84D; background: rgba(255,255,255,0.06); }
.app-sidebar .rail-admin-btn.is-active,
.app-sidebar .rail-admin-btn.is-open { color: var(--brand-bright); }
.app-sidebar .rail-admin-btn:focus-visible { outline: 2px solid var(--focus-mint); outline-offset: -2px; }

/* Backdrop: catches the click-away; barely tints the page so the panel reads
 * as a menu, not a modal. */
.mega-scrim {
  position: fixed;
  inset: 0;
  z-index: 1290;
  background: rgba(20, 30, 35, 0.10);
}
.mega-scrim[hidden] { display: none; }

/* The panel: anchored beside the rail, under the header line. */
.mega-menu {
  position: fixed;
  z-index: 1300;
  top: 14px;
  left: calc(var(--rail-w) + 14px);
  width: min(1180px, calc(100vw - var(--rail-w) - 28px));
  max-height: calc(100vh - 28px);
  overflow: auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(14, 67, 72, 0.18), 0 2px 8px rgba(0,0,0,0.08);
  padding: 28px 30px 30px;
  font-family: 'DM Sans', sans-serif;
}
.mega-menu[hidden] { display: none; }
body.rail-open .mega-menu { left: calc(var(--rail-w-expanded) + 14px); width: min(1180px, calc(100vw - var(--rail-w-expanded) - 28px)); }

.mega-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;
}
.mega-close:hover { background: var(--input-bg); color: var(--text-dark); }

/* Columns, divided by hairlines */
.mega-grid { display: grid; gap: 0; }
.mega-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega-grid--1 { grid-template-columns: 1fr; }
.mega-col { padding: 0 26px; border-left: 1px solid var(--card-border); min-width: 0; }
.mega-col:first-child { padding-left: 0; border-left: 0; }
.mega-col:last-child { padding-right: 0; }

.mega-col__head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.mega-col__tile {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.mega-col__head h3 {
  margin: 0;
  border: 0;
  font-family: 'Sora', 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-dark);
}
.mega-col__blurb {
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--card-border);
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.mega-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.mega-link {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 700;
  font-size: 15.5px;
  border-radius: 10px;
  padding: 2px 6px 2px 2px;
}
.mega-link:hover, .mega-link:focus-visible { background: var(--panel-bg); text-decoration: none; outline: none; }
.mega-link:focus-visible { box-shadow: 0 0 0 2px var(--focus-mint); }
.mega-link.is-active .mega-link__label { text-decoration: underline; text-underline-offset: 3px; }
.mega-link__tile {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
}
.mega-link__label { flex: 1; min-width: 0; }
.mega-link__chev { font-size: 14px; }

/* Tones — header tile, link tiles, chevrons */
.mega-col--green  .mega-col__tile { background: var(--brand-deep); color: var(--brand-bright); }
.mega-col--green  .mega-link__tile { background: var(--brand-bright); color: var(--brand-deep); }
.mega-col--green  .mega-link__chev { color: var(--brand-deep); }

.mega-col--pink   .mega-col__tile { background: #3B0B3B; color: #FF80F0; }
.mega-col--pink   .mega-link__tile { background: #FF8CF2; color: #3B0B3B; }
.mega-col--pink   .mega-link__chev { color: #3B0B3B; }

.mega-col--blue   .mega-col__tile { background: var(--btn-blue); color: #FFFFFF; }
.mega-col--blue   .mega-link__tile { background: #CFE5FF; color: var(--btn-blue); }
.mega-col--blue   .mega-link__chev { color: var(--btn-blue); }

.mega-col--yellow .mega-col__tile { background: var(--rail-hover); color: #FFFFFF; }
.mega-col--yellow .mega-link__tile { background: #FFF1B3; color: #E0B000; }
.mega-col--yellow .mega-link__chev { color: #E0B000; }

/* Narrower screens: two columns, then one; the panel spans the viewport
 * once the rail is a drawer. */
@media (max-width: 1100px) {
  .mega-grid--4, .mega-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mega-col { border-left: 0; padding: 0; }
  .mega-col:nth-child(n+3) { margin-top: 26px; }
}
@media (max-width: 640px) {
  .mega-menu, body.rail-open .mega-menu {
    top: 12px; left: 12px; right: 12px; width: auto;
    max-height: calc(100vh - 24px);
    padding: 22px 18px 22px;
  }
  .mega-grid--4, .mega-grid--3, .mega-grid--2 { grid-template-columns: 1fr; }
  .mega-col:nth-child(n+2) { margin-top: 22px; }
}

/* =====================================================================
 * Product catalog (Admin → Sales → Products). Header with the create
 * action, then products grouped by kind with a kind-coloured accent, so a
 * card reads as "a product" and creating one is clearly a separate act.
 * ===================================================================== */
.catalog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.catalog-stripe { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); }
.catalog-stripe i { margin-right: 4px; }
.catalog-stripe.is-on { color: #1B7F4B; }

.catalog-group { margin-top: 26px; }
.catalog-group__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.catalog-group__icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 18px;
}
.catalog-group__head h3 { margin: 0; border: 0; font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: 8px; }
.catalog-group__head p { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.catalog-group__count { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; color: var(--text-muted); background: var(--input-bg); border-radius: 999px; padding: 2px 8px; }
.catalog-group--cellular_unit   .catalog-group__icon { background: #3B0B3B; color: #FF80F0; }
.catalog-group--monitoring_line .catalog-group__icon { background: var(--brand-deep); color: var(--brand-bright); }

.catalog-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-left-width: 5px;
  border-radius: 12px;
  padding: 18px 22px 16px;
  margin-bottom: 14px;
}
.catalog-group--cellular_unit   .catalog-card { border-left-color: #FF8CF2; }
.catalog-group--monitoring_line .catalog-card { border-left-color: var(--brand-bright); }
.catalog-card.is-inactive { background: var(--panel-bg); border-left-color: var(--input-border); }
.catalog-card.is-inactive h4 { color: var(--text-muted); }

.catalog-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.catalog-card__title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.catalog-card__title h4 { margin: 0; font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: var(--text-dark); }
.catalog-card__stripe { display: flex; align-items: center; gap: 8px; }
.catalog-card__ext { color: var(--link-blue); font-size: 13px; }

.catalog-card__fields { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 18px; }
.catalog-card__fields .field-underline { margin: 0; }
.catalog-card__foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--card-border); }
.catalog-card__stock { font-size: 11px; }
/* F-MGR-26: the fields a sales manager sees but ops / billing set. */
.catalog-card [disabled] { opacity: .55; cursor: not-allowed; }
.catalog-card__actions { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 900px) { .catalog-card__fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .catalog-card__fields { grid-template-columns: 1fr; } .catalog-card__actions { margin-left: 0; width: 100%; } }

/* Secondary action inside the dark callout (e.g. "View agreement" beside
 * "Pay now"): the default outline button is dark-on-dark there. */
.agreement-callout .ds-btn--outline {
  background: transparent;
  border-color: rgba(255,255,255,0.55);
  color: #fff;
}
.agreement-callout .ds-btn--outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
/* Primary action inside the dark callout ("Pay now", "Review & Sign"): the
 * default primary is deep-teal-on-deep-teal there, so flip it to the bright
 * green fill the callout's icon tile already uses. */
.agreement-callout .ds-btn--primary { background: var(--brand-bright); color: var(--brand-deep); }
.agreement-callout .ds-btn--primary:hover { filter: brightness(1.05); }

/* =====================================================================
 * Reseller program cards (Admin → Sales → Programs). Stat strip in the
 * header, then settings in titled groups on a fixed four-column grid so
 * fields line up whatever their count.
 * ===================================================================== */
.prog-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 20px 24px 16px;
  margin-top: 18px;
}
.prog-card.is-inactive { background: var(--panel-bg); }
.prog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--card-border); }
.prog-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.prog-title h3 { margin: 0; border: 0; font-family: 'Sora', sans-serif; font-size: 17px; font-weight: 700; color: var(--text-dark); }
.prog-meta { flex-basis: 100%; font-size: 12px; color: var(--text-muted); }
.prog-meta a { color: var(--link-blue); text-decoration: none; }
.prog-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.prog-stat { min-width: 76px; padding: 6px 10px; border-radius: 10px; background: var(--input-bg); text-align: center; }
.prog-stat__n { display: block; font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 700; color: var(--text-dark); line-height: 1.1; }
.prog-stat__l { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

.prog-group { padding: 16px 0 6px; border-bottom: 1px solid var(--card-border); }
.prog-group:last-of-type { border-bottom: 0; }
.prog-group__title { margin: 0 0 10px; border: 0; font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 7px; }
.prog-group__title i { color: var(--brand-deep); }

.prog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 20px; }
.prog-grid .field-underline { margin: 0 0 8px; min-width: 0; }
.prog-grid .field-underline label .muted { font-weight: 400; }
.prog-grid--modal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prog-span2 { grid-column: span 2; }
.field-underline.is-dim { opacity: .45; }

.prog-toggle { margin: 4px 0 6px; }
.prog-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.prog-options .sr-check { margin: 0; align-items: flex-start; }
.prog-options .sr-check span { display: block; line-height: 1.3; }
.prog-options .sr-check small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 400; }

.prog-stripe { display: flex; flex-direction: column; gap: 6px; }
.prog-stripe > label { font-size: 12px; font-weight: 700; color: var(--text-dark); }
.prog-stripe .ds-chip { align-self: flex-start; }
.prog-stripe .ds-btn { align-self: flex-start; }

.prog-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--card-border); margin-top: 6px; }

@media (max-width: 1000px) { .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .prog-grid--modal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .prog-grid, .prog-grid--modal { grid-template-columns: 1fr; } .prog-span2 { grid-column: auto; } .prog-options { grid-template-columns: 1fr; } }
/* Program-account badge (builder / homeowner) beside a company name. */
.company-role-badge { margin-left: 6px; font-size: 10.5px; padding: 2px 8px; vertical-align: middle; }

/* Stripe-billed marker beside a company name (counterpart of .qb-badge). */
.stripe-badge {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; margin-right: 8px; vertical-align: middle;
  border-radius: 4px; background: #635BFF; color: #fff; font-size: 12px; text-decoration: none;
}
.stripe-badge:hover { box-shadow: 0 0 0 3px rgba(99,91,255,0.28); color: #fff; }

/* Bulk Add row tools: sticky so a long batch never scrolls them away. */
.bulk-tools {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; margin: 0 0 8px;
  background: var(--page-bg); border: 1px solid var(--card-border); border-radius: 10px;
}
.bulk-tools--bottom { position: static; margin: 10px 0 0; }
/* Order timeline on the signed agreement page ("what happens next"). */
.order-timeline { background: var(--surface-card, #fff); border: 1px solid var(--card-border); border-radius: 12px; padding: 16px 18px; margin: 0 0 14px; }
.ot-list { list-style: none; margin: 0; padding: 0; position: relative; }
.ot-step { display: grid; grid-template-columns: 26px 1fr; gap: 12px; position: relative; padding: 0 0 16px; }
.ot-step:last-child { padding-bottom: 0; }
.ot-step::before { content: ''; position: absolute; left: 12px; top: 24px; bottom: -2px; width: 2px; background: #D9E2DE; }
.ot-step:last-child::before { display: none; }
.ot-step--done::before { background: var(--brand-deep); }
.ot-dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; border: 2px solid #D9E2DE; background: #fff; color: #fff; z-index: 1; }
.ot-step--done .ot-dot { background: var(--brand-deep); border-color: var(--brand-deep); }
.ot-step--current .ot-dot { border-color: #B7791F; color: #B7791F; }
.ot-step--todo .ot-title { color: var(--text-muted); }
.ot-title { font-weight: 600; font-size: 14px; line-height: 26px; }
.ot-date { font-weight: 400; color: var(--text-muted); font-size: 12px; margin-left: 8px; }
.ot-detail { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
/* "How is this calculated?" on the agreement page: underlined like a link,
   with a caret that turns when the explanation is open. */
.calc-toggle { cursor: pointer; color: var(--brand-deep); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.calc-toggle::-webkit-details-marker { display: none; }
.calc-toggle::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
details[open] > .calc-toggle::after { transform: rotate(-135deg) translateY(-2px); }
.calc-toggle:hover { text-decoration: none; }
/* Row actions and "Set all to Active" on the bulk grids read as links, not
   buttons — the row is the unit of work, these are small nudges on it. */
.bulk-tools .linklike, .bulk-assign .linklike { background: none; border: 0; padding: 0; margin: 0; color: var(--link-blue); cursor: pointer; text-decoration: underline; font: inherit; }
.bulk-tools .linklike:hover, .bulk-assign .linklike:hover { text-decoration: none; }
.bulk-tools__group { display: inline-flex; align-items: center; gap: 6px; }
.bulk-tools__scan { margin: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--card-border); background: #fff; }
.bulk-tools.is-scanning .bulk-tools__scan { border-color: var(--brand-deep); background: #ECF7F4; font-weight: 700; }

/* The HTML `hidden` attribute must beat any display rule — several panels
 * (banners, modals' inner blocks) are toggled with it. */
[hidden] { display: none !important; }

/* ---------- Global header search (staff) ----------
 * Stripe-style: a compact box in the header, a grouped-results popover
 * (.gs-pop) beneath it, and a full results page (.gs-page). Group tones reuse
 * the mega-menu column colours so a category reads the same in both places. */
.header-search {
  position: relative;
  flex: 0 1 400px;
  min-width: 180px;
  margin: 0;
}
.header-search__icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--text-muted); pointer-events: none;
}
.header-search.is-loading .header-search__icon { animation: gs-pulse 0.8s ease-in-out infinite; }
@keyframes gs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.header-search__input {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  color: var(--text-dark);
  background: #FFFFFF;
  border: 1px solid var(--input-border);
  border-radius: 100px;
  padding: 9px 44px 9px 34px;
  height: 38px;            /* same first-row height as the heading and avatar */
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none; appearance: none;
}
.header-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.header-search__input::placeholder { color: var(--text-muted); }
.header-search__input:focus { border-color: var(--brand-deep); box-shadow: 0 0 0 3px rgba(19,239,118,0.25); }
.header-search__kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-family: 'DM Sans', sans-serif; font-size: 11px; line-height: 1;
  padding: 3px 6px; border-radius: 5px;
  border: 1px solid var(--input-border); color: var(--text-muted); background: var(--input-bg);
  pointer-events: none;
}
.header-search__input:focus ~ .header-search__kbd { display: none; }
.header-search__toggle { display: none; }

.gs-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  z-index: 120;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20,24,31,0.16);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  padding: 6px 0;
  font-family: 'DM Sans', sans-serif;
}
.gs-none { padding: 16px 16px; font-size: 13px; color: var(--text-muted); }
.gs-group + .gs-group { border-top: 1px solid var(--card-border); margin-top: 4px; padding-top: 4px; }
.gs-group__title {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px 4px;
  font-family: 'Sora', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.gs-group__count {
  margin-left: auto; font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: 11px; letter-spacing: 0; text-transform: none;
  padding: 1px 7px; border-radius: 100px; background: var(--input-bg); color: var(--text-muted);
}
.gs-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.gs-dot--green  { background: var(--brand-bright); }
.gs-dot--pink   { background: #FF8CF2; }
.gs-dot--blue   { background: var(--btn-blue); }
.gs-dot--yellow { background: var(--rail-hover); }

.gs-row {
  display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
  align-items: baseline; column-gap: 10px;
  padding: 7px 14px;
  text-decoration: none; color: var(--text-dark); font-size: 13.5px;
  cursor: pointer;
}
.gs-row:hover, .gs-row.is-active { background: #ECF7F4; }
.gs-row.is-active { box-shadow: inset 3px 0 0 var(--brand-bright); }
.gs-row__title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row__sub { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-row__meta {
  font-size: 11px; font-weight: 600; text-transform: capitalize; color: var(--brand-deep);
  padding: 2px 8px; border-radius: 100px; background: #E6F8EF; white-space: nowrap;
}
.gs-row.gs-seeall, .gs-row.gs-viewall {
  display: flex; align-items: center; gap: 6px;
  color: var(--link-blue); font-weight: 600; font-size: 12.5px;
}
.gs-row.gs-viewall { border-top: 1px solid var(--card-border); margin-top: 6px; padding-top: 10px; padding-bottom: 8px; }

/* Results page */
.gs-page { display: flex; flex-direction: column; gap: 18px; }
.gs-page__summary { margin: 0; font-size: 14px; color: var(--text-muted); }
.gs-page__summary strong { color: var(--text-dark); }
.gs-page__jump { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 600;
  text-decoration: none; color: var(--text-dark); background: var(--card-bg); border: 1px solid var(--card-border);
}
.gs-chip span { color: var(--text-muted); font-weight: 500; }
.gs-chip:hover { border-color: var(--brand-deep); }
.gs-chip--green i { color: var(--brand-deep); }
.gs-chip--pink  i { color: #C020B0; }
.gs-chip--blue  i { color: var(--btn-blue); }
.gs-card { padding: 16px 18px 12px; }
.gs-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.gs-card__head h3 { margin: 0; flex: 1; }
.gs-card__count { font-family: 'DM Sans', sans-serif; font-weight: 500; color: var(--text-muted); font-size: 13px; margin-left: 4px; }
.gs-tile {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.gs-tile--green { background: var(--brand-deep); color: var(--brand-bright); }
.gs-tile--pink  { background: #3B0B3B; color: #FF80F0; }
.gs-tile--blue  { background: var(--btn-blue); color: #FFFFFF; }
.gs-table td { padding: 9px 10px; border-bottom: 1px solid var(--card-border); vertical-align: middle; }
.gs-table tr:last-child td { border-bottom: 0; }
.gs-table__title { font-weight: 600; white-space: nowrap; }
.gs-table__title a { color: var(--text-dark); text-decoration: none; }
.gs-table__title a:hover { color: var(--brand-deep); text-decoration: underline; }
.gs-table__sub { color: var(--text-muted); font-size: 13px; }
.gs-table__meta { white-space: nowrap; width: 1%; }
.gs-meta {
  font-size: 11px; font-weight: 600; text-transform: capitalize; color: var(--brand-deep);
  padding: 2px 8px; border-radius: 100px; background: #E6F8EF;
}
.gs-table__go { width: 1%; text-align: right; }
.gs-table__go a { color: var(--text-muted); }
.gs-table__go a:hover { color: var(--brand-deep); }
.gs-card__more { margin: 10px 0 0; font-size: 12.5px; color: var(--text-muted); }
.gs-card__more a { color: var(--link-blue); }
.gs-empty h3 { margin-bottom: 6px; }
.gs-empty p { margin: 0; }

/* Tablets: the box gives up width before the heading/actions do. */
@media (max-width: 1100px) {
  .header-search { flex-basis: 260px; min-width: 140px; }
  .header-search__kbd { display: none; }
}
/* Phones: collapse to an icon button; tapping expands the input to a full
 * row under the heading. The popover then spans the header's width. */
@media (max-width: 640px) {
  .header-search { flex: 0 0 auto; min-width: 0; order: 0; }
  .header-search__icon, .header-search__input { display: none; }
  .header-search__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; border-radius: 10px; background: none;
    color: var(--text-dark); font-size: 18px; cursor: pointer;
  }
  .header-search.is-expanded { flex: 1 0 100%; order: 10; }
  .header-search.is-expanded .header-search__icon,
  .header-search.is-expanded .header-search__input { display: block; }
  .header-search.is-expanded .header-search__toggle { display: none; }
  .header-search.is-expanded .header-search__icon { display: inline; }
  .gs-pop { max-height: 60vh; }
  .gs-row { grid-template-columns: minmax(0, 1fr) auto; }
  .gs-row__meta { order: 2; justify-self: end; }
  .gs-row__sub { grid-column: 1 / -1; order: 3; }
}

/* Row actions menu (3-dot): a table row's actions in one menu. The panel is
   position:fixed and placed by script, so a scrolling .ds-table-wrap never
   clips it. Existing .ds-btn buttons, links and forms inside become items. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.row-actions .ds-chip { white-space: nowrap; }
.ds-rowmenu { position: relative; display: inline-block; }
.ds-rowmenu__toggle {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--input-border);
  background: var(--card-bg); color: var(--text-dark); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.ds-rowmenu__toggle:hover, .ds-rowmenu__toggle[aria-expanded="true"] { background: var(--input-bg); }
.ds-rowmenu__toggle:focus-visible { outline: 2px solid var(--focus-mint); outline-offset: 2px; }
.ds-rowmenu__panel {
  position: fixed; z-index: 1000; min-width: 210px; max-width: 280px; padding: 6px 0;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}
.ds-rowmenu__panel[hidden] { display: none; }
.ds-rowmenu__panel form { display: block !important; margin: 0 !important; }
.ds-rowmenu__panel .ds-btn {
  display: flex; width: 100%; justify-content: flex-start; text-align: left;
  margin: 0; padding: 9px 16px; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--text-dark); font-size: 13px; font-weight: 500; white-space: nowrap;
}
.ds-rowmenu__panel .ds-btn:hover, .ds-rowmenu__panel .ds-btn:focus-visible {
  background: var(--input-bg); color: var(--text-dark); outline: none;
}
/* Destructive items keep their red text (inline style) on hover. */
.ds-rowmenu__panel .ds-btn[style*="C0392B"]:hover, .ds-rowmenu__panel .ds-btn[style*="C0392B"]:focus-visible { color: #C0392B; }