/* ==========================================================================
   YNEX Bootstrap 5 Admin Template - Authentic Static Stylesheet (v3.0)
   Reference: https://v.bootstrapmb.com/2024/10/ffhcq15381/html/index.html
   ========================================================================== */

:root,
[data-bs-theme="light"] {
  --ynex-primary: #845adf;
  --ynex-primary-rgb: 132, 90, 223;
  --ynex-primary-hover: #6f42c1;
  --ynex-primary-01: rgba(132, 90, 223, 0.1);
  --ynex-primary-02: rgba(132, 90, 223, 0.2);
  --ynex-secondary: #23b7e5;
  --ynex-secondary-rgb: 35, 183, 229;
  --ynex-success: #26bf94;
  --ynex-success-rgb: 38, 191, 148;
  --ynex-warning: #f5b849;
  --ynex-warning-rgb: 245, 184, 73;
  --ynex-danger: #e6533c;
  --ynex-danger-rgb: 230, 83, 60;
  --ynex-info: #49b6f5;
  --ynex-info-rgb: 73, 182, 245;

  --ynex-body-bg: #f0f1f7;
  --ynex-custom-white: #ffffff;
  --ynex-card-bg: #ffffff;
  --ynex-card-border: #f3f3f3;
  --ynex-default-border: #e9edf6;
  --ynex-card-shadow: 0 0.125rem 0 rgba(10, 10, 10, 0.04);

  --ynex-header-bg: #ffffff;
  --ynex-header-border: #f3f3f3;
  --ynex-header-text: #536485;

  --ynex-menu-bg: #111c43;
  --ynex-menu-prime: #a3aed1;
  --ynex-menu-border: rgba(255, 255, 255, 0.07);
  --ynex-menu-active-bg: rgba(255, 255, 255, 0.07);

  --ynex-text-main: #333335;
  --ynex-text-muted: #8c9097;
  --ynex-input-bg: #ffffff;
  --ynex-input-border: #e2e8f0;
  --ynex-table-head-bg: #f8f9fa;
  --ynex-table-hover: rgba(132, 90, 223, 0.04);
  --ynex-light-bg: #f3f6f8;
}

[data-bs-theme="dark"] {
  --ynex-body-bg: #1a1c1e;
  --ynex-custom-white: #23262b;
  --ynex-card-bg: #23262b;
  --ynex-card-border: rgba(255, 255, 255, 0.07);
  --ynex-default-border: rgba(255, 255, 255, 0.08);
  --ynex-card-shadow: 0 0.125rem 0 rgba(0, 0, 0, 0.2);

  --ynex-header-bg: #23262b;
  --ynex-header-border: rgba(255, 255, 255, 0.07);
  --ynex-header-text: rgba(255, 255, 255, 0.75);

  --ynex-menu-bg: #16191f;
  --ynex-menu-prime: #949eb7;
  --ynex-menu-border: rgba(255, 255, 255, 0.06);
  --ynex-menu-active-bg: rgba(255, 255, 255, 0.07);

  --ynex-text-main: rgba(255, 255, 255, 0.87);
  --ynex-text-muted: rgba(255, 255, 255, 0.5);
  --ynex-input-bg: #1e2126;
  --ynex-input-border: rgba(255, 255, 255, 0.12);
  --ynex-table-head-bg: rgba(255, 255, 255, 0.03);
  --ynex-table-hover: rgba(132, 90, 223, 0.08);
  --ynex-light-bg: rgba(255, 255, 255, 0.05);
}

