/*
 * KleenPoint Global Design System Override
 * Layered on top of NiceAdmin — do not edit style.css directly.
 * Inter font · Primary #1a6cf6 · Consistent radius/shadow/spacing
 */

/* ===== FONT IMPORT ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --cs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --cs-primary:       #1a6cf6;
  --cs-primary-dark:  #1255d4;
  --cs-primary-light: #e8f0fe;
  --cs-primary-rgb:   26, 108, 246;

  --cs-dark:    #0f172a;
  --cs-dark-2:  #1e293b;
  --cs-gray:    #64748b;
  --cs-gray-lt: #f1f5f9;
  --cs-border:  #e2e8f0;
  --cs-success: #10b981;
  --cs-warning: #f59e0b;
  --cs-danger:  #ef4444;

  /* Safe fallbacks keep authenticated layouts readable if the workspace
     theme variables have not been injected yet. */
  --cs-page-bg: #f5f8fc;
  --cs-surface: #ffffff;
  --cs-surface-alt: #f8fafc;
  --cs-sidebar-bg: #102a56;
  --cs-sidebar-text: #e8f0ff;
  --cs-sidebar-muted: #9db4d8;
  --cs-sidebar-border: #274d88;
  --cs-sidebar-active-bg: #1e4f9c;
  --cs-sidebar-hover-bg: #1b3765;
  --cs-sidebar-active-text: #ffffff;

  --cs-radius-sm:  6px;
  --cs-radius:     10px;
  --cs-radius-lg:  14px;
  --cs-radius-xl:  18px;

  --cs-shadow-sm:  0 1px 4px rgba(15,23,42,0.06);
  --cs-shadow:     0 4px 16px rgba(15,23,42,0.08);
  --cs-shadow-lg:  0 12px 40px rgba(15,23,42,0.12);
}

/* ===== GLOBAL FONT ===== */
/* NOTE: Do NOT include * here — it breaks Bootstrap Icons & Font Awesome glyph rendering */
body,
p, span, div, li, a,
.sidebar,
.sidebar-nav .nav-link,
.sidebar-nav .nav-heading,
.card,
.card-title,
table,
th, td,
input, select, textarea, button,
label, .form-label,
.dropdown-menu,
.pagetitle h1,
.pagetitle .breadcrumb,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cs-font) !important;
}

/* Icon font families must never be overridden.
   Bootstrap Icons and Font Awesome both set font-family with !important
   in their own CSS — as long as we do NOT target i, .bi, .fas, etc. here,
   their rules win naturally. No override needed. */

body {
  background: var(--cs-page-bg) !important;
  color: var(--cs-dark) !important;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

/* The content area is its own painted surface in NiceAdmin, so inherit the
   workspace canvas explicitly instead of relying on body to show through. */
#main,
#footer {
  background: var(--cs-page-bg) !important;
}

/* ===== LINKS & PRIMARY COLOUR ===== */
a { color: var(--cs-primary); }
a:hover { color: var(--cs-primary-dark); }

/* Replace NiceAdmin's #4154f1 with KleenPoint #1a6cf6 everywhere it's used
   by the theme for backgrounds and active states */
.back-to-top,
.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  color: var(--cs-primary) !important;
}

