/* Global ERP theme: values are supplied by Settings > Theme colors. */
:root {
  --erp-primary: #202124;
  --erp-accent: #C9A227;
  --erp-sidebar: #202124;
  --erp-background: #F5F3EF;
  --erp-surface: #FFFFFF;
  --erp-text: #252525;
  --erp-muted: #77736C;
  --erp-sidebar-text: #FFFFFF;
  --erp-sidebar-muted: #B8BBC4;
  --erp-sidebar-active: #C9A227;
  --erp-sidebar-active-text: #202124;
  --erp-sidebar-hover: #414757;
  --erp-button-secondary: #E9E4D8;
  --erp-button-secondary-text: #252525;
  --erp-border: #E4E1DA;
  --erp-input-background: #FFFFFF;
  --erp-link: #8A6A08;
  --erp-accent-main-percent: 12%;
  --erp-accent-background-percent: 8%;
  --erp-primary-mixed: var(--erp-primary);
  --erp-background-mixed: color-mix(in srgb, var(--erp-background) calc(100% - var(--erp-accent-workspace-percent, 6%)), var(--erp-accent) var(--erp-accent-workspace-percent, 6%));
  --erp-sidebar-mixed: color-mix(in srgb, var(--erp-sidebar) calc(100% - var(--erp-accent-sidebar-percent, 4%)), var(--erp-accent) var(--erp-accent-sidebar-percent, 4%));
  --erp-primary-contrast: var(--erp-primary-text, #FFFFFF);
  --erp-accent-contrast: var(--erp-accent-text, #202124);
}

body {
  background-color: var(--erp-background-mixed) !important;
  color: var(--erp-text) !important;
}
.bg-white { background-color: var(--erp-surface) !important; }
.bg-slate-50 { background-color: var(--erp-background-mixed) !important; }
.bg-slate-950, .bg-slate-900 { background-color: var(--erp-primary-mixed) !important; }
aside.bg-slate-950 { background-color: var(--erp-sidebar-mixed) !important; }
.text-slate-950, .text-slate-900, .text-slate-800, .text-slate-700 { color: var(--erp-text) !important; }
.text-slate-600, .text-slate-500, .text-slate-400 { color: var(--erp-muted) !important; }
.border-slate-200, .border-slate-100, .ring-slate-200\/70, .ring-slate-200\/80 {
  border-color: var(--erp-border) !important;
}

/* Sidebar has independent normal, muted, hover and active states. */
aside.bg-slate-950 { color: var(--erp-sidebar-text); }
aside.bg-slate-950 .text-white,
aside.bg-slate-950 .nav-item:not(.nav-item-active) { color: var(--erp-sidebar-text) !important; }
aside.bg-slate-950 .nav-label,
aside.bg-slate-950 .text-slate-500,
aside.bg-slate-950 .text-slate-400,
aside.bg-slate-950 .text-slate-600 { color: var(--erp-sidebar-muted) !important; }
.nav-item-active {
  background-color: var(--erp-sidebar-active) !important;
  color: var(--erp-sidebar-active-text) !important;
}
.nav-item-active .nav-icon,
.nav-item-active span { color: var(--erp-sidebar-active-text) !important; }
.nav-item:hover:not(.nav-item-active) { background-color: var(--erp-sidebar-hover) !important; }
.nav-item { transition: background-color 140ms ease, color 140ms ease; }

/* Main and neutral action buttons. Semantic success/warning/danger colors remain intact. */
button.bg-slate-950, a.bg-slate-950,
button.bg-slate-900, a.bg-slate-900,
button.theme-primary-action, a.theme-primary-action {
  background-color: var(--erp-primary) !important;
  color: var(--erp-primary-text, var(--erp-primary-contrast)) !important;
}
button.bg-slate-950:hover, a.bg-slate-950:hover,
button.bg-slate-900:hover, a.bg-slate-900:hover,
button.theme-primary-action:hover, a.theme-primary-action:hover { filter: brightness(1.08); }
button.theme-secondary-action, a.theme-secondary-action,
button.bg-white.border, a.bg-white.border,
button.border-slate-200, a.border-slate-200 {
  border-color: var(--erp-border) !important;
}
button.border-slate-200,
a.border-slate-200 {
  background-color: var(--erp-button-secondary) !important;
  color: var(--erp-button-secondary-text) !important;
}
button.theme-secondary-action, a.theme-secondary-action {
  background-color: var(--erp-button-secondary) !important;
  color: var(--erp-button-secondary-text) !important;
}
button.theme-secondary-action, a.theme-secondary-action,
.theme-button-secondary {
  background-color: var(--erp-button-secondary) !important;
  color: var(--erp-button-secondary-text) !important;
}
a:not(.nav-item-active):not([class*="bg-"]) {
  color: var(--erp-link);
  text-decoration-color: color-mix(in srgb, var(--erp-link) 60%, transparent);
}
input, select, textarea {
  accent-color: var(--erp-accent);
  background-color: var(--erp-input-background);
  border-color: var(--erp-input-border, var(--erp-border));
  color: var(--erp-input-text, var(--erp-text));
}
input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible { outline-color: var(--erp-accent); }
input:focus, select:focus, textarea:focus {
  border-color: var(--erp-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-accent) 18%, transparent);
}

/* Theme settings: color controls and live samples use the same palette variables. */
.theme-color-input {
  min-width: 4rem;
  min-height: 3rem;
  border: 1px solid color-mix(in srgb, var(--erp-muted) 30%, transparent);
}
.theme-value-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  border-radius: 0.3rem;
  border: 1px solid color-mix(in srgb, var(--erp-muted) 35%, transparent);
  background: var(--swatch-color, var(--erp-surface));
}
.theme-preview-shell { color: var(--erp-text); }
.theme-preview-nav { background: var(--erp-sidebar); color: var(--erp-sidebar-text); }
.theme-preview-mark { color: var(--erp-primary-mixed); }
.theme-preview-card { background: var(--erp-surface); color: var(--erp-text); }
.theme-preview-primary {
  background: var(--erp-primary-mixed);
  color: var(--erp-primary-contrast);
}
.theme-preview-secondary {
  background: var(--erp-button-secondary);
  color: var(--erp-button-secondary-text);
}
.theme-preview-input {
  background: var(--erp-input-background);
  color: var(--erp-muted);
  border: 1px solid var(--erp-border);
}
.theme-preview-dot { background: var(--erp-accent); }
.theme-setting-field {
  border-color: var(--erp-border);
  background: var(--erp-surface);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.theme-setting-field:focus-within {
  border-color: color-mix(in srgb, var(--erp-accent) 65%, transparent);
  background: color-mix(in srgb, var(--erp-accent) 5%, var(--erp-surface));
}
.theme-setting-field input[type="range"] { width: 100%; min-width: 7rem; accent-color: var(--erp-accent); }
.theme-setting-field output { overflow-wrap: anywhere; }

/* Shared animated background sits behind every authenticated and public page. */
.erp-ambient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
.erp-ambient-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  pointer-events: none;
}
body > .erp-ambient-background + * {
  position: relative;
  z-index: 1;
}

