/* ==========================================================================
   FXB THEME — member-area styling for Guru Traders
   --------------------------------------------------------------------------
   Flat, clean amber-fintech look ported from the reference app
   (E:\wep_apps\sakthinew). COLOR comes entirely from css/fxb-tokens.css
   (the HSL token engine) — this file only maps the Bootstrap admin template's
   classes onto those tokens, so every palette / light-medium-dark mode picked
   in the appearance panel recolors the whole dashboard. Linked LAST on each
   member page so it wins without restructuring markup.
   Admin (/admin) does not link this file and is unaffected.
   ========================================================================== */

/* ---------- Base ---------------------------------------------------------- */
body {
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: hsl(var(--foreground));
}
h1, h2, h3, h4, h5, h6,
.card-title, .page-title { color: hsl(var(--foreground)); }
a { color: hsl(var(--primary)); }
a:hover { color: hsl(var(--accent-foreground)); }

/* Member canvas — flat token surface (no aurora) */
.page-wrapper {
  position: relative;
  min-height: 100vh;
  background: hsl(var(--background));
}
.page-breadcrumb { padding-top: 18px; }
.page-breadcrumb .page-title { font-weight: 700; letter-spacing: -.01em; }
.breadcrumb { background: transparent; }
.breadcrumb-item.active { color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   CARDS — solid surface, subtle shadow
   ========================================================================== */
.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.04), 0 1px 3px 0 hsl(var(--foreground) / 0.06);
  animation: fxb-rise .4s ease both;
}
.card .card-header {
  background: transparent;
  border-bottom: 1px solid hsl(var(--border));
  font-weight: 600;
  color: hsl(var(--card-foreground));
}
.card-title { font-weight: 700; }
.card-hover { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px -8px hsl(var(--foreground) / 0.18), 0 2px 4px -2px hsl(var(--foreground) / 0.1);
  border-color: hsl(var(--primary) / 0.4);
}
@keyframes fxb-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  border-radius: var(--radius);
  font-weight: 600;
  letter-spacing: .01em;
  padding: .55rem 1.15rem;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary,
.btn-cyan {
  background: hsl(var(--primary));
  border: 1px solid hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 8px 24px -8px hsl(var(--primary) / 0.4), 0 2px 4px -2px hsl(var(--primary) / 0.2);
}
.btn-primary:hover,
.btn-cyan:hover { filter: brightness(1.05); color: hsl(var(--primary-foreground)); }

.btn-success { background: hsl(var(--success)); border-color: hsl(var(--success)); color: hsl(var(--success-foreground)); }
.btn-warning { background: hsl(var(--warning)); border-color: hsl(var(--warning)); color: hsl(var(--warning-foreground)); }
.btn-danger  { background: hsl(var(--destructive)); border-color: hsl(var(--destructive)); color: hsl(var(--destructive-foreground)); }
.btn-info    { background: hsl(var(--info)); border-color: hsl(var(--info)); color: hsl(var(--info-foreground)); }
.btn-secondary { background: hsl(var(--secondary)); border-color: hsl(var(--border)); color: hsl(var(--secondary-foreground)); }
.btn-outline-primary { color: hsl(var(--primary)); border-color: hsl(var(--primary)); background: transparent; }
.btn-outline-primary:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-sm { padding: .32rem .7rem; border-radius: calc(var(--radius) - 2px); }

/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */
.form-control,
.form-control-select,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="number"].form-control {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  padding: .6rem .9rem;
  height: auto;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder { color: hsl(var(--muted-foreground)); }
.form-control:hover,
.form-control-select:hover,
select.form-control:hover { border-color: hsl(var(--primary) / 0.45); }
.form-control:focus,
.form-control-select:focus,
select.form-control:focus,
textarea.form-control:focus {
  background-color: hsl(var(--card));
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 .2rem hsl(var(--ring) / 0.2);
  outline: none;
}
.form-group { margin-bottom: 1.1rem; }
.form-group label,
label.control-label { font-weight: 600; color: hsl(var(--muted-foreground)); font-size: .82rem; letter-spacing: .01em; margin-bottom: .35rem; }

/* Custom select chevron (no native chrome) */
select,
select.form-control,
.form-control-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 13px;
  padding-right: 2.4rem;
  cursor: pointer;
}
:root[data-theme='dark'] select,
:root[data-theme='medium'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
select::-ms-expand { display: none; }
select option { color: #111; background: #fff; }

/* ==========================================================================
   TOPBAR — light glass header
   ========================================================================== */
.topbar,
.topbar .navbar,
[data-navbarbg="skin5"] .navbar {
  background: hsl(var(--background) / 0.75) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid hsl(var(--border));
  box-shadow: none;
}
.topbar .navbar-brand .logo-text { color: hsl(var(--foreground)); font-weight: 700; letter-spacing: .01em; }
.topbar .navbar-brand .logo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: hsl(var(--primary) / 0.12);
  border-radius: 12px;
  padding: 5px;
}
.topbar .navbar-brand .logo-icon img { display: block; }
.topbar .nav-link { color: hsl(var(--muted-foreground)) !important; }
.topbar .nav-link:hover { color: hsl(var(--foreground)) !important; }
.topbar .pro-pic img { border: 2px solid hsl(var(--primary) / 0.5); }

/* User dropdown */
.dropdown-menu.user-dd,
.topbar .dropdown-menu {
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 24px -8px hsl(var(--foreground) / 0.18), 0 2px 4px -2px hsl(var(--foreground) / 0.1);
  padding: 8px;
}
.dropdown-menu .dropdown-item {
  border-radius: calc(var(--radius) - 2px);
  padding: .55rem .8rem;
  font-weight: 500;
  color: hsl(var(--popover-foreground));
  transition: background-color .12s ease, color .12s ease;
}
.dropdown-menu .dropdown-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.dropdown-divider { border-top-color: hsl(var(--border)); }

/* ==========================================================================
   SIDEBAR / MENU
   ========================================================================== */
.left-sidebar,
[data-sidebarbg="skin5"] {
  background: hsl(var(--sidebar)) !important;
  border-right: 1px solid hsl(var(--sidebar-border));
  box-shadow: none;
}
.sidebar-nav ul .sidebar-item .sidebar-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: hsl(var(--sidebar-foreground));
  border-radius: var(--radius);
  margin: 3px 12px;
  padding: 10px 14px;
  font-weight: 500;
  transition: background-color .16s ease, color .16s ease;
}
.sidebar-nav ul .sidebar-item .sidebar-link i {
  color: hsl(var(--muted-foreground));
  font-size: 1.05rem;
  transition: color .16s ease;
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.sidebar-nav ul .sidebar-item .sidebar-link:hover i { color: hsl(var(--primary)); }

/* Active state — primary lozenge with warm glow */
.sidebar-nav ul .sidebar-item .sidebar-link.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 6px 18px -6px hsl(var(--primary) / 0.55), inset 0 1px 0 hsl(0 0% 100% / 0.18);
}
.sidebar-nav ul .sidebar-item .sidebar-link.active i { color: hsl(var(--primary-foreground)); }

