/* ============================================================
   GEKTO ERP Design System — layers on top of KaiAdmin + Bootstrap 5
   ============================================================ */

/* --- 0. Design Tokens --- */

:root {
  --g-primary: #0F766E;
  --g-primary-light: #14B8A6;
  --g-primary-dark: #0D5F58;
  --g-primary-50: #F0FDFA;
  --g-primary-100: #CCFBF1;

  --g-gray-50: #FAFAF9;
  --g-gray-100: #F5F5F4;
  --g-gray-200: #E7E5E4;
  --g-gray-300: #D6D3D1;
  --g-gray-400: #A8A29E;
  --g-gray-500: #78716C;
  --g-gray-600: #57534E;
  --g-gray-700: #44403C;
  --g-gray-800: #292524;
  --g-gray-900: #1C1917;

  --g-success: #16A34A;
  --g-success-light: #DCFCE7;
  --g-warning: #D97706;
  --g-warning-light: #FEF3C7;
  --g-danger: #DC2626;
  --g-danger-light: #FEE2E2;
  --g-info: #2563EB;
  --g-info-light: #DBEAFE;

  --g-bg: #FAFAF9;
  --g-bg-card: #FFFFFF;
  --g-bg-sidebar: #FFFFFF;
  --g-bg-sidebar-active: rgba(15, 118, 110, 0.08);

  --g-text-primary: #1C1917;
  --g-text-secondary: #57534E;
  --g-text-tertiary: #A8A29E;
  --g-text-on-dark: #FAFAF9;
  --g-text-on-primary: #FFFFFF;

  --g-border: #E7E5E4;
  --g-border-light: #F5F5F4;

  --g-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --g-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --g-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --g-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  --g-radius-sm: 6px;
  --g-radius: 8px;
  --g-radius-lg: 12px;
  --g-radius-xl: 16px;

  --g-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- 0b. Typography --- */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--g-text-primary);
  background: var(--g-bg);
  -webkit-font-smoothing: antialiased;
}

.g-text-xs  { font-size: 12px; line-height: 16px; }
.g-text-sm  { font-size: 13px; line-height: 18px; }
.g-text-base { font-size: 14px; line-height: 20px; }
.g-text-lg  { font-size: 16px; line-height: 24px; }
.g-text-xl  { font-size: 18px; line-height: 28px; }
.g-text-2xl { font-size: 20px; line-height: 28px; }
.g-text-3xl { font-size: 24px; line-height: 32px; }
.g-text-4xl { font-size: 30px; line-height: 36px; }

.g-tabular { font-variant-numeric: tabular-nums; }

/* --- 1. Sidebar --- */

.sidebar.app-sidebar {
  background: var(--g-bg-sidebar) !important;
  border-right: 1px solid var(--g-border) !important;
  box-shadow: none !important;
  top: 0 !important;
  height: 100vh !important;
  transition: width 0.3s ease !important;
}

.sidebar .sidebar-wrapper {
  max-height: calc(100vh - 73px) !important;
}

.app-sidebar .logo-header {
  height: 73px !important;
  border-bottom: 1px solid var(--g-border) !important;
  border-right: 1px solid var(--g-border) !important;
}

.app-logo-mini {
  display: none;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: var(--g-text-primary) !important;
  line-height: 1 !important;
}

/* Kill border from .nav-secondary .nav-link (KaiAdmin adds border:1px solid #eee) */
.sidebar .nav.nav-secondary .nav-link,
.sidebar .nav.nav-secondary > .nav-item > a {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Kill purple active from .nav-secondary>.nav-item.active>a */
.sidebar .nav.nav-secondary > .nav-item.active > a {
  background: var(--g-bg-sidebar-active) !important;
  box-shadow: none !important;
}

/* Kill purple icon/text colors from .nav-secondary hover/active/focus */
.sidebar .nav.nav-secondary > .nav-item a:hover i,
.sidebar .nav.nav-secondary > .nav-item a:focus i,
.sidebar .nav.nav-secondary > .nav-item.active a i,
.sidebar .nav.nav-secondary > .nav-item a[data-toggle="collapse"][aria-expanded="true"] i,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a:hover i,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a:focus i,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.active a i,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a[data-toggle="collapse"][aria-expanded="true"] i {
  color: inherit !important;
}

/* Kill purple active text/caret colors */
.sidebar .nav.nav-secondary > .nav-item.active > a .caret,
.sidebar .nav.nav-secondary > .nav-item.active > a p,
.sidebar .nav.nav-secondary > .nav-item.active > a span,
.sidebar .nav.nav-secondary > .nav-item .nav-collapse li.active > a {
  color: var(--g-primary) !important;
}

/* Kill purple ::before indicator on active/expanded items */
.sidebar .nav.nav-secondary > .nav-item.active a:before,
.sidebar .nav.nav-secondary > .nav-item a[data-toggle="collapse"][aria-expanded="true"]:before,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item.active a:before,
.sidebar[data-background-color="white"] .nav.nav-secondary > .nav-item a[data-toggle="collapse"][aria-expanded="true"]:before {
  background: var(--g-primary) !important;
}

/* Base nav-item link — must beat .app-sidebar .nav > .nav-item > a from app.css */
.app-sidebar[data-background-color="white"] .nav > .nav-item > a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a span {
  color: var(--g-text-secondary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  transition: all var(--g-transition);
}

/* Icons must keep their icon font — do NOT override font-family */
.app-sidebar[data-background-color="white"] .nav > .nav-item > a .nav-icon,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a .nav-icon {
  color: var(--g-text-secondary) !important;
  transition: all var(--g-transition);
}

/* Hover — must beat .app-sidebar[data-background-color="white"] hover from app.css */
.app-sidebar[data-background-color="white"] .nav > .nav-item > a:hover,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover {
  background: var(--g-gray-50) !important;
}

.app-sidebar[data-background-color="white"] .nav > .nav-item > a:hover,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a:hover p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a:hover .nav-icon,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover .nav-icon {
  color: var(--g-text-primary) !important;
}

/* Active — must beat .app-sidebar[data-background-color="white"] active from app.css */
.app-sidebar[data-background-color="white"] .nav > .nav-item.active > a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a.active,
.app-sidebar[data-background-color="white"] .nav > .nav-item.menu-open > a.active {
  background: var(--g-bg-sidebar-active) !important;
}

.app-sidebar[data-background-color="white"] .nav > .nav-item.active > a,
.app-sidebar[data-background-color="white"] .nav > .nav-item.active > a p,
.app-sidebar[data-background-color="white"] .nav > .nav-item.active > a .nav-icon,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a.active,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a.active p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a.active .nav-icon,
.app-sidebar[data-background-color="white"] .nav > .nav-item.menu-open > a.active,
.app-sidebar[data-background-color="white"] .nav > .nav-item.menu-open > a.active p,
.app-sidebar[data-background-color="white"] .nav > .nav-item.menu-open > a.active .nav-icon {
  color: var(--g-primary) !important;
}

/* Submenu text in light body mode — beats body[data-background-color="light"] selectors */
body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a,
body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a .sub-item,
body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a span,
body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a p {
  color: var(--g-text-secondary) !important;
}

/* Section group headers */
.app-sidebar .nav .nav-section .text-section {
  color: var(--g-text-tertiary) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Icon sizing */
.app-sidebar .nav-link .nav-icon {
  font-size: 16px;
  width: 1.15rem;
  opacity: 0.7;
  transition: opacity var(--g-transition);
}

.app-sidebar .nav-link:hover .nav-icon,
.app-sidebar .nav-link.active .nav-icon,
.app-sidebar .nav-item.active > .nav-link .nav-icon,
.app-sidebar .nav-item.menu-open > .nav-link .nav-icon {
  opacity: 1;
}

/* --- 1a. Sidebar tree hierarchy (connecting lines) --- */

.app-sidebar .nav > .nav-item.submenu > .nav-treeview {
  position: relative;
}

.app-sidebar .nav > .nav-item.submenu > .nav-treeview > .nav-item {
  position: relative;
}

.app-sidebar .nav > .nav-item.submenu > .nav-treeview > .nav-item::before {
  content: '';
  position: absolute;
  left: 28px;
  top: 0;
  height: 50%;
  width: 14px;
  border-left: 1px solid var(--g-border);
  border-bottom: 1px solid var(--g-border);
  border-bottom-left-radius: 6px;
  pointer-events: none;
}

.app-sidebar .nav > .nav-item.submenu > .nav-treeview > .nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 28px;
  top: 50%;
  bottom: 0;
  border-left: 1px solid var(--g-border);
  pointer-events: none;
}

/* Sub-item text: smaller, thinner, lighter than parent */
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a span {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--g-text-tertiary) !important;
}

.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a .nav-icon {
  color: var(--g-text-tertiary) !important;
  font-size: 14px;
}

body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a,
body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a p,
body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a span,
body[data-background-color="light"] .app-sidebar .nav > .nav-item > .nav-treeview a .sub-item {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--g-text-tertiary) !important;
}

