:root{
  --sidebarW: 280px;
  --sidebarWC: 86px;
  --topbarH: 72px;
  --controlH: 38px;
  --controlRadius: 14px;

  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface2:#fbfdff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;

  /* GREEN THEME */
  --brand:#16a34a;
  --brand2:#22c55e;
  --brandSoft: rgba(34,197,94,.14);
  --brandSoft2: rgba(22,163,74,.10);
  --brandRing: rgba(34,197,94,.18);

  --radius:18px;
  --shadow: 0 12px 30px rgba(15, 23, 42, .08);
  --flyoutW: 260px;
}

html[data-theme="dark"]{
  --bg:#07120b;
  --surface:#071a10;
  --surface2:#0a2215;
  --text:#e7f5ec;
  --muted:#9bb8a6;
  --line:rgba(155,184,166,.18);

  --brand:#22c55e;
  --brand2:#16a34a;
  --brandSoft: rgba(34,197,94,.14);
  --brandSoft2: rgba(22,163,74,.10);
  --brandRing: rgba(34,197,94,.18);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* Backdrop */
.app-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(15,23,42,.45);
  z-index:1019;
}
.app-backdrop.show{ display:block; }

/* Sidebar */
.sidebar{
  position:fixed;
  left:0; top:0;
  width: var(--sidebarW);
  height:100vh;
  background: var(--surface);
  border-right:1px solid var(--line);
  z-index:1030;
  display:flex;
  flex-direction:column;
  transition: width .2s ease, transform .2s ease;
  overflow: visible;
}
.sidebar.is-collapsed{ width: var(--sidebarWC); }

.sidebar.is-collapsed .brand-text,
.sidebar.is-collapsed .sidebar-section,
.sidebar.is-collapsed .menu-text,
.sidebar.is-collapsed .submenu-caret{ display:none !important; }

.sidebar.is-collapsed .nav-link{
  justify-content:center;
  padding:12px 0;
  gap:0;
}
.sidebar.is-collapsed .submenu{ display:none !important; }

.sidebar-header{
  padding:14px 14px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.brand-badge{
  width:44px;height:44px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  display:grid; place-items:center;
  color:#fff;
  font-weight:900;
  box-shadow: 0 10px 20px rgba(34,197,94,.22);
}
.brand-title{ font-weight:950; letter-spacing:.2px; }
.brand-sub{ color:var(--muted); font-size:.86rem; }

.btn-icon{
  border:1px solid var(--line);
  background: var(--surface);
  border-radius:14px;
  padding:8px 10px;
  color: var(--text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
}
.btn-icon:hover{ background: var(--surface2); }

.btn-pill{
  border:1px solid var(--line);
  background: var(--surface);
  border-radius:999px;
  padding:8px 12px;
  font-weight:850;
  color: var(--text);
  display:flex;
  align-items:center;
  gap:8px;
}
.btn-pill:hover{ background: var(--surface2); }

.badge-green{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
}

.sidebar-body{
  padding:10px 10px 14px 10px;
  overflow:auto;
  flex:1;
}
.sidebar-section{
  padding:12px 10px 6px 10px;
  color:var(--muted);
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.16em;
}

.nav-menu .nav-item{ margin-bottom:6px; position:relative; }

.nav-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  color:var(--text);
  text-decoration:none;
  font-weight:850;
  border:1px solid transparent;
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  cursor:pointer;
}
.nav-link:hover{
  background: color-mix(in srgb, var(--surface2) 60%, var(--bg));
  transform: translateY(-1px);
}
.nav-link .bi{ color:var(--muted); font-size:1.08rem; }
.nav-link.active{
  background: linear-gradient(135deg, var(--brandSoft), var(--brandSoft2));
  border-color: color-mix(in srgb, var(--brand) 28%, transparent);
}
.nav-link.active .bi{ color: var(--brand); }

.submenu-caret{ margin-left:auto; color:var(--muted); transition: transform .18s ease; }
.nav-link[aria-expanded="true"] .submenu-caret{ transform: rotate(180deg); }

.submenu{ display:none; padding-left:10px; margin:6px 0 10px 0; }
.submenu .nav-link{ padding:9px 12px; font-weight:760; }
.submenu .submenu{
  border-left:2px dashed rgba(100,116,139,.25);
  margin-left:8px;
  padding-left:10px;
}

.sidebar-footer{
  padding:12px 14px;
  border-top:1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, var(--bg));
  position:sticky;
  bottom:0;
}
.mini-user{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 10px;
  border-radius:16px;
  border:1px solid var(--line);
  background: var(--surface);
}
.mini-avatar{
  width:42px;height:42px;
  border-radius:16px;
  border:1px solid var(--line);
  background: color-mix(in srgb, var(--surface2) 70%, var(--bg));
  display:grid; place-items:center;
}
.mini-name{ font-weight:950; line-height:1.1; }
.mini-role{ color:var(--muted); font-size:.86rem; }