/* Sidebar "Dashboard" button (uses .btn-cyan) */
.sidebar-nav .sidebar-item .btn-cyan {
  margin: 3px 12px;
  width: calc(100% - 24px) !important;
  padding: 11px 14px;
  border-radius: var(--radius);
}

/* Submenus */
.sidebar-nav .first-level { padding: 2px 0 6px; }
.sidebar-nav .first-level .sidebar-link {
  font-size: .82rem;
  margin: 2px 12px 2px 22px;
  padding: 8px 12px;
}
.sidebar-nav .has-arrow::after { border-color: hsl(var(--muted-foreground)); }
.sidebar-nav .hide-menu { font-size: .85rem; }

/* ==========================================================================
   DASHBOARD KPI BOXES  (memindex 8 cards — .box.bg-*)
   ========================================================================== */
.card-hover:has(> .box) { border: none; overflow: hidden; box-shadow: none; background: transparent; }

.box {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  padding: 22px 18px;
  min-height: 158px;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.04), 0 1px 3px 0 hsl(var(--foreground) / 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.box:hover { box-shadow: 0 8px 24px -8px hsl(var(--foreground) / 0.18); border-color: hsl(var(--primary) / 0.4); }
/* tone accent stripe along the bottom */
.box::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.05));
}
/* icon chip */
.box h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  font-size: 1.5rem;
  border-radius: 14px;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}
.box h6 {
  margin: 0;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: hsl(var(--muted-foreground));
}
.box h6:last-of-type {
  margin-top: 5px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
  color: hsl(var(--card-foreground));
}
/* tone mapping: stripe + icon tint (background no longer fully colored) */
.box.bg-cyan::after    { background: linear-gradient(90deg, hsl(var(--primary)), hsl(var(--primary) / 0.05)); }
.box.bg-success::after { background: linear-gradient(90deg, hsl(var(--success)), hsl(var(--success) / 0.05)); }
.box.bg-warning::after { background: linear-gradient(90deg, hsl(var(--warning)), hsl(var(--warning) / 0.05)); }
.box.bg-danger::after  { background: linear-gradient(90deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.05)); }
.box.bg-info::after    { background: linear-gradient(90deg, hsl(var(--info)), hsl(var(--info) / 0.05)); }
.box.bg-cyan    { background: hsl(var(--card)) !important; }
.box.bg-success { background: hsl(var(--card)) !important; }
.box.bg-warning { background: hsl(var(--card)) !important; }
.box.bg-danger  { background: hsl(var(--card)) !important; }
.box.bg-info    { background: hsl(var(--card)) !important; }
.box.bg-success h1 { background: hsl(var(--success) / 0.12); color: hsl(var(--success)); }
.box.bg-warning h1 { background: hsl(var(--warning) / 0.14); color: hsl(var(--warning)); }
.box.bg-danger  h1 { background: hsl(var(--destructive) / 0.12); color: hsl(var(--destructive)); }
.box.bg-info    h1 { background: hsl(var(--info) / 0.12); color: hsl(var(--info)); }
.box .progress {
  width: 100%;
  background: hsl(var(--muted));
  border-radius: 20px;
  height: 8px;
  margin-top: 8px;
}
.box .progress-bar { background: hsl(var(--primary)); }

/* ==========================================================================
   TABLES
   ========================================================================== */