/* Switcher Menu & Header Variations */
[data-menu-styles="light"] {
  --ynex-menu-bg: #ffffff;
  --ynex-menu-prime: #536485;
  --ynex-menu-border: #e9edf6;
  --ynex-menu-active-bg: rgba(var(--ynex-primary-rgb), 0.08);
}
[data-menu-styles="primary"] {
  --ynex-menu-bg: var(--ynex-primary);
  --ynex-menu-prime: rgba(255, 255, 255, 0.82);
  --ynex-menu-border: rgba(255, 255, 255, 0.12);
  --ynex-menu-active-bg: rgba(255, 255, 255, 0.16);
}
[data-menu-styles="gradient"] {
  --ynex-menu-bg: linear-gradient(180deg, var(--ynex-primary) 0%, #111c43 100%);
  --ynex-menu-prime: rgba(255, 255, 255, 0.85);
  --ynex-menu-border: rgba(255, 255, 255, 0.1);
}
[data-header-styles="dark"] {
  --ynex-header-bg: #111c43;
  --ynex-header-border: rgba(255, 255, 255, 0.08);
  --ynex-header-text: #a3aed1;
}
[data-header-styles="primary"] {
  --ynex-header-bg: var(--ynex-primary);
  --ynex-header-border: rgba(255, 255, 255, 0.15);
  --ynex-header-text: #ffffff;
}
[data-page-style="classic"] .card,
[data-page-style="classic"] .custom-card {
  box-shadow: none !important;
  border: 1px solid var(--ynex-default-border) !important;
}
[data-page-style="modern"] {
  --ynex-body-bg: #ffffff;
}
[data-page-style="modern"] .card,
[data-page-style="modern"] .custom-card {
  background-color: var(--ynex-light-bg) !important;
  box-shadow: none !important;
  border: 1px solid var(--ynex-default-border) !important;
}

* { box-sizing: border-box; }

body {
  background-color: var(--ynex-body-bg) !important;
  color: var(--ynex-text-main) !important;
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  font-size: 0.813rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  overflow-x: hidden;
  transition: background-color 0.2s ease, color 0.2s ease;
}

a { color: var(--ynex-primary); text-decoration: none; }
a:hover { color: var(--ynex-primary-hover); }

/* Ynex Font Size & Opacity Utilities */
.fs-10 { font-size: 0.625rem !important; }
.fs-11 { font-size: 0.6875rem !important; }
.fs-12 { font-size: 0.75rem !important; }
.fs-13 { font-size: 0.8125rem !important; }
.fs-14 { font-size: 0.875rem !important; }
.fs-15 { font-size: 0.9375rem !important; }
.fs-16 { font-size: 1rem !important; }
.fs-18 { font-size: 1.125rem !important; }
.fs-20 { font-size: 1.25rem !important; }
.fs-22 { font-size: 1.375rem !important; }
.fs-25 { font-size: 1.5625rem !important; }
.op-7 { opacity: 0.7 !important; }
.op-8 { opacity: 0.8 !important; }
.text-fixed-white { color: #ffffff !important; }

/* Ynex Dashed Borders */
.border-block-start-dashed { border-top: 1px dashed var(--ynex-default-border) !important; }
.border-block-end-dashed { border-bottom: 1px dashed var(--ynex-default-border) !important; }
.border-inline-end-dashed { border-right: 1px dashed var(--ynex-default-border) !important; }
.border-dashed { border: 1px dashed var(--ynex-default-border) !important; }

/* ==========================================================================
   1. YNEX SIDEBAR (.sidebar)
   ========================================================================== */
.sidebar {
  width: 240px;
  height: 100vh;
  background: var(--ynex-menu-bg);
  border-inline-end: 1px solid var(--ynex-menu-border);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s ease;
}

.sidebar-brand {
  height: 3.75rem;
  min-height: 3.75rem;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-bottom: 1px solid var(--ynex-menu-border);
  color: #ffffff;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}
[data-menu-styles="light"] .sidebar-brand { color: #111c43; }

.brand-logo-box {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ynex-primary) 0%, var(--ynex-secondary) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(var(--ynex-primary-rgb), 0.35);
}

.brand-badge {
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(var(--ynex-primary-rgb), 0.25);
  color: #c4b5fd;
  font-weight: 700;
  margin-left: auto;
}
[data-menu-styles="light"] .brand-badge {
  background: var(--ynex-primary-01);
  color: var(--ynex-primary);
}

.sidebar-search {
  padding: 0.75rem 0.9rem 0.25rem;
}
.sidebar-search input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid var(--ynex-menu-border) !important;
  color: #fff !important;
  font-size: 0.76rem !important;
  border-radius: 0.4rem !important;
  padding: 0.38rem 0.75rem 0.38rem 2rem !important;
}
[data-menu-styles="light"] .sidebar-search input {
  background: #f3f6f8 !important;
  color: #333 !important;
}
.sidebar-search input::placeholder { color: var(--ynex-menu-prime) !important; opacity: 0.7; }

.sidebar-section { padding: 0.2rem 0; }
.sidebar-label {
  padding: 0.65rem 1.35rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ynex-menu-prime);
  opacity: 0.55;
}

.sidebar .nav-item a {
  color: var(--ynex-menu-prime);
  padding: 0.5rem 0.95rem;
  margin: 2px 0.75rem;
  border-radius: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 500;
  position: relative;
  transition: all 0.15s ease;
  text-decoration: none;
}
.sidebar .nav-item a i:first-child {
  font-size: 0.98rem;
  width: 1.25rem;
  text-align: center;
  opacity: 0.85;
}
.sidebar .nav-item a .chev {
  margin-left: auto;
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}
.sidebar .nav-item a[aria-expanded="true"] .chev { transform: rotate(180deg); }
.sidebar .nav-item.submenu a { padding-left: 2.15rem; font-size: 0.78rem; }

.sidebar .nav-item a:hover {
  color: #ffffff;
  background: var(--ynex-menu-active-bg);
}
[data-menu-styles="light"] .sidebar .nav-item a:hover { color: var(--ynex-primary); }

.sidebar .nav-item a.active {
  color: #ffffff !important;
  background: var(--ynex-menu-active-bg);
  font-weight: 600;
}
[data-menu-styles="light"] .sidebar .nav-item a.active {
  color: var(--ynex-primary) !important;
  background: var(--ynex-primary-01);
}
.sidebar .nav-item a.active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  border-radius: 0 4px 4px 0;
  background: var(--ynex-primary);
}
.sidebar-footer {
  margin-top: auto;
  padding: 0.85rem 0.95rem;
  border-top: 1px solid var(--ynex-menu-border);
}

