/* ============================================================
   CBIZ MODERN THEME — Enterprise Design System
   Primary Green:  #8dc63f  |  Primary Blue:  #194f97
   Accent Lime:    #d7df23  |  Accent Sky:    #27aae1
   Font: Inter (loaded via Google Fonts in css.blade.php)
   ============================================================ */

/* ── 1. Custom Properties ─────────────────────────────────── */
:root {
  --c-green:        #8dc63f;
  --c-green-dark:   #6fa82f;
  --c-green-light:  #eef7e1;
  --c-blue:         #194f97;
  --c-blue-dark:    #133c78;
  --c-blue-light:   #e8eef8;
  --c-lime:         #d7df23;
  --c-sky:          #27aae1;
  --c-sky-light:    #e8f6fd;

  --text-base:      #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-inverse:   #ffffff;

  --border:         #dbe0e6;
  --border-strong:  #c8d0db;

  --bg-body:        #FAFBFE;
  --bg-surface:     #ffffff;
  --bg-surface-2:   #f8fafc;
  --bg-surface-3:   #f1f5f9;

  --sidebar-bg:     #ffffff;
  --sidebar-text:   #67748E;
  --sidebar-active: var(--c-blue);
  --sidebar-hover:  rgba(141,198,63,.07);
  --sidebar-active-bg: rgba(141,198,63,.09);
  --sidebar-width:  260px;

  --header-bg:      #194f97;
  --header-height:  66px;

  --radius-xs:      3px;
  --radius-sm:      5px;
  --radius:         8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-full:    9999px;

  --shadow-xs:      0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow:         0 4px 6px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.04);
  --shadow-md:      0 10px 15px rgba(0,0,0,.07), 0 4px 6px rgba(0,0,0,.05);
  --shadow-lg:      0 20px 25px rgba(0,0,0,.08), 0 10px 10px rgba(0,0,0,.04);

  --transition:     150ms ease;
  --transition-md:  250ms ease;
}

/* ── 2. Base Reset & Typography ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 14px; scroll-behavior: smooth; }

body,
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--bg-body) !important;
  color: var(--text-base) !important;
  font-size: 13.5px;
  line-height: 1.6;
}

/* overflow-x:hidden + overflow-y:visible is spec-invalid (browser collapses both
   to hidden). Use overflow:visible so the fixed header/sidebar never clip content. */
.wrapper {
  overflow: visible !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--text-base) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}

a { color: var(--c-sky); transition: color var(--transition); }
a:hover { color: var(--c-blue); text-decoration: none; }

/* ── 3. Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
::-webkit-scrollbar-track { background: var(--bg-surface-3) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb { background: var(--border-strong) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted) !important; }

/* ── 4. Header / Navbar ───────────────────────────────────── */
.main-header {
  background-color: var(--header-bg) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 2px 8px rgba(25,79,151,.20) !important;
  border-bottom: none !important;
  height: var(--header-height) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1030 !important;
}