/* Sub-item hover: restore contrast */
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a:hover .nav-icon {
  color: var(--g-text-primary) !important;
}

/* Active sub-item: teal text + subtle bg */
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a.active {
  background: var(--g-bg-sidebar-active) !important;
}

.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a.active,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a.active p,
.app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a.active .nav-icon {
  color: var(--g-primary) !important;
  font-weight: 500 !important;
}

/* --- 1b. Sidebar minimized state --- */
@media (min-width: 992px) {
  .sidebar_minimize .sidebar.app-sidebar,
  .sidebar_minimize .sidebar.app-sidebar .logo-header,
  .sidebar_minimize .sidebar.app-sidebar .sidebar-wrapper {
    width: 75px !important;
  }

  .sidebar_minimize .sidebar.app-sidebar:hover,
  .sidebar_minimize .sidebar.app-sidebar:hover .logo-header,
  .sidebar_minimize .sidebar.app-sidebar:hover .sidebar-wrapper {
    width: 75px !important;
  }

  .sidebar_minimize .main-panel {
    width: calc(100% - 75px) !important;
  }

  .sidebar_minimize .main-header {
    left: 75px !important;
  }

  .sidebar_minimize .sidebar .nav > .nav-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
    margin: 0 8px 2px !important;
  }

  .sidebar_minimize .sidebar .nav > .nav-item > a .nav-icon {
    margin: 0 !important;
    font-size: 18px !important;
    width: auto !important;
  }

  .sidebar_minimize .sidebar .nav > .nav-item > a p,
  .sidebar_minimize .sidebar .nav > .nav-item > a .caret,
  .sidebar_minimize .sidebar .nav .nav-section .text-section {
    display: none !important;
  }

  .sidebar_minimize .sidebar .app-logo-text {
    display: none !important;
  }

  .sidebar_minimize .sidebar .app-logo-mini {
    display: block !important;
  }

  .sidebar_minimize .logo-header .logo {
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
  }

  .sidebar_minimize .sidebar .logo-header {
    padding: 0 !important;
    justify-content: center !important;
  }

  .sidebar_minimize .sidebar .nav > .nav-item > a .sidebar-mini-icon {
    display: inline-block !important;
  }

  /* Hide tree connecting lines in collapsed flyout */
  .sidebar_minimize .sidebar .nav > .nav-item.submenu > .nav-treeview > .nav-item::before,
  .sidebar_minimize .sidebar .nav > .nav-item.submenu > .nav-treeview > .nav-item::after {
    display: none !important;
  }

  /* Reset sub-item font/color in flyout — no hierarchy context */
  .sidebar_minimize .app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a,
  .sidebar_minimize .app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a p,
  .sidebar_minimize .app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a span,
  .sidebar_minimize .app-sidebar[data-background-color="white"] .nav > .nav-item > .nav-treeview a .nav-icon {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--g-text-secondary) !important;
  }
}

/* --- 1c. Theme toggle styling --- */
.app-theme-toggle {
  border: none;
  background: transparent;
}

/* --- 2. Top Navbar --- */

.main-header {
  background: var(--g-bg-card) !important;
  border-bottom: 1px solid var(--g-border) !important;
  box-shadow: none !important;
  width: auto !important;
  left: 265px !important;
  right: 0 !important;
  z-index: 1010 !important;
  transition: left 0.3s ease !important;
}

/* Remove double border: the HTML has .border-bottom class on the <nav> inside .main-header */
.main-header .navbar-header.border-bottom,
.main-header .app-header.border-bottom,
.main-header nav.border-bottom {
  border-bottom: none !important;
}

.main-header .navbar-brand {
  color: var(--g-text-primary) !important;
  font-weight: 600;
}

/* --- 3. Cards --- */

.card {
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-shadow-sm) !important;
  background: var(--g-bg-card) !important;
  transition: box-shadow var(--g-transition);
}

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

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--g-border-light) !important;
  padding: 16px 20px !important;
  font-weight: 600;
  font-size: 15px;
}

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

.g-kpi-card {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  padding: 20px;
  background: var(--g-bg-card);
  box-shadow: var(--g-shadow-sm);
  transition: all var(--g-transition);
  min-width: 0;
}

.g-kpi-card:hover {
  box-shadow: var(--g-shadow-md);
  transform: translateY(-1px);
}