/* ==========================================================================
   2. YNEX HEADER (.topbar) & MAIN CONTENT (.main-content)
   ========================================================================== */
.main-content {
  margin-left: 240px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s ease;
}
body.sidebar-collapsed .sidebar { transform: translateX(-100%); }
body.sidebar-collapsed .main-content { margin-left: 0; }

.topbar {
  height: 3.75rem;
  background: var(--ynex-header-bg);
  border-bottom: 1px solid var(--ynex-header-border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 1020;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.topbar-left { display: flex; align-items: center; gap: 0.85rem; }
.topbar-right { display: flex; align-items: center; gap: 0.45rem; }

.sidebar-toggle, .topbar-icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ynex-header-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.08rem;
  transition: all 0.15s ease;
  cursor: pointer;
}
.sidebar-toggle:hover, .topbar-icon-btn:hover {
  background: var(--ynex-light-bg);
  color: var(--ynex-primary);
}

@keyframes ynex-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.ynex-gear-spin i {
  display: inline-block;
  animation: ynex-spin 4.5s linear infinite;
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.65rem;
  border-radius: 2rem;
  border: 1px solid var(--ynex-default-border);
  background: var(--ynex-light-bg);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ynex-text-main);
  margin-left: 0.25rem;
}
.topbar-user .user-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ynex-primary), var(--ynex-secondary));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

main.content {
  padding: 0 1.5rem 2.25rem;
  flex: 1;
}

/* ==========================================================================
   3. YNEX PAGE HEADER & BREADCRUMB (.page-header-breadcrumb)
   ========================================================================== */
.page-header-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.15rem 0 1.15rem;
}
.page-header-breadcrumb .page-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ynex-text-main);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.page-header-breadcrumb .breadcrumb {
  margin-bottom: 0;
  font-size: 0.78rem;
  background: transparent;
  padding: 0;
}
.page-header-breadcrumb .breadcrumb-item a {
  color: var(--ynex-primary);
  font-weight: 500;
}
.page-header-breadcrumb .breadcrumb-item.active {
  color: var(--ynex-text-main);
  font-weight: 600;
}
.page-header-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  font-weight: 600;
  color: var(--ynex-text-muted);
}