.table { color: hsl(var(--foreground)); margin-bottom: 0; }
.table thead th {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  border-top: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  padding: 13px 16px;
}
.table tbody tr { transition: background-color .12s ease; }
.table tbody tr:nth-of-type(odd) { background: hsl(var(--muted) / 0.4); }
.table tbody tr:hover { background: hsl(var(--accent)); }
.table td, .table th { vertical-align: middle; padding: 12px 16px; border-color: hsl(var(--border)); }
.table-responsive {
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  overflow: auto;
}

/* ==========================================================================
   NEWS TICKER  (CSS replacement for the deprecated <marquee>)
   ========================================================================== */
.fxb-news {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.78));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
  padding: 11px 0;
  box-shadow: 0 8px 24px -10px hsl(var(--primary) / 0.5);
}
.fxb-news__track {
  display: inline-block;
  padding-left: 100%;
  font-weight: 600;
  animation: fxb-news-scroll 28s linear infinite;
}
.fxb-news:hover .fxb-news__track { animation-play-state: paused; }
@keyframes fxb-news-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ==========================================================================
   TOAST  (notification — wired via the page Toast() helper)
   ========================================================================== */
.fxb-toast {
  position: fixed;
  top: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  min-width: 240px;
  max-width: 90vw;
  padding: 14px 22px 14px 20px;
  border-radius: var(--radius);
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 16px 40px -12px hsl(var(--foreground) / 0.35);
  font: 600 14px/1.45 'Inter', 'Poppins', sans-serif;
  text-align: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
}
.fxb-toast::before {
  content: "";
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: hsl(var(--primary));
}
.fxb-toast.fxb-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ==========================================================================
   MEMBER CONTENT POLISH  (search groups, genealogy tree)
   ========================================================================== */
.input-group { border-radius: var(--radius); }
.input-group > .form-control {
  border-top-left-radius: var(--radius);
  border-bottom-left-radius: var(--radius);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.input-group .btn,
.input-group .input-group-prepend .btn {
  border-top-right-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group-prepend { display: flex; margin-left: -1px; }

/* Genealogy node labels (.style3 is otherwise undefined in markup) */
.style3 {
  font-size: .82rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.6;
}
.style3 img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: hsl(var(--card));
  padding: 3px;
  box-shadow: 0 4px 12px -4px hsl(var(--foreground) / 0.25);
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: pointer;
}
.style3 img:hover { transform: scale(1.08); box-shadow: 0 8px 20px -6px hsl(var(--primary) / 0.4); }

/* The genealogy tree reuses .table but is a layout grid, not a data list. */
.table:has(.style3) thead th { background: transparent; border-bottom-color: hsl(var(--border)); }
.table:has(.style3) tbody tr:nth-of-type(odd),
.table:has(.style3) tbody tr:hover { background: transparent; }
.table:has(.style3) td,
.table:has(.style3) th { border-color: hsl(var(--border) / 0.6); }

/* ==========================================================================
   RESPONSIVE + reduced-motion
   ========================================================================== */
@media (max-width: 768px) {
  .box { padding: 18px 12px; min-height: 138px; }
  .box h1 { width: 48px; height: 48px; font-size: 1.35rem; margin-bottom: 10px; }
  .box h6:last-of-type { font-size: 1.3rem; }
  .card { border-radius: var(--radius); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .fxb-news__track { animation: none !important; }
  .btn:hover, .card-hover:hover, .style3 img:hover { transform: none !important; }
}

/* ==========================================================================
   CHROME OVERRIDES — beat the Bootstrap admin "skin5" base
   --------------------------------------------------------------------------
   The base template (dist/css/style.min.css) paints the topbar, the logo
   block and the *inner* sidebar <ul> a hard-coded navy (#013971) via
   ID-scoped rules (`#main-wrapper .left-sidebar[data-sidebarbg=skin5] ul`)
   that out-specify the plain `.topbar` / `.left-sidebar` rules above. It also
   hard-codes `.text-white` on every KPI tile (now light cards → invisible
   text). These overrides re-point those exact elements at the token engine so
   the whole dashboard themes cohesively in every palette / mode.
   ========================================================================== */

/* --- Topbar: solid token surface (robust — no backdrop-filter dependency) - */
#main-wrapper .topbar,
#main-wrapper .topbar[data-navbarbg="skin5"],
#main-wrapper .topbar .navbar,
#main-wrapper .topbar .top-navbar {
  background: hsl(var(--card)) !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 1px 0 0 hsl(var(--border));
}
#main-wrapper .topbar { border-bottom: 1px solid hsl(var(--border)); }
/* the collapse carries its own `#navbarSupportedContent{background:#141619!important}` */
#main-wrapper .topbar #navbarSupportedContent,
#main-wrapper .topbar .navbar-collapse { background: transparent !important; }
/* logo block: drop the navy, let the token surface show, keep the amber chip */
#main-wrapper .topbar .top-navbar .navbar-header,
#main-wrapper .topbar .top-navbar .navbar-header[data-logobg="skin5"] {
  background: transparent !important;
}
/* topbar controls (hamburger / togglers) readable on the light surface */
#main-wrapper .topbar .nav-toggler,
#main-wrapper .topbar .sidebartoggler,
#main-wrapper .topbar .topbartoggler,
#main-wrapper .topbar .nav-link i { color: hsl(var(--muted-foreground)) !important; }
#main-wrapper .topbar .nav-toggler:hover i,
#main-wrapper .topbar .sidebartoggler:hover i { color: hsl(var(--primary)) !important; }

