/* =====================================================================
   Sage-inspired theme overrides — loaded AFTER app.css.
   Light overrides are scoped to `html.light` so the existing dark-mode
   toggle (which removes the `light` class) keeps working untouched.
   RTL variants are provided via [dir="rtl"] selectors.
   ===================================================================== */

:root{
  --sage-primary: 0 116 74;        /* #00744A */
  --sage-primary-600: 0 107 67;    /* #006B43 */
  --sage-primary-700: 0 82 58;     /* #00523A */
  --sage-primary-400: 40 158 79;
  --sage-primary-300: 93 182 122;
  --sage-primary-200: 146 207 166;
  --sage-primary-100: 199 231 210;
  --sage-primary-50:  232 245 238;
  --sage-bg:        #F4F6F8;
  --sage-surface:   #FFFFFF;
  --sage-line:      #E6E8EB;
  --sage-text:      #0F1B2D;
  --sage-muted:     #5B6B7E;
}

/* ---------- Typography (color/family only — neutral for dark mode) ---------- */
html, body, .font-inter, .dashcode-app{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: -0.005em;
}

/* ---------- Primary color overrides (apply in BOTH light + dark) ---------- */
.bg-primary-500,.bg-primary-600,.bg-primary-700,
.\!bg-primary-500{
  background-color: rgb(var(--sage-primary) / var(--tw-bg-opacity, 1)) !important;
}
.bg-primary-400{ background-color: rgb(var(--sage-primary-400) / var(--tw-bg-opacity, 1)) !important; }
.bg-primary-900{ background-color: rgb(var(--sage-primary-700) / var(--tw-bg-opacity, 1)) !important; }
.text-primary-500,.text-primary-600,.text-primary-700,
.\!text-primary-700{ color: rgb(var(--sage-primary) / var(--tw-text-opacity, 1)) !important; }
.text-primary-900{ color: rgb(var(--sage-primary-700) / var(--tw-text-opacity, 1)) !important; }
.border-primary-500,.border-primary-400{
  border-color: rgb(var(--sage-primary) / var(--tw-border-opacity, 1)) !important;
}
.outline-primary-500{ outline-color: rgb(var(--sage-primary)) !important; }
.ring-primary-500{ --tw-ring-color: rgb(var(--sage-primary) / var(--tw-ring-opacity,1)) !important; }
.hover\:bg-primary-600:hover,
.focus\:bg-primary-600:focus,
.active\:bg-primary-700:active{
  background-color: rgb(var(--sage-primary-600) / var(--tw-bg-opacity, 1)) !important;
}
.peer:checked ~ .peer-checked\:bg-primary-500{ background-color: rgb(var(--sage-primary)) !important; }
.to-primary-500{ --tw-gradient-to: rgb(var(--sage-primary)) !important; }
.dark .dark\:bg-primary-500,
.dark .dark\:\!bg-primary-500{ background-color: rgb(var(--sage-primary)) !important; }
.dark .dark\:border-primary-400{ border-color: rgb(var(--sage-primary-400)) !important; }
.dark .dark\:\!text-primary-400{ color: rgb(var(--sage-primary-400)) !important; }
.dark .dark\:hover\:text-primary-400:hover{ color: rgb(var(--sage-primary-400)) !important; }

/* Public-site palette overrides */
.btn-primary,.bg-blue-500,.bg-blue-600,.bg-blue-700{
  background-color: rgb(var(--sage-primary)) !important;
  border-color: rgb(var(--sage-primary)) !important;
  color: #fff !important;
}
.btn-primary:hover,.bg-blue-500:hover,.bg-blue-600:hover{
  background-color: rgb(var(--sage-primary-600)) !important;
}
.text-blue-500,.text-blue-600,.text-blue-700{ color: rgb(var(--sage-primary)) !important; }

/* ===================================================================
   LIGHT-ONLY surface restyle (scoped to html.light so dark mode keeps
   its existing dark colors).
   =================================================================== */

html.light body{ background: var(--sage-bg) !important; color: var(--sage-text); }
html.light a{ transition: color .15s ease; }
html.light a:hover{ color: rgb(var(--sage-primary)); }

/* App shell */
html.light .app-wrapper{ background: var(--sage-bg); }
html.light .app-header{
  background: var(--sage-surface) !important;
  border-bottom: 1px solid var(--sage-line) !important;
  box-shadow: none !important;
  height: 64px !important;
  padding: 0 24px;
}
html.light .content-wrapper{ background: var(--sage-bg); }
html.light .page-content{ padding-top: 24px; }