.g-kpi-card .g-kpi-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--g-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.g-kpi-card .g-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--g-text-primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g-kpi-card .g-kpi-delta {
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.g-kpi-card .g-kpi-delta.positive { color: var(--g-success); }
.g-kpi-card .g-kpi-delta.negative { color: var(--g-danger); }

/* Dashboard entrance animations */

@keyframes g-fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.g-animate-in {
  animation: g-fade-up 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.g-dash-body {
  transition: opacity 0.2s ease;
}

.g-dash-body.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

/* --- 4. Tables --- */

.table {
  font-size: 13px;
  color: var(--g-text-primary);
}

.table thead th {
  background: var(--g-gray-50) !important;
  border-bottom: 2px solid var(--g-border) !important;
  color: var(--g-text-secondary);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 12px !important;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.table tbody td {
  padding: 10px 12px !important;
  border-color: var(--g-border-light) !important;
  vertical-align: middle;
}

.table tbody tr:hover {
  background: var(--g-primary-50) !important;
}

.table .text-right,
.table .g-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.g-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.g-badge-success { background: var(--g-success-light); color: var(--g-success); }
.g-badge-warning { background: var(--g-warning-light); color: var(--g-warning); }
.g-badge-danger  { background: var(--g-danger-light);  color: var(--g-danger); }
.g-badge-info    { background: var(--g-info-light);    color: var(--g-info); }
.g-badge-neutral { background: var(--g-gray-100);      color: var(--g-gray-600); }

.table tbody tr.g-clickable {
  cursor: pointer;
}

.table tbody tr.g-clickable:active {
  background: var(--g-primary-100) !important;
}

.g-table-empty {
  text-align: center;
  padding: 48px 20px !important;
  color: var(--g-text-tertiary);
}

.g-table-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.3;
}

.g-table-empty-text {
  font-size: 15px;
  margin-bottom: 4px;
}

.g-table-empty-hint {
  font-size: 13px;
}

/* --- 5. Forms --- */

.form-control, .form-select {
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--g-text-primary) !important;
  background: var(--g-bg-card) !important;
  transition: border-color var(--g-transition), box-shadow var(--g-transition);
}

.form-control:focus, .form-select:focus {
  border-color: var(--g-primary) !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15) !important;
  outline: none;
}

/* KaiAdmin forces .form-control[readonly]/:disabled to #e8e8e8 !important (light grey + 0.6 opacity),
   which breaks every read-only/disabled field in dark mode (e.g. the Payment method cell). Re-theme
   with tokens. Loaded after kaiadmin.min.css and same specificity, so this wins. */
.form-control[readonly], .form-control:disabled,
.form-select[readonly], .form-select:disabled {
  background: var(--g-gray-50) !important;
  border-color: var(--g-border) !important;
  color: var(--g-text-secondary) !important;
  opacity: 1 !important;
}

.form-control::placeholder {
  color: var(--g-text-tertiary) !important;
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--g-text-secondary);
  margin-bottom: 4px;
}

.input-group-text {
  background: var(--g-gray-50) !important;
  border: 1px solid var(--g-border) !important;
  color: var(--g-text-secondary) !important;
  font-size: 13px;
}

/* --- 6. Buttons --- */

.btn {
  font-size: 13px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: var(--g-radius) !important;
  transition: all var(--g-transition);
  border: none;
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:disabled,
.btn-info,
.btn-info:focus,
.btn-info:active,
.btn-info:disabled {
  background: var(--g-primary) !important;
  border-color: var(--g-primary) !important;
  color: var(--g-text-on-primary) !important;
}

.btn-primary:hover,
.btn-info:hover {
  background: var(--g-primary-dark) !important;
  border-color: var(--g-primary-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--g-shadow);
}

.btn-outline-primary,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  border: 1px solid var(--g-primary) !important;
  color: var(--g-primary) !important;
  background: transparent !important;
}

.btn-outline-primary:hover {
  background: var(--g-primary-50) !important;
  color: var(--g-primary-dark) !important;
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:disabled {
  background: var(--g-gray-200) !important;
  border-color: var(--g-gray-200) !important;
  color: var(--g-text-primary) !important;
}

.btn-secondary:hover {
  background: var(--g-gray-300) !important;
  border-color: var(--g-gray-300) !important;
}

.btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-secondary:active {
  border: 1px solid var(--g-border) !important;
  color: var(--g-text-secondary) !important;
  background: transparent !important;
}

.btn-outline-secondary:hover {
  background: var(--g-gray-50) !important;
  color: var(--g-text-primary) !important;
  border-color: var(--g-gray-300) !important;
}

.btn-success,
.btn-success:focus,
.btn-success:active { background: var(--g-success) !important; border-color: var(--g-success) !important; color: white !important; }
.btn-danger,
.btn-danger:focus,
.btn-danger:active  { background: var(--g-danger) !important;  border-color: var(--g-danger) !important;  color: white !important; }
.btn-warning { background: var(--g-warning) !important; color: white !important; }

.btn-outline-success { border: 1px solid var(--g-success) !important; color: var(--g-success) !important; background: transparent !important; }
.btn-outline-success:hover { background: var(--g-success) !important; color: white !important; }
.btn-outline-danger { border: 1px solid var(--g-danger) !important; color: var(--g-danger) !important; background: transparent !important; }
.btn-outline-danger:hover { background: var(--g-danger) !important; color: white !important; }
.btn-outline-info { border: 1px solid var(--g-primary) !important; color: var(--g-primary) !important; background: transparent !important; }
.btn-outline-info:hover { background: var(--g-primary) !important; color: white !important; }

.btn-light {
  background: var(--g-gray-100) !important;
  color: var(--g-text-secondary) !important;
  border: 1px solid var(--g-border) !important;
}

.btn-light:hover {
  background: var(--g-gray-200) !important;
}

/* Nav pills — override KaiAdmin's blue #1572e8 */
.nav-pills > li > .nav-link.active,
.nav-pills > .nav-item > .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills.flex-column .nav-link.active {
  background: var(--g-primary) !important;
  color: var(--g-text-on-primary) !important;
}

.nav-pills .nav-link {
  color: var(--g-text-secondary);
  border: 1px solid transparent !important;
}

.nav-pills .nav-link:hover {
  background: var(--g-gray-50);
}

/* Nav tabs */
.nav-tabs .nav-link.active {
  border-color: var(--g-border) var(--g-border) var(--g-bg-card) !important;
  color: var(--g-primary) !important;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 10px 20px; font-size: 15px; }

/* --- 7. Modals & Dialogs --- */

.modal-content {
  border: none !important;
  border-radius: var(--g-radius-xl) !important;
  box-shadow: var(--g-shadow-lg) !important;
}

.modal-header {
  border-bottom: 1px solid var(--g-border-light) !important;
  padding: 16px 20px !important;
}

.modal-title {
  font-size: 16px;
  font-weight: 600;
}

.modal-body {
  padding: 20px !important;
}

.modal-footer {
  border-top: 1px solid var(--g-border-light) !important;
  padding: 12px 20px !important;
}

.modal-backdrop.show {
  background: rgba(0,0,0,0.5) !important;
  backdrop-filter: blur(4px);
}

/* --- 8. Loading States --- */

.g-skeleton {
  background: linear-gradient(90deg, var(--g-gray-100) 25%, var(--g-gray-200) 50%, var(--g-gray-100) 75%);
  background-size: 200% 100%;
  animation: g-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: var(--g-radius-sm);
}

@keyframes g-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.g-skeleton-text       { height: 14px; margin-bottom: 8px; }
.g-skeleton-title      { height: 20px; width: 60%; margin-bottom: 12px; }
.g-skeleton-card       { height: 120px; }
.g-skeleton-table-row  { height: 40px; margin-bottom: 4px; }

.g-page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  color: var(--g-text-tertiary);
}

