/* =========================================================
   ClubHub CSS Overrides, VC-grade refinement pass
   Goals:
   - No “jiggle” hover, stable layout
   - HubSpot-like restraint, light + engineered
   - Navy sidebar locked
   - Blue gradient primary CTA locked
   ========================================================= */

/* =========================
   1) Tokens and Bootstrap hooks
   ========================= */
:root{
  --clubhub-navy: #03045e;
  --clubhub-blue: #0077b6;
  --clubhub-cyan: #00b4d8;
  --clubhub-ice: #90e0ef;
  --clubhub-mist: #caf0f8;

  --ch-bg: #f6f8fb;
  --ch-surface: #ffffff;
  --ch-text: #111827;
  --ch-muted: rgba(17,24,39,.58);

  --ch-border-color: rgba(15,23,42,.08);
  --ch-border: 1px solid var(--ch-border-color);

  --ch-radius-sm: 10px;
  --ch-radius-md: 14px;
  --ch-radius-lg: 16px;

  /* HubSpot-like restraint */
  --ch-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.05);
  --ch-shadow-md: 0 10px 26px rgba(15, 23, 42, 0.07);

  /* Bootstrap variables */
  --bs-primary: var(--clubhub-blue);
  --bs-primary-rgb: 0, 119, 182;
  --bs-body-color: #1f2430;
  --bs-border-color: rgba(20, 25, 35, 0.10);
  --bs-border-radius: 12px;
}

/* If you are using this body class as the single locked theme, keep it.
   If not present on body, these rules still work, but this provides a clean scope. */
body.ch-theme-modern{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   2) Base surfaces
   ========================= */
.app-content,
.content-wrapper,
.content-body{
  background: var(--ch-bg) !important;
}

/* Keep scrollbar stable */
html{
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

/* Links */
a{
  color: var(--clubhub-blue);
}
a:hover{
  color: var(--clubhub-cyan);
}

/* =========================
   3) Sidebar (locked navy)
   ========================= */
.bg-menu-theme,
body.ch-theme-modern .layout-menu{
  background-color: var(--clubhub-navy) !important;
  color: rgba(255, 255, 255, 0.82) !important;
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-horizontal-prev,
.bg-menu-theme .menu-horizontal-next,
body.ch-theme-modern .menu-link,
body.ch-theme-modern .menu-header-text{
  color: rgba(255, 255, 255, 0.78) !important;
}

.menu-header-text{
  color: rgba(255, 255, 255, 0.55) !important;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.bg-menu-theme .menu-link:hover,
.layout-menu .menu-inner .menu-item:not(.active) > .menu-link:hover,
html body .layout-menu .menu-inner .menu-item > .menu-link:hover,
html body .layout-menu .menu-inner .menu-item > .menu-toggle:hover,
html body .layout-menu .menu-inner .menu-sub .menu-item > .menu-link:hover{
  background-color: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle),
.layout-menu .menu-inner .menu-item.active > .menu-link{
  background: linear-gradient(90deg, rgba(47,124,255,0.22), rgba(0,180,216,0.10)) !important;
  box-shadow: none !important;
  color: #ffffff !important;
  position: relative;
}

.bg-menu-theme.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle)::before{
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: var(--clubhub-cyan);
  border-radius: 2px;
}

.layout-menu .menu-link,
.layout-menu .menu-inner .menu-item > .menu-link{
  transition: background-color 0.18s ease, color 0.18s ease;
}

.layout-menu .menu-inner .menu-item:not(.active) > .menu-link:hover .menu-icon,
.layout-menu .menu-inner .menu-item.active > .menu-link .menu-icon,
html body .layout-menu .menu-inner .menu-item > .menu-link:hover .menu-icon{
  color: #ffffff !important;
}

.menu-vertical .app-brand{
  margin-top: 15px;
}
.menu-vertical .app-brand img{
  height: 45px;
}

/* =========================
   4) Top navbar
   ========================= */
.layout-navbar{
  background: #fff !important;
  border-bottom: 1px solid rgba(20, 25, 35, 0.08) !important;
  box-shadow: none !important;
}
.layout-navbar.navbar{
  border-radius: 0 !important;
}

.layout-navbar .container-xxl{
  height: 56px !important;
}

.layout-navbar .navbar-nav,
.layout-navbar .navbar-nav > .nav-item,
.layout-navbar .navbar-nav > li,
.layout-navbar .navbar-nav > .nav-item > .nav-link,
.layout-navbar .navbar-nav > li > .nav-link{
  height: 56px !important;
  display: flex;
  align-items: center;
}

/* Keep dropdown rows natural height (not forced to 56px) */
.layout-navbar .navbar-nav .dropdown-menu li{
  height: auto !important;
  display: block !important;
}

@media (max-width: 991px) {
  .layout-navbar .container-xxl{
    height: auto !important;
  }
}

/* Navbar search */
.ch-nav-search .nav-item{
  max-width: 680px;
  margin: 0 auto;
  padding: 7px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(20, 25, 35, 0.08) !important;
  background: #F7F9FC !important;
}

.ch-search-input{
  background: transparent !important;
  font-size: 14px !important;
  color: #111827 !important;
}
.ch-search-input::placeholder{
  color: rgba(17, 24, 39, 0.45) !important;
}

.ch-kbd-hint{
  font-size: 11px !important;
  color: rgba(17, 24, 39, 0.45) !important;
  border: 1px solid rgba(17, 24, 39, 0.14) !important;
  border-radius: 10px !important;
  padding: 2px 8px !important;
  margin-left: 10px;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .ch-nav-search .nav-item{
    max-width: 100%;
  }
  .ch-kbd-hint{
    display: none !important;
  }
}

/* Navbar icon buttons */
.ch-icon-btn{
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 25, 35, 0.08) !important;
  background: #fff !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ch-icon-btn:hover{
  border-color: rgba(0, 119, 182, 0.32) !important;
}
.ch-icon-btn i{
  font-size: 18px;
  color: rgba(17, 24, 39, 0.75);
}
.ch-notif-dot{
  position: absolute;
  top: 7px !important;
  right: 7px !important;
  font-size: 10px;
  padding: 2px 6px;
}

/* User pill */
.ch-user-pill{
  height: 40px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20, 25, 35, 0.08) !important;
  background: #fff !important;
  transition: border-color 0.15s ease;
}
.ch-user-pill:hover{
  border-color: rgba(0, 119, 182, 0.32) !important;
}
.ch-avatar{
  width: 28px;
  height: 28px;
  object-fit: cover;
}
.ch-user-name{
  font-weight: 600;
  color: rgba(17, 24, 39, 0.82);
}