.main-header .logo {
  background-color: var(--c-blue-dark) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: -0.02em !important;
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
  padding: 0 18px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  width: var(--sidebar-width) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

.main-header .logo:hover { background-color: var(--c-blue-dark) !important; }
.main-header .logo .logo-mini { display: none !important; }
.main-header .logo .logo-lg { color: #fff !important; white-space: nowrap; overflow: hidden; }

.main-header .navbar {
  background-color: var(--header-bg) !important;
  border: none !important;
  margin: 0 !important;
  min-height: var(--header-height) !important;
}

.main-header .navbar .sidebar-toggle {
  color: rgba(255,255,255,.8) !important;
  height: var(--header-height) !important;
  line-height: var(--header-height) !important;
  padding: 0 16px !important;
  font-size: 20px !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
  transition: background var(--transition), color var(--transition) !important;
  display: flex !important;
  align-items: center !important;
  float: left !important;
}
.main-header .navbar .sidebar-toggle:hover {
  background-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

/* Left-side nav elements: subscription info icon, inline logo (Superadmin module) */
.main-header .navbar > i.pull-left,
.main-header .navbar > i.fas,
.main-header .navbar > i.fa {
  float: left !important;
  line-height: var(--header-height) !important;
  padding: 0 10px !important;
  color: rgba(255,255,255,.80) !important;
  cursor: pointer !important;
  font-size: 16px !important;
}
.main-header .navbar > a > img {
  vertical-align: middle !important;
  margin-top: 0 !important;
}
.main-header .navbar > a[href] {
  float: left !important;
  display: flex !important;
  align-items: center !important;
  height: var(--header-height) !important;
  padding: 0 !important;
}

/* Header action buttons — white-on-blue */
.main-header .navbar .btn-success.btn-flat,
.main-header .navbar .btn-success,
.main-header .navbar .btn-danger {
  background-color: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 5px 11px !important;
  margin-top: 17px !important;
  height: 32px !important;
  line-height: 1 !important;
  transition: background var(--transition), border-color var(--transition) !important;
}

.main-header .navbar .btn-success.btn-flat:hover,
.main-header .navbar .btn-success:hover {
  background-color: rgba(255,255,255,.22) !important;
  border-color: rgba(255,255,255,.30) !important;
  color: #fff !important;
}

.main-header .navbar .btn-danger {
  background-color: rgba(220,38,38,.70) !important;
  border-color: rgba(220,38,38,.50) !important;
  color: #fff !important;
}

.main-header .navbar .btn-danger:hover {
  background-color: rgba(220,38,38,.90) !important;
}

/* User avatar area */
.main-header .navbar .user-menu .user-image,
.main-header .navbar .dropdown-toggle img {
  border: 2px solid rgba(255,255,255,.30) !important;
  border-radius: 50% !important;
  transition: border-color var(--transition) !important;
}
.main-header .navbar .user-menu .user-image:hover,
.main-header .navbar .dropdown-toggle img:hover {
  border-color: rgba(255,255,255,.70) !important;
}

/* Navbar links (bell etc.) — white on dark blue */
.main-header .navbar .nav > li > a {
  color: rgba(255,255,255,.80) !important;
  height: var(--header-height) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 12px !important;
}
.main-header .navbar .nav > li > a:hover {
  background-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
}
.main-header .navbar .nav > li > a .fa,
.main-header .navbar .nav > li > a .fas,
.main-header .navbar .nav > li > a .far {
  font-size: 18px !important;
  color: rgba(255,255,255,.80) !important;
}

/* User dropdown menu */
.main-header .navbar .menu-box,
.main-header .navbar ul.dropdown-menu.menu-box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 12px 16px !important;
  min-width: 220px !important;
  top: 54px !important;
}

.main-header .navbar .menu-box .sub-menu-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: background var(--transition), color var(--transition) !important;
}

.main-header .navbar .menu-box .sub-menu-link:hover {
  background-color: var(--bg-surface-2) !important;
  color: var(--c-blue) !important;
}

.main-header .navbar .menu-box .sub-menu-link i {
  width: 16px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

.main-header .navbar .menu-box .sub-menu-list-item {
  margin-bottom: 2px !important;
}

/* Notifications dropdown */
.main-header .navbar .notifications-menu > .dropdown-menu {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  min-width: 320px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.main-header .navbar .notifications-menu .dropdown-menu li.header {
  background: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.main-header .navbar .notifications-menu .dropdown-menu li.footer a {
  background: var(--bg-surface-2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 16px !important;
  text-align: center !important;
  color: var(--c-sky) !important;
  font-weight: 500 !important;
}

/* Bell icon badge */
.main-header .navbar .label-warning.notifications_count {
  background-color: var(--c-green) !important;
  color: #fff !important;
  border-radius: var(--radius-full) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 5px !important;
}

/* ── 5. Sidebar ───────────────────────────────────────────── */
.main-sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  width: var(--sidebar-width) !important;
  top: var(--header-height) !important;
  padding-top: 0 !important;
  z-index: 820 !important;
  position: fixed !important;
  height: calc(100vh - var(--header-height)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Disable slimScroll container constraints so .main-sidebar native overflow-y
   scrolls the full menu height all the way to the last item. */
.main-sidebar .slimScrollDiv {
  height: auto !important;
  overflow: visible !important;
}

.main-sidebar .slimScrollBar,
.main-sidebar .slimScrollRail {
  display: none !important;
}

.main-sidebar .sidebar {
  height: auto !important;
  overflow: visible !important;
  padding-top: 8px !important;
  padding-bottom: 80px !important;
  background-color: transparent !important;
}

/* Business name in sidebar */
.main-sidebar .sidebar > a.logo {
  display: none !important;
}

/* Sidebar menu base reset */
.sidebar-menu,
.sidebar-menu > li,
.sidebar-menu > li > a,
.sidebar-menu > li > ul.treeview-menu {
  background-color: transparent !important;
  border: none !important;
}

.sidebar-menu { padding: 6px 12px !important; list-style: none !important; margin: 0 !important; }

.sidebar-menu > li { margin: 2px 0 !important; }

.sidebar-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: var(--radius) !important;
  color: var(--sidebar-text) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transition: background var(--transition), color var(--transition), border-color var(--transition) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  border-left: 3px solid transparent !important;
  margin-left: -3px !important;
}

.sidebar-menu > li > a:hover {
  background-color: var(--sidebar-hover) !important;
  color: var(--c-blue) !important;
  border-left-color: var(--c-green) !important;
}

.sidebar-menu > li > a:hover > i {
  color: var(--c-green) !important;
}

.sidebar-menu > li > a > i {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  color: var(--text-muted) !important;
  transition: color var(--transition) !important;
  border-radius: var(--radius-xs) !important;
}

.sidebar-menu > li > a > span {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.sidebar-menu > li > a > .fa-angle-left,
.sidebar-menu > li > a > .pull-right-container .fa-angle-left {
  margin-left: auto !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  transition: transform var(--transition) !important;
}

/* Active & open states */
.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--c-blue) !important;
  border-left-color: var(--c-green) !important;
}

.sidebar-menu > li.active > a > i,
.sidebar-menu > li.menu-open > a > i {
  color: var(--c-green) !important;
}

.sidebar-menu > li.menu-open > a > .fa-angle-left {
  transform: rotate(-90deg) !important;
}

/* Sidebar section headers */
.sidebar-menu > li.header {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: #C4CDDB !important;
  padding: 18px 15px 5px !important;
  margin-top: 6px !important;
  cursor: default !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.sidebar-menu > li.header::before {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  order: 1;
}

/* Treeview submenu */
.sidebar-menu .treeview-menu {
  background: transparent !important;
  padding: 2px 0 4px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.sidebar-menu .treeview-menu > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 12px 7px 42px !important;
  border-radius: var(--radius) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  transition: background var(--transition), color var(--transition) !important;
}

.sidebar-menu .treeview-menu > li > a:hover,
.sidebar-menu .treeview-menu > li.active > a {
  background-color: var(--sidebar-hover) !important;
  color: var(--c-blue) !important;
}

.sidebar-menu .treeview-menu > li.active > a {
  color: var(--c-green-dark) !important;
  font-weight: 500 !important;
}

.sidebar-menu .treeview-menu > li > a > i {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  width: 14px !important;
}


/* Sidebar collapse (mini mode) */
.sidebar-mini.sidebar-collapse .main-sidebar { width: 60px !important; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span { display: none !important; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right-container { display: none !important; }
.sidebar-mini.sidebar-collapse .sidebar-menu > li.header { display: none !important; }

/* ── 6. Content Wrapper ───────────────────────────────────── */
.content-wrapper {
  background-color: var(--bg-body) !important;
  margin-left: var(--sidebar-width) !important;
  margin-top: 0 !important;
  /* padding-top pushes content below fixed header + 16px breathing room */
  padding-top: calc(var(--header-height) + 16px) !important;
  min-height: 100vh !important;
  transition: margin var(--transition-md) !important;
}

.sidebar-mini.sidebar-collapse .content-wrapper { margin-left: 60px !important; }

/* Page header */
.content-header,
.content-header-custom {
  padding: 20px 24px 12px !important;
  background: transparent !important;
}

.content-header h1,
.content-header-custom h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text-base) !important;
  margin: 0 !important;
  letter-spacing: -0.02em !important;
}

.content-header .breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin: 4px 0 0 !important;
  font-size: 12.5px !important;
}

.content-header .breadcrumb > li + li::before { color: var(--text-muted) !important; }
.content-header .breadcrumb a { color: var(--c-sky) !important; }
.content-header .breadcrumb > .active { color: var(--text-muted) !important; }

/* Content section */
.content,
.content-custom {
  padding: 0 24px 24px !important;
}

/* ── 7. Boxes / Cards ─────────────────────────────────────── */
.box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border-top: none !important;
  margin-bottom: 20px !important;
}

.box.box-primary { border-top: 3px solid var(--c-blue) !important; }
.box.box-success { border-top: 3px solid var(--c-green) !important; }
.box.box-info    { border-top: 3px solid var(--c-sky) !important; }
.box.box-warning { border-top: 3px solid #f59e0b !important; }
.box.box-danger  { border-top: 3px solid #ef4444 !important; }
.box.box-solid.box-primary { border-top-color: var(--c-blue) !important; }

.box-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 18px !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.box-header.with-border { border-bottom: 1px solid var(--border) !important; }

.box-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-base) !important;
  letter-spacing: -0.01em !important;
}

.box-body {
  padding: 18px !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.box-footer {
  background: var(--bg-surface-2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 18px !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

/* ── 8. Info Boxes (Dashboard) ────────────────────────────── */
.info-box,
.dashboard-info-box {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  display: block !important;
  min-height: 70px !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  transition: box-shadow var(--transition), border-color var(--transition) !important;
}

.info-box:hover,
.dashboard-info-box:hover {
  box-shadow: var(--shadow) !important;
  border-color: var(--border-strong) !important;
}

.info-box-icon {
  background-color: var(--c-blue) !important;
  border-radius: var(--radius) !important;
  width: 48px !important;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 20px !important;
}

.info-box-content { padding: 0 0 0 8px !important; }
.info-box-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.info-box-number {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-base) !important;
  letter-spacing: -0.02em !important;
}

.dashboard-info-box .info-box-text {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.dashboard-info-box .info-box-number {
  font-size: 22px !important;
  color: var(--c-blue) !important;
}

/* Small boxes */
.small-box {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
}

.small-box h3 { font-size: 28px !important; font-weight: 700 !important; }
.small-box p { font-size: 13px !important; opacity: .9 !important; }
.small-box .icon { opacity: .15 !important; }
.small-box .small-box-footer {
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
}

/* ── 9. Buttons ───────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 14px !important;
  line-height: 1.4 !important;
  border-width: 1px !important;
  border-style: solid !important;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), color var(--transition) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  letter-spacing: -0.01em !important;
}

.btn:focus, .btn:active:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(25,79,151,.2) !important; }

/* Primary → Green */
.btn-primary {
  background-color: var(--c-green) !important;
  border-color: var(--c-green) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--c-green-dark) !important;
  border-color: var(--c-green-dark) !important;
  color: #fff !important;
}

/* Success → Blue */
.btn-success {
  background-color: var(--c-blue) !important;
  border-color: var(--c-blue) !important;
  color: #fff !important;
}
.btn-success:hover, .btn-success:focus {
  background-color: var(--c-blue-dark) !important;
  border-color: var(--c-blue-dark) !important;
  color: #fff !important;
}

/* Info → Sky */
.btn-info {
  background-color: var(--c-sky) !important;
  border-color: var(--c-sky) !important;
  color: #fff !important;
}
.btn-info:hover, .btn-info:focus {
  background-color: #1d8db8 !important;
  border-color: #1d8db8 !important;
  color: #fff !important;
}

/* Default → Neutral */
.btn-default {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
.btn-default:hover, .btn-default:focus {
  background-color: var(--bg-surface-2) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-base) !important;
}

/* Danger */
.btn-danger {
  background-color: #ef4444 !important;
  border-color: #ef4444 !important;
  color: #fff !important;
}
.btn-danger:hover, .btn-danger:focus {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* Warning */
.btn-warning {
  background-color: #f59e0b !important;
  border-color: #f59e0b !important;
  color: #fff !important;
}
.btn-warning:hover {
  background-color: #d97706 !important;
  border-color: #d97706 !important;
  color: #fff !important;
}

/* Flat modifier */
.btn-flat { box-shadow: none !important; border-radius: var(--radius-sm) !important; }

/* Sizes */
.btn-lg { padding: 10px 20px !important; font-size: 14px !important; border-radius: var(--radius) !important; }
.btn-sm { padding: 5px 10px !important; font-size: 12px !important; }
.btn-xs { padding: 3px 7px !important; font-size: 11px !important; }

/* Disabled */
.btn:disabled, .btn[disabled] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Button groups */
.btn-group .btn:not(:first-child) { border-left-color: rgba(0,0,0,.1) !important; }

/* DataTable export buttons */
.buttons-csv, .buttons-excel, .buttons-pdf, .buttons-print, .buttons-collection {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 10px !important;
}
.buttons-csv:hover, .buttons-excel:hover, .buttons-pdf:hover, .buttons-print:hover {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}

/* ── 10. Forms & Inputs ───────────────────────────────────── */
.form-control {
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--text-base) !important;
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 7px 12px !important;
  height: 36px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  transition: border-color var(--transition), box-shadow var(--transition) !important;
}

.form-control:focus {
  border-color: var(--c-sky) !important;
  box-shadow: 0 0 0 3px rgba(39,170,225,.15) !important;
  outline: none !important;
}

.form-control:hover { border-color: var(--border-strong) !important; }

textarea.form-control { height: auto !important; padding: 10px 12px !important; resize: vertical !important; }

select.form-control { cursor: pointer !important; }

.input-group-addon {
  background-color: var(--bg-surface-2) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  padding: 7px 12px !important;
  border-radius: var(--radius-sm) !important;
}

.form-group { margin-bottom: 16px !important; }

.form-group label {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin-bottom: 5px !important;
  display: block !important;
}

.has-error .form-control { border-color: #ef4444 !important; }
.has-error .help-block,
.has-error label { color: #ef4444 !important; }
.help-block { font-size: 12px !important; color: var(--text-muted) !important; margin-top: 4px !important; }

.has-success .form-control { border-color: var(--c-green) !important; }

/* Select2 overrides */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  background-color: var(--bg-surface) !important;
  min-height: 36px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px !important;
  padding-left: 12px !important;
  color: var(--text-base) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 34px !important;
  right: 6px !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--c-sky) !important;
  box-shadow: 0 0 0 3px rgba(39,170,225,.15) !important;
}
.select2-dropdown {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--c-blue) !important;
  color: #fff !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-xs) !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
}

/* iCheck */
.icheckbox_square-blue,
.iradio_square-blue {
  border-radius: 4px !important;
}

/* Date range picker */
.daterangepicker {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: 'Inter', sans-serif !important;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: var(--c-blue) !important;
  border-radius: var(--radius-sm) !important;
}
.daterangepicker td.in-range {
  background-color: var(--c-blue-light) !important;
}

/* ── 11. Tables ───────────────────────────────────────────── */
.table {
  width: 100% !important;
  background-color: var(--bg-surface) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  color: var(--text-base) !important;
}

.table > thead > tr > th {
  background-color: var(--bg-surface-2) !important;
  border-bottom: 2px solid var(--border) !important;
  border-top: none !important;
  padding: 10px 14px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: var(--text-muted) !important;
  white-space: nowrap !important;
}

.table > tbody > tr > td {
  padding: 11px 14px !important;
  border-top: 1px solid var(--border) !important;
  vertical-align: middle !important;
  color: var(--text-secondary) !important;
  line-height: 1.5 !important;
}

.table > tbody > tr:first-child > td { border-top: none !important; }

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bg-surface-2) !important;
}

.table-bordered {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden !important;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--border) !important;
}

.table-responsive {
  border: none !important;
  border-radius: var(--radius-lg) !important;
  overflow-x: auto !important;
}

/* DataTables */
.dataTables_wrapper {
  font-family: 'Inter', sans-serif !important;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 5px 10px !important;
  font-size: 13px !important;
  color: var(--text-base) !important;
  margin-left: 6px !important;
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 4px 8px !important;
  font-size: 13px !important;
  margin: 0 4px !important;
}
.dataTables_wrapper .dataTables_info { font-size: 12.5px !important; color: var(--text-muted) !important; }
.dataTables_wrapper .dataTables_paginate { margin-top: 8px !important; }

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background-color: var(--bg-surface-2) !important;
  cursor: pointer !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  opacity: .5 !important;
}