/* --- Sidebar: the navy lives on the inner <ul>; make it use the surface --- */
#main-wrapper .left-sidebar,
#main-wrapper .left-sidebar[data-sidebarbg="skin5"] { background: hsl(var(--sidebar)) !important; }
#main-wrapper .left-sidebar ul,
#main-wrapper .left-sidebar[data-sidebarbg="skin5"] ul,
#main-wrapper .scroll-sidebar,
#main-wrapper .sidebar-nav { background: transparent !important; }
/* inactive links: readable token text on the light sidebar */
#main-wrapper .sidebar-nav ul .sidebar-item .sidebar-link { color: hsl(var(--sidebar-foreground)) !important; }
#main-wrapper .sidebar-nav ul .sidebar-item .sidebar-link.active,
#main-wrapper .sidebar-nav ul .sidebar-item .sidebar-link.active i { color: hsl(var(--primary-foreground)) !important; }
/* Dashboard CTA (.btn-cyan) — keep it on-brand amber, not the base cyan, in
   every state (the template JS also tags it .active on memindex) */
#main-wrapper .sidebar-nav .sidebar-item a.btn-cyan,
#main-wrapper .sidebar-nav .sidebar-item a.btn-cyan.active,
#main-wrapper .sidebar-nav .sidebar-item a.btn-cyan:hover,
#main-wrapper .sidebar-nav .sidebar-item a.btn-cyan:focus {
  background: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
}

/* ==========================================================================
   KPI TILE TEXT — neutralize the hard-coded .text-white
   --------------------------------------------------------------------------
   Every tile (memindex) marks its <h1>/<h6> `.text-white`; Bootstrap's
   `.text-white{color:#fff!important}` then wins over the tile rules above, so
   on the new light cards the labels/values were white-on-white. Re-tint via
   tokens (label = muted, value = card-foreground, icon = the tile's tone).
   ========================================================================== */
.box .text-white { color: hsl(var(--muted-foreground)) !important; }
.box h6.text-white:last-of-type { color: hsl(var(--card-foreground)) !important; }
.box h1.text-white,
.box h1.font-light.text-white { color: hsl(var(--primary)) !important; }
.box.bg-success h1.text-white { color: hsl(var(--success)) !important; }
.box.bg-warning h1.text-white { color: hsl(var(--warning)) !important; }
.box.bg-danger  h1.text-white { color: hsl(var(--destructive)) !important; }
.box.bg-info    h1.text-white { color: hsl(var(--info)) !important; }
/* the warning tile renders its progress bar inside a .text-white wrapper */
.box .text-white .progress { background: hsl(var(--muted)) !important; }

/* ==========================================================================
   SAKTHINEW PARITY — components matched to the reference app
   (E:\wep_apps\sakthinew/apps/web). Appended last so it wins. Covers the
   Lucide icon set, refreshed inputs/selects/buttons/tables/cards, the
   section-grouped sidebar + status footer, topbar quick-action buttons +
   initial avatar, and the top-right card toast.
   ========================================================================== */

/* ---- Lucide icons: consistent sizing & stroke ---------------------------- */
.lucide, i[data-lucide] { width: 1.15em; height: 1.15em; stroke-width: 2; vertical-align: -0.18em; }
#main-wrapper .sidebar-nav .sidebar-link i[data-lucide],
#main-wrapper .sidebar-nav .sidebar-link .lucide { width: 18px; height: 18px; stroke-width: 2; }
#main-wrapper .topbar .lucide,
#main-wrapper .topbar i[data-lucide] { width: 20px; height: 20px; }
.dropdown-menu .dropdown-item .lucide { width: 16px; height: 16px; }

/* ---- Inputs / selects / textarea (reference: bg-background, h-10, ring) --- */
.form-control,
.form-control-select,
select.form-control,
textarea.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
input[type="number"].form-control {
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  color: hsl(var(--foreground));
  min-height: 2.5rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control:hover,
.form-control-select:hover,
select.form-control:hover { border-color: hsl(var(--muted-foreground) / 0.4); }
.form-control:focus,
.form-control-select:focus,
select.form-control:focus,
textarea.form-control:focus {
  background-color: hsl(var(--background));
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
  outline: none;
}

/* ---- Buttons (reference: rounded-lg, soft primary shadow) ---------------- */
.btn { border-radius: var(--radius); font-weight: 500; }
.btn-primary, .btn-cyan {
  box-shadow: 0 1px 2px 0 hsl(var(--primary) / 0.2);
}
.btn-primary:hover, .btn-cyan:hover {
  background: hsl(var(--primary) / 0.9);
  box-shadow: 0 4px 12px -2px hsl(var(--primary) / 0.3);
}
.btn-outline-primary, .btn-secondary { box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.05); }

/* ---- Cards (reference: rounded-xl, subtle shadow, primary hover ring) ----- */
.card { border-radius: 14px; box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.05); }
.card:hover { border-color: hsl(var(--primary) / 0.4); }

