/* ============================================================
   ULTIMATE THEME ENGINE v3.0 — Theme: OCEAN GLASS (ocean_glass_light)
   Generated 2026-08-23 10:45:32
   Palette-driven base + signature override layer.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500;600&display=swap');


/* ============================================================
   PHASE 1 FOUNDATION — :root variables + AdminLTE overrides
   ============================================================ */

:root {
  --ut-accent: #4f46e5;
  --ut-accent-hover: #4338ca;
  --ut-bg: #e2e8f0;
  --ut-sidebar-bg: #ffffff;
  --ut-sidebar-hover: #f1f5f9;
  --ut-sidebar-active: #eef2ff;
  --ut-header-bg: #0f172a;
  --ut-logo-bg: #0f172a;
  --ut-card-bg: #ffffff;
  --ut-card-border: #94a3b8;
  --ut-text: #0f172a;
  --ut-text-secondary: #475569;
  --ut-text-muted: #475569;
  --ut-border: #94a3b8;
  --ut-input-bg: #f8fafc;
  --ut-table-header: #f1f5f9;
  --ut-table-hover: rgba(99,102,241,0.06);
  --ut-pos-accent: #4f46e5;
  --ut-pos-card-bg: #ffffff;
  --ut-pos-border: #94a3b8;
  --ut-pos-footer-bg: #ffffff;
  --ut-pos-input-bg: #f8fafc;
  --ut-muted: #475569;
  --ut-success: #22c55e;
  --ut-warning: #f59e0b;
  --ut-danger:  #ef4444;
  --ut-info:    #3b82f6;
  --ut-radius-sm: 6px;
  --ut-radius-md: 10px;
  --ut-radius-lg: 14px;
  --ut-shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
  --ut-shadow-md: 0 4px 12px rgba(0,0,0,0.15);
  --ut-shadow-lg: 0 8px 24px rgba(0,0,0,0.2);
}

/* === HIGH-SPECIFICITY ADMINLTE OVERRIDES === */
/* These selectors win over AdminLTE's `.skin-green` defaults */