/* User-adjustable workspace layout preferences. */
html { font-size: var(--erp-font-size, 16px); }
.erp-sidebar-resizable {
  width: var(--erp-sidebar-width, 272px) !important;
  flex: 0 0 var(--erp-sidebar-width, 272px) !important;
  min-width: 220px;
  max-width: 360px;
}
.erp-sidebar-resize-handle {
  position: absolute;
  z-index: 15;
  top: 72px;
  right: 0;
  bottom: 0;
  width: 7px;
  padding: 0;
  cursor: col-resize;
  touch-action: none;
  background: transparent;
  border: 0;
}
.erp-sidebar-resize-handle::after {
  content: "";
  position: absolute;
  inset: 0 2px;
  background: transparent;
  transition: background-color .15s ease;
}
.erp-sidebar-resize-handle:hover::after,
.erp-sidebar-resize-handle:focus-visible::after,
body.erp-sidebar-resizing .erp-sidebar-resize-handle::after {
  background: color-mix(in srgb, var(--erp-accent) 80%, transparent);
}
body.erp-sidebar-resizing { cursor: col-resize !important; user-select: none !important; }
body.erp-sidebar-resizing * { cursor: col-resize !important; user-select: none !important; }
.layout-preference-card {
  border: 1px solid var(--erp-border);
  border-radius: 1rem;
  background: var(--erp-surface);
  padding: 1.25rem;
}
.layout-preference-range { width: 100%; accent-color: var(--erp-accent); cursor: pointer; }
@media (max-width: 1023px) {
  .erp-sidebar-resize-handle { display: none; }
  .erp-sidebar-resizable { width: 272px !important; flex-basis: 272px !important; }
}