/* Club switcher */
.ch-club-switcher .dropdown-menu{
  min-width: 240px;
}
.ch-club-btn{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 6px 10px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(20, 25, 35, 0.10) !important;
  background: #fff !important;
  line-height: 1.1;
  transition: border-color 0.15s ease;
}
.ch-club-btn:hover{
  border-color: rgba(0, 119, 182, 0.32) !important;
}
.ch-club-name{
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.1;
  color: #111827 !important;
}
.ch-club-meta{
  font-size: 11px !important;
  line-height: 1.1;
  color: rgba(17, 24, 39, 0.55) !important;
}

/* Dropdown polish */
.dropdown-menu{
  border: 1px solid rgba(20, 25, 35, 0.08) !important;
  box-shadow: 0 18px 46px rgba(16, 24, 40, 0.14) !important;
  border-radius: 14px !important;
}

/* User dropdown */
.ch-user-menu{
  min-width: 250px;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.ch-user-menu .dropdown-item{
  padding: 0.42rem 0.95rem;
}

.ch-user-menu .dropdown-item h6{
  font-size: 0.9rem;
  line-height: 1.2;
}

.ch-user-menu .dropdown-item small{
  font-size: 0.75rem;
  line-height: 1.2;
}

.ch-user-menu .dropdown-divider{
  margin-top: 0.35rem !important;
  margin-bottom: 0.35rem !important;
}

.ch-user-menu .avatar{
  width: 2rem;
  height: 2rem;
}

.ch-user-menu .btn.btn-sm{
  padding: 0.34rem 0.62rem;
}

.ch-user-menu .d-grid{
  padding: 0.5rem 0.5rem 0.3rem !important;
}

/* =========================
   5) Cards (stable, no hover lift)
   ========================= */
.card{
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
  border-radius: 16px !important;
  box-shadow: var(--ch-shadow-sm) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  transform: none !important;
}

.card:hover{
  transform: none !important;
  border-color: rgba(0, 119, 182, 0.14) !important;
  box-shadow: var(--ch-shadow-md) !important;
}

.card .card-header{
  background: transparent !important;
  border-bottom: 0 !important;
  padding: 22px 22px 10px 22px !important;
}

.card .card-body{
  padding: 18px 22px 22px 22px !important;
}

/* If any nested cards exist, keep them visually quiet */
.card .card{
  box-shadow: none !important;
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.05) !important;
}

/* Headings inside cards */
.card h1,
.card h2,
.card h3,
.card h4{
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #111827;
}

.card small,
.card .text-muted{
  font-size: 12px;
}

/* =========================
   6) Buttons (primary gradient locked, minimal motion)
   ========================= */