/* ---- Tables (reference: muted/60 head, border rows, hover; no zebra) ------ */
.table thead th {
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0 16px;
  height: 44px;
}
.table tbody tr { border-bottom: 1px solid hsl(var(--border)); }
.table tbody tr:nth-of-type(odd) { background: transparent; }
.table tbody tr:hover { background: hsl(var(--muted) / 0.4); }
.table td { padding: 12px 16px; }
.table tfoot { border-top: 2px solid hsl(var(--primary) / 0.4); background: hsl(var(--muted) / 0.7); font-weight: 600; }

/* ---- Topbar: logo mark + quick-action buttons + initial avatar ----------- */
#main-wrapper .topbar .navbar-brand .logo-icon {
  background: transparent;
  width: 36px; height: 36px; padding: 0;
  border-radius: 11px;
}
#main-wrapper .topbar .navbar-brand .logo-icon img { width: 34px; height: 34px; border-radius: 11px; }
.topbar .fxb-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 0 2px;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground)) !important;
  transition: background-color .15s ease, color .15s ease;
}
.topbar .fxb-icon-btn:hover { background: hsl(var(--accent)); color: hsl(var(--primary)) !important; }
.fxb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-weight: 700; font-size: .9rem;
  border: 1px solid hsl(var(--primary) / 0.25);
}
.topbar .pro-pic::after { display: none; }

/* ---- Sidebar: section labels + status footer ----------------------------- */
#main-wrapper .sidebar-nav .sidebar-section {
  list-style: none;
  margin: 14px 22px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground) / 0.85);
}
#main-wrapper .sidebar-nav .sidebar-section:first-child { margin-top: 6px; }
.sidebar-foot {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 16px 22px;
  padding: 12px 14px;
  border-radius: 12px;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--sidebar-border));
}
.sidebar-foot__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: hsl(var(--success));
  box-shadow: 0 0 0 3px hsl(var(--success) / 0.18);
  flex: none;
}
.sidebar-foot__title { font-size: .8rem; font-weight: 600; color: hsl(var(--sidebar-foreground)); }
.sidebar-foot__ver   { font-size: .72rem; color: hsl(var(--muted-foreground)); }

/* Collapsed (mini) sidebar: the base template only hides .hide-menu + arrows,
   so these redesign-added elements (section labels + status footer) leaked
   their text into the 65px rail. Hide them too, matching .hide-menu. */
#main-wrapper[data-sidebartype="mini-sidebar"] .sidebar-nav .sidebar-section,
#main-wrapper[data-sidebartype="mini-sidebar"] .left-sidebar .sidebar-foot { display: none; }

/* ---- Toast: top-right card (reference ToastHost) ------------------------- */
.fxb-toast {
  position: fixed;
  top: 18px;
  left: auto;
  right: 18px;
  transform: translateX(0) translateY(-14px);
  min-width: 280px;
  max-width: 380px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 14px 16px;
  border-radius: 12px;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--success) / 0.3);
  box-shadow: 0 16px 40px -12px hsl(var(--foreground) / 0.35);
  font: 600 14px/1.45 'Inter', 'Poppins', sans-serif;
  text-align: left;
  z-index: 99999;
  opacity: 0;
  transition: opacity .28s ease, transform .28s ease;
}
.fxb-toast::before {
  content: "";
  position: static;
  flex: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    hsl(var(--success)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.fxb-toast.fxb-toast--show { opacity: 1; transform: translateX(0) translateY(0); }

/* ==========================================================================
   APPEARANCE PAGE (appearance.asp) — settings controls
   ========================================================================== */
.set-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 768px) { .set-grid { grid-template-columns: repeat(4, 1fr); } }
.set-chips { display: flex; flex-wrap: wrap; gap: 10px; }

.set-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 16px;
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.set-opt:hover { background: hsl(var(--accent)); border-color: hsl(var(--primary) / 0.4); }
.set-opt .lucide { width: 18px; height: 18px; }
.set-opt > span { margin-right: auto; }
.set-opt .set-tick { width: 18px; height: 18px; opacity: 0; color: hsl(var(--primary)); }
.set-opt.is-active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25);
}
.set-opt.is-active .set-tick { opacity: 1; }

.set-bars { display: inline-flex; gap: 4px; }
.set-bar  { width: 9px; height: 26px; border-radius: 9999px; display: inline-block; }

.set-chip {
  padding: 9px 18px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: .85rem; text-transform: capitalize; font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.set-chip:hover { background: hsl(var(--accent)); border-color: hsl(var(--primary) / 0.4); }
.set-chip.is-active { border-color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); }

.footer { padding: 20px 0 28px; font-size: .8rem; }

/* ==========================================================================
   MODERN TABLES — replace the old bordered/striped "spreadsheet" look
   --------------------------------------------------------------------------
   Data pages render `table.table.table-striped.table-bordered` (DataTables BS4
   skin) which paints a gridline around every cell + hard zebra. This block
   (loaded after both bootstrap + dataTables.bootstrap4.css) strips the gridlines,
   frames the table in a soft rounded container, and uses clean row separators +
   a subtle zebra + hover — matching the reference app. CSS-only, all pages.
   ========================================================================== */

