/* ============================================================================
   CS Bikes Ops — framework.css (v3)
   Dark by default; 5.49.0 adds a light theme (:root[data-theme="light"]
   below, switched by the sun/moon button in the top bar). No UIkit
   underneath. Built for this app specifically — every class here exists
   because this app uses it, nothing carried over "just in case."
   ============================================================================ */

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { text-decoration: none; }
table { border-collapse: collapse; width: 100%; }
fieldset { border: none; }

/* ---------------------------------------------------------------------------
   Design tokens — one dark palette
   --------------------------------------------------------------------------- */
:root {
  --bg: #131417;
  --bg-raised: #1C1E22;
  --bg-sunken: #212328;
  --bg-hover: rgba(255, 255, 255, 0.05);
  --ink: #F2F2F0;
  --ink-muted: #9C9CA1;
  --ink-faint: #68686D;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.15);

  --lime: #D9FF4B;
  --lime-bright: #E4FF7A;
  --lime-ink: #14160A;
  --lime-wash: rgba(217, 255, 75, 0.16);

  --accent-blue: #6C93F5;
  --accent-purple: #AD82F2;
  --accent-pink: #F07AC0;
  --accent-orange: #FFA35F;
  --accent-teal: #4FD6C4;

  --danger: #FF6E5A;
  --danger-wash: #3D211C;
  --success: #57D687;
  --success-wash: #16301F;
  --warning-wash: #3D2A16;
  --warning: #F59E0B;   /* 5.3.10: used across Ops, never defined - warnings showed no colour */

  --sidebar-bg: #0A0A0C;
  --sidebar-ink: #EDEDEA;
  --sidebar-ink-muted: #86878C;

  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 8px 20px rgba(0, 0, 0, 0.45), 0 24px 60px rgba(0, 0, 0, 0.4);

  --sidebar-w: 248px;
  --right-panel-w: 340px;
  --topbar-h: 56px;

  /* 5.49.0: what a colour is for, so the light theme can change it on its own. In the dark theme each is the
     colour the pages always had - lime text and lime lines are just lime, a white overlay is white. */
  --fg-rgb: 255, 255, 255;          /* the overlay colour: rgba(var(--fg-rgb), .06) is a hover, a line, a lighter box */
  --lime-text: var(--lime);         /* lime as text, on the page's own background */
  --lime-line: var(--lime);         /* lime as a line: borders, outlines, chart lines */
  --warn-text: #fbbf24;             /* amber words: waiting, due, careful */
  --bad-text: #f87171;              /* red words: late, missing, refused */
  --good-text: #4ade80;             /* green words: done, paid, fine */
  --info-text: #93c5fd;             /* blue words: a note, a hint */

  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
   Light theme (5.49.0) - Nick, 20.10.2026: "Can you create a light theme. So we need a toggle to leave dark mode
   and enter light mode. Please take all graphs, lines into account."
   The same tokens, light. includes/page_header.php puts data-theme on <html> before the page paints (from the
   ops_theme cookie), so nothing flashes dark first. Lime stays the fill (buttons, the page you are on) with dark
   words on it; as words or a thin line on white it would not be seen, so those take --lime-text / --lime-line.
   Charts read the same tokens (Chart.js through csTheme in page_header.php, the drawn ones when they draw).
   --------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --bg: #F3F3EF;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F0F0EB;
  --bg-hover: rgba(20, 22, 10, 0.045);
  --ink: #17181B;
  --ink-muted: #56575D;
  --ink-faint: #74757B;
  --border: rgba(20, 22, 10, 0.10);
  --border-strong: rgba(20, 22, 10, 0.20);

  --lime: #D2F845;
  --lime-bright: #DDFB6E;
  --lime-ink: #14160A;
  --lime-wash: rgba(150, 190, 0, 0.16);
  --lime-text: #4D6800;
  --lime-line: #8DB40A;

  --accent-blue: #2F5FD3;
  --accent-purple: #7646D0;
  --accent-pink: #C4337F;
  --accent-orange: #B65A0C;
  --accent-teal: #0F8577;

  --danger: #D2361F;
  --danger-wash: #FCEAE6;
  --success: #188244;
  --success-wash: #E3F4E9;
  --warning-wash: #FCF1DC;
  --warning: #B36F00;

  --warn-text: #9A5B00;
  --bad-text: #C0301B;
  --good-text: #17803D;
  --info-text: #2453C2;
  --shade-text: 42%;                /* a colour of its own as words: color-mix(in srgb, <it>, #000 var(--shade-text, 0%)) */

  --sidebar-bg: #FFFFFF;
  --sidebar-ink: #18191C;
  --sidebar-ink-muted: #5A5B61;

  --shadow-card: 0 1px 2px rgba(20, 22, 10, 0.05), 0 6px 18px rgba(20, 22, 10, 0.05);
  --shadow-pop: 0 8px 20px rgba(20, 22, 10, 0.12), 0 24px 60px rgba(20, 22, 10, 0.12);

  --fg-rgb: 20, 22, 10;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
h1 { font-size: 1.7rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; }

a { color: var(--accent-blue); }
a:hover { filter: brightness(1.15); }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--lime-line, var(--lime));
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

table { font-variant-numeric: tabular-nums; }
.stat { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -0.02em; }