/* ==========================================================================
   4. YNEX DE-CARDED & SIGNATURE COMPONENTS
   ========================================================================== */

/* 4.1 De-Carded Inline Filter / Action Toolbar (.ynex-toolbar) */
.ynex-toolbar {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--ynex-default-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 0 0.9rem 0 !important;
  margin-bottom: 1.15rem !important;
}
.ynex-toolbar > .card-body {
  padding: 0 !important;
  background: transparent !important;
}

/* 4.2 Unified Dashed-Border Stat Summary Ribbon (.ynex-stat-ribbon) */
.ynex-stat-ribbon {
  background: var(--ynex-custom-white);
  border-radius: 0.5rem;
  box-shadow: var(--ynex-card-shadow);
  margin-bottom: 1.25rem !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: hidden;
  border: 0;
}
.ynex-stat-ribbon > [class*="col-"] {
  border-inline-end: 1px dashed var(--ynex-default-border);
  border-bottom: 1px dashed var(--ynex-default-border);
  padding: 0 !important;
  margin: 0 !important;
}
.ynex-stat-ribbon > [class*="col-"]:last-child {
  border-inline-end: 0;
}
@media (min-width: 768px) {
  .ynex-stat-ribbon > [class*="col-"] {
    border-bottom: 0;
  }
}
.ynex-stat-ribbon .card,
.ynex-stat-ribbon .stat-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0.85rem 1.15rem !important;
}
.ynex-stat-ribbon .card-body {
  padding: 0.85rem 1.15rem !important;
}
.ynex-stat-ribbon > [class*="col-"]::before {
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--ynex-primary), transparent);
}
.ynex-stat-ribbon > [class*="col-"]:nth-child(2n)::before {
  background: linear-gradient(90deg, var(--ynex-secondary), transparent);
}
.ynex-stat-ribbon > [class*="col-"]:nth-child(3n)::before {
  background: linear-gradient(90deg, var(--ynex-success), transparent);
}
.ynex-stat-ribbon > [class*="col-"]:nth-child(4n)::before {
  background: linear-gradient(90deg, var(--ynex-warning), transparent);
}

/* 4.3 Live Crypto & System Ticker Strip (.ynex-ticker-strip) */
.ynex-ticker-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: var(--ynex-custom-white);
  border-radius: 0.5rem;
  box-shadow: var(--ynex-card-shadow);
  margin-bottom: 1.25rem;
  border-inline-start: 4px solid var(--ynex-primary);
}
.ynex-ticker-item {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.25rem;
  border-inline-end: 1px dashed var(--ynex-default-border);
}
.ynex-ticker-item:last-child { border-inline-end: 0; }

/* 4.4 Ynex Signature Highlight Card (.crm-highlight-card) */
.crm-highlight-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ynex-primary) 0%, #5b35b5 100%) !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 6px 20px rgba(var(--ynex-primary-rgb), 0.28) !important;
}
.crm-highlight-card::after {
  content: "";
  position: absolute;
  right: -25px;
  bottom: -35px;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.crm-highlight-card .card-body { position: relative; z-index: 2; }

/* 4.5 Ynex Avatars (.avatar) */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  color: #fff;
  font-weight: 600;
  flex-shrink: 0;
}
.avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
.avatar-sm { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; }
.avatar-md { width: 2.65rem; height: 2.65rem; font-size: 1.08rem; }
.avatar-lg { width: 3.1rem; height: 3.1rem; font-size: 1.25rem; }
.avatar-rounded { border-radius: 50% !important; }

/* 4.6 Ynex Top Deals List & Deals Status List */
.crm-top-deals li { margin-bottom: 0.95rem; }
.crm-top-deals li:last-child { margin-bottom: 0; }