/* Elevated rounded frame around every data table (inside its card) */
.card-body > .table-responsive,
.table-responsive {
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  overflow: auto;
  background: hsl(var(--card));
  box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.05), 0 8px 24px -16px hsl(var(--foreground) / 0.2);
}
.table-responsive > .table,
.table-responsive > table.table { margin-bottom: 0; }
.table td, .table th { font-variant-numeric: tabular-nums; }

/* Kill ALL cell gridlines from the bordered skin (the main "old" culprit) */
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered th,
.table-bordered td {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
}
/* and the dark top rule that sits on the <tr> itself (not the cells) */
.table tr,
.table thead tr,
.table tbody tr,
.table-bordered tr { border-top: 0 !important; }

/* Header — brand-tinted bar, uppercase, accent underline, no side lines */
.table > thead > tr > th,
.table thead th {
  background: hsl(var(--primary) / 0.06) !important;
  color: hsl(var(--accent-foreground)) !important;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  border-bottom: 1.5px solid hsl(var(--primary) / 0.18) !important;
  padding: 15px 20px;
  white-space: nowrap;
  vertical-align: middle;
}

/* Body — clean white rows, light separators, generous padding */
.table > tbody > tr > td,
.table tbody td {
  border-bottom: 1px solid hsl(var(--border) / 0.7) !important;
  padding: 16px 20px;
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: 0 !important; }

/* Faint zebra for readability (much softer than the old hard gray).
   NOTE: this template's Bootstrap paints stripes via the BS5 mechanism
   `box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)` on each cell (not
   background-color), so the stripe is driven through that variable, and the
   even rows are explicitly cleared so only odd rows tint. */
.table > :not(caption) > * > * {
  box-shadow: none !important;
  --bs-table-accent-bg: transparent !important;
  background-color: transparent !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: hsl(var(--muted) / 0.18) !important;
  /* BS5 striping also pins a fixed slate text color (--bs-table-striped-color)
     that is dim on dark mode — force the theme foreground so it adapts. */
  color: hsl(var(--foreground)) !important;
}
.table-striped > tbody > tr:nth-of-type(even) > * {
  background-color: transparent !important;
}
.table tbody tr { transition: background-color .14s ease; }
.table tbody tr:hover > *,
.table tbody tr:hover {
  background-color: hsl(var(--primary) / 0.07) !important;
}

/* Re-assert the genealogy TREE de-chrome (it reuses .table but is a layout grid,
   not a data list) AFTER the modern rules above so it stays clean. */
.table:has(.style3) th,
.table:has(.style3) td { border-bottom: 0 !important; background: transparent !important; }
.table:has(.style3) tbody tr:hover > * { background: transparent !important; }
.table-responsive:has(.style3) { border: 0; box-shadow: none; border-radius: 0; }

/* ==========================================================================
   TOOLTIPS — modern token card (genealogy node hover popup, etc.)
   --------------------------------------------------------------------------
   The genealogy nodes use Bootstrap-4 tooltips (initialised in js/custom1.js)
   whose default is a tiny black box. Re-skin to a clean popover-style card that
   follows the theme tokens (so it adapts to every palette + light/dark).
   ========================================================================== */
.tooltip { opacity: 0 !important; }
.tooltip.show { opacity: 1 !important; }
.tooltip .tooltip-inner {
  max-width: 300px;
  padding: 11px 14px;
  text-align: left;
  color: hsl(var(--popover-foreground));
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-left: 3px solid hsl(var(--primary));
  border-radius: 12px;
  box-shadow: 0 16px 34px -10px hsl(var(--foreground) / 0.38);
  font: 500 12px/1.65 'Inter', 'Poppins', system-ui, sans-serif;
  letter-spacing: .01em;
}
/* first line (the username) reads as a heading */
.tooltip .tooltip-inner b,
.tooltip .tooltip-inner strong { color: hsl(var(--primary)); font-weight: 700; }
/* arrow matches the card surface */
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: hsl(var(--popover)); }
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: hsl(var(--popover)); }
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: hsl(var(--popover)); }
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: hsl(var(--popover)); }

/* ==========================================================================
   RICH & COLORFUL LAYER — vivid gradients across the member dashboard
   --------------------------------------------------------------------------
   Adds a colorful, premium feel on top of the flat token base: a soft gradient
   canvas, gradient buttons + active nav, tinted card headers, and vivid
   gradient KPI tiles. Everything is token-driven so it recolors with the
   active palette and adapts to light / medium / dark. Appended last → wins.
   ========================================================================== */

/* Soft multi-hue gradient canvas (very subtle) */
#main-wrapper .page-wrapper {
  background:
    radial-gradient(820px 460px at -6% -8%, hsl(var(--primary) / 0.07), transparent 60%),
    radial-gradient(760px 520px at 106% -6%, hsl(var(--info) / 0.06), transparent 58%),
    radial-gradient(720px 600px at 102% 106%, hsl(var(--success) / 0.05), transparent 60%),
    hsl(var(--background)) !important;
}

/* Gradient buttons */
.btn-primary, .btn-cyan {
  background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.7)) !important;
  border: none !important;
  box-shadow: 0 8px 20px -8px hsl(var(--primary) / 0.55) !important;
}
.btn-success { background-image: linear-gradient(135deg, hsl(var(--success)), hsl(var(--success) / 0.7)) !important; border: none !important; }
.btn-warning { background-image: linear-gradient(135deg, hsl(var(--warning)), hsl(var(--warning) / 0.7)) !important; border: none !important; }
.btn-danger  { background-image: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.7)) !important; border: none !important; }
.btn-info    { background-image: linear-gradient(135deg, hsl(var(--info)), hsl(var(--info) / 0.7)) !important; border: none !important; }