.sidebar.is-collapsed .sidebar-footer{ padding:12px 10px; }
.sidebar.is-collapsed .mini-user{ justify-content:center; padding:10px 0; }
.sidebar.is-collapsed .mini-meta{ display:none; }

/* Flyout */
.flyout{
  position:absolute;
  top:0;
  left: calc(var(--sidebarWC) + 12px);
  width: var(--flyoutW);
  background: var(--surface);
  border:1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding:10px;
  display:none;
  z-index: 2000;
}
.flyout .flyout-title{
  font-weight:950;
  padding:8px 10px 6px;
}
.flyout .flyout-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.flyout .fly-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:14px;
  text-decoration:none;
  color: var(--text);
  font-weight:800;
  border:1px solid transparent;
}
.flyout .fly-link:hover{
  background: color-mix(in srgb, var(--surface2) 60%, var(--bg));
}
.flyout .fly-link .bi{ color: var(--muted); }

/* Main layout */
.main{
  margin-left: var(--sidebarW);
  min-height:100vh;
  transition: margin-left .2s ease;
}
.sidebar.is-collapsed ~ .main{ margin-left: var(--sidebarWC); }

/* Topbar fixed */
.topbar{
  position:fixed;
  top:0;
  left: var(--sidebarW);
  width: calc(100% - var(--sidebarW));
  height: var(--topbarH);
  z-index:1050; /* clickable */
  border-bottom:1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(12px);
  transition: left .2s ease, width .2s ease;
}
.sidebar.is-collapsed ~ .main .topbar{
  left: var(--sidebarWC);
  width: calc(100% - var(--sidebarWC));
}
.topbar-inner{
  height: var(--topbarH);
  padding: 12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:relative;
  z-index:2;
}
.topbar-left, .topbar-right{ display:flex; align-items:center; gap:10px; }
.topbar-left{ min-width:0; flex:1; position:relative; z-index:2; }
.topbar-right{ position:relative; }

.topbar-profile{
  position: relative;
}

.topbar-profile .profile-trigger::after{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform .15s ease;
}

.topbar-profile.is-open .profile-trigger::after{
  transform: rotate(225deg) translateY(-1px);
}

.profile-dropdown-menu{
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2000;
  width: 240px;
  max-width: calc(100vw - 24px);
  padding: 8px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.topbar-profile.is-open .profile-dropdown-menu{
  display: block;
}

.profile-dropdown-head{
  padding: 10px 12px 6px;
}

.profile-dropdown-name{
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}

.profile-dropdown-role{
  margin-top: 4px;
  font-size: .86rem;
  color: var(--muted);
}

.profile-dropdown-separator{
  height: 1px;
  margin: 8px 0;
  background: var(--line);
}

.profile-dropdown-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}

.profile-dropdown-item:hover,
.profile-dropdown-item:focus{
  background: color-mix(in srgb, var(--surface2) 60%, var(--bg));
  color: var(--text);
}

.profile-dropdown-item .bi{
  color: var(--muted);
}

.profile-dropdown-item-danger{
  color: var(--bs-danger);
}

.profile-dropdown-item-danger .bi{
  color: inherit;
}

/* Search */
.topbar-search{
  position:relative;
  max-width:680px;
  flex:1;
  min-width:220px;
  z-index:1;
}
.topbar-search .bi{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events:none;
}
.topbar-search input{
  padding-left:38px;
  height:44px;
  border-radius:16px;
}

.form-control {
  height:40px;
  border-radius:16px;	
}
/* Premium inputs */
.form-control-premium,
.form-select.form-control-premium{
  background: var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  color: var(--text);
}
html[data-theme="dark"] .form-control-premium,
html[data-theme="dark"] .form-select.form-control-premium{
  background: rgba(10,34,21,.55);
  border-color: rgba(155,184,166,.18);
  color: var(--text);
}
.form-control-premium:focus{
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 .22rem var(--brandRing);
}

/* Mobile Search overlay */
.mobile-search{
  display:none;
  position:absolute;
  left:0; right:0;
  top: var(--topbarH);
  background: var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow: 0 12px 24px rgba(15,23,42,.08);
  z-index:1051;
}
.mobile-search.show{ display:block; }
.mobile-search-inner{ padding: 12px 14px; }
.mobile-search-input{ position:relative; }
.mobile-search-input .bi.bi-search{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events:none;
}
.mobile-search-input input{
  padding-left:38px;
  padding-right:44px;
  height:42px;
}
.mobile-search-input #btnSearchClose{
  position:absolute;
  right:6px;
  top:50%;
  transform: translateY(-50%);
}
.mobile-search-hint{
  margin-top:8px;
  color: var(--muted);
  font-size:.88rem;
}