.sidebar {
  background: var(--cs-sidebar-bg, #102a56) !important;
  border-right: 1px solid var(--cs-sidebar-border, #274d88) !important;
}

.sidebar .nav-link,
.sidebar-nav .nav-heading,
.sidebar .nav-content a { color: var(--cs-sidebar-text, #e8f0ff) !important; }

.sidebar-nav .nav-heading { color: var(--cs-sidebar-muted, #9db4d8) !important; }

.sidebar-nav .nav-link,
.sidebar-nav .nav-link.collapsed {
  background: transparent !important;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  color: var(--cs-sidebar-active-text, #fff) !important;
}

.sidebar .nav-link:hover {
  background: var(--cs-sidebar-hover-bg, #1b3765) !important;
}

.sidebar .nav-link.active {
  background: var(--cs-sidebar-active-bg, #1e4f9c) !important;
  color: var(--cs-sidebar-active-text, #fff) !important;
  font-weight: 600 !important;
}

.sidebar .nav-link i,
.sidebar .nav-content a i { color: var(--cs-sidebar-muted, #9db4d8) !important; }

.sidebar .nav-link.active i,
.sidebar .nav-link:hover i,
.sidebar .nav-content a:hover i,
.sidebar .nav-content a.active i { color: var(--cs-primary-light) !important; }

.sidebar-nav .nav-link { border-radius: var(--cs-radius-sm) !important; }

.sidebar .nav-content a:hover,
.sidebar .nav-content a.active {
  color: var(--cs-primary-light) !important;
  border-radius: var(--cs-radius-sm);
}

.sidebar .nav-content a:hover {
  background: var(--cs-sidebar-hover-bg, #1b3765) !important;
}

.sidebar .nav-content a.active {
  background: rgba(var(--cs-primary-rgb), 0.18) !important;
}

/* ===== HEADER ===== */
.header {
  background: var(--cs-surface) !important;
  box-shadow: var(--cs-shadow-sm) !important;
  border-bottom: 1px solid var(--cs-border) !important;
  border-top: 3px solid var(--cs-primary) !important;
}

/* ===== PAGE TITLE ===== */
.pagetitle h1 {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--cs-dark) !important;
  letter-spacing: -0.3px !important;
}

.breadcrumb-item.active { color: var(--cs-gray) !important; }
.breadcrumb-item a { color: var(--cs-primary) !important; }

/* ===== CARDS ===== */
.card {
  background: var(--cs-surface) !important;
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-lg) !important;
  box-shadow: var(--cs-shadow-sm) !important;
  transition: box-shadow 0.2s, transform 0.2s !important;
}

.card:hover { box-shadow: var(--cs-shadow) !important; }

.card-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--cs-dark) !important;
  letter-spacing: -0.2px !important;
}

.card-title span {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--cs-gray) !important;
}

/* Info cards (dashboard stats) */
.info-card {
  background: var(--cs-tile-gradient) !important;
  border-color: var(--cs-theme-border) !important;
  border-radius: var(--cs-radius-lg) !important;
}

.info-card h6 {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.5px !important;
  color: var(--cs-dark) !important;
}

.info-card .card-icon {
  border-radius: 12px !important;
  width: 48px !important;
  height: 48px !important;
}

/* ===== PRIVATE STAFF STICKY NOTES ===== */
.cs-sticky-notes {
  background: var(--cs-surface);
  border: 1px solid var(--cs-theme-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
  padding: 1rem;
}

.cs-sticky-notes-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .9rem;
}

.cs-sticky-notes-kicker {
  display: block;
  color: var(--cs-gray);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cs-sticky-notes-kicker i { color: var(--cs-primary); margin-right: .2rem; }

.cs-sticky-notes h2 {
  margin: .15rem 0 0;
  color: var(--cs-dark);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.cs-sticky-add {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 0;
  border-radius: var(--cs-radius-sm);
  background: var(--cs-primary);
  color: #fff;
  font-size: .76rem;
  font-weight: 700;
  padding: .42rem .62rem;
  white-space: nowrap;
}

.cs-sticky-add:hover { background: var(--cs-primary-dark); }

.cs-sticky-notes-list {
  display: grid;
  gap: .7rem;
  max-height: 520px;
  overflow-y: auto;
  padding-right: .15rem;
}

.cs-sticky-note {
  border-radius: 11px;
  color: #25313a;
  min-height: 118px;
  padding: .75rem .8rem;
  position: relative;
  box-shadow: 0 3px 10px rgba(15,23,42,.08);
}

.cs-sticky-note-yellow { background: #fff3b8; }
.cs-sticky-note-peach { background: #ffe0c4; }
.cs-sticky-note-mint { background: #d9f3dc; }
.cs-sticky-note-sky { background: #d9efff; }
.cs-sticky-note-lilac { background: #e9ddff; }

.cs-sticky-note-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 18px;
}

.cs-sticky-pin { color: rgba(37,49,58,.72); font-size: .82rem; }

.cs-sticky-note-actions { display: inline-flex; gap: .55rem; }
.cs-sticky-note-actions .btn {
  color: rgba(37,49,58,.7) !important;
  font-size: .86rem;
  line-height: 1;
  min-width: 0;
  padding: 0 !important;
}
.cs-sticky-note-actions .btn:hover { color: #182129 !important; transform: none !important; }

.cs-sticky-note h3 {
  color: #1f2933;
  font-size: .88rem;
  font-weight: 800;
  line-height: 1.3;
  margin: .25rem 0 .3rem;
}

.cs-sticky-note p {
  color: #34424c;
  font-size: .79rem;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}

.cs-sticky-note time {
  color: rgba(37,49,58,.62);
  display: block;
  font-size: .67rem;
  font-weight: 600;
  margin-top: .7rem;
}

.cs-sticky-empty {
  align-items: center;
  background: var(--cs-surface-alt);
  border: 1px dashed var(--cs-theme-border);
  border-radius: 11px;
  display: flex;
  gap: .7rem;
  padding: .9rem;
}

.cs-sticky-empty > span {
  align-items: center;
  background: rgba(var(--cs-primary-rgb), .12);
  border-radius: 9px;
  color: var(--cs-primary);
  display: inline-flex;
  flex: 0 0 32px;
  font-size: 1rem;
  height: 32px;
  justify-content: center;
}

.cs-sticky-empty strong { color: var(--cs-dark); display: block; font-size: .79rem; }
.cs-sticky-empty p { color: var(--cs-gray); font-size: .74rem; line-height: 1.35; margin: .16rem 0 0; }

.cs-sticky-modal { border: 0; border-radius: var(--cs-radius-lg); overflow: hidden; }
.cs-sticky-modal .modal-header { align-items: flex-start; border-bottom-color: var(--cs-border); }
.cs-sticky-modal .modal-footer { border-top-color: var(--cs-border); }

@media (max-width: 575.98px) {
  .cs-sticky-notes-header { align-items: center; }
  .cs-sticky-add span { display: none; }
  .cs-sticky-add { border-radius: 50%; height: 33px; justify-content: center; padding: 0; width: 33px; }
}

.sales-card .card-icon  { background: rgba(var(--cs-primary-rgb),0.1) !important; color: var(--cs-primary) !important; }
.revenue-card .card-icon { background: rgba(16,185,129,0.1) !important; color: var(--cs-success) !important; }
.customers-card .card-icon { background: rgba(245,158,11,0.1) !important; color: var(--cs-warning) !important; }

/* ===== BUTTONS ===== */
.btn {
  font-family: var(--cs-font) !important;
  font-weight: 600 !important;
  border-radius: var(--cs-radius) !important;
  font-size: 0.875rem !important;
  padding: 0.45rem 1rem !important;
  transition: background 0.18s, box-shadow 0.18s, transform 0.15s !important;
  letter-spacing: 0 !important;
}

.btn:hover { transform: translateY(-1px) !important; }
.btn:active { transform: translateY(0) !important; }

.btn-sm {
  padding: 0.3rem 0.7rem !important;
  font-size: 0.8rem !important;
  border-radius: var(--cs-radius-sm) !important;
}

.btn-primary {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  box-shadow: 0 2px 10px rgba(var(--cs-primary-rgb), 0.3) !important;
}

.btn-primary:hover {
  background: var(--cs-primary-dark) !important;
  border-color: var(--cs-primary-dark) !important;
  box-shadow: 0 4px 16px rgba(var(--cs-primary-rgb), 0.4) !important;
}

.btn-outline-primary {
  color: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
}

.btn-outline-primary:hover {
  background: var(--cs-primary) !important;
  color: #fff !important;
}

/* Dark title cards use light outline actions. Keep the dark surface above the
   global .card background rule, which intentionally uses !important. */
.cs-dark-header-card {
  background: linear-gradient(135deg, var(--cs-dark) 0%, var(--cs-dark-2) 100%) !important;
  border: none !important;
}

.cs-dark-header-card .btn-outline-light {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.cs-dark-header-card .btn-outline-light:hover,
.cs-dark-header-card .btn-outline-light:focus-visible {
  color: var(--cs-dark) !important;
  border-color: #fff !important;
  background: #fff !important;
}

/* ===== BUSINESS THEME PICKER ===== */
.business-theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  color: var(--cs-dark);
  background: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.business-theme-option input[type="radio"] {
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--theme-primary);
}

.business-theme-option:hover {
  border-color: var(--theme-primary);
  background: var(--theme-light);
}

.business-theme-option.is-selected,
.business-theme-option:has(input[type="radio"]:checked) {
  border-color: var(--theme-primary);
  background: var(--theme-light);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-primary) 18%, transparent);
}

.business-theme-swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 50%;
  background: var(--theme-primary);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.8);
}

.btn-success {
  background: var(--cs-success) !important;
  border-color: var(--cs-success) !important;
}

/* ===== FORMS & INPUTS ===== */
.form-control,
.form-select,
textarea.form-control {
  font-family: var(--cs-font) !important;
  font-size: 0.875rem !important;
  border-radius: var(--cs-radius) !important;
  border: 1.5px solid var(--cs-border) !important;
  color: var(--cs-dark) !important;
  background-color: #fafbfc !important;
  padding: 0.52rem 0.9rem !important;
  line-height: 1.5 !important;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s !important;
  box-shadow: none !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: var(--cs-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb), 0.10) !important;
  background-color: #fff !important;
  outline: none !important;
}

.form-control::placeholder,
textarea.form-control::placeholder { color: #a0aec0 !important; }

.form-control[readonly],
.form-control[disabled] {
  background-color: var(--cs-gray-lt) !important;
  color: var(--cs-gray) !important;
  cursor: not-allowed !important;
}

/* ===== SELECT / DROPDOWN ARROW ===== */
/* Bootstrap overrides can strip the native arrow — restore a clean SVG chevron */
select,
.form-select,
select.form-control {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  background-size: 14px 10px !important;
  padding-right: 2.6rem !important;
  cursor: pointer !important;
}

select:focus,
.form-select:focus,
select.form-control:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a6cf6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ===== FORM LABEL ===== */
.form-label,
label.form-label {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--cs-dark) !important;
  margin-bottom: 0.35rem !important;
  display: block !important;
}

/* ===== INPUT GROUP ===== */
.input-group-text {
  font-family: var(--cs-font) !important;
  border-radius: var(--cs-radius) 0 0 var(--cs-radius) !important;
  border: 1.5px solid var(--cs-border) !important;
  background: var(--cs-gray-lt) !important;
  color: var(--cs-gray) !important;
  font-size: 0.875rem !important;
}

.input-group > .form-control {
  border-radius: 0 var(--cs-radius) var(--cs-radius) 0 !important;
}

/* Inline-style override — strip old Roboto / gray-bg inline styles from templates */
select[style*="Roboto"],
input[style*="Roboto"],
textarea[style*="Roboto"] {
  font-family: var(--cs-font) !important;
  background-color: #fafbfc !important;
  color: var(--cs-dark) !important;
  border: 1.5px solid var(--cs-border) !important;
}

/* ===== TABLES ===== */
/* ===== MODERN TABLE SYSTEM =====
   Overrides Bootstrap's table-dark / table-striped / table-bordered
   so every table gets a clean, consistent look without touching templates.
   ===================================================================== */

/* Wrapper: clip corners and add card-like shadow.
   overflow-x: auto keeps horizontal scroll; we avoid overflow:hidden
   here because it would clip dropdown menus that open inside tables. */
.table-responsive {
  border-radius: var(--cs-radius) !important;
  overflow-x: auto !important;
  box-shadow: var(--cs-shadow-sm) !important;
  border: 1px solid var(--cs-border) !important;
}

/* Base table */
.table {
  font-family: var(--cs-font) !important;
  font-size: 0.82rem !important;
  margin-bottom: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ── Header (overrides table-dark completely) ── */
.table thead,
.table thead.table-dark,
.table > thead {
  background: #f1f5f9 !important;
}

.table thead th,
.table thead.table-dark th,
.table > thead > tr > th {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  background: #f1f5f9 !important;
  border-bottom: 1px solid var(--cs-border) !important;
  border-top: none !important;
  padding: 0.7rem 0.9rem !important;
  white-space: nowrap !important;
}

/* ── Body rows ── */
.table td,
.table > tbody > tr > td {
  padding: 0.72rem 0.9rem !important;
  color: var(--cs-dark-2) !important;
  vertical-align: middle !important;
  border-color: #f1f5f9 !important;
  border-top: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  background: #fff !important;
}

/* Last row — no bottom border */
.table > tbody > tr:last-child > td {
  border-bottom: none !important;
}

/* ── Hover ── */
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover {
  background: rgba(var(--cs-primary-rgb), 0.04) !important;
}

/* ── Striping (very subtle) ── */
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: #fafbfd !important;
}
.table-striped > tbody > tr:nth-of-type(odd):hover > td,
.table-striped.table-hover > tbody > tr:nth-of-type(odd):hover > td {
  background: rgba(var(--cs-primary-rgb), 0.04) !important;
}

/* ── Remove bordered style ── */
.table-bordered,
.table-bordered td,
.table-bordered th {
  border: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* ── table-sm tighter padding ── */
.table-sm td,
.table-sm th {
  padding: 0.5rem 0.9rem !important;
}

/* ===== BADGES ===== */
.badge {
  font-family: var(--cs-font) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  padding: 0.3em 0.6em !important;
  letter-spacing: 0.2px !important;
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
  border: 1px solid var(--cs-border) !important;
  border-radius: var(--cs-radius-lg) !important;
  box-shadow: var(--cs-shadow-lg) !important;
  padding: 6px !important;
}

.dropdown-item {
  border-radius: var(--cs-radius-sm) !important;
  font-size: 0.875rem !important;
  padding: 0.5rem 0.85rem !important;
  color: var(--cs-dark) !important;
}

.dropdown-item:hover {
  background: var(--cs-primary-light) !important;
  color: var(--cs-primary) !important;
}

/* ===== ALERTS ===== */
.alert {
  border-radius: var(--cs-radius) !important;
  font-size: 0.875rem !important;
  border: none !important;
}

.alert-danger { background: #fef2f2 !important; color: var(--cs-danger) !important; }
.alert-success { background: #f0fdf4 !important; color: var(--cs-success) !important; }
.alert-warning { background: #fffbeb !important; color: var(--cs-warning) !important; }
.alert-info { background: var(--cs-primary-light) !important; color: var(--cs-primary) !important; }

/* ===== MODALS ===== */
.modal-content {
  border: none !important;
  border-radius: var(--cs-radius-xl) !important;
  box-shadow: var(--cs-shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--cs-border) !important;
  padding: 1.25rem 1.5rem !important;
}

.modal-title {
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--cs-dark) !important;
}

.modal-footer {
  border-top: 1px solid var(--cs-border) !important;
  padding: 1rem 1.5rem !important;
}

/* ===== PAGINATION ===== */
.page-link {
  font-family: var(--cs-font) !important;
  border-radius: var(--cs-radius-sm) !important;
  border: 1px solid var(--cs-border) !important;
  color: var(--cs-dark) !important;
  font-size: 0.875rem !important;
}

.page-item.active .page-link {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
}

/* ===== SIDEBAR REFINEMENTS ===== */
#sidebar {
  border-right: 1px solid var(--cs-border) !important;
  background: #fff !important;
}

.sidebar-nav .nav-item { margin-bottom: 2px !important; }

.sidebar-nav .nav-heading {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #a0aec0 !important;
  padding: 0.9rem 1rem 0.3rem !important;
}

.sidebar-nav .nav-link {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--cs-gray) !important;
  padding: 0.6rem 1rem !important;
  margin: 0 0.5rem !important;
  border-radius: var(--cs-radius-sm) !important;
  transition: background 0.15s, color 0.15s !important;
}

.sidebar-nav .nav-link span { font-weight: 500 !important; }

/* ===== AUTH PAGE SHARED STYLES ===== */
.cs-auth-page {
  min-height: 100vh;
  display: flex;
  background: var(--cs-gray-lt);
}

.cs-auth-left {
  width: 420px;
  min-width: 420px;
  background: linear-gradient(145deg, var(--cs-dark) 0%, var(--cs-dark-2) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 48px;
  position: relative;
  overflow: hidden;
}

.cs-auth-left::before {
  content: '';
  position: absolute;
  top: -100px; right: -100px;
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(var(--cs-primary-rgb),0.25) 0%, transparent 65%);
  border-radius: 50%;
}

.cs-auth-left::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 65%);
  border-radius: 50%;
}

.cs-auth-left-content { position: relative; z-index: 1; }

.cs-auth-wordmark {
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 2.5rem;
}

.cs-auth-wordmark span { color: var(--cs-primary); }

.cs-auth-tagline {
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 1rem;
  letter-spacing: -0.4px;
}

.cs-auth-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.cs-auth-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 0.875rem;
  color: rgba(255,255,255,0.7);
}

.cs-auth-feature-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(var(--cs-primary-rgb),0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.cs-auth-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.cs-auth-form-box {
  background: #fff;
  border-radius: 20px;
  padding: 44px 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--cs-shadow-lg);
  border: 1px solid var(--cs-border);
}

.cs-form-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--cs-dark);
  margin-bottom: 0.35rem;
  letter-spacing: -0.4px;
}

.cs-form-subtitle {
  font-size: 0.875rem;
  color: var(--cs-gray);
  margin-bottom: 1.75rem;
  line-height: 1.5;
}

.cs-form-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--cs-dark);
  margin-bottom: 0.4rem;
  display: block;
}

.cs-form-input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--cs-border);
  border-radius: var(--cs-radius);
  font-family: var(--cs-font);
  font-size: 0.875rem;
  color: var(--cs-dark);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

.cs-form-input:focus {
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb),0.1);
}

.cs-form-input::placeholder { color: #a0aec0; }

.cs-input-group {
  display: flex;
  border: 1.5px solid var(--cs-border);
  border-radius: var(--cs-radius);
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cs-input-group:focus-within {
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb),0.1);
}

.cs-input-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: var(--cs-gray-lt);
  color: var(--cs-gray);
  font-size: 0.9rem;
  border-right: 1.5px solid var(--cs-border);
  min-width: 40px;
}