.crm-deals-status li {
  position: relative;
  margin-bottom: 1.05rem;
  margin-inline-start: 1.1rem;
}
.crm-deals-status li:last-child { margin-bottom: 0; }
.crm-deals-status li::before {
  content: "";
  position: absolute;
  width: 0.52rem;
  height: 0.52rem;
  top: 0.42rem;
  left: -1.1rem;
  border-radius: 50%;
}
.crm-deals-status li.primary::before { background-color: var(--ynex-primary); }
.crm-deals-status li.info::before { background-color: var(--ynex-info); }
.crm-deals-status li.warning::before { background-color: var(--ynex-warning); }
.crm-deals-status li.success::before { background-color: var(--ynex-success); }
.crm-deals-status li.danger::before { background-color: var(--ynex-danger); }

/* 4.7 Ynex Related App Tiles (3x2 Quick Nav Grid) */
.related-app {
  border-radius: 0.5rem;
  border: 1px dashed var(--ynex-default-border);
  transition: all 0.18s ease;
  color: var(--ynex-text-main);
  background: var(--ynex-light-bg);
}
.related-app:hover {
  background: var(--ynex-primary-01);
  border-color: var(--ynex-primary);
  color: var(--ynex-primary);
  transform: translateY(-2px);
}

/* 4.8 Unified Dashed-Border Chart Matrix (.ynex-chart-matrix) */
.ynex-chart-matrix > [class*="col-"] {
  border-inline-end: 1px dashed var(--ynex-default-border);
  border-bottom: 1px dashed var(--ynex-default-border);
  padding: 1.15rem 1.25rem;
}
.ynex-chart-matrix > [class*="col-"]:nth-child(2n) {
  border-inline-end: 0;
}
.ynex-chart-matrix > [class*="col-"]:nth-last-child(-n+2) {
  border-bottom: 0;
}
@media (max-width: 991.98px) {
  .ynex-chart-matrix > [class*="col-"] {
    border-inline-end: 0 !important;
    border-bottom: 1px dashed var(--ynex-default-border) !important;
  }
}

/* ==========================================================================
   5. YNEX CUSTOM CARDS & SIGNATURE TWO-TONE HEADER ACCENT BAR
   ========================================================================== */
.card, .custom-card {
  background-color: var(--ynex-custom-white) !important;
  border: 0 !important;
  border-radius: 0.5rem !important;
  box-shadow: var(--ynex-card-shadow) !important;
  margin-bottom: 1.25rem;
  color: var(--ynex-text-main);
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--ynex-card-border) !important;
  padding: 0.9rem 1.25rem !important;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  position: relative;
}

/* Signature Ynex Two-Tone Vertical Bar on Card Headers */
.card-header::before {
  content: "";
  display: inline-block;
  width: 0.22rem;
  height: 1.05rem;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, var(--ynex-primary) 50%, rgba(var(--ynex-secondary-rgb), 0.65) 50%);
  margin-right: 0.35rem;
  flex-shrink: 0;
}

.card-footer {
  background-color: transparent !important;
  border-top: 1px solid var(--ynex-card-border) !important;
  padding: 0.75rem 1.25rem !important;
}

/* Legacy stat-card compatibility */
.stat-card {
  background-color: var(--ynex-custom-white);
  border-radius: 0.5rem;
  box-shadow: var(--ynex-card-shadow);
  padding: 1.15rem 1.25rem;
}
.stat-label { font-size: 0.78rem; color: var(--ynex-text-muted); }
.stat-val { font-size: 1.4rem; font-weight: 700; }
.stat-icon {
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  background: var(--ynex-primary-01);
}

/* ==========================================================================
   6. YNEX SOFT TRANSLUCENT BADGES & LIGHT ACTION BUTTONS
   ========================================================================== */