/* ── 12. Pagination ───────────────────────────────────────── */
.pagination > li > a,
.pagination > li > span {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
  padding: 5px 11px !important;
  margin: 0 2px !important;
  border-radius: var(--radius-sm) !important;
  transition: background var(--transition), color var(--transition) !important;
}
.pagination > li > a:hover {
  background-color: var(--bg-surface-2) !important;
  color: var(--c-blue) !important;
  border-color: var(--border-strong) !important;
}
.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
  background-color: var(--c-blue) !important;
  border-color: var(--c-blue) !important;
  color: #fff !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}

/* ── 13. Alerts ───────────────────────────────────────────── */
.alert {
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  border-left: 4px solid transparent !important;
}
.alert-success {
  background-color: #f0fdf4 !important;
  border-left-color: var(--c-green) !important;
  color: #166534 !important;
}
.alert-info {
  background-color: var(--c-sky-light) !important;
  border-left-color: var(--c-sky) !important;
  color: #075985 !important;
}
.alert-warning {
  background-color: #fffbeb !important;
  border-left-color: #f59e0b !important;
  color: #92400e !important;
}
.alert-danger {
  background-color: #fef2f2 !important;
  border-left-color: #ef4444 !important;
  color: #991b1b !important;
}
.alert .close { opacity: .5 !important; font-size: 16px !important; }
.alert .close:hover { opacity: 1 !important; }

/* ── 14. Labels / Badges ──────────────────────────────────── */
.label, .badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  border-radius: var(--radius-full) !important;
  padding: 3px 8px !important;
  letter-spacing: 0.01em !important;
}
.label-default, .badge-default {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-secondary) !important;
}
.label-primary, .badge-primary {
  background-color: var(--c-blue-light) !important;
  color: var(--c-blue) !important;
}
.label-success, .badge-success {
  background-color: var(--c-green-light) !important;
  color: var(--c-green-dark) !important;
}
.label-info, .badge-info {
  background-color: var(--c-sky-light) !important;
  color: #0c6ca8 !important;
}
.label-warning, .badge-warning {
  background-color: #fffbeb !important;
  color: #92400e !important;
}
.label-danger, .badge-danger {
  background-color: #fef2f2 !important;
  color: #991b1b !important;
}

/* ── 15. Modals ───────────────────────────────────────────── */
.modal-content {
  border: none !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
}
.modal-header {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 16px 20px !important;
}
.modal-header .modal-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--text-base) !important;
  letter-spacing: -0.02em !important;
}
.modal-header .close {
  color: var(--text-muted) !important;
  opacity: 1 !important;
  font-size: 20px !important;
  margin-top: -2px !important;
}
.modal-header .close:hover { color: var(--text-base) !important; }
.modal-body { padding: 20px !important; background: var(--bg-surface) !important; }
.modal-footer {
  background: var(--bg-surface-2) !important;
  border-top: 1px solid var(--border) !important;
  padding: 14px 20px !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}
.modal-backdrop.in { opacity: .35 !important; }

/* ── 16. Navigation Tabs ──────────────────────────────────── */
.nav-tabs-custom {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
}

.nav-tabs-custom > .nav-tabs {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-surface-2) !important;
  padding: 0 16px !important;
  margin: 0 !important;
}

.nav-tabs-custom > .nav-tabs > li > a {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 11px 16px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transition: color var(--transition), border-color var(--transition) !important;
}

.nav-tabs-custom > .nav-tabs > li > a:hover {
  color: var(--text-base) !important;
  background: transparent !important;
  border-bottom-color: var(--border-strong) !important;
}

.nav-tabs-custom > .nav-tabs > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover,
.nav-tabs-custom > .nav-tabs > li.active > a:focus {
  color: var(--c-blue) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--c-blue) !important;
  font-weight: 600 !important;
}

.nav-tabs-custom > .tab-content {
  padding: 18px !important;
}

/* ── 17. Footer ───────────────────────────────────────────── */
.main-footer {
  background-color: var(--bg-surface) !important;
  border-top: 1px solid var(--border) !important;
  padding: 12px 24px !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-left: var(--sidebar-width) !important;
}
.sidebar-mini.sidebar-collapse .main-footer { margin-left: 60px !important; }
.main-footer b { font-weight: 500 !important; color: var(--text-secondary) !important; }
.main-footer .btn-xs.toggle-font-size {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  padding: 3px 7px !important;
}
.main-footer .btn-xs.toggle-font-size:hover {
  background: var(--bg-surface-2) !important;
  color: var(--text-secondary) !important;
}

/* ── 18. Dropdown Menus ───────────────────────────────────── */
.dropdown-menu {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px !important;
  min-width: 180px !important;
  font-size: 13px !important;
}
.dropdown-menu > li > a {
  color: var(--text-secondary) !important;
  padding: 7px 12px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 400 !important;
  transition: background var(--transition), color var(--transition) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--bg-surface-2) !important;
  color: var(--text-base) !important;
}
.dropdown-menu > .active > a {
  background-color: var(--c-blue-light) !important;
  color: var(--c-blue) !important;
}
.dropdown-menu .divider {
  background-color: var(--border) !important;
  margin: 5px 0 !important;
}
.dropdown-menu .dropdown-header {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  padding: 6px 12px 4px !important;
}