/* Gradient sidebar active lozenge + Dashboard CTA */
#main-wrapper .sidebar-nav .sidebar-item a.btn-cyan,
#main-wrapper .sidebar-nav .sidebar-item a.btn-cyan.active,
#main-wrapper .sidebar-nav ul .sidebar-item .sidebar-link.active {
  background-image: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.72)) !important;
  box-shadow: 0 8px 20px -7px hsl(var(--primary) / 0.55) !important;
}

/* Card headers — BOLD gradient bar with white title (matches the KPI tiles) */
.card > .card-header {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.76)) !important;
  border: none !important;
  border-radius: 13px 13px 0 0;
  padding: 15px 20px;
  box-shadow: 0 8px 18px -12px hsl(var(--primary) / 0.7);
}
.card > .card-header .card-title,
.card > .card-header h3,
.card > .card-header h4,
.card > .card-header h5,
.card > .card-header h6 {
  color: #fff !important;
  margin: 0;
  font-weight: 700;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.18);
}
.card > .card-header .text-muted { color: hsl(0 0% 100% / 0.82) !important; }
.card > .card-header .lucide,
.card > .card-header svg { color: #fff !important; stroke: #fff !important; }
.card-title { letter-spacing: -.01em; }

/* Per-card header tones — add hd-success / hd-info / hd-warning / hd-danger to
   a .card-header to vary its color (default is primary/amber). */
.card > .card-header.hd-success { background: linear-gradient(135deg, hsl(var(--success)), hsl(var(--success) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--success) / 0.7); }
.card > .card-header.hd-info    { background: linear-gradient(135deg, hsl(var(--info)), hsl(var(--info) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--info) / 0.7); }
.card > .card-header.hd-warning { background: linear-gradient(135deg, hsl(var(--warning)), hsl(var(--warning) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--warning) / 0.7); }
.card > .card-header.hd-danger  { background: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--destructive) / 0.7); }

/* Bold header bar for IN-BODY card titles (profile, genealogy, …) — turns a
   `.card-title` that is the first child of a `.card-body` into a full-bleed
   gradient header matching the dashboard cards, with NO markup restructuring.
   Add hd-success / hd-info / hd-warning / hd-danger to the title to vary color. */
.card > .card-body > .card-title:first-child,
.card > form > .card-body > .card-title:first-child {
  display: block;
  margin: -1.25rem -1.25rem 1.25rem -1.25rem !important;
  padding: 15px 20px;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.76));
  color: #fff !important;
  border-radius: 13px 13px 0 0;
  font-weight: 700;
  letter-spacing: -.01em;
  box-shadow: 0 8px 18px -12px hsl(var(--primary) / 0.6);
  text-shadow: 0 1px 2px hsl(0 0% 0% / 0.18);
}
.card:has(> .card-body > .card-title:first-child),
.card:has(> form > .card-body > .card-title:first-child) { overflow: hidden; }
.card-body > .card-title.hd-success { background: linear-gradient(135deg, hsl(var(--success)), hsl(var(--success) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--success) / 0.6); }
.card-body > .card-title.hd-info    { background: linear-gradient(135deg, hsl(var(--info)), hsl(var(--info) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--info) / 0.6); }
.card-body > .card-title.hd-warning { background: linear-gradient(135deg, hsl(var(--warning)), hsl(var(--warning) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--warning) / 0.6); }
.card-body > .card-title.hd-danger  { background: linear-gradient(135deg, hsl(var(--destructive)), hsl(var(--destructive) / 0.76)) !important; box-shadow: 0 8px 18px -12px hsl(var(--destructive) / 0.6); }

/* News ticker — deeper glow */
.fxb-news { box-shadow: 0 12px 28px -10px hsl(var(--primary) / 0.6); }