/* Expanded theme areas: workspace, navigation, actions, statuses and authentication. */
.erp-top-navbar { background-color: color-mix(in srgb, var(--erp-navbar, #FFFFFF) 90%, transparent) !important; color: var(--erp-navbar-text, var(--erp-text)) !important; border-color: var(--erp-border) !important; }
.erp-top-navbar .text-slate-900, .erp-top-navbar .text-slate-700, .erp-top-navbar .text-slate-600 { color: var(--erp-navbar-text, var(--erp-text)) !important; }
.erp-top-navbar .text-slate-500, .erp-top-navbar .text-slate-400 { color: var(--erp-navbar-muted, var(--erp-muted)) !important; }
.erp-sidebar-brand { background: var(--erp-sidebar-secondary, var(--erp-sidebar)); }
.bg-slate-100, .bg-gray-50, .bg-stone-50 { background-color: var(--erp-background-secondary, var(--erp-background)) !important; }
.theme-preview-primary { background: var(--erp-primary) !important; color: var(--erp-primary-text, #FFFFFF) !important; }
.theme-preview-secondary { background: var(--erp-accent) !important; color: var(--erp-accent-text, #202124) !important; }
.theme-preview-neutral { background: var(--erp-button-secondary) !important; color: var(--erp-button-secondary-text) !important; }
.theme-preview-input { color: var(--erp-input-text, var(--erp-text)) !important; border-color: var(--erp-input-border, var(--erp-border)) !important; }
.theme-preview-card { color: var(--erp-card-text, var(--erp-text)); }
.theme-preview-card [data-theme-preview-text="card-text"] { color: var(--erp-card-text, var(--erp-text)); }
.theme-preview-shell { background-color: var(--erp-background-mixed); }
.theme-setting-field { border: 1px solid var(--erp-border); }
.theme-percent-input { width: 100%; min-width: 7rem; accent-color: var(--erp-accent); cursor: pointer; }
.theme-palette-group:first-child { border-top: 0; padding-top: 0; }
body:not(:has(#erp-sidebar)) { background: var(--erp-auth-background, var(--erp-background-mixed)) !important; color: var(--erp-auth-text, var(--erp-text)) !important; }
body:not(:has(#erp-sidebar)) .bg-white, body:not(:has(#erp-sidebar)) .rounded-2xl.bg-white, body:not(:has(#erp-sidebar)) .auth-panel { background-color: var(--erp-auth-panel, var(--erp-surface)) !important; }
.bg-emerald-600, .bg-green-600 { background-color: var(--erp-success, #15803D) !important; color: var(--erp-success-text, #FFFFFF) !important; }
.bg-emerald-50, .bg-green-50 { background-color: color-mix(in srgb, var(--erp-success, #15803D) 10%, var(--erp-surface, #FFFFFF)) !important; color: var(--erp-success, #15803D) !important; }
.bg-amber-50, .bg-yellow-50 { background-color: color-mix(in srgb, var(--erp-warning, #D97706) 10%, var(--erp-surface, #FFFFFF)) !important; color: var(--erp-warning, #D97706) !important; }
.bg-red-50, .bg-rose-50 { background-color: color-mix(in srgb, var(--erp-danger, #DC2626) 9%, var(--erp-surface, #FFFFFF)) !important; color: var(--erp-danger, #DC2626) !important; }
.bg-sky-50, .bg-blue-50 { background-color: color-mix(in srgb, var(--erp-info, #0284C7) 9%, var(--erp-surface, #FFFFFF)) !important; color: var(--erp-info, #0284C7) !important; }
.bg-amber-500, .bg-amber-600, .bg-yellow-600 { background-color: var(--erp-warning, #D97706) !important; color: var(--erp-warning-text, #FFFFFF) !important; }
.bg-red-600, .bg-rose-600, .bg-red-700 { background-color: var(--erp-danger, #DC2626) !important; color: var(--erp-danger-text, #FFFFFF) !important; }
.bg-sky-600, .bg-blue-600 { background-color: var(--erp-info, #0284C7) !important; color: var(--erp-info-text, #FFFFFF) !important; }
button.bg-slate-950:hover, a.bg-slate-950:hover, button.bg-slate-900:hover, a.bg-slate-900:hover, .theme-primary-action:hover { background-color: var(--erp-primary-hover, var(--erp-primary)) !important; filter: none !important; }


/* Theme settings page: clear hierarchy without adding controls for new UI areas. */
.theme-settings-heading {
  padding-bottom: 1.25rem;
}
.theme-settings-panel {
  border: 1px solid var(--erp-border);
  box-shadow: 0 8px 28px rgb(32 33 36 / 4%);
}
.theme-palette-group > div:first-child h4 {
  letter-spacing: -0.01em;
}
.theme-palette-group > div:first-child p {
  max-width: 46rem;
}
.theme-setting-field {
  align-items: center;
  min-height: 7.25rem;
  gap: 1rem;
  background: color-mix(in srgb, var(--erp-surface) 92%, var(--erp-background));
}
.theme-setting-field > div:first-child {
  flex: 0 0 auto;
}
.theme-setting-field > div:first-child input[type="color"] {
  display: block;
  width: 3.25rem;
  min-width: 3.25rem;
  height: 3.25rem;
  min-height: 3.25rem;
  padding: .2rem;
  border-radius: .75rem;
  cursor: pointer;
}
.theme-setting-field > div:first-child input[type="range"] {
  width: 100%;
  min-width: 8rem;
  max-width: 14rem;
}
.theme-setting-field label {
  line-height: 1.35;
}
.theme-setting-field p {
  line-height: 1.45;
}
.theme-setting-field:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--erp-accent) 15%, transparent);
}
.theme-setting-field output {
  font-variant-numeric: tabular-nums;
}
.theme-setting-field:has(input[type="range"]) {
  align-items: flex-start;
}
.theme-setting-field:has(input[type="range"]) > div:first-child {
  flex: 1 1 45%;
  min-width: 0;
  padding-top: .2rem;
}
.theme-setting-field:has(input[type="range"]) > div:last-child {
  flex: 1 1 55%;
}
.theme-setting-field:has(input[type="range"]) input[type="range"] {
  display: block;
  min-width: 0;
  width: 100%;
  margin-top: .35rem;
}
.theme-settings-actions {
  padding-top: .25rem;
}
@media (max-width: 639px) {
  .theme-setting-field {
    min-height: 0;
    padding: .85rem;
  }
  .theme-setting-field > div:first-child input[type="color"] {
    width: 2.8rem;
    min-width: 2.8rem;
    height: 2.8rem;
    min-height: 2.8rem;
  }
  .theme-setting-field:has(input[type="range"]) {
    display: block;
  }
  .theme-setting-field:has(input[type="range"]) > div:first-child,
  .theme-setting-field:has(input[type="range"]) > div:last-child {
    width: 100%;
  }
}


/* M-Pesa dashboard: utility navigation links use the universal theme, except
   "View all batches", which retains its original appearance. */
.mpesa-dashboard a[href="/mpesa/configuration/"],
.mpesa-dashboard a[href="/mpesa/logs/"],
.mpesa-dashboard a[href="/approvals/"] {
  background-color: var(--erp-primary) !important;
  color: var(--erp-primary-text, var(--erp-primary-contrast)) !important;
  border-color: var(--erp-primary) !important;
  text-decoration: none !important;
  transition: background-color 140ms ease, border-color 140ms ease, filter 140ms ease;
}
.mpesa-dashboard a[href="/mpesa/configuration/"] *,
.mpesa-dashboard a[href="/mpesa/logs/"] *,
.mpesa-dashboard a[href="/approvals/"] * {
  color: inherit !important;
}
.mpesa-dashboard a[href="/mpesa/configuration/"]:hover,
.mpesa-dashboard a[href="/mpesa/logs/"]:hover,
.mpesa-dashboard a[href="/approvals/"]:hover {
  background-color: var(--erp-primary-hover, var(--erp-primary)) !important;
  border-color: var(--erp-primary-hover, var(--erp-primary)) !important;
  filter: brightness(1.04);
}
.mpesa-dashboard a[href="/mpesa/configuration/"]:focus-visible,
.mpesa-dashboard a[href="/mpesa/logs/"]:focus-visible,
.mpesa-dashboard a[href="/approvals/"]:focus-visible {
  outline: 2px solid var(--erp-accent) !important;
  outline-offset: 2px;
}


/* Keep the top-navbar user avatar compact even when utility CSS is stale. */
.erp-top-navbar .erp-navbar-avatar {
    display: block;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem;
    max-width: 2rem;
    flex: 0 0 2rem;
    object-fit: cover;
    border-radius: 9999px;
}


/* Profile page: keep the portrait compact and the editing workspace centered. */
.erp-profile-page-avatar,
.erp-profile-page-avatar-fallback {
    display: block;
    width: 4rem !important;
    height: 4rem !important;
    min-width: 4rem;
    max-width: 4rem;
    flex: 0 0 4rem;
}
.erp-profile-page-avatar {
    object-fit: cover;
    border-radius: 9999px;
}
.erp-profile-page-avatar-fallback {
    display: flex;
    font-size: 1.25rem;
}
@media (max-width: 639px) {
    .erp-profile-page-avatar,
    .erp-profile-page-avatar-fallback {
        width: 3.5rem !important;
        height: 3.5rem !important;
        min-width: 3.5rem;
        max-width: 3.5rem;
        flex-basis: 3.5rem;
    }
}


/* Keep profile cards visibly rounded even when the compiled utility CSS is stale. */
.erp-profile-card {
  border-radius: 1.5rem !important;
}


/* Persistent viewport footer: keep it visible independently of page content and SPA swaps. */
#erp-global-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 44px;
  background-color: var(--erp-navbar, #FFFFFF) !important;
  color: var(--erp-navbar-muted, var(--erp-muted, #77736C)) !important;
  border-top: 1px solid var(--erp-border, #E4E1DA) !important;
}
#app-content { padding-bottom: 5rem !important; }
@media (min-width: 1024px) {
  #erp-global-footer { left: var(--erp-sidebar-width, 272px) !important; }
}