::selection { background: var(--lime-wash); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------------------- */
.container { width: 100%; padding: 0 24px; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 780px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
.flex { display: flex; align-items: center; gap: 10px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-sm { gap: 6px; }
.gap-lg { gap: 24px; }

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-muted { color: var(--ink-faint) !important; }
.text-danger { color: var(--danger) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--accent-orange) !important; }
.text-bold { font-weight: 600; }
.text-italic { font-style: italic; }
.float-right { float: right; }
.float-left { float: left; }
.bg-muted { background: var(--bg-sunken); }
.p-0 { padding: 0 !important; }

/* ---------------------------------------------------------------------------
   Login page
   --------------------------------------------------------------------------- */
.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 0%, #1c1e22 0%, var(--bg) 60%);
}
.login-card {
  width: 100%;
  max-width: 340px;
  padding: 36px 32px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo img { max-height: 34px; margin: 0 auto; }
.login-footer {
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.8rem;
}
.placeholder-box {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  color: var(--ink-muted);
}

/* ---------------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------------- */
.tabs {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.tab-item a {
  display: inline-block;
  padding: 10px 2px 12px;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab-item.is-active a { color: var(--ink); border-bottom-color: var(--lime-line, var(--lime)); }
.tab-panels { list-style: none; margin: 0; padding: 0; }
.tab-panels > li { display: none; }
.tab-panels > li.is-active-panel { display: block; }

/* ---------------------------------------------------------------------------
   Accordion — independent expand/collapse (unlike tabs, more than one can
   be open at once)
   --------------------------------------------------------------------------- */
.accordion { list-style: none; margin: 0; padding: 0; }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-title {
  display: block;
  padding: 14px 4px;
  color: var(--ink);
}
.accordion-title:hover { color: var(--lime-text, var(--lime)); filter: none; }
.accordion-content { display: none; padding: 0 4px 18px; }
.accordion-item.is-open .accordion-content { display: block; }
.text-small { font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   App shell — sidebar + topbar + content
   ids kept as #content/#left-col/#top-head — every page's own markup still
   writes these directly (not from a shared include), so this is the one
   compatibility constraint carried forward on purpose.
   --------------------------------------------------------------------------- */
#top-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  z-index: 9;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 18px;
}
#top-head .topbar-mobile-logo { display: none; margin-right: auto; }
#top-head .topbar-actions { display: flex; align-items: center; gap: 4px; }

#left-col {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--sidebar-w);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--sidebar-bg);
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.sidebar-logo { padding: 22px 22px 16px; flex-shrink: 0; }
.sidebar-logo img { display: block; width: 100%; height: auto; }

.sidebar-nav { flex: 1; padding: 4px 12px 12px; }
.sidebar-nav-header {
  padding: 18px 16px 6px;
  color: var(--sidebar-ink-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0;
  padding: 10px 16px;
  border-radius: var(--radius-full);
  color: var(--sidebar-ink-muted);
  font-weight: 500;
  font-size: 0.88rem;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.sidebar-nav-item svg { width: 17px; height: 17px; flex-shrink: 0; }
.sidebar-nav-item:hover { color: var(--sidebar-ink); background: rgba(var(--fg-rgb, 255, 255, 255), 0.06); }
.sidebar-nav-item.is-active { background: var(--lime); color: var(--lime-ink); }
/* The exact page you're on, whether it's a top-level item or a
   sub-item inside an expanded section - always lime, reserved
   specifically for "you are exactly here". Section color (below) marks
   "you are somewhere in this section" on the parent button instead. */
.sidebar-nav-subitem.is-active { background: var(--lime); color: var(--lime-ink); }

/* One distinct accent color per top-level section, applied to that
   section's own parent button only while it's open - lets you tell at
   a glance which area you're in without reading every label. Not
   applied to the default/collapsed state (tried that, reverted per
   feedback - it read as too busy with every section colored all the
   time). Deliberately a background tint, not full-strength like the
   lime "exact page" highlight, so the two states stay visually
   distinct from each other.

   Solid/opaque colors here, not rgba - the button sits on top of the
   submenu box below it (see the box rules further down) to create the
   seamless-pill effect, and if the button's own background were
   semi-transparent, the box's color underneath would show through and
   composite with it, producing a visibly darker/denser band right at
   the seam instead of one continuous color. These are the same rgba
   values pre-computed as flat opaque hex against the sidebar's actual
   background (#0A0A0C), so the visual result looks identical to the
   transparent version everywhere except the overlap zone, where it
   now actually covers what's behind it instead of blending with it. */
.sidebar-section-customers.is-open { background: #192430; color: #5B9BD5; }
.sidebar-section-marketing.is-open { background: #331F13; color: #ED7D31; }
.sidebar-section-sales.is-open { background: #2F1723; color: #D5548C; }
.sidebar-section-operations.is-open { background: #162C2A; color: #4EC9B0; }
.sidebar-section-tools.is-open { background: #312918; color: #E0B84E; }
.sidebar-section-services.is-open { background: #1C2C32; color: #6CC6E0; }
.sidebar-section-service.is-open { background: #241B2F; color: #9B6BCE; }
.sidebar-section-inventory.is-open { background: #1E2030; color: #7B85D5; }
/* 5.3.10: Company and Paint & Design had no colour of their own when open */
.sidebar-section-company.is-open { background: #172A1F; color: #7ED39A; }
.sidebar-section-design.is-open { background: #251F33; color: #B89CF0; }

/* The same section colors again, at much lower opacity, as a box
   behind the open section's own sub-items - so the whole expanded
   group reads as "this open section", not just its header button. The
   .sidebar-submenu div for each section carries the same section
   class as its parent button for this to target.

   The box's top corners are square (not rounded like its bottom ones)
   so it reads as falling out of the button above rather than as its
   own separate shape - and it's pulled up behind the button (negative
   margin, compensating padding to keep the actual links in the same
   visual position) with the button given a higher z-index, so the
   button's own rounded bottom corners sit on top of the box's square
   top and visually cover the seam - one continuous pill in two colors,
   not two stacked shapes with a visible line between them. The -14px
   overlap is an estimate based on the button's approximate height and
   radius, not a measured/rendered value - may need a small nudge once
   it's actually visible. */
.sidebar-submenu.sidebar-section-customers.is-open { background: rgba(91, 155, 213, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-marketing.is-open { background: rgba(237, 125, 49, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-sales.is-open { background: rgba(213, 84, 140, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-operations.is-open { background: rgba(78, 201, 176, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-tools.is-open { background: rgba(224, 184, 78, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-services.is-open { background: rgba(108, 198, 224, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-service.is-open { background: rgba(155, 107, 206, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-inventory.is-open { background: rgba(123, 133, 213, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-company.is-open { background: rgba(126, 211, 154, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }
.sidebar-submenu.sidebar-section-design.is-open { background: rgba(184, 156, 240, 0.07); border-radius: 0 0 var(--radius-md) var(--radius-md); position: relative; z-index: 1; margin-top: -14px; padding-top: 14px; }

/* An icon-bearing sub-item (the external links - Invoice Ninja,
   Marketing System, etc.) needs to keep its icon and text on one line -
   .sidebar-nav-subitem is display:block by default, which lets a short
   label wrap onto a second line under the icon in a narrow sidebar
   rather than sitting inline beside it. */
/* Combined selector, not just .sidebar-nav-subitem-external alone -
   .sidebar-nav-subitem and .sidebar-nav-subitem-external have equal
   specificity (one class each), so whichever is declared LATER in the
   file wins on a tie, regardless of which "sounds" more specific. That
   silently broke this exact fix the first time: .sidebar-nav-subitem's
   display:block was declared after this rule, so it won and this
   never took effect despite deploying correctly. A combined selector
   (two classes) has higher specificity than either alone, so this
   works regardless of where either rule sits in the file. */
.sidebar-nav-subitem.sidebar-nav-subitem-external { display: flex; align-items: center; white-space: nowrap; }
.sidebar-nav-subitem-external svg { flex-shrink: 0; }
.sidebar-divider { border: none; border-top: 1px solid rgba(var(--fg-rgb, 255, 255, 255), 0.07); margin: 10px 16px; }

.sidebar-nav-parent { width: 100%; text-align: left; justify-content: space-between; position: relative; z-index: 2; }
.sidebar-nav-parent .caret { width: 13px; height: 13px; transition: transform 0.15s ease; margin-left: auto; }
.sidebar-nav-parent.is-open .caret { transform: rotate(180deg); }

.sidebar-submenu { overflow: hidden; max-height: 0; transition: max-height 0.2s ease; padding-left: 14px; }
.sidebar-submenu.is-open { max-height: 600px; }
.sidebar-nav-subitem {
  display: block;
  padding: 6px 16px;
  margin: 1px 0;
  border-radius: var(--radius-full);
  color: var(--sidebar-ink-muted);
  font-size: 0.85rem;
}
/* Sub-items were always pure text before - the first sub-items to ever
   carry an icon (external links like Website Admin, moved in from being
   top-level items) rendered at whatever unconstrained native size the
   SVG had, since no rule here ever sized one. .sidebar-nav-item's icon
   sizing doesn't apply here, .sidebar-nav-subitem is display:block, not
   flex, so this is vertical-align + margin rather than a flex gap. */
.sidebar-nav-subitem svg { width: 14px; height: 14px; flex-shrink: 0; vertical-align: -2px; margin-right: 5px; }
.sidebar-nav-subitem:hover { color: var(--sidebar-ink); background: rgba(var(--fg-rgb, 255, 255, 255), 0.06); filter: none; }
.sidebar-subdivider { border: none; border-top: 1px solid rgba(var(--fg-rgb, 255, 255, 255), 0.06); margin: 6px 16px; }

.sidebar-footer { flex-shrink: 0; border-top: 1px solid rgba(var(--fg-rgb, 255, 255, 255), 0.07); }
.sidebar-version { padding: 12px 22px 20px; font-size: 0.7rem; color: var(--sidebar-ink-muted); }
.sidebar-version b { color: var(--sidebar-ink); font-weight: 600; }

#content {
  margin-top: var(--topbar-h);
  margin-left: 0;
  padding: 30px 0 0 0;
  background: var(--bg);
  min-height: calc(100vh - var(--topbar-h));
  transition: margin 0.2s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 960px) {
  #content { margin-left: var(--sidebar-w); }
  #top-head { left: var(--sidebar-w); }
}
@media (min-width: 1280px) {
  /* Team Notes becomes a permanently-docked right column instead of a
     toggled overlay once there's enough width for it not to crowd out
     the main content (which already has the left nav sidebar to share
     space with below this breakpoint). */
  #content { margin-right: var(--right-panel-w); }
  #top-head { right: var(--right-panel-w); }
  #team-notes-tab { display: none; }
  #team-notes-panel { right: 0; }
}
@media (max-width: 959px) {
  #left-col { display: none; }
  #top-head .topbar-mobile-logo { display: block; }
}
#left-col.is-open { display: flex; width: 100%; max-width: 300px; box-shadow: var(--shadow-pop); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-full);
  color: var(--sidebar-ink);
}
.icon-btn:hover { background: rgba(var(--fg-rgb, 255, 255, 255), 0.08); color: var(--lime-text, var(--lime)); filter: none; }
.icon-btn svg { width: 18px; height: 18px; }

/* System moved out of the sidebar into a header dropdown - it's account
   administration, not part of the day-to-day business workflow the
   sidebar is otherwise organized around. Same open/close conventions
   as .modal (backdrop click, Escape) but anchored to its trigger
   button instead of a full-screen overlay. */
.header-dropdown { position: relative; }
.header-dropdown-panel {
  display: none;
  position: absolute;
  top: 44px;
  right: 0;
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 60;
}
.header-dropdown-panel.is-open { display: block; }
.header-dropdown-panel a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-ink-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
/* Same bug as the sidebar's external links, same fix - this dropdown is
   a brand new component with its own link styling, so it needed its
   own icon-sizing rule too; there was none at all here before, not
   just a wrong one. Applied display:flex directly on all its links up
   front this time (not just the one icon-bearing link) rather than
   fixing the sizing bug and only later discovering a wrapping bug
   separately, the way the sidebar's version played out. */
.header-dropdown-panel a svg { width: 14px; height: 14px; flex-shrink: 0; }
.header-dropdown-panel a:hover { color: var(--sidebar-ink); background: rgba(var(--fg-rgb, 255, 255, 255), 0.06); }
.header-dropdown-panel hr { border: none; border-top: 1px solid rgba(var(--fg-rgb, 255, 255, 255), 0.07); margin: 6px 4px; }

.app-footer { text-align: center; padding: 40px 0; }
.app-footer p { color: var(--ink-faint); font-size: 0.85rem; }

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */
.card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 24px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 22px 26px;
}
.card-header h2, .card-header h3, .card-header h4 { margin: 0; }
.card-body { padding: 26px; }
.card-actions { display: flex; align-items: center; gap: 8px; }

/* Styled file-upload button: wraps a visually-hidden native file input so
   it matches .btn instead of the browser's default file-picker chrome. */
.file-upload-label { cursor: pointer; }
.file-upload-input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Compact document list (clients_edit.php document cards): one row per
   uploaded file, replacing the old full-width Report/Date/Action table
   repeated per document type. */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.doc-list-item:last-child { border-bottom: none; }
.doc-list-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  min-width: 0;
}
.doc-list-name svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-muted); }
.doc-list-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-list-name:hover { color: var(--lime-text, var(--lime)); }
.doc-list-name:hover svg { color: var(--lime-text, var(--lime)); }
.doc-list-date { flex-shrink: 0; }
.doc-list-item .icon-link { flex-shrink: 0; }
.doc-list-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 20px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.88rem;
  border: 1px solid transparent;
  transition: transform 0.06s ease, background-color 0.12s ease, filter 0.12s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; }

.btn-default { background: var(--bg-sunken); color: var(--ink); border-color: var(--border-strong); }
.btn-default:hover { border-color: var(--lime-line, var(--lime)); filter: none; }

.btn-primary { background: var(--lime); color: var(--lime-ink); border-color: var(--lime-line, var(--lime)); }
.btn-primary:hover { filter: brightness(1.08); }

.btn-secondary { background: var(--bg-sunken); color: var(--ink); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--border); filter: none; }

.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:hover { filter: brightness(0.94); }

.btn-sm { height: 30px; padding: 0 14px; font-size: 0.8rem; }
.btn-icon-only { width: 34px; height: 34px; padding: 0; justify-content: center; }

.icon-link { display: inline-flex; color: var(--ink-muted); }
.icon-link:hover { color: var(--lime-text, var(--lime)); filter: none; }
.icon-link svg { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */
.field { margin-bottom: 16px; }
.field-label { display: block; margin-bottom: 6px; color: var(--ink-muted); font-size: 0.82rem; font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  background: var(--bg-sunken);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 0.9rem;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--lime-line, var(--lime));
  background: var(--bg-raised);
  box-shadow: 0 0 0 3px var(--lime-wash);
}
.textarea { resize: vertical; min-height: 80px; }
/* appearance:none previously replaced the browser's native dropdown
   arrow with a custom one - the ONE select in this app without this
   class (DataTables' page-length picker) was reported to behave
   normally (single click works), while every select WITH this class
   required click-and-hold to pick an option. appearance:none is a
   documented cause of exactly that: it can change which internal
   rendering path the browser uses for the popup itself, not just the
   closed-state look. Removed rather than kept alongside a workaround,
   since the custom arrow depended on it - the browser's own native
   arrow renders instead now, which looks slightly less "branded" but
   is what actually restores reliable single-click selection. */
.select { padding-right: 12px; }

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--lime); }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */
.table th {
  text-align: left;
  color: var(--ink-muted);
  font-weight: 600;
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 13px 14px;
  border-bottom: 1px solid var(--border-strong);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--border); color: var(--ink); }
/* 5.3.9: .table th is left-aligned, which beat .text-right on a header - figures sat right
   under titles that sat left. A column's header now follows its figures. */
.table th.text-right, .table td.text-right { text-align: right; }
.table th.text-center, .table td.text-center { text-align: center; }
.table td.text-right, .table th.text-right { font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background-color 0.1s ease; }
.table-hover tbody tr:hover { background: var(--bg-hover); }
.table-striped tbody tr:nth-of-type(odd) { background: var(--bg-sunken); }
.table-scroll { overflow-x: auto; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-full);
  font-family: var(--font-display); font-weight: 600; font-size: 0.72rem;
  color: #fff;
}
.avatar.c1 { background: var(--accent-blue); }
.avatar.c2 { background: var(--accent-purple); }
.avatar.c3 { background: var(--accent-pink); }
.avatar.c4 { background: var(--accent-orange); }
.avatar.c5 { background: var(--accent-teal); }

/* ---------------------------------------------------------------------------
   Badges / labels
   --------------------------------------------------------------------------- */
.badge {
  display: inline-block;
  background: var(--bg-sunken);
  color: var(--ink-muted);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.72rem;
  padding: 3px 12px;
}
.badge-warning { background: var(--warning-wash); color: var(--accent-orange); }
.badge-danger { background: var(--danger-wash); color: var(--danger); }
.badge-success { background: var(--success-wash); color: var(--success); }
.badge-muted { color: var(--ink-faint); font-style: italic; background: transparent; }

/* ---------------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------------- */
.alert { border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; font-size: 0.88rem; }
.alert-danger { background: var(--danger-wash); color: var(--danger); border-left: 3px solid var(--danger); }
.alert-success { background: var(--success-wash); color: var(--success); border-left: 3px solid var(--success); }
.alert-info { background: var(--bg-sunken); color: var(--ink-muted); border-left: 3px solid var(--ink-faint); }
.alert-warning { background: var(--warning-wash); color: var(--ink); border-left: 3px solid var(--warning); }   /* 5.33.2: used across Ops, never styled - warnings looked like plain text */
.alert-warning a { color: var(--accent-orange); }

/* ---------------------------------------------------------------------------
   Progress / segmented bar
   --------------------------------------------------------------------------- */
.progress { height: 6px; border-radius: var(--radius-full); background: var(--bg-sunken); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--lime); }
.progress.warning > span { background: var(--accent-orange); }
.progress.success > span { background: var(--success); }

.segbar { display: flex; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--bg-sunken); }
.segbar span { display: block; height: 100%; }

.chart-container { position: relative; height: 300px; margin: 0 auto; }

/* ---------------------------------------------------------------------------
   Modal
   --------------------------------------------------------------------------- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 40px 16px;
}
.modal.is-open { display: flex; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: -1;
}
.modal-dialog {
  position: relative;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  width: 100%;
  max-width: 640px;
  padding: 26px;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--ink-muted);
}
.modal-close:hover { color: var(--lime-text, var(--lime)); }

/* ---------------------------------------------------------------------------
   DataTables — themed to match, kept as the interactive-table library
   --------------------------------------------------------------------------- */
.dataTables_wrapper { color: var(--ink); }
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing { color: var(--ink-muted); }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: var(--bg-sunken);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--lime-line, var(--lime));
  outline: none;
  box-shadow: 0 0 0 3px var(--lime-wash);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  color: var(--ink) !important;
  border-radius: var(--radius-full);
  border: 1px solid transparent !important;
  background: transparent !important;
  padding: 4px 12px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--lime) !important;
  color: var(--lime-ink) !important;
  border-color: var(--lime-line, var(--lime)) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--bg-hover) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--ink-faint) !important;
  background: transparent !important;
}
table.dataTable thead th, table.dataTable thead td { color: var(--ink-muted); border-bottom: 1px solid var(--border-strong); }
table.dataTable tbody th, table.dataTable tbody td { color: var(--ink); border-top: 1px solid var(--border); }
table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background: var(--bg-sunken); }
table.dataTable.hover tbody tr:hover, table.dataTable.display tbody tr:hover { background: var(--bg-hover) !important; }
table.dataTable tbody tr.selected { background: var(--lime-wash) !important; color: var(--ink) !important; }
.sorting:before, .sorting:after, .sorting_asc:before, .sorting_asc:after, .sorting_desc:before, .sorting_desc:after { opacity: 0.4; }
.dataTables_scrollHead, .dataTables_scrollBody { background: var(--bg-raised); }

/* ---------------------------------------------------------------------------
   Filter bar + pagination (Customers, 3.79.0)
   The reset zeroes <p> margins, so an intro line followed directly by a
   form control has no gap at all - .page-intro and .filter-bar give that
   spacing explicitly instead of per-page inline styles.
   --------------------------------------------------------------------------- */
.page-intro { color: var(--ink-muted); font-size: 0.85rem; line-height: 1.5; margin-bottom: 20px; max-width: 900px; }
.filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 14px;
  align-items: end;
  margin-bottom: 20px;
}
.filter-bar .field { margin-bottom: 0; }
.filter-actions { display: flex; align-items: center; gap: 8px; }
.filter-actions .btn { height: 38px; }
.filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; color: var(--ink-muted); font-size: 0.85rem; }

.pagination { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--ink);
  font-size: 0.85rem;
}
.pagination a:hover { border-color: var(--lime-line, var(--lime)); }
.pagination .is-current { background: var(--lime); color: var(--lime-ink); border-color: var(--lime-line, var(--lime)); font-weight: 600; }
.pagination .is-disabled { color: var(--ink-faint); pointer-events: none; }
.pagination .gap { border: none; background: none; color: var(--ink-faint); min-width: 20px; padding: 0; }

.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented button { padding: 6px 12px; font-size: 0.8rem; color: var(--ink-muted); background: var(--bg-sunken); }
.segmented button + button { border-left: 1px solid var(--border-strong); }
.segmented button.is-active { background: var(--lime); color: var(--lime-ink); font-weight: 600; }

/* Customer Insights card (3.81.0) */
.chart-box { position: relative; height: 300px; }
.ci-custom { display: none; }
.table-small td, .table-small th { padding: 8px 10px; }

/* Client strength (3.91.0) */
.strength { display: grid; grid-template-columns: 170px 1fr 260px; gap: 22px; padding: 20px; border-radius: var(--radius-md); background: var(--bg-sunken); border-left: 4px solid var(--ink-faint); }
.strength-success { border-left-color: var(--success, #57D687); }
.strength-warning { border-left-color: var(--accent-orange); }
.strength-danger { border-left-color: var(--danger); }
.strength-info { border-left-color: var(--accent-blue); }
.strength-score, .strength-action { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.strength-label { color: var(--ink-muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }
.strength-value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.strength-value small { font-size: 0.9rem; color: var(--ink-muted); font-weight: 400; }
.strength-drivers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; align-content: start; }
.strength-driver { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.strength-bar { display: block; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.strength-bar span { display: block; height: 100%; background: var(--lime); }
.strength-action b { font-size: 1rem; }
@media (max-width: 900px) { .strength { grid-template-columns: 1fr; } }

/* Calendar Bookings (3.86.0) */
.gc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }

/* Bike page, invoice sheet, section guidance (3.85.0) */
.section-help { color: var(--ink-muted); font-size: 0.84rem; line-height: 1.55; margin-bottom: 14px; max-width: 920px; }
.identity-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.9rem; }
.identity-line > span:not(.badge) { color: var(--ink-muted); }
.coordinates-card { border: 1px solid var(--lime-line, var(--lime)); }
.coordinates-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.coordinate { background: var(--bg-sunken); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.coordinate-label { color: var(--ink-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.coordinate-value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--lime-text, var(--lime)); }
.coordinates-compact .coordinate { padding: 8px 10px; }
.coordinates-compact .coordinate-value { font-size: 1.1rem; }
.service-entry { padding: 12px 0; border-top: 1px solid var(--border); }
.service-entry:first-of-type { border-top: 0; padding-top: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.03em; }
.modal-dialog-wide { max-width: 860px; }
.invoice-totals { margin: 12px 0 0 auto; min-width: 320px; border-collapse: collapse; }
.invoice-totals td { padding: 6px 10px; }
.invoice-totals tr + tr td { border-top: 1px solid var(--border); }
.invoice-totals-gross td { font-weight: 600; color: var(--ink); border-top: 2px solid var(--border-strong) !important; }
.actions-card { background: color-mix(in srgb, var(--accent-orange) 9%, var(--bg-raised)); border: 1px solid color-mix(in srgb, var(--accent-orange) 45%, transparent); }
.actions-card .card-header h3::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--accent-orange); color: #1a1a1a; font-size: 0.8rem; }
.actions-card .cp-action { background: var(--bg-raised); }
.fit-warning { color: var(--danger); font-size: 0.76rem; }

/* Client page (3.84.0) */
.cp-fields { display: grid; gap: 12px 20px; }
.cp-fields-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cp-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cp-fields-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cp-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cp-field-label { color: var(--ink-muted); font-size: 0.76rem; }
.cp-field-value { color: var(--ink); overflow-wrap: anywhere; }
.cp-subhead { margin: 18px 0 10px; color: var(--ink-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.cp-subhead:first-child { margin-top: 0; }
.cp-notes { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; }
.cp-note { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.cp-note.is-pinned { border-color: var(--lime-line, var(--lime)); }
.cp-note-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.cp-note-body { overflow-wrap: anywhere; }
.cp-note-actions { display: flex; gap: 12px; margin-top: 6px; }
.cp-actions { display: flex; flex-direction: column; gap: 8px; }
.cp-action { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-sunken); border-left: 3px solid var(--ink-faint); }
.cp-action-danger { border-left-color: var(--danger); }
.cp-action-warning { border-left-color: var(--accent-orange); }
.cp-action-info { border-left-color: var(--accent-blue); }
.cp-timeline { display: flex; flex-direction: column; gap: 8px; }
.cp-timeline li { padding-left: 12px; border-left: 2px solid var(--border-strong); }
.cv-inline-form { display: inline; }
.select-sm, .input-sm { padding: 5px 8px; font-size: 0.8rem; width: auto; }

/* Manufactured Bikes summary row (3.83.0) */
.chart-kpis-5 { grid-template-columns: repeat(5, 1fr); }
a.chart-kpi-value:hover { color: var(--lime-text, var(--lime)); }

/* Chart filter row + headline numbers (Customers chart, 3.80.0) */
.chart-filter-bar { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.chart-toggles { display: flex; flex-direction: column; gap: 6px; justify-content: flex-end; font-size: 0.85rem; color: var(--ink-muted); padding-bottom: 4px; }
.chart-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.chart-kpi { background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.chart-kpi-label { color: var(--ink-muted); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.03em; }
.chart-kpi-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--ink); }

@media (max-width: 780px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
  .chart-kpis, .chart-kpis-5 { grid-template-columns: 1fr 1fr; }
  .cp-fields-2, .cp-fields-3, .cp-fields-4 { grid-template-columns: 1fr 1fr; }
  .coordinates-grid { grid-template-columns: 1fr 1fr; }
  .filter-bar .field-search { grid-column: 1 / -1; }
}

@media print {
  .no-print, .no-print * { display: none !important; }
}


/* 4.70.0: the builder's hidden-figure styles, shared - quotes show cost, profit and margin the same way */
.bb-figure-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; font-size: 1.05rem; }
.bb-figure-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bb-figure { white-space: nowrap; }
.bb-figure-plain strong { font-size: 1.15rem; }
.bb-figure-sep { color: var(--border); }
.bb-masked { cursor: pointer; font-weight: 600; letter-spacing: 0.05em; }
.bb-masked:hover { color: var(--lime-text, var(--lime)); }

/* ---------------------------------------------------------------------------
   Light theme (5.49.0) - what the tokens alone do not carry
   --------------------------------------------------------------------------- */
/* the logo is white on nothing: dark on the light sidebar and top bar */
:root[data-theme="light"] .sidebar-logo img,
:root[data-theme="light"] .topbar-mobile-logo img { filter: brightness(0); opacity: 0.88; }
:root[data-theme="light"] #left-col { border-right: 1px solid var(--border); }
:root[data-theme="light"] .btn-primary { border-color: #B4DA22; }
:root[data-theme="light"] .header-dropdown-panel { box-shadow: var(--shadow-pop); }
:root[data-theme="light"] .modal-backdrop { background: rgba(20, 22, 10, 0.38); }
:root[data-theme="light"] .actions-card .card-header h3::before { color: #fff; }
/* each section's own colour while it is open: a light tint with deeper words */
:root[data-theme="light"] .sidebar-section-customers.is-open { background: #E3EDF8; color: #2A63A0; }
:root[data-theme="light"] .sidebar-section-marketing.is-open { background: #FBE8DA; color: #A84B0E; }
:root[data-theme="light"] .sidebar-section-sales.is-open { background: #F8E1EC; color: #A82E63; }
:root[data-theme="light"] .sidebar-section-operations.is-open { background: #DCF2EE; color: #157A66; }
:root[data-theme="light"] .sidebar-section-tools.is-open { background: #F6EDD3; color: #85620A; }
:root[data-theme="light"] .sidebar-section-services.is-open { background: #DDF0F6; color: #1D7290; }
:root[data-theme="light"] .sidebar-section-service.is-open { background: #EDE4F7; color: #6C3FA1; }
:root[data-theme="light"] .sidebar-section-inventory.is-open { background: #E4E6F7; color: #3F4AA8; }
:root[data-theme="light"] .sidebar-section-company.is-open { background: #DFF2E5; color: #237A42; }
:root[data-theme="light"] .sidebar-section-design.is-open { background: #ECE5FA; color: #6545B8; }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-customers.is-open { background: rgba(42, 99, 160, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-marketing.is-open { background: rgba(168, 75, 14, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-sales.is-open { background: rgba(168, 46, 99, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-operations.is-open { background: rgba(21, 122, 102, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-tools.is-open { background: rgba(133, 98, 10, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-services.is-open { background: rgba(29, 114, 144, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-service.is-open { background: rgba(108, 63, 161, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-inventory.is-open { background: rgba(63, 74, 168, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-company.is-open { background: rgba(35, 122, 66, 0.05); }
:root[data-theme="light"] .sidebar-submenu.sidebar-section-design.is-open { background: rgba(101, 69, 184, 0.05); }

/* The fitting drawings (includes/fitting_visuals.php, fitting_chart.php) are drawn for a dark screen with colours of
   their own. In the light theme they take the deeper colours CS Connect already gives them on its light pages
   (cx_light_svg in connect/_fit.php), here by their attributes - so the switch is live and the drawings are not made
   twice. On screen only: printed, the report keeps its dark drawings. Not on the Geometry Studio stage (a dark
   drawing board of its own, with its Paper view) or the paint designer's stage (its colour is chosen there). */
@media screen {
  :root[data-theme="light"] [fill="#a3e635" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#a3e635" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #3F7D1F !important; }
  :root[data-theme="light"] [stroke="#a3e635" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #3F7D1F; }
  :root[data-theme="light"] [stop-color="#a3e635" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #3F7D1F; }
  :root[data-theme="light"] [fill="#22d3ee" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#22d3ee" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #0B6E8C !important; }
  :root[data-theme="light"] [stroke="#22d3ee" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #0B6E8C; }
  :root[data-theme="light"] [stop-color="#22d3ee" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #0B6E8C; }
  :root[data-theme="light"] [fill="#fbbf24" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#fbbf24" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #A86A12 !important; }
  :root[data-theme="light"] [stroke="#fbbf24" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #A86A12; }
  :root[data-theme="light"] [stop-color="#fbbf24" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #A86A12; }
  :root[data-theme="light"] [fill="#ef4444" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#ef4444" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #C0392B !important; }
  :root[data-theme="light"] [stroke="#ef4444" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #C0392B; }
  :root[data-theme="light"] [stop-color="#ef4444" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #C0392B; }
  :root[data-theme="light"] [fill="#6b7280" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#6b7280" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #A0A7AC !important; }
  :root[data-theme="light"] [stroke="#6b7280" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #A0A7AC; }
  :root[data-theme="light"] [stop-color="#6b7280" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #A0A7AC; }
  :root[data-theme="light"] [fill="#111417" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#111417" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #FFFFFF !important; }
  :root[data-theme="light"] [stroke="#111417" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #FFFFFF; }
  :root[data-theme="light"] [stop-color="#111417" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #FFFFFF; }
  :root[data-theme="light"] [fill="#1b1e21" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#1b1e21" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #FFFFFF !important; }
  :root[data-theme="light"] [stroke="#1b1e21" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #FFFFFF; }
  :root[data-theme="light"] [stop-color="#1b1e21" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #FFFFFF; }
  :root[data-theme="light"] [fill="#2b3034" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#2b3034" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #E2E5E7 !important; }
  :root[data-theme="light"] [stroke="#2b3034" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #E2E5E7; }
  :root[data-theme="light"] [stop-color="#2b3034" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #E2E5E7; }
  :root[data-theme="light"] [fill="#3a4045" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#3a4045" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #C9CED2 !important; }
  :root[data-theme="light"] [stroke="#3a4045" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #C9CED2; }
  :root[data-theme="light"] [stop-color="#3a4045" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #C9CED2; }
  :root[data-theme="light"] [fill="#4a5258" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#4a5258" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #C2C8CC !important; }
  :root[data-theme="light"] [stroke="#4a5258" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #C2C8CC; }
  :root[data-theme="light"] [stop-color="#4a5258" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #C2C8CC; }
  :root[data-theme="light"] [fill="#5b6268" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#5b6268" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #8E959A !important; }
  :root[data-theme="light"] [stroke="#5b6268" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #8E959A; }
  :root[data-theme="light"] [stop-color="#5b6268" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #8E959A; }
  :root[data-theme="light"] [fill="#6b737a" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#6b737a" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #7B8287 !important; }
  :root[data-theme="light"] [stroke="#6b737a" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #7B8287; }
  :root[data-theme="light"] [stop-color="#6b737a" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #7B8287; }
  :root[data-theme="light"] [fill="#9aa1a7" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#9aa1a7" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #5E656A !important; }
  :root[data-theme="light"] [stroke="#9aa1a7" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #5E656A; }
  :root[data-theme="light"] [stop-color="#9aa1a7" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #5E656A; }
  :root[data-theme="light"] [fill="#c9ced2" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#c9ced2" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #3E454A !important; }
  :root[data-theme="light"] [stroke="#c9ced2" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #3E454A; }
  :root[data-theme="light"] [stop-color="#c9ced2" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #3E454A; }
  :root[data-theme="light"] [fill="#e6e8ea" i]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [style*="fill:#e6e8ea" i]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: #1F2428 !important; }
  :root[data-theme="light"] [stroke="#e6e8ea" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #1F2428; }
  :root[data-theme="light"] [stop-color="#e6e8ea" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stop-color: #1F2428; }
  :root[data-theme="light"] [stroke="#ffffff" i]:not(.gs-stage *, #design-stage *, .fit-print *) { stroke: #1F2428; }
  :root[data-theme="light"] [fill="rgba(163,230,53,.28)"]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: rgba(63, 125, 31, 0.28); }
  :root[data-theme="light"] [fill="rgba(255,255,255,.08)"]:not(.gs-stage *, #design-stage *, .fit-print *) { fill: rgba(0, 0, 0, 0.05); }
  :root[data-theme="light"] [fill="#000"][opacity="0.3"]:not(.gs-stage *, #design-stage *, .fit-print *), :root[data-theme="light"] [fill="#000"][opacity="0.28"]:not(.gs-stage *, #design-stage *, .fit-print *) { opacity: 0.07; }
  /* the share of force on the fitting page, written in the drawing colour */
  :root[data-theme="light"] #content [style*="color:#a3e635" i]:not(.gs-stage *, #design-stage *, .fit-print *) { color: #3F7D1F !important; }
  :root[data-theme="light"] #content [style*="color:#ef4444" i]:not(.gs-stage *, #design-stage *, .fit-print *) { color: #C0392B !important; }
}