/* Sidebar */
.sidebar-wrapper{
  z-index: 1030 !important;
}
html.light .sidebar-wrapper{
  background: var(--sage-surface) !important;
  border-right: 1px solid var(--sage-line) !important;
  width: 248px;
}
[dir="rtl"] html.light .sidebar-wrapper,
html.light[dir="rtl"] .sidebar-wrapper{
  border-right: none !important;
  border-left: 1px solid var(--sage-line) !important;
}
html.light .sidebar-wrapper .logo-segment{
  border-bottom: 1px solid var(--sage-line);
  height: 64px;
  padding: 0 20px;
}
html.light .sidebar-menus{ background: var(--sage-surface) !important; padding: 8px 12px !important; }
html.light .sidebar-menu-title{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px !important;
  color: #8696A8 !important;
  font-weight: 600 !important;
  padding: 18px 12px 6px !important;
}
html.light .sidebar-menu .navItem{
  display: flex; align-items: center;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: #2A3A4F !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  margin: 1px 0;
  transition: background .12s ease, color .12s ease;
}
html.light .sidebar-menu .navItem:hover{ background: #F1F3F5 !important; color: var(--sage-text) !important; }
html.light .sidebar-menu .navItem.active{
  background: rgb(var(--sage-primary-50)) !important;
  color: rgb(var(--sage-primary)) !important;
  font-weight: 600 !important;
  position: relative;
}
html.light .sidebar-menu .navItem.active::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background: rgb(var(--sage-primary)); border-radius: 0 3px 3px 0;
}
[dir="rtl"] html.light .sidebar-menu .navItem.active::before,
html.light[dir="rtl"] .sidebar-menu .navItem.active::before{
  left: auto; right: -12px; border-radius: 3px 0 0 3px;
}
html.light .sidebar-menu .nav-icon{
  font-size: 18px !important;
  margin-right: 10px;
  color: inherit !important;
}
[dir="rtl"] html.light .sidebar-menu .nav-icon,
html.light[dir="rtl"] .sidebar-menu .nav-icon{
  margin-right: 0; margin-left: 10px;
}

/* Sidebar bottom subscription card (always Sage gradient) */
#sidebar_bottom_wizard{
  background: linear-gradient(135deg, rgb(var(--sage-primary)) 0%, rgb(var(--sage-primary-700)) 100%) !important;
  border-radius: 14px !important;
}

/* Buttons (shape applies in both modes; colors light-only) */
.btn{
  border-radius: 8px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  transition: all .15s ease;
}
.btn-sm{ padding: 6px 12px !important; font-size: 13px !important; }
html.light .btn-light{
  background: var(--sage-surface) !important;
  color: var(--sage-text) !important;
  border: 1px solid var(--sage-line) !important;
}
html.light .btn-light:hover{ background: #F1F3F5 !important; }
html.light .btn-dark{
  background: rgb(var(--sage-primary)) !important;
  border-color: rgb(var(--sage-primary)) !important;
  color: #fff !important;
}
html.light .btn-dark:hover{ background: rgb(var(--sage-primary-600)) !important; }

/* Cards (light only) */
html.light .card, html.light .box, html.light .dashcode-card{
  background: var(--sage-surface) !important;
  border: 1px solid var(--sage-line) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}
html.light .shadow, html.light .shadow-sm, html.light .shadow-md{
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04), 0 1px 3px rgba(15, 27, 45, 0.04) !important;
}

/* Forms (light only — dark mode keeps its slate styling) */
html.light .form-control,
html.light input[type="text"], html.light input[type="email"], html.light input[type="password"],
html.light input[type="number"], html.light input[type="date"], html.light input[type="search"],
html.light select, html.light textarea{
  border: 1px solid var(--sage-line) !important;
  border-radius: 8px !important;
  background: var(--sage-surface) !important;
  color: var(--sage-text) !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  transition: border-color .12s ease, box-shadow .12s ease;
}
html.light .form-control:focus,
html.light input:focus, html.light select:focus, html.light textarea:focus{
  outline: none !important;
  border-color: rgb(var(--sage-primary)) !important;
  box-shadow: 0 0 0 3px rgb(var(--sage-primary-50)) !important;
}
html.light label{ font-size: 13px; font-weight: 500; color: var(--sage-text); }