html body .main-header { background: #0f172a !important; border-bottom: 1px solid #94a3b8 !important; }
html body .main-header .navbar { background: #0f172a !important; border: none !important; min-height: 50px !important; }
html body .main-header .logo,
html body .main-header .logo:hover { background: #0f172a !important; color: #fff !important; border-bottom: none !important; }
html body .main-header .navbar .nav > li > a { color: #0f172a !important; transition: background 0.15s !important; }
html body .main-header .navbar .nav > li > a:hover,
html body .main-header .navbar .nav > li > a:focus,
html body .main-header .navbar .nav > .open > a { background: rgba(255,255,255,0.1) !important; color: #fff !important; }
html body .main-header .sidebar-toggle { color: #0f172a !important; }
html body .main-header .sidebar-toggle:hover { background: rgba(255,255,255,0.1) !important; color: #fff !important; }

html body .main-sidebar,
html body .left-side { background: #ffffff !important; }
html body .main-sidebar .sidebar-menu > li > a { color: #0f172a !important; border-left: 3px solid transparent !important; transition: all 0.15s !important; }
html body .main-sidebar .sidebar-menu > li > a:hover,
html body .main-sidebar .sidebar-menu > li.menu-open > a { background: #f1f5f9 !important; color: #fff !important; border-left-color: #4f46e5 !important; }
html body .main-sidebar .sidebar-menu > li.active > a,
html body .main-sidebar .sidebar-menu > li.active:hover > a { background: #eef2ff !important; color: #fff !important; border-left-color: #4f46e5 !important; }
html body .main-sidebar .sidebar-menu .treeview-menu { background: #ffffff !important; padding-left: 0 !important; }
html body .main-sidebar .sidebar-menu .treeview-menu > li > a { color: #475569 !important; padding: 6px 5px 6px 38px !important; font-size: 13px !important; }
html body .main-sidebar .sidebar-menu .treeview-menu > li > a:hover,
html body .main-sidebar .sidebar-menu .treeview-menu > li.active > a { color: #fff !important; background: #f1f5f9 !important; }

html body .content-wrapper,
html body .right-side { background: #e2e8f0 !important; color: #0f172a !important; }
html body .content-wrapper > .content-header > h1 { color: #0f172a !important; }
html body .content-wrapper > .content-header { padding: 14px 18px 8px !important; }

html body .box,
html body .nav-tabs-custom,
html body .panel { background: #ffffff !important; border: 1px solid #94a3b8 !important; border-radius: var(--ut-radius-lg) !important; box-shadow: var(--ut-shadow-sm) !important; color: #0f172a !important; }
html body .box-header { border-bottom: 1px solid #94a3b8 !important; padding: 12px 16px !important; }
html body .box-header > .box-title { color: #0f172a !important; font-weight: 700 !important; font-size: 14px !important; }
html body .box-body { color: #0f172a !important; padding: 14px 16px !important; }
html body .box-footer { background: transparent !important; border-top: 1px solid #94a3b8 !important; }

/* Tables */
html body .table > thead > tr > th { background: #f1f5f9 !important; color: #0f172a !important; border-bottom: 1px solid #94a3b8 !important; font-weight: 700 !important; font-size: 12px !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; }
html body .table > tbody > tr > td { background: #ffffff !important; color: #0f172a !important; border-top: 1px solid #94a3b8 !important; vertical-align: middle !important; }
html body .table-hover > tbody > tr:hover { background: rgba(99,102,241,0.06) !important; }
html body .table-striped > tbody > tr:nth-of-type(odd) { background: rgba(99,102,241,0.06) !important; }

/* Forms */
html body .form-control,
html body select.form-control,
html body textarea.form-control { background: #f8fafc !important; color: #0f172a !important; border: 1px solid #94a3b8 !important; border-radius: var(--ut-radius-md) !important; transition: all 0.15s !important; box-shadow: none !important; }
html body .form-control:focus { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important; outline: none !important; }
html body .form-control::placeholder { color: #475569 !important; opacity: 0.6 !important; }
html body label { color: #0f172a !important; font-weight: 600 !important; }

/* Buttons */
html body .btn { border-radius: var(--ut-radius-md) !important; font-weight: 600 !important; transition: all 0.15s !important; border: 1px solid transparent !important; }
html body .btn-primary { background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; }
html body .btn-primary:hover,
html body .btn-primary:focus { background: #4338ca !important; border-color: #4338ca !important; }
html body .btn-default { background: #ffffff !important; color: #0f172a !important; border-color: #94a3b8 !important; }
html body .btn-default:hover { background: rgba(99,102,241,0.06) !important; border-color: #4f46e5 !important; }

/* Pagination + Breadcrumbs */
html body .pagination > li > a,
html body .pagination > li > span { background: #ffffff !important; color: #0f172a !important; border-color: #94a3b8 !important; }
html body .pagination > .active > a,
html body .pagination > .active > span { background: #4f46e5 !important; border-color: #4f46e5 !important; color: #fff !important; }
html body .breadcrumb { background: transparent !important; padding: 6px 0 !important; }
html body .breadcrumb a { color: #4f46e5 !important; }

/* Modals */
html body .modal-content { background: #ffffff !important; color: #0f172a !important; border: 1px solid #94a3b8 !important; border-radius: var(--ut-radius-lg) !important; }
html body .modal-header { border-bottom: 1px solid #94a3b8 !important; }
html body .modal-footer { border-top: 1px solid #94a3b8 !important; }

/* Alerts callouts — soften them */
html body .alert { border-radius: var(--ut-radius-md) !important; border: 1px solid #94a3b8 !important; }

/* Scrollbar styling (webkit) */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: #e2e8f0; }
html body ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; }
html body ::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

/* === Skin-green specific neutralization === */
html body.skin-green .main-header .navbar,
html body.skin-green-light .main-header .navbar { background: #0f172a !important; }
html body.skin-green .main-header .logo,
html body.skin-green-light .main-header .logo { background: #0f172a !important; }
html body.skin-green .sidebar-menu > li.active > a,
html body.skin-green-light .sidebar-menu > li.active > a { border-left-color: #4f46e5 !important; background: #eef2ff !important; }
html body.skin-green .content-wrapper,
html body.skin-green-light .content-wrapper { background: #e2e8f0 !important; }

/* === Mobile safety: don't break the responsive sidebar === */
@media (max-width: 768px) {
  html body .main-header .navbar { min-height: 50px !important; }
  html body #ut-search-pill { display: none !important; }
}

/* === Phase 2 animations === */
@keyframes utPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}
@keyframes utSlideIn  { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes utSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }
@keyframes ut-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Hide AdminLTE original Online status li if our pill duplicates it */
html body .main-header .navbar #ut-search-pill ~ * { z-index: 4; }

/* ============================================================
   PHASE 6 — Universal Enhancements
   ============================================================ */

/* DataTables overrides */
html body .dataTables_wrapper .dataTables_length select,
html body .dataTables_wrapper .dataTables_filter input {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
  border-radius: var(--ut-radius-md) !important;
  padding: 4px 10px !important;
}
html body .dataTables_wrapper .dataTables_info,
html body .dataTables_wrapper .dataTables_length,
html body .dataTables_wrapper .dataTables_filter { color: #475569 !important; font-size: 12px !important; }
html body .dataTables_wrapper .dataTables_paginate .paginate_button {
  background: transparent !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 8px !important;
  color: #0f172a !important;
  margin: 0 2px !important;
  padding: 4px 10px !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html body .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
  color: #fff !important;
}
html body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(99,102,241,0.06) !important;
  color: #0f172a !important;
}

/* Toast / Alert stack (already injected as #ut-alert-stack) */
#ut-alert-stack { position: fixed; top: 70px; right: 16px; z-index: 99999; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.ut-toast {
  background: #ffffff;
  border: 1px solid #94a3b8;
  border-left: 4px solid #4f46e5;
  border-radius: var(--ut-radius-md);
  padding: 10px 14px;
  box-shadow: var(--ut-shadow-md);
  color: #0f172a;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: utSlideIn 0.25s ease;
}
.ut-toast.success { border-left-color: var(--ut-success); }
.ut-toast.warning { border-left-color: var(--ut-warning); }
.ut-toast.danger  { border-left-color: var(--ut-danger); }
.ut-toast.info    { border-left-color: var(--ut-info); }
.ut-toast.closing { animation: utSlideOut 0.25s ease forwards; }
.ut-toast .ut-toast-close { background: none; border: none; color: #475569; cursor: pointer; font-size: 16px; margin-left: auto; padding: 0 4px; }

/* Page transition loader (top bar) */
#ut-page-loader {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #4f46e5, #8b5cf6, #4f46e5);
  background-size: 200% 100%;
  z-index: 99999;
  width: 0; opacity: 0;
  transition: width 0.25s ease, opacity 0.2s ease;
  animation: ut-shimmer 1.2s linear infinite;
}
#ut-page-loader.active { opacity: 1; }

/* Smart empty state */
.ut-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #475569;
}
.ut-empty-state i { font-size: 48px; color: #94a3b8; margin-bottom: 12px; display: block; }
.ut-empty-state h4 { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0 0 6px; }
.ut-empty-state p { font-size: 13px; margin: 0 0 14px; }
.ut-empty-state .btn { background: #4f46e5; color: #fff; border: none; padding: 8px 18px; border-radius: var(--ut-radius-md); font-weight: 600; }

/* Theme quick-picker dropdown */
#ut-theme-quick-li .dropdown-menu { width: 240px; padding: 10px; max-height: 380px; overflow-y: auto; }
#ut-theme-quick-li .ut-theme-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  color: #0f172a; font-size: 12.5px;
  text-decoration: none !important;
  transition: background 0.15s;
}
#ut-theme-quick-li .ut-theme-opt:hover { background: rgba(99,102,241,0.06); }
#ut-theme-quick-li .ut-theme-opt.active { background: rgba(99,102,241,0.18); }
#ut-theme-quick-li .ut-theme-swatch {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  border: 1px solid #94a3b8;
}

/* Image lazy fade */
img[data-ut-lazy] { opacity: 0; transition: opacity 0.3s ease; }
img[data-ut-lazy].loaded { opacity: 1; }

/* ============================================================
   PHASE 7 — Polish (print, RTL, skeleton, focus)
   ============================================================ */

/* Skeleton loader */
.ut-skel {
  background: linear-gradient(90deg, #f1f5f9 0%, #ffffff 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: ut-shimmer 1.6s linear infinite;
  border-radius: var(--ut-radius-sm);
  display: inline-block;
  height: 14px;
  min-width: 60px;
}
.ut-skel.block { display: block; height: 100%; width: 100%; }
.ut-skel.lg { height: 22px; }
.ut-skel.circle { border-radius: 50%; }

/* Universal focus ring */
html body *:focus-visible {
  outline: 2px solid #4f46e5 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* RTL safety */
html[dir="rtl"] body .main-sidebar { right: 0 !important; left: auto !important; }
html[dir="rtl"] body .content-wrapper { margin-right: 230px !important; margin-left: 0 !important; }
html[dir="rtl"] body #ut-search-pill { left: 50% !important; right: auto !important; }
html[dir="rtl"] body .ut-breadcrumb { direction: rtl; }
@media (max-width: 768px) {
  html[dir="rtl"] body .content-wrapper { margin-right: 0 !important; }
}

/* Print-friendly */
@media print {
  body { background: #fff !important; color: #000 !important; }
  .main-header, .main-sidebar, .left-side,
  #ut-fab-btn, #ut-search-pill, #ut-page-loader,
  #ut-fav-bar, .ut-breadcrumb, #ut-alert-stack,
  .no-print { display: none !important; }
  .content-wrapper { margin: 0 !important; padding: 0 !important; background: #fff !important; }
  .box, .panel, .nav-tabs-custom { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; color: #000 !important; }
  .table, .table * { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
}

/* Smooth fade-in on body ready */
html body.ut-ready { animation: utFadeIn 0.18s ease-out; }
@keyframes utFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   TAILWIND LAYOUT COMPATIBILITY LAYER
   Targets actual DOM elements in the modernized layout
   ============================================================ */

/* --- Header (the gradient div at top) --- */
div[class*="tw-bg-gradient-to-r"] {
  background: #0f172a !important;
  border-bottom: 1px solid #94a3b8 !important;
}
div[class*="tw-bg-gradient-to-r"] button,
div[class*="tw-bg-gradient-to-r"] a {
  transition: all 0.15s !important;
}

/* --- Sidebar (aside or first child of tw-flex) --- */
aside, .tw-flex > div:first-child > ul {
  background: #ffffff !important;
}
aside a, aside button {
  color: #0f172a !important;
  transition: all 0.15s !important;
}
aside a:hover, aside button:hover {
  background: #f1f5f9 !important;
}
aside .tw-text-primary-600,
aside a.active,
aside [class*="tw-bg-primary"] {
  background: #eef2ff !important;
  color: #4f46e5 !important;
}

/* --- Main content area --- */
#scrollable-container {
  background: #e2e8f0 !important;
}
main.tw-flex {
  background: #e2e8f0 !important;
}

/* --- Glass stat cards (already in home blade) --- */
.glass-stat-card {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px -4px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.glass-stat-card:hover {
  box-shadow: 0 12px 32px -8px rgba(79,70,229,0.15) !important;
  border-color: rgba(79,70,229,0.3) !important;
  transform: translateY(-3px) !important;
}

/* --- Animated mesh background --- */
.animated-mesh-bg {
  background: linear-gradient(135deg, #e2e8f0 0%, #ffffff 100%) !important;
}

/* --- Backdrop blur cards (the purchase/sell stat row) --- */
div[class*="tw-backdrop-blur-xl"] {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px -2px rgba(0,0,0,0.05) !important;
}
div[class*="tw-backdrop-blur-xl"]:hover {
  box-shadow: 0 8px 24px -6px rgba(79,70,229,0.12) !important;
  border-color: rgba(79,70,229,0.25) !important;
}

/* --- Charts and data containers --- */
.tw-bg-gray-50 {
  background: #e2e8f0 !important;
}

/* --- Text colors for light theme --- */
.tw-text-gray-900 { color: #0f172a !important; }
.tw-text-gray-500 { color: #475569 !important; }
.tw-text-gray-400 { color: #475569 !important; }

/* --- Welcome header --- */
h1.tw-text-3xl, h1.tw-text-5xl {
  color: #0f172a !important;
}

/* --- Select2 and form elements --- */
.select2-container--default .select2-selection {
  background: #f8fafc !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 10px !important;
}
.select2-dropdown {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 10px !important;
  box-shadow: var(--ut-shadow-md) !important;
}
:root {
  --pos-radius-sm: 6px;
  --pos-radius-md: 10px;
  --pos-radius-lg: 14px;
  --pos-radius-xl: 20px;
  --pos-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --pos-shadow-md: 0 4px 16px rgba(0,0,0,0.25);
  --pos-shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --pos-transition: all 0.15s cubic-bezier(0.4,0,0.2,1);
  --pos-bg: #e2e8f0;
  --pos-bg-alt: #cbd5e1;
  --pos-surface: #ffffff;
  --pos-surface-2: #f8fafc;
  --pos-border: #94a3b8;
  --pos-text: #0f172a;
  --pos-text-dim: #475569;
  --pos-accent: #4f46e5;
  --pos-accent-2: #6366f1;
  --pos-success: #10b981;
  --pos-warning: #f59e0b;
  --pos-danger: #ef4444;
  --pos-info: #0ea5e9;
}
html, body {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 13px !important;
  -webkit-font-smoothing: antialiased !important;
}
body, h1,h2,h3,h4,h5,h6, .box-title, .sidebar-menu > li > a, .btn, .form-control, label, th, td, .nav-tabs > li > a, .breadcrumb > li, .dropdown-menu > li > a, button, input, select, textarea {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
.wrapper, .content-wrapper, #scrollable-container, .content, main {
  background: #e2e8f0 !important;
}

/* === SIDEBAR === */
.main-sidebar, .sidebar, .side-bar, aside.main-sidebar {
  background: #cbd5e1 !important;
  border-right: 1px solid #94a3b8 !important;
  width: 240px !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}
.main-sidebar .sidebar, aside.main-sidebar .sidebar {
  padding: 8px 6px !important;
}
.main-sidebar .user-panel, .sidebar .user-panel {
  border-bottom: 1px solid #94a3b8 !important;
  padding: 12px 10px !important;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border-radius: 10px !important;
  margin: 8px !important;
}
.sidebar-menu, .sidebar-menu.tree {
  padding: 6px 0 !important;
}
.sidebar-menu > li > a {
  color: #475569 !important;
  border-radius: 10px !important;
  margin: 2px 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
  border-left: 3px solid transparent !important;
}
.sidebar-menu > li > a > i, .sidebar-menu > li > a > .fa, .sidebar-menu > li > a > svg {
  color: #475569 !important;
  width: 18px !important;
  margin-right: 10px !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}
.sidebar-menu > li:not(.active) > a:hover {
  background: #ffffff !important;
  color: #0f172a !important;
  transform: translateX(3px) !important;
}
.sidebar-menu > li:not(.active) > a:hover > i {
  color: #4f46e5 !important;
}
.sidebar-menu > li.active > a, .sidebar-menu > li.menu-open > a {
  background: linear-gradient(90deg, #f8fafc 0%, #ffffff 100%) !important;
  color: #0f172a !important;
  border-left-color: #4f46e5 !important;
  font-weight: 600 !important;
}
.sidebar-menu > li.active > a > i, .sidebar-menu > li.menu-open > a > i {
  color: #4f46e5 !important;
}
.sidebar-menu .treeview-menu {
  background: transparent !important;
  padding-left: 8px !important;
}
.sidebar-menu .treeview-menu > li > a {
  color: #475569 !important;
  font-size: 12.5px !important;
  padding: 6px 12px 6px 36px !important;
  border-radius: 6px !important;
}
.sidebar-menu .treeview-menu > li > a:hover {
  color: #0f172a !important;
  background: #ffffff !important;
}
.sidebar-menu .treeview-menu > li.active > a {
  color: #4f46e5 !important;
  background: #ffffff !important;
}

/* === HEADER === */
.main-header, header.main-header, nav.main-header, .navbar, .navbar-static-top {
  background: #cbd5e1 !important;
  border-bottom: 1px solid #94a3b8 !important;
  height: 56px !important;
  min-height: 56px !important;
  box-shadow: var(--pos-shadow-sm) !important;
}
.main-header .logo, header .logo, .main-header .navbar-brand {
  background: transparent !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  letter-spacing: 0.5px !important;
  height: 56px !important;
  line-height: 56px !important;
}
.main-header .navbar .nav > li > a, .main-header .navbar a {
  color: #475569 !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}
.main-header .navbar .nav > li > a:hover {
  color: #0f172a !important;
  background: #ffffff !important;
}
.main-header .sidebar-toggle {
  color: #475569 !important;
}
.main-header .sidebar-toggle:hover {
  background: #ffffff !important;
  color: #4f46e5 !important;
}

/* === CONTENT HEADER (page title row) === */
.content-header {
  background: transparent !important;
  border: none !important;
  padding: 18px 22px 12px !important;
  box-shadow: none !important;
}
.content-header > h1 {
  color: #0f172a !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  margin: 0 !important;
}
.content-header > h1 > small {
  color: #475569 !important;
  font-size: 13px !important;
}
.content-header .breadcrumb {
  background: transparent !important;
  border: none !important;
  padding: 6px 0 0 !important;
  font-size: 12px !important;
}
.content-header .breadcrumb > li > a {
  color: #475569 !important;
}
.content-header .breadcrumb > .active {
  color: #4f46e5 !important;
  font-weight: 500 !important;
}
.content {
  padding: 8px 18px 24px !important;
}

/* === BOXES / CARDS / PANELS === */
.box, .panel, .card, .box-solid {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 14px !important;
  box-shadow: var(--pos-shadow-sm) !important;
  color: #0f172a !important;
  margin-bottom: 16px !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}
.box:hover, .card:hover { box-shadow: var(--pos-shadow-md) !important; }
.box-header, .panel-heading, .card-header {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid #94a3b8 !important;
  border-radius: 14px 14px 0 0 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.box-header > .box-title, .panel-heading > .panel-title, .card-header > .card-title {
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.box-header .box-tools, .card-header .card-tools, .box-header .pull-right {
  display: flex !important;
  gap: 6px !important;
  align-items: center !important;
}
.box-body, .panel-body, .card-body { padding: 16px 18px !important; }
.box-footer, .panel-footer, .card-footer {
  background: #f8fafc !important;
  border-top: 1px solid #94a3b8 !important;
  border-radius: 0 0 14px 14px !important;
  padding: 12px 18px !important;
}

/* === TABLES === */
table.dataTable, .table, table.table {
  background: transparent !important;
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
table.dataTable thead th, .table thead th, table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  border: none !important;
  border-bottom: 1px solid #94a3b8 !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  padding: 12px 14px !important;
  white-space: nowrap !important;
}
table.dataTable tbody tr, .table tbody tr, table tbody tr {
  background: transparent !important;
  color: #0f172a !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
}
table.dataTable tbody tr:nth-of-type(odd), .table-striped tbody tr:nth-of-type(odd) {
  background: rgba(255,255,255,0.015) !important;
}
table.dataTable tbody td, .table tbody td, table tbody td {
  border: none !important;
  border-bottom: 1px solid #94a3b8 !important;
  padding: 12px 14px !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
table.dataTable tbody tr:hover, .table tbody tr:hover {
  background: #f8fafc !important;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 50px !important;
  color: #0f172a !important;
  padding: 6px 14px !important;
}
.dataTables_wrapper .dataTables_info { color: #475569 !important; }

/* === FORMS === */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="datetime-local"], input[type="search"], input[type="tel"],
input[type="url"], select, textarea, .form-control {
  background: #cbd5e1 !important;
  border: 1px solid #94a3b8 !important;
  border-radius: var(--pos-radius-sm) !important;
  color: #0f172a !important;
  height: 36px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
  box-shadow: none !important;
}
textarea, textarea.form-control { height: auto !important; min-height: 80px !important; }
input:focus, select:focus, textarea:focus, .form-control:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.15) !important;
  outline: none !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: #cbd5e1 !important;
  border: 1px solid #94a3b8 !important;
  border-radius: var(--pos-radius-sm) !important;
  min-height: 36px !important;
  color: #0f172a !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--multiple .select2-selection__rendered { color: #0f172a !important; }
.select2-dropdown {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: var(--pos-radius-sm) !important;
  color: #0f172a !important;
}
.select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: #4f46e5 !important;
  color: #fff !important;
}
.select2-selection__choice {
  background: #4f46e5 !important;
  border: none !important;
  color: #fff !important;
  border-radius: 50px !important;
  padding: 2px 10px !important;
}
label, .control-label {
  color: #0f172a !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
}
.help-block, .form-text { color: #475569 !important; font-size: 11.5px !important; }

/* === BUTTONS === */
.btn {
  border-radius: var(--pos-radius-sm) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.4px !important;
  padding: 8px 16px !important;
  transition: all 0.15s cubic-bezier(0.4,0,0.2,1) !important;
  border: 1px solid transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.btn:active, .btn:focus { transform: scale(0.98) !important; outline: none !important; box-shadow: none !important; }
.btn-primary, .tw-dw-btn-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #fff !important;
  border: none !important;
}
.btn-primary:hover, .tw-dw-btn-primary:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.28) !important;
}
.btn-success { background: #10b981 !important; color: #fff !important; border: none !important; }
.btn-danger  { background: #ef4444 !important; color: #fff !important; border: none !important; }
.btn-warning { background: #f59e0b !important; color: #1a1a1a !important; border: none !important; }
.btn-info    { background: #0ea5e9 !important; color: #fff !important; border: none !important; }
.btn-default, .btn-secondary {
  background: transparent !important;
  border: 1px solid #94a3b8 !important;
  color: #0f172a !important;
}
.btn-default:hover, .btn-secondary:hover { background: #f8fafc !important; }
.btn-link { color: #4f46e5 !important; }

/* === MODALS === */
.modal-content {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: var(--pos-radius-lg) !important;
  box-shadow: var(--pos-shadow-lg) !important;
  color: #0f172a !important;
}
.modal-header {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid #94a3b8 !important;
  border-radius: var(--pos-radius-lg) var(--pos-radius-lg) 0 0 !important;
  padding: 14px 20px !important;
}
.modal-header .modal-title { color: #0f172a !important; font-weight: 600 !important; }
.modal-footer { border-top: 1px solid #94a3b8 !important; padding: 12px 20px !important; }
.modal-backdrop.in { opacity: 0.7 !important; backdrop-filter: blur(4px) !important; }

/* === PAGINATION === */
.pagination > li > a, .pagination > li > span {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  color: #0f172a !important;
  border-radius: 50px !important;
  margin: 0 2px !important;
}
.pagination > li.active > a, .pagination > li.active > span {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* === BADGES === */
.badge, .label {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #94a3b8 !important;
  border-radius: 50px !important;
  padding: 3px 9px !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.5px !important;
}
.badge.bg-green, .label.bg-green, .label-success { background: rgba(16,185,129,0.15) !important; color: #10b981 !important; border-color: rgba(16,185,129,0.3) !important; }
.badge.bg-yellow, .label.bg-yellow, .label-warning { background: rgba(245,158,11,0.15) !important; color: #f59e0b !important; border-color: rgba(245,158,11,0.3) !important; }
.badge.bg-red, .label.bg-red, .label-danger    { background: rgba(239,68,68,0.15) !important; color: #ef4444 !important; border-color: rgba(239,68,68,0.3) !important; }
.badge.bg-blue, .label.bg-blue, .badge.bg-info, .label.bg-info, .label-info     { background: rgba(6,182,212,0.15) !important; color: #0ea5e9 !important; border-color: rgba(6,182,212,0.3) !important; }
.badge.bg-navy, .label.bg-navy { background: rgba(99,102,241,0.15) !important; color: #4f46e5 !important; border-color: rgba(99,102,241,0.3) !important; }
.badge.bg-gray, .label.bg-gray { background: rgba(156,163,175,0.15) !important; color: #475569 !important; border-color: rgba(156,163,175,0.3) !important; }

/* === TABS === */
.nav-tabs { border-bottom: 1px solid #94a3b8 !important; }
.nav-tabs > li > a {
  color: #475569 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}
.nav-tabs > li > a:hover { background: #f8fafc !important; color: #0f172a !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  background: transparent !important;
  border-bottom: 2px solid #4f46e5 !important;
  color: #4f46e5 !important;
  font-weight: 600 !important;
}

/* === BREADCRUMB === */
.breadcrumb { background: transparent !important; padding: 4px 0 !important; }
.breadcrumb > li + li:before { content: '/' !important; color: #475569 !important; padding: 0 8px !important; }

/* === ALERTS === */
.alert {
  border-radius: var(--pos-radius-md) !important;
  border: 1px solid #94a3b8 !important;
  padding: 12px 16px !important;
}
.alert-success { background: rgba(16,185,129,0.08) !important; color: #10b981 !important; border-color: rgba(16,185,129,0.2) !important; }
.alert-warning { background: rgba(245,158,11,0.08) !important; color: #f59e0b !important; border-color: rgba(245,158,11,0.2) !important; }
.alert-danger  { background: rgba(239,68,68,0.08) !important; color: #ef4444 !important; border-color: rgba(239,68,68,0.2) !important; }
.alert-info    { background: rgba(6,182,212,0.08) !important; color: #0ea5e9 !important; border-color: rgba(6,182,212,0.2) !important; }

/* === DROPDOWN MENUS === */
.dropdown-menu {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: var(--pos-radius-md) !important;
  box-shadow: var(--pos-shadow-md) !important;
  padding: 6px !important;
}
.dropdown-menu > li > a {
  color: #0f172a !important;
  border-radius: var(--pos-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}
.dropdown-menu > li > a:hover { background: #f8fafc !important; color: #4f46e5 !important; }
.dropdown-menu .divider { background: #94a3b8 !important; }

/* Fix dropdown clipping — temporarily make containers overflow visible when open */
.ut-dropdown-open .table-responsive,
.ut-dropdown-open .dataTables_scrollBody,
.ut-dropdown-open .box-body,
.ut-dropdown-open td,
.ut-dropdown-open th,
.ut-dropdown-open tr,
.ut-dropdown-open tbody,
.ut-dropdown-open table {
  overflow: visible !important;
}

/* Ensure the dropdown menu is visible and scrollable if too tall */
.dropdown-menu {
  max-height: 85vh !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
}


/* === SCROLLBAR === */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #e2e8f0; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

/* === DARK MODE PROPER === */
html.dark, html.tw-dark { filter: none !important; }
html.dark body, html.tw-dark body { background: #e2e8f0 !important; color: #0f172a !important; }

/* === TAILWIND PRIMARY OVERRIDE === */
.tw-bg-primary-700, .tw-bg-primary-800, .tw-bg-primary-600 { background: #cbd5e1 !important; }
.tw-text-primary, .tw-text-primary-600 { color: #4f46e5 !important; }
/* === OCEAN GLASS LIGHT SIGNATURE === */

/* Body: subtle radial light gradients */
body {
  background: #f1f5f9 !important;
  background-image:
    radial-gradient(circle at 15% 50%, rgba(79,70,229,0.04), transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(14,165,233,0.04), transparent 50%) !important;
}

/* Glass card styling for ALL card-like elements */
.box, .card, .panel, .nav-tabs-custom,
div[class*="tw-backdrop-blur"],
.glass-stat-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px -4px rgba(0,0,0,0.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}
.box:hover, .card:hover, .glass-stat-card:hover,
div[class*="tw-backdrop-blur"]:hover {
  box-shadow: 0 12px 32px -8px rgba(79,70,229,0.12) !important;
  border-color: rgba(79,70,229,0.25) !important;
  transform: translateY(-2px) !important;
}

/* Box headers */
.box-header, .panel-heading {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 16px 16px 0 0 !important;
  padding: 14px 18px !important;
}
.box-header > .box-title {
  color: #1e293b !important;
  font-weight: 700 !important;
}

/* Header: dark slate with clean look */
div[class*="tw-bg-gradient-to-r"] {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
}

/* Sidebar: clean white with indigo active states */
aside {
  background: #ffffff !important;
  border-right: 1px solid #e2e8f0 !important;
}
aside a, aside button {
  color: #64748b !important;
  font-weight: 500 !important;
}
aside a:hover, aside button:hover {
  background: #f1f5f9 !important;
  color: #1e293b !important;
}
aside a.active, aside .tw-text-primary-600 {
  color: #4f46e5 !important;
  background: #eef2ff !important;
  font-weight: 600 !important;
}

/* Sidebar menu headers */
aside .tw-font-bold, aside .tw-uppercase {
  color: #94a3b8 !important;
  font-size: 10px !important;
  letter-spacing: 0.8px !important;
}

/* Content area */
#scrollable-container, main.tw-flex {
  background: #f1f5f9 !important;
}

/* Primary buttons: indigo gradient */
.btn-primary {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  border-color: #4f46e5 !important;
  box-shadow: 0 4px 12px rgba(79,70,229,0.25) !important;
  color: #fff !important;
}
.btn-primary:hover {
  box-shadow: 0 6px 20px rgba(79,70,229,0.35) !important;
  transform: translateY(-1px) !important;
}

/* Tables: clean modern look */
table.dataTable thead th, table.table thead th {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
table.dataTable tbody td, table.table tbody td {
  color: #334155 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
table.dataTable tbody tr:hover td {
  background: #f8fafc !important;
}

/* Forms */
.form-control, .select2-selection, input[type="text"], input[type="number"], select, textarea {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  color: #1e293b !important;
}
.form-control:focus {
  border-color: #4f46e5 !important;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1) !important;
}

/* Stat card icon containers */
.glass-stat-card .tw-rounded-2xl,
.glass-stat-card .tw-rounded-xl {
  backdrop-filter: none !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

/* Text overrides for light mode */
h1, h2, h3, h4, .tw-text-gray-900 { color: #1e293b !important; }
.tw-text-gray-500, .tw-text-gray-400 { color: #64748b !important; }
p, span, label { color: #334155; }

/* Animated mesh — light ocean gradient */
.animated-mesh-bg {
  background: radial-gradient(circle at 15% 50%, rgba(79,70,229,0.05), transparent 50%),
              radial-gradient(circle at 85% 30%, rgba(14,165,233,0.05), transparent 50%),
              linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%) !important;
}

/* Scrollbar: indigo accent */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

/* Welcome header gradient text */
h1[class*="tw-text-5xl"], h1[class*="tw-text-3xl"] {
  background: linear-gradient(135deg, #1e293b 0%, #4f46e5 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Modals */
.modal-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
}

/* Pagination */
.pagination > .active > a, .pagination > .active > span {
  background: #4f46e5 !important;
  border-color: #4f46e5 !important;
}

/* === V3: PROMINENT SEARCH BAR (image 2 style) — AGGRESSIVE OVERRIDES === */
.main-header .navbar-nav > li > a .ut-search-bar,
.ut-search-bar {
  display: inline-flex !important; align-items: center !important; gap: 10px !important;
  padding: 9px 18px !important; border-radius: 12px !important;
  background: #f8fafc !important; border: 1px solid #94a3b8 !important;
  color: #475569 !important; cursor: pointer !important; font-size: 13px !important;
  transition: all 0.2s ease !important; min-width: 280px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  font-weight: 500 !important; letter-spacing: 0.2px !important;
}
.main-header .navbar-nav > li > a .ut-search-bar:hover,
.ut-search-bar:hover {
  border-color: #4f46e5 !important; color: #0f172a !important;
  box-shadow: 0 4px 14px rgba(99,102,241,0.2) !important;
  background: #f8fafc !important;
}
.ut-search-bar .ut-ai-badge {
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
  color: #fff !important; font-size: 9px !important; font-weight: 800 !important;
  padding: 2px 8px !important; border-radius: 50px !important;
  letter-spacing: 1px !important; margin-left: auto !important;
}
.ut-search-bar kbd {
  font-size: 9px !important; color: #475569 !important;
  background: #cbd5e1 !important; padding: 2px 5px !important;
  border-radius: 4px !important; border: 1px solid #94a3b8 !important;
}
.ut-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; display: inline-block; }
.ut-clock { color: #475569; font-size: 12px; font-variant-numeric: tabular-nums; }
.ut-icon-btn {
  width: 36px !important; height: 36px !important; border-radius: 10px !important;
  background: #f8fafc !important; border: 1px solid #94a3b8 !important;
  color: #475569 !important; cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; font-size: 14px !important;
}
.ut-icon-btn:hover {
  background: #4f46e5 !important; color: #fff !important;
  border-color: #4f46e5 !important; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.25);
}
.ut-icon-btn .ut-count {
  position: absolute; top: -3px; right: -3px;
  background: #ef4444; color: #fff;
  border-radius: 50px; font-size: 9px; font-weight: 700;
  min-width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px;
}
/* === TOP NAVBAR BUTTONS (POS, Repair, etc.) — style like image 2 === */
.main-header .navbar-nav > li > a {
  border-radius: 10px !important; margin: 0 2px !important;
  transition: all 0.15s ease !important;
}
.main-header .navbar-nav > li > a:hover {
  background: #f8fafc !important; color: #4f46e5 !important;
}
.main-header .navbar-nav > li > a > i,
.main-header .navbar-nav > li > a > .fa {
  font-size: 14px !important; margin-right: 4px !important;
}
.main-header .navbar-nav > li > a > span {
  font-size: 12.5px !important; font-weight: 600 !important;
}
/* Header background */
.main-header {
  background: #ffffff !important;
  border-bottom: 1px solid #94a3b8 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
.main-header .navbar { background: transparent !important; }
.main-header .logo { background: transparent !important; }
/* === AI UNIVERSAL SEARCH OVERLAY === */
.ut-search-overlay {
  position: fixed; inset: 0; z-index: 999999;
  background: rgba(4,8,20,0.78);
  backdrop-filter: blur(14px) saturate(140%);
  display: none; align-items: flex-start; justify-content: center;
  padding-top: 8vh;
  animation: utFadeIn 0.18s ease;
}
.ut-search-overlay.is-open { display: flex; }
@keyframes utFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ut-search-modal {
  width: 100%; max-width: 720px;
  background: #ffffff; border: 1px solid #94a3b8;
  border-radius: var(--pos-radius-lg); box-shadow: var(--pos-shadow-lg);
  overflow: hidden;
  animation: utScaleIn 0.18s ease;
}
@keyframes utScaleIn { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ut-search-header { padding: 22px 24px 8px; text-align: center; }
.ut-search-header .ut-tag { color: #4f46e5; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.ut-search-header h2 { margin: 6px 0 4px; font-size: 22px; font-weight: 700; color: #0f172a; }
.ut-search-header p { color: #475569; font-size: 12.5px; margin: 0; }
.ut-search-input-wrap {
  margin: 18px 22px; padding: 4px 8px 4px 18px;
  display: flex; align-items: center; gap: 10px;
  background: #cbd5e1; border: 1.5px solid #4f46e5;
  border-radius: 50px; box-shadow: 0 0 0 4px rgba(99,102,241,0.12);
}
.ut-search-input-wrap input {
  flex: 1; background: transparent !important; border: none !important;
  height: 44px !important; font-size: 14px !important; color: #0f172a !important;
  box-shadow: none !important;
}
.ut-search-input-wrap .ut-ai-badge {
  background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff;
  padding: 4px 10px; border-radius: 50px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
}
.ut-search-input-wrap .ut-esc {
  background: #f8fafc; color: #475569; padding: 4px 10px;
  border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 1px;
}
.ut-search-quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 14px; }
.ut-search-quick button {
  background: #f8fafc; border: 1px solid #94a3b8; color: #475569;
  padding: 5px 12px; border-radius: 50px; font-size: 11.5px; cursor: pointer; transition: var(--pos-transition);
}
.ut-search-quick button:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.ut-search-body { max-height: 50vh; overflow-y: auto; padding: 0 22px 22px; }
.ut-section-label { color: #475569; font-size: 10px; font-weight: 800; letter-spacing: 2px; margin: 14px 4px 8px; text-transform: uppercase; }
.ut-search-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: var(--pos-radius-md);
  background: #f8fafc; border: 1px solid #94a3b8;
  margin-bottom: 6px; cursor: pointer; transition: var(--pos-transition);
}
.ut-search-row:hover, .ut-search-row.is-active {
  border-color: #4f46e5; background: #ffffff;
  transform: translateX(4px);
}
.ut-search-row .ut-row-icon {
  width: 36px; height: 36px; border-radius: var(--pos-radius-sm);
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  flex-shrink: 0;
}
.ut-search-row .ut-row-title { color: #0f172a; font-size: 13.5px; font-weight: 600; }
.ut-search-row .ut-row-meta { color: #475569; font-size: 11.5px; }
.ut-popular-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 6px; }
.ut-popular-card {
  background: #f8fafc; border: 1px solid #94a3b8;
  border-radius: var(--pos-radius-md); padding: 14px 10px; text-align: center;
  cursor: pointer; transition: var(--pos-transition);
}
.ut-popular-card:hover { border-color: #4f46e5; transform: translateY(-2px); }
.ut-popular-card i { font-size: 20px; color: #4f46e5; margin-bottom: 6px; }
.ut-popular-card div { color: #0f172a; font-size: 12px; font-weight: 600; }
/* === NOTIFICATION SLIDE PANEL === */
.ut-notif-panel {
  position: fixed; top: 0; right: -360px; width: 340px; height: 100vh;
  background: #ffffff; border-left: 1px solid #94a3b8;
  box-shadow: -8px 0 32px rgba(0,0,0,0.3); z-index: 999998;
  transition: right 0.25s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
}
.ut-notif-panel.is-open { right: 0; }
.ut-notif-header {
  padding: 16px 18px; border-bottom: 1px solid #94a3b8;
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}
.ut-notif-header h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.ut-notif-body { flex: 1; overflow-y: auto; padding: 12px; }
.ut-notif-group-label { color: #475569; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; margin: 10px 4px 6px; text-transform: uppercase; }
.ut-notif-item {
  display: flex; gap: 10px; padding: 10px;
  background: #f8fafc; border: 1px solid #94a3b8;
  border-radius: var(--pos-radius-md); margin-bottom: 6px;
  transition: var(--pos-transition); cursor: pointer;
}
.ut-notif-item:hover { border-color: #4f46e5; }
.ut-notif-item.unread { border-left: 3px solid #4f46e5; }
.ut-notif-item .ut-notif-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
}
.ut-notif-item.t-success .ut-notif-icon { background: #10b981; }
.ut-notif-item.t-warning .ut-notif-icon { background: #f59e0b; color: #1a1a1a; }
.ut-notif-item.t-danger  .ut-notif-icon { background: #ef4444; }
.ut-notif-item.t-info    .ut-notif-icon { background: #0ea5e9; }
.ut-notif-item .ut-notif-title { color: #0f172a; font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.ut-notif-item .ut-notif-desc  { color: #475569; font-size: 11.5px; line-height: 1.4; }
.ut-notif-item .ut-notif-time  { color: #475569; font-size: 10.5px; margin-top: 4px; }
/* === FLOATING ACTION BUTTON (Quick Actions + Panel) === */
.ut-fab-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 99997; pointer-events: none; }
.ut-fab-main {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff; border: none; cursor: pointer;
  box-shadow: var(--pos-shadow-lg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; transition: var(--pos-transition); pointer-events: auto;
}
.ut-fab-main:hover { transform: scale(1.06) rotate(15deg); }
.ut-fab-wrap.is-open { pointer-events: auto; }
.ut-fab-wrap.is-open .ut-fab-main { transform: rotate(45deg); }
.ut-fab-panel {
  position: absolute; bottom: 64px; right: 0; width: 300px;
  background: #ffffff; border: 1px solid #94a3b8; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4); padding: 14px 0;
  opacity: 0; transform: scale(0.92) translateY(8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; max-height: 70vh; overflow-y: auto;
}
.ut-fab-wrap.is-open .ut-fab-panel { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.ut-fab-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #475569; letter-spacing: 0.6px; }
.ut-fab-close { background: none; border: none; color: #475569; font-size: 16px; cursor: pointer; padding: 0; width: 24px; height: 24px; }
.ut-fab-section { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
.ut-fab-action {
  display: flex; align-items: center; gap: 10px;
  background: #ffffff; border: 1px solid #94a3b8;
  color: #0f172a; padding: 8px 10px; border-radius: 8px;
  text-decoration: none; font-size: 12.5px; transition: background 0.15s;
}
.ut-fab-action:hover { background: #94a3b8; }
.ut-fab-action span { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.ut-fab-divider { height: 1px; background: #94a3b8; margin: 10px 14px; }
.ut-fab-activity { padding: 0 12px; }
.ut-fab-act-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: #0f172a; text-decoration: none; font-size: 12px; transition: background 0.15s; }
.ut-fab-act-row:hover { background: #94a3b8; }
.ut-fab-act-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex-shrink: 0; }
.ut-fab-act-info { flex: 1; }
.ut-fab-act-info div { font-size: 12px; }
.ut-fab-act-info small { color: #475569; font-size: 10.5px; }
.ut-fab-empty { padding: 10px; text-align: center; color: #475569; font-size: 11.5px; }
.ut-fab-loading { padding: 10px; text-align: center; color: #475569; font-size: 11.5px; }
.ut-fab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 12px 8px; }
.ut-fab-grid-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px 2px; border-radius: 8px; transition: background 0.15s; }
.ut-fab-grid-btn:hover { background: #94a3b8; }
.ut-fab-grid-btn span { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.ut-fab-grid-btn small { color: #475569; font-size: 9.5px; font-weight: 600; }
/* === REMINDER SYSTEM === */
.ut-reminder-form { padding: 0 12px 8px; }
.ut-reminder-form label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; color: #475569; margin: 8px 0 3px; letter-spacing: 0.4px; }
.ut-reminder-form input, .ut-reminder-form textarea { width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid #94a3b8; background: #f8fafc; color: #0f172a; font-size: 12px; box-sizing: border-box; resize: vertical; font-family: inherit; }
.ut-reminder-form input:focus, .ut-reminder-form textarea:focus { outline: none; border-color: #4f46e5; }
.ut-reminder-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 6px 0; }
.ut-reminder-quick button { background: #f8fafc; color: #0f172a; border: 1px solid #94a3b8; border-radius: 6px; padding: 5px 2px; font-size: 10px; cursor: pointer; font-weight: 600; }
.ut-reminder-quick button:hover { background: #4f46e5; color: #fff; border-color: #4f46e5; }
.ut-reminder-list { max-height: 120px; overflow-y: auto; margin-top: 6px; }
.ut-reminder-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 6px; border-radius: 6px; background: #f8fafc; margin-bottom: 4px; font-size: 11px; border: 1px solid #94a3b8; }
.ut-reminder-item small { color: #475569; font-size: 10px; display: block; }
.ut-reminder-item button { background: transparent; color: #ef4444; border: none; padding: 2px 4px; font-size: 12px; cursor: pointer; line-height: 1; }
.ut-reminder-save { background: linear-gradient(135deg, #4f46e5, #6366f1); color: #fff; width: 100%; margin-top: 8px; padding: 8px; font-weight: 700; border: none; border-radius: 8px; cursor: pointer; font-size: 12px; }
.ut-reminder-ai { background: transparent; color: #4f46e5; border: 1px solid #4f46e5; width: 100%; margin-top: 4px; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 600; }
#ut-reminder-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.55); z-index: 999999; display: none; align-items: center; justify-content: center; }
#ut-reminder-overlay.is-open { display: flex; }
.ut-reminder-modal { background: #ffffff; border: 1px solid #94a3b8; border-radius: 18px; padding: 24px; width: 340px; max-width: 90vw; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,0.5); }
.ut-reminder-modal h3 { margin: 0 0 10px; color: #0f172a; font-size: 20px; }
.ut-reminder-modal p { color: #475569; font-size: 13px; margin: 0 0 18px; line-height: 1.4; }
.ut-reminder-modal .ut-rm-btns { display: flex; gap: 10px; justify-content: center; }
.ut-reminder-modal button { border: none; border-radius: 10px; padding: 10px 18px; font-size: 13px; cursor: pointer; font-weight: 700; transition: transform 0.1s; }
.ut-reminder-modal button:hover { transform: translateY(-1px); }
.ut-reminder-modal .btn-dismiss { background: #ef4444; color: #fff; }
.ut-reminder-modal .btn-snooze { background: #f8fafc; color: #0f172a; border: 1px solid #94a3b8; }
.ut-reminder-countdown { font-size: 32px; font-weight: 800; color: #4f46e5; margin: 10px 0; font-variant-numeric: tabular-nums; }
/* === POS PAGE OVERLAY (auto-applies on POS routes) === */
body[data-ut-pos="1"] .content-wrapper, body.ut-pos .content-wrapper { background: #e2e8f0 !important; }
body[data-ut-pos="1"] .pos-product-row, body.ut-pos .pos-product-row { gap: 10px !important; }
body[data-ut-pos="1"] .pos-categories, body.ut-pos .pos-categories {
  display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; margin-bottom: 12px;
}
body[data-ut-pos="1"] .pos-category-pill {
  flex-shrink: 0; padding: 6px 14px; background: #f8fafc;
  border: 1px solid #94a3b8; border-radius: 50px;
  color: #475569; font-size: 12px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
body[data-ut-pos="1"] .pos-category-pill.active {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff; border-color: transparent;
}
body[data-ut-pos="1"] .pos-tab, body.ut-pos .pos-tab {
  background: #ffffff !important;
  border: 1px solid #94a3b8 !important;
  border-radius: var(--pos-radius-md) !important;
  transition: var(--pos-transition);
}
body[data-ut-pos="1"] .pos-tab:hover, body.ut-pos .pos-tab:hover {
  border-color: #4f46e5 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(99,102,241,0.18) !important;
}
body[data-ut-pos="1"] .pos-tab .price { color: #4f46e5 !important; font-weight: 700 !important; }
body[data-ut-pos="1"] .pos-stock-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
body[data-ut-pos="1"] .pos-stock-dot.ok { background: #10b981; }
body[data-ut-pos="1"] .pos-stock-dot.low { background: #f59e0b; }
body[data-ut-pos="1"] .pos-stock-dot.out { background: #ef4444; }
.ut-pos-shortcuts {
  position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: #ffffff; border: 1px solid #94a3b8;
  border-radius: 50px; padding: 6px 14px; display: flex; gap: 12px;
  font-size: 11px; color: #475569; box-shadow: var(--pos-shadow-md); z-index: 999;
}
.ut-pos-shortcuts kbd {
  background: #f8fafc; color: #4f46e5;
  padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700;
  border: 1px solid #94a3b8;
}

/* ============================================================
   PHASE 5 — POS Transformation (real selectors used by app)
   ============================================================ */

/* Product grid */
body[data-ut-pos="1"] #product_list_body { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 12px !important; padding: 10px 4px !important; }
body[data-ut-pos="1"] #product_list_body .product_list { padding: 0 !important; width: 100% !important; max-width: none !important; flex: none !important; }
body[data-ut-pos="1"] #product_list_body .product_box {
  background: var(--ut-card-bg, #ffffff) !important;
  border: 1px solid var(--ut-border, #94a3b8) !important;
  border-radius: 12px !important;
  padding: 10px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 160px !important;
}
body[data-ut-pos="1"] #product_list_body .product_box:hover {
  transform: translateY(-3px) !important;
  border-color: var(--ut-accent, #4f46e5) !important;
  box-shadow: 0 8px 22px rgba(99,102,241,0.22) !important;
}
body[data-ut-pos="1"] .product_box .image-container {
  width: 100% !important; aspect-ratio: 1/1 !important;
  background: var(--ut-input-bg, #e2e8f0) !important;
  border-radius: 8px !important; overflow: hidden !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin-bottom: 8px !important;
}
body[data-ut-pos="1"] .product_box .image-container img { max-width: 90% !important; max-height: 90% !important; object-fit: contain !important; }
body[data-ut-pos="1"] .product_box .product-name,
body[data-ut-pos="1"] .product_box h6 { font-size: 11.5px !important; font-weight: 600 !important; color: var(--ut-text, #0f172a) !important; margin: 0 0 4px !important; line-height: 1.25 !important; max-height: 30px !important; overflow: hidden !important; }
body[data-ut-pos="1"] .product_box .price,
body[data-ut-pos="1"] .product_box .text-muted { font-size: 12px !important; font-weight: 700 !important; color: var(--ut-accent, #4f46e5) !important; }

/* Category / Brand pill rows (Bootstrap btn-group fallback) */
body[data-ut-pos="1"] #cat_box .btn,
body[data-ut-pos="1"] #brand_box .btn,
body[data-ut-pos="1"] .pos_category_filter .btn,
body[data-ut-pos="1"] .pos_brand_filter .btn {
  border-radius: 50px !important;
  padding: 6px 14px !important;
  margin: 3px 4px 3px 0 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border: 1px solid var(--ut-border, #94a3b8) !important;
  background: var(--ut-card-bg, #ffffff) !important;
  color: var(--ut-text, #0f172a) !important;
  transition: all 0.15s !important;
}
body[data-ut-pos="1"] #cat_box .btn.active,
body[data-ut-pos="1"] #brand_box .btn.active,
body[data-ut-pos="1"] .pos_category_filter .btn.active,
body[data-ut-pos="1"] .pos_brand_filter .btn.active {
  background: linear-gradient(135deg, var(--ut-accent, #4f46e5), #8b5cf6) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Payment row already uses .payment_row */
body[data-ut-pos="1"] .payment_row,
body.ut-pos .payment_row {
  background: var(--ut-card-bg, #ffffff) !important;
  border: 1px solid var(--ut-border, #94a3b8) !important;
  border-radius: 12px !important;
}
body[data-ut-pos="1"] .payment_row.bg-lightgray { background: var(--ut-input-bg, #e2e8f0) !important; }

/* POS keyboard shortcut buttons (Cash/Card/Multi/Hold) */
body[data-ut-pos="1"] .pos-action,
body[data-ut-pos="1"] #pos-cash,
body[data-ut-pos="1"] #pos-card,
body[data-ut-pos="1"] #pos-multiple-pay {
  background: linear-gradient(135deg, var(--ut-accent, #4f46e5), #8b5cf6) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--ut-radius-md, 10px) !important;
  border: none !important;
  padding: 10px 18px !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.25) !important;
}

/* Cart table on POS */
body[data-ut-pos="1"] table#pos_table,
body[data-ut-pos="1"] .pos_table {
  background: var(--ut-card-bg, #ffffff) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
body[data-ut-pos="1"] table#pos_table thead th,
body[data-ut-pos="1"] .pos_table thead th {
  background: var(--ut-table-header) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}

/* Total badge */
body[data-ut-pos="1"] #total_payable,
body[data-ut-pos="1"] .total_payable,
body[data-ut-pos="1"] #subtotal {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: var(--ut-accent, #4f46e5) !important;
}

/* Customer + due alert area */
body[data-ut-pos="1"] .customer_due_alert {
  background: rgba(245,158,11,0.12) !important;
  border: 1px solid rgba(245,158,11,0.4) !important;
  color: #f59e0b !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

/* Responsive: collapse to 3 cols on smaller screens */
@media (max-width: 1199px) {
  body[data-ut-pos="1"] #product_list_body { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
  body[data-ut-pos="1"] #product_list_body { grid-template-columns: repeat(2, 1fr) !important; }
}
/* === PREMIUM SALE VIEW MODAL === */
.modal-dialog.modal-xl .modal-content {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid var(--ut-border) !important;
  box-shadow: var(--ut-shadow-lg) !important;
  background: var(--ut-card-bg) !important;
}
.modal-dialog.modal-xl .modal-header {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12) 0%, rgba(79, 70, 229, 0.03) 100%) !important;
  border-bottom: 1px solid rgba(79, 70, 229, 0.2) !important;
  padding: 20px 24px !important;
}
.modal-dialog.modal-xl .modal-title {
  font-weight: 700 !important;
  color: var(--ut-text) !important;
  font-size: 20px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.modal-dialog.modal-xl .modal-title b {
  background: linear-gradient(135deg, var(--ut-accent) 0%, var(--ut-accent-hover) 100%) !important;
  color: #ffffff !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
  margin-left: 8px !important;
}
.modal-dialog.modal-xl .modal-header .close {
  color: var(--ut-text) !important;
  opacity: 0.6 !important;
  transition: all 0.2s ease !important;
  font-size: 28px !important;
  margin-top: -4px !important;
  background: transparent !important;
  border: none !important;
}
.modal-dialog.modal-xl .modal-header .close:hover {
  opacity: 1 !important;
  color: var(--ut-accent) !important;
  transform: scale(1.1) !important;
}
.modal-body > .row > .col-sm-4,
.modal-body > .row > .col-sm-3 {
  background: rgba(79, 70, 229, 0.04) !important;
  border: 1px solid rgba(79, 70, 229, 0.16) !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.02) !important;
  transition: all 0.25s ease !important;
  min-height: 160px;
}
.modal-body > .row > .col-sm-4:hover,
.modal-body > .row > .col-sm-3:hover {
  border-color: rgba(79, 70, 229, 0.4) !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08) !important;
  transform: translateY(-2px) !important;
}
.modal-body > .row > .col-sm-4 b,
.modal-body > .row > .col-sm-3 b,
.modal-body > .row > .col-sm-4 strong,
.modal-body > .row > .col-sm-3 strong {
  color: var(--ut-accent) !important;
  font-weight: 600 !important;
  display: inline-block;
  margin-right: 4px;
}
.modal-body .label.bg-green,
.modal-body .label-success,
.modal-body .badge.bg-green {
  background: rgba(16,185,129,0.12) !important;
  color: #10b981 !important;
  border: 1px solid rgba(16,185,129,0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.modal-body .label.bg-yellow,
.modal-body .label-warning,
.modal-body .badge.bg-yellow {
  background: rgba(245,158,11,0.12) !important;
  color: #f59e0b !important;
  border: 1px solid rgba(245,158,11,0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.modal-body .label.bg-red,
.modal-body .label-danger,
.modal-body .badge.bg-red {
  background: rgba(239,68,68,0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239,68,68,0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.modal-body .label.bg-blue,
.modal-body .label-info,
.modal-body .badge.bg-blue {
  background: rgba(59,130,246,0.12) !important;
  color: #3b82f6 !important;
  border: 1px solid rgba(59,130,246,0.3) !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}
.modal-body .table-responsive table.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid var(--ut-border) !important;
  background: var(--ut-card-bg) !important;
  margin-bottom: 24px !important;
}
.modal-body .table-responsive table.table th {
  background: linear-gradient(135deg, var(--ut-accent) 0%, var(--ut-accent-hover) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  border: none !important;
}
.modal-body .table-responsive table.table td {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ut-border) !important;
  border-top: none !important;
  color: var(--ut-text) !important;
  vertical-align: middle !important;
}
.modal-body .table-responsive table.table tbody tr:last-child td {
  border-bottom: none !important;
}
.modal-body .table-responsive table.table tbody tr:nth-of-type(even) {
  background: rgba(79, 70, 229, 0.02) !important;
}
.modal-body .table-responsive table.table tbody tr:hover {
  background: rgba(79, 70, 229, 0.05) !important;
}
.modal-body table.bg-gray {
  background: var(--ut-card-bg) !important;
  border: 1px solid var(--ut-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
.modal-body table.bg-gray tr.bg-green th {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border: none !important;
}
.modal-body table.bg-gray tr:nth-last-child(3) {
  background: rgba(79, 70, 229, 0.08) !important;
}
.modal-body table.bg-gray tr:nth-last-child(3) th,
.modal-body table.bg-gray tr:nth-last-child(3) td {
  color: var(--ut-accent) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
.modal-body table.bg-gray tr:nth-last-child(2) {
  background: rgba(16, 185, 129, 0.06) !important;
}
.modal-body table.bg-gray tr:nth-last-child(2) th,
.modal-body table.bg-gray tr:nth-last-child(2) td {
  color: #10b981 !important;
  font-weight: 600 !important;
}
.modal-body table.bg-gray tr:nth-last-child(1) {
  background: rgba(239, 68, 68, 0.06) !important;
}
.modal-body table.bg-gray tr:nth-last-child(1) th,
.modal-body table.bg-gray tr:nth-last-child(1) td {
  color: #ef4444 !important;
  font-weight: 700 !important;
}
.modal-body p.well.bg-gray {
  background: rgba(79, 70, 229, 0.03) !important;
  border: 1px dashed rgba(79, 70, 229, 0.25) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  color: var(--ut-text) !important;
  box-shadow: none !important;
}
.modal-body .timeline {
  margin-top: 15px !important;
  border-left: 2px solid rgba(79, 70, 229, 0.2) !important;
  padding-left: 20px !important;
  margin-left: 10px !important;
}
.modal-body .timeline-item {
  position: relative !important;
  margin-bottom: 20px !important;
}
.modal-body .timeline-item::before {
  content: '' !important;
  position: absolute !important;
  left: -27px !important;
  top: 4px !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: var(--ut-accent) !important;
  border: 2px solid var(--ut-card-bg) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2) !important;
}
.modal-footer {
  background: var(--ut-card-bg) !important;
  border-top: 1px solid var(--ut-border) !important;
  padding: 16px 24px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}
.modal-footer .tw-dw-btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  text-shadow: none !important;
}
.modal-footer .tw-dw-btn-primary {
  background: linear-gradient(135deg, var(--ut-accent) 0%, var(--ut-accent-hover) 100%) !important;
  border: none !important;
  color: #ffffff !important;
}
.modal-footer .tw-dw-btn-primary:hover {
  box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4) !important;
  transform: translateY(-1px) !important;
}
.modal-footer .tw-dw-btn-success {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border: none !important;
  color: #ffffff !important;
}
.modal-footer .tw-dw-btn-success:hover {
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4) !important;
  transform: translateY(-1px) !important;
}
.modal-footer .tw-dw-btn-neutral {
  background: var(--ut-border) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  color: var(--ut-text) !important;
}
.modal-footer .tw-dw-btn-neutral:hover {
  background: rgba(255,255,255,0.1) !important;
  transform: translateY(-1px) !important;
}

/* === MOBILE NAVIGATION AND SIDEBAR OVERRIDES === */
@media (max-width: 768px) {
  .main-header .sidebar-toggle {
    padding: 14px 18px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    min-width: 48px !important;
  }
  body.sidebar-open::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 1030 !important;
    animation: utFadeIn 0.2s ease !important;
  }
  .main-sidebar {
    z-index: 1040 !important;
    position: fixed !important;
    height: 100vh !important;
    width: 280px !important;
    transform: translateX(-280px) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  body.sidebar-open .main-sidebar {
    transform: translateX(0) !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.25) !important;
  }
  .navbar-custom-menu .navbar-nav > li.user-menu > .dropdown-menu {
    position: fixed !important;
    top: 60px !important;
    right: 16px !important;
    width: calc(100vw - 32px) !important;
    max-width: 320px !important;
    border-radius: 12px !important;
    box-shadow: var(--ut-shadow-lg) !important;
    border: 1px solid var(--ut-border) !important;
    background: var(--ut-card-bg) !important;
  }
}
@media (max-width: 480px) {
  .main-header {
    height: 52px !important;
  }
  .main-header .navbar {
    min-height: 52px !important;
    margin-left: 0 !important;
  }
  .main-header .logo {
    display: none !important;
  }
}

/* === SYSTEM-WIDE RESPONSIVE OVERHAULS === */

/* --- 1. Global & Sidebar Overrides (Full Responsive) --- */

/* Tablet (769px-991px): sidebar is fixed overlay, content fills width */
@media (min-width: 769px) and (max-width: 991px) {
  .main-sidebar, .left-side {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 230px !important;
    z-index: 810 !important;
    transform: translateX(-230px);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto !important;
  }
  body.sidebar-open .main-sidebar,
  body.sidebar-open .left-side {
    transform: translateX(0) !important;
  }
  .content-wrapper, .main-footer {
    margin-left: 0 !important;
    transition: margin-left 0.28s cubic-bezier(.4,0,.2,1);
  }
}

/* Mobile (<=768px): sidebar is slide-in drawer */
@media (max-width: 768px) {
  .main-sidebar, .left-side {
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 260px !important; max-width: 82vw !important;
    z-index: 1050 !important;
    transform: translateX(-260px);
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  body.sidebar-open .main-sidebar,
  body.sidebar-open .left-side {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35) !important;
  }
  .content-wrapper, .main-footer { margin-left: 0 !important; }
  body.sidebar-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 1040;
  }
  .modal-dialog { width: 96% !important; margin: 10px auto !important; }
}

/* --- 2. Top Nav / Header bar --- */
@media (max-width: 600px) {
  .ut-search-bar { 
    min-width: 0 !important; 
    padding: 6px 10px !important; 
  }
  .ut-search-bar span:not(.ut-ai-badge):not(kbd) { 
    display: none !important; 
  }
}

/* --- 3. DataTables Responsive Scroll & Frozen Columns --- */
@media (max-width: 768px) {
  /* Allow tables to shrink on mobile; dropdown portal handles menu visibility */
  .table-responsive table.table,
  table.dataTable {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Only apply horizontal scroll when dropdown is NOT open */
  .table-responsive:not(.ut-dropdown-open),
  .dataTables_wrapper:not(.ut-dropdown-open),
  .dataTables_scrollBody:not(.ut-dropdown-open) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
  }

  /* Keep action dropdown button groups inline; dropdown portal handles menu visibility */
  .btn-group.btn-group-xs,
  .btn-group {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  
  /* Pagination and search input */
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter {
    text-align: left !important;
    float: none !important;
    margin-bottom: 10px !important;
  }
  
  .dataTables_wrapper .dataTables_filter input {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* --- 4. FAB Mobile Placement --- */
@media (max-width: 480px) {
  .ut-fab-wrap {
    bottom: 16px !important;
    right: 16px !important;
  }
  .ut-fab-panel {
    width: calc(100vw - 32px) !important;
    right: 16px !important;
    bottom: 80px !important;
    border-radius: 16px !important;
  }
  .ut-fab-btn {
    width: 54px !important;
    height: 54px !important;
    font-size: 20px !important;
  }
  .ut-fab-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* --- 5. AI Search Overlay --- */
@media (max-width: 640px) {
  .ut-search-overlay {
    padding-top: 0 !important;
  }
  .ut-search-modal {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .ut-search-input {
    font-size: 16px !important; /* Prevents iOS auto-zoom */
  }
  .ut-search-quick-tags {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .ut-search-results {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-bottom: 40px !important;
  }
}

/* --- 6. Sale View Modal Mobile Stacking --- */
@media (max-width: 768px) {
  .modal-body > .row > .col-sm-4,
  .modal-body > .row > .col-sm-3 {
    width: 100% !important;
    min-height: auto !important;
    margin-bottom: 12px !important;
  }
  .modal-body .col-md-6 {
    width: 100% !important;
    margin-bottom: 15px !important;
  }
}

/* --- 7. POS Mobile Grid & Sheet --- */
@media (max-width: 480px) {
  body[data-ut-pos="1"] #product_list_body {
    grid-template-columns: 1fr !important;
  }
}

/* --- 8. Forms & Inputs Collapse --- */
@media (max-width: 768px) {
  .col-sm-6, .col-md-4, .col-md-3, .col-sm-3, .col-sm-4 {
    width: 100% !important;
    float: none !important;
  }
  .form-group {
    margin-bottom: 15px !important;
  }
  .input-group {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .input-group-addon, .input-group-btn {
    width: auto !important;
  }
  .input-group .form-control {
    flex: 1 !important;
    min-width: 150px !important;
  }
  
  /* Tabs overflow horizontal scrolling */
  .nav-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-bottom: 1px solid var(--ut-border) !important;
  }
  .nav-tabs > li {
    flex: 0 0 auto !important;
    float: none !important;
  }
}

/* --- 9. Dashboard / Stat Cards --- */
@media (max-width: 768px) {
  .info-box {
    margin-bottom: 15px !important;
  }
}
@media (max-width: 480px) {
  .col-xs-6 {
    width: 100% !important;
  }
}

/* --- 10. Notification Panel Mobile Overrides --- */
@media (max-width: 480px) {
  .ut-notif-panel {
    width: 100vw !important;
    right: -100vw !important;
    border-radius: 0 !important;
  }
  body.notif-open .ut-notif-panel {
    transform: translateX(-100vw) !important;
  }
}

/* --- General Typography/Container Mobile Tweak --- */
@media (max-width: 480px) {
  .content-header > h1 { 
    font-size: 18px !important; 
  }
  .box-body, .card-body { 
    padding: 12px !important; 
  }
}

/* === ACCESSIBILITY CSS === */

/* Contrast levels */
html.ut-contrast-1 { filter: contrast(1.10) saturate(1.05) !important; }
html.ut-contrast-2 { filter: contrast(1.25) saturate(1.10) !important; }
html.ut-contrast-2 .box, html.ut-contrast-2 .card, html.ut-contrast-2 .panel,
html.ut-contrast-2 input, html.ut-contrast-2 .form-control { border-width: 1.5px !important; }
html.ut-contrast-3 { filter: contrast(1.45) saturate(1.15) !important; }
html.ut-contrast-3 body { color: #000 !important; background: #fff !important; }
html.ut-contrast-3 .box, html.ut-contrast-3 .card, html.ut-contrast-3 .panel,
html.ut-contrast-3 input, html.ut-contrast-3 .form-control { border-width: 2px !important; }
html.ut-contrast-4 { filter: contrast(1.90) saturate(1.30) !important; }
html.ut-contrast-4 body { color: #000 !important; background: #fff !important; }
html.ut-contrast-4 .box, html.ut-contrast-4 .card, html.ut-contrast-4 .panel,
html.ut-contrast-4 input, html.ut-contrast-4 .form-control { border-width: 2.5px !important; border-color:#000 !important; }

/* Text sizes */
html.ut-text-lg  { font-size: 112% !important; }
html.ut-text-xl  { font-size: 125% !important; }
html.ut-text-xxl { font-size: 140% !important; }
html.ut-text-lg  body, html.ut-text-lg  .btn, html.ut-text-lg  .form-control { font-size: 15px !important; }
html.ut-text-xl  body, html.ut-text-xl  .btn, html.ut-text-xl  .form-control { font-size: 17px !important; }
html.ut-text-xxl body, html.ut-text-xxl .btn, html.ut-text-xxl .form-control { font-size: 19px !important; }

/* Font families */
html.ut-font-dyslexia, html.ut-font-dyslexia body, html.ut-font-dyslexia * {
  font-family: 'Arial Rounded MT Bold', 'Trebuchet MS', Arial, sans-serif !important;
  letter-spacing: 0.6px !important; word-spacing: 3px !important; line-height: 1.65 !important;
}
html.ut-font-mono, html.ut-font-mono body, html.ut-font-mono * {
  font-family: 'Courier New', Courier, monospace !important;
}
html.ut-font-serif, html.ut-font-serif body {
  font-family: Georgia, 'Times New Roman', serif !important;
}
html.ut-font-rounded, html.ut-font-rounded body {
  font-family: 'Trebuchet MS', 'Century Gothic', Arial, sans-serif !important;
}

/* Reduce motion */
html.ut-reduce-motion *, html.ut-reduce-motion *::before, html.ut-reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* Focus indicators */
html.ut-focus-visible *:focus, html.ut-focus-visible *:focus-visible {
  outline: 3px solid #4f46e5 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 6px rgba(99,102,241,0.22) !important;
}

/* Large cursor */
html.ut-large-cursor, html.ut-large-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path fill='black' stroke='white' stroke-width='2' d='M2 2 L2 28 L10 22 L14 30 L18 28 L14 20 L24 20 Z'/></svg>") 2 2, auto !important;
}

/* Accessibility widget button */
#ut-a11y-btn {
  position: fixed; bottom: 100px; left: 24px; z-index: 99996;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #8b5cf6);
  color: #fff; border: none; cursor: grab;
  box-shadow: 0 8px 24px rgba(99,102,241,0.45);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; transition: transform 0.2s, box-shadow 0.2s; touch-action: none;
}
#ut-a11y-btn:hover { transform: scale(1.08); box-shadow: 0 12px 32px rgba(99,102,241,0.55); }

#ut-a11y-panel {
  position: fixed; bottom: 162px; left: 24px; width: 316px; z-index: 99997;
  background: #1e1e2e; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  max-height: 82vh; overflow-y: auto; scrollbar-width: thin;
}

@media (max-width: 400px) {
  #ut-a11y-panel { width: calc(100vw - 24px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}
/* === Feature 11: ROLE-ADAPTIVE === */
body[data-ut-role="cashier"] .sidebar-menu > li > a[href*="report"],
body[data-ut-role="cashier"] .sidebar-menu > li > a[href*="setting"],
body[data-ut-role="cashier"] .sidebar-menu > li > a[href*="purchase"],
body[data-ut-role="cashier"] .sidebar-menu > li > a[href*="expense"],
body[data-ut-role="cashier"] .sidebar-menu > li > a[href*="bi-suite"],
body[data-ut-role="cashier"] .sidebar-menu > li > a[href*="ultimate-theme"] { display: none !important; }
body[data-ut-role="cashier"] .content-wrapper .btn-danger[data-action="delete"],
body[data-ut-role="cashier"] [data-ut-role-hide="cashier"] { display: none !important; }
body[data-ut-role="cashier"] .ut-cashier-hero { display: block !important; }
body[data-ut-role="manager"] .sidebar-menu > li > a[href*="business-settings"],
body[data-ut-role="manager"] .sidebar-menu > li > a[href*="ultimate-theme/settings"] { display: none !important; }
.ut-cashier-hero { display: none; }
.ut-cashier-hero {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff; padding: 22px; border-radius: var(--pos-radius-lg); margin: 14px 0;
  text-align: center; font-size: 18px; font-weight: 700; cursor: pointer;
}
/* === Feature 1: COMMAND PALETTE EXTENSIONS === */
.ut-search-cmd-card {
  background: linear-gradient(135deg, rgba(99,102,241,0.18), rgba(139,92,246,0.16));
  border: 1.5px solid #4f46e5;
  padding: 12px 14px; border-radius: var(--pos-radius-md);
  margin-bottom: 8px; display: flex; align-items: center; gap: 12px; cursor: pointer;
}
.ut-search-cmd-card:hover { transform: translateX(4px); box-shadow: 0 4px 16px rgba(99,102,241,0.25); }
.ut-search-cmd-card .ico { width: 38px; height: 38px; border-radius: var(--pos-radius-sm); background: #4f46e5; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ut-search-cmd-card .ttl { color: #0f172a; font-weight: 700; font-size: 13.5px; }
.ut-search-cmd-card .sub { color: #475569; font-size: 11.5px; }
.ut-search-cmd-card .arrow { margin-left: auto; color: #4f46e5; }
.ut-cmd-pill-grid { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.ut-cmd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f8fafc; border: 1px solid #94a3b8;
  color: #0f172a; font-size: 11.5px; font-weight: 600;
  padding: 5px 11px; border-radius: 50px; cursor: pointer; transition: var(--pos-transition);
}
.ut-cmd-pill:hover { background: #4f46e5; color: #fff; border-color: transparent; }
.ut-cmd-pill .kbd { background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 4px; font-size: 9.5px; }
/* === Feature 2: PRICE OPTIMIZER PANEL === */
.ut-price-panel {
  position: fixed; top: 0; right: -440px; width: 420px; height: 100vh;
  background: #ffffff; border-left: 1px solid #94a3b8;
  box-shadow: -10px 0 36px rgba(0,0,0,0.35); z-index: 99998;
  transition: right 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column;
}
.ut-price-panel.is-open { right: 0; }
.ut-price-panel header { padding: 16px 18px; border-bottom: 1px solid #94a3b8; display: flex; align-items: center; justify-content: space-between; }
.ut-price-panel header h3 { margin: 0; font-size: 14px; color: #0f172a; }
.ut-price-panel .body { flex: 1; overflow-y: auto; padding: 16px; }
.ut-price-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ut-price-compare > div { background: #f8fafc; border: 1px solid #94a3b8; border-radius: var(--pos-radius-md); padding: 14px; text-align: center; }
.ut-price-compare .lbl { color: #475569; font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px; }
.ut-price-compare .val { font-size: 22px; font-weight: 800; color: #0f172a; margin-top: 4px; }
.ut-price-compare .new .val { color: #4f46e5; }
.ut-price-impact {
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(16,185,129,0.05));
  border: 1px solid rgba(16,185,129,0.3); padding: 10px 14px;
  border-radius: var(--pos-radius-md); color: #10b981;
  font-size: 13px; font-weight: 700; margin-bottom: 12px;
}
.ut-spark { width: 100%; height: 80px; }
.ut-confidence-bar { height: 10px; background: #f8fafc; border-radius: 50px; overflow: hidden; margin: 8px 0; }
.ut-confidence-bar > div { height: 100%; background: linear-gradient(90deg, #f59e0b, #10b981); }
.ut-trigger-price-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f8fafc; border: 1px solid #94a3b8;
  color: #4f46e5; padding: 4px 9px; font-size: 11px;
  border-radius: 50px; cursor: pointer; margin-left: 6px;
}
.ut-trigger-price-btn:hover { background: #4f46e5; color: #fff; }
/* === Feature 3: CUSTOMER INTEL === */
.ut-intel-panel {
  position: fixed; top: 80px; right: 16px; width: 340px; max-height: calc(100vh - 100px);
  background: #ffffff; border: 1px solid #94a3b8; border-radius: var(--pos-radius-lg);
  box-shadow: var(--pos-shadow-lg); z-index: 99995; overflow-y: auto;
  transform: translateX(420px); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
}
.ut-intel-panel.is-open { transform: translateX(0); }
.ut-intel-header { padding: 16px; border-bottom: 1px solid #94a3b8; }
.ut-intel-tier { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 50px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; }
.ut-intel-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #94a3b8; }
.ut-intel-stat .lbl { color: #475569; font-size: 10px; letter-spacing: 1.2px; font-weight: 700; }
.ut-intel-stat .val { color: #0f172a; font-weight: 800; font-size: 16px; }
.ut-intel-section { padding: 12px 16px; border-bottom: 1px solid #94a3b8; }
.ut-intel-section h5 { font-size: 11px; color: #475569; letter-spacing: 1.5px; margin: 0 0 8px; text-transform: uppercase; }
.ut-intel-vip { background: linear-gradient(135deg, rgba(240,208,96,0.22), rgba(240,208,96,0.06)); border: 1px solid rgba(240,208,96,0.4); padding: 8px 12px; border-radius: var(--pos-radius-md); color: #f0d060; font-weight: 700; margin: 12px 16px 0; }
.ut-intel-bday { background: linear-gradient(135deg, rgba(255,128,171,0.20), rgba(255,128,171,0.05)); border: 1px solid rgba(255,128,171,0.4); padding: 8px 12px; border-radius: var(--pos-radius-md); color: #ff80ab; font-weight: 700; margin: 8px 16px 0; }
.ut-intel-toggle { position: fixed; top: 80px; right: 0; background: #4f46e5; color: #fff; border: none; padding: 8px 6px 8px 10px; border-radius: var(--pos-radius-md) 0 0 var(--pos-radius-md); cursor: pointer; z-index: 99994; }
/* === Feature 4: ALERT BANNER === */
.ut-alert-bar {
  position: sticky; top: 0; z-index: 99990;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid #94a3b8;
}
.ut-alert-bar.sev-info    { background: rgba(6,182,212,0.18);  color: #0ea5e9; }
.ut-alert-bar.sev-warning { background: rgba(245,158,11,0.18); color: #f59e0b; }
.ut-alert-bar.sev-danger  { background: rgba(239,68,68,0.18);  color: #ef4444; }
.ut-alert-bar i { font-size: 16px; }
.ut-alert-bar .ut-alert-dismiss { margin-left: auto; background: transparent; border: none; cursor: pointer; color: inherit; opacity: 0.7; font-size: 18px; }
.ut-alert-bar .ut-alert-dismiss:hover { opacity: 1; }
.ut-alert-stack { position: fixed; top: 0; left: 0; right: 0; z-index: 999991; }
/* === Feature 7: ANNOUNCEMENT === */
.ut-announcement {
  display: flex; align-items: center; gap: 12px; padding: 9px 18px;
  font-size: 12.5px; font-weight: 600;
  border-bottom: 1px solid #94a3b8;
}
.ut-announcement.t-info    { background: linear-gradient(90deg, rgba(6,182,212,0.20), rgba(6,182,212,0.05)); color: #0ea5e9; }
.ut-announcement.t-warning { background: linear-gradient(90deg, rgba(245,158,11,0.20), rgba(245,158,11,0.05)); color: #f59e0b; }
.ut-announcement.t-success { background: linear-gradient(90deg, rgba(16,185,129,0.20), rgba(16,185,129,0.05)); color: #10b981; }
.ut-announcement.t-danger  { background: linear-gradient(90deg, rgba(239,68,68,0.20), rgba(239,68,68,0.05));  color: #ef4444; }
.ut-announcement .ut-announce-countdown { background: rgba(0,0,0,0.20); padding: 2px 8px; border-radius: 50px; font-size: 11px; font-variant-numeric: tabular-nums; }
.ut-announcement .ut-announce-dismiss { margin-left: auto; background: transparent; border: none; color: inherit; opacity: 0.7; cursor: pointer; }
/* === Feature 6: MULTI-TAB POS === */
.ut-pos-tabs {
  display: flex; gap: 4px; padding: 6px; background: #f8fafc;
  border: 1px solid #94a3b8; border-radius: var(--pos-radius-md);
  margin-bottom: 10px; overflow-x: auto;
}
.ut-pos-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--pos-radius-sm); cursor: pointer;
  font-size: 12px; font-weight: 600; color: #475569;
  border: 1px solid transparent; flex-shrink: 0;
  transition: var(--pos-transition);
}
.ut-pos-tab:hover { color: #0f172a; background: #ffffff; }
.ut-pos-tab.is-active { color: #4f46e5; background: #ffffff; border-color: #4f46e5; }
.ut-pos-tab .badge { background: #4f46e5; color: #fff; font-size: 9.5px; padding: 1px 6px; border-radius: 50px; }
.ut-pos-tab .close { opacity: 0.5; cursor: pointer; }
.ut-pos-tab .close:hover { opacity: 1; color: #ef4444; }
.ut-pos-tab.add { background: transparent; border: 1px dashed #94a3b8; color: #475569; }
.ut-pos-tab.add:hover { color: #4f46e5; border-color: #4f46e5; }
/* === Feature 9: DASHBOARD BUILDER === */
body.ut-dash-edit .row > [class*="col-"] > .box,
body.ut-dash-edit .row > [class*="col-"] > .card { outline: 2px dashed #4f46e5; cursor: grab; position: relative; }
body.ut-dash-edit .row > [class*="col-"] > .box::before,
body.ut-dash-edit .row > [class*="col-"] > .card::before {
  content: '⠿ Drag to move'; position: absolute; top: 4px; left: 8px;
  background: #4f46e5; color: #fff; font-size: 9.5px; font-weight: 700;
  padding: 2px 6px; border-radius: 4px; z-index: 5;
}
.ut-widget-handle { cursor: grab; }
.ut-widget-handle:active { cursor: grabbing; }
.ut-widget-toggle { background: transparent; border: 1px solid #94a3b8; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; color: #475569; }
.ut-dash-toolbar { position: sticky; top: 8px; z-index: 99980; display: flex; gap: 8px; padding: 10px 14px; background: #ffffff; border: 1px solid #94a3b8; border-radius: var(--pos-radius-md); margin-bottom: 14px; }
.ut-dash-drawer {
  position: fixed; top: 0; right: -340px; width: 320px; height: 100vh; z-index: 99979;
  background: #ffffff; border-left: 1px solid #94a3b8;
  padding: 14px; transition: right 0.25s ease; overflow-y: auto;
}
.ut-dash-drawer.is-open { right: 0; }
.ut-hidden-widget {
  background: #f8fafc; border: 1px dashed #94a3b8;
  padding: 8px 12px; margin-bottom: 6px; border-radius: var(--pos-radius-sm);
  cursor: grab; font-size: 12px; color: #0f172a;
}
.ut-hidden-widget:hover { border-color: #4f46e5; }
/* === Feature 13: KEYBOARD OVERLAY === */
.ut-kbd-overlay {
  position: fixed; inset: 0; z-index: 999998;
  background: rgba(4,8,20,0.85); backdrop-filter: blur(12px);
  display: none; padding: 60px 40px 20px; overflow-y: auto;
}
.ut-kbd-overlay.is-open { display: block; }
.ut-kbd-modal { max-width: 980px; margin: 0 auto; background: #ffffff; border: 1px solid #94a3b8; border-radius: var(--pos-radius-lg); padding: 26px; box-shadow: var(--pos-shadow-lg); }
.ut-kbd-modal h2 { margin: 0 0 4px; font-size: 22px; color: #0f172a; }
.ut-kbd-modal p.lead { color: #475569; font-size: 12.5px; margin: 0 0 18px; }
.ut-kbd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .ut-kbd-grid { grid-template-columns: 1fr; } }
.ut-kbd-group { background: #f8fafc; border: 1px solid #94a3b8; border-radius: var(--pos-radius-md); padding: 14px; }
.ut-kbd-group h4 { margin: 0 0 10px; font-size: 11px; color: #4f46e5; letter-spacing: 1.6px; text-transform: uppercase; }
.ut-kbd-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: 12px; color: #0f172a; }
.ut-kbd-keys { display: flex; gap: 4px; }
.ut-kbd-key {
  display: inline-block; padding: 3px 9px; min-width: 22px; text-align: center;
  background: #cbd5e1; border: 1px solid #94a3b8;
  border-bottom-width: 3px; border-radius: 6px;
  font-family: 'Fira Code', monospace; font-size: 11px; font-weight: 700; color: #0f172a;
  box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
.ut-kbd-close { position: absolute; top: 14px; right: 18px; background: transparent; border: none; color: #475569; font-size: 22px; cursor: pointer; }
/* === Feature 14: CONTEXT MENU === */
.ut-ctx-menu {
  position: fixed; z-index: 999999;
  background: #ffffff; border: 1px solid #94a3b8;
  border-radius: var(--pos-radius-md); box-shadow: var(--pos-shadow-lg);
  padding: 4px; min-width: 220px; display: none;
  font-size: 12px;
}
.ut-ctx-menu.is-open { display: block; animation: utCtxOpen 0.12s ease; }
@keyframes utCtxOpen { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.ut-ctx-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--pos-radius-sm);
  color: #0f172a; cursor: pointer;
}
.ut-ctx-item:hover { background: #4f46e5; color: #fff; }
.ut-ctx-item:hover .ut-ctx-shortcut { color: rgba(255,255,255,0.7); }
.ut-ctx-item i { width: 14px; }
.ut-ctx-shortcut { margin-left: auto; color: #475569; font-size: 10.5px; font-family: 'Fira Code', monospace; }
.ut-ctx-divider { height: 1px; background: #94a3b8; margin: 4px 8px; }
/* === Feature 15: ONBOARDING === */
.ut-tour-spotlight {
  position: fixed; inset: 0; z-index: 999988;
  background: rgba(4,8,20,0.7); backdrop-filter: blur(2px);
  display: none;
}
.ut-tour-spotlight.is-open { display: block; }
.ut-tour-cutout {
  position: absolute; border-radius: var(--pos-radius-md);
  box-shadow: 0 0 0 9999px rgba(4,8,20,0.7), 0 0 0 3px #4f46e5;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
}
.ut-tour-tip {
  position: absolute; max-width: 320px;
  background: #ffffff; border: 1px solid #4f46e5;
  border-radius: var(--pos-radius-lg); padding: 16px 18px;
  box-shadow: var(--pos-shadow-lg); z-index: 999989;
  animation: utTipIn 0.25s ease;
}
@keyframes utTipIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ut-tour-tip h4 { margin: 0 0 6px; font-size: 14px; color: #0f172a; }
.ut-tour-tip p  { margin: 0 0 10px; font-size: 12.5px; color: #475569; line-height: 1.5; }
.ut-tour-dots { display: flex; gap: 4px; margin: 10px 0; }
.ut-tour-dots span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.ut-tour-dots span.is-active { background: #4f46e5; width: 18px; border-radius: 50px; }
.ut-tour-actions { display: flex; gap: 6px; }
.ut-tour-actions .btn { flex: 1; font-size: 11.5px; padding: 6px 10px; }
/* === V3: FAB with Recent Activity === */
.ut-fab-wrap { position: fixed; bottom: 24px; right: 24px; z-index: 99997; pointer-events: none; }
.ut-fab-main {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: #fff; border: none; cursor: pointer;
  box-shadow: 0 16px 38px rgba(99,102,241,0.35);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; transition: all 0.2s; pointer-events: auto;
}
.ut-fab-main:hover { transform: scale(1.06) rotate(15deg); }
.ut-fab-panel {
  position: absolute; bottom: 64px; right: 0; width: 300px;
  background: #ffffff; border: 1px solid #94a3b8; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4); padding: 14px 0;
  opacity: 0; transform: scale(0.92) translateY(8px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease; max-height: 70vh; overflow-y: auto;
}
.ut-fab-wrap.is-open { pointer-events: auto; }
.ut-fab-wrap.is-open .ut-fab-panel { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }
.ut-fab-header { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #475569; letter-spacing: 0.6px; }
.ut-fab-close { background: none; border: none; color: #475569; font-size: 16px; cursor: pointer; padding: 0; width: 24px; height: 24px; }
.ut-fab-section { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; }
.ut-fab-action { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #0f172a; text-decoration: none; font-size: 12.5px; transition: background 0.15s; }
.ut-fab-action:hover { background: #94a3b8; }
.ut-fab-action span { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; }
.ut-fab-divider { height: 1px; background: #94a3b8; margin: 10px 14px; }
.ut-fab-activity { padding: 0 12px; }
.ut-fab-act-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; color: #0f172a; text-decoration: none; font-size: 12px; transition: background 0.15s; }
.ut-fab-act-row:hover { background: #94a3b8; }
.ut-fab-act-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex-shrink: 0; }
.ut-fab-act-info { flex: 1; }
.ut-fab-act-info div { font-size: 12px; }
.ut-fab-act-info small { color: #475569; font-size: 10.5px; }
.ut-fab-empty { padding: 10px; text-align: center; color: #475569; font-size: 11.5px; }
/* == buildFabInline id-based overrides (always wins) == */
#ut-fab {
  position: fixed !important; bottom: 24px !important; right: 24px !important;
  z-index: 99999 !important; pointer-events: auto !important;
}
#ut-fab-main {
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  background: linear-gradient(135deg,#4f46e5,#6366f1) !important;
  color: #fff !important; border: none !important; cursor: pointer !important;
  box-shadow: 0 16px 38px rgba(99,102,241,0.35) !important;
  display: inline-flex !important; align-items: center !important;
  justify-content: center !important; font-size: 22px !important;
  transition: transform 0.2s !important; position: relative !important; z-index: 99999 !important;
}
#ut-fab-main:hover { transform: scale(1.08) rotate(12deg) !important; }
#ut-fab-panel {
  position: absolute !important; bottom: 64px !important; right: 0 !important;
  width: 300px !important; background: #ffffff !important;
  border: 1px solid #94a3b8 !important; border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important;
  padding: 14px 0 !important; max-height: 70vh !important;
  overflow-y: auto !important; z-index: 99999 !important;
}
@media (max-width: 480px) {
  #ut-fab { bottom: 16px !important; right: 16px !important; }
  #ut-fab-panel {
    width: calc(100vw - 32px) !important; right: -8px !important;
    bottom: 72px !important;
  }
  #ut-fab-tools { grid-template-columns: repeat(3,1fr) !important; }
}
.ut-fab-loading { padding: 10px; text-align: center; color: #475569; font-size: 11.5px; }
/* === V3: Smart Sidebar Groups — Image 4 flat-label style === */
#ut-grouped-menu { padding: 0 0 12px; }
.ut-group-section { margin: 0; }
/* Group label — flat uppercase section divider like MAIN, INVENTORY, FINANCE */
.ut-group-label {
  padding: 18px 16px 6px !important; margin: 0 !important;
  font-size: 11px !important; font-weight: 800 !important;
  text-transform: uppercase !important; letter-spacing: 1.5px !important;
  color: #4f46e5 !important; user-select: none !important;
  line-height: 1 !important;
}
.ut-group-section:first-child .ut-group-label { padding-top: 8px !important; }
/* Hide group labels when sidebar is collapsed/mini so text isn't clipped */
body.sidebar-collapse .ut-group-label,
body.sidebar-mini .ut-group-label,
body.ut-v3-collapsed .ut-group-label { display: none !important; }
/* Items inside group inherit their original sidebar styling */
.ut-group-items > a, .ut-group-items > div { margin: 1px 6px !important; }
/* Hide any ungrouped items that appear after the grouped menu */
#ut-grouped-menu ~ a, #ut-grouped-menu ~ div:not(#sidebar-advertisement-container) { display: none !important; }
/* Light mode overrides */
html:not(.dark) .ut-group-label { color: #4f46e5 !important; }
/* Dark mode overrides */
html.dark .ut-group-label, .dark .ut-group-label { color: #475569 !important; }
/* === V3: AI Smart Search Overlay === */
.ut-smart-overlay { position: fixed; inset: 0; z-index: 999990; background: rgba(4,8,20,0.75); backdrop-filter: blur(4px); display: none; align-items: flex-start; justify-content: center; padding-top: 8vh; }
.ut-smart-overlay.is-open { display: flex; }
.ut-smart-modal { width: 640px; max-width: 92vw; background: #ffffff; border: 1px solid #94a3b8; border-radius: 18px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); padding: 24px 28px; max-height: 80vh; overflow-y: auto; }
.ut-smart-header { text-align: center; margin-bottom: 18px; }
.ut-smart-header h2 { margin: 6px 0 4px; font-size: 20px; color: #0f172a; }
.ut-smart-header p { margin: 0; font-size: 12.5px; color: #475569; }
.ut-smart-input-wrap { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid #94a3b8; border-radius: 12px; margin-bottom: 14px; }
.ut-smart-input-wrap input { flex: 1; background: transparent; border: none; color: #0f172a; font-size: 15px; outline: none; }
.ut-smart-input-wrap input::placeholder { color: #475569; opacity: 0.7; }
.ut-smart-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ut-smart-hints button { background: #94a3b8; border: none; color: #0f172a; font-size: 11.5px; padding: 5px 10px; border-radius: 6px; cursor: pointer; transition: background 0.15s; }
.ut-smart-hints button:hover { background: #4f46e5; color: #fff; }
.ut-smart-loading { text-align: center; padding: 20px; color: #475569; }
.ut-smart-intent { font-size: 12.5px; color: #475569; padding: 6px 0 10px; border-bottom: 1px solid #94a3b8; margin-bottom: 10px; }
.ut-smart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.ut-smart-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border-radius: 10px; background: #94a3b8; color: #0f172a; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s; }
.ut-smart-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); background: rgba(99,102,241,0.08); }
.ut-smart-card-icon { width: 36px; height: 36px; border-radius: 10px; background: #4f46e5; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; }
.ut-smart-card-label { font-size: 12px; text-align: center; }
.ut-smart-related-label { font-size: 11px; text-transform: uppercase; color: #475569; margin: 14px 0 6px; letter-spacing: 0.5px; }
.ut-smart-related { display: flex; flex-wrap: wrap; gap: 6px; }
.ut-smart-chip { font-size: 11px; background: #94a3b8; color: #475569; padding: 3px 8px; border-radius: 4px; }
.ut-smart-error { text-align: center; padding: 20px; color: #ef4444; font-size: 12.5px; }
.ut-smart-empty { text-align: center; padding: 20px; color: #475569; font-size: 12.5px; }
/* === V3: Modern Card Theme (Light/Dark adaptive) === */
.ut-modern-card { background: #ffffff; border: 1px solid #94a3b8; border-radius: 14px; padding: 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.2s, box-shadow 0.2s; }
.ut-modern-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.ut-modern-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ut-modern-header h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; }
.ut-modern-metric { font-size: 24px; font-weight: 800; color: #0f172a; }
.ut-modern-metric small { font-size: 12px; color: #475569; font-weight: 500; }
.ut-modern-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.ut-modern-trend.up { background: rgba(40,167,69,0.12); color: #28a745; }
.ut-modern-trend.down { background: rgba(220,53,69,0.12); color: #dc3545; }
.ut-modern-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 3px 8px; border-radius: 4px; background: #94a3b8; color: #475569; }
.ut-modern-progress { height: 6px; border-radius: 3px; background: #94a3b8; overflow: hidden; }
.ut-modern-progress > div { height: 100%; border-radius: 3px; background: #4f46e5; transition: width 0.6s ease; }
.ut-modern-avatar { width: 36px; height: 36px; border-radius: 10px; background: #4f46e5; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.ut-modern-list { list-style: none; padding: 0; margin: 0; }
.ut-modern-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #94a3b8; }
.ut-modern-list li:last-child { border-bottom: none; }
.ut-modern-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 600; background: #94a3b8; color: #0f172a; }
.ut-modern-pill i { font-size: 10px; }
/* === Transform AdminLTE boxes into modern cards === */
.box, .card, .panel { border-radius: 14px !important; border: 1px solid #94a3b8 !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }
.box-header, .card-header, .panel-heading { border-bottom: 1px solid #94a3b8 !important; background: transparent !important; padding: 14px 18px !important; border-radius: 14px 14px 0 0 !important; }
.box-header h3, .card-header h3, .panel-title { font-size: 14px !important; font-weight: 700 !important; color: #0f172a !important; }
.box-body, .card-body, .panel-body { padding: 18px !important; }
.table { border-radius: 10px; overflow: hidden; }
.table thead th { background: #cbd5e1 !important; color: #0f172a !important; font-size: 11.5px !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-weight: 700 !important; padding: 10px 14px !important; border: none !important; }
.table tbody td { padding: 10px 14px !important; border-bottom: 1px solid #94a3b8 !important; color: #0f172a !important; }
.table tbody tr:hover td { background: rgba(99,102,241,0.04) !important; }
/* Sidebar group labels — flat uppercase section headers */
.ut-group-label { font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; color: #4f46e5 !important; text-transform: uppercase !important; padding: 18px 16px 6px !important; }
/* Content wrapper modern padding */
.content-wrapper { background: #e2e8f0 !important; }
.content { padding: 18px !important; }
.content-header { padding: 18px !important; background: transparent !important; border-bottom: 1px solid #94a3b8 !important; }
.content-header h1 { font-size: 20px !important; font-weight: 800 !important; color: #0f172a !important; }
/* Buttons modern */
.btn { border-radius: 8px !important; font-weight: 600 !important; font-size: 12.5px !important; transition: all 0.15s ease !important; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.2); }
/* Form inputs modern */
.form-control { border-radius: 10px !important; border: 1px solid #94a3b8 !important; background: #ffffff !important; color: #0f172a !important; padding: 8px 12px !important; }
.form-control:focus { border-color: #4f46e5 !important; box-shadow: 0 0 0 3px rgba(99,102,241,0.12) !important; }
/* === PERMANENTLY hide old dashboard elements when modern dashboard is active === */
#ut-modern-dash [data-ut-killed="1"],
#ut-modern-dash .alert,
#ut-modern-dash .alert-info,
#ut-modern-dash .callout,
#ut-modern-dash .callout-info,
#ut-modern-dash .attention-banner,
#ut-modern-dash .fun-fact,
#ut-modern-dash .did-you-know,
body.ut-dashboard-active .alert,
body.ut-dashboard-active .callout,
body.ut-dashboard-active .callout-info,
body.ut-dashboard-active .attention-banner {
  display: none !important;
}
/* Also hide rows that were JS-killed */
.ut-killed { display: none !important; }
/* === V3: Modern Dashboard === */
.ut-welcome-header { margin-bottom: 20px; }
.ut-welcome-header h1 { font-size: 22px !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 4px !important; }
.ut-welcome-header p { color: #475569 !important; font-size: 13px !important; margin: 0 !important; }
.ut-ai-insight-banner { background: rgba(99,102,241,0.08); border: 1px solid rgba(99,102,241,0.2); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; }
.ut-ai-insight-inner { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #0f172a; }
.ut-ai-insight-inner i { color: #4f46e5; font-size: 14px; }
.ut-ai-insight-inner strong { font-weight: 700; }
.ut-ai-insight-inner span { opacity: 0.85; }
.ut-dash-card { border-radius: 14px !important; border: 1px solid #94a3b8 !important; background: #ffffff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; transition: transform 0.2s, box-shadow 0.2s !important; padding: 18px !important; }
.ut-dash-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important; }
.ut-recent-panel { background: #ffffff; border: 1px solid #94a3b8; border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ut-recent-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #94a3b8; }
.ut-recent-header h3 { font-size: 14px; font-weight: 700; color: #0f172a; margin: 0; }
.ut-recent-header a { font-size: 12px; color: #4f46e5; text-decoration: none; font-weight: 600; }
.ut-recent-body { padding: 10px 14px; }
.ut-act-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #94a3b8; }
.ut-act-row:last-child { border-bottom: none; }
.ut-act-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; flex-shrink: 0; }
.ut-act-info { flex: 1; }
.ut-act-info div { font-size: 13px; color: #0f172a; font-weight: 500; }
.ut-act-info small { font-size: 11px; color: #475569; }
.ut-act-link { color: #475569; font-size: 12px; padding: 4px; }
.ut-act-link:hover { color: #4f46e5; }
.ut-quick-action { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 8px; transition: transform 0.15s, box-shadow 0.15s; }
.ut-quick-action:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); color: #fff; text-decoration: none; }
.ut-quick-action i { font-size: 16px; width: 20px; text-align: center; }
.ut-loading, .ut-empty { text-align: center; padding: 20px; color: #475569; font-size: 13px; }
/* === Dashboard Image 3 Styles === */
.ut-dash-top-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.ut-dash-top-header h2 { font-size: 20px; font-weight: 800; color: #0f172a; margin: 0; }
.ut-dash-top-header p { font-size: 13px; color: #475569; margin: 4px 0 0; }
.ut-new-sale-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 10px; background: #4f46e5; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; transition: all 0.2s; box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.ut-new-sale-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99,102,241,0.4); color: #fff; text-decoration: none; }
.ut-metric-trend { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.ut-metric-trend.up { color: #28a745; }
.ut-metric-trend.down { color: #dc3545; }
.ut-metric-trend span { color: #475569; font-weight: 500; font-size: 11px; }
/* Blue AI banner like image 3 */
.ut-ai-insight-banner { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(99,102,241,0.08)) !important; border: 1px solid rgba(59,130,246,0.25) !important; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; }
.ut-ai-insight-inner { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #0f172a; }
.ut-ai-insight-inner i { color: #3b82f6; font-size: 14px; }
.ut-ai-insight-inner strong { font-weight: 700; color: #3b82f6; }
.ut-ai-insight-inner span { opacity: 0.9; }
/* Sales Overview Chart */
.ut-chart-placeholder { padding: 10px 0; }
.ut-chart-bars { display: flex; align-items: flex-end; gap: 3px; height: 100px; margin-bottom: 8px; }
.ut-chart-bars .ut-bar { flex: 1; background: linear-gradient(to top, #4f46e5, rgba(99,102,241,0.3)); border-radius: 3px 3px 0 0; min-height: 4px; transition: opacity 0.2s; }
.ut-chart-bars .ut-bar:hover { opacity: 0.8; }
.ut-chart-days { display: flex; justify-content: space-between; font-size: 10px; color: #475569; }
.ut-month-badge { font-size: 11px; font-weight: 600; color: #4f46e5; background: rgba(99,102,241,0.1); padding: 3px 10px; border-radius: 6px; }
/* Orders Table */
.ut-orders-table { width: 100%; border-collapse: collapse; }
.ut-orders-table thead th { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #475569; padding: 8px 6px; border-bottom: 1px solid #94a3b8; text-align: left; }
.ut-orders-table tbody td { padding: 10px 6px; font-size: 13px; color: #0f172a; border-bottom: 1px solid #94a3b8; }
.ut-orders-table tbody tr:last-child td { border-bottom: none; }
.ut-order-id { color: #4f46e5; font-weight: 700; }
.ut-status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 50px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ut-status-badge.completed { background: rgba(40,167,69,0.12); color: #28a745; }
.ut-status-badge.processing { background: rgba(59,130,246,0.12); color: #3b82f6; }
.ut-status-badge.pending { background: rgba(253,126,20,0.12); color: #fd7e14; }
/* POS Buttons */
.ut-pos-btn { border-radius: 10px !important; font-weight: 700 !important; font-size: 13px !important; padding: 10px 18px !important; transition: all 0.15s ease !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; }
.ut-pos-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15) !important; }
.ut-pos-btn-primary { background: linear-gradient(135deg, #4f46e5, #8b5cf6) !important; border: none !important; color: #fff !important; }
.ut-pos-btn-success { background: linear-gradient(135deg, #28a745, #20c997) !important; border: none !important; color: #fff !important; }
.ut-pos-btn-warning { background: linear-gradient(135deg, #fd7e14, #ffc107) !important; border: none !important; color: #fff !important; }
.ut-pos-btn-danger { background: linear-gradient(135deg, #dc3545, #ef4444) !important; border: none !important; color: #fff !important; }
/* Light mode override */
html:not(.dark) .ut-modern-card, html:not(.dark) .box, html:not(.dark) .card, html:not(.dark) .panel, html:not(.dark) .tw-border-white\/60, html:not(.dark) [class*="tw-border-white"] { background: #fff !important; border-color: #cbd5e1 !important; border-width: 1.5px !important; }
html:not(.dark) .box-header, html:not(.dark) .card-header { border-color: #cbd5e1 !important; }
html:not(.dark) .box-header h3, html:not(.dark) .card-header h3 { color: #1e293b !important; }
html:not(.dark) .table thead th { background: #f8fafc !important; color: #1e293b !important; }
html:not(.dark) .table tbody td { color: #1e293b !important; border-color: #cbd5e1 !important; }
html:not(.dark) .content-wrapper, html:not(.dark) #scrollable-container, html:not(.dark) .content, html:not(.dark) main, html:not(.dark) main.tw-flex { background: #f4f6f9 !important; }
html:not(.dark) .content-header h1 { color: #1e293b !important; }
html:not(.dark) .form-control, html:not(.dark) .select2-selection, html:not(.dark) select, html:not(.dark) input, html:not(.dark) textarea { background: #fff !important; border-color: #cbd5e1 !important; color: #1e293b !important; }
html:not(.dark) .ut-modern-header h3 { color: #1a1a2e; }
html:not(.dark) .ut-welcome-header h1 { color: #1a1a2e !important; }
html:not(.dark) .ut-welcome-header p { color: #64748b !important; }
html:not(.dark) .ut-ai-insight-banner { background: rgba(99,102,241,0.06); border-color: rgba(99,102,241,0.15); }
html:not(.dark) .ut-ai-insight-inner { color: #334155; }
html:not(.dark) .ut-dash-card { background: #fff !important; border-color: #e8eaf0 !important; }
html:not(.dark) .ut-recent-panel { background: #fff; border-color: #e8eaf0; }
html:not(.dark) .ut-recent-header h3 { color: #1a1a2e; }
html:not(.dark) .ut-act-info div { color: #334155; }
html:not(.dark) .ut-act-info small { color: #94a3b8; }
html:not(.dark) .ut-act-row { border-color: #e8eaf0; }
html:not(.dark) .ut-modern-metric { color: #1a1a2e; }
html:not(.dark) .ut-modern-list li { border-color: #e8eaf0; }
html:not(.dark) .ut-smart-modal { background: #fff; border-color: #e8eaf0; }
html:not(.dark) .ut-smart-header h2 { color: #1a1a2e; }
html:not(.dark) .ut-smart-input-wrap input { color: #1a1a2e; }
html:not(.dark) .ut-fab-panel { background: #fff; border-color: #e8eaf0; }
html:not(.dark) .ut-fab-action { color: #1a1a2e; }
html:not(.dark) .ut-fab-act-row { color: #1a1a2e; }
html:not(.dark) .main-header { background: #fff !important; border-color: #e8eaf0 !important; }
html:not(.dark) .main-header .navbar-nav > li > a { color: #64748b !important; }
html:not(.dark) .main-header .navbar-nav > li > a:hover { background: #f1f5f9 !important; color: #6366f1 !important; }
html:not(.dark) .main-header .navbar-nav > li > a .ut-search-bar,
html:not(.dark) .ut-search-bar { background: #f8f9fc !important; border-color: #e8eaf0 !important; color: #94a3b8 !important; }
html:not(.dark) .main-header .navbar-nav > li > a .ut-search-bar:hover,
html:not(.dark) .ut-search-bar:hover { border-color: #6366f1 !important; color: #334155 !important; background: #f8f9fc !important; }
html:not(.dark) .ut-icon-btn { background: #f8f9fc !important; border-color: #e8eaf0 !important; color: #64748b !important; }
html:not(.dark) .ut-icon-btn:hover { background: #6366f1 !important; color: #fff !important; border-color: #6366f1 !important; }
html:not(.dark) .ut-dash-top-header h2 { color: #1a1a2e; }
html:not(.dark) .ut-dash-top-header p { color: #64748b; }
html:not(.dark) .ut-ai-insight-banner { background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(99,102,241,0.04)) !important; border-color: rgba(59,130,246,0.18) !important; }
html:not(.dark) .ut-ai-insight-inner { color: #334155; }
html:not(.dark) .ut-ai-insight-inner strong { color: #3b82f6; }
html:not(.dark) .ut-metric-trend span { color: #94a3b8; }
html:not(.dark) .ut-orders-table thead th { color: #94a3b8; border-color: #e8eaf0; }
html:not(.dark) .ut-orders-table tbody td { color: #334155; border-color: #e8eaf0; }
html:not(.dark) .ut-status-badge.completed { background: rgba(40,167,69,0.1); }
html:not(.dark) .ut-status-badge.processing { background: rgba(59,130,246,0.1); }
html:not(.dark) .ut-status-badge.pending { background: rgba(253,126,20,0.1); }
html:not(.dark) .ut-month-badge { background: rgba(99,102,241,0.08); }
html:not(.dark) .ut-chart-days { color: #94a3b8; }
/* === V3: Top Nav Bar — matches image 2 === */
.ut-logo-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff; font-size: 16px; font-weight: 700; }
.ut-user-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
/* Main header clean look */
.main-header { background: #ffffff !important; border-bottom: 1px solid #94a3b8 !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important; }
.main-header .logo, .main-header .navbar-brand { display: flex !important; align-items: center !important; gap: 10px !important; }
.main-header .logo a, .main-header .navbar-brand a { font-size: 18px !important; font-weight: 800 !important; color: #0f172a !important; text-decoration: none !important; display: flex !important; align-items: center !important; gap: 10px !important; }
/* Search bar prominent */
#ut-search-pill-li a { display: flex !important; align-items: center !important; padding: 8px 14px !important; background: rgba(255,255,255,0.05) !important; border-radius: 10px !important; width: 320px !important; border: 1px solid #94a3b8 !important; }
.ut-search-bar { display: flex; align-items: center; gap: 8px; color: #475569; font-size: 13px; width: 100%; }
.ut-search-bar kbd { background: #94a3b8; border: none; border-radius: 4px; padding: 2px 6px; font-size: 10px; color: #475569; }
.ut-search-bar .ut-ai-badge { background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; margin-left: auto; }
/* User dropdown styling */
.main-header .dropdown.user-menu .dropdown-toggle { display: flex !important; align-items: center !important; gap: 10px !important; padding: 6px 12px !important; }
.main-header .dropdown.user-menu .dropdown-toggle .hidden-xs { color: #0f172a !important; font-size: 13px !important; font-weight: 600 !important; }
/* Status dot */
.ut-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
/* Light mode overrides */
html:not(.dark) .main-header { background: #fff !important; border-color: #e8eaf0 !important; }
html:not(.dark) .main-header .logo a, html:not(.dark) .main-header .navbar-brand a { color: #1a1a2e !important; }
html:not(.dark) #ut-search-pill-li a { background: #f8f9fc !important; border-color: #e8eaf0 !important; }
html:not(.dark) .ut-search-bar { color: #94a3b8 !important; }
html:not(.dark) .main-header .dropdown.user-menu .dropdown-toggle .hidden-xs { color: #334155 !important; }
html:not(.dark) .main-header .navbar-nav > li > a { color: #64748b !important; }
html:not(.dark) .main-header .navbar-nav > li > a:hover { background: #f1f5f9 !important; color: #4f46e5 !important; }