/* JB Finance - Admin Theme (Blue, like reference image) */

:root{
  --jb-primary:#3d7ac7;
  --jb-primary-rgb:61,122,199;
  --jb-primary-dark:#2c5a95;
  --jb-primary-light:#5b8fd8;
  --jb-navy:#1e2d47;
  --jb-navy-dark:#172338;

  --jb-surface: rgba(255,255,255,.86);
  --jb-surface-2: rgba(255,255,255,.72);

  --jb-card:#ffffff;
  --jb-text:#1e2d47;
  --jb-muted:#6c757d;
  --jb-muted-2:#a3b4cc;

  --jb-green:#4fd69c;
  /* Use blue as the only primary accent (no orange). */
  --jb-orange: var(--jb-primary);
  --jb-cyan:#4dd9eb;
  --jb-red:#ef5350;

  --jb-shadow-sm:0 2px 6px rgba(30,45,71,.10);
  --jb-shadow-md:0 10px 26px rgba(30,45,71,.16);
  --jb-radius:12px;

  /* semantic mapping */
  --bs-primary: var(--jb-primary);
  --bs-secondary: var(--jb-muted-2);
  --bs-success: var(--jb-green);
  --bs-info: var(--jb-cyan);
  --bs-warning: var(--jb-orange);
  --bs-danger: var(--jb-red);
}

/* ===== Hard-coded Kero/Bootstrap utility overrides (remove orange) ===== */
/* The vendor theme compiles utility classes with fixed hex colors (orange primary).
   Override them so the whole UI uses JB primary blue. */
.text-primary{ color: var(--jb-primary) !important; }
.bg-primary{ background-color: var(--jb-primary) !important; }
.border-primary{ border-color: var(--jb-primary) !important; }

/* Treat warning as primary (requested: remove orange everywhere). */
.text-warning{ color: var(--jb-primary) !important; }
.bg-warning{ background-color: var(--jb-primary) !important; }
.border-warning{ border-color: var(--jb-primary) !important; }

.btn-warning,
.btn.btn-warning{
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color: #fff !important;
}
.btn-warning:hover,
.btn.btn-warning:hover{
  background: var(--jb-primary-dark) !important;
  border-color: var(--jb-primary-dark) !important;
}
.btn-outline-warning,
.btn.btn-outline-warning{
  border-color: var(--jb-primary) !important;
  color: var(--jb-primary) !important;
}
.btn-outline-warning:hover,
.btn.btn-outline-warning:hover{
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color: #fff !important;
}

/* Badges/labels */
.badge.bg-warning,
.badge.badge-warning,
.badge-warning{
  background-color: var(--jb-primary) !important;
  color: #fff !important;
}

/* ===== Tables: remove orange hover/active ===== */
.table{
  --bs-table-hover-bg: rgba(var(--jb-primary-rgb), .08) !important;
  --bs-table-active-bg: rgba(var(--jb-primary-rgb), .12) !important;
}

/* If any views use .table-primary, ensure it stays in the blue palette */
.table-primary{
  --bs-table-bg: rgba(var(--jb-primary-rgb), .08) !important;
  --bs-table-striped-bg: rgba(var(--jb-primary-rgb), .06) !important;
  --bs-table-active-bg: rgba(var(--jb-primary-rgb), .14) !important;
  --bs-table-hover-bg: rgba(var(--jb-primary-rgb), .10) !important;
  border-color: rgba(var(--jb-primary-rgb), .18) !important;
}

/* ===== Background (full page) ===== */
html,
body{
  /* Background matches reference: sharp polygons + wave (SVG), no blend modes */
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201600%20900'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='bg'%20x1='0'%20y1='1'%20x2='1'%20y2='0'%3E%3Cstop%20offset='0'%20stop-color='%230a2b5b'/%3E%3Cstop%20offset='0.55'%20stop-color='%231f66b5'/%3E%3Cstop%20offset='1'%20stop-color='%232b7bd1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width='1600'%20height='900'%20fill='url(%23bg)'/%3E%3Cpolygon%20points='0,0%201020,0%20680,360%200,280'%20fill='%23ffffff'%20opacity='0.05'/%3E%3Cpolygon%20points='1600,0%201600,460%20910,260%201230,0'%20fill='%23ffffff'%20opacity='0.06'/%3E%3Cpolygon%20points='0,900%200,430%20730,570%20440,900'%20fill='%23000000'%20opacity='0.10'/%3E%3Cpath%20d='M0,520%20C260,430%20480,430%20790,560%20C1100,690%201320,720%201600,620%20L1600,900%20L0,900%20Z'%20fill='%23ffffff'%20opacity='0.08'/%3E%3Cpath%20d='M0,560%20C270,475%20500,475%20810,600%20C1130,730%201350,760%201600,670%20L1600,900%20L0,900%20Z'%20fill='%23000000'%20opacity='0.10'/%3E%3C/svg%3E") center / cover no-repeat fixed,
    linear-gradient(120deg, var(--jb-navy-dark) 0%, var(--jb-primary-dark) 34%, var(--jb-primary) 68%, var(--jb-primary-light) 100%) !important;
  min-height: 100%;
}

