/* =====================================================================
   ThriveCore "Flow" design system
   Soft, flat, tonal UI: grey canvas, white rounded surfaces, lavender
   brand accents (driven by tenant primary colour), lime as the fixed
   secondary, ink-black primary actions.

   Load order:  bootstrap.min.css -> lucide.css -> thrive.css -> thrive-utilities.css
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Tokens
   --------------------------------------------------------------------- */
:root {
  /* Brand: overridden per tenant via inline --brand on <html> */
  --brand: #7c5cfa;
  --brand-ink: color-mix(in srgb, var(--brand) 78%, #000);
  --brand-soft: color-mix(in srgb, var(--brand) 34%, #fff);
  --brand-softer: color-mix(in srgb, var(--brand) 13%, #fff);
  --brand-ring: color-mix(in srgb, var(--brand) 28%, transparent);

  /* Fixed secondary + semantic */
  --lime: #6aa82e;
  --lime-ink: #3f7414;
  --lime-soft: #d9efbd;
  --lime-softer: #eef8e2;
  --amber: #e2a23a;
  --amber-ink: #8a5a0c;
  --amber-soft: #fbe7b5;
  --amber-softer: #fdf4dc;
  --red: #e5484d;
  --red-ink: #b42328;
  --red-soft: #fcd9d9;
  --red-softer: #fdeeee;
  --blue: #3b82f6;
  --blue-ink: #1d4ed8;
  --blue-soft: #d6e6fd;
  --blue-softer: #edf4fe;

  /* Neutrals */
  --canvas: #eeeef2;
  --surface: #ffffff;
  --inset: #f4f4f6;
  --inset-2: #ebebef;
  --line: #e7e7ec;
  --ink: #111113;
  --ink-2: #2b2b31;
  --text: #17171c;
  --text-2: #4a4a55;
  --muted: #8a8a96;
  --faint: #b5b5bf;
  --on-ink: #ffffff;

  /* Shape + type */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Outfit", "Inter", system-ui, sans-serif;
  --shadow-pop: 0 12px 40px rgba(17, 17, 19, .12), 0 2px 8px rgba(17, 17, 19, .06);
  --sidebar-w: 256px;
  --gutter: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Bootstrap variable bridge */
  --bs-body-font-family: var(--font-ui);
  --bs-body-font-size: 1rem;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--canvas);
  --bs-emphasis-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--inset);
  --bs-secondary-bg: var(--inset);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-sm: var(--r-xs);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-xl: var(--r-lg);
  --bs-border-radius-xxl: var(--r-xl);
  --bs-link-color: var(--brand-ink);
  --bs-link-color-rgb: 92, 64, 214;
  --bs-link-hover-color: var(--ink);
  --bs-primary: var(--brand);
  --bs-success: var(--lime);
  --bs-warning: var(--amber);
  --bs-danger: var(--red);
  --bs-info: var(--blue);
  --bs-heading-color: var(--ink);
}

[data-bs-theme="dark"] {
  --brand-ink: color-mix(in srgb, var(--brand) 55%, #fff);
  --brand-soft: color-mix(in srgb, var(--brand) 42%, #1b1b20);
  --brand-softer: color-mix(in srgb, var(--brand) 18%, #1b1b20);
  --lime-ink: #a6dc72;
  --lime-soft: #34461f;
  --lime-softer: #242d1b;
  --amber-ink: #f3c46e;
  --amber-soft: #4a3816;
  --amber-softer: #2f2717;
  --red-ink: #ff8a8d;
  --red-soft: #4d2224;
  --red-softer: #2e1a1c;
  --blue-ink: #93bbfb;
  --blue-soft: #1f3354;
  --blue-softer: #19243a;
  --canvas: #0e0e11;
  --surface: #18181c;
  --inset: #222227;
  --inset-2: #2b2b31;
  --line: #2c2c33;
  --ink: #f4f4f6;
  --ink-2: #dcdce2;
  --text: #ececf1;
  --text-2: #b4b4bf;
  --muted: #8b8b97;
  --faint: #5d5d68;
  --on-ink: #111113;
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .3);
  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   2. Base
   --------------------------------------------------------------------- */
html { font-size: 14px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
h1, .h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; font-size: 2rem; }
h2, .h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.02em; font-size: 1.6rem; }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1.07rem; }
h6, .h6 { font-size: 1rem; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { color: var(--ink); }
hr { border-color: var(--line); opacity: 1; }
::selection { background: var(--brand-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--inset-2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--inset-2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
code { color: var(--brand-ink); background: var(--inset); padding: .1em .4em; border-radius: 6px; }
small, .small { font-size: .875em; }
.text-muted, .text-body-secondary, .text-secondary { color: var(--muted) !important; }

/* Icons (Lucide font). Inherit font-size so fs-* utilities size them. */
[class^="ic-"], [class*=" ic-"] { display: inline-block; line-height: 1; vertical-align: -.125em; font-size: 1.15em; color: inherit; }
.tc-spin { animation: tc-spin 1s linear infinite; }
@keyframes tc-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   3. App shell
   --------------------------------------------------------------------- */
.tc-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--gutter);
  min-height: 100vh;
  padding: var(--gutter);
}
.tc-sidebar {
  position: sticky;
  top: var(--gutter);
  height: calc(100vh - var(--gutter) * 2);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-xl);
  padding: 20px 14px 14px;
  overflow: hidden;
  z-index: 1040;
}
.tc-brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px 16px; color: var(--ink); }
.tc-brand:hover { color: var(--ink); }
.tc-brand img { height: 36px; width: auto; max-width: 170px; object-fit: contain; }
.tc-brand-name { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.tc-brand-name small { display: block; font-family: var(--font-ui); font-size: .7rem; color: var(--muted); letter-spacing: .02em; margin-top: 3px; }

.tc-workspace {
  display: flex; align-items: center; gap: 10px;
  background: var(--inset); border-radius: var(--r-md); padding: 10px; margin-bottom: 18px;
  color: var(--ink);
}
.tc-workspace-logo {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; overflow: hidden;
}
.tc-workspace-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.tc-workspace-name { font-weight: 600; font-size: .93rem; line-height: 1.2; }
.tc-workspace-meta { font-size: .8rem; color: var(--muted); line-height: 1.2; }

.tc-nav { flex: 1; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.tc-nav-label { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.tc-nav-label:first-child { padding-top: 0; }
.tc-nav-link, .tc-nav summary {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; margin: 1px 0;
  border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 500; font-size: .95rem;
  cursor: pointer; list-style: none; user-select: none;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.tc-nav summary::-webkit-details-marker { display: none; }
.tc-nav-link > i, .tc-nav summary > i:first-child { font-size: 1.2rem; color: var(--text-2); width: 20px; text-align: center; }
.tc-nav-link:hover, .tc-nav summary:hover { background: var(--inset); color: var(--ink); }
.tc-nav-link.active, details.active > summary { background: var(--brand-soft); color: var(--ink); }
.tc-nav-link.active > i, details.active > summary > i:first-child { color: var(--ink); }
.tc-nav-count {
  margin-left: auto; min-width: 26px; height: 22px; padding: 0 7px;
  display: inline-grid; place-items: center; border-radius: var(--r-pill);
  background: var(--inset); color: var(--text-2); font-size: .75rem; font-weight: 500;
}
.tc-nav-link.active .tc-nav-count { background: rgba(255, 255, 255, .7); color: var(--ink); }
[data-bs-theme="dark"] .tc-nav-link.active .tc-nav-count { background: rgba(0, 0, 0, .25); }
.tc-nav .tc-caret { margin-left: auto; font-size: .95rem; color: var(--muted); transition: transform .2s var(--ease); }
.tc-nav details[open] > summary .tc-caret { transform: rotate(180deg); }
.tc-nav-sub { padding: 2px 0 6px 42px; display: grid; gap: 1px; }
.tc-nav-sub a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--muted); font-size: .9rem; font-weight: 500; }
.tc-nav-sub a:hover { color: var(--ink); background: var(--inset); }
.tc-nav-sub a.active { color: var(--ink); background: var(--brand-softer); }

.tc-assist { background: var(--lime-soft); border-radius: var(--r-lg); padding: 14px; margin: 10px 0 8px; color: var(--ink); }
.tc-assist-title { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: .95rem; }
.tc-assist p { font-size: .85rem; color: var(--ink-2); margin: 6px 0 10px; line-height: 1.4; }
.tc-assist .btn { background: var(--surface); color: var(--ink); }

.tc-sidebar-foot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.tc-user { display: flex; align-items: center; gap: 10px; padding: 6px 4px; }
.tc-user-name { font-weight: 600; font-size: .93rem; color: var(--ink); line-height: 1.2; }
.tc-user-role { font-size: .78rem; color: var(--muted); line-height: 1.2; }
.tc-user .tc-icon-btn { margin-left: auto; width: 34px; height: 34px; background: transparent; }

.tc-main { min-width: 0; display: flex; flex-direction: column; padding: 6px 4px 0; }
.tc-topbar { display: flex; align-items: flex-start; gap: 16px; padding: 4px 0 18px; flex-wrap: wrap; }
.tc-page-head { min-width: 0; flex: 1 1 280px; }
.tc-title { font-family: var(--font-display); font-weight: 400; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); margin: 0; }
.tc-subtitle { color: var(--muted); margin-top: 4px; font-size: .95rem; }
.tc-top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-left: auto; }
.tc-content { flex: 1; min-width: 0; }
.tc-footer { color: var(--muted); font-size: .82rem; padding: 18px 2px 4px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.tc-footer a { color: var(--muted); }

.tc-mobile-bar { display: none; }
.tc-scrim { display: none; }

@media (max-width: 991.98px) {
  .tc-app { grid-template-columns: minmax(0, 1fr); padding: 12px var(--gutter); }
  .tc-sidebar {
    position: fixed; top: 10px; left: 10px; bottom: 10px; height: auto;
    width: min(300px, calc(100vw - 40px));
    transform: translateX(calc(-100% - 20px)); transition: transform .25s var(--ease);
    box-shadow: var(--shadow-pop);
  }
  body.tc-sidebar-open .tc-sidebar { transform: none; }
  body.tc-sidebar-open .tc-scrim { display: block; position: fixed; inset: 0; background: rgba(17, 17, 19, .35); z-index: 1035; }
  .tc-mobile-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; }
  .tc-mobile-bar .tc-brand { padding: 0; }
  .tc-title { font-size: 1.7rem; }
  .tc-search { display: none !important; }
}

/* ---------------------------------------------------------------------
   4. Top-bar pieces
   --------------------------------------------------------------------- */
.tc-search {
  position: relative; display: flex; align-items: center;
  width: 300px; max-width: 100%; height: 44px; padding: 0 12px 0 40px;
  background: var(--surface); border-radius: var(--r-pill); color: var(--muted);
}
.tc-search > i { position: absolute; left: 15px; font-size: 1.1rem; }
.tc-search input { border: 0; outline: 0; background: transparent; width: 100%; color: var(--text); font-size: .93rem; }
.tc-search input::placeholder { color: var(--muted); }
.tc-search.is-inset { background: var(--inset); }
.tc-kbd, kbd {
  font-family: var(--font-ui); font-size: .72rem; font-weight: 500; color: var(--text-2);
  background: var(--inset); border-radius: 6px; padding: 2px 6px; box-shadow: none;
}
.tc-icon-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; flex: none;
  display: inline-grid; place-items: center; position: relative;
  background: var(--surface); color: var(--ink); font-size: 1.15rem;
  transition: background .15s var(--ease);
}
.tc-icon-btn:hover { background: var(--inset-2); color: var(--ink); }
.tc-icon-btn.is-inset { background: var(--inset); }
.tc-icon-btn .tc-dot { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid var(--surface); }