.cs-input-group .cs-form-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
  flex: 1;
}

.cs-btn-primary {
  width: 100%;
  padding: 0.7rem;
  background: linear-gradient(135deg, var(--cs-primary), var(--cs-primary-dark));
  color: #fff;
  border: none;
  border-radius: var(--cs-radius);
  font-family: var(--cs-font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 12px rgba(var(--cs-primary-rgb),0.35);
}

.cs-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--cs-primary-rgb),0.4);
}

.cs-btn-primary:active { transform: translateY(0); }

.cs-divider {
  border: none;
  border-top: 1px solid var(--cs-border);
  margin: 1.5rem 0;
}

.cs-form-footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--cs-gray);
  margin-top: 1.25rem;
}

.cs-form-footer a {
  color: var(--cs-primary);
  font-weight: 600;
  text-decoration: none;
}

.cs-form-footer a:hover { text-decoration: underline; }

.cs-error-msg {
  background: #fef2f2;
  color: var(--cs-danger);
  border-radius: var(--cs-radius);
  padding: 10px 14px;
  font-size: 0.85rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.cs-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cs-check-row input[type="checkbox"] {
  accent-color: var(--cs-primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.cs-check-row label {
  font-size: 0.85rem;
  color: var(--cs-gray);
  cursor: pointer;
  margin: 0;
}

@media (max-width: 900px) {
  .cs-auth-left { display: none !important; }
  .cs-auth-right { padding: 24px 16px; }
  .cs-auth-form-box { padding: 32px 24px; }
}

/* ===== COMPACT LAYOUT & CONTENT POLISH =====
   Single consolidated pass over NiceAdmin's loose defaults.
   Sections: Chrome · Sidebar · Page Title · Cards · Forms ·
             Tables · Badges · Modals · Spacing · Stat Cards
   ======================================================== */

/* ── Base ─────────────────────────────────────────────── */
body { font-size: 13px !important; }

/* ── Chrome: header + sidebar ─────────────────────────── */
.header {
  height: 52px !important;
  padding-left: 12px !important;
  border-bottom: 1px solid var(--cs-border) !important;
  border-top: 3px solid var(--cs-primary) !important;
  box-shadow: 0 1px 4px rgba(15,23,42,0.05) !important;
}
/* overflow-x: hidden stops page content bleeding into the sidebar area
   at mid-width viewports where no margin-left offset is applied. */
#main   { margin-top: 52px !important; padding: 16px 22px !important; overflow-x: hidden !important; }
.sidebar { top: 52px !important; width: 260px !important; padding: 10px !important; }

.header .toggle-sidebar-btn { font-size: 22px !important; padding-left: 6px !important; }
.header-nav .nav-icon        { font-size: 18px !important; margin-right: 14px !important; }
.header-nav .nav-profile span { font-size: 0.78rem !important; }
.logo span { font-size: 20px !important; }

@media (max-width: 1199px) {
  #main { padding: 12px 14px !important; }
  .sidebar { left: -260px !important; }
  .toggle-sidebar .sidebar { left: 0 !important; }
}
@media (min-width: 1200px) {
  #main, #footer { margin-left: 260px !important; }
  .toggle-sidebar #main, .toggle-sidebar #footer { margin-left: 0 !important; }
  .toggle-sidebar .sidebar { left: -260px !important; }
  .logo { width: 240px !important; }
}

/* ── Sidebar nav ──────────────────────────────────────── */
.sidebar-nav .nav-link    { font-size: 0.8rem !important; padding: 7px 10px !important; }
.sidebar-nav .nav-link i  { font-size: 14px !important; margin-right: 8px !important; }
.sidebar-nav .nav-item    { margin-bottom: 2px !important; }
.sidebar-nav .nav-heading { padding: 0.6rem 0.5rem 0.2rem !important; font-size: 0.65rem !important; }
.sidebar-nav .nav-content { padding: 2px 0 0 0 !important; }
.sidebar-nav .nav-content a { font-size: 0.76rem !important; padding: 4px 0 4px 26px !important; }

/* ── Page title ───────────────────────────────────────── */
.pagetitle {
  margin-bottom: 14px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--cs-border) !important;
}
.pagetitle h1 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--cs-dark) !important;
  letter-spacing: -0.2px !important;
}
.breadcrumb              { font-size: 0.7rem !important; margin-bottom: 0 !important; }
.breadcrumb-item a       { color: var(--cs-primary) !important; }
.breadcrumb-item.active  { color: var(--cs-gray) !important; }
.breadcrumb-item + .breadcrumb-item { padding-left: 0.3rem !important; }
.breadcrumb-item + .breadcrumb-item::before { padding-right: 0.3rem !important; }

/* ── Section / row spacing ────────────────────────────── */
.section           { padding-bottom: 0 !important; }
.section .row      { --bs-gutter-y: 0.75rem; --bs-gutter-x: 0.75rem; }
.row.g-4           { --bs-gutter-y: 0.85rem; --bs-gutter-x: 0.85rem; }
.row.g-3           { --bs-gutter-y: 0.65rem; --bs-gutter-x: 0.65rem; }

/* ── Cards ────────────────────────────────────────────── */
.card {
  border-radius: 10px !important;
  border: 1px solid var(--cs-border) !important;
  box-shadow: var(--cs-shadow-sm) !important;
}
.card:hover { box-shadow: var(--cs-shadow) !important; }

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

.card-header,
.card-footer {
  padding: 10px 18px !important;
  background: #f8fafc !important;
  border-color: var(--cs-border) !important;
  font-size: 0.78rem !important;
}
.card-header {
  border-bottom: 1px solid var(--cs-border) !important;
  border-radius: 10px 10px 0 0 !important;
}

.card-title {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: var(--cs-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}
.card-title span {
  font-size: 0.75rem !important;
  font-weight: 400 !important;
  color: var(--cs-gray) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ── Forms ────────────────────────────────────────────── */
.form-label, label.form-label {
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: var(--cs-dark-2) !important;
  margin-bottom: 4px !important;
}
.form-control,
.form-select,
textarea.form-control { font-size: 0.82rem !important; padding: 0.42rem 0.75rem !important; }
.form-text { font-size: 0.7rem !important; margin-top: 3px !important; }

/* Tighten Bootstrap vertical form spacing */
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }

/* ── Buttons ──────────────────────────────────────────── */
.btn    { font-size: 0.8rem !important; padding: 0.38rem 0.85rem !important; }
.btn-sm { font-size: 0.73rem !important; padding: 0.25rem 0.65rem !important; }

/* ── Dropdowns ────────────────────────────────────────── */
.dropdown-item { font-size: 0.8rem !important; padding: 0.38rem 0.75rem !important; }

/* ── Badges ───────────────────────────────────────────── */
.badge { font-size: 0.68rem !important; padding: 0.25em 0.55em !important; }

/* ── Alerts ───────────────────────────────────────────── */
.alert { padding: 0.5rem 0.85rem !important; font-size: 0.8rem !important; }

/* ── Modals ───────────────────────────────────────────── */
.modal-header { padding: 0.85rem 1.1rem !important; border-bottom: 1px solid var(--cs-border) !important; }
.modal-body   { padding: 1rem 1.1rem !important; }
.modal-footer { padding: 0.65rem 1.1rem !important; border-top: 1px solid var(--cs-border) !important; }
.modal-title  { font-size: 0.88rem !important; font-weight: 700 !important; }

/* ── List groups ──────────────────────────────────────── */
.list-group-item { padding: 0.5rem 0.85rem !important; font-size: 0.8rem !important; }

/* ── Stat / info cards ────────────────────────────────── */
.info-card h6         { font-size: 1.2rem !important; }
.info-card .card-icon { width: 38px !important; height: 38px !important; border-radius: 10px !important; }
.cs-stat-value        { font-size: 1.15rem; }

/* Order status badges (legacy helper) */
.status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;
}

/* ===== CS STATUS BADGE SYSTEM ===== */
/* Use cs-badge + one modifier class instead of inline styles.
   Colours are taken from the KleenPoint design system variables. */