.btn{
  transition: filter 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.btn-primary,
.btn.btn-primary{
  border: 0 !important;
  color: #fff !important;
  background-color: #1f74ff !important;
  background-image: linear-gradient(135deg, #2f7cff 0%, #0ea5e9 55%, #06b6d4 100%) !important;
  box-shadow: 0 10px 22px rgba(31, 116, 255, 0.18) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover{
  filter: brightness(0.98);
  box-shadow: 0 14px 26px rgba(31, 116, 255, 0.22) !important;
}

.btn-primary:active,
.btn.btn-primary:active{
  box-shadow: 0 10px 18px rgba(31, 116, 255, 0.18) !important;
}

.btn-outline-primary,
.btn.btn-outline-primary{
  border-color: rgba(47, 124, 255, 0.75) !important;
  color: #2f7cff !important;
  background: #fff !important;
}

.btn-outline-primary:hover,
.btn.btn-outline-primary:hover{
  background: rgba(47, 124, 255, 0.08) !important;
  border-color: rgba(47, 124, 255, 0.85) !important;
  color: #2f7cff !important;
}

.btn:focus,
.btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(47, 124, 255, 0.25) !important;
  outline: none !important;
}

/* Top actions buttons */
.ch-top-actions .btn{
  border-radius: 12px;
  padding: 8px 16px;
  font-weight: 600;
}

/* =========================
   7) KPI tiles (allow tiny lift, single source of motion)
   ========================= */
.ch-kpi-tile{
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 14px;
  background: #ffffff;
  padding: 18px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  will-change: transform;
}

.ch-kpi-tile:hover{
  border-color: rgba(0, 119, 182, 0.18);
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.06);
}

.ch-kpi-label{
  font-size: 12px;
  color: rgba(17, 24, 39, 0.55);
  margin-bottom: 6px;
  font-weight: 500;
}

.ch-kpi-value{
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.ch-kpi-sub{
  font-size: 12px;
  color: rgba(17, 24, 39, 0.5);
  margin-top: 6px;
}

/* =========================
   8) Action Required list rows
   ========================= */
.ch-action-row{
  padding: 16px 0;
}

.ch-action-title{
  font-weight: 650;
  color: #111827;
}

.ch-action-sub{
  font-size: 12px;
  color: rgba(17, 24, 39, 0.55);
}

.ch-action-btn{
  border-radius: 8px;
  padding: 4px 14px;
}

/* =========================
   9) Greeting block
   ========================= */
.ch-greeting{
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  padding-bottom: 18px;
  margin-bottom: 24px;
}

.ch-greeting-title{
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.ch-greeting-sub{
  font-size: 14px;
  color: rgba(17, 24, 39, 0.55);
}

/* =========================
   10) Tables (HubSpot-like lightness)
   ========================= */
.table{
  --bs-table-border-color: rgba(15, 23, 42, 0.06);
}

.table thead th{
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(17, 24, 39, 0.62);
  background: rgba(15, 23, 42, 0.02);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.table tbody td{
  vertical-align: middle;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.ch-table-hover tbody tr{
  transition: background-color 0.15s ease;
}
.ch-table-hover tbody tr:hover{
  background-color: rgba(15, 23, 42, 0.03);
  cursor: pointer;
}

/* =========================
   11) Tabs and tab-content cleanup
   ========================= */
.nav-tabs ~ .tab-content,
.nav-pills ~ .tab-content,
.tab-content{
  background: transparent !important;
  padding: 0 !important;
  margin-top: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =========================
   12) Form controls (clean, not boxed)
   ========================= */
.form-control,
.form-select{
  background-color: #FFFFFF !important;
  border-color: rgba(34, 48, 62, 0.14) !important;
}

.form-control:focus,
.form-select:focus{
  border-color: rgba(47, 124, 255, 0.40) !important;
  box-shadow: 0 0 0 3px rgba(47, 124, 255, 0.18) !important;
}

/* =========================
   13) Utility helpers
   ========================= */
.ch-muted{
  color: var(--ch-muted) !important;
}

.ch-pill{
  border: var(--ch-border);
  border-radius: 999px;
  background: #fff;
}

.ch-soft{
  background: #F7F9FC;
  border: var(--ch-border);
  border-radius: 14px;
}
/* =========================================
   Global Table Hover (ClubHub Standard)
========================================= */

.table tbody tr {
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.table tbody tr:hover {
  background-color: rgba(115, 103, 240, 0.04); /* very subtle primary tint */
}

.bg-menu-theme .menu-inner-shadow { background:none; }

.bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle, .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.open > .menu-link.menu-toggle, .bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle, .layout-menu-hover.layout-menu-collapsed .bg-menu-theme .menu-inner .menu-item.active > .menu-link.menu-toggle 
{ background: linear-gradient(90deg, rgba(47, 124, 255, 0.22), rgba(0, 180, 216, 0.10)) !important; box-shadow: none !important; color: #ffffff !important; }

.pagination .dt-paging-button button { margin-top:10px; padding-top: 10px !important; padding-bottom:10px !important; max-height:40px !important; line-height:1.35 !important; }
.pagination .dt-paging-button .ti { font-size:18px !important;}