.g-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--g-border);
  border-top-color: var(--g-primary);
  border-radius: 50%;
  animation: g-spin 0.6s linear infinite;
  margin-right: 12px;
}

@keyframes g-spin {
  to { transform: rotate(360deg); }
}

/* --- 9. Empty States --- */

.g-empty-state {
  text-align: center;
  padding: 64px 24px;
  max-width: 400px;
  margin: 0 auto;
}

.g-empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  background: var(--g-gray-100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--g-text-tertiary);
}

.g-empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--g-text-primary);
  margin-bottom: 8px;
}

.g-empty-state-description {
  font-size: 14px;
  color: var(--g-text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* --- 10. Responsive --- */

.g-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

@media (min-width: 1200px) {
  .g-kpi-grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1400px) {
  .g-kpi-grid-6 {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 991px) {
  .sidebar.app-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1050 !important;
    width: 265px !important;
    min-width: 0 !important;
    max-width: 265px !important;
    height: 100vh !important;
    transform: translate3d(-270px, 0, 0) !important;
    transition: transform 0.3s ease !important;
  }

  html.nav_open .sidebar.app-sidebar {
    transform: translate3d(0, 0, 0) !important;
  }

  .main-header {
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .main-panel.app-main {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }

  .wrapper.app-wrapper {
    display: block !important;
  }

  .main-header .navbar.navbar-header {
    position: relative !important;
    transform: none !important;
  }

  .main-header .navbar .topbar-nav {
    display: none !important;
  }

  .g-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575px) {
  .g-kpi-grid {
    grid-template-columns: 1fr !important;
  }

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

  .table {
    font-size: 12px;
  }

  .table thead th,
  .table tbody td {
    padding: 8px !important;
  }

  .g-kpi-card {
    padding: 16px;
  }

  .g-kpi-card .g-kpi-value {
    font-size: 20px;
  }
}

/* --- 11. Toasts --- */

.g-toast {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  min-width: 320px;
  max-width: 420px;
  padding: 12px 16px;
  border-radius: var(--g-radius);
  box-shadow: var(--g-shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: g-toast-in 0.3s ease;
  background: var(--g-bg-card);
  border-left: 4px solid var(--g-primary);
}

.g-toast-success { border-left-color: var(--g-success); }
.g-toast-error   { border-left-color: var(--g-danger); }
.g-toast-warning { border-left-color: var(--g-warning); }

@keyframes g-toast-in {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* --- 12. Dark Mode --- */

[data-theme="dark"] {
  color-scheme: dark;

  --g-bg: #141414;
  --g-bg-card: #1E1E1E;
  --g-bg-sidebar: #1A1A1A;
  --g-bg-sidebar-active: rgba(20, 184, 166, 0.12);

  --g-text-primary: #E8E8E8;
  --g-text-secondary: #A0A0A0;
  --g-text-tertiary: #6B6B6B;

  --g-border: #2E2E2E;
  --g-border-light: #252525;

  --g-gray-50: #1E1E1E;
  --g-gray-100: #2A2A2A;
  --g-gray-200: #363636;
  --g-gray-300: #444444;
  --g-gray-400: #666666;
  --g-gray-500: #888888;

  --g-shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.4);
  --g-shadow: 0 1px 3px 0 rgba(0,0,0,0.5);
  --g-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.5);
  --g-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5);

  --g-primary-50: rgba(15, 118, 110, 0.1);
  --g-primary-100: rgba(15, 118, 110, 0.15);
  --g-success: #22C55E;
  --g-success-light: rgba(34, 197, 94, 0.15);
  --g-danger: #EF4444;
  --g-danger-light: rgba(239, 68, 68, 0.15);
  --g-warning: #EAB308;
  --g-warning-light: rgba(234, 179, 8, 0.15);
  --g-info: #3B82F6;
  --g-info-light: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] body {
  background-color: var(--g-bg);
  color: var(--g-text-primary);
}

[data-theme="dark"] .bg-white {
  background-color: var(--g-bg-card) !important;
}

[data-theme="dark"] .bg-body-tertiary {
  background-color: var(--g-gray-50) !important;
}

[data-theme="dark"] .modal-content {
  background: var(--g-bg-card) !important;
  color: var(--g-text-primary);
}

[data-theme="dark"] .dropdown-menu {
  background: var(--g-bg-card) !important;
  border-color: var(--g-border) !important;
}

[data-theme="dark"] .dropdown-item {
  color: var(--g-text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
  background: var(--g-gray-100);
  color: var(--g-text-primary);
}

[data-theme="dark"] .dropdown-divider {
  border-color: var(--g-border);
}

[data-theme="dark"] .text-muted {
  color: var(--g-text-tertiary) !important;
}

[data-theme="dark"] .table {
  --bs-table-bg: var(--g-bg-card);
  --bs-table-color: var(--g-text-primary);
  --bs-table-border-color: var(--g-border);
}

[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.logo-header,
.logo-header[data-background-color="white"] {
  background: var(--g-bg-sidebar) !important;
}

[data-theme="dark"] .main-header,
[data-theme="dark"] .main-header .navbar-header,
[data-theme="dark"] .main-header .app-header,
[data-theme="dark"] .main-header .navbar {
  background: var(--g-bg-card) !important;
  border-color: var(--g-border) !important;
}

[data-theme="dark"] .logo-header,
[data-theme="dark"] .logo-header[data-background-color="white"] {
  background: var(--g-bg-sidebar) !important;
}

[data-theme="dark"] .avatar-title.border-white {
  border-color: var(--g-border) !important;
}

[data-theme="dark"] .main-header .navbar .nav-link,
[data-theme="dark"] .main-header .navbar-brand,
[data-theme="dark"] .main-header .profile-username,
[data-theme="dark"] .main-header .profile-username .fw-bold,
[data-theme="dark"] .main-header .profile-username .op-7,
[data-theme="dark"] .topbar-nav .nav-link {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .topbar-nav .app-toolbar-chip {
  background: var(--g-bg) !important;
  border-color: var(--g-border) !important;
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .topbar-nav .app-toolbar-chip:hover,
[data-theme="dark"] .topbar-nav .app-toolbar-chip:focus,
[data-theme="dark"] .topbar-nav .app-toolbar-chip:active {
  background: var(--g-gray-100) !important;
  border-color: var(--g-border) !important;
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .app-toolbar-menu {
  background: var(--g-bg-card) !important;
  border-color: var(--g-border) !important;
}

[data-theme="dark"] .app-toolbar-menu .dropdown-item {
  color: var(--g-text-primary);
}

[data-theme="dark"] .app-toolbar-menu .dropdown-item:hover,
[data-theme="dark"] .app-toolbar-menu .dropdown-item:focus {
  background: var(--g-gray-100);
}

[data-theme="dark"] .app-toolbar-menu .dropdown-item.active,
[data-theme="dark"] .app-toolbar-menu .dropdown-item:active {
  background: var(--g-primary);
  color: #fff;
}

[data-theme="dark"] .app-logo-title,
[data-theme="dark"] .app-navbar-heading {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .app-navbar-caption {
  color: var(--g-text-tertiary) !important;
}

[data-theme="dark"] .profile-username .fw-bold {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .mobile-user-name {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .mobile-user-role {
  color: var(--g-text-secondary) !important;
}

[data-theme="dark"] .dropdown-user-scroll .user-box .u-text h4 {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .dropdown-user-scroll .user-box .u-text .text-muted {
  color: var(--g-text-tertiary) !important;
}

[data-theme="dark"] .alert-danger {
  background: var(--g-danger-light) !important;
  border-color: rgba(220, 38, 38, 0.3) !important;
  color: #FCA5A5;
}

[data-theme="dark"] .alert-warning {
  background: var(--g-warning-light) !important;
  border-color: rgba(217, 119, 6, 0.3) !important;
  color: #FCD34D;
}

[data-theme="dark"] .alert-success {
  background: var(--g-success-light) !important;
  border-color: rgba(22, 163, 74, 0.3) !important;
  color: #86EFAC;
}

[data-theme="dark"] .alert-info {
  background: var(--g-info-light) !important;
  border-color: rgba(37, 99, 235, 0.3) !important;
  color: #93C5FD;
}

[data-theme="dark"] .form-check-input {
  background-color: var(--g-bg);
  border-color: var(--g-border);
}

[data-theme="dark"] .form-check-input:checked {
  background-color: var(--g-primary);
  border-color: var(--g-primary);
}

[data-theme="dark"] .nav-tabs {
  border-color: var(--g-border);
}

[data-theme="dark"] .nav-tabs .nav-link {
  color: var(--g-text-secondary);
}

[data-theme="dark"] .pagination .page-link {
  background: var(--g-bg-card);
  border-color: var(--g-border);
  color: var(--g-text-primary);
}

[data-theme="dark"] .pagination .page-item.active .page-link {
  background: var(--g-primary);
  border-color: var(--g-primary);
  color: white;
}

[data-theme="dark"] .swal-modal {
  background: var(--g-bg-card);
}

[data-theme="dark"] .swal-title,
[data-theme="dark"] .swal-text {
  color: var(--g-text-primary);
}

[data-theme="dark"] .page-inner {
  color: var(--g-text-primary);
}

[data-theme="dark"] .u-text h4 {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .dropdown-user,
[data-theme="dark"] .dropdown-user .dropdown-user-scroll {
  background: var(--g-bg-card) !important;
  border-color: var(--g-border) !important;
}

[data-theme="dark"] .dropdown-user .user-box {
  background: var(--g-bg) !important;
  border-color: var(--g-border) !important;
}

[data-theme="dark"] .dropdown-user .user-box .u-text h4 {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .dropdown-user .user-box .u-text p,
[data-theme="dark"] .dropdown-user .user-box .u-text .text-muted {
  color: var(--g-text-tertiary) !important;
}

[data-theme="dark"] .dropdown-user .dropdown-item {
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .dropdown-user .dropdown-item:hover,
[data-theme="dark"] .dropdown-user .dropdown-item:focus {
  background: var(--g-gray-100) !important;
  color: var(--g-text-primary) !important;
}

[data-theme="dark"] .dropdown-user .dropdown-divider {
  border-color: var(--g-border) !important;
}

/* ── Interactive report rows ── */
tr[data-toggle-group] {
  cursor: pointer;
  user-select: none;
}
tr[data-toggle-group]:hover td {
  background-color: rgba(0,0,0,0.03);
}
tr[data-group] td {
  font-size: 0.875rem;
}
tr[data-group] td:first-child {
  padding-left: 2.5rem !important;
  border-left: 2px solid var(--g-border, #E7E5E4);
}
tr[data-nav] {
  cursor: pointer;
}
tr[data-nav] td:first-child {
  color: var(--g-primary, #2563EB);
}
tr[data-nav]:hover td {
  background-color: rgba(59,130,246,0.06);
}
tr[data-nav]:hover td:first-child {
  text-decoration: underline;
}
[data-chevron] {
  transition: transform 0.2s ease;
  display: inline-block;
}
[data-chevron].expanded {
  transform: rotate(90deg);
}
[data-theme="dark"] tr[data-toggle-group]:hover td {
  background-color: rgba(255,255,255,0.04);
}
[data-theme="dark"] tr[data-group] td:first-child {
  border-left-color: var(--g-border, #44403C);
}
[data-theme="dark"] tr[data-nav] td:first-child {
  color: #60A5FA;
}
[data-theme="dark"] tr[data-nav]:hover td {
  background-color: rgba(96,165,250,0.1);
}

/* ============================================================
   Redesign shell refinements (from the Claude-Design handoff),
   reconciled to the brand palette — all token-driven, so they
   pick up --g-* (deep teal, true red/green), NOT the mockup's
   warm scheme. Loaded after app.css/kaiadmin, so these win.
   ============================================================ */

/* --- Select dropdowns: restore a themed chevron (the shared
   .form-control/.form-select background shorthand earlier wipes it) --- */
.form-select {
  -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' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
  padding-right: 36px !important;
  cursor: pointer;
}
.form-select:hover { border-color: var(--g-gray-300) !important; }
.form-select-sm { background-position: right 8px center !important; padding-right: 30px !important; }
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23a0a0a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
}
.form-select, .form-control { color-scheme: light; }
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control { color-scheme: dark; }

/* --- Date / time inputs: brand-teal calendar glyph --- */
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="month"] { position: relative; }
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.85;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-size: 16px 16px;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity var(--g-transition);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314B8A6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit { color: var(--g-text-primary); }

/* --- Navbar rhythm --- */
.main-header .container-fluid { padding-left: 22px !important; padding-right: 22px !important; }
.app-navbar-caption {
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  color: var(--g-text-tertiary) !important;
}
.app-navbar-heading,
[data-theme="light"] .app-navbar-heading {
  font-size: 1.12rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: var(--g-text-primary) !important;
}

/* Toolbar buttons: gentle, rounded, token-driven */
.topbar-nav { gap: 0.45rem !important; }
.topbar-nav .app-toolbar-chip,
.app-menu-toggle {
  border: 1px solid var(--g-border) !important;
  background: var(--g-bg-card) !important;
  color: var(--g-text-secondary) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: background var(--g-transition), border-color var(--g-transition), color var(--g-transition) !important;
}
.topbar-nav .app-toolbar-chip:hover,
.app-menu-toggle:hover {
  background: var(--g-gray-100) !important;
  border-color: var(--g-gray-300) !important;
  color: var(--g-text-primary) !important;
}

/* Language chip: sized to content, globe + code */
.topbar-nav .lang-chip {
  width: auto !important;
  min-width: var(--app-header-control-size) !important;
  padding: 0 0.7rem !important;
  gap: 0.4rem !important;
  font-weight: 600 !important;
}
.topbar-nav .lang-chip .bi-translate { font-size: 0.95rem; opacity: 0.7; }

/* Dropdown menu: token border/shadow + teal active */
.app-toolbar-menu {
  border: 1px solid var(--g-border) !important;
  box-shadow: var(--g-shadow-lg) !important;
  background: var(--g-bg-card) !important;
}
.app-toolbar-menu .dropdown-item { color: var(--g-text-secondary) !important; }
.app-toolbar-menu .dropdown-item:hover { background: var(--g-gray-100) !important; color: var(--g-text-primary) !important; }
.app-toolbar-menu .dropdown-item.active,
.app-toolbar-menu .dropdown-item:active {
  background: var(--g-primary) !important;
  color: #fff !important;
}

/* Divider before profile */
.topbar-nav .topbar-user {
  border-left: 1px solid var(--g-border);
  padding-left: 0.55rem;
  margin-left: 0.25rem;
}

/* Profile: hoverable pill + soft avatar halo + caret */
.topbar-user .profile-pic {
  gap: 0.55rem !important;
  padding: 5px 12px 5px 5px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  transition: background var(--g-transition), border-color var(--g-transition) !important;
}
.topbar-user .profile-pic:hover {
  background: var(--g-gray-100) !important;
  border-color: var(--g-border) !important;
}
.topbar-user .avatar-sm,
.topbar-user .avatar-sm .avatar-title {
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 0.86rem !important;
}
.topbar-user .avatar-title.bg-primary,
.topbar-user .avatar-title.border-white {
  background: var(--g-primary) !important;
  border: none !important;
  box-shadow: 0 0 0 3px var(--g-primary-50) !important;
}
.topbar-user .profile-username .fw-bold {
  color: var(--g-text-primary) !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
}
.topbar-user .profile-pic::after {
  content: "" !important;
  display: inline-block;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--g-text-tertiary);
  border-bottom: 1.5px solid var(--g-text-tertiary);
  transform: rotate(45deg);
  margin-left: 0.15rem;
  margin-top: -3px;
  transition: border-color var(--g-transition);
}
.topbar-user .profile-pic:hover::after { border-color: var(--g-text-secondary); }

/* --- Sidebar --- */
.app-sidebar .logo-header { padding: 0 18px !important; }
.app-logo-text, .app-sidebar .app-logo-title { letter-spacing: -0.01em; font-weight: 700; }

/* Roomier rows + rounded hover/active */
.app-sidebar .nav > .nav-item { margin: 1px 10px !important; }
.app-sidebar[data-background-color="white"] .nav > .nav-item > a {
  border-radius: 9px !important;
  padding: 9px 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.app-sidebar .nav > .nav-item > .nav-treeview .nav-item { margin: 0 !important; }

/* Active item: soft bg + left teal accent bar */
.app-sidebar[data-background-color="white"] .nav > .nav-item.active > a,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a.active { position: relative; }
.app-sidebar[data-background-color="white"] .nav > .nav-item.active > a::before,
.app-sidebar[data-background-color="white"] .nav > .nav-item > a.active::before {
  content: "";
  position: absolute;
  left: -2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 0 3px 3px 0;
  background: var(--g-primary);
}

/* Section headers: more air */
.app-sidebar .nav .nav-section { margin-top: 16px !important; margin-bottom: 2px !important; }
.app-sidebar .nav .nav-section:first-child { margin-top: 6px !important; }
.app-sidebar .nav .nav-section .text-section { padding-left: 12px !important; }

/* Thin, subtle scrollbar */
.app-sidebar .sidebar-wrapper { scrollbar-width: thin; scrollbar-color: var(--g-gray-300) transparent; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar { width: 6px; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb { background: var(--g-gray-200); border-radius: 3px; }
.app-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb:hover { background: var(--g-gray-300); }

/* Never let sidebar labels wrap */
.app-sidebar .nav .nav-item > a,
.app-sidebar .nav .nav-item > a > p,
.app-sidebar .nav .nav-item > a > .sub-item,
.app-sidebar .nav-treeview a,
.app-sidebar .nav-treeview a > p,
.app-sidebar .nav-treeview a > .sub-item { white-space: nowrap !important; }

/* Collapsed-sidebar submenu flyout: compact, centered, even rows */
@media (min-width: 992px) {
  .sidebar_minimize .app-sidebar .nav > .nav-item { margin-left: 6px !important; margin-right: 6px !important; }
  .sidebar_minimize .app-sidebar[data-background-color="white"] .nav > .nav-item > a {
    margin-left: 0 !important; margin-right: 0 !important;
    padding-left: 0 !important; padding-right: 0 !important;
    justify-content: center !important;
  }
  .sidebar_minimize .app-sidebar .nav > .nav-item.active > a::before,
  .sidebar_minimize .app-sidebar .nav > .nav-item > a.active::before { display: none !important; }

  .sidebar_minimize .app-sidebar .nav > .nav-item.submenu > .nav-treeview {
    padding: 6px !important;
    min-width: 184px !important;
    background: var(--g-bg-card) !important;
    border: 1px solid var(--g-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--g-shadow-lg) !important;
  }
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 9px 16px !important;
    margin: 1px 0 !important;
    border-radius: 8px !important;
    color: var(--g-text-secondary) !important;
  }
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a > p,
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a > .sub-item {
    margin: 0 !important; text-align: center !important; color: inherit !important;
  }
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a:hover { background: var(--g-gray-100) !important; }
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a:hover,
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a:hover > p { color: var(--g-text-primary) !important; }
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a.active,
  .sidebar_minimize .app-sidebar .nav > .nav-item > .nav-treeview a.active > p {
    background: var(--g-bg-sidebar-active) !important;
    color: var(--g-primary) !important;
  }
}

/* Mobile popup sidebar: token palette for user block */
.mobile-user-name { color: var(--g-text-primary) !important; }
.mobile-user-role { color: var(--g-text-tertiary) !important; }
.mobile-controls-title { color: var(--g-text-tertiary) !important; }

/* Navbar: match sidebar off-white card surface */
.main-header,
.main-header .navbar,
.main-header .navbar-header,
.main-header .app-header,
.main-header .navbar.bg-white { background: var(--g-bg-card) !important; }

/* Profile popup: clean, classy layout */
.dropdown-user {
  min-width: 264px !important;
  border: 1px solid var(--g-border) !important;
  box-shadow: var(--g-shadow-lg) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  background: var(--g-bg-card) !important;
}
.dropdown-user .dropdown-user-scroll { padding: 0 !important; }
.dropdown-user .user-box {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
}
.dropdown-user .user-box .avatar-lg {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  margin: 0 !important;
}
.dropdown-user .user-box .avatar-lg .avatar-title {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}
.dropdown-user .user-box .u-text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 1px !important;
}
.dropdown-user .user-box .u-text h4 {
  margin: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--g-text-primary) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-user .user-box .u-text p,
.dropdown-user .user-box .u-text .small,
.dropdown-user .user-box .u-text [data-user-email],
.dropdown-user .user-box .u-text [data-user-role] {
  margin: 0 !important;
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  color: var(--g-text-tertiary) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dropdown-user .dropdown-divider { margin: 6px 8px !important; border-color: var(--g-border) !important; }
.dropdown-user .dropdown-item {
  width: auto !important;
  border-radius: 8px !important;
  margin: 2px 6px !important;
  padding: 8px 12px !important;
  color: var(--g-text-secondary) !important;
  font-weight: 500 !important;
}
.dropdown-user .dropdown-item:hover {
  background: var(--g-gray-100) !important;
  color: var(--g-text-primary) !important;
}

/* ============================================================
   SHARED ERP / ENTITY LIST CHROME — redesign refinement.

   Re-skins the classes emitted by document-list-ui.js and
   simple-entity.js (every list + simple-CRUD page) to the
   reports redesign language: brand-teal tokens replace the old
   KaiAdmin blue/indigo (#1572e8 / #6861ce), rounded card
   surfaces, lighter uppercase table headers, teal hover/active.

   CSS only — no markup or behaviour changes. Loads after
   app.css so these override the originals; the existing
   [data-theme="dark"] rules in app.css are already token-based
   and keep winning in dark mode.
   ============================================================ */

/* ---------- List / toolbar card surfaces ---------- */
.erp-toolbar-card,
.erp-list-card,
.entity-toolbar-card,
.entity-mobile-card {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  box-shadow: var(--g-shadow-sm);
}

/* ---------- Toolbar field labels (match reports .field) ---------- */
.erp-toolbar-card .form-label,
.entity-toolbar-card .form-label,
.erp-filter-row .form-label,
.erp-search-field .form-label,
.erp-filter-field .form-label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--g-text-tertiary);
  margin-bottom: 0.3rem;
}

/* ---------- Data table → reports .tbl look ---------- */
.app-data-table thead th {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--g-border);
  color: var(--g-text-tertiary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-data-table tbody td {
  padding: 0.85rem 1rem;
  border-top: 1px solid var(--g-border-light);
  color: var(--g-text-primary);
}

.app-data-table tbody tr:hover td {
  background: var(--g-primary-50);
}

/* ---------- Status tabs → brand teal ---------- */
.erp-inline-tabs {
  border-bottom: 1px solid var(--g-border);
}

.erp-inline-tab {
  color: var(--g-text-secondary);
}

.erp-inline-tab.is-active {
  color: var(--g-primary);
}

.erp-inline-tab.is-active::after {
  background: var(--g-primary);
}

.erp-tab-count {
  background: var(--g-primary-50);
  color: var(--g-primary);
  font-weight: 600;
}

/* ---------- Stats strip → brand tokens ---------- */
.erp-stats-strip {
  border: 1px solid var(--g-border);
  border-radius: var(--g-radius-lg);
  background: var(--g-bg-card);
}

.erp-stat-item + .erp-stat-item {
  border-left: 1px solid var(--g-border);
}

.erp-stat-label {
  color: var(--g-text-tertiary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.erp-stat-value strong {
  color: var(--g-text-primary);
  font-weight: 700;
}

.erp-stat-value.is-danger strong {
  color: var(--g-danger);
}

/* ---------- Row action kebab → brand teal hover ---------- */
.erp-kebab-btn {
  color: var(--g-text-tertiary);
  border-radius: var(--g-radius-sm);
}

.erp-kebab-btn:hover {
  background: var(--g-primary-50);
  color: var(--g-primary);
}

.erp-doc-link {
  color: var(--g-primary);
}

/* ---------- Entity page header (simple-entity.js) ---------- */
.entity-page-header h2 {
  font-size: 1.35rem;
  font-weight: 680;
  letter-spacing: -0.02em;
  color: var(--g-text-primary);
}

/* ---------- Document forms — brand the remaining blue holdovers ---------- */
/* Focus ring on every input/select app-wide (was blue #9cb9ff / #1572e8) */
.form-control:focus,
.form-select:focus {
  border-color: var(--g-primary);
  box-shadow: 0 0 0 3px var(--g-primary-50);
}

/* "ИТОГО К ОПЛАТЕ" + other doc summary totals (was #1572e8) */
.erp-summary-total strong {
  color: var(--g-primary);
}

/* Flow / count chips (was #edf5ff / #1572e8) */
.erp-flow-count {
  background: var(--g-primary-50);
  color: var(--g-primary);
}

/* Checkboxes / radios pick up the brand tint instead of Bootstrap blue */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--g-primary);
}

/* Kill the browser's periwinkle autofill highlight on every input —
   keep the brand surface + text colour (flips correctly in dark via tokens). */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
.form-control:-webkit-autofill,
.login-input:-webkit-autofill {
  -webkit-text-fill-color: var(--g-text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--g-bg-card) inset;
  caret-color: var(--g-text-primary);
  transition: background-color 9999s ease-in-out 0s;
}

/* ---------- Level-1 admin widget-stat icons → brand tones ---------- */
/* Were KaiAdmin palette (#1572e8 / #48abf7 / #31ce36 / #f25961 / #ffad46)
   with an indigo shadow; remap to brand tokens, light + dark. */
.app-widget-stat-icon { box-shadow: var(--g-shadow-sm); }
.app-widget-stat-icon.is-primary { color: var(--g-primary); background: var(--g-primary-50); }
.app-widget-stat-icon.is-danger  { color: var(--g-danger);  background: var(--g-danger-light); }
.app-widget-stat-icon.is-info    { color: var(--g-info);    background: var(--g-info-light); }
.app-widget-stat-icon.is-success { color: var(--g-success); background: var(--g-success-light); }
.app-widget-stat-icon.is-warning { color: var(--g-warning); background: var(--g-warning-light); }

[data-theme="dark"] .app-widget-stat-icon.is-primary { color: var(--g-primary); background: color-mix(in srgb, var(--g-primary) 16%, transparent); }
[data-theme="dark"] .app-widget-stat-icon.is-danger  { color: var(--g-danger);  background: color-mix(in srgb, var(--g-danger) 16%, transparent); }
[data-theme="dark"] .app-widget-stat-icon.is-info    { color: var(--g-info);    background: color-mix(in srgb, var(--g-info) 16%, transparent); }
[data-theme="dark"] .app-widget-stat-icon.is-success { color: var(--g-success); background: color-mix(in srgb, var(--g-success) 16%, transparent); }
[data-theme="dark"] .app-widget-stat-icon.is-warning { color: var(--g-warning); background: color-mix(in srgb, var(--g-warning) 16%, transparent); }

/* ---------- Dashboard: setup chip + draft rows ---------- */
.g-setup-chip {
  background: var(--g-primary-50);
  color: var(--g-primary);
  border: 1px solid color-mix(in srgb, var(--g-primary) 25%, transparent);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  padding: 6px 14px;
}
.g-setup-chip:hover {
  background: color-mix(in srgb, var(--g-primary) 14%, transparent);
  color: var(--g-primary-dark);
}
.g-setup-chip .bi-chevron-right { font-size: 11px; opacity: 0.7; }
.g-draft-row:last-child { border-bottom: none !important; }
.g-draft-row:hover { background: var(--g-primary-50); }

/* ---------- Drag-to-reorder (sortable.js) ---------- */
.drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--g-text-tertiary);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--g-radius-sm);
}
.drag-handle:hover { color: var(--g-primary); background: var(--g-primary-50); }
.drag-handle:active { cursor: grabbing; }
tr.is-dragging { opacity: 0.5; background: var(--g-primary-50); }
td.drag-cell, th.drag-cell { width: 2.4rem; text-align: center; padding-left: 0.5rem; padding-right: 0.5rem; }

/* Bottom-align toolbar controls so the label-less icon-search lines up with
   labeled filters (which have a label row above) instead of sitting higher. */
.entity-toolbar-main { align-items: end; }

/* ---------- Compact list search (icon inside, no label) ---------- */
.erp-search-box {
  position: relative;
  width: 100%;
  max-width: 340px;
}
.erp-search-box > .bi {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--g-text-tertiary);
  font-size: 0.95rem;
  pointer-events: none;
}
.erp-search-box .form-control { padding-left: 36px !important; }
@media (max-width: 575px) { .erp-search-box { max-width: none; } }

/* ---------- Filter bar: search + Filters panel + chips ---------- */
.fbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fbar-search.erp-search-box { max-width: 420px; flex: 1 1 260px; }
.fbar-toggle { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.fbar-toggle.is-open { background: var(--g-primary-50); color: var(--g-primary); border-color: color-mix(in srgb, var(--g-primary) 30%, transparent); }
.fbar-count { font-weight: 700; }
.fbar-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fbar-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fbar-chips:not(:empty) { margin-top: 12px; }
.fbar-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 6px 4px 12px; border-radius: 999px;
  background: var(--g-primary-50); color: var(--g-primary);
  font-size: 12.5px; font-weight: 600;
}
.fbar-chip button {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px; border-radius: 999px;
}
.fbar-chip button:hover { background: color-mix(in srgb, var(--g-primary) 18%, transparent); }
.fbar-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--g-border-light); }
.fbar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.fbar-field label {
  display: block; margin-bottom: 0.3rem;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--g-text-tertiary);
}
@media (max-width: 575px) { .fbar-actions { margin-left: 0; width: 100%; } }

/* ---------- Tom Select — themed to match our inputs + brand dropdown ---------- */
/* Fully hide the original <select> once Tom Select takes over — our .form-select
   !important rules (chevron/sizing) otherwise leak onto it and show a 2nd box. */
select.tomselected { display: none !important; }
/* Tom Select copies the original select's classes onto .ts-wrapper, so our
   .form-select rules (chevron/border/padding) paint a phantom 2nd control on
   the wrapper. Neutralize them — only the inner .ts-control should be styled. */
.ts-wrapper.form-select {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.ts-wrapper { min-width: 0; }
.select-with-create .ts-wrapper { flex: 1 1 auto; }
.ts-control {
  min-height: 39px !important;
  align-items: center !important; /* vertically center the item/text (was stretching) */
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  background: var(--g-bg-card) !important;
  padding: 5px 34px 5px 12px !important;
  font-size: 14px !important;
  color: var(--g-text-primary) !important;
  box-shadow: none !important;
  /* our chevron (TS's default triangle is hidden below) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2378716c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 16px 16px !important;
}
.ts-wrapper.single .ts-control:after { display: none !important; } /* hide TS triangle */
.ts-wrapper.focus .ts-control {
  border-color: var(--g-primary) !important;
  box-shadow: 0 0 0 3px var(--g-primary-50) !important;
}
.ts-control .item { color: var(--g-text-primary); }
.ts-control > input, .ts-control > input::placeholder { color: var(--g-text-tertiary); }
.ts-wrapper.disabled .ts-control { background: var(--g-gray-100) !important; opacity: 1; }

.ts-dropdown {
  border: 1px solid var(--g-border) !important;
  border-radius: var(--g-radius) !important;
  box-shadow: var(--g-shadow-md) !important;
  background: var(--g-bg-card) !important;
  margin-top: 4px !important;
  overflow: hidden;
  font-size: 14px;
  color: var(--g-text-primary);
}
.ts-dropdown .option {
  padding: 8px 12px;
  border-radius: var(--g-radius-sm);
  margin: 2px 6px;
  color: var(--g-text-primary);
}
.ts-dropdown .option:first-child { margin-top: 6px; }
.ts-dropdown .option:last-child { margin-bottom: 6px; }
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
  background: var(--g-primary-50) !important;
  color: var(--g-primary) !important;
}
.ts-dropdown .option[aria-selected="true"] { font-weight: 600; }
.ts-dropdown .ts-no-results { padding: 10px 12px; color: var(--g-text-tertiary); }
.ts-dropdown-content { padding: 0; }