.content{
  padding: 18px;
  padding-top: calc(var(--topbarH) + 18px);
}

/* Mobile */
@media (max-width: 991.98px){
  .sidebar{
    transform: translateX(-110%);
    box-shadow: var(--shadow);
  }
  .sidebar.is-open{ transform: translateX(0); }

  .main{ margin-left:0 !important; }
  .topbar{ left:0 !important; width:100% !important; }
}

/* ensure buttons are clickable */
#btnSidebarMobile,
#btnSidebarToggle,
#btnSearchMobile,
#btnTheme{
  position:relative;
  z-index:10;
  pointer-events:auto !important;
}
#btnSidebarMobile i,
#btnSidebarToggle i,
#btnSearchMobile i,
#btnTheme i{
  pointer-events:none;
}

  /* keep tiny overrides only */
  .modal-header{ padding:.9rem 1rem; }
  .modal-footer{ padding:.9rem 1rem; }
  .dataTables_wrapper{ padding-bottom:0; }

  /* match your premium theme */
  .page-title{ font-weight:950; letter-spacing:.2px; margin:0; }
  .page-sub{ color:var(--muted); font-size:.92rem; }

  .card-soft{
    background: var(--surface);
    border:1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 10px 24px rgba(15,23,42,.05);
  }

  .toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
  }
  .toolbar .left{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  }
  .toolbar .right{ display:flex; gap:10px; align-items:center; }

  .btn-premium{
    min-height: var(--controlH);
    height: var(--controlH);
    border-radius: var(--controlRadius);
    font-weight: 850;
    padding:0 12px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    line-height:1.2;
    white-space:nowrap;
  }
  .btn-premium i,
  .btn-premium span{ line-height:1; }
  .btn-brand{
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    border:0;
    color:#fff;
    box-shadow: 0 12px 22px rgba(34,197,94,.20);
  }
  .btn-brand:hover{ filter: brightness(.98); color:#fff; }
  .btn-soft{
    background: color-mix(in srgb, var(--surface2) 65%, var(--bg));
    border:1px solid var(--line);
    color: var(--text);
  }
  .btn-soft:hover{ background: color-mix(in srgb, var(--surface2) 80%, var(--bg)); }

  /* inputs to match */
  .form-control, .form-select{
    border-radius:var(--controlRadius);
    border:1px solid var(--line);
  }
  input.form-control,
  select.form-control,
  div.form-control,
  .form-select{
    min-height: var(--controlH);
    height: var(--controlH);
  }
  .form-control:focus, .form-select:focus{
    border-color: color-mix(in srgb, var(--brand) 55%, transparent);
    box-shadow: 0 0 0 .22rem var(--brandRing);
  }

  /* chosen alignment */
  .chosen-container{ width:100% !important; }
  .chosen-container-single .chosen-single{
    min-height: var(--controlH);
    height: var(--controlH);
    border-radius: var(--controlRadius);
    border:1px solid var(--line);
    background: var(--surface);
    display:flex;
    align-items:center;
    padding: 0 12px;
    box-shadow:none;
  }
  .chosen-container-single .chosen-single div b{ background-position: 0 8px; }
  .chosen-container-active .chosen-single{
    border-color: color-mix(in srgb, var(--brand) 55%, transparent);
    box-shadow: 0 0 0 .22rem var(--brandRing);
  }
  .chosen-container .chosen-drop{
    border-radius: var(--controlRadius);
    border:1px solid var(--line);
    overflow:hidden;
  }

  /* DataTable action icon */
  .dt-action{
    width:36px;height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius: 12px;
    border:1px solid var(--line);
    background: var(--surface);
    cursor:pointer;
  }
  .dt-action:hover{
    background: color-mix(in srgb, var(--surface2) 70%, var(--bg));
  }
  .dt-action i{ color: var(--brand); font-size: 1.05rem; }

  /* modal "sheet" look */
  .modal-content{
    border-radius: 22px;
    border:1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .modal-title{
    font-weight: 950;
    letter-spacing:.2px;
  }
  .modal .section-title{
    font-weight: 950;
    letter-spacing:.12em;
    color: var(--muted);
    font-size:.72rem;
    margin-bottom:10px;
  }
  
  /* =========================================================
   ✅ ADD-ON PATCH: GREEN PRIMARY + PREMIUM TABS + ACCORDION
   Put this at the VERY BOTTOM of your CSS
   ========================================================= */

/* 1) ✅ FORCE BOOTSTRAP PRIMARY TO GREEN (works on BS5) */
:root{
  --bs-primary: var(--brand) !important;
  --bs-primary-rgb: 22,163,74 !important;
  --bs-link-color: var(--brand) !important;
  --bs-link-hover-color: color-mix(in srgb, var(--brand) 85%, #000) !important;
  --bs-focus-ring-color: var(--brandRing) !important;
}
html[data-theme="dark"]{
  --bs-primary: var(--brand) !important;
  --bs-primary-rgb: 34,197,94 !important;
  --bs-link-color: var(--brand) !important;
  --bs-link-hover-color: color-mix(in srgb, var(--brand) 85%, #fff) !important;
  --bs-focus-ring-color: var(--brandRing) !important;
}

/* Buttons + common primary surfaces */
.btn-primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border: 0 !important;
  box-shadow: 0 12px 22px rgba(34,197,94,.18);
  font-weight: 850;
}
.btn-primary:hover{ filter: brightness(.98); }

.btn-outline-primary{
  border-color: color-mix(in srgb, var(--brand) 65%, transparent) !important;
  color: var(--brand) !important;
  font-weight: 850;
}
.btn-outline-primary:hover{
  background: linear-gradient(135deg, var(--brandSoft), var(--brandSoft2)) !important;
  border-color: color-mix(in srgb, var(--brand) 35%, transparent) !important;
  color: var(--text) !important;
}

/* Focus ring everywhere */
.btn:focus,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus{
  box-shadow: 0 0 0 .22rem var(--brandRing) !important;
  border-color: color-mix(in srgb, var(--brand) 55%, transparent) !important;
}

/* Form check (checkbox/radio) primary */
.form-check-input:checked{
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* Pagination + active states */
.page-item.active .page-link{
  background: linear-gradient(135deg, var(--brand), var(--brand2)) !important;
  border-color: transparent !important;
  color: #fff !important;
}

/* 2) ✅ PREMIUM PILL TABS (fix spacing + pill active) */
/* This targets your onboarding tabs #myTab */
#myTab.nav-tabs{
  border-bottom: 1px solid var(--line) !important;
  gap: 10px;
  padding: 10px 10px 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface2) 65%, var(--bg));
}

/* remove default bootstrap underline/box */
#myTab.nav-tabs .nav-link{
  border: 1px solid transparent !important;
  margin: 0 !important;
}