/* ── 19. Popover ──────────────────────────────────────────── */
.popover {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
}
.popover-title {
  background: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  font-weight: 600 !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
}
.popover-content { padding: 14px !important; }

/* ── 20. Callout Boxes ────────────────────────────────────── */
.callout {
  border-radius: var(--radius) !important;
  border-left: 4px solid var(--border-strong) !important;
  background: var(--bg-surface) !important;
  padding: 14px 16px !important;
  margin-bottom: 16px !important;
  box-shadow: var(--shadow-xs) !important;
}
.callout.callout-success { border-left-color: var(--c-green) !important; }
.callout.callout-info    { border-left-color: var(--c-sky) !important; }
.callout.callout-warning { border-left-color: #f59e0b !important; }
.callout.callout-danger  { border-left-color: #ef4444 !important; }

/* ── 21. Status / Custom Badges ───────────────────────────── */
.btn-draft {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.quotation-button {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.recent-button, .suspend-button {
  background: var(--c-sky) !important;
  border-color: var(--c-sky) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.credit-button {
  background: #d97706 !important;
  border-color: #d97706 !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.card-pay {
  background: #ea580c !important;
  border-color: #ea580c !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.cash-button {
  background: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.pesapal-button {
  background: #3f5e8b !important;
  border-color: #3f5e8b !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.multipay-button {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}
.cancel-button {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
}

/* ── 22. Toastr / Notifications ───────────────────────────── */
#toast-container > div {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  padding: 14px 18px !important;
  opacity: 1 !important;
}
.toast-success { background-color: #166534 !important; }
.toast-error   { background-color: #991b1b !important; }
.toast-info    { background-color: #075985 !important; }
.toast-warning { background-color: #92400e !important; }

/* ── 23. Upload / Dropzone ────────────────────────────────── */
.dropzone {
  border: 2px dashed var(--border-strong) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--bg-surface-2) !important;
  padding: 30px !important;
  text-align: center !important;
  transition: border-color var(--transition), background var(--transition) !important;
}
.dropzone:hover {
  border-color: var(--c-sky) !important;
  background: var(--c-sky-light) !important;
}

/* ── 24. Progress Bars ────────────────────────────────────── */
.progress {
  background-color: var(--bg-surface-3) !important;
  border-radius: var(--radius-full) !important;
  height: 6px !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}
.progress-bar {
  background-color: var(--c-blue) !important;
  border-radius: var(--radius-full) !important;
}
.progress-bar-success { background-color: var(--c-green) !important; }
.progress-bar-info    { background-color: var(--c-sky) !important; }
.progress-bar-warning { background-color: #f59e0b !important; }
.progress-bar-danger  { background-color: #ef4444 !important; }

/* ── 25. Dashboard Cards ──────────────────────────────────── */
.dashboard-info-box .info-box-content { text-align: center !important; }

/* ── 26. Section headers ──────────────────────────────────── */
.section-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-base) !important;
  letter-spacing: -0.02em !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--border) !important;
  margin-bottom: 16px !important;
}

/* ── 27. Well / Panel ─────────────────────────────────────── */
.well {
  background-color: var(--bg-surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
  padding: 14px !important;
}

/* ── 28. Scroll-to-top ────────────────────────────────────── */
.scrolltop {
  background-color: var(--c-blue) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow) !important;
  width: 38px !important;
  height: 38px !important;
  bottom: 24px !important;
  right: 24px !important;
}
.scrolltop .scroll.icon { color: #fff !important; line-height: 38px !important; }

/* ── 29. Ladda loading buttons ────────────────────────────── */
.ladda-button[data-style=zoom-in] .ladda-spinner { margin-top: -6px !important; }

/* ── 30. Auth Layout (auth2.blade.php) ────────────────────── */
body.cbiz-auth {
  background: linear-gradient(135deg, var(--c-blue-dark) 0%, var(--c-blue) 50%, #1a6bb5 100%) !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cbiz-auth-card {
  background: var(--bg-surface) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 40px !important;
  margin: auto !important;
}

.cbiz-auth-logo {
  text-align: center !important;
  margin-bottom: 28px !important;
}

.cbiz-auth-logo img { max-width: 140px !important; }

.cbiz-auth-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-base) !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 4px !important;
}

.cbiz-auth-subtitle {
  font-size: 13.5px !important;
  color: var(--text-muted) !important;
  margin-bottom: 28px !important;
}

.cbiz-auth-card .form-control {
  height: 42px !important;
  font-size: 14px !important;
}

.cbiz-auth-card .btn-primary {
  width: 100% !important;
  height: 42px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: var(--radius) !important;
  letter-spacing: -0.01em !important;
}

.cbiz-auth-lang {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
}
.cbiz-auth-lang .form-control {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12.5px !important;
  height: 32px !important;
  padding: 4px 10px !important;
}
.cbiz-auth-lang .form-control option { color: var(--text-base) !important; }

/* ── 31. Responsive ───────────────────────────────────────── */
@media (max-width: 991px) {
  .main-header .logo { width: 60px !important; }
  .content-wrapper { margin-left: 0 !important; }
  .main-footer { margin-left: 0 !important; }
  .content, .content-custom { padding: 0 14px 16px !important; }
  .content-header, .content-header-custom { padding: 14px 14px 8px !important; }
}

@media (max-width: 767px) {
  .content, .content-custom { padding: 0 10px 14px !important; }
  .box-body { padding: 14px !important; }
  .nav-tabs-custom > .nav-tabs { padding: 0 8px !important; overflow-x: auto !important; white-space: nowrap !important; }
}

/* ── 32. Utility ──────────────────────────────────────────── */
.mr-8  { margin-right: 8px !important; }
.mt-10 { margin-top: 10px !important; }
.m-8   { margin: 4px !important; }

.text-muted  { color: var(--text-muted) !important; }
.text-primary { color: var(--c-blue) !important; }
.text-success { color: var(--c-green-dark) !important; }
.text-info    { color: var(--c-sky) !important; }
.text-danger  { color: #ef4444 !important; }
.text-warning { color: #d97706 !important; }

.bg-primary { background-color: var(--c-blue) !important; color: #fff !important; }
.bg-success { background-color: var(--c-green) !important; color: #fff !important; }
.bg-info    { background-color: var(--c-sky) !important; color: #fff !important; }
.bg-warning { background-color: #f59e0b !important; color: #fff !important; }
.bg-danger  { background-color: #ef4444 !important; color: #fff !important; }
.bg-aqua    { background-color: var(--c-sky) !important; color: #fff !important; }
.bg-green   { background-color: var(--c-green) !important; color: #fff !important; }
.bg-navy    { background-color: var(--c-blue-dark) !important; color: #fff !important; }

/* ── 33. Custom Table override ────────────────────────────── */
.custom-table {
  background: var(--bg-surface-2) !important;
  border-radius: var(--radius-lg) !important;
}

/* ── 34. Print ────────────────────────────────────────────── */
@media print {
  .main-sidebar, .main-header, .main-footer,
  .no-print, .scrolltop { display: none !important; }
  .content-wrapper { margin: 0 !important; }
}

/* ── 35. Skin overrides (nullify all AdminLTE skins) ─────── */
.skin-blue-light .main-header,
.skin-blue .main-header,
.skin-black .main-header,
.skin-green .main-header,
.skin-purple .main-header,
.skin-red .main-header,
.skin-yellow .main-header,
[class*="skin-"] .main-header {
  background-color: var(--header-bg) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.15), 0 2px 8px rgba(25,79,151,.20) !important;
}

.skin-blue-light .main-sidebar,
.skin-blue .main-sidebar,
.skin-black .main-sidebar,
.skin-green .main-sidebar,
.skin-purple .main-sidebar,
.skin-red .main-sidebar,
.skin-yellow .main-sidebar,
[class*="skin-"] .main-sidebar {
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}

[class*="skin-"] .sidebar-menu > li.active > a,
[class*="skin-"] .sidebar-menu > li:hover > a {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--c-blue) !important;
  border-left-color: var(--c-green) !important;
}
[class*="skin-"] .main-header .navbar .sidebar-toggle:hover {
  background-color: rgba(255,255,255,.10) !important;
  color: #fff !important;
}

[class*="skin-"] .main-header .navbar {
  background-color: var(--header-bg) !important;
}

[class*="skin-"] .main-header .logo {
  background-color: var(--c-blue-dark) !important;
  color: #fff !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}

/* ── 36. DataTable row selection ──────────────────────────── */
table.dataTable tbody tr.selected > td {
  background-color: var(--c-blue-light) !important;
  color: var(--c-blue) !important;
}

/* ── 37. Highcharts / Charts ──────────────────────────────── */
.highcharts-container text {
  font-family: 'Inter', sans-serif !important;
}

.dashboard-chart-empty {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted);
  font-weight: 600;
  text-align: center;
}

/* ── 38. TinyMCE ──────────────────────────────────────────── */
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
  background-color: var(--bg-surface-2) !important;
  border-bottom: 1px solid var(--border) !important;
}
.tox .tox-edit-area__iframe { background: var(--bg-surface) !important; }
.tox .tox-statusbar { border-top: 1px solid var(--border) !important; }
.tox .tox-mbtn, .tox .tox-tbtn {
  border-radius: var(--radius-xs) !important;
  color: var(--text-secondary) !important;
}
.tox .tox-mbtn:hover, .tox .tox-tbtn:hover {
  background-color: var(--bg-surface-3) !important;
  color: var(--text-base) !important;
}

/* ── 39. Input group clean ────────────────────────────────── */
.input-group > .form-control:first-child { border-right: none !important; }
.input-group > .form-control:last-child { border-left: none !important; }
.input-group-btn > .btn { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
.input-group-btn:first-child > .btn { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }

/* ── 40. Panel (Bootstrap 3 compatibility) ────────────────── */
.panel {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}
.panel-default > .panel-heading {
  background: var(--bg-surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text-base) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 12px 16px !important;
}
.panel-body { padding: 16px !important; }
.panel-title { font-size: 14px !important; font-weight: 600 !important; }

/* ── 41. Skin-blue-light sidebar/submenu overrides ────────── */
/* Override vendor.css skin-blue-light rules which set white text on a blue
   sidebar. Our sidebar is now white so we need dark text instead. These must
   carry the .skin-blue-light prefix to match vendor.css !important specificity. */

/* Sidebar link colours — dark for white sidebar */
.skin-blue-light .sidebar-menu > li > a,
.skin-blue-light .sidebar a {
  color: var(--sidebar-text) !important;
}

/* Section headers */
.skin-blue-light .sidebar-menu > li.header {
  color: #B0BAC9 !important;
  background: transparent !important;
}

/* Active + hover states */
.skin-blue-light .sidebar-menu > li.active > a,
.skin-blue-light .sidebar-menu > li.menu-open > a,
.skin-blue-light .sidebar-menu > li:hover > a {
  background-color: var(--sidebar-active-bg) !important;
  color: var(--c-blue) !important;
  border-left-color: var(--c-green) !important;
}

/* Treeview submenu — transparent (beats vendor.css near-white #f4f4f5) */
.skin-blue-light .sidebar-menu > li > .treeview-menu,
.skin-blue-light .sidebar-menu .treeview-menu {
  background: transparent !important;
}

/* Submenu link colours — dark */
.skin-blue-light .sidebar-menu .treeview-menu > li > a {
  color: var(--text-muted) !important;
}

/* Submenu active / hover */
.skin-blue-light .sidebar-menu .treeview-menu > li.active > a,
.skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
  color: var(--c-blue) !important;
  background-color: var(--sidebar-hover) !important;
}

/* Mobile sidebar brand area — dark text on white sidebar */
.cbiz-sidebar-brand {
  border-bottom: 1px solid var(--border) !important;
}
.cbiz-sidebar-brand span {
  color: var(--c-blue) !important;
}

/* ── 42. DreamPOS Dashboard Widgets ───────────────────────── */

/* Remove link decoration on card wrappers */
.dash-link,
.dash-link:hover,
.dash-link:focus {
  text-decoration: none !important;
  display: block !important;
}

/* Row 1 – white stat cards */
.dash-widget {
  display: flex !important;
  align-items: center !important;
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition-md), transform var(--transition-md) !important;
  width: 100% !important;
}
.dash-widget:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}

/* Icon circle */
.dash-widgetimg span {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(141,198,63,.13) !important;
}
.dash-widgetimg span i {
  font-size: 22px !important;
  color: var(--c-green) !important;
}
.dash-widget.dash1 .dash-widgetimg span { background: rgba(25,79,151,.12) !important; }
.dash-widget.dash1 .dash-widgetimg span i { color: var(--c-blue) !important; }
.dash-widget.dash2 .dash-widgetimg span { background: rgba(39,170,225,.12) !important; }
.dash-widget.dash2 .dash-widgetimg span i { color: var(--c-sky) !important; }
.dash-widget.dash3 .dash-widgetimg span { background: rgba(215,223,35,.18) !important; }
.dash-widget.dash3 .dash-widgetimg span i { color: #7d7500 !important; }

/* Text section */
.dash-widgetcontent {
  margin-left: 16px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.dash-widgetcontent h5 {
  font-size: 19px !important;
  font-weight: 700 !important;
  color: var(--text-base) !important;
  margin: 0 0 4px !important;
  line-height: 1.2 !important;
}
.dash-widgetcontent h6 {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Row 2 – colored stat cards */
.dash-count {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: var(--c-green) !important;
  border-radius: var(--radius-lg) !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  color: #fff !important;
  min-height: 100px !important;
  width: 100% !important;
  transition: box-shadow var(--transition-md), transform var(--transition-md) !important;
}
.dash-count:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
.dash-count.das1 { background: var(--c-blue) !important; }
.dash-count.das2 { background: #f59e0b !important; }
.dash-count.das3 { background: #ef4444 !important; }

.dash-counts h4 {
  font-size: 20px !important;
  font-weight: 700 !important;
  margin: 0 0 4px !important;
  color: #fff !important;
}
.dash-counts h5 {
  font-size: 11px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  color: rgba(255,255,255,.80) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Icon in colored card */
.dash-imgs {
  display: flex !important;
  align-items: center !important;
  transition: transform var(--transition-md) !important;
}
.dash-imgs i {
  font-size: 40px !important;
  color: rgba(255,255,255,.28) !important;
}
.dash-count:hover .dash-imgs {
  transform: scale(1.15) !important;
}

/* ── 43. DreamPOS Card (replaces AdminLTE box for dashboard) ── */
.dpos-card {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}
.dpos-card-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.dpos-card-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-base) !important;
  margin: 0 !important;
}
.dpos-card-title-link {
  color: var(--text-base) !important;
  text-decoration: none !important;
}
.dpos-card-title-link:hover { color: var(--c-sky) !important; }
.dpos-card-body {
  padding: 20px !important;
}

/* Dashboard filter row spacing */
.dpos-filters { margin-bottom: 16px !important; }

/* ── Module Horizontal Nav (Dream POS style) ──────────────── */
.sa-topnav {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 4px rgba(25,79,151,.10);
  margin: 12px 16px 6px;
  border: 1px solid rgba(25,79,151,.10);
}
.sa-topnav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 16px;
  gap: 4px;
}
.sa-topnav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--c-blue);
  text-decoration: none;
  padding: 14px 10px 14px 4px;
  white-space: nowrap;
  border-right: 1px solid rgba(25,79,151,.10);
  margin-right: 8px;
}
.sa-topnav-brand:hover { color: var(--c-green); text-decoration: none; }
.sa-topnav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(25,79,151,.15);
  border-radius: var(--radius);
  color: var(--c-blue);
  font-size: 15px;
  padding: 6px 10px;
  margin-left: auto;
  cursor: pointer;
}
.sa-topnav-links {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  flex: 1;
  padding: 8px 0;
}
.sa-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: #4a5568;
  text-decoration: none;
  transition: background .16s, color .16s;
  white-space: nowrap;
}
.sa-nav-link i { font-size: 13px; opacity: .85; transition: opacity .16s, transform .16s; }
.sa-nav-link:hover i { opacity: 1; transform: scale(1.05); }
.sa-nav-link:hover,
.sa-nav-link:focus {
  background: rgba(141,198,63,.13);
  color: #3a7a1a;
  text-decoration: none;
}
.sa-nav-link.active {
  background: var(--c-blue);
  color: #fff !important;
  text-decoration: none;
}
.sa-nav-link.active i { opacity: 1; }
.sa-nav-link.active:hover { background: var(--c-green); color: #fff !important; }
.sa-report-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px 12px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
  border: 1px solid rgba(25,79,151,.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(25,79,151,.08);
}
.sa-report-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #536273;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s, transform .16s;
}
.sa-report-tab i {
  width: 14px;
  text-align: center;
  color: var(--c-blue);
  opacity: .9;
}
.sa-report-tab:hover,
.sa-report-tab:focus {
  background: #fff;
  border-color: rgba(25,79,151,.16);
  color: var(--c-blue);
  text-decoration: none;
  box-shadow: 0 2px 7px rgba(25,79,151,.09);
  transform: translateY(-1px);
}
.sa-report-tab.active {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(25,79,151,.18);
}
.sa-report-tab.active i {
  color: #fff;
  opacity: 1;
}
@media (max-width: 767px) {
  .sa-topnav-toggle { display: inline-flex; align-items: center; }
  .sa-topnav-links { display: none !important; flex-direction: column; align-items: flex-start; width: 100%; padding: 4px 0 12px; }
  .sa-topnav-links.sa-open { display: flex !important; }
  .sa-nav-link { width: 100%; }
  .sa-topnav-brand { border-right: none; }
  .sa-report-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    margin: 0 12px 12px;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .sa-report-tab {
    flex: 0 0 auto;
  }
}

/* ═══ Home Dashboard: Topbar ═══════════════════════════════════ */
.dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0 18px;
}
.dash-topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  flex: 1;
}
.dash-topbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.dash-topbar-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-base);
  margin: 0;
  white-space: nowrap;
}
.dash-location-select { width: 200px !important; min-width: 0 !important; }
.dash-topbar-right .btn { padding-left: 18px !important; padding-right: 18px !important; }

/* ═══ Home Dashboard: KPI rows ═════════════════════════════════ */
.dash-kpi-row { margin-bottom: 4px !important; }

/* ═══ Home Dashboard: Card header enhancements ═════════════════ */
.dpos-card-icon {
  color: var(--c-blue);
  font-size: 13px;
  margin-right: 5px;
  opacity: .75;
}
.dpos-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dpos-badge-alert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(245,158,11,.15);
  color: #d97706;
  font-size: 10px;
  flex-shrink: 0;
}

/* ═══ Home Dashboard: Section divider ══════════════════════════ */
.dash-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.dash-section-label i { color: var(--c-blue); }

/* ═══ Home Dashboard: Table improvements ═══════════════════════ */
.dpos-table thead th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted) !important;
  background: var(--bg-surface) !important;
  border-bottom: 2px solid var(--border) !important;
  white-space: nowrap;
}
.dpos-table tbody tr:hover td { background: rgba(25,79,151,.035) !important; }
.dpos-card-body.p-0 { padding: 0 !important; }
.dpos-card-body.p-0 > .table,
.dpos-card-body.p-0 > .table-responsive > .table { margin-bottom: 0; }
.dpos-card-body.p-0 .table td,
.dpos-card-body.p-0 .table th { padding: 9px 14px; }

/* ═══ Global: Soften all DataTable / Bootstrap table borders ═══ */
/* Applies to every table in the main content area (core + modules)  */
.content .table-bordered,
.content .table-bordered > thead > tr > th,
.content .table-bordered > thead > tr > td,
.content .table-bordered > tbody > tr > th,
.content .table-bordered > tbody > tr > td,
.content .table-bordered > tfoot > tr > th,
.content .table-bordered > tfoot > tr > td {
  border-color: rgba(0,0,0,.06) !important;
}
.content .table > thead > tr > th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-bottom: 2px solid var(--border) !important;
  white-space: nowrap;
}
.content .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(25,79,151,.025);
}
.content .table-striped > tbody > tr:nth-of-type(even) {
  background-color: transparent;
}
.content .table-hover > tbody > tr:hover > td,
.content .table-hover > tbody > tr:hover > th {
  background-color: rgba(25,79,151,.035);
}

/* ═══ Home Dashboard: Responsive ═══════════════════════════════ */
@media (max-width: 767px) {
  .dash-topbar { flex-direction: column; align-items: flex-start; }
  .dash-topbar-left { width: 100%; }
  .dash-topbar-right { width: 100%; }
  .dash-location-select { width: 100% !important; }
}

/* ═══ Password Requirements Box ════════════════════════════════ */
.pwd-req-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 4px;
}
.pwd-req-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.pwd-req-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.pwd-req-list li {
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .18s;
}
.pwd-req-list li.req-met { color: #22a03a; }
.pwd-req-list li.req-unmet { color: #dc3545; }
.pwd-req-list li i { width: 14px; text-align: center; flex-shrink: 0; font-size: 12px; }
/* Input validity border helpers (set via JS) */
.form-control.pwd-valid   { border-color: #22a03a !important; }
.form-control.pwd-invalid { border-color: #dc3545 !important; }

/* ═══ Page Header (inner pages) ════════════════════════════════ */
.dpos-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 22px 24px !important;
  margin-bottom: 18px !important;
  background: linear-gradient(135deg, var(--c-blue) 0%, #1f74bd 100%) !important;
  border: 1px solid #d7e4f5 !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 24px rgba(21, 77, 145, 0.12) !important;
  color: #fff !important;
}
.dpos-page-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 2px;
}
.dpos-page-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86) !important;
  margin: 0;
}
.dpos-page-header h1,
.dpos-page-header h2,
.dpos-page-header h3,
.dpos-page-header h4,
.dpos-page-header h5,
.dpos-page-header h6,
.dpos-page-header p,
.dpos-page-header span,
.dpos-page-header i {
  color: #fff !important;
}
.dpos-page-header .btn,
.dpos-page-header .btn-default,
.dpos-page-header .btn-primary {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.dpos-page-header .btn:hover,
.dpos-page-header .btn:focus,
.dpos-page-header .btn-default:hover,
.dpos-page-header .btn-default:focus,
.dpos-page-header .btn-primary:hover,
.dpos-page-header .btn-primary:focus {
  background: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  color: #fff !important;
}
@media (max-width: 767px) {
  .dpos-page-header { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   GLOBAL DATATABLE ACTION BUTTONS  (dt-act-btn)
   ============================================================ */
.dt-act-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: 7px;
  font-size: 12px; font-weight: 600; border: none; cursor: pointer;
  text-decoration: none; transition: background .17s, color .17s;
  white-space: nowrap; vertical-align: middle; line-height: 1.4;
}
.dt-act-btn + .dt-act-btn { margin-left: 4px; }
.dt-act-btn.act-info    { background: #eef4ff; color: #194f97; }
.dt-act-btn.act-green   { background: #edfaf0; color: #16a34a; }
.dt-act-btn.act-amber   { background: #fff8ec; color: #d97706; }
.dt-act-btn.act-red,
.dt-act-btn.act-danger  { background: #fef2f2; color: #dc2626; }
.dt-act-btn.act-teal    { background: #e6faf7; color: #0d9488; }
.dt-act-btn.act-purple  { background: #f3eeff; color: #7c3aed; }
.dt-act-btn.act-indigo  { background: #eef1fb; color: #194f97; }
.dt-act-btn.act-gray    { background: #f1f5f9; color: #64748b; }
.dt-act-btn.act-info:hover,
.dt-act-btn.act-indigo:hover { background: #194f97; color: #fff !important; text-decoration: none; }
.dt-act-btn.act-green:hover  { background: #16a34a; color: #fff !important; text-decoration: none; }
.dt-act-btn.act-amber:hover  { background: #d97706; color: #fff !important; text-decoration: none; }
.dt-act-btn.act-red:hover,
.dt-act-btn.act-danger:hover { background: #dc2626; color: #fff !important; text-decoration: none; }
.dt-act-btn.act-teal:hover   { background: #0d9488; color: #fff !important; text-decoration: none; }
.dt-act-btn.act-purple:hover { background: #7c3aed; color: #fff !important; text-decoration: none; }
.dt-act-btn.act-gray:hover   { background: #64748b; color: #fff !important; text-decoration: none; }
/* Dropdown variant */
.dt-act-btn.dropdown-toggle  { background: #eef4ff; color: #194f97; }
.dt-act-btn.dropdown-toggle:hover { background: #194f97; color: #fff !important; text-decoration: none; }

/* ============================================================
   GLOBAL STATUS BADGES  (dt-badge)
   ============================================================ */
.dt-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap; vertical-align: middle;
}
/* colour variants */
.dt-badge-green,  .dt-badge.bg-green,
.dt-badge.bg-light-green  { background: #edfaf0; color: #16a34a; border: 1px solid #bbf7d0; }
.dt-badge-red,    .dt-badge.bg-red    { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.dt-badge-amber,  .dt-badge.bg-yellow,
.dt-badge.bg-orange       { background: #fff8ec; color: #d97706; border: 1px solid #fde68a; }
.dt-badge-blue,   .dt-badge.bg-aqua,
.dt-badge.bg-info         { background: #e8f3ff; color: #2563eb; border: 1px solid #bfdbfe; }
.dt-badge-indigo, .dt-badge.bg-navy,
.dt-badge.bg-primary      { background: #eef1fb; color: #194f97; border: 1px solid #c7d2f5; }
.dt-badge-purple, .dt-badge.bg-purple { background: #f3eeff; color: #7c3aed; border: 1px solid #ddd6fe; }
.dt-badge-teal,   .dt-badge.bg-teal   { background: #e6faf7; color: #0d9488; border: 1px solid #99f6e4; }
.dt-badge-gray,   .dt-badge.bg-gray,
.dt-badge.bg-default      { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }

/* dark mode */
html[data-theme="dark"] .dt-act-btn.act-info,
html[data-theme="dark"] .dt-act-btn.act-indigo  { background: rgba(25,79,151,.22); color: #6fa0e8; }
html[data-theme="dark"] .dt-act-btn.act-green    { background: rgba(22,163,74,.18); color: #4ade80; }
html[data-theme="dark"] .dt-act-btn.act-amber    { background: rgba(217,119,6,.18); color: #fbbf24; }
html[data-theme="dark"] .dt-act-btn.act-red,
html[data-theme="dark"] .dt-act-btn.act-danger   { background: rgba(220,38,38,.18); color: #f87171; }
html[data-theme="dark"] .dt-act-btn.act-teal     { background: rgba(13,148,136,.18); color: #2dd4bf; }
html[data-theme="dark"] .dt-act-btn.act-purple   { background: rgba(124,58,237,.18); color: #c4b5fd; }
html[data-theme="dark"] .dt-act-btn.act-gray     { background: rgba(100,116,139,.18); color: #94a3b8; }
html[data-theme="dark"] .dt-act-btn.dropdown-toggle { background: rgba(25,79,151,.22); color: #6fa0e8; }
html[data-theme="dark"] .dt-badge-green,
html[data-theme="dark"] .dt-badge.bg-light-green,
html[data-theme="dark"] .dt-badge.bg-green  { background: rgba(22,163,74,.15); border-color: rgba(22,163,74,.3); color: #4ade80; }
html[data-theme="dark"] .dt-badge-red,
html[data-theme="dark"] .dt-badge.bg-red    { background: rgba(220,38,38,.15); border-color: rgba(220,38,38,.3); color: #f87171; }
html[data-theme="dark"] .dt-badge-amber,
html[data-theme="dark"] .dt-badge.bg-yellow,
html[data-theme="dark"] .dt-badge.bg-orange { background: rgba(217,119,6,.15); border-color: rgba(217,119,6,.3); color: #fbbf24; }
html[data-theme="dark"] .dt-badge-blue,
html[data-theme="dark"] .dt-badge.bg-aqua,
html[data-theme="dark"] .dt-badge.bg-info   { background: rgba(37,99,235,.15); border-color: rgba(37,99,235,.3); color: #60a5fa; }
html[data-theme="dark"] .dt-badge-indigo,
html[data-theme="dark"] .dt-badge.bg-navy,
html[data-theme="dark"] .dt-badge.bg-primary { background: rgba(25,79,151,.2); border-color: rgba(25,79,151,.35); color: #6fa0e8; }
html[data-theme="dark"] .dt-badge-gray,
html[data-theme="dark"] .dt-badge.bg-gray,
html[data-theme="dark"] .dt-badge.bg-default { background: rgba(100,116,139,.15); border-color: rgba(100,116,139,.3); color: #94a3b8; }

/* ═══════════════════════════════════════════════════════
   DreamPOS Calculator Modal
   ═══════════════════════════════════════════════════════ */

/* Suppress any legacy calc styles */
#calculator { display: none !important; }

/* Position modal near top-right, compact */
.dpos-calc-dialog {
  width: 260px;
  margin: 56px 0 0 auto;
  margin-right: 10px;
}
@media (max-width: 767px) {
  .dpos-calc-dialog {
    margin: 56px auto 0;
  }
}

.dpos-calc-modal-content {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 14px;
  overflow: hidden;
}

/* Shell */
#dpos-calc {
  width: 260px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 12px 40px rgba(0,0,0,.18);
  border: 1px solid #dbe0e6;
  -webkit-user-select: none;
  user-select: none;
}

/* Display */
.dpos-calc__display {
  background: linear-gradient(135deg, #194f97 0%, #1a6ac7 100%);
  padding: 10px 14px 14px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  position: relative;
}
.dpos-calc__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .15s, background .15s;
}
.dpos-calc__close:hover { color: #fff; background: rgba(255,255,255,.15); }
.dpos-calc__expr {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  min-height: 15px;
  text-align: right;
  line-height: 1.3;
  margin-bottom: 4px;
  word-break: break-all;
  width: 100%;
}
.dpos-calc__screen {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  text-align: right !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1.1 !important;
  caret-color: transparent;
  cursor: default;
}
.dpos-calc__screen::placeholder { color: rgba(255,255,255,.4) !important; }

/* Button grid */
.dpos-calc__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #dbe0e6;
}

/* Base button */
.dpos-calc__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  background: #fff;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  transition: background .08s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
  border-radius: 0;
}
.dpos-calc__btn:hover  { background: #f0f6ff; }
.dpos-calc__btn:active { background: #dbeafe; }

/* 0 spans 2 cols */
.dpos-calc__btn--zero { grid-column: span 2; }

/* Operators */
.dpos-calc__btn--op {
  color: #194f97;
  font-weight: 600;
  background: #f0f6ff;
}
.dpos-calc__btn--op:hover  { background: #dbeafe; }
.dpos-calc__btn--op:active { background: #bfdbfe; }

/* AC */
.dpos-calc__btn--danger {
  color: #dc2626;
  font-weight: 700;
  background: #fff5f5;
}
.dpos-calc__btn--danger:hover  { background: #fee2e2; }
.dpos-calc__btn--danger:active { background: #fecaca; }

/* Backspace */
.dpos-calc__btn--warn {
  color: #d97706;
  font-size: 18px;
  background: #fffbeb;
}
.dpos-calc__btn--warn:hover  { background: #fef3c7; }
.dpos-calc__btn--warn:active { background: #fde68a; }

/* Equals */
.dpos-calc__btn--eq {
  background: #194f97;
  color: #fff;
  font-weight: 700;
}
.dpos-calc__btn--eq:hover  { background: #133c78; }
.dpos-calc__btn--eq:active { background: #0f2e5e; }

/* ── Dark mode ── */
html[data-theme='dark'] #dpos-calc {
  background: #1e2a3a;
  border-color: #2d3d52;
}
html[data-theme='dark'] .dpos-calc__display {
  background: linear-gradient(135deg, #133c78 0%, #194f97 100%);
}
html[data-theme='dark'] .dpos-calc__grid { background: #2d3d52; }
html[data-theme='dark'] .dpos-calc__btn {
  background: #1e2a3a;
  color: #e2e8f0;
}
html[data-theme='dark'] .dpos-calc__btn:hover  { background: #253447; }
html[data-theme='dark'] .dpos-calc__btn:active { background: #2d4060; }
html[data-theme='dark'] .dpos-calc__btn--op {
  background: #1a2e4a;
  color: #6fa0e8;
}
html[data-theme='dark'] .dpos-calc__btn--op:hover  { background: #22395c; }
html[data-theme='dark'] .dpos-calc__btn--danger {
  background: #2d1e1e;
  color: #f87171;
}
html[data-theme='dark'] .dpos-calc__btn--warn {
  background: #2d2510;
  color: #fbbf24;
}
html[data-theme='dark'] .dpos-calc__btn--eq { background: #194f97; color: #fff; }
html[data-theme='dark'] .dpos-calc__btn--eq:hover { background: #1a6ac7; }

/* Calculator modal sits above POS layers — backdrop handled via JS only */
#dposCalcModal { z-index: 99999 !important; }

/* ═══ Customer Portal Layout Fixes ════════════════════════════════════════ */
/* Ensure the contact portal sidebar does not overlap the content wrapper.  */
/* The sidebar is position:fixed at z-index 820; content-wrapper must have  */
/* margin-left equal to the sidebar width at all viewport sizes.            */

.cbiz-app .main-sidebar .sidebar > a.logo {
    display: none !important;   /* remove duplicate logo inside sidebar panel */
}

/* Contact portal content area — reliable left margin even before JS runs */
.cbiz-app .content-wrapper {
    margin-left: var(--sidebar-width) !important;
}
.cbiz-app.sidebar-collapse .content-wrapper {
    margin-left: 60px !important;
}

/* Portal KPI grid — prevent card overflow from bleeding under sidebar */
.cp-kpi-grid {
    overflow: visible;
}

/* Ensure chart containers never escape their column */
.cp-panel-body .cp-chart,
.cp-panel-body > div[id^="cp_"] {
    max-width: 100%;
    overflow: hidden;
}

/* ── Thin-ring data-card spinner (global) ─────────────────────────────── */
@keyframes cbiz-ring-spin {
    to { transform: rotate(360deg); }
}
.b360-ring {
    display: inline-block;
    width: 26px;
    height: 26px;
    border: 3px solid #d8dde6;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: cbiz-ring-spin 0.75s linear infinite;
    vertical-align: middle;
    margin-top: 2px;
}
.b360-ring-sm {
    width: 13px;
    height: 13px;
    border-width: 2px;
    margin-top: 0;
    opacity: .7;
}

/* ============================================================
   Admin Shell Alignment Fixes
   Keeps the header logo/toggle, sidebar, and home dashboard
   responsive as one layout system.
   ============================================================ */
@media (min-width: 768px) {
  .cbiz-app .main-header .logo {
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    transition: width var(--transition-md), min-width var(--transition-md), max-width var(--transition-md) !important;
  }

  .cbiz-app.sidebar-collapse .main-header .logo {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    justify-content: center !important;
  }

  .cbiz-app.sidebar-collapse .main-header .logo .logo-img,
  .cbiz-app.sidebar-collapse .main-header .logo #online_indicator {
    display: none !important;
  }

  .cbiz-app .main-sidebar {
    width: var(--sidebar-width) !important;
    transition: width var(--transition-md), transform var(--transition-md) !important;
  }

  .cbiz-app.sidebar-collapse .main-sidebar {
    width: 60px !important;
  }
}

@media (max-width: 1199px) {
  .cbiz-app .gs-wrap {
    display: none !important;
  }
}

@media (max-width: 991px) {
  #business_360_dashboard .b360-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #business_360_dashboard .b360-header,
  .dash-topbar {
    align-items: stretch !important;
  }
}

@media (max-width: 767px) {
  .cbiz-app .main-header .logo {
    display: none !important;
  }

  .cbiz-app .main-header .navbar {
    margin-left: 0 !important;
    width: 100% !important;
  }

  .cbiz-app .navbar-custom-menu {
    max-width: calc(100vw - 58px) !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .cbiz-app .navbar-custom-menu::-webkit-scrollbar {
    display: none;
  }

  #business_360_dashboard .b360-kpi-grid,
  #business_360_dashboard .b360-filter-grid {
    grid-template-columns: 1fr !important;
  }

  #business_360_dashboard .b360-header,
  .dash-topbar,
  .dash-topbar-left,
  .dash-topbar-right {
    width: 100% !important;
  }

  #business_360_dashboard #b360_refresh,
  .dash-topbar-right .dpos-dr-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  #business_360_dashboard .b360-chart {
    min-height: 260px !important;
    height: 260px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   DateRangePicker dropdown — DreamPOS theme
   Overrides the bundled daterangepicker styles from vendor.css
══════════════════════════════════════════════════════════════ */
.daterangepicker {
  border: 1px solid #dbe0e6 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(15,23,42,.15) !important;
  font-family: inherit !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  margin-top: 4px !important;
}
.daterangepicker::before, .daterangepicker::after { display: none !important; }

/* ── Ranges list (left panel) ── */
.daterangepicker .ranges {
  background: #f8fafc !important;
  border-right: 1px solid #edf1f7 !important;
  padding: 8px !important;
  float: none !important;
  width: 152px !important;
  min-width: 152px !important;
}
.daterangepicker .ranges ul {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
}
.daterangepicker .ranges li {
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  border-radius: 8px !important;
  margin-bottom: 2px !important;
  cursor: pointer !important;
  transition: background .13s, color .13s !important;
  white-space: nowrap !important;
  list-style: none !important;
  line-height: 1.4 !important;
}
.daterangepicker .ranges li:hover {
  background: rgba(25,79,151,.09) !important;
  color: #194f97 !important;
}
.daterangepicker .ranges li.active {
  background: #194f97 !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* ── Calendar panel ── */
.daterangepicker .drp-calendar {
  padding: 8px 10px !important;
  max-width: none !important;
}
.daterangepicker .calendar-table {
  background: #fff !important;
  border: none !important;
  padding: 0 !important;
}
.daterangepicker th.month {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1f2933 !important;
}
.daterangepicker th.prev span, .daterangepicker th.next span {
  border-color: #475569 !important;
}
.daterangepicker th.prev:hover, .daterangepicker th.next:hover,
.daterangepicker th.available:hover {
  background: rgba(25,79,151,.08) !important;
  border-radius: 6px !important;
}
.daterangepicker .table-condensed > thead > tr > th,
.daterangepicker .table-condensed > tbody > tr > td {
  padding: 5px 7px !important;
  text-align: center !important;
}

/* ── Day cells ── */
.daterangepicker td.available {
  font-size: 13px !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  color: #374151 !important;
  transition: background .12s !important;
}
.daterangepicker td.available:hover {
  background: rgba(25,79,151,.10) !important;
  color: #194f97 !important;
  border-radius: 6px !important;
}
.daterangepicker td.active,
.daterangepicker td.active:hover {
  background: #194f97 !important;
  color: #fff !important;
  border-radius: 6px !important;
}
.daterangepicker td.in-range {
  background: rgba(25,79,151,.08) !important;
  color: #1f2933 !important;
  border-radius: 0 !important;
}
.daterangepicker td.start-date { border-radius: 6px 0 0 6px !important; }
.daterangepicker td.end-date   { border-radius: 0 6px 6px 0 !important; }
.daterangepicker td.start-date.end-date { border-radius: 6px !important; }
.daterangepicker td.off,
.daterangepicker td.off:hover  { color: #c4c9d4 !important; background: transparent !important; }
.daterangepicker td.today      { font-weight: 800 !important; color: #194f97 !important; }
.daterangepicker td.today.active { color: #fff !important; }
.daterangepicker th.week, .daterangepicker td.week { font-size: 11px !important; color: #94a3b8 !important; }

/* ── Date text inputs inside calendar ── */
.daterangepicker input.input-mini {
  border: 1.5px solid #dbe0e6 !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #1f2933 !important;
  padding: 5px 8px !important;
  background: #fff !important;
}
.daterangepicker input.input-mini:focus {
  border-color: #194f97 !important;
  box-shadow: 0 0 0 3px rgba(25,79,151,.10) !important;
  outline: none !important;
}

/* ── Apply / Cancel buttons ── */
.daterangepicker .drp-buttons {
  border-top: 1px solid #edf1f7 !important;
  padding: 10px 14px !important;
  background: #f8fafc !important;
}
.daterangepicker .drp-buttons .btn {
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  padding: 6px 16px !important;
}
.daterangepicker .drp-buttons .cancelBtn {
  background: #fff !important;
  border: 1.5px solid #dbe0e6 !important;
  color: #374151 !important;
  box-shadow: none !important;
}
.daterangepicker .drp-buttons .cancelBtn:hover {
  background: #f1f5f9 !important;
  border-color: #b4bfc9 !important;
}
.daterangepicker .drp-buttons .applyBtn {
  background: #194f97 !important;
  border-color: #194f97 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(25,79,151,.25) !important;
}
.daterangepicker .drp-buttons .applyBtn:hover {
  background: #0f3460 !important;
  border-color: #0f3460 !important;
}

/* ── Dark mode ── */
html[data-theme="dark"] .daterangepicker { background: #1e293b !important; border-color: #334155 !important; }
html[data-theme="dark"] .daterangepicker .ranges { background: #162032 !important; border-color: #334155 !important; }
html[data-theme="dark"] .daterangepicker .ranges li { color: #cbd5e1 !important; }
html[data-theme="dark"] .daterangepicker .ranges li:hover { background: rgba(77,140,232,.12) !important; color: #4d8ce8 !important; }
html[data-theme="dark"] .daterangepicker .ranges li.active { background: #4d8ce8 !important; color: #fff !important; }
html[data-theme="dark"] .daterangepicker .calendar-table { background: #1e293b !important; }
html[data-theme="dark"] .daterangepicker td.available { color: #cbd5e1 !important; }
html[data-theme="dark"] .daterangepicker td.available:hover { background: rgba(77,140,232,.14) !important; color: #4d8ce8 !important; }
html[data-theme="dark"] .daterangepicker td.in-range { background: rgba(77,140,232,.12) !important; color: #e2e8f0 !important; }
html[data-theme="dark"] .daterangepicker td.active { background: #4d8ce8 !important; color: #fff !important; }
html[data-theme="dark"] .daterangepicker th.month { color: #e2e8f0 !important; }
html[data-theme="dark"] .daterangepicker .drp-buttons { background: #162032 !important; border-color: #334155 !important; }
html[data-theme="dark"] .daterangepicker .drp-buttons .cancelBtn { background: #1e293b !important; border-color: #475569 !important; color: #cbd5e1 !important; }
html[data-theme="dark"] .daterangepicker input.input-mini { background: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; }