.bg-primary-transparent { background-color: rgba(var(--ynex-primary-rgb), 0.12) !important; color: var(--ynex-primary) !important; }
.bg-secondary-transparent { background-color: rgba(var(--ynex-secondary-rgb), 0.12) !important; color: var(--ynex-secondary) !important; }
.bg-success-transparent { background-color: rgba(var(--ynex-success-rgb), 0.12) !important; color: var(--ynex-success) !important; }
.bg-warning-transparent { background-color: rgba(var(--ynex-warning-rgb), 0.15) !important; color: #d99316 !important; }
.bg-danger-transparent { background-color: rgba(var(--ynex-danger-rgb), 0.12) !important; color: var(--ynex-danger) !important; }
.bg-info-transparent { background-color: rgba(var(--ynex-info-rgb), 0.12) !important; color: var(--ynex-info) !important; }
[data-bs-theme="dark"] .bg-warning-transparent { color: var(--ynex-warning) !important; }

/* Automatically upgrade all Bootstrap solid badges inside main.content to Ynex Soft Translucent Badges */
main.content .badge {
  font-weight: 600;
  font-size: 0.71rem;
  padding: 0.32em 0.68em;
  border-radius: 0.25rem;
}
main.content .badge.bg-primary { background-color: rgba(var(--ynex-primary-rgb), 0.12) !important; color: var(--ynex-primary) !important; }
main.content .badge.bg-success, main.content .badge-active { background-color: rgba(var(--ynex-success-rgb), 0.12) !important; color: var(--ynex-success) !important; }
main.content .badge.bg-warning, main.content .badge-pending { background-color: rgba(var(--ynex-warning-rgb), 0.15) !important; color: #d99316 !important; }
[data-bs-theme="dark"] main.content .badge.bg-warning, [data-bs-theme="dark"] main.content .badge-pending { color: var(--ynex-warning) !important; }
main.content .badge.bg-danger, main.content .badge-banned { background-color: rgba(var(--ynex-danger-rgb), 0.12) !important; color: var(--ynex-danger) !important; }
main.content .badge.bg-info, main.content .badge-info { background-color: rgba(var(--ynex-info-rgb), 0.12) !important; color: var(--ynex-info) !important; }
main.content .badge.bg-secondary, main.content .badge.bg-dark { background-color: var(--ynex-light-bg) !important; color: var(--ynex-text-muted) !important; border: 1px solid var(--ynex-default-border); }

/* Ynex Soft Light Buttons & Automatic Upgrade of btn-outline-* */
.btn {
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 0.35rem;
  transition: all 0.18s ease;
}
.btn-primary {
  background-color: var(--ynex-primary) !important;
  border-color: var(--ynex-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--ynex-primary-rgb), 0.25);
}
.btn-primary:hover {
  background-color: var(--ynex-primary-hover) !important;
  border-color: var(--ynex-primary-hover) !important;
  transform: translateY(-1px);
}

.btn-primary-light, main.content .btn-outline-primary {
  background-color: rgba(var(--ynex-primary-rgb), 0.1) !important;
  color: var(--ynex-primary) !important;
  border-color: transparent !important;
}
.btn-primary-light:hover, main.content .btn-outline-primary:hover {
  background-color: var(--ynex-primary) !important;
  color: #ffffff !important;
}

.btn-success-light, main.content .btn-outline-success {
  background-color: rgba(var(--ynex-success-rgb), 0.12) !important;
  color: var(--ynex-success) !important;
  border-color: transparent !important;
}
.btn-success-light:hover, main.content .btn-outline-success:hover {
  background-color: var(--ynex-success) !important;
  color: #ffffff !important;
}

.btn-warning-light, main.content .btn-outline-warning {
  background-color: rgba(var(--ynex-warning-rgb), 0.14) !important;
  color: #d99316 !important;
  border-color: transparent !important;
}
[data-bs-theme="dark"] .btn-warning-light, [data-bs-theme="dark"] main.content .btn-outline-warning {
  color: var(--ynex-warning) !important;
}
.btn-warning-light:hover, main.content .btn-outline-warning:hover {
  background-color: var(--ynex-warning) !important;
  color: #ffffff !important;
}

.btn-danger-light, main.content .btn-outline-danger {
  background-color: rgba(var(--ynex-danger-rgb), 0.12) !important;
  color: var(--ynex-danger) !important;
  border-color: transparent !important;
}
.btn-danger-light:hover, main.content .btn-outline-danger:hover {
  background-color: var(--ynex-danger) !important;
  color: #ffffff !important;
}

.btn-info-light, main.content .btn-outline-info {
  background-color: rgba(var(--ynex-info-rgb), 0.12) !important;
  color: var(--ynex-info) !important;
  border-color: transparent !important;
}
.btn-info-light:hover, main.content .btn-outline-info:hover {
  background-color: var(--ynex-info) !important;
  color: #ffffff !important;
}

main.content .btn-outline-secondary, main.content .btn-outline-light {
  background-color: var(--ynex-light-bg) !important;
  color: var(--ynex-text-main) !important;
  border: 1px solid var(--ynex-default-border) !important;
}
main.content .btn-outline-secondary:hover, main.content .btn-outline-light:hover {
  background-color: var(--ynex-primary-01) !important;
  color: var(--ynex-primary) !important;
  border-color: var(--ynex-primary) !important;
}

/* ==========================================================================
   7. YNEX TABLES & MODERN TABS (.nav-tabs -> Ynex Tab-Style-2)
   ========================================================================== */
.table {
  color: var(--ynex-text-main) !important;
  border-color: var(--ynex-default-border) !important;
  margin-bottom: 0;
}
.table thead th {
  background-color: var(--ynex-table-head-bg) !important;
  color: var(--ynex-text-main) !important;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--ynex-default-border) !important;
  white-space: nowrap;
}
.table tbody td {
  padding: 0.75rem 1rem !important;
  vertical-align: middle;
  border-bottom: 1px solid var(--ynex-default-border) !important;
  font-size: 0.8125rem;
}
.table-hover > tbody > tr:hover > * {
  background-color: var(--ynex-table-hover) !important;
  color: var(--ynex-text-main) !important;
}