.cs-badge {
  display: inline-block;
  padding: 0.28em 0.65em;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  line-height: 1.4;
  white-space: nowrap;
}
/* Blue — info / in-progress states */
.cs-badge-info    { background: #e8f0fe; color: #1255d4; }
/* Green — success / completed / delivered */
.cs-badge-success { background: #d1fae5; color: #065f46; }
/* Amber — warning / quality-check states */
.cs-badge-warning { background: #fef3c7; color: #92400e; }
/* Red — error / blocked / bounced */
.cs-badge-danger  { background: #fee2e2; color: #991b1b; }
/* Slate — neutral / unknown */
.cs-badge-secondary { background: #f1f5f9; color: #475569; }

/* Search bar */
.search-bar input {
  border-radius: 8px !important;
  border: 1.5px solid var(--cs-border) !important;
  font-family: var(--cs-font) !important;
}

/* Filter dropdowns */
.filter .dropdown-menu {
  min-width: 160px !important;
  border-radius: var(--cs-radius-lg) !important;
}

/* ===== MOBILE SIDEBAR BACKDROP ===== */
#cs-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 998; /* just below sidebar z-index */
  cursor: pointer;
}

@media (max-width: 1199px) {
  .toggle-sidebar #cs-sidebar-backdrop {
    display: block;
  }

  /* Smooth sidebar slide-in */
  .sidebar {
    transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 999 !important;
  }
}

/* ===== DASHBOARD STAT CARDS ===== */
.cs-stat-value {
  font-size: clamp(0.9rem, 3.8vw, 1.45rem);
  font-weight: 800;
  color: var(--cs-dark);
  letter-spacing: -0.5px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cs-gray);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cs-stat-sub {
  font-size: 0.72rem;
  color: #a0aec0;
  margin-top: 1px;
}

/* Shrink stat values on small mobile so they don't clip */
@media (max-width: 400px) {
  .cs-stat-value {
    font-size: 1.1rem;
  }
  .info-card .card-body {
    padding: 12px !important;
  }
  .info-card .card-icon {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ===== DASHBOARD FILTER CONTROLS ===== */
.cs-filter-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cs-gray);
}

.cs-filter-group .btn {
  font-size: 0.78rem !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 0 !important;
}

.cs-filter-group .btn:first-child { border-radius: var(--cs-radius-sm) 0 0 var(--cs-radius-sm) !important; }
.cs-filter-group .btn:last-child  { border-radius: 0 var(--cs-radius-sm) var(--cs-radius-sm) 0 !important; }

.cs-filter-group .btn.active {
  background: var(--cs-primary) !important;
  border-color: var(--cs-primary) !important;
  color: #fff !important;
}

/* ===== DASHBOARD LAYOUT HELPERS ===== */
.min-w-0 { min-width: 0; overflow: hidden; flex: 1; }

/* Prevent pagetitle from overlapping on mobile */
@media (max-width: 575px) {
  .pagetitle {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .cs-filter-group .btn {
    padding: 0.25rem 0.55rem !important;
  }
}

/* Card hover lift consistent with h-100 grid */
.card.h-100 { display: flex; flex-direction: column; }
.card.h-100 .card-body { flex: 1; }

/* ===== RECEPTIONIST OPERATIONS DASHBOARD ===== */
.cs-rx-page-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.45rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, var(--cs-surface-alt) 0%, var(--cs-primary-light) 100%) !important;
  border: 1px solid var(--cs-theme-border);
  border-left: 4px solid var(--cs-primary);
  border-radius: 0.9rem;
  box-shadow: var(--cs-shadow-sm);
}
.cs-rx-kicker,
.cs-rx-heading small,
.cs-rx-updated {
  color: var(--cs-gray);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.cs-rx-kicker { color: var(--cs-primary); margin-bottom: 0.35rem; }
.cs-rx-page-title h1 {
  color: #102945;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 0;
}
.cs-rx-page-title p { color: var(--cs-gray); font-size: 0.78rem; margin: 0.55rem 0 0; }
.cs-rx-period {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe4eb;
  border-radius: 0.7rem;
  box-shadow: 0 2px 7px rgba(16, 41, 69, 0.04);
  display: flex;
  gap: 0.2rem;
  padding: 0.3rem;
}
.cs-rx-period > span { color: var(--cs-gray); font-size: 0.68rem; font-weight: 700; padding: 0 0.4rem; }
.cs-rx-period button {
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  color: var(--cs-gray);
  cursor: pointer;
  font: 700 0.7rem var(--cs-font);
  padding: 0.42rem 0.68rem;
}
.cs-rx-period button.active { background: #102945; color: #fff; }
.cs-rx-view { color: #16253b; }
.cs-rx-action-strip {
  align-items: center;
  background: #eaf3f8;
  border: 1px solid #cbdbe7;
  border-radius: 0.85rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.05rem;
  padding: 0.75rem 0.95rem;
}
.cs-rx-action-copy,
.cs-rx-heading {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}
.cs-rx-action-copy strong { color: #102945; display: block; font-size: 0.76rem; }
.cs-rx-action-copy small { color: var(--cs-gray); display: block; font-size: 0.65rem; margin-top: 0.08rem; }
.cs-rx-icon {
  align-items: center;
  background: #edf4fc;
  border-radius: 0.5rem;
  color: var(--cs-primary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.85rem;
  justify-content: center;
  width: 1.85rem;
}
.cs-rx-action-list { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cs-rx-button,
.cs-rx-text-link {
  align-items: center;
  border: 1px solid #cbd8e1;
  border-radius: 0.5rem;
  color: #16253b;
  display: inline-flex;
  font: 700 0.7rem var(--cs-font);
  gap: 0.4rem;
  justify-content: center;
  padding: 0.48rem 0.7rem;
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease;
}
.cs-rx-button:hover,
.cs-rx-text-link:hover { color: var(--cs-primary-dark); transform: translateY(-1px); }
.cs-rx-button-primary { background: var(--cs-primary); border-color: var(--cs-primary); color: #fff; box-shadow: 0 3px 8px rgba(22, 104, 217, 0.2); }
.cs-rx-button-primary:hover { color: #fff; background: var(--cs-primary-dark); }
.cs-rx-layout { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) 18.9rem; }
.cs-rx-main,
.cs-rx-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.cs-rx-panel {
  background: #fff;
  border: 1px solid #dbe4eb;
  border-radius: 0.9rem;
  box-shadow: 0 3px 12px rgba(16, 41, 69, 0.045);
  overflow: hidden;
  padding: 1.05rem;
}
.cs-rx-panel-heading { align-items: flex-start; display: flex; gap: 0.75rem; justify-content: space-between; margin-bottom: 0.9rem; }
.cs-rx-heading h2 { color: #102945; font-size: 0.92rem; letter-spacing: -0.02em; margin: 0.12rem 0 0; }
.cs-rx-heading h2 em { color: var(--cs-gray); font-size: 0.68rem; font-style: normal; font-weight: 500; letter-spacing: 0; }
.cs-rx-updated { padding-top: 0.32rem; white-space: nowrap; }
.cs-rx-metrics { display: grid; gap: 0.48rem; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cs-rx-metric {
  border: 1px solid #dbe4eb;
  border-radius: 0.65rem;
  border-top: 3px solid currentColor;
  color: var(--cs-primary);
  min-height: 5.85rem;
  padding: 0.65rem 0.6rem;
}
.cs-rx-metric strong { color: #102945; display: block; font-size: 1.45rem; letter-spacing: -0.06em; line-height: 1; }
.cs-rx-metric span { color: #16253b; display: block; font-size: 0.64rem; font-weight: 800; line-height: 1.2; margin-top: 0.55rem; }
.cs-rx-metric small { color: var(--cs-gray); display: block; font-size: 0.57rem; margin-top: 0.2rem; }
.cs-rx-amber { color: #d78d18; }.cs-rx-green { color: #0f9f80; }.cs-rx-indigo { color: #4969c7; }.cs-rx-red { color: #d65b55; }.cs-rx-slate { color: #67788e; }
.cs-rx-finance { border-top: 1px solid #edf1f4; display: grid; gap: 0.45rem; grid-template-columns: 1.15fr 1fr 1fr; margin-top: 0.9rem; padding-top: 0.9rem; }
.cs-rx-finance div { border-left: 3px solid #b9c9dc; padding: 0.1rem 0.6rem; }.cs-rx-finance div:first-child { border-left-color: var(--cs-primary); }.cs-rx-finance div:nth-child(2) { border-left-color: #0f9f80; }.cs-rx-finance div:nth-child(3) { border-left-color: #7868bd; }
.cs-rx-finance small { color: var(--cs-gray); display: block; font-size: 0.57rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-rx-finance strong { color: #102945; display: block; font-size: 1.12rem; letter-spacing: -0.04em; margin-top: 0.25rem; }
.cs-rx-text-link { border: 0; color: var(--cs-primary); padding: 0.22rem 0; white-space: nowrap; }
.cs-rx-table-wrap { border: 1px solid #dbe4eb; border-radius: 0.6rem; overflow-x: auto; }
.cs-rx-table { border-collapse: collapse; font-size: 0.7rem; min-width: 44rem; width: 100%; }
.cs-rx-table th { background: #f6f9fb; color: var(--cs-gray); font-size: 0.56rem; letter-spacing: 0.07em; padding: 0.6rem 0.65rem; text-align: left; text-transform: uppercase; white-space: nowrap; }
.cs-rx-table td { border-top: 1px solid #edf1f4; color: #34465a; padding: 0.66rem 0.65rem; vertical-align: middle; white-space: nowrap; }
.cs-rx-table tbody tr:hover { background: #f9fbfd; }.cs-rx-table a { color: var(--cs-primary); font-weight: 800; text-decoration: none; }.cs-rx-customer { color: #16253b !important; font-weight: 700; }
.cs-rx-badge { border-radius: 0.3rem; display: inline-block; font-size: 0.58rem; font-weight: 750; line-height: 1; padding: 0.28rem 0.36rem; }
.cs-rx-badge-success { background: #dff5ed; color: #087c62; }.cs-rx-badge-info { background: #e2edfc; color: #285aa7; }.cs-rx-badge-neutral { background: #e9eef2; color: #596b80; }.cs-rx-badge-danger { background: #fbe5e3; color: #a8403c; }.cs-rx-badge-warning { background: #fff0d5; color: #98620d; }.cs-rx-badge-cyan { background: #dff2f5; color: #18758a; }
.cs-rx-empty { color: var(--cs-gray) !important; padding: 1.25rem !important; text-align: center; }
.cs-rx-pagination { display: flex; justify-content: flex-end; margin-top: 0.75rem; }.cs-rx-pagination .page-link { border-color: #dbe4eb; border-radius: 0.35rem; color: var(--cs-gray); font-size: 0.65rem; margin-left: 0.2rem; }.cs-rx-pagination .page-item.active .page-link { background: #102945; border-color: #102945; color: #fff; }
.cs-rx-attention { background: #fffdf7; border-color: #ead9ad; overflow: visible; position: relative; }.cs-rx-attention .cs-rx-icon { background: #fff1d3; color: #a66a0b; }.cs-rx-note { color: var(--cs-gray); font-size: 0.67rem; line-height: 1.5; margin: -0.15rem 0 0.55rem; }
.cs-rx-expiring-row { display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr) auto; border-top: 1px solid #f0eadb; padding: 0.72rem 0; }.cs-rx-expiring-name { color: #102945; display: block; font-size: 0.7rem; font-weight: 800; text-decoration: none; }.cs-rx-expiring-row span { color: var(--cs-gray); display: block; font-size: 0.61rem; margin-top: 0.15rem; }.cs-rx-expiring-row time { background: #fff0d2; border-radius: 0.25rem; color: #99630d; display: inline-block; font-size: 0.57rem; font-weight: 800; margin-top: 0.32rem; padding: 0.2rem 0.28rem; }
.cs-rx-reminder-state { text-align: right; }.cs-rx-reminder-state > small { color: var(--cs-gray); display: block; font-size: 0.58rem; }.cs-rx-reminder { background: #fff; border: 1px solid #c6d8ea; border-radius: 0.32rem; color: var(--cs-primary); cursor: pointer; font: 700 0.59rem var(--cs-font); margin-top: 0.35rem; padding: 0.24rem 0.35rem; }.cs-rx-reminder.sent { background: #f0fbf7; border-color: #bce4d7; color: #087c62; cursor: default; }.cs-rx-full-button { display: flex; margin-top: 0.5rem; width: 100%; }
.cs-rx-quick-actions { display: grid; gap: 0.45rem; grid-template-columns: 1fr 1fr; }.cs-rx-quick-actions a { align-items: center; background: #f8fafb; border: 1px solid #dbe4eb; border-radius: 0.5rem; color: #102945; display: flex; font-size: 0.64rem; font-weight: 750; gap: 0.42rem; min-height: 3.65rem; padding: 0.55rem; text-decoration: none; }.cs-rx-quick-actions a:hover { background: #edf4fc; border-color: #b9d1ec; }.cs-rx-quick-actions i { color: var(--cs-primary); font-size: 0.85rem; }
.cs-rx-desk-note p { color: var(--cs-gray); font-size: 0.66rem; line-height: 1.5; margin: 0.8rem 0 0; }.cs-rx-toast-container { min-width: 16rem; position: absolute; right: 0.8rem; top: 0.8rem; z-index: 1100; }
.cs-rx-empty-state { align-items: center; color: var(--cs-gray); display: flex; flex-direction: column; font-size: 0.68rem; gap: 0.35rem; padding: 1rem 0; text-align: center; }.cs-rx-empty-state i { color: #0f9f80; font-size: 1.4rem; }
@media (max-width: 1199px) { .cs-rx-layout { grid-template-columns: 1fr; }.cs-rx-side { display: grid; grid-template-columns: 1fr 1fr; }.cs-rx-desk-note { grid-column: 1 / -1; }.cs-rx-metrics { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 675px) { .cs-rx-page-title { align-items: flex-start; flex-direction: column; }.cs-rx-period { justify-content: space-between; width: 100%; }.cs-rx-period button { flex: 1; }.cs-rx-action-strip { align-items: flex-start; flex-direction: column; }.cs-rx-action-list { width: 100%; }.cs-rx-action-list .cs-rx-button { flex: 1; }.cs-rx-side { display: flex; }.cs-rx-metrics { grid-template-columns: repeat(2, 1fr); }.cs-rx-finance { grid-template-columns: 1fr; }.cs-rx-panel { padding: 0.85rem; }.cs-rx-panel-heading { align-items: flex-start; }.cs-rx-text-link { font-size: 0.62rem; }.cs-rx-table { font-size: 0.67rem; } }

/* ===== OWNER & MANAGER LEADERSHIP DASHBOARD ===== */
.kp-onboarding {
  background: linear-gradient(135deg, var(--cs-surface) 0%, var(--cs-primary-light) 100%);
  border: 1px solid var(--cs-theme-border);
  border-left: 4px solid var(--cs-primary);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
  margin-bottom: 1.25rem;
  padding: 1.1rem 1.2rem 1rem;
}
.kp-onboarding-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.kp-onboarding-copy { min-width: 0; }
.kp-onboarding-head-actions {
  align-items: flex-start;
  display: flex;
  flex: 0 0 auto;
  gap: .7rem;
}
.kp-onboarding-kicker {
  color: var(--cs-primary);
  display: block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.kp-onboarding-kicker i { margin-right: .2rem; }
.kp-onboarding h2 {
  color: var(--cs-dark);
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -.03em;
  margin: .22rem 0 .28rem;
}
.kp-onboarding-copy p {
  color: var(--cs-gray);
  font-size: .75rem;
  line-height: 1.45;
  margin: 0;
}
.kp-onboarding-progress {
  align-items: flex-end;
  color: var(--cs-gray);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.kp-onboarding-progress strong { color: var(--cs-primary); font-size: 1.4rem; letter-spacing: -.05em; line-height: 1; }
.kp-onboarding-progress span { font-size: .62rem; margin-top: .25rem; white-space: nowrap; }
.kp-onboarding-dismiss-form { margin: 0; }
.kp-onboarding-dismiss,
.kp-onboarding-show {
  align-items: center;
  background: transparent;
  border: 1px solid var(--cs-theme-border);
  border-radius: .45rem;
  color: var(--cs-gray);
  cursor: pointer;
  display: inline-flex;
  font-size: .62rem;
  font-weight: 700;
  gap: .3rem;
  padding: .38rem .55rem;
}
.kp-onboarding-dismiss:hover,
.kp-onboarding-dismiss:focus-visible {
  border-color: var(--cs-primary);
  color: var(--cs-primary-dark);
}
.kp-onboarding-show {
  border-color: var(--cs-primary);
  color: var(--cs-primary);
  white-space: nowrap;
}
.kp-onboarding-show:hover,
.kp-onboarding-show:focus-visible {
  background: var(--cs-primary-light);
  color: var(--cs-primary-dark);
}
.kp-onboarding-progress-bar {
  background: rgba(var(--cs-primary-rgb), .13);
  border-radius: 1rem;
  height: .35rem;
  margin: .95rem 0 .8rem;
  overflow: hidden;
}
.kp-onboarding-progress-bar span {
  background: var(--cs-primary);
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width .35s ease;
}
.kp-onboarding-steps {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.kp-onboarding-step {
  align-items: flex-start;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--cs-theme-border);
  border-radius: .65rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .72rem;
  position: relative;
}
.kp-onboarding-step.is-next { border-color: var(--cs-primary); box-shadow: 0 0 0 2px rgba(var(--cs-primary-rgb), .08); }
.kp-onboarding-step.is-complete { background: rgba(255,255,255,.45); }
.kp-onboarding-step-icon {
  align-items: center;
  background: var(--cs-primary-light);
  border-radius: .5rem;
  color: var(--cs-primary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.8rem;
  justify-content: center;
  margin-bottom: .55rem;
  width: 1.8rem;
}
.kp-onboarding-step.is-complete .kp-onboarding-step-icon { background: #dcf7ec; color: #07845d; }
.kp-onboarding-step-copy { min-width: 0; }
.kp-onboarding-step-label {
  align-items: center;
  color: var(--cs-gray);
  display: flex;
  font-size: .57rem;
  justify-content: space-between;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kp-onboarding-step-label b { color: var(--cs-primary); font-size: .55rem; }
.kp-onboarding-step.is-complete .kp-onboarding-step-label b { color: #07845d; }
.kp-onboarding-step h3 { color: var(--cs-dark); font-size: .76rem; font-weight: 800; line-height: 1.25; margin: .3rem 0 .3rem; }
.kp-onboarding-step p { color: var(--cs-gray); font-size: .66rem; line-height: 1.4; margin: 0; }
.kp-onboarding-action {
  align-items: center;
  color: var(--cs-primary);
  display: inline-flex;
  font-size: .65rem;
  font-weight: 800;
  gap: .25rem;
  margin-top: auto;
  padding-top: .7rem;
  text-decoration: none;
}
.kp-onboarding-action:hover { color: var(--cs-primary-dark); }
.kp-onboarding-resume,
.kp-onboarding-finished {
  color: var(--cs-gray);
  font-size: .67rem;
  line-height: 1.4;
  margin: .8rem 0 0;
}
.kp-onboarding-resume i,
.kp-onboarding-finished i { color: var(--cs-primary); margin-right: .25rem; }
.kp-onboarding-finished { color: #087c62; }
.kp-catalog-suggestions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .55rem;
}
.kp-catalog-suggestions-label {
  color: var(--cs-gray);
  flex: 0 0 100%;
  font-size: .68rem;
  font-weight: 700;
}
.kp-catalog-suggestion {
  background: var(--cs-primary-light);
  border: 1px solid rgba(var(--cs-primary-rgb), .2);
  border-radius: 999px;
  color: var(--cs-primary-dark);
  cursor: pointer;
  font-size: .7rem;
  padding: .3rem .6rem;
}
.kp-catalog-suggestion:hover,
.kp-catalog-suggestion:focus-visible {
  background: var(--cs-primary);
  border-color: var(--cs-primary);
  color: #fff;
}
.kp-onboarding-dismissed {
  align-items: center;
  background: var(--cs-surface);
  border: 1px solid var(--cs-theme-border);
  border-left: 4px solid var(--cs-primary);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: .85rem 1.1rem;
}
.kp-onboarding-dismissed strong {
  color: var(--cs-dark);
  display: block;
  font-size: .75rem;
}
.kp-onboarding-dismissed span {
  color: var(--cs-gray);
  display: block;
  font-size: .67rem;
  line-height: 1.4;
  margin-top: .2rem;
}
@media (max-width: 991px) {
  .kp-onboarding-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 675px) {
  .kp-onboarding { padding: .9rem; }
  .kp-onboarding-head { gap: .65rem; }
  .kp-onboarding-head-actions { align-items: flex-end; flex-direction: column; gap: .45rem; }
  .kp-onboarding-dismiss span { display: none; }
  .kp-onboarding h2 { font-size: 1rem; }
  .kp-onboarding-steps { grid-template-columns: 1fr; }
  .kp-onboarding-step { display: grid; gap: .65rem; grid-template-columns: auto minmax(0, 1fr); padding: .7rem; }
  .kp-onboarding-step-icon { grid-row: span 2; margin-bottom: 0; }
  .kp-onboarding-action { grid-column: 2; margin-top: -.15rem; padding-top: 0; }
  .kp-onboarding-dismissed { align-items: flex-start; flex-direction: column; gap: .65rem; }
}
.cs-owner-page-title {
  align-items: flex-end;
  display: flex;
  gap: 1.25rem;
  justify-content: space-between;
  margin-bottom: 1.45rem;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(135deg, var(--cs-surface-alt) 0%, var(--cs-primary-light) 100%) !important;
  border: 1px solid var(--cs-theme-border);
  border-left: 4px solid var(--cs-primary);
  border-radius: 0.9rem;
  box-shadow: var(--cs-shadow-sm);
}
.cs-owner-heading small,
.cs-owner-updated {
  color: var(--cs-primary);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.cs-owner-page-title h1 {
  color: #102945;
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  letter-spacing: -0.055em;
  line-height: 1;
  margin: 0;
}
.cs-owner-page-title p { color: var(--cs-gray); font-size: 0.78rem; margin: 0.55rem 0 0; }
.cs-owner-period {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe4eb;
  border-radius: 0.7rem;
  box-shadow: 0 2px 7px rgba(16, 41, 69, 0.04);
  display: flex;
  gap: 0.2rem;
  padding: 0.3rem;
}
.cs-owner-period > span { color: var(--cs-gray); font-size: 0.68rem; font-weight: 700; padding: 0 0.4rem; }
.cs-owner-period button {
  background: transparent;
  border: 0;
  border-radius: 0.45rem;
  color: var(--cs-gray);
  cursor: pointer;
  font: 700 0.7rem var(--cs-font);
  padding: 0.42rem 0.68rem;
}
.cs-owner-period button.active { background: #102945; color: #fff; }
.cs-owner-dashboard { position: relative; }
.cs-owner-dashboard::before {
  background-image: radial-gradient(#9eb3c0 0.45px, transparent 0.45px);
  background-size: 7px 7px;
  content: "";
  inset: -1rem;
  opacity: 0.08;
  pointer-events: none;
  position: absolute;
}
.cs-owner-dashboard > * { position: relative; }
.cs-owner-panel,
.cs-owner-main-area .card,
.cs-owner-sidebar .card {
  background: #fff;
  border: 1px solid #dbe4eb;
  border-radius: 0.9rem;
  box-shadow: 0 3px 12px rgba(16, 41, 69, 0.045);
}
.cs-owner-snapshot { margin-bottom: 0.1rem; }
.cs-owner-panel { padding: 1.05rem; }
.cs-owner-panel-heading {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}
.cs-owner-heading { align-items: center; display: flex; gap: 0.65rem; }
.cs-owner-icon {
  align-items: center;
  background: #edf4fc;
  border-radius: 0.5rem;
  color: var(--cs-primary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.85rem;
  justify-content: center;
  width: 1.85rem;
}
.cs-owner-heading h2 {
  color: #102945;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
  margin: 0.12rem 0 0;
}
.cs-owner-heading h2 em { color: var(--cs-gray); font-size: 0.68rem; font-style: normal; font-weight: 500; letter-spacing: 0; }
.cs-owner-updated { color: var(--cs-gray); padding-top: 0.32rem; white-space: nowrap; }
.cs-owner-metrics { display: grid; gap: 0.5rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cs-owner-metric-card .card {
  border-radius: 0.65rem;
  border-top: 3px solid var(--cs-primary);
  box-shadow: none;
  height: 100%;
  min-height: 6.2rem;
}
.cs-owner-metric-card:nth-child(2) .card { border-top-color: #0f9f80; }
.cs-owner-metric-card:nth-child(3) .card { border-top-color: #d78d18; }
.cs-owner-metric-card:nth-child(4) .card { border-top-color: #7868bd; }
.cs-owner-metric-card .card-body { padding: 0.75rem !important; }
.cs-owner-metric-card .card-icon {
  border-radius: 0.42rem !important;
  box-shadow: none !important;
  height: 1.9rem !important;
  margin-right: 0.02rem;
  width: 1.9rem !important;
}
.cs-owner-metric-card .cs-stat-value { color: #102945; font-size: clamp(1.1rem, 2vw, 1.45rem); }
.cs-owner-metric-card .cs-stat-label { color: #16253b; font-size: 0.64rem; font-weight: 800; margin-top: 0.22rem; text-transform: none; }
.cs-owner-metric-card .cs-stat-sub { color: var(--cs-gray); font-size: 0.58rem; }
.cs-owner-finance-summary {
  border-top: 1px solid #e7edf1;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}
.cs-owner-finance-item {
  background: #f8fafb;
  border: 1px solid #e2eaee;
  border-radius: 0.62rem;
  display: flex;
  flex-direction: column;
  min-height: 4.4rem;
  padding: 0.6rem 0.68rem;
}
.cs-owner-finance-item > span {
  color: #405466;
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.cs-owner-finance-item strong {
  color: #102945;
  font-size: 0.9rem;
  letter-spacing: -0.02em;
  margin-top: 0.22rem;
}
.cs-owner-finance-item small {
  color: var(--cs-gray);
  font-size: 0.58rem;
  line-height: 1.25;
  margin-top: auto;
  padding-top: 0.18rem;
}
.cs-owner-finance-payg { border-top: 2px solid #0f9f80; }
.cs-owner-finance-subscriptions { border-top: 2px solid #7868bd; }
.cs-owner-finance-utilisation { border-top: 2px solid #d89324; }
.cs-owner-finance-invoices { border-top: 2px solid #176bd7; }
.cs-owner-main-area > .row { row-gap: 1rem !important; }
.cs-owner-main-area .card,
.cs-owner-sidebar .card { height: 100%; overflow: hidden; position: relative; }
.cs-owner-main-area .card .card-body { padding: 1.05rem !important; }
.cs-owner-main-area .card-title,
.cs-owner-sidebar .card-title {
  align-items: center;
  color: #102945;
  display: flex;
  font-size: 0.92rem;
  font-weight: 750;
  gap: 0.22rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.95rem;
}
.cs-owner-main-area .card-title span,
.cs-owner-sidebar .card-title > span:last-child {
  color: var(--cs-gray);
  font-size: 0.67rem;
  font-weight: 500;
}
.cs-owner-main-area .filter { right: 0.9rem; top: 0.88rem; }
.cs-owner-main-area .filter .icon {
  align-items: center;
  background: #f5f8fa;
  border: 1px solid #dbe4eb;
  border-radius: 0.42rem;
  color: var(--cs-gray);
  display: inline-flex;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}
.cs-owner-main-area .filter .icon:hover { color: var(--cs-primary); }
.cs-owner-main-area .apexcharts-canvas { margin: 0 auto; }
.cs-owner-main-area .table-responsive,
.cs-owner-sidebar .table-responsive {
  border: 1px solid #dbe4eb;
  border-radius: 0.55rem;
}
.cs-owner-main-area table,
.cs-owner-sidebar table { margin-bottom: 0 !important; }
.cs-owner-main-area table thead tr,
.cs-owner-sidebar table thead tr { background: #f6f9fb; }
.cs-owner-main-area table th,
.cs-owner-sidebar table th {
  color: var(--cs-gray);
  font-size: 0.62rem !important;
  font-weight: 750;
  letter-spacing: 0.055em;
  padding: 0.58rem 0.65rem !important;
  text-transform: uppercase;
}
.cs-owner-main-area table td,
.cs-owner-sidebar table td {
  border-color: #edf1f4;
  color: #405267;
  font-size: 0.7rem;
  padding: 0.62rem 0.65rem !important;
  vertical-align: middle;
}
.cs-owner-main-area table tbody tr:hover,
.cs-owner-sidebar table tbody tr:hover { background: #f9fbfd; }
.cs-owner-main-area table a,
.cs-owner-sidebar table a { color: var(--cs-primary); font-weight: 700; text-decoration: none; }
.cs-owner-main-area .badge,
.cs-owner-sidebar .badge { border-radius: 0.3rem; font-size: 0.6rem; font-weight: 700; padding: 0.3rem 0.4rem; }
.cs-owner-briefing-divider {
  align-items: baseline;
  display: flex;
  gap: 0.62rem;
  margin: 0.2rem 0 -0.25rem;
}
.cs-owner-briefing-divider strong {
  color: #102945;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.cs-owner-briefing-divider span {
  color: var(--cs-gray);
  font-size: 0.65rem;
}
.cs-owner-section-card { border-top: 3px solid #e3ebef !important; }
.cs-owner-health { border-top-color: #0f9f80 !important; }
.cs-owner-value-card { border-top-color: #176bd7 !important; }
.cs-owner-operations-card { border-top-color: #7868bd !important; }
.cs-owner-card-label {
  color: var(--cs-primary);
  font-size: 0.59rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  margin-bottom: 0.32rem;
  text-transform: uppercase;
}
.cs-owner-main-area .cs-owner-card-label + .card-title { margin-top: 0; }
.cs-owner-section-note {
  color: var(--cs-gray);
  font-size: 0.68rem;
  line-height: 1.45;
  margin: -0.42rem 0 0.65rem;
}
.cs-owner-health .card-body > .row { margin-top: 0.15rem; }
.cs-owner-ranking-card .card-title,
.cs-owner-loyalty-card .card-title { min-height: 1.4rem; }
.cs-owner-card-header {
  align-items: center;
  display: flex;
  gap: 0.62rem;
  margin-bottom: 0.8rem;
}
.cs-owner-card-header .cs-owner-icon { height: 1.85rem; width: 1.85rem; }
.cs-owner-card-header .cs-owner-card-label { margin-bottom: 0.24rem; }
.cs-owner-card-header .card-title { margin-bottom: 0; }
.cs-owner-demand-card .cs-owner-section-card { border-top-color: #176bd7 !important; }
.cs-owner-cash-card .cs-owner-section-card { border-top-color: #0f9f80 !important; }
.cs-owner-recurring-card .cs-owner-section-card { border-top-color: #d89324 !important; }
.cs-owner-ledger-card .cs-owner-section-card { border-top-color: #7868bd !important; }
.cs-owner-demand-icon { background: #eaf2fb; color: #176bd7; }
.cs-owner-cash-icon { background: #e0f5ed; color: #0f9f80; }
.cs-owner-recurring-icon { background: #fff2da; color: #a46b0b; }
.cs-owner-ledger-icon,
.cs-owner-work-icon { background: #eeebfa; color: #7868bd; }
.cs-owner-ranked-list { padding: 0.12rem 0 0.35rem; }
.cs-owner-ranked-row {
  align-items: flex-start;
  display: flex;
  gap: 0.48rem;
  padding: 0.45rem 0;
}
.cs-owner-ranked-row + .cs-owner-ranked-row { border-top: 1px solid #eef2f4; }
.cs-owner-rank-marker {
  align-items: center;
  background: #eef3f6;
  border-radius: 0.32rem;
  color: #60758a;
  display: inline-flex;
  flex: 0 0 1.35rem;
  font-size: 0.6rem;
  font-weight: 800;
  height: 1.35rem;
  justify-content: center;
  margin-top: 0.05rem;
  width: 1.35rem;
}
.cs-owner-rank-marker.rank-1 { background: #fff0d2; color: #98640b; }
.cs-owner-rank-marker.rank-2 { background: #e8eef2; color: #536a7c; }
.cs-owner-rank-marker.rank-3 { background: #f6e9dd; color: #9b6335; }
.cs-owner-ranked-main { flex: 1; min-width: 0; }
.cs-owner-ranked-meta {
  align-items: baseline;
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
}
.cs-owner-ranked-name {
  color: #243a52;
  font-size: 0.68rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-owner-ranked-meta strong {
  color: #102945;
  flex: 0 0 auto;
  font-size: 0.67rem;
  font-weight: 800;
  white-space: nowrap;
}
.cs-owner-ranked-meta strong small { color: var(--cs-gray); font-size: 0.57rem; font-weight: 700; }
.cs-owner-ranked-track {
  background: #eaf0f3;
  border-radius: 99rem;
  height: 0.34rem;
  margin-top: 0.33rem;
  overflow: hidden;
  width: 100%;
}
.cs-owner-ranked-track > span { display: block; height: 100%; transition: width 0.35s ease; }
.cs-owner-ranked-revenue .cs-owner-ranked-track > span { background: var(--cs-primary); border-radius: inherit; }
.cs-owner-ranked-qty .cs-owner-ranked-track > span { background: #0f9f80; border-radius: inherit; }
.cs-owner-ranked-submeta { color: var(--cs-gray); font-size: 0.58rem; margin-top: 0.22rem; }
.cs-owner-split-track { display: flex; gap: 1px; }
.cs-owner-split-track .cs-owner-ranked-payg { background: var(--cs-primary); }
.cs-owner-split-track .cs-owner-ranked-subscription { background: #7868bd; }
.cs-owner-customer-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.7rem;
  margin-top: 0.25rem;
}
.cs-owner-customer-breakdown span { color: var(--cs-gray); font-size: 0.57rem; white-space: nowrap; }
.cs-owner-key {
  border-radius: 50%;
  display: inline-block;
  height: 0.36rem;
  margin-right: 0.2rem;
  vertical-align: 0.02rem;
  width: 0.36rem;
}
.cs-owner-key.payg { background: var(--cs-primary); }
.cs-owner-key.subscription { background: #7868bd; }
.cs-owner-sidebar .row { row-gap: 1rem !important; }
.cs-owner-sidebar .card-body { padding: 1.05rem !important; }
.cs-owner-sidebar .cs-activity-card { padding: 0; }
.cs-owner-sidebar .cs-activity-card .cs-activity-header { padding: 1.05rem 1.05rem 0.75rem !important; }
.cs-owner-sidebar .cs-activity-card .card-title { margin-bottom: 0; }
.cs-owner-sidebar .cs-activity-card .cs-activity-item { padding: 0.68rem 1.05rem !important; }
.cs-owner-sidebar .cs-activity-card .cs-act-pager { padding: 0.65rem 1.05rem !important; }
.cs-owner-sidebar .cs-owner-activity-card {
  border-top: 3px solid #708496 !important;
  padding: 1.05rem;
}
.cs-owner-sidebar .cs-owner-activity-card .card-body { padding: 0 !important; }
.cs-owner-sidebar .cs-owner-activity-card .cs-owner-activity-header {
  align-items: center;
  border: 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  padding: 0 !important;
}
.cs-owner-sidebar .cs-owner-activity-card .cs-owner-activity-icon { background: #eef3f6; color: #708496; }
.cs-owner-sidebar .cs-owner-activity-card .cs-owner-card-label { margin-bottom: 0.24rem; }
.cs-owner-sidebar .cs-owner-activity-card .card-title span { color: var(--cs-gray); font-size: 0.67rem; font-weight: 500; }
.cs-owner-activity-actions { align-items: center; display: flex; gap: 0.45rem; }
.cs-owner-activity-link {
  align-items: center;
  background: #f8fafb;
  border: 1px solid #dbe4eb;
  border-radius: 0.48rem;
  color: var(--cs-primary);
  display: inline-flex;
  height: 1.85rem;
  justify-content: center;
  width: 1.85rem;
}
.cs-owner-activity-link:hover { background: #edf4fc; border-color: #b9d1ec; color: var(--cs-primary); }
.cs-owner-sidebar .cs-owner-activity-card .cs-activity-item {
  border-top: 1px solid #edf2f4;
  padding: 0.62rem 0 !important;
}
.cs-owner-sidebar .cs-owner-activity-card .cs-act-icon {
  border-radius: 0.48rem;
  height: 1.85rem;
  width: 1.85rem;
}
.cs-owner-sidebar .cs-owner-activity-card .cs-act-pager {
  border-top-color: #edf2f4 !important;
  margin-top: 0.15rem;
  padding: 0.65rem 0 0 !important;
}
.cs-owner-sidebar .card:has(#reminderToastContainer) {
  background: #fffdf7;
  border-color: #ead9ad;
  overflow: visible;
}
.cs-owner-sidebar .card:has(#reminderToastContainer) .card-title .bi-alarm { color: #a66a0b !important; }
.cs-owner-sidebar #reminderToastContainer { min-width: 15rem !important; }
.cs-owner-sidebar .d-flex.flex-column.gap-2 { display: grid !important; grid-template-columns: 1fr 1fr; }
.cs-owner-sidebar .d-flex.flex-column.gap-2 .btn {
  align-items: center;
  background: #f8fafb;
  border-color: #dbe4eb;
  border-radius: 0.5rem;
  color: #102945;
  display: flex;
  font-size: 0.64rem;
  font-weight: 700;
  min-height: 3.5rem;
  padding: 0.55rem !important;
}
.cs-owner-sidebar .d-flex.flex-column.gap-2 .btn:hover { background: #edf4fc; border-color: #b9d1ec; color: #102945; }
.cs-owner-sidebar .d-flex.flex-column.gap-2 .btn i { color: var(--cs-primary); font-size: 0.86rem; }
.kp-pwa-status {
  background: #fff4df;
  border: 1px solid #f0d49d;
  border-radius: 0.65rem;
  bottom: 1rem;
  box-shadow: 0 5px 18px rgba(16, 41, 69, 0.12);
  color: #805b12;
  font-size: 0.76rem;
  font-weight: 700;
  left: 1rem;
  max-width: min(360px, calc(100vw - 2rem));
  padding: 0.7rem 0.85rem;
  position: fixed;
  z-index: 11000;
}
.kp-pwa-status:not(.is-offline) {
  background: #e7f7ef;
  border-color: #b8e4ca;
  color: #17653c;
}
.kp-pwa-prompt {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe4eb;
  border-radius: 0.8rem;
  bottom: 1rem;
  box-shadow: 0 8px 26px rgba(16, 41, 69, 0.16);
  display: flex;
  gap: 0.65rem;
  max-width: min(410px, calc(100vw - 2rem));
  padding: 0.7rem 0.75rem;
  position: fixed;
  right: 1rem;
  z-index: 11000;
}
.kp-pwa-prompt[hidden],
.kp-pwa-status[hidden] { display: none !important; }
.kp-pwa-prompt-icon {
  align-items: center;
  background: #e8f0fe;
  border-radius: 0.55rem;
  color: var(--cs-primary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.kp-pwa-prompt-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.kp-pwa-prompt-copy strong { color: #102945; font-size: 0.76rem; }
.kp-pwa-prompt-copy span { color: var(--cs-gray); font-size: 0.66rem; line-height: 1.3; margin-top: 0.1rem; }
.kp-pwa-prompt-action {
  background: var(--cs-primary);
  border: 0;
  border-radius: 0.45rem;
  color: #fff;
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.48rem 0.62rem;
  white-space: nowrap;
}
.kp-pwa-prompt-dismiss {
  background: transparent;
  border: 0;
  color: var(--cs-gray);
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0.1rem 0.2rem;
}
.kp-pwa-prompt-action:focus-visible,
.kp-pwa-prompt-dismiss:focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 2px; }
.kp-pwa-update { bottom: 1rem; }
@media (max-width: 991px) {
  .cs-owner-sidebar .row { display: grid; grid-template-columns: 1fr 1fr; }
  .cs-owner-sidebar .row > .col-12 { width: auto; }
}
@media (max-width: 675px) {
  .cs-owner-page-title { align-items: flex-start; flex-direction: column; }
  .cs-owner-period { justify-content: space-between; width: 100%; }
  .cs-owner-period button { flex: 1; }
  .cs-owner-metrics { grid-template-columns: repeat(2, 1fr); }
  .cs-owner-finance-summary { grid-template-columns: repeat(2, 1fr); }
  .cs-owner-panel { padding: 0.85rem; }
  .cs-owner-briefing-divider { align-items: flex-start; flex-direction: column; gap: 0.15rem; margin-bottom: -0.15rem; }
  .cs-owner-ranked-meta { align-items: flex-start; flex-direction: column; gap: 0.08rem; }
  .cs-owner-ranked-name { white-space: normal; }
  .cs-owner-sidebar .row { display: block; }
  .cs-owner-sidebar .row > .col-12 + .col-12 { margin-top: 1rem; }
  .cs-owner-sidebar .d-flex.flex-column.gap-2 { grid-template-columns: 1fr; }
  .kp-pwa-status { bottom: 0.75rem; left: 0.75rem; }
  .kp-pwa-prompt { bottom: 0.75rem; max-width: calc(100vw - 1.5rem); right: 0.75rem; }
}

/* ===== INTERNAL MESSAGING ===== */
.cs-msg-row {
  cursor: pointer;
  transition: background 0.15s;
}

.cs-msg-row:hover {
  background: var(--cs-gray-lt) !important;
}

.cs-msg-unread {
  background: var(--cs-primary-light) !important;
  border-left: 3px solid var(--cs-primary) !important;
}

.cs-msg-unread:hover {
  background: #dbeafe !important;
}

.cs-msg-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cs-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0;
}

.cs-msg-avatar-sent {
  background: var(--cs-success);
}

.cs-msg-avatar-order {
  background: var(--cs-warning);
  color: #fff;
}

.cs-msg-sender {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--cs-dark);
}

.cs-msg-time {
  font-size: 0.75rem;
  color: var(--cs-gray);
  white-space: nowrap;
}

.cs-msg-subject {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cs-dark);
  margin-top: 2px;
}

.cs-msg-preview {
  font-size: 0.8rem;
  color: var(--cs-gray);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cs-msg-body {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--cs-dark);
}

/* Messaging side-nav active state */
.messaging-nav .nav-link.active,
.messaging-nav .nav-link:hover {
  background: var(--cs-primary-light);
  color: var(--cs-primary);
}

/* ===== APEXCHARTS RESTYLING ===== */
/* Force Inter font throughout every chart */
.apexcharts-canvas,
.apexcharts-canvas text { font-family: 'Inter', sans-serif !important; }
.apexcharts-legend-text { font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; }

/* Tooltip */
.apexcharts-tooltip {
  border-radius: 8px !important;
  box-shadow: 0 4px 24px rgba(15,23,42,0.10) !important;
  border: 1px solid #e2e8f0 !important;
}
.apexcharts-tooltip-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 6px 12px !important;
  color: #0f172a !important;
}
.apexcharts-tooltip-text,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value { font-size: 12px !important; }
.apexcharts-xaxistooltip { border-radius: 6px !important; }

/* Axis labels */
.apexcharts-xaxis-label tspan,
.apexcharts-yaxis-label tspan { font-family: 'Inter', sans-serif !important; }

/* ===== MAIL CLIENT ===== */

/* Layout shell */
.cs-mail-layout { display: flex; min-height: 560px; }

/* Sidebar */
.cs-mail-sidebar {
  width: 195px; flex-shrink: 0;
  padding: 16px 10px;
  border-right: 1px solid var(--cs-border);
}
.cs-mail-compose-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 16px; margin-bottom: 16px;
  background: var(--cs-primary); color: #fff !important;
  border: none; border-radius: 24px;
  font-size: 0.82rem; font-weight: 600; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--cs-primary-rgb),0.25);
  transition: background 0.15s, box-shadow 0.15s;
}
.cs-mail-compose-btn:hover {
  background: #1558d6;
  box-shadow: 0 4px 12px rgba(var(--cs-primary-rgb),0.35);
}
.cs-mail-folder {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 10px; border-radius: 8px;
  color: #475569; font-size: 0.8rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 1px;
}
.cs-mail-folder:hover { background: #f1f5f9; color: var(--cs-dark); }
.cs-mail-folder.active { background: var(--cs-primary-light); color: var(--cs-primary); font-weight: 700; }
.cs-mail-folder .cs-mail-count {
  margin-left: auto; background: var(--cs-primary); color: #fff;
  font-size: 0.62rem; font-weight: 700; padding: 1px 6px;
  border-radius: 10px; min-width: 18px; text-align: center;
}
.cs-mail-divider { height: 1px; background: var(--cs-border); margin: 8px 2px; }

/* List */
.cs-mail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-mail-list-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid var(--cs-border);
  font-size: 0.78rem; font-weight: 600; color: var(--cs-gray);
  flex-shrink: 0; flex-wrap: wrap;
}

/* Search bar inside list header */
.cs-mail-search { flex-shrink: 0; }
.cs-mail-search-wrap {
  position: relative; display: flex; align-items: center;
}
.cs-mail-search-icon {
  position: absolute; left: 8px;
  font-size: 0.75rem; color: #94a3b8; pointer-events: none;
}
.cs-mail-search-input {
  padding: 4px 28px 4px 26px;
  border: 1px solid var(--cs-border); border-radius: 20px;
  font-size: 0.75rem; color: var(--cs-dark);
  background: #f8fafc; width: 200px;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.cs-mail-search-input:focus {
  border-color: var(--cs-primary);
  box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb),.12);
  background: #fff;
}
.cs-mail-search-input::placeholder { color: #b0bec5; }
.cs-mail-search-clear {
  position: absolute; right: 8px;
  font-size: 0.65rem; color: #94a3b8; line-height: 1;
  text-decoration: none; display: flex; align-items: center;
  transition: color 0.15s;
}
.cs-mail-search-clear:hover { color: #ef4444; }

.cs-mail-row {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px; height: 50px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer; transition: background 0.1s;
}
.cs-mail-row:hover { background: #f8fafc; }
.cs-mail-row:last-child { border-bottom: none; }
.cs-mail-row.unread { background: #eef4ff; }
.cs-mail-row.unread:hover { background: #e6effe; }

/* Icon toggle buttons (star / important) */
.cs-mail-icon-btn {
  flex-shrink: 0; width: 26px; height: 26px;
  border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer;
  color: #cbd5e1; font-size: 12px;
  transition: color 0.15s, background 0.15s;
}
.cs-mail-icon-btn:hover { background: #e2e8f0; color: #94a3b8; }
.cs-mail-icon-btn.starred   { color: #f59e0b !important; }
.cs-mail-icon-btn.important { color: #f59e0b !important; }

/* Avatar */
.cs-mail-av {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.67rem; font-weight: 700; color: #fff;
  background: var(--cs-primary);
}
.cs-mail-av.order { background: #0891b2; }
.cs-mail-av.sent  { background: #6366f1; }

/* Sender column — two-line (name + type tag) */
.cs-mail-sender-col {
  flex-shrink: 0; width: 140px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.cs-mail-sender-name {
  font-size: 0.8rem; font-weight: 500; color: var(--cs-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-mail-row.unread .cs-mail-sender-name { font-weight: 700; }

/* Staff / Customer type tag */
.cs-mail-type-tag {
  display: inline-block;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 1px 5px; border-radius: 4px; white-space: nowrap;
}
.cs-mail-type-tag.staff    { background: #f1f5f9; color: #475569; }
.cs-mail-type-tag.manager  { background: #eef2ff; color: #4338ca; }
.cs-mail-type-tag.owner    { background: #faf5ff; color: #7c3aed; }
.cs-mail-type-tag.customer { background: #f0fdf4; color: #15803d; }

/* ── Thread bubbles ─────────────────────────────────────── */
.cs-mail-thread            { padding: 0 20px 8px; display: flex; flex-direction: column; gap: 12px; }
.cs-mail-thread-bubble     { border: 1px solid var(--cs-border); border-radius: 10px; overflow: hidden; }
.cs-mail-thread-bubble.root{ border-color: #c7d7fd; }
.cs-mail-thread-hdr        { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
                              background: #f8fafc; border-bottom: 1px solid var(--cs-border); }
.cs-mail-thread-bubble.root .cs-mail-thread-hdr { background: #eff6ff; border-bottom-color: #c7d7fd; }
.cs-mail-thread-av         { width: 34px; height: 34px; border-radius: 50%; background: var(--cs-primary);
                              color: #fff; font-size: 0.7rem; font-weight: 700;
                              display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs-mail-thread-from       { font-size: 0.83rem; font-weight: 600; color: #1e293b; }
.cs-mail-thread-date       { font-size: 0.75rem; color: #94a3b8; margin-left: auto; white-space: nowrap; }
.cs-mail-thread-body       { padding: 16px; font-size: 0.875rem; line-height: 1.8; color: #334155; }

/* ── Inline reply box ───────────────────────────────────── */
.cs-mail-reply-wrap        { padding: 0 20px 20px; }
.cs-mail-reply-box         { border: 1px solid var(--cs-border); border-radius: 10px; overflow: hidden;
                              transition: border-color .15s; }
.cs-mail-reply-box:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 3px rgba(var(--cs-primary-rgb),.08); }
.cs-mail-reply-box textarea{ width: 100%; border: none; outline: none; resize: none;
                              padding: 14px 16px; font-size: 0.875rem; line-height: 1.7;
                              font-family: 'Inter', sans-serif; min-height: 90px; background: transparent; }
.cs-mail-reply-footer      { display: flex; align-items: center; gap: 8px;
                              padding: 10px 14px; border-top: 1px solid var(--cs-border); background: #f8fafc; }

/* "To:" label in All Messages subject column */
.cs-mail-to-tag { font-size: 0.75rem; color: var(--cs-gray); font-weight: 500; }

/* Subject + preview */
.cs-mail-body-col {
  flex: 1; min-width: 0;
  font-size: 0.8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-mail-subject-text { color: var(--cs-dark); }
.cs-mail-row.unread .cs-mail-subject-text { font-weight: 700; }
.cs-mail-sep { color: #cbd5e1; margin: 0 5px; }
.cs-mail-preview-text { color: var(--cs-gray); }

/* Badges */
.cs-mail-badge {
  flex-shrink: 0; font-size: 0.58rem; font-weight: 700;
  padding: 2px 5px; border-radius: 4px; white-space: nowrap;
}
.cs-mail-badge.order   { background: #e0f2fe; color: #0369a1; }
.cs-mail-badge.new     { background: var(--cs-primary); color: #fff; }
.cs-mail-badge.replies { background: #f0fdf4; color: #15803d; display: inline-flex; align-items: center; gap: 3px; }

/* Timestamp */
.cs-mail-time-col {
  flex-shrink: 0; font-size: 0.73rem; color: var(--cs-gray);
  white-space: nowrap; min-width: 46px; text-align: right;
}
.cs-mail-row.unread .cs-mail-time-col { font-weight: 600; color: var(--cs-dark); }

/* Empty state */
.cs-mail-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 56px 20px; color: var(--cs-gray); text-align: center;
}
.cs-mail-empty i { font-size: 2.5rem; color: #e2e8f0; margin-bottom: 14px; display: block; }
.cs-mail-empty p { font-size: 0.875rem; margin: 0; }

/* Compose form */
.cs-mail-compose-row {
  display: flex; align-items: center;
  padding: 11px 20px; border-bottom: 1px solid var(--cs-border); gap: 12px;
}
.cs-mail-compose-label {
  font-size: 0.78rem; font-weight: 700; color: var(--cs-gray);
  min-width: 58px; flex-shrink: 0;
}
.cs-mail-compose-input {
  flex: 1; border: none; outline: none;
  font-size: 0.875rem; color: var(--cs-dark); background: transparent;
  font-family: 'Inter', sans-serif;
}
.cs-mail-compose-input::placeholder { color: #cbd5e1; }
.cs-mail-compose-body { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; }
.cs-mail-compose-body textarea {
  flex: 1; width: 100%; border: none; outline: none; resize: none;
  font-size: 0.875rem; color: var(--cs-dark); line-height: 1.75;
  background: transparent; font-family: 'Inter', sans-serif;
  min-height: 240px;
}
.cs-mail-compose-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--cs-border); flex-shrink: 0;
}

/* Detail view */
.cs-mail-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-bottom: 1px solid var(--cs-border); flex-shrink: 0;
}
.cs-mail-toolbar .btn { font-size: 0.78rem; }
.cs-mail-detail-subject {
  font-size: 1.1rem; font-weight: 700; color: var(--cs-dark);
  padding: 18px 20px 4px;
}
.cs-mail-detail-meta {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 8px 20px 16px; border-bottom: 1px solid var(--cs-border);
}
.cs-mail-detail-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--cs-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; flex-shrink: 0;
}
.cs-mail-detail-from { font-size: 0.875rem; font-weight: 600; color: var(--cs-dark); }
.cs-mail-detail-sub  { font-size: 0.75rem; color: var(--cs-gray); margin-top: 1px; }
.cs-mail-detail-date { font-size: 0.75rem; color: var(--cs-gray); margin-left: auto; white-space: nowrap; }
.cs-mail-detail-body {
  padding: 24px 20px;
  font-size: 0.9rem; line-height: 1.85; color: #334155;
}

/* Responsive */
@media (max-width: 767px) {
  .cs-mail-layout   { flex-direction: column; }
  .cs-mail-sidebar  { width: 100%; border-right: none; border-bottom: 1px solid var(--cs-border); padding: 10px; }
  .cs-mail-compose-btn { margin-bottom: 8px; }
  .cs-mail-folders  { display: flex; flex-wrap: wrap; gap: 4px; }
  .cs-mail-folder   { padding: 4px 10px; font-size: 0.75rem; }
  .cs-mail-divider  { display: none; }
  .cs-mail-sender-col { width: 90px; min-width: 90px; }
  .cs-mail-icon-btn { display: none; }
}

/* ===== RECENT ACTIVITY FEED ===== */
.cs-activity-card { border: 1px solid var(--cs-border) !important; overflow: hidden; }
.cs-activity-header { border-bottom: none; }

.cs-activity-feed { overflow: hidden; }
.cs-act-pager { display: flex; }

.cs-activity-item {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid #f8fafc;
  transition: background 0.12s;
  color: var(--cs-dark) !important;
}
.cs-activity-item:last-child { border-bottom: none; }
.cs-activity-item:hover { background: #f8fafc; }
.cs-activity-urgent { background: #fff7f7 !important; }
.cs-activity-urgent:hover { background: #fff0f0 !important; }

.cs-act-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; margin-top: 2px;
}
.cs-act-primary { background: rgba(var(--cs-primary-rgb),0.10); color: var(--cs-primary); }
.cs-act-success { background: rgba(16,185,129,0.10); color: #10b981; }
.cs-act-warning { background: rgba(245,158,11,0.10); color: #d97706; }
.cs-act-danger  { background: rgba(239,68,68,0.10);  color: #ef4444; }
.cs-act-info    { background: rgba(6,182,212,0.10);  color: #06b6d4; }

.cs-act-title { font-size: 0.78rem; font-weight: 600; color: var(--cs-dark); line-height: 1.3; }
.cs-act-sub   { font-size: 0.72rem; color: var(--cs-gray); margin-top: 1px; }
.cs-act-meta  { font-size: 0.68rem; color: #94a3b8; margin-top: 2px; }
.cs-act-actor { font-weight: 500; }
.cs-act-dot   { margin: 0 3px; }

.cs-act-urgent-dot {
  width: 7px; height: 7px; background: #ef4444;
  border-radius: 50%; margin-top: 6px; flex-shrink: 0;
}

/* ===== STAT CARD ACCENT TOPS ===== */
.info-card { position: relative !important; overflow: hidden !important; }
.info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 10px 10px 0 0;
  z-index: 1;
}
.sales-card::before     { background: linear-gradient(90deg, var(--cs-primary) 0%, var(--cs-primary-dark) 100%); }
.revenue-card::before   { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }
.customers-card::before { background: linear-gradient(90deg, #f59e0b 0%, #fcd34d 100%); }

/* ===== BULK SELECTION ===== */
.cs-bulk-select-all-wrap {
  display: flex; align-items: center; cursor: pointer;
  margin-right: 6px; flex-shrink: 0;
}
.cs-bulk-row-check {
  display: flex; align-items: center; cursor: pointer;
  width: 22px; flex-shrink: 0; margin-right: 2px;
}
.cs-bulk-row-check .form-check-input,
.cs-bulk-select-all-wrap .form-check-input {
  width: 15px; height: 15px; cursor: pointer; margin: 0;
  border-color: #cbd5e1; flex-shrink: 0;
}
.cs-bulk-bar {
  display: none; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  font-size: 0.85rem;
}
.cs-bulk-count-text {
  font-weight: 500; color: #1e40af; white-space: nowrap; margin-right: 4px;
}

/* ===== DJANGO MESSAGES ===== */
#django-messages-container {
  margin-top: 60px;
  padding: 16px 30px 0;
}
@media (min-width: 1200px) {
  #django-messages-container {
    margin-left: 300px;
  }
}
.toggle-sidebar #django-messages-container {
  margin-left: 0;
}
#django-messages-container .alert {
  border-radius: 10px;
  border: none;
}