/* ---------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------- */
.btn {
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-padding-y: .62rem;
  --bs-btn-font-size: .93rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--r-pill);
  --bs-btn-border-width: 1px;
  --bs-btn-focus-box-shadow: 0 0 0 4px var(--brand-ring);
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  line-height: 1.25; white-space: nowrap;
  transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn > i { font-size: 1.1em; }
.btn-sm { --bs-btn-padding-x: .85rem; --bs-btn-padding-y: .42rem; --bs-btn-font-size: .84rem; --bs-btn-border-radius: var(--r-pill); }
.btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .85rem; --bs-btn-font-size: 1rem; --bs-btn-border-radius: var(--r-pill); }

/* Primary = ink (the design's main CTA) */
.btn-primary, .btn-dark, .btn-ink {
  --bs-btn-color: var(--on-ink); --bs-btn-bg: var(--ink); --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: var(--on-ink); --bs-btn-hover-bg: var(--ink-2); --bs-btn-hover-border-color: var(--ink-2);
  --bs-btn-active-color: var(--on-ink); --bs-btn-active-bg: var(--ink-2); --bs-btn-active-border-color: var(--ink-2);
  --bs-btn-disabled-color: var(--on-ink); --bs-btn-disabled-bg: var(--ink); --bs-btn-disabled-border-color: var(--ink);
}
/* Brand = lavender fill */
.btn-brand, .btn-info {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--brand-soft); --bs-btn-border-color: var(--brand-soft);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: color-mix(in srgb, var(--brand) 45%, #fff); --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: color-mix(in srgb, var(--brand) 50%, #fff); --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: var(--ink); --bs-btn-disabled-bg: var(--brand-soft); --bs-btn-disabled-border-color: transparent;
}
/* Neutral / secondary = surface or inset */
.btn-secondary, .btn-light, .btn-soft {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--inset); --bs-btn-border-color: var(--inset);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--inset-2); --bs-btn-hover-border-color: var(--inset-2);
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--inset-2); --bs-btn-active-border-color: var(--inset-2);
  --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-bg: var(--inset); --bs-btn-disabled-border-color: var(--inset);
}
.btn-white {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--surface);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--inset); --bs-btn-hover-border-color: var(--inset);
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: var(--inset-2); --bs-btn-active-border-color: var(--inset-2);
}
.btn-outline, .btn-outline-primary, .btn-outline-dark, .btn-outline-secondary {
  --bs-btn-color: var(--ink); --bs-btn-bg: transparent; --bs-btn-border-color: var(--ink);
  --bs-btn-hover-color: var(--on-ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: var(--on-ink); --bs-btn-active-bg: var(--ink); --bs-btn-active-border-color: var(--ink);
  --bs-btn-border-width: 1.5px;
}
.btn-outline-secondary { --bs-btn-border-color: var(--line); }
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: var(--lime); --bs-btn-border-color: var(--lime);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--lime-ink); --bs-btn-hover-border-color: var(--lime-ink);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--lime-ink); --bs-btn-active-border-color: var(--lime-ink);
  --bs-btn-disabled-bg: var(--lime); --bs-btn-disabled-border-color: var(--lime);
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: var(--red); --bs-btn-border-color: var(--red);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--red-ink); --bs-btn-hover-border-color: var(--red-ink);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--red-ink); --bs-btn-active-border-color: var(--red-ink);
  --bs-btn-disabled-bg: var(--red); --bs-btn-disabled-border-color: var(--red);
}
.btn-warning {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--amber-soft); --bs-btn-border-color: var(--amber-soft);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: #f7d98d; --bs-btn-hover-border-color: #f7d98d;
  --bs-btn-active-color: var(--ink); --bs-btn-active-bg: #f7d98d; --bs-btn-active-border-color: #f7d98d;
}
.btn-outline-success { --bs-btn-color: var(--lime-ink); --bs-btn-border-color: var(--lime); --bs-btn-hover-bg: var(--lime); --bs-btn-hover-border-color: var(--lime); --bs-btn-hover-color: #fff; --bs-btn-border-width: 1.5px; }
.btn-outline-danger { --bs-btn-color: var(--red-ink); --bs-btn-border-color: var(--red); --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); --bs-btn-hover-color: #fff; --bs-btn-border-width: 1.5px; }
.btn-outline-warning { --bs-btn-color: var(--amber-ink); --bs-btn-border-color: var(--amber); --bs-btn-hover-bg: var(--amber-soft); --bs-btn-hover-border-color: var(--amber); --bs-btn-hover-color: var(--ink); --bs-btn-border-width: 1.5px; }
.btn-outline-info { --bs-btn-color: var(--brand-ink); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: var(--ink); --bs-btn-border-width: 1.5px; }
/* Soft tinted actions */
.btn-soft-brand { --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--brand-soft); --bs-btn-active-border-color: transparent; }
.btn-soft-success { --bs-btn-color: var(--lime-ink); --bs-btn-bg: var(--lime-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--lime-soft); --bs-btn-hover-color: var(--lime-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--lime-soft); --bs-btn-active-border-color: transparent; }
.btn-soft-danger { --bs-btn-color: var(--red-ink); --bs-btn-bg: var(--red-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--red-soft); --bs-btn-hover-color: var(--red-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--red-soft); --bs-btn-active-border-color: transparent; }
.btn-soft-warning { --bs-btn-color: var(--amber-ink); --bs-btn-bg: var(--amber-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--amber-soft); --bs-btn-hover-color: var(--amber-ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--amber-soft); --bs-btn-active-border-color: transparent; }
.btn-link { --bs-btn-color: var(--brand-ink); --bs-btn-hover-color: var(--ink); text-decoration: none; }
.btn-ghost { --bs-btn-color: var(--text-2); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--inset); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--inset-2); --bs-btn-active-border-color: transparent; }
/* Square/round icon-only button */
.btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; width: 38px; height: 38px; border-radius: 50%; flex: none; }
.btn-icon.btn-sm { width: 32px; height: 32px; }
.btn-icon.btn-lg { width: 46px; height: 46px; }
.btn-group > .btn { border-radius: var(--r-pill); }
.btn-check:checked + .btn { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* Loading indicator (data-kt-indicator / data-tc-loading) */
.indicator-progress { display: none; }
[data-kt-indicator="on"] > .indicator-label, [data-tc-loading="on"] > .indicator-label { display: none; }
[data-kt-indicator="on"] > .indicator-progress, [data-tc-loading="on"] > .indicator-progress { display: inline-flex; align-items: center; gap: .4rem; }

/* ---------------------------------------------------------------------
   6. Cards & surfaces
   --------------------------------------------------------------------- */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-width: 0;
  --bs-card-border-radius: var(--r-xl);
  --bs-card-inner-border-radius: var(--r-xl);
  --bs-card-spacer-x: 1.6rem;
  --bs-card-spacer-y: 1.4rem;
  --bs-card-cap-padding-x: 1.6rem;
  --bs-card-cap-padding-y: 1.25rem;
  --bs-card-cap-bg: transparent;
  --bs-card-color: var(--text);
  box-shadow: none;
}
.card-header { border-bottom: 0; padding-bottom: 0; }
.card-header:has(> .card-title), .card-header:has(> .card-toolbar) {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
}
.card-title, .card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5 {
  font-family: var(--font-ui); font-size: 1.15rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink); margin: 0;
}
.card-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.card-title h3, .card-title h2 { font-size: inherit; }
.card-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.card-subtitle, .card-header .text-muted { font-size: .88rem; }
.card-footer { border-top: 0; background: transparent; padding-top: 0; }
.card .card { --bs-card-bg: var(--inset); --bs-card-border-radius: var(--r-lg); --bs-card-inner-border-radius: var(--r-lg); }