/* Tables (light only) */
html.light table{ border-collapse: separate; border-spacing: 0; width: 100%; }
html.light table thead th{
  background: #F8F9FB !important;
  color: #5B6B7E !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--sage-line) !important;
}
html.light table tbody td{
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--sage-line) !important;
  font-size: 14px;
  color: var(--sage-text);
}
html.light table tbody tr:hover{ background: #FAFBFC; }

/* Pagination */
.page-item.active .page-link{
  background-color: rgb(var(--sage-primary)) !important;
  border-color: rgb(var(--sage-primary)) !important;
  color: #fff !important;
}
html.light .page-link{
  color: var(--sage-text) !important;
  border-color: var(--sage-line) !important;
  border-radius: 6px !important;
  margin: 0 2px;
}

/* Status pills */
.badge, .pill, .status{
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 4px 10px !important;
}

/* Header buttons (light only) */
html.light .app-header .btn-sm{ padding: 7px 14px !important; }
html.light .app-header .btn-light{ border: 1px solid var(--sage-line) !important; }
html.light .app-header .btn-light:first-of-type{
  background: rgb(var(--sage-primary)) !important;
  color: #fff !important;
  border-color: rgb(var(--sage-primary)) !important;
}
html.light .app-header .btn-light:first-of-type:hover{ background: rgb(var(--sage-primary-600)) !important; }

/* Misc */
html.light hr{ border-color: var(--sage-line); }
html.light *::-webkit-scrollbar{ width: 10px; height: 10px; }
html.light *::-webkit-scrollbar-thumb{ background: #D5DBE0; border-radius: 10px; border: 2px solid var(--sage-bg); }
html.light *::-webkit-scrollbar-track{ background: transparent; }

/* =====================================================================
   DASHBOARD MODERNISATION — Welcome banner, KPI cards, status badges,
   card headers, sidebar sub-widget, header avatar.
   ===================================================================== */

/* --- Welcome banner --- */
.dash-welcome-banner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--sage-surface);
  border: 1px solid var(--sage-line);
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.dash-welcome-left{
  display: flex;
  align-items: center;
  gap: 16px;
}
.dash-avatar{
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgb(var(--sage-primary));
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}
.dash-greeting{
  font-size: 13px;
  color: var(--sage-muted);
  margin: 0 0 2px;
}
.dash-username{
  font-size: 20px;
  font-weight: 700;
  color: var(--sage-text);
  margin: 0 0 2px;
  letter-spacing: -0.02em;
}
.dash-company{
  font-size: 13px;
  color: var(--sage-muted);
  margin: 0;
}
.dash-welcome-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dash-btn-primary{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  background: rgb(var(--sage-primary));
  color: #fff !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s;
}
.dash-btn-primary:hover{ background: rgb(var(--sage-primary-600)); color: #fff !important; }
.dash-btn-outline{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px;
  background: var(--sage-surface);
  color: var(--sage-text) !important;
  border: 1px solid var(--sage-line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s;
}
.dash-btn-outline:hover{ background: #F1F3F5; color: var(--sage-text) !important; }

/* --- KPI grid & cards --- */
.kpi-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 0;
}
@media (max-width: 1199px){ .kpi-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .kpi-grid{ grid-template-columns: 1fr; } }

.kpi-card{
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--sage-surface);
  border: 1px solid var(--sage-line);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none !important;
  transition: box-shadow .15s, transform .15s;
}
.kpi-card:hover{
  box-shadow: 0 4px 16px rgba(0,116,74,.08);
  transform: translateY(-1px);
}
.kpi-icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.kpi-icon--green { background: rgb(var(--sage-primary-50)); color: rgb(var(--sage-primary)); }
.kpi-icon--blue  { background: #EEF2FF; color: #4F46E5; }
.kpi-icon--amber { background: #FFFBEB; color: #D97706; }
.kpi-icon--violet{ background: #F5F3FF; color: #7C3AED; }

.kpi-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-label{ font-size: 12px; font-weight: 600; color: var(--sage-muted); text-transform: uppercase; letter-spacing: .05em; }
.kpi-value{ font-size: 26px; font-weight: 700; color: var(--sage-text); letter-spacing: -0.03em; line-height: 1.1; }
.kpi-sub  { font-size: 12px; color: var(--sage-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Count badges inside tables --- */
.kpi-badge{
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.kpi-badge--green { background: rgb(var(--sage-primary-50)); color: rgb(var(--sage-primary)); }
.kpi-badge--blue  { background: #EEF2FF; color: #4F46E5; }
.kpi-badge--amber { background: #FFFBEB; color: #D97706; }

/* --- Status badges (tables: quotes & invoices) --- */
.status-badge{
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  margin-top: 4px;
}
.status-badge--draft { background: #F1F3F5; color: #5B6B7E; }
.status-badge--sent  { background: #FFFBEB; color: #B45309; }
.status-badge--paid  { background: rgb(var(--sage-primary-50)); color: rgb(var(--sage-primary)); }
.status-badge--overdue{ background: #FEF2F2; color: #DC2626; }

/* --- Modern card headers --- */
.dash-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--sage-line);
}
.dash-card-header-left{
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-card-icon{
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.dash-card-icon--green  { background: rgb(var(--sage-primary-50)); color: rgb(var(--sage-primary)); }
.dash-card-icon--violet { background: #F5F3FF; color: #7C3AED; }
.dash-card-icon--blue   { background: #EEF2FF; color: #4F46E5; }
.dash-card-icon--amber  { background: #FFFBEB; color: #D97706; }

.dash-card-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--sage-text);
  display: block;
  line-height: 1.2;
}
.dash-card-sub{
  font-size: 11px;
  color: var(--sage-muted);
  display: block;
}
.dash-viewall{
  font-size: 12px;
  font-weight: 600;
  color: rgb(var(--sage-primary));
  text-decoration: none !important;
  white-space: nowrap;
}
.dash-viewall:hover{ color: rgb(var(--sage-primary-600)); }

/* --- Sidebar section titles (remove inline styles in template) --- */
html.light .sidebar-menu .sidebar-menu-title{
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 10.5px !important;
  color: #8696A8 !important;
  font-weight: 700 !important;
  padding: 16px 12px 5px !important;
  pointer-events: none;
}

/* --- Sidebar subscription widget --- */
.sidebar-sub-widget{
  margin: 20px 0 28px;
  padding: 16px;
  background: linear-gradient(135deg, rgb(var(--sage-primary)) 0%, rgb(var(--sage-primary-700)) 100%);
  border-radius: 14px;
  color: #fff;
}
.sidebar-sub-widget-icon{
  width: 40px; height: 40px;
  background: rgba(255,255,255,.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.sidebar-sub-widget-title{
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}
.sidebar-sub-widget-date{
  font-size: 11px;
  opacity: .8;
  margin-bottom: 12px;
}
.sidebar-sub-widget-btn{
  display: block;
  text-align: center;
  background: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff !important;
  border-radius: 7px;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background .15s;
}
.sidebar-sub-widget-btn:hover{ background: rgba(255,255,255,.35); }

/* --- Header initials avatar --- */
.header-avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgb(var(--sage-primary));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  letter-spacing: -0.01em;
}

/* --- Dark mode — keep dark surfaces for new components --- */
.dark .dash-welcome-banner,
.dark .kpi-card{
  background: #1E293B;
  border-color: #334155;
}
.dark .dash-username,
.dark .kpi-value{ color: #F1F5F9; }
.dark .dash-greeting,
.dark .dash-company,
.dark .kpi-label,
.dark .kpi-sub{ color: #94A3B8; }
.dark .dash-btn-outline{
  background: #1E293B;
  color: #F1F5F9 !important;
  border-color: #334155;
}
.dark .dash-card-header{ border-color: #334155; }
.dark .dash-card-title{ color: #F1F5F9; }
.dark .dash-card-sub{ color: #94A3B8; }

/* --- Sidebar logo image (replaces inline styles) --- */
.sidebar-logo-img{
  height: 44px;
  width: auto;
  object-fit: contain;
}
.sidebar-logo-img--full{
  width: 80%;
  height: auto;
}

/* --- Welcome action button icon size --- */
.dash-btn-icon{ font-size: 16px; }

/* --- Admin breadcrumb trail --- */
.admin-breadcrumb{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--sage-muted, #5B6B7E);
  font-weight: 500;
  padding-left: 8px;
}
.admin-breadcrumb a{
  color: var(--sage-muted, #5B6B7E);
  text-decoration: none;
  transition: color .12s ease;
}
.admin-breadcrumb a:hover{ color: rgb(var(--sage-primary)); }
.admin-breadcrumb .crumb-sep{
  font-size: 12px;
  opacity: .5;
  user-select: none;
}
.admin-breadcrumb .crumb-current{
  color: var(--sage-text, #0F1B2D);
  font-weight: 600;
}
.dark .admin-breadcrumb,
.dark .admin-breadcrumb a{ color: #94A3B8; }
.dark .admin-breadcrumb .crumb-current{ color: #F1F5F9; }

/* --- Payment toast notifications --- */
#sage-toast-container{
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.sage-toast{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #00744A;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  padding: 14px 18px;
  min-width: 260px;
  max-width: 340px;
  pointer-events: auto;
  animation: sage-toast-in .3s ease forwards;
}
.sage-toast.sage-toast--out{
  animation: sage-toast-out .3s ease forwards;
}
.sage-toast-icon{
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: #00744A;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  margin-top: 1px;
}
.sage-toast-body{
  flex: 1;
  min-width: 0;
}
.sage-toast-title{
  font-size: 13px;
  font-weight: 600;
  color: #0F1B2D;
  line-height: 1.3;
}
.sage-toast-sub{
  font-size: 12px;
  color: #5B6B7E;
  margin-top: 2px;
}
.sage-toast-close{
  background: none;
  border: none;
  cursor: pointer;
  color: #94A3B8;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}
.sage-toast-close:hover{ color: #475569; }
.dark .sage-toast{
  background: #1E293B;
  border-color: #334155;
  border-left-color: #00744A;
}
.dark .sage-toast-title{ color: #F1F5F9; }
.dark .sage-toast-sub{ color: #94A3B8; }
@keyframes sage-toast-in{
  from{ opacity:0; transform:translateY(12px); }
  to{   opacity:1; transform:translateY(0); }
}
@keyframes sage-toast-out{
  from{ opacity:1; transform:translateY(0); }
  to{   opacity:0; transform:translateY(12px); }
}

	/* ── Desktop sidebar layout (>= 1025px) ───────────────────────────
	   Ensure the sidebar never overlaps content on standard laptops/desktops.
	   Overrides any stale .margin-0 class that JS may have added before resize. */
	@media (min-width: 1025px) {
	  [dir="ltr"] .content-wrapper,
	  [dir="ltr"] .app-header {
	    margin-left: 248px !important;
	  }
	  [dir="rtl"] .content-wrapper,
	  [dir="rtl"] .app-header {
	    margin-right: 248px !important;
	  }
	  .sidebar-wrapper.menu-hide {
	    display: block !important;
	    transform: none !important;
	    left: 0 !important;
	  }
	}

	/* =====================================================================
	   RICH EMPTY STATES (for empty tables / collections)
	   ===================================================================== */
	.sage-empty-state {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  text-align: center;
	  padding: 48px 24px;
	  background: var(--sage-surface, #ffffff);
	}
	.sage-empty-icon {
	  width: 64px;
	  height: 64px;
	  border-radius: 16px;
	  background: rgb(var(--sage-primary-50, 232 245 238));
	  color: rgb(var(--sage-primary, 0 116 74));
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 32px;
	  margin-bottom: 16px;
	}
	.sage-empty-title {
	  font-size: 16px;
	  font-weight: 700;
	  color: var(--sage-text, #0F1B2D);
	  margin-bottom: 6px;
	}
	.sage-empty-desc {
	  font-size: 13px;
	  color: var(--sage-muted, #5B6B7E);
	  max-width: 380px;
	  line-height: 1.5;
	  margin-bottom: 20px;
	}
	.sage-empty-action {
	  display: inline-flex;
	  align-items: center;
	  gap: 8px;
	  padding: 9px 20px;
	  background: rgb(var(--sage-primary, 0 116 74));
	  color: #fff !important;
	  border-radius: 8px;
	  font-size: 13px;
	  font-weight: 600;
	  text-decoration: none !important;
	  transition: background .15s ease;
	}
	.sage-empty-action:hover {
	  background: rgb(var(--sage-primary-600, 0 107 67));
	  color: #fff !important;
	}
	.dark .sage-empty-state {
	  background: #1E293B;
	}
	.dark .sage-empty-icon {
	  background: rgba(0, 116, 74, 0.15);
	  color: rgb(var(--sage-primary-400, 40 158 79));
	}
	.dark .sage-empty-title {
	  color: #F1F5F9;
	}
	.dark .sage-empty-desc {
	  color: #94A3B8;
	}

/* Prevent long unbroken strings (e.g. emails) from overflowing fixed-layout table cells (client/invoice/user tables) */
.table-td{overflow-wrap:anywhere;}

/* =====================================================================
   SIDEBAR DRAWER FIX
   The mobile drawer would not close on phones. This slides the sidebar
   off-screen when it carries the "menu-hide" class, and keeps the
   sidebar fully visible on desktop regardless of that class.
   ===================================================================== */

/* Desktop: sidebar always visible even with .menu-hide */
@media (min-width: 1025px) {
  .sidebar-wrapper.menu-hide {
    width: 248px !important;
    overflow: visible !important;
  }
}

/* Mobile (<= 1024px): proper slide-in / slide-out drawer */
@media (max-width: 1024px) {
  .sidebar-wrapper {
    width: 248px !important;
    transition: transform 0.3s ease;
  }
  [dir="ltr"] .sidebar-wrapper.menu-hide {
    transform: translateX(-100%) !important;
  }
  [dir="rtl"] .sidebar-wrapper.menu-hide {
    transform: translateX(100%) !important;
  }
  [dir="ltr"] .sidebar-wrapper:not(.menu-hide),
  [dir="rtl"] .sidebar-wrapper:not(.menu-hide) {
    transform: translateX(0) !important;
  }
  [dir="ltr"] .app-header,
  [dir="ltr"] .content-wrapper {
    margin-left: 0 !important;
  }
  [dir="rtl"] .app-header,
  [dir="rtl"] .content-wrapper {
    margin-right: 0 !important;
  }
}

/* =====================================================================
   AUTH PAGES (login / signup / verify / reset) - responsive fixes
   The original template locked these pages to 100vh, so on phones the
   form overflowed and text overlapped. Allow natural scrolling and keep
   the form readable on small screens.
   ===================================================================== */
@media (max-width: 1023px) {
  .loginwrapper {
    height: auto !important;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow: visible !important;
    align-items: flex-start;
  }
  .loginwrapper .lg-inner-column {
    height: auto !important;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow: visible !important;
    display: block;
  }
  .loginwrapper .right-column {
    height: auto !important;
  }
  .loginwrapper .inner-content {
    height: auto !important;
  }
  .loginwrapper .auth-box,
  .loginwrapper .auth-box-3 {
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .loginwrapper .auth-box h4 {
    font-size: 1.375rem !important;
    line-height: 1.75rem !important;
  }
}

/* Mobile accordion arrow rotation */
#modulesToggleArrow.rotate-180 {
  transform: rotate(180deg);
}

/* =====================================================================
   MOBILE TABLE FIX (all list pages)
   The app's tables use table-layout:fixed, which squeezes every column
   to a sliver on phones and wraps text letter-by-letter. On small
   screens we switch to natural column widths with horizontal scrolling.
   ===================================================================== */
@media (max-width: 1023px) {
  .content-wrapper .dashcode-data-table,
  .content-wrapper .table-responsive,
  .content-wrapper .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  .content-wrapper table.table-fixed {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 720px !important;
    white-space: nowrap;
  }
  .content-wrapper .table-responsive {
    overflow-x: auto !important;
  }
  .content-wrapper .table-responsive table {
    min-width: 640px !important;
    white-space: nowrap;
  }
}

/* Long label/value rows (e.g. Tax Profile Settings) wrap neatly on phones */
@media (max-width: 575px) {
  .list-group-item.d-flex.justify-content-between,
  .list-group-item.d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* ------------------------------------------------------------------
   Data-table readability (audit fix, 2026-09-20)
   The theme forced Title Case on every table cell, which mangled real
   data (emails, subjects, names). Show values exactly as stored, and let
   long values wrap instead of colliding with the cell edge.
   ------------------------------------------------------------------ */
.table-td { text-transform: none; vertical-align: top; overflow-wrap: anywhere; }
.table-td.subj { white-space: normal; word-break: normal; }
.table-td.nums { white-space: nowrap; }
.table-td.acts { white-space: nowrap; }
.table-td .email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }

/* ------------------------------------------------------------------
   Document action bar (quote / invoice view)
   Icon + label were vertically inconsistent between inline SVG icons
   and <iconify-icon> web components: the outreach button rendered 40px
   tall next to 30px siblings. Normalise every action button and its
   icon slot so all buttons share one height and baseline.
   ------------------------------------------------------------------ */
.invocie-btn { align-items: center; line-height: 1.25; }
.invocie-btn > span { display: inline-flex; align-items: center; min-height: 18px; }
.invocie-btn > span.text-lg {
  width: 18px; height: 18px; flex: 0 0 18px;
  justify-content: center; font-size: 18px; line-height: 1;
}
.invocie-btn > span.text-lg > svg,
.invocie-btn > span.text-lg > iconify-icon { display: block; width: 1em; height: 1em; }