/* ---- BOLD colorful KPI tiles (memindex 8 cards) — solid tone + white text -- */
.card-hover:has(> .box) { box-shadow: none; }
.card-hover:has(> .box):hover { transform: translateY(-4px); }
.box {
  border: none !important;
  color: #fff !important;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.box::after { display: none !important; }   /* the whole tile is the tone now */

/* solid saturated tone + a light sheen (top-left) and soft shade (bottom-right) */
.box.bg-cyan    { background: linear-gradient(140deg, hsl(0 0% 100% / 0.18), transparent 45%, hsl(0 0% 0% / 0.16)), hsl(var(--primary)) !important;    box-shadow: 0 14px 28px -12px hsl(var(--primary) / 0.7) !important; }
.box.bg-success { background: linear-gradient(140deg, hsl(0 0% 100% / 0.18), transparent 45%, hsl(0 0% 0% / 0.16)), hsl(var(--success)) !important;    box-shadow: 0 14px 28px -12px hsl(var(--success) / 0.7) !important; }
.box.bg-warning { background: linear-gradient(140deg, hsl(0 0% 100% / 0.16), transparent 45%, hsl(0 0% 0% / 0.22)), hsl(var(--warning)) !important;    box-shadow: 0 14px 28px -12px hsl(var(--warning) / 0.7) !important; }
.box.bg-danger  { background: linear-gradient(140deg, hsl(0 0% 100% / 0.18), transparent 45%, hsl(0 0% 0% / 0.16)), hsl(var(--destructive)) !important; box-shadow: 0 14px 28px -12px hsl(var(--destructive) / 0.7) !important; }
.box.bg-info    { background: linear-gradient(140deg, hsl(0 0% 100% / 0.18), transparent 45%, hsl(0 0% 0% / 0.16)), hsl(var(--info)) !important;        box-shadow: 0 14px 28px -12px hsl(var(--info) / 0.7) !important; }

/* white text across tiles (labels translucent-white, value solid) + shadow */
.box .text-white,
.box h6 { color: hsl(0 0% 100% / 0.85) !important; text-shadow: 0 1px 2px hsl(0 0% 0% / 0.25); }
.box h6.text-white:last-of-type,
.box h6:last-of-type { color: #fff !important; text-shadow: 0 1px 3px hsl(0 0% 0% / 0.3); }

/* frosted-glass icon chip + white glyph */
.box h1 {
  background: hsl(0 0% 100% / 0.2) !important;
  box-shadow: inset 0 0 0 1px hsl(0 0% 100% / 0.38), 0 6px 14px -6px hsl(0 0% 0% / 0.25) !important;
}
.box h1 .lucide, .box h1 svg { color: #fff !important; stroke: #fff !important; filter: drop-shadow(0 1px 1px hsl(0 0% 0% / 0.28)); }

/* progress bar (warning tile) on the colored surface */
.box .progress { background: hsl(0 0% 100% / 0.28) !important; }
.box .progress-bar { background: #fff !important; }

/* hover — brighten + lift */
.box:hover { box-shadow: 0 22px 40px -16px hsl(var(--foreground) / 0.45); filter: brightness(1.05); }

@media (prefers-reduced-motion: reduce) {
  .card-hover:has(> .box):hover, .box:hover { transform: none !important; filter: none !important; }
}

/* ==========================================================================
   DATATABLES — search box, page-length, info & pagination (member data tables)
   --------------------------------------------------------------------------
   Tables are enhanced with DataTables (init in inc_appearance.asp). Style its
   generated controls to match the token theme + modern table look.
   ========================================================================== */
/* the DataTables wrapper replaces the simple frame — let controls breathe */
.table-responsive:has(.dataTables_wrapper) { border: 0; box-shadow: none; overflow: visible; border-radius: 0; }
.dataTables_wrapper { position: relative; }

/* top toolbar: length (left) + search (right) */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 14px; font-size: .85rem; color: hsl(var(--muted-foreground)); }
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  height: 40px; padding: .45rem .8rem;
  color: hsl(var(--foreground)); font-size: .85rem;
  box-shadow: 0 1px 2px 0 hsl(var(--foreground) / 0.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.dataTables_wrapper .dataTables_filter input { min-width: 240px; }
.dataTables_wrapper .dataTables_length select { padding-right: 2rem; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.15);
  outline: none;
}

/* the table itself keeps the modern rounded frame */
.dataTables_wrapper > table.table,
.dataTables_wrapper .dataTables_scroll table.table {
  border: 1px solid hsl(var(--border));
  border-radius: 14px;
}

/* bottom bar: info (left) + pagination (right) */
.dataTables_wrapper .dataTables_info { color: hsl(var(--muted-foreground)); font-size: .82rem; padding-top: 16px; }
.dataTables_wrapper .dataTables_paginate { padding-top: 12px; }

/* pagination — modern pills. DataTables renders Bootstrap markup:
   <li class="page-item paginate_button"><a class="page-link">1</a></li>
   so the PILL must go on the inner <a.page-link> only; the <li> is reset to a
   plain flex item (otherwise the borders nest into a misaligned double-box). */
.dataTables_wrapper .dataTables_paginate { text-align: right; }
.dataTables_wrapper .pagination {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 6px; margin: 0; padding: 0; list-style: none;
}
/* reset the <li> wrapper completely (it carries .paginate_button) */
.dataTables_wrapper .pagination .page-item,
.dataTables_wrapper .pagination li.paginate_button {
  margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: transparent !important; min-width: 0 !important; height: auto !important;
  list-style: none !important; display: inline-flex !important;
}
/* the pill = the inner anchor (and a.paginate_button for non-BS fallback) */
.dataTables_wrapper .pagination .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; margin: 0; padding: 0 12px;
  border-radius: var(--radius) !important;
  border: 1px solid hsl(var(--border)) !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: .85rem; font-weight: 600; line-height: 1; text-align: center;
  text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.dataTables_wrapper .pagination .page-link:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary) / 0.4) !important;
}
.dataTables_wrapper .pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current,
.dataTables_wrapper .dataTables_paginate a.paginate_button.current:hover {
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.78)) !important;
  border-color: hsl(var(--primary)) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -6px hsl(var(--primary) / 0.5);
}
.dataTables_wrapper .pagination .page-item.disabled .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button.disabled {
  opacity: .4; cursor: default;
  background: hsl(var(--card)) !important; color: hsl(var(--muted-foreground)) !important;
}