.tc-card { background: var(--surface); border-radius: var(--r-xl); padding: 1.4rem 1.6rem; }
.tc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.tc-card-title { font-size: 1.2rem; font-weight: 500; color: var(--ink); margin: 0; letter-spacing: -.01em; }
.tc-card-sub { font-size: .87rem; color: var(--muted); margin-top: 2px; }
.tc-card.is-brand, .card.is-brand { background: var(--brand-soft); --bs-card-bg: var(--brand-soft); color: var(--ink); }
.tc-card.is-lime, .card.is-lime { background: var(--lime-soft); --bs-card-bg: var(--lime-soft); color: var(--ink); }
.tc-card.is-amber, .card.is-amber { background: var(--amber-soft); --bs-card-bg: var(--amber-soft); color: var(--ink); }
.tc-card.is-inset, .card.is-inset { background: var(--inset); --bs-card-bg: var(--inset); }
.tc-card.is-ink, .card.is-ink { background: var(--ink); --bs-card-bg: var(--ink); color: var(--on-ink); }
.tc-card.is-outline { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tc-inset { background: var(--inset); border-radius: var(--r-md); padding: 12px 14px; }
.tc-divider { height: 1px; background: var(--line); margin: 1rem 0; }

/* KPI tiles */
.tc-kpi { background: var(--surface); border-radius: var(--r-lg); padding: 16px 18px; height: 100%; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.tc-kpi-label { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--text-2); }
.tc-kpi-value { font-family: var(--font-display); font-weight: 400; font-size: 2.15rem; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.tc-kpi-foot { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); flex-wrap: wrap; margin-top: auto; }
.tc-kpi.is-brand { background: var(--brand-soft); }
.tc-kpi.is-lime { background: var(--lime-soft); }
.tc-kpi.is-amber { background: var(--amber-soft); }
.tc-kpi.is-brand .tc-kpi-label, .tc-kpi.is-lime .tc-kpi-label, .tc-kpi.is-amber .tc-kpi-label { color: var(--ink-2); }
.tc-icon-chip {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--inset); color: var(--ink); font-size: 1rem;
}
.tc-icon-chip.is-lg { width: 42px; height: 42px; font-size: 1.25rem; }
.tc-icon-chip.is-brand { background: var(--brand-softer); color: var(--brand-ink); }
.tc-icon-chip.is-lime { background: var(--lime-softer); color: var(--lime-ink); }
.tc-icon-chip.is-amber { background: var(--amber-softer); color: var(--amber-ink); }
.tc-icon-chip.is-red { background: var(--red-softer); color: var(--red-ink); }
.tc-icon-chip.is-blue { background: var(--blue-softer); color: var(--blue-ink); }
.tc-icon-chip.is-white { background: rgba(255, 255, 255, .75); color: var(--ink); }
.tc-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 500; background: var(--lime-softer); color: var(--lime-ink); }
.tc-delta.is-down { background: var(--red-softer); color: var(--red-ink); }
.tc-delta.is-flat { background: var(--inset); color: var(--text-2); }
.tc-kpi.is-lime .tc-delta, .tc-kpi.is-brand .tc-delta { background: rgba(255, 255, 255, .7); }

/* Hero card ("19 clients in flow today") */
.tc-hero { background: var(--brand-soft); border-radius: var(--r-xl); padding: 20px 22px; color: var(--ink); position: relative; overflow: hidden; height: 100%; }
.tc-hero-eyebrow { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 500; }
.tc-hero-big { font-family: var(--font-display); font-weight: 400; font-size: 3rem; line-height: 1.05; letter-spacing: -.03em; margin: 10px 0 8px; }
.tc-hero-big .tc-word { display: inline-block; background: var(--surface); border-radius: var(--r-pill); padding: 0 .35em; color: var(--brand-ink); }
.tc-hero-meta { font-size: .88rem; color: var(--ink-2); }
.tc-floaty { position: absolute; padding: 6px 16px; border-radius: var(--r-pill); background: var(--surface); font-size: .93rem; box-shadow: 0 2px 0 rgba(0, 0, 0, .03); }
.tc-floaty.is-lime { background: var(--lime-soft); }
@media (max-width: 575.98px) { .tc-hero-big { font-size: 2.2rem; } .tc-floaty { display: none; } }

/* Segment cards (clickable filter stats) */
.tc-seg-card {
  display: flex; flex-direction: column; gap: 6px; height: 100%;
  background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .15s var(--ease), background .15s var(--ease);
}
.tc-seg-card:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.tc-seg-card.active { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tc-seg-card.is-brand { background: var(--brand-soft); }
.tc-seg-card.is-lime { background: var(--lime-soft); }
.tc-seg-card.is-amber { background: var(--amber-soft); }
.tc-seg-card .tc-kpi-value { font-size: 1.9rem; }

/* ---------------------------------------------------------------------
   7. Pills, badges, avatars
   --------------------------------------------------------------------- */
.badge, .tc-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: .3em .7em; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 500; line-height: 1.2; letter-spacing: 0;
  background: var(--inset); color: var(--text-2); white-space: nowrap;
}
.badge > i, .tc-pill > i { font-size: 1em; }
.tc-pill.is-brand, .badge.bg-primary, .badge.text-bg-primary, .badge.bg-info, .badge.text-bg-info { background: var(--brand-softer) !important; color: var(--brand-ink) !important; }
.tc-pill.is-success, .badge.bg-success, .badge.text-bg-success { background: var(--lime-softer) !important; color: var(--lime-ink) !important; }
.tc-pill.is-warning, .badge.bg-warning, .badge.text-bg-warning { background: var(--amber-soft) !important; color: var(--amber-ink) !important; }
.tc-pill.is-danger, .badge.bg-danger, .badge.text-bg-danger { background: var(--red-softer) !important; color: var(--red-ink) !important; }
.tc-pill.is-info { background: var(--blue-softer); color: var(--blue-ink); }
.tc-pill.is-neutral, .badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light { background: var(--inset) !important; color: var(--text-2) !important; }
.tc-pill.is-ink, .badge.bg-dark, .badge.text-bg-dark { background: var(--ink) !important; color: var(--on-ink) !important; }
.tc-pill.is-solid-brand { background: var(--brand-soft); color: var(--ink); }
.tc-pill.is-solid-lime { background: var(--lime-soft); color: var(--ink); }
.tc-pill.is-white { background: var(--surface); color: var(--ink); }
.tc-pill.is-outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.tc-pill.is-lg { font-size: .88rem; padding: .4em .9em; }
.tc-pill .tc-pill-dot, .tc-dot-i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.badge.rounded-pill { border-radius: var(--r-pill); }
.badge-circle { width: 22px; height: 22px; padding: 0; justify-content: center; border-radius: 50%; }