/* tab style */
#myTab .nav-link{
  border-radius: 16px !important;
  padding: 12px 16px !important;
  font-weight: 950 !important;
  color: var(--text) !important;
  background: transparent !important;
  transition: all .15s ease;
  white-space: nowrap;
}

/* hover */
#myTab .nav-link:hover{
  background: color-mix(in srgb, var(--surface2) 60%, var(--bg)) !important;
}

/* active pill */
#myTab .nav-link.active{
  background: linear-gradient(135deg, var(--brandSoft), var(--brandSoft2)) !important;
  border-color: color-mix(in srgb, var(--brand) 25%, transparent) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 22px rgba(34,197,94,.10);
}

/* Make tab body feel premium */
#customerInfo .card.card-body{
  border-radius: 22px !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.04) !important;
}

/* Mobile: allow horizontal scroll on tabs */
@media (max-width: 991.98px){
  #myTab.nav-tabs{
    overflow:auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}

/* 3) ✅ ACCORDION HEADER + CARET ANIMATION */
.accordion-item{
  border:1px solid var(--line) !important;
  border-radius: 18px !important;
  overflow:hidden;
  margin-bottom: 12px;
  box-shadow: 0 10px 20px rgba(15,23,42,.03);
}

/* header button */
.accordion-button{
  background: color-mix(in srgb, var(--surface2) 70%, var(--bg)) !important;
  color: var(--text) !important;
  font-weight: 950 !important;
  padding: 16px 16px !important;
  border:0 !important;
  box-shadow:none !important;
}

/* expanded state */
.accordion-button:not(.collapsed){
  background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(22,163,74,.10)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent) !important;
}

/* caret animation (smooth + green-ish) */
.accordion-button::after{
  transition: transform .18s ease !important;
  filter: hue-rotate(85deg) saturate(1.2);
}
.accordion-button:not(.collapsed)::after{
  transform: rotate(-180deg) !important;
}

/* body */
.accordion-body{
  background: var(--surface) !important;
  padding: 18px 16px !important;
}