/* Ynex Tab-Style-2 (Borderless Pill + Bottom Accent Bar) */
.nav-tabs {
  border-bottom: 1px solid var(--ynex-default-border) !important;
  gap: 0.35rem;
  padding-bottom: 0;
}
.nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0.375rem 0.375rem 0 0 !important;
  color: var(--ynex-text-muted) !important;
  font-weight: 500;
  padding: 0.6rem 1.1rem !important;
  background: transparent !important;
  transition: all 0.18s ease;
}
.nav-tabs .nav-link:hover {
  color: var(--ynex-primary) !important;
  background: var(--ynex-primary-01) !important;
}
.nav-tabs .nav-link.active {
  color: var(--ynex-primary) !important;
  background: var(--ynex-primary-01) !important;
  border-bottom: 2px solid var(--ynex-primary) !important;
  font-weight: 600;
}

/* Forms & Modals */
.form-control, .form-select {
  background-color: var(--ynex-input-bg) !important;
  border: 1px solid var(--ynex-input-border) !important;
  color: var(--ynex-text-main) !important;
  font-size: 0.8125rem;
  border-radius: 0.35rem;
  padding: 0.42rem 0.75rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--ynex-primary) !important;
  box-shadow: 0 0 0 0.18rem rgba(var(--ynex-primary-rgb), 0.15) !important;
}
.input-group-text {
  background-color: var(--ynex-light-bg) !important;
  border-color: var(--ynex-input-border) !important;
  color: var(--ynex-text-muted) !important;
  font-size: 0.8125rem;
}

.modal-content {
  background-color: var(--ynex-custom-white) !important;
  border: 1px solid var(--ynex-default-border) !important;
  border-radius: 0.6rem !important;
  color: var(--ynex-text-main) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}
.modal-header, .modal-footer {
  border-color: var(--ynex-default-border) !important;
}

/* Ynex Switcher Offcanvas */
.switcher-style-head {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  background: var(--ynex-light-bg);
  border-radius: 0.35rem;
  margin-bottom: 0.65rem;
  color: var(--ynex-text-main);
}
.ynex-swatch {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.15s ease;
}
.ynex-swatch:hover, .ynex-swatch.active {
  transform: scale(1.15);
  box-shadow: 0 0 0 3px rgba(var(--ynex-primary-rgb), 0.35);
}