.tc-avatar {
  --s: 36px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; overflow: hidden;
  display: inline-grid; place-items: center; background: var(--brand-softer); color: var(--brand-ink);
  font-weight: 600; font-size: calc(var(--s) * .36); letter-spacing: .01em; text-transform: uppercase;
}
.tc-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tc-avatar.is-xs { --s: 24px; } .tc-avatar.is-sm { --s: 30px; } .tc-avatar.is-lg { --s: 48px; } .tc-avatar.is-xl { --s: 72px; }
.tc-avatar.is-lime { background: var(--lime-softer); color: var(--lime-ink); }
.tc-avatar.is-amber { background: var(--amber-softer); color: var(--amber-ink); }
.tc-avatar.is-red { background: var(--red-softer); color: var(--red-ink); }
.tc-avatar.is-blue { background: var(--blue-softer); color: var(--blue-ink); }
.tc-avatar.is-neutral { background: var(--inset); color: var(--text-2); }
.tc-avatar.is-square { border-radius: 12px; }
.tc-avatar-stack { display: inline-flex; }
.tc-avatar-stack .tc-avatar { box-shadow: 0 0 0 2px var(--surface); }
.tc-avatar-stack .tc-avatar + .tc-avatar { margin-left: -8px; }
.tc-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tc-person-name { font-weight: 500; color: var(--ink); line-height: 1.25; }
.tc-person-meta { font-size: .82rem; color: var(--muted); line-height: 1.25; }
a.tc-person:hover .tc-person-name { color: var(--brand-ink); }

/* Segmented progress (journey stage bars) */
.tc-progress-seg { display: flex; gap: 3px; width: 100%; max-width: 140px; }
.tc-progress-seg > span { flex: 1; height: 4px; border-radius: 4px; background: var(--inset-2); }
.tc-progress-seg > .is-done { background: var(--lime); }
.tc-progress-seg > .is-current { background: var(--brand); }
.tc-progress-seg > .is-warn { background: var(--amber); }
.tc-progress-seg > .is-bad { background: var(--red); }
.progress { --bs-progress-bg: var(--inset-2); --bs-progress-bar-bg: var(--brand); --bs-progress-height: 6px; --bs-progress-border-radius: var(--r-pill); }
.progress-bar.bg-success { background: var(--lime) !important; }
.progress-bar.bg-warning { background: var(--amber) !important; }
.progress-bar.bg-danger { background: var(--red) !important; }
.progress-bar.bg-primary, .progress-bar.bg-info { background: var(--brand) !important; }

/* ---------------------------------------------------------------------
   8. Controls: segmented, filter chips, tabs
   --------------------------------------------------------------------- */
.tc-segmented { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--r-pill); background: var(--inset); flex-wrap: wrap; }
.tc-segmented > a, .tc-segmented > button, .tc-segmented > label {
  border: 0; background: transparent; color: var(--text-2); font-weight: 500; font-size: .88rem;
  padding: 7px 16px; border-radius: var(--r-pill); cursor: pointer; line-height: 1.2; white-space: nowrap;
}
.tc-segmented > a:hover, .tc-segmented > button:hover, .tc-segmented > label:hover { color: var(--ink); }
.tc-segmented > .active, .tc-segmented > input:checked + label { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.tc-segmented > input { display: none; }
.tc-segmented.is-ink { background: var(--surface); }
.tc-segmented.is-ink > .active, .tc-segmented.is-ink > input:checked + label { background: var(--ink); color: var(--on-ink); }
.tc-segmented.is-surface { background: var(--surface); }
.tc-segmented.is-surface > .active { background: var(--inset); box-shadow: none; }

.tc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.tc-toolbar .tc-spacer { flex: 1; }
.tc-filter {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px;
  background: var(--surface); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line);
  font-size: .88rem; color: var(--muted); white-space: nowrap; margin: 0;
}
.tc-filter strong, .tc-filter b { color: var(--ink); font-weight: 500; }
.tc-filter select, .tc-filter input {
  border: 0; background: transparent; color: var(--ink); font-weight: 500; font-size: .88rem;
  padding: 0 18px 0 0; outline: 0; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 170px;
}
.tc-filter input[type="date"], .tc-filter input[type="month"] { padding-right: 0; cursor: text; }
.tc-filter:has(select)::after { content: "\e071"; font-family: "lucide"; position: absolute; right: 12px; pointer-events: none; color: var(--ink); font-size: .9rem; }
.tc-filter.is-inset { background: var(--inset); box-shadow: none; }
.tc-filter:focus-within { box-shadow: inset 0 0 0 1.5px var(--brand); }
.tc-search-field { position: relative; flex: 1 1 220px; max-width: 320px; }
.tc-search-field > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.tc-search-field .form-control { padding-left: 40px; border-radius: var(--r-pill); height: 40px; }

/* Bootstrap tabs/pills restyled as segmented controls */
.nav-tabs, .nav-pills, .nav-line-tabs {
  display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 0;
  border-radius: var(--r-pill); background: var(--inset); margin-bottom: 1rem;
}
.nav-tabs .nav-link, .nav-pills .nav-link, .nav-line-tabs .nav-link {
  border: 0 !important; border-radius: var(--r-pill) !important; margin: 0 !important;
  color: var(--text-2); font-weight: 500; font-size: .9rem; padding: 7px 16px; background: transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-tabs .nav-link:hover, .nav-pills .nav-link:hover { color: var(--ink); }
.nav-tabs .nav-link.active, .nav-pills .nav-link.active, .nav-line-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link { background: var(--surface) !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.card .nav-tabs, .card .nav-pills { background: var(--inset); }

/* Bulk action bar */
.tc-bulkbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--ink); color: var(--on-ink); border-radius: var(--r-md); padding: 8px 10px 8px 14px; margin-bottom: 10px;
}
.tc-bulkbar .tc-bulk-count { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9rem; margin-right: auto; }
.tc-bulkbar .btn { --bs-btn-color: var(--on-ink); --bs-btn-bg: rgba(255, 255, 255, .1); --bs-btn-border-color: transparent; --bs-btn-hover-bg: rgba(255, 255, 255, .2); --bs-btn-hover-color: var(--on-ink); --bs-btn-hover-border-color: transparent; --bs-btn-padding-y: .38rem; --bs-btn-font-size: .82rem; }
[data-bs-theme="dark"] .tc-bulkbar .btn { --bs-btn-bg: rgba(0, 0, 0, .08); --bs-btn-hover-bg: rgba(0, 0, 0, .15); }
.tc-bulkbar[hidden] { display: none; }

/* ---------------------------------------------------------------------
   9. Tables — rounded rows, no grid lines
   --------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--inset);
  --bs-table-active-bg: var(--brand-softer);
  border-collapse: separate; border-spacing: 0 4px; margin-top: -4px; margin-bottom: 0;
  font-size: .93rem; vertical-align: middle;
}
.table > :not(caption) > * > * { border-bottom-width: 0; padding: .8rem .85rem; box-shadow: none; background-color: transparent; }
.table > thead > tr > th, .table > thead > tr > td {
  font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  background: var(--inset); padding-top: .65rem; padding-bottom: .65rem; white-space: nowrap; border: 0;
}
.table > thead > tr > :first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.table > thead > tr > :last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.table > tbody > tr > * { transition: background-color .12s var(--ease); }
.table > tbody > tr > :first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.table > tbody > tr > :last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.table-hover > tbody > tr:hover > *, .table > tbody > tr:hover > * { background-color: var(--inset); --bs-table-bg-state: transparent; }
.table > tbody > tr.is-selected > *, .table > tbody > tr.table-active > *, .table > tbody > tr:has(.tc-row-check:checked) > * { background-color: var(--brand-softer); }
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-bg-type: transparent; }
.table > tfoot > tr > * { font-weight: 600; color: var(--ink); border-top: 1px solid var(--line); }
.table-bordered > :not(caption) > * > * { border-width: 0; }
.table-sm > :not(caption) > * > * { padding: .5rem .65rem; }
.table thead th a { color: inherit; }
.table .tc-num, .tc-num { font-variant-numeric: tabular-nums; }
.table td.text-end, .table th.text-end { text-align: right; }
.table-responsive { margin: 0 -4px; padding: 0 4px; }
.table-light, .thead-light, .table-dark { --bs-table-bg: transparent; --bs-table-color: inherit; }
.table-success > *, tr.table-success > * { background-color: var(--lime-softer) !important; }
.table-warning > *, tr.table-warning > * { background-color: var(--amber-softer) !important; }
.table-danger > *, tr.table-danger > * { background-color: var(--red-softer) !important; }
.table-info > *, tr.table-info > *, .table-primary > *, tr.table-primary > * { background-color: var(--brand-softer) !important; }
.tc-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; }

/* Key/value list (details pages) */
.tc-dl { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 10px 16px; margin: 0; }
.tc-dl dt { font-weight: 400; color: var(--muted); font-size: .9rem; }
.tc-dl dd { margin: 0; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .tc-dl { grid-template-columns: 1fr; gap: 2px; } .tc-dl dd { margin-bottom: 8px; } }
.tc-meta-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.tc-meta-row > i { font-size: 1.2rem; color: var(--text-2); margin-top: 2px; }
.tc-meta-row .tc-meta-label { font-size: .8rem; color: var(--muted); }
.tc-meta-row .tc-meta-value { font-weight: 500; color: var(--ink); }

/* List rows (Up next, activity feeds) */
.tc-list { display: grid; gap: 4px; }
.tc-list-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); color: var(--text); }
.tc-list-item:hover { background: var(--inset); color: var(--text); }
.tc-list-item.is-active { background: var(--brand-softer); }
.tc-list-time { width: 56px; flex: none; font-weight: 600; color: var(--ink); line-height: 1.2; }
.tc-list-time small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.tc-list-body { flex: 1; min-width: 0; }

/* Empty state */
.tc-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.tc-empty > i { font-size: 2.2rem; color: var(--faint); display: block; margin: 0 auto 10px; }
.tc-empty h4, .tc-empty h5 { color: var(--ink); font-weight: 500; font-size: 1.05rem; margin-bottom: 4px; }

/* ---------------------------------------------------------------------
   10. Banners & alerts
   --------------------------------------------------------------------- */
.alert {
  --bs-alert-border-radius: var(--r-md); --bs-alert-padding-x: 1.1rem; --bs-alert-padding-y: .9rem;
  border: 0; display: flex; align-items: center; gap: 12px; font-size: .93rem;
}
.alert > i:first-child { font-size: 1.3rem; flex: none; }
.alert-heading { font-size: 1rem; font-weight: 600; color: inherit; }
.alert-primary, .alert-info { --bs-alert-bg: var(--brand-softer); --bs-alert-color: var(--ink); --bs-alert-link-color: var(--brand-ink); }
.alert-success { --bs-alert-bg: var(--lime-softer); --bs-alert-color: var(--ink); --bs-alert-link-color: var(--lime-ink); }
.alert-warning { --bs-alert-bg: var(--amber-softer); --bs-alert-color: var(--ink); --bs-alert-link-color: var(--amber-ink); }
.alert-danger { --bs-alert-bg: var(--red-softer); --bs-alert-color: var(--ink); --bs-alert-link-color: var(--red-ink); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-bg: var(--inset); --bs-alert-color: var(--ink); }
.alert-success > i:first-child { color: var(--lime-ink); }
.alert-warning > i:first-child { color: var(--amber-ink); }
.alert-danger > i:first-child { color: var(--red-ink); }
.alert-info > i:first-child, .alert-primary > i:first-child { color: var(--brand-ink); }
.alert .btn-close { margin-left: auto; position: static; padding: .5rem; }
.alert-dismissible { padding-right: 1.1rem; }
.alert ul { margin-bottom: 0; }
.tc-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--amber-soft); color: var(--ink); flex-wrap: wrap; }
.tc-banner.is-lime { background: var(--lime-soft); }
.tc-banner.is-brand { background: var(--brand-soft); }
.tc-banner.is-red { background: var(--red-soft); }
.tc-banner .tc-banner-body { flex: 1; min-width: 200px; }
.tc-banner .tc-banner-title { font-weight: 600; }
.tc-banner .tc-banner-text { font-size: .86rem; color: var(--ink-2); }

/* ---------------------------------------------------------------------
   11. Forms
   --------------------------------------------------------------------- */
.form-label, .col-form-label, label.required, .tc-label { font-size: .86rem; font-weight: 500; color: var(--ink-2); margin-bottom: .4rem; }
.required::after, .form-label.required::after { content: " *"; color: var(--red); }
.form-control, .form-select {
  min-height: 44px; padding: .6rem .95rem; font-size: .95rem; color: var(--text);
  background-color: var(--inset); border: 1px solid transparent; border-radius: var(--r-sm);
  transition: background-color .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.form-control::placeholder { color: var(--muted); }
.form-control:hover, .form-select:hover { background-color: var(--inset-2); }
.form-control:focus, .form-select:focus { background-color: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); color: var(--text); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--inset); color: var(--muted); opacity: 1; }
.form-control-sm, .form-select-sm { min-height: 36px; padding: .4rem .75rem; font-size: .86rem; border-radius: 10px; }
.form-control-lg, .form-select-lg { min-height: 52px; font-size: 1.05rem; border-radius: var(--r-md); }
.form-control-solid, .form-select-solid { background-color: var(--inset); }
.form-control-plaintext { color: var(--ink); font-weight: 500; }
textarea.form-control { min-height: 96px; }
.form-select { background-position: right .9rem center; padding-right: 2.4rem; }
.form-control-color { min-height: 44px; padding: .35rem; width: 56px; }
.form-text { color: var(--muted); font-size: .82rem; }
.input-group > .form-control, .input-group > .form-select { min-height: 44px; }
.input-group-text { background: var(--inset-2); border: 0; color: var(--text-2); border-radius: var(--r-sm); font-size: .93rem; }
.input-group > :not(:first-child) { margin-left: 0 !important; }
.form-check { min-height: 1.5rem; }
.form-check-input { width: 1.15em; height: 1.15em; border: 1.5px solid var(--faint); background-color: var(--surface); margin-top: .18em; }
.form-check-input[type="checkbox"] { border-radius: 5px; }
.form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
[data-bs-theme="dark"] .form-check-input:checked { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23111' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-check-input:focus { box-shadow: 0 0 0 4px var(--brand-ring); border-color: var(--brand); }
.form-check-label { color: var(--text); font-size: .93rem; }
.form-switch .form-check-input { width: 2.4em; height: 1.35em; border-radius: 2em; margin-top: .08em; }
.form-switch .form-check-input:checked { background-color: var(--ink); border-color: var(--ink); }
.form-check-custom { display: flex; align-items: center; gap: .5rem; padding-left: 0; }
.form-check-custom .form-check-input { float: none; margin: 0; }
.form-range::-webkit-slider-thumb { background: var(--ink); }
.form-range::-webkit-slider-runnable-track { background: var(--inset-2); }
.was-validated .form-control:invalid, .form-control.is-invalid, .input-validation-error { border-color: var(--red) !important; background-color: var(--red-softer); }
.invalid-feedback, .field-validation-error, .text-danger.field-validation-error { color: var(--red-ink); font-size: .82rem; margin-top: .3rem; display: block; }
.validation-summary-errors ul { margin: 0; padding-left: 1rem; }
.validation-summary-errors { background: var(--red-softer); color: var(--red-ink); border-radius: var(--r-md); padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.validation-summary-valid { display: none; }
.form-floating > .form-control, .form-floating > .form-select { min-height: 56px; }
.tc-form-section { padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.tc-form-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.tc-form-section-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.tc-form-section-sub { font-size: .86rem; color: var(--muted); margin-bottom: 1rem; }
.tc-form-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 1.25rem; }

/* Selectable option cards (payment methods, plans, roles) */
.tc-option {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
  border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .15s var(--ease), background .15s var(--ease); margin: 0;
}
.tc-option:hover { box-shadow: inset 0 0 0 1px var(--faint); }
.tc-option:has(input:checked), .tc-option.active { background: var(--brand-softer); box-shadow: inset 0 0 0 1.5px var(--brand); }
.tc-option input[type="radio"], .tc-option input[type="checkbox"] { margin-left: auto; order: 9; accent-color: var(--brand); width: 18px; height: 18px; }
.tc-option-title { font-weight: 500; color: var(--ink); }
.tc-option-meta { font-size: .8rem; color: var(--muted); }
.tc-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.tc-choice { display: grid; place-items: center; text-align: center; padding: 12px 8px; border-radius: var(--r-md); background: var(--inset); cursor: pointer; border: 0; color: var(--ink); font-weight: 500; }
.tc-choice small { display: block; color: var(--muted); font-weight: 400; font-size: .78rem; }
.tc-choice:hover { background: var(--inset-2); }
.tc-choice.active, .tc-choice:has(input:checked) { background: var(--ink); color: var(--on-ink); }
.tc-choice.active small, .tc-choice:has(input:checked) small { color: var(--faint); }
.tc-choice input { display: none; }

/* Stepper */
.tc-stepper { display: flex; align-items: center; gap: 10px; background: var(--surface); border-radius: var(--r-pill); padding: 8px 12px; flex-wrap: wrap; }
.tc-step { display: flex; align-items: center; gap: 8px; color: var(--muted); font-weight: 500; font-size: .92rem; white-space: nowrap; }
.tc-step-num { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--inset); color: var(--text-2); font-size: .8rem; font-weight: 600; }
.tc-step.is-done { color: var(--ink); }
.tc-step.is-done .tc-step-num { background: var(--lime-soft); color: var(--lime-ink); }
.tc-step.is-current { color: var(--ink); }
.tc-step.is-current .tc-step-num { background: var(--ink); color: var(--on-ink); }
.tc-step-line { flex: 1; min-width: 24px; height: 2px; border-radius: 2px; background: var(--line); }
.tc-step-line.is-done { background: var(--lime); }

/* Summary / receipt card */
.tc-summary { background: var(--brand-soft); border-radius: var(--r-xl); padding: 14px; color: var(--ink); }
.tc-summary-inner { background: var(--surface); border-radius: var(--r-lg); padding: 14px 16px; }
.tc-summary-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; padding: 3px 0; color: var(--text-2); }
.tc-summary-row > :last-child { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.tc-summary-row.is-discount > :last-child { color: var(--lime-ink); }
.tc-summary-total { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 10px; }
.tc-summary-total strong { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.tc-summary .btn-primary { width: 100%; margin-top: 12px; --bs-btn-padding-y: .85rem; }

/* Line-item rows (POS, invoices) */
.tc-line { display: flex; align-items: center; gap: 12px; background: var(--inset); border-radius: var(--r-md); padding: 12px 14px; }
.tc-line + .tc-line { margin-top: 8px; }
.tc-line.is-plan { background: var(--brand-softer); }
.tc-line.is-discount { background: transparent; box-shadow: inset 0 0 0 1px var(--lime); border: 1px dashed transparent; }
.tc-line-body { flex: 1; min-width: 0; }
.tc-line-title { font-weight: 500; color: var(--ink); }
.tc-line-meta { font-size: .8rem; color: var(--muted); }
.tc-line-amount { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   12. Kanban board
   --------------------------------------------------------------------- */
.tc-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.tc-col { background: var(--surface); border-radius: var(--r-xl); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.tc-col-head { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 1.05rem; color: var(--ink); padding: 2px 4px 4px; }
.tc-col-head .tc-nav-count { margin-left: 0; }
.tc-col-head .tc-col-tools { margin-left: auto; display: flex; gap: 4px; }
.tc-kcard { background: var(--inset); border-radius: var(--r-lg); padding: 12px; display: grid; gap: 10px; }
.tc-kcard .btn { width: 100%; background: var(--surface); --bs-btn-bg: var(--surface); --bs-btn-color: var(--ink); --bs-btn-border-color: var(--surface); --bs-btn-hover-bg: var(--inset-2); }

/* ---------------------------------------------------------------------
   13. Overlays: modal, dropdown, tooltip, toast, offcanvas
   --------------------------------------------------------------------- */
.modal { --bs-modal-border-radius: var(--r-xl); --bs-modal-inner-border-radius: var(--r-xl); --bs-modal-border-width: 0; --bs-modal-bg: var(--surface); --bs-modal-padding: 1.5rem; --bs-modal-header-padding: 1.4rem 1.5rem .5rem; --bs-modal-header-border-width: 0; --bs-modal-footer-border-width: 0; --bs-modal-box-shadow: var(--shadow-pop); }
.modal-content { box-shadow: var(--shadow-pop); }
.modal-title { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; }
.modal-footer { padding: .5rem 1.5rem 1.4rem; gap: 8px; }
.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: #111113; --bs-backdrop-opacity: .35; }
.btn-close { border-radius: 50%; width: 32px; height: 32px; padding: 0; background-size: .75rem; background-color: var(--inset); opacity: 1; }
.btn-close:hover { background-color: var(--inset-2); }
[data-bs-theme="dark"] .btn-close { filter: invert(1); background-color: #ddd; }
.offcanvas { --bs-offcanvas-bg: var(--surface); --bs-offcanvas-border-width: 0; }
.offcanvas.offcanvas-end { border-radius: var(--r-xl) 0 0 var(--r-xl); }

.dropdown-menu {
  --bs-dropdown-bg: var(--surface); --bs-dropdown-border-width: 0; --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-link-color: var(--text); --bs-dropdown-link-hover-bg: var(--inset); --bs-dropdown-link-hover-color: var(--ink);
  --bs-dropdown-link-active-bg: var(--brand-softer); --bs-dropdown-link-active-color: var(--ink);
  --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-item-padding-y: .5rem; --bs-dropdown-padding-x: .35rem; --bs-dropdown-padding-y: .35rem;
  --bs-dropdown-font-size: .92rem; --bs-dropdown-divider-bg: var(--line); --bs-dropdown-header-color: var(--muted);
  box-shadow: var(--shadow-pop); min-width: 12rem;
}
.dropdown-item { border-radius: 10px; display: flex; align-items: center; gap: .55rem; }
.dropdown-item > i { font-size: 1.05rem; color: var(--text-2); }
.dropdown-item.text-danger > i { color: inherit; }
.dropdown-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
.dropdown-toggle::after { display: none; }
.tooltip { --bs-tooltip-bg: var(--ink); --bs-tooltip-color: var(--on-ink); --bs-tooltip-border-radius: 8px; --bs-tooltip-font-size: .8rem; }
.popover { --bs-popover-border-width: 0; --bs-popover-border-radius: var(--r-md); --bs-popover-box-shadow: var(--shadow-pop); box-shadow: var(--shadow-pop); }
.toast { --bs-toast-border-width: 0; --bs-toast-border-radius: var(--r-md); --bs-toast-box-shadow: var(--shadow-pop); }

/* Pagination — round, ink active */
.pagination { --bs-pagination-border-width: 0; --bs-pagination-color: var(--text-2); --bs-pagination-bg: transparent; --bs-pagination-hover-bg: var(--inset); --bs-pagination-hover-color: var(--ink); --bs-pagination-active-bg: var(--ink); --bs-pagination-active-color: var(--on-ink); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--faint); --bs-pagination-focus-box-shadow: 0 0 0 4px var(--brand-ring); gap: 4px; margin: 0; flex-wrap: wrap; }
.page-link { min-width: 36px; height: 36px; border-radius: 50% !important; display: grid; place-items: center; padding: 0 .5rem; font-weight: 500; font-size: .9rem; }
.page-item:first-child .page-link, .page-item:last-child .page-link { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tc-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 14px; font-size: .86rem; color: var(--muted); }

.breadcrumb { --bs-breadcrumb-divider-color: var(--faint); --bs-breadcrumb-item-active-color: var(--muted); font-size: .85rem; margin: 0; }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--line); --bs-list-group-border-radius: var(--r-md); --bs-list-group-action-hover-bg: var(--inset); --bs-list-group-active-bg: var(--brand-softer); --bs-list-group-active-color: var(--ink); --bs-list-group-active-border-color: var(--line); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-border-radius: var(--r-md); --bs-accordion-inner-border-radius: var(--r-md); --bs-accordion-active-bg: var(--inset); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-box-shadow: 0 0 0 4px var(--brand-ring); }

/* ---------------------------------------------------------------------
   14. Colour utilities
   --------------------------------------------------------------------- */
.text-brand, .text-primary { color: var(--brand-ink) !important; }
.text-success { color: var(--lime-ink) !important; }
.text-warning { color: var(--amber-ink) !important; }
.text-danger { color: var(--red-ink) !important; }
.text-info { color: var(--blue-ink) !important; }
.text-ink, .text-dark, .text-body-emphasis { color: var(--ink) !important; }
.text-white { color: #fff !important; }
.text-faint { color: var(--faint) !important; }
.bg-primary { background-color: var(--brand) !important; }
.bg-success { background-color: var(--lime) !important; }
.bg-warning { background-color: var(--amber) !important; }
.bg-danger { background-color: var(--red) !important; }
.bg-info { background-color: var(--blue) !important; }
.bg-dark { background-color: var(--ink) !important; }
.bg-light, .bg-inset, .bg-body-tertiary, .bg-body-secondary { background-color: var(--inset) !important; }
.bg-white, .bg-surface, .bg-body { background-color: var(--surface) !important; }
.bg-canvas { background-color: var(--canvas) !important; }
.bg-brand-soft { background-color: var(--brand-soft) !important; }
.bg-brand-softer { background-color: var(--brand-softer) !important; }
.bg-lime-soft { background-color: var(--lime-soft) !important; }
.bg-lime-softer { background-color: var(--lime-softer) !important; }
.bg-amber-soft { background-color: var(--amber-soft) !important; }
.bg-amber-softer { background-color: var(--amber-softer) !important; }
.bg-red-soft { background-color: var(--red-soft) !important; }
.bg-red-softer { background-color: var(--red-softer) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--line) !important; }
.border-dashed { border-style: dashed !important; }
.rounded, .rounded-2 { border-radius: var(--r-sm) !important; }
.rounded-3 { border-radius: var(--r-md) !important; }
.rounded-4 { border-radius: var(--r-lg) !important; }
.rounded-5 { border-radius: var(--r-xl) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }
.tc-display { font-family: var(--font-display) !important; font-weight: 400; letter-spacing: -.02em; }
.tc-eyebrow { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.tc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cursor-pointer { cursor: pointer; }
.fw-bolder { font-weight: 600 !important; }
.fw-bold { font-weight: 600 !important; }
.fw-semibold { font-weight: 500 !important; }
.fw-normal { font-weight: 400 !important; }
.lh-1 { line-height: 1 !important; }
.flex-stack { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.flex-root { flex: 1; }
.flex-column-fluid, .flex-row-fluid { flex: 1 0 auto; }
.min-w-0 { min-width: 0 !important; }

/* ---------------------------------------------------------------------
   15. Third-party plugin themes
   --------------------------------------------------------------------- */
/* Select2 */
html .select2-container { width: 100% !important; }
html .select2-container--default .select2-selection--single,
html .select2-container--default .select2-selection--multiple {
  min-height: 44px; border: 1px solid transparent; border-radius: var(--r-sm); background: var(--inset);
  display: flex; align-items: center; padding: 4px 8px;
}
html .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text); line-height: 1.4; padding-left: 6px; padding-right: 28px; }
html .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
html .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; right: 8px; }
html .select2-container--default.select2-container--focus .select2-selection--multiple,
html .select2-container--default.select2-container--open .select2-selection--single { background: var(--surface); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-ring); }
html .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--brand-softer); color: var(--brand-ink); border: 0; border-radius: var(--r-pill); padding: 2px 10px 2px 22px; margin: 2px; }
html .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { border: 0; color: var(--brand-ink); left: 4px; top: 1px; }
html .select2-dropdown { border: 0; border-radius: var(--r-md) !important; box-shadow: var(--shadow-pop); overflow: hidden; background: var(--surface); padding: 4px; z-index: 1060; }
html .select2-search--dropdown { padding: 6px; }
html .select2-container--default .select2-search--dropdown .select2-search__field { border: 0; background: var(--inset); border-radius: 10px; padding: 8px 10px; outline: 0; color: var(--text); }
html .select2-results__option { border-radius: 10px; padding: 8px 10px; font-size: .92rem; color: var(--text); }
html .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { background: var(--inset); color: var(--ink); }
html .select2-container--default .select2-results__option--selected { background: var(--brand-softer); color: var(--ink); }
html .select2-container--default .select2-results__group { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; }
html .modal .select2-container { z-index: auto; }