body{ background-color: transparent !important; }

/* Kero theme wrappers paint backgrounds; force transparent so the gradient shows */
.app-container,
.app-container.app-theme-gray,
.app-container.app-theme-white,
.app-main,
.app-main__outer,
.app-main__inner{
  background: transparent !important;
  min-height: 100vh;
}

/* Keep app content above the background */
.app-container{ position: relative; }

/* Content "panel" like the reference (light surface on blue bg) */
.app-main__inner{ padding: 24px !important; }
.app-main__inner > .container-fluid{
  /* Show the same blue background across the whole page */
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ===== Sidebar ===== */
.app-sidebar,
.app-sidebar.sidebar-shadow,
.app-sidebar-wrapper .app-sidebar{
  background: linear-gradient(180deg, var(--jb-navy) 0%, var(--jb-navy-dark) 100%) !important;
  box-shadow: 4px 0 18px rgba(0,0,0,.18) !important;
}
.app-header__logo,
.app-sidebar-wrapper .app-header__logo{
  background: linear-gradient(180deg, var(--jb-navy) 0%, var(--jb-navy-dark) 100%) !important;
}
.app-sidebar .app-sidebar__heading{ color: rgba(255,255,255,.55) !important; letter-spacing:.06em; }
.app-sidebar .vertical-nav-menu li a{ color: rgba(255,255,255,.76) !important; }
.app-sidebar .vertical-nav-menu li a:hover{ background: rgba(255,255,255,.08) !important; color:#fff !important; }
.app-sidebar .vertical-nav-menu i.metismenu-icon{ color: rgba(255,255,255,.76) !important; }
.app-sidebar .vertical-nav-menu li a:hover i.metismenu-icon{ color:#fff !important; }
.app-sidebar .vertical-nav-menu li.mm-active > a{
  background: rgba(61,122,199,.92) !important;
  color:#fff !important;
  box-shadow: 0 6px 14px rgba(61,122,199,.28) !important;
  border-radius: 10px;
  margin: 0 10px;
}

/* top header */
.app-header{
  background: linear-gradient(90deg, var(--jb-primary-light) 0%, var(--jb-primary) 45%, var(--jb-primary-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
}
.app-header .page-title-heading{ color:#fff !important; font-weight:700; }
.app-header .page-title-subheading{ color:rgba(255,255,255,.8) !important; }
.app-header .search-wrapper{ background:rgba(255,255,255,.18) !important; border:1px solid rgba(255,255,255,.22) !important; }
.app-header .search-wrapper input{ color:#fff !important; }
.app-header .search-wrapper input::placeholder{ color:rgba(255,255,255,.75) !important; }

/* ===== Common cards / controls ===== */
.card,
.card-shadow-primary,
.main-card{
  border-radius: var(--jb-radius) !important;
  border: 1px solid rgba(30,45,71,.08) !important;
  box-shadow: var(--jb-shadow-sm) !important;
  background: var(--jb-surface) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.card-header{
  background: rgba(255,255,255,.82) !important;
  border-bottom: 1px solid rgba(30,45,71,.08) !important;
}

/* Utility: Primary gradient background for cards */
.card-gradient-primary{
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 48%, var(--jb-primary-dark) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 28px rgba(61,122,199,.28) !important;
}
.card-gradient-primary .chart-title,
.card-gradient-primary .kpi-value,
.card-gradient-primary .kpi-label,
.card-gradient-primary .kpi-badge,
.card-gradient-primary .kpi-meta{
  color: #fff !important;
}
.card-gradient-primary .kpi-card-icon{
  background: rgba(255,255,255,.18) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.18) !important;
}
.kpi-card.card-gradient-primary::before{
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 62%) !important;
}
.kpi-card.card-gradient-primary::after{
  opacity: .14 !important;
}

.btn-primary,
.btn.btn-primary{
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  box-shadow: 0 3px 10px rgba(61,122,199,.25) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover{
  background: var(--jb-primary-dark) !important;
  border-color: var(--jb-primary-dark) !important;
}

.form-control,
.form-select{
  border-radius: 12px !important;
  border-color: rgba(30,45,71,.14) !important;
}
.form-control:focus,
.form-select:focus{
  border-color: rgba(61,122,199,.75) !important;
  box-shadow: 0 0 0 .2rem rgba(61,122,199,.20) !important;
}

/* Links */
a{ color: inherit; }
.app-main__inner a{ color: var(--jb-primary); }
.app-sidebar a{ color: rgba(255,255,255,.76) !important; }

/* dashboard header */
.dashboard-header{ margin:6px 0 18px; }
.dashboard-title{ font-size:26px; font-weight:800; color:#fff; margin:0 0 6px; text-shadow: 0 10px 26px rgba(0,0,0,.22); }
.dashboard-subtitle{ margin:0; color:rgba(255,255,255,.82); }

/* KPI cards */
.kpi-card{
  background: var(--jb-surface);
  border-radius:var(--jb-radius);
  box-shadow:var(--jb-shadow-md);
  padding:18px 18px 16px;
  border:1px solid rgba(30,45,71,.06);
  height:132px;
  position:relative;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.kpi-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,0) 62%);
  pointer-events:none;
}
.kpi-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(30,45,71,.16); }
.kpi-card::after{
  content:"";
  position:absolute;
  inset:-60px -60px auto auto;
  width:170px;
  height:170px;
  border-radius:999px;
  opacity:.10;
}
.kpi-card.blue::after{ background:var(--jb-primary); }
.kpi-card.green::after{ background:var(--jb-green); }
.kpi-card.cyan::after{ background:var(--jb-cyan); }
.kpi-card.orange::after{ background:var(--jb-orange); }

.kpi-card.blue::before{ background: linear-gradient(135deg, rgba(61,122,199,.22) 0%, rgba(255,255,255,0) 62%); }
.kpi-card.green::before{ background: linear-gradient(135deg, rgba(79,214,156,.20) 0%, rgba(255,255,255,0) 62%); }
.kpi-card.cyan::before{ background: linear-gradient(135deg, rgba(77,217,235,.20) 0%, rgba(255,255,255,0) 62%); }
.kpi-card.orange::before{ background: linear-gradient(135deg, rgba(61,122,199,.22) 0%, rgba(255,255,255,0) 62%); }

.kpi-card-icon{
  position:absolute;
  right:16px;
  top:14px;
  width:44px;
  height:44px;
  line-height:44px;
  text-align:center;
  border-radius:14px;
  font-size:22px;
  opacity:1;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.24);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.kpi-card.blue .kpi-card-icon{ color:var(--jb-primary); }
.kpi-card.green .kpi-card-icon{ color:var(--jb-green); }
.kpi-card.cyan .kpi-card-icon{ color:#1b8ea0; }
.kpi-card.orange .kpi-card-icon{ color:var(--jb-primary-dark); }

.kpi-label{ font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.kpi-label.blue{ color:var(--jb-primary); }
.kpi-label.green{ color:var(--jb-green); }
.kpi-label.cyan{ color:var(--jb-cyan); }
.kpi-label.orange{ color:var(--jb-orange); }

.kpi-value{ font-size:34px; font-weight:800; color:var(--jb-text); line-height:1; margin-bottom:10px; }

.kpi-badge{ display:inline-flex; gap:6px; align-items:center; border-radius:999px; padding:5px 12px; font-size:12px; font-weight:700; }
.kpi-badge.success{ background:rgba(79,214,156,.16); color:var(--jb-green); }
.kpi-badge.info{ background:rgba(77,217,235,.16); color:#1b8ea0; }

.kpi-meta{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(30,45,71,.72);
}

/* chart cards */
.chart-card{ background: var(--jb-surface); border-radius:var(--jb-radius); box-shadow:var(--jb-shadow-md); border:1px solid rgba(30,45,71,.06); padding:18px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chart-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.chart-title{ margin:0; font-weight:800; color:var(--jb-text); }
.chart-actions{ display:flex; gap:8px; }

/* Sales pipeline (legend + funnel bars) */
.sales-pipeline-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:18px;
  align-items:center;
}

.pipeline-legend{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pipeline-item{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--jb-muted);
  font-weight:700;
}

.pipeline-dot{
  width:12px;
  height:12px;
  border-radius:3px;
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset;
}
.pipeline-dot.dot-1{ background:linear-gradient(90deg,#5b8fd8,var(--jb-primary)); }
.pipeline-dot.dot-2{ background:linear-gradient(90deg,var(--jb-primary),var(--jb-primary-dark)); }
.pipeline-dot.dot-3{ background:linear-gradient(90deg,var(--jb-cyan),#33b8c8); }
.pipeline-dot.dot-4{ background:linear-gradient(90deg,var(--jb-green),#2fbf82); }
.pipeline-dot.dot-5{ background:linear-gradient(90deg,var(--jb-primary-dark),var(--jb-navy)); }

.pipeline-funnel{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.pipeline-bar{
  height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 62px;
  color:#fff;
  font-weight:900;
  border-radius:12px;
  box-shadow:var(--jb-shadow-sm);
  /* trapezoid right edge */
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  margin-left:auto; /* right aligned so it forms a funnel */
  text-shadow: 0 2px 10px rgba(0,0,0,.28);
}

.pipeline-bar .bar-left{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.18);
}

.pipeline-bar .bar-left i{ font-size:16px; }
.pipeline-bar .bar-value{ font-size:18px; letter-spacing:.02em; padding-right:10px; }

.pipeline-bar.bar-1{ width:100%; background:linear-gradient(90deg,#5b8fd8,var(--jb-primary)); }
.pipeline-bar.bar-2{ width:88%; background:linear-gradient(90deg,var(--jb-primary),var(--jb-primary-dark)); }
.pipeline-bar.bar-3{ width:76%; background:linear-gradient(90deg,var(--jb-cyan),#33b8c8); }
.pipeline-bar.bar-4{ width:62%; background:linear-gradient(90deg,var(--jb-green),#2fbf82); }
.pipeline-bar.bar-5{ width:48%; background:linear-gradient(90deg,var(--jb-primary-dark),var(--jb-navy)); }

/* buttons */
.btn-primary,
.btn.btn-primary{
  background:var(--jb-primary) !important;
  border-color:var(--jb-primary) !important;
  box-shadow:0 3px 10px rgba(61,122,199,.25) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover{
  background:var(--jb-primary-dark) !important;
  border-color:var(--jb-primary-dark) !important;
}

.btn-outline-primary{
  color: var(--jb-primary) !important;
  border-color: rgba(61,122,199,.45) !important;
}
.btn-outline-primary:hover{
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color: #fff !important;
}

.btn-secondary{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.26) !important;
  color:#fff !important;
}
.btn-secondary:hover{
  background: rgba(255,255,255,.26) !important;
  border-color: rgba(255,255,255,.32) !important;
  color:#fff !important;
}

/* links & text helpers */
a{ color: rgba(255,255,255,.92); }
.app-main__inner a{ color: var(--jb-primary); }
.text-primary{ color: var(--jb-primary) !important; }
.bg-primary{ background: var(--jb-primary) !important; }
.text-success{ color: var(--jb-green) !important; }
.text-info{ color: var(--jb-cyan) !important; }
.text-warning{ color: var(--jb-orange) !important; }
.text-danger{ color: var(--jb-red) !important; }

/* Treat Bootstrap warning as the primary blue across the app */
.bg-warning{ background: var(--jb-primary) !important; }
.bg-warning.text-dark{ color:#fff !important; }

.btn-warning{
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color:#fff !important;
}
.btn-warning:hover,
.btn-warning:focus{
  background: var(--jb-primary-dark) !important;
  border-color: var(--jb-primary-dark) !important;
  color:#fff !important;
}

.btn-outline-warning{
  border-color: var(--jb-primary) !important;
  color: var(--jb-primary) !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus{
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color:#fff !important;
}

.alert-warning{
  background: rgba(61,122,199,.12) !important;
  border-color: rgba(61,122,199,.22) !important;
  color: var(--jb-text) !important;
}

/* forms */
.form-control,
.form-select{
  border-radius: 12px !important;
  border-color: rgba(30,45,71,.14) !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--jb-text) !important;
}
.form-control::placeholder{ color: rgba(30,45,71,.55) !important; }
.form-control:focus,
.form-select:focus{
  border-color: rgba(61,122,199,.75) !important;
  box-shadow: 0 0 0 .2rem rgba(61,122,199,.20) !important;
}

.form-label{ color: rgba(30,45,71,.85) !important; font-weight: 700; }

/* tables */
table thead th{
  color: var(--jb-text) !important;
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid rgba(30,45,71,.08) !important;
}
table tbody td{ color: var(--jb-text) !important; }
table td, table th{ border-color: rgba(30,45,71,.10) !important; }
table.table-hover tbody tr:hover{ background: rgba(61,122,199,.06) !important; }

/* badges */
.badge.bg-primary,
.badge.badge-primary{ background: var(--jb-primary) !important; }
.badge.bg-success,
.badge.badge-success{ background: var(--jb-green) !important; }
.badge.bg-info,
.badge.badge-info{ background: var(--jb-cyan) !important; }
.badge.bg-warning,
.badge.badge-warning{ background: var(--jb-primary) !important; color: #fff !important; }
.badge.bg-danger,
.badge.badge-danger{ background: var(--jb-red) !important; }

/* responsive */
@media (max-width: 576px){
  .app-main__inner{ padding:16px !important; }
  .kpi-value{ font-size:28px; }

  .sales-pipeline-grid{ grid-template-columns: 1fr; }
  .pipeline-legend{ flex-direction:row; flex-wrap:wrap; gap:10px 14px; }
  .pipeline-item{ font-size:13px; }

  .container-fluid{ padding: 12px; border-radius: 14px; }
}
/* ===== Additional Gradient Elements for All Pages ===== */

/* Gradient Buttons */
.btn-gradient-primary{
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 50%, var(--jb-primary-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(61,122,199,.35) !important;
  transition: all .3s ease;
}
.btn-gradient-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(61,122,199,.45) !important;
}

.btn-gradient-success{
  background: linear-gradient(135deg, #6ae5a8 0%, var(--jb-green) 50%, #2fbf82 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(79,214,156,.35) !important;
}
.btn-gradient-success:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(79,214,156,.45) !important;
}

.btn-gradient-warning{
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 50%, var(--jb-primary-dark) 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(61,122,199,.35) !important;
}
.btn-gradient-warning:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(61,122,199,.45) !important;
}

.btn-gradient-danger{
  background: linear-gradient(135deg, #ff6b6b 0%, var(--jb-red) 50%, #d32f2f 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(239,83,80,.35) !important;
}
.btn-gradient-danger:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(239,83,80,.45) !important;
}

.btn-gradient-info{
  background: linear-gradient(135deg, #6fe5f5 0%, var(--jb-cyan) 50%, #33b8c8 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(77,217,235,.35) !important;
}
.btn-gradient-info:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(77,217,235,.45) !important;
}

/* Gradient Headers for Tables & Cards */
.table-gradient-header thead{
  background: linear-gradient(90deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%) !important;
}
.table-gradient-header thead th{
  color: #fff !important;
  background: transparent !important;
  border-bottom: none !important;
}

.card-header-gradient{
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 48%, var(--jb-primary-dark) 100%) !important;
  color: #fff !important;
  border-bottom: none !important;
}

/* Gradient Badges */
.badge-gradient-primary{
  background: linear-gradient(90deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(61,122,199,.25);
}

.badge-gradient-success{
  background: linear-gradient(90deg, #6ae5a8 0%, var(--jb-green) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79,214,156,.25);
}

.badge-gradient-warning{
  background: linear-gradient(90deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(61,122,199,.25);
}

.badge-gradient-danger{
  background: linear-gradient(90deg, #ff6b6b 0%, var(--jb-red) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(239,83,80,.25);
}

.badge-gradient-info{
  background: linear-gradient(90deg, #6fe5f5 0%, var(--jb-cyan) 100%) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(77,217,235,.25);
}

/* Gradient Box/Panel */
.gradient-panel{
  background:
    radial-gradient(900px 520px at 20% 0%, rgba(255,255,255,.20) 0%, rgba(255,255,255,.08) 60%, rgba(255,255,255,.06) 100%),
    linear-gradient(135deg, rgba(91,143,216,.55) 0%, rgba(61,122,199,.32) 55%, rgba(44,90,149,.18) 100%);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--jb-radius);
  padding: 24px;
  box-shadow: var(--jb-shadow-md);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Gradient Alert Boxes */
.alert-gradient-primary{
  background: linear-gradient(135deg, rgba(91,143,216,.20) 0%, rgba(61,122,199,.10) 100%);
  border-left: 4px solid var(--jb-primary);
  color: var(--jb-text);
  border-radius: var(--jb-radius);
}

.alert-gradient-success{
  background: linear-gradient(135deg, rgba(79,214,156,.20) 0%, rgba(79,214,156,.10) 100%);
  border-left: 4px solid var(--jb-green);
  color: var(--jb-text);
  border-radius: var(--jb-radius);
}

.alert-gradient-warning{
  background: linear-gradient(135deg, rgba(91,143,216,.20) 0%, rgba(61,122,199,.10) 100%);
  border-left: 4px solid var(--jb-primary);
  color: var(--jb-text);
  border-radius: var(--jb-radius);
}

.alert-gradient-danger{
  background: linear-gradient(135deg, rgba(239,83,80,.20) 0%, rgba(239,83,80,.10) 100%);
  border-left: 4px solid var(--jb-red);
  color: var(--jb-text);
  border-radius: var(--jb-radius);
}

.alert-gradient-info{
  background: linear-gradient(135deg, rgba(77,217,235,.20) 0%, rgba(77,217,235,.10) 100%);
  border-left: 4px solid var(--jb-cyan);
  color: var(--jb-text);
  border-radius: var(--jb-radius);
}

/* Gradient Progress Bars */
.progress-gradient-primary .progress-bar{
  background: linear-gradient(90deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%) !important;
}

.progress-gradient-success .progress-bar{
  background: linear-gradient(90deg, #6ae5a8 0%, var(--jb-green) 100%) !important;
}

.progress-gradient-warning .progress-bar{
  background: linear-gradient(90deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%) !important;
}

.progress-gradient-danger .progress-bar{
  background: linear-gradient(90deg, #ff6b6b 0%, var(--jb-red) 100%) !important;
}

/* Gradient Text */
.text-gradient-primary{
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.text-gradient-success{
  background: linear-gradient(135deg, #6ae5a8 0%, #2fbf82 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

/* Gradient Icon Boxes */
.icon-box-gradient{
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 24px;
  box-shadow: var(--jb-shadow-md);
}

.icon-box-gradient.primary{
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%);
  color: #fff;
}

.icon-box-gradient.success{
  background: linear-gradient(135deg, #6ae5a8 0%, var(--jb-green) 100%);
  color: #fff;
}

.icon-box-gradient.warning{
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%);
  color: #fff;
}

.icon-box-gradient.danger{
  background: linear-gradient(135deg, #ff6b6b 0%, var(--jb-red) 100%);
  color: #fff;
}

.icon-box-gradient.info{
  background: linear-gradient(135deg, #6fe5f5 0%, var(--jb-cyan) 100%);
  color: #fff;
}

/* ===== BUTTON ENHANCEMENTS FOR BETTER VISIBILITY ===== */

/* btn-secondary - make it visible against blue background */
.btn-secondary {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--jb-primary) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}
.btn-secondary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--jb-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20) !important;
}

/* btn-light - better visibility on blue gradient */
.btn-light {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 2px solid rgba(255, 255, 255, 0.98) !important;
  color: var(--jb-primary) !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}
.btn-light:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--jb-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22) !important;
}

/* btn-outline-secondary - improve contrast */
.btn-outline-secondary {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 2px solid rgba(255, 255, 255, 0.75) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}
.btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--jb-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20) !important;
}

/* Inside white cards/headers, avoid white-on-white outline buttons */
.card .btn-outline-secondary,
.card-header.bg-white .btn-outline-secondary {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--jb-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card .btn-outline-secondary:hover,
.card-header.bg-white .btn-outline-secondary:hover {
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color: #ffffff !important;
}

/* Inside white cards/headers, avoid white-on-white outline primary buttons */
.card .btn-outline-primary,
.card-header.bg-white .btn-outline-primary {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  color: var(--jb-primary) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card .btn-outline-primary:hover,
.card-header.bg-white .btn-outline-primary:hover {
  background: var(--jb-primary) !important;
  border-color: var(--jb-primary) !important;
  color: #ffffff !important;
}

/* btn-primary - enhance visibility */
.btn-primary {
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 50%, var(--jb-primary-dark) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(61, 122, 199, 0.40) !important;
  transition: all 0.3s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(61, 122, 199, 0.50) !important;
}

/* btn-success - enhance visibility */
.btn-success {
  background: linear-gradient(135deg, #6ae5a8 0%, var(--jb-green) 50%, #2fbf82 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(79, 214, 156, 0.40) !important;
  transition: all 0.3s ease !important;
}
.btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(79, 214, 156, 0.50) !important;
}

/* btn-danger - enhance visibility */
.btn-danger {
  background: linear-gradient(135deg, #ff6b6b 0%, var(--jb-red) 50%, #d32f2f 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(239, 83, 80, 0.40) !important;
  transition: all 0.3s ease !important;
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(239, 83, 80, 0.50) !important;
}

/* btn-info - enhance visibility */
.btn-info {
  background: linear-gradient(135deg, #6fe5f5 0%, var(--jb-cyan) 50%, #29b5c6 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 18px rgba(77, 217, 235, 0.40) !important;
  transition: all 0.3s ease !important;
}
.btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(77, 217, 235, 0.50) !important;
}

/* btn-outline-danger */
.btn-outline-danger {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px solid var(--jb-red) !important;
  color: var(--jb-red) !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(239, 83, 80, 0.20) !important;
  transition: all 0.3s ease !important;
}
.btn-outline-danger:hover {
  background: var(--jb-red) !important;
  border-color: var(--jb-red) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(239, 83, 80, 0.40) !important;
}

/* btn-outline-primary */
.btn-outline-primary {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: all 0.3s ease !important;
}
.btn-outline-primary:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--jb-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20) !important;
}

/* All button sizes - ensure consistent styling */
.btn-sm {
  padding: 4px 10px !important;
  font-size: 0.80rem !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
}
.btn-lg {
  padding: 10px 22px !important;
  font-size: 0.98rem !important;
  border-radius: 12px !important;
  line-height: 1.25 !important;
}
.btn {
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
  border-radius: 9px !important;
  line-height: 1.2 !important;
}

/* Chart action buttons - improve visibility */
.chart-action-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10) !important;
}
.chart-action-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  color: var(--jb-primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18) !important;
}

/* Text utilities - improve visibility against blue gradient */
.text-muted {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Small/helper text - ensure readability */
.form-text.text-muted,
small.text-muted {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 500 !important;
}

/* Inside white cards, use darker muted text */
.card .text-muted,
.chart-card .text-muted,
.kpi-card .text-muted {
  color: var(--jb-muted) !important;
}

/* ===== BADGE COMPONENTS - IMPROVE VISIBILITY ===== */
.badge {
  font-weight: 700 !important;
  border-radius: 8px !important;
  padding: 6px 14px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
}

.badge.bg-light {
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--jb-text) !important;
  border: 2px solid rgba(30, 45, 71, 0.15) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.badge.bg-success {
  background: linear-gradient(135deg, #6ae5a8 0%, var(--jb-green) 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

.badge.bg-danger {
  background: linear-gradient(135deg, #ff6b6b 0%, var(--jb-red) 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

.badge.bg-primary {
  background: linear-gradient(135deg, var(--jb-primary-light) 0%, var(--jb-primary) 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

.badge.bg-info {
  background: linear-gradient(135deg, #6fe5f5 0%, var(--jb-cyan) 100%) !important;
  color: #ffffff !important;
  border: none !important;
}

/* ===== ALERT COMPONENTS - IMPROVE VISIBILITY ===== */
.alert {
  border-radius: 12px !important;
  border: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
  font-weight: 600 !important;
  padding: 16px 20px !important;
}

.alert-success {
  background: rgba(79, 214, 156, 0.25) !important;
  color: #0d5738 !important;
  border-left: 5px solid var(--jb-green) !important;
}

.alert-danger {
  background: rgba(239, 83, 80, 0.25) !important;
  color: #7a1917 !important;
  border-left: 5px solid var(--jb-red) !important;
}

.alert-info {
  background: rgba(77, 217, 235, 0.25) !important;
  color: #0c4e5c !important;
  border-left: 5px solid var(--jb-cyan) !important;
}

.alert-light {
  background: rgba(255, 255, 255, 0.92) !important;
  color: var(--jb-text) !important;
  border-left: 5px solid var(--jb-primary) !important;
}

/* ===== PAGE HEADERS & TITLES - ENSURE VISIBILITY ===== */
.dashboard-title {
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.20) !important;
  font-weight: 800 !important;
}

.dashboard-subtitle {
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  font-weight: 500 !important;
}

/* Inside white cards or chart cards, keep original card text color for important elements */
.card .kpi-value,
.chart-card .kpi-value,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.chart-card h1, .chart-card h2, .chart-card h3, .chart-card h4, .chart-card h5, .chart-card h6,
.card .chart-title,
.chart-card .chart-title {
  color: var(--jb-text) !important;
}

/* Table inside cards - ensure good contrast */
.card table,
.chart-card table {
  background: rgba(255, 255, 255, 0.60);
}

.card table th,
.chart-card table th {
  background: rgba(61, 122, 199, 0.08);
  font-weight: 700;
  color: var(--jb-text);
}

.card table tbody tr:hover,
.chart-card table tbody tr:hover {
  background: rgba(61, 122, 199, 0.05);
}
/* ===== PROFESSIONAL TABLE IMPROVEMENTS ===== */

/* Table styling for better appearance */
.table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: auto;
}

.table thead th {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid rgba(61, 122, 199, 0.15) !important;
  color: var(--jb-text);
  background: rgba(61, 122, 199, 0.06) !important;
  padding: 12px 8px !important;
  white-space: nowrap;
  vertical-align: middle;
}

.table tbody td {
  padding: 12px 8px !important;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  color: var(--jb-text);
  font-size: 0.875rem;
  line-height: 1.4;
}

.table tbody tr {
  transition: all 0.2s ease;
}

.table tbody tr:hover {
  background: rgba(61, 122, 199, 0.04) !important;
  transform: scale(1.001);
}

.table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Compact text in table cells */
.table tbody td .fw-bold {
  font-size: 0.9rem;
  margin-bottom: 2px;
}

.table tbody td small {
  font-size: 0.75rem;
  display: block;
  margin-top: 2px;
}

/* Badge in tables - more compact */
.table .badge {
  font-size: 0.75rem !important;
  padding: 4px 10px !important;
  font-weight: 600 !important;
  white-space: nowrap;
}

/* Button group improvements for table actions */
.btn-group .btn-sm {
  padding: 6px 10px !important;
  min-width: 36px;
  font-size: 14px;
}

.btn-group .btn-sm i {
  font-size: 15px;
  line-height: 1;
  margin: 0;
}

/* Action column buttons - compact and clean */
.table .btn-sm {
  padding: 6px 10px !important;
  min-width: 36px;
  font-size: 14px !important;
  border-radius: 6px !important;
}

.table .btn-sm i {
  font-size: 15px;
  margin: 0;
  line-height: 1;
}

/* Horizontal action buttons with minimal gap */
.table td.text-center .btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table td.text-center .btn-sm.me-1 {
  margin-right: 3px !important;
}

/* Search input styling */
.input-group .form-control {
  border-radius: 8px 0 0 8px !important;
  border-right: none !important;
  padding: 8px 14px !important;
  font-size: 0.9rem !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--jb-text) !important;
  border: 2px solid rgba(61, 122, 199, 0.20) !important;
}

.input-group .form-control:focus {
  background: #ffffff !important;
  border-color: var(--jb-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(61, 122, 199, 0.15) !important;
}

.input-group .input-group-text {
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
  background: rgba(255, 255, 255, 0.95) !important;
  color: var(--jb-primary) !important;
  border: 2px solid rgba(61, 122, 199, 0.20) !important;
  border-left: none !important;
  padding: 8px 14px !important;
}

.input-group .form-control:focus + .input-group-text {
  border-color: var(--jb-primary) !important;
  background: #ffffff !important;
}

/* Card headers with search */
.caAvatar icons in tables */
.avatar-icon-wrapper {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(61, 122, 199, 0.10);
  flex-shrink: 0;
}

.avatar-icon {
  font-size: 18px;
  color: var(--jb-primary);
}

/* Card content - remove excess padding for tables */
.card-body.p-0 {
  padding: 0 !important;
}

/* Card headers with search - responsive */
.card-header .row {
  align-items: center;
}

.card-header h5 {
  margin-bottom: 4px;
  font-weight: 800;
  color: var(--jb-text);
  font-size: 1.15rem;
}

.card-header small {
  font-size: 0.8rem;
  font-weight: 500;
}

/* Responsive card header */
@media (max-width: 768px) {
  .card-header .row {
    gap: 12px;
  }
  
  .card-header .col-md-6 {
    width: 100%;
  }
  
  .card-header .d-flex {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }
  
  .card-header .input-group {
    max-width: 100% !important;
    flex: 1 1 auto;
  }
  
  .card-header .btn {
    white-space: nowrap;
  }
}

/* Table wrapper improvements */
.table-responsive {
  border-radius: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Ensure table content doesn't overflow */
.table-responsive::-webkit-scrollbar {
  height: 8px;
}

.table-responsive::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb {
  background: rgba(61, 122, 199, 0.30);
  border-radius: 4px;
}

.table-responsive::-webkit-scrollbar-thumb:hover {
  background: rgba(61, 122, 199, 0.50);
}

/* Avatar icons in tables */
.avatar-icon-wrapper {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(61, 122, 199, 0.10);
  flex-shrink: 0;
}

.avatar-icon {
  font-size: 18px;
  color: var(--jb-primary);
}

/* Table responsiveness */
.table-responsive {
  border-radius: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Ensure table fits screen on smaller devices */
@media (max-width: 1400px) {
  .table {
    font-size: 0.85rem;
  }
  
  .table thead th {
    font-size: 0.8rem;
    padding: 10px 8px !important;
  }
  
  .table tbody td {
    padding: 10px 8px !important;
  }
}

@media (max-width: 768px) {
  .table {
    font-size: 0.8rem;
    min-width: 100%;
  }
  
  .table thead th,
  .table tbody td {
    padding: 8px 6px !important;
  }
}

/* Empty state styling */
.table tbody td[colspan] {
  padding: 40px 20px !important;
}

/* Professional row striping (subtle) */
.table tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.01);
}

/* Action buttons - horizontal layout with proper spacing */
.table .btn-sm.me-1 {
  margin-right: 4px !important;
}

.table td .btn-sm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* Ensure action column stays compact */
.table th:last-child,
.table td:last-child {
  width: 100px;
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
}

/* Button group horizontal layout */
.btn-group {
  display: inline-flex !important;
  gap: 4px;
}

.btn-group .btn {
  margin: 0 !important;
}