/* ==========================================================================
   8. SUBPAGE SPECIALIZED STYLES & MOBILE RESPONSIVE
   ========================================================================== */
.toast-container { position: fixed; top: 18px; right: 18px; z-index: 9999; min-width: 260px; }
.chat-user-item { cursor: pointer; padding: 10px 14px; border-bottom: 1px solid var(--ynex-default-border); transition: background 0.15s; }
.chat-user-item:hover, .chat-user-item.active { background: var(--ynex-primary-01); }
.chat-msg-row { display: flex; margin-bottom: 10px; }
.chat-msg-row.admin { justify-content: flex-end; }
.chat-bubble { max-width: 72%; padding: 8px 13px; border-radius: 12px; font-size: 0.84rem; word-break: break-word; }
.chat-msg-row.user .chat-bubble { background: var(--ynex-light-bg); color: var(--ynex-text-main); border-bottom-left-radius: 3px; }
.chat-msg-row.admin .chat-bubble { background: var(--ynex-primary); color: #fff; border-bottom-right-radius: 3px; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1025; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .main-content { margin-left: 0 !important; }
  main.content { padding: 0 0.85rem 1.5rem; }
}
@media (max-width: 767.98px) {
  table.m-cards thead { display: none; }
  table.m-cards, table.m-cards tbody, table.m-cards tr, table.m-cards td { display: block; width: 100%; }
  table.m-cards tr {
    background: var(--ynex-custom-white);
    border: 1px solid var(--ynex-default-border);
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
  table.m-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.25rem !important;
    border-bottom: 1px dashed var(--ynex-default-border) !important;
    text-align: right;
  }
  table.m-cards td:last-child { border-bottom: 0 !important; }
  table.m-cards td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--ynex-text-muted);
    text-align: left;
    margin-right: 0.75rem;
  }
}


/* ==========================================================================
   9. YNEX SUBPAGE DE-CARDING & LIGHT/DARK TEXT COMPATIBILITY
   ========================================================================== */

/* Fix legacy .text-light used as helper/muted text on light backgrounds */
[data-bs-theme="light"] main.content small.text-light,
[data-bs-theme="light"] main.content td.text-light,
[data-bs-theme="light"] main.content p.text-light,
[data-bs-theme="light"] main.content div.text-light:not(.badge):not(.btn):not(.toast) {
  color: var(--ynex-text-muted) !important;
}

/* Style every subpage's top header row as an authentic Ynex Page-Header */
main.content > .d-flex.justify-content-between:first-child {
  margin-top: 1.15rem !important;
  margin-bottom: 1.15rem !important;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed var(--ynex-default-border);
}
main.content > .d-flex.justify-content-between:first-child h4,
main.content > .d-flex.justify-content-between:first-child h5 {
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  color: var(--ynex-text-main) !important;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
main.content > .d-flex.justify-content-between:first-child h4::before,
main.content > .d-flex.justify-content-between:first-child h5::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 1.1rem;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, var(--ynex-primary) 50%, var(--ynex-secondary) 50%);
}

/* De-Card stacked cards inside .tab-pane (e.g., settings.html, bots.html, bbs.html):
   Render them as unified Ynex Form Sections separated by dashed borders instead of 60 separate floating cards! */
.tab-content > .tab-pane > .card + .card {
  margin-top: 0 !important;
  border-top: 1px dashed var(--ynex-default-border) !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.tab-content > .tab-pane > .card:has(+ .card) {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* De-Card standalone filter bars at top of pages or tabs */
main.content > .card.mb-3:has(.form-control, .form-select),
.tab-pane > .card.mb-3:has(.form-control, .form-select) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 1px dashed var(--ynex-default-border) !important;
  border-radius: 0 !important;
  margin-bottom: 1rem !important;
}
main.content > .card.mb-3:has(.form-control, .form-select) > .card-body,
.tab-pane > .card.mb-3:has(.form-control, .form-select) > .card-body {
  padding: 0 0 0.85rem 0 !important;
}