/* Flatpickr */
html .flatpickr-calendar { border-radius: var(--r-md); box-shadow: var(--shadow-pop); border: 0; background: var(--surface); font-family: var(--font-ui); }
html .flatpickr-calendar::before,html .flatpickr-calendar::after { display: none; }
html .flatpickr-day { border-radius: 10px; color: var(--text); }
html .flatpickr-day:hover { background: var(--inset); border-color: var(--inset); }
html .flatpickr-day.today { border-color: var(--brand); }
html .flatpickr-day.selected,html .flatpickr-day.startRange,html .flatpickr-day.endRange { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
html .flatpickr-months .flatpickr-month,html .flatpickr-current-month .flatpickr-monthDropdown-months,html span.flatpickr-weekday { color: var(--ink); fill: var(--ink); background: transparent; }

/* SweetAlert2 */
.swal2-popup { border-radius: var(--r-xl) !important; padding: 1.75rem 1.5rem 1.5rem !important; background: var(--surface) !important; color: var(--text) !important; font-family: var(--font-ui) !important; }
.swal2-title { font-family: var(--font-display) !important; font-weight: 400 !important; color: var(--ink) !important; font-size: 1.6rem !important; letter-spacing: -.02em; }
.swal2-html-container { color: var(--text-2) !important; font-size: .98rem !important; }
.swal2-actions { gap: 8px; }
.swal2-icon { transform: scale(.8); margin-top: .5rem !important; margin-bottom: .25rem !important; }
.swal2-icon.swal2-success { border-color: var(--lime) !important; color: var(--lime) !important; }
.swal2-icon.swal2-success [class^="swal2-success-line"] { background-color: var(--lime) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: color-mix(in srgb, var(--lime) 30%, transparent) !important; }
.swal2-icon.swal2-error { border-color: var(--red) !important; color: var(--red) !important; }
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--red) !important; }
.swal2-icon.swal2-warning { border-color: var(--amber) !important; color: var(--amber) !important; }
.swal2-icon.swal2-info, .swal2-icon.swal2-question { border-color: var(--brand) !important; color: var(--brand) !important; }
.swal2-input, .swal2-textarea, .swal2-select { border-radius: var(--r-sm) !important; background: var(--inset) !important; border: 1px solid transparent !important; box-shadow: none !important; color: var(--text) !important; }
.swal2-container.swal2-backdrop-show { background: rgba(17, 17, 19, .35) !important; }

/* Toastr */
#toast-container > div { border-radius: var(--r-md) !important; box-shadow: var(--shadow-pop) !important; opacity: 1 !important; padding: 14px 16px 14px 48px !important; background-position: 16px center !important; font-family: var(--font-ui); }
#toast-container > .toast-success { background-color: var(--ink) !important; }
#toast-container > .toast-error { background-color: var(--red-ink) !important; }
#toast-container > .toast-info { background-color: var(--brand-ink) !important; }
#toast-container > .toast-warning { background-color: var(--amber-ink) !important; }

/* FullCalendar */
.fc {
  --fc-border-color: var(--line); --fc-page-bg-color: var(--surface); --fc-neutral-bg-color: var(--inset);
  --fc-today-bg-color: var(--brand-softer); --fc-now-indicator-color: var(--red);
  --fc-event-bg-color: var(--brand-soft); --fc-event-border-color: var(--brand-soft); --fc-event-text-color: var(--ink);
  --fc-button-bg-color: var(--inset); --fc-button-border-color: transparent; --fc-button-text-color: var(--ink);
  --fc-button-hover-bg-color: var(--inset-2); --fc-button-hover-border-color: transparent;
  --fc-button-active-bg-color: var(--ink); --fc-button-active-border-color: var(--ink);
  font-size: .88rem;
}
.fc .fc-toolbar-title { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -.02em; color: var(--ink); }
.fc .fc-button { border-radius: var(--r-pill) !important; padding: .45rem .95rem; font-weight: 500; font-size: .86rem; text-transform: capitalize; box-shadow: none !important; }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: var(--on-ink); }
.fc .fc-button-group { gap: 2px; background: var(--inset); border-radius: var(--r-pill); padding: 3px; }
.fc .fc-button-group > .fc-button { background: transparent; }
.fc .fc-button-group > .fc-button.fc-button-active { background: var(--ink); }
.fc-theme-standard .fc-scrollgrid { border: 0; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--line); }
.fc .fc-col-header-cell-cushion { color: var(--text-2); font-weight: 500; padding: 8px 4px; }
.fc .fc-daygrid-day-number, .fc .fc-timegrid-slot-label-cushion { color: var(--muted); font-size: .8rem; }
.fc .fc-timegrid-slot { height: 2.6em; }
.fc-event, .fc .fc-daygrid-event { border-radius: 10px !important; border: 0 !important; border-left: 3px solid var(--brand) !important; padding: 2px 6px; font-weight: 500; }
.fc-event .fc-event-title { font-weight: 600; }
.fc-event.tc-ev-lime { background: var(--lime-soft) !important; border-left-color: var(--lime) !important; }
.fc-event.tc-ev-amber { background: var(--amber-soft) !important; border-left-color: var(--amber) !important; }
.fc-event.tc-ev-red { background: var(--red-soft) !important; border-left-color: var(--red) !important; }
.fc-event.tc-ev-neutral { background: var(--inset) !important; border-left-color: var(--faint) !important; color: var(--muted) !important; }
.fc-event.tc-ev-dashed { background: var(--surface) !important; outline: 1.5px dashed var(--faint); outline-offset: -1.5px; }
.fc .fc-highlight { background: var(--brand-softer); }
.fc .fc-list-event:hover td { background: var(--inset); }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { background: var(--ink); color: var(--on-ink); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; margin: 4px; padding: 0; }

/* Chart.js canvas wrappers */
.tc-chart { position: relative; width: 100%; }

/* ---------------------------------------------------------------------
   16. Auth & public pages
   --------------------------------------------------------------------- */
.tc-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gutter); padding: var(--gutter); background: var(--canvas); }
.tc-auth-aside { background: var(--brand-soft); border-radius: var(--r-xl); padding: 36px; display: flex; flex-direction: column; position: relative; overflow: hidden; color: var(--ink); }
.tc-auth-aside::before { content: ''; position: absolute; inset: 0; background: url('../img/auth-spa.jpg') center / cover no-repeat; opacity: .15; pointer-events: none; }
.tc-auth-aside > * { position: relative; z-index: 1; }
.tc-auth-aside .tc-brand img { height: 72px; max-width: 320px; }
.tc-auth-aside .tc-hero-big { font-size: 3.4rem; max-width: 520px; margin-top: auto; }
.tc-auth-aside p { color: var(--ink-2); max-width: 440px; font-size: 1.05rem; }
.tc-auth-features { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tc-auth-main { display: flex; align-items: center; justify-content: center; padding: 24px; }
.tc-auth-card { width: 100%; max-width: 420px; background: var(--surface); border-radius: var(--r-xl); padding: 32px; }
.tc-auth-card .tc-title { font-size: 2rem; }
@media (max-width: 991.98px) { .tc-auth { grid-template-columns: 1fr; } .tc-auth-aside { display: none; } .tc-auth-main { padding: 8px 0; min-height: calc(100vh - 32px); } .tc-auth-card { padding: 24px 20px; } }

.tc-public { min-height: 100vh; background: var(--canvas); padding: var(--gutter); }
.tc-public-bar { max-width: 1080px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border-radius: var(--r-pill); padding: 8px 10px 8px 18px; }
.tc-public-main { max-width: 1080px; margin: 0 auto; }
.tc-public-main.is-narrow { max-width: 760px; }
.tc-public-foot { max-width: 1080px; margin: 24px auto 0; color: var(--muted); font-size: .82rem; text-align: center; }

/* ---------------------------------------------------------------------
   17. Compatibility: Metronic-era markup the views may still emit.
   Styled with Flow tokens so legacy markup inherits the new look.
   (No Metronic CSS/JS is loaded.)
   --------------------------------------------------------------------- */
.text-gray-900, .text-gray-800 { color: var(--ink) !important; }
.text-gray-700 { color: var(--text-2) !important; }
.text-gray-600, .text-gray-500 { color: var(--muted) !important; }
.text-gray-400, .text-gray-300 { color: var(--faint) !important; }
.text-hover-primary:hover, a.text-hover-primary:hover { color: var(--brand-ink) !important; }
.bg-light-primary, .bg-light-info { background-color: var(--brand-softer) !important; }
.bg-light-success { background-color: var(--lime-softer) !important; }
.bg-light-warning { background-color: var(--amber-softer) !important; }
.bg-light-danger { background-color: var(--red-softer) !important; }
.bg-light-dark, .bg-light-secondary { background-color: var(--inset) !important; }
.badge-light-primary, .badge-light-info, .badge-primary { background: var(--brand-softer); color: var(--brand-ink); }
.badge-light-success, .badge-success { background: var(--lime-softer); color: var(--lime-ink); }
.badge-light-warning, .badge-warning { background: var(--amber-soft); color: var(--amber-ink); }
.badge-light-danger, .badge-danger { background: var(--red-softer); color: var(--red-ink); }
.badge-light, .badge-light-dark, .badge-light-secondary, .badge-secondary { background: var(--inset); color: var(--text-2); }
.badge-dark { background: var(--ink); color: var(--on-ink); }
.btn-light-primary, .btn-light-info { --bs-btn-color: var(--brand-ink); --bs-btn-bg: var(--brand-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--brand-soft); --bs-btn-hover-color: var(--ink); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--brand-soft); }
.btn-light-success { --bs-btn-color: var(--lime-ink); --bs-btn-bg: var(--lime-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--lime-soft); --bs-btn-hover-color: var(--lime-ink); --bs-btn-hover-border-color: transparent; }
.btn-light-danger { --bs-btn-color: var(--red-ink); --bs-btn-bg: var(--red-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--red-soft); --bs-btn-hover-color: var(--red-ink); --bs-btn-hover-border-color: transparent; }
.btn-light-warning { --bs-btn-color: var(--amber-ink); --bs-btn-bg: var(--amber-softer); --bs-btn-border-color: transparent; --bs-btn-hover-bg: var(--amber-soft); --bs-btn-hover-color: var(--amber-ink); --bs-btn-hover-border-color: transparent; }
.btn-flex { display: inline-flex; align-items: center; }
.btn-active-light-primary:hover, .btn-active-color-primary:hover, .btn-color-gray-700:hover { color: var(--ink) !important; background: var(--inset) !important; }
.btn-color-gray-700, .btn-color-gray-600, .btn-color-muted { color: var(--text-2) !important; }
.btn.btn-icon > i { margin: 0; }
.symbol { display: inline-block; flex-shrink: 0; position: relative; border-radius: var(--r-sm); }
.symbol > img { width: 50px; height: 50px; object-fit: cover; border-radius: inherit; display: block; }
.symbol .symbol-label { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--brand-ink); background: var(--brand-softer); border-radius: inherit; background-size: cover; background-position: center; }
.symbol.symbol-circle, .symbol.symbol-circle > img, .symbol.symbol-circle .symbol-label { border-radius: 50%; }
.symbol-20px > img, .symbol-20px .symbol-label { width: 20px; height: 20px; }
.symbol-25px > img, .symbol-25px .symbol-label { width: 25px; height: 25px; }
.symbol-30px > img, .symbol-30px .symbol-label { width: 30px; height: 30px; font-size: .8rem; }
.symbol-35px > img, .symbol-35px .symbol-label { width: 35px; height: 35px; font-size: .85rem; }
.symbol-40px > img, .symbol-40px .symbol-label { width: 40px; height: 40px; }
.symbol-45px > img, .symbol-45px .symbol-label { width: 45px; height: 45px; }
.symbol-50px > img, .symbol-50px .symbol-label { width: 50px; height: 50px; }
.symbol-60px > img, .symbol-60px .symbol-label { width: 60px; height: 60px; }
.symbol-70px > img, .symbol-70px .symbol-label { width: 70px; height: 70px; }
.symbol-75px > img, .symbol-75px .symbol-label { width: 75px; height: 75px; }
.symbol-100px > img, .symbol-100px .symbol-label { width: 100px; height: 100px; }
.symbol-125px > img, .symbol-125px .symbol-label { width: 125px; height: 125px; }
.symbol-150px > img, .symbol-150px .symbol-label { width: 150px; height: 150px; }
.separator { display: block; height: 0; border-bottom: 1px solid var(--line); }
.separator.separator-dashed { border-bottom-style: dashed; }
.card-flush { --bs-card-bg: var(--surface); }
.table-row-dashed > tbody > tr > *, .table-row-bordered > tbody > tr > * { border: 0 !important; }
.gs-0 > :not(caption) > * > :first-child { padding-left: .85rem; }
.gs-0 > :not(caption) > * > :last-child { padding-right: .85rem; }
.form-check-solid .form-check-input { background-color: var(--inset); }
.bullet { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.svg-icon { display: inline-flex; }
.svg-icon svg { width: 1.2em; height: 1.2em; }
/* data-kt-menu dropdowns (handled by thrive.js) */
.menu-sub-dropdown, [data-kt-menu="true"].menu-sub, .menu.menu-sub-dropdown {
  display: none; position: fixed; z-index: 1070; min-width: 12rem; padding: .35rem;
  background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-pop);
}
.menu-sub-dropdown.show, [data-kt-menu="true"].menu-sub.show { display: block; }
.menu-sub-dropdown .menu-item { display: block; padding: 0 !important; }
.menu-sub-dropdown .menu-link { display: flex; align-items: center; gap: .55rem; padding: .5rem .75rem !important; border-radius: 10px; color: var(--text); font-size: .92rem; font-weight: 500; cursor: pointer; }
.menu-sub-dropdown .menu-link:hover { background: var(--inset); color: var(--ink); }
.menu-sub-dropdown .menu-content { padding: .5rem .75rem; }

/* ---------------------------------------------------------------------
   18. Print
   --------------------------------------------------------------------- */
@media print {
  body { background: #fff !important; }
  .tc-sidebar, .tc-topbar .tc-top-actions, .tc-mobile-bar, .tc-footer, .tc-scrim, .no-print, .btn { display: none !important; }
  .tc-app { display: block; padding: 0; }
  .card, .tc-card { box-shadow: none !important; }
}

/* Tenant logo: swap to the dark-mode (white) variant when one is uploaded */
.tc-logo-dark { display: none !important; }
[data-bs-theme="dark"] .tc-logo-dark { display: inline-block !important; }
[data-bs-theme="dark"] .tc-logo-light { display: none !important; }

/* Sidebar fit: the full admin menu is taller than most laptop screens */
.tc-nav { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.tc-nav::-webkit-scrollbar { width: 6px; }
.tc-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.tc-nav.has-more-below {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 48px), transparent);
}
/* Give the menu priority over the Today card when space runs out (toggled in thrive.js) */
.tc-sidebar.is-crowded .tc-assist { display: none; }
@media (min-width: 992px) and (max-height: 1100px) {
  .tc-nav-link, .tc-nav summary { padding-top: 7px; padding-bottom: 7px; }
  .tc-nav-label { padding: 10px 10px 4px; }
  .tc-workspace { margin-bottom: 12px; }
  .tc-brand { padding-bottom: 12px; }
}

/* Platform plan cards (pricing, billing, upgrade) */
.tc-plan { border: 1px solid transparent; }
.tc-plan.is-featured { border-color: var(--ink); }
.tc-plan.is-highlight { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tc-plan-list li { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; font-size: .92rem; color: var(--text-2); }
.tc-plan-list li > i { color: var(--ink); margin-top: 3px; flex: none; }
.tc-plan-list li.is-highlight { color: var(--ink); font-weight: 600; }
.tc-plan-compare > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.tc-plan-compare > summary::after { content: "+"; font-size: 1.3rem; color: var(--muted); }
.tc-plan-compare[open] > summary::after { content: "–"; }
.tc-plan-compare tr.is-highlight td { background: var(--brand-softer, var(--brand-soft)); }
.tc-usage-bar { height: 8px; border-radius: 4px; background: var(--inset); overflow: hidden; }
.tc-usage-bar > span { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.tc-usage-bar.is-warn > span { background: var(--bs-warning, #e0a100); }
.tc-usage-bar.is-full > span { background: var(--bs-danger, #d33); }
.tc-plan-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
.tc-plan-option:has(input:checked) { border-color: var(--ink); background: var(--inset); }
.tc-plan-option > input { margin-top: 4px; accent-color: var(--ink); }
.tc-plan-option-body { flex: 1; min-width: 0; }