/* ====================================================
   PlayOfy Unified Theme
   Aligns Bootstrap app pages with the landing page's
   Material Design 3 colour & dark-mode system.
   Load this AFTER style.css on every app page.
   ==================================================== */

/* ── Fonts (Space Grotesk + Inter, matching landing) ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

/* ── Light Mode — :root overrides ──────────────────── */
:root {
  /* Primary green: landing #4cd964 = rgb(76, 217, 100) */
  --primary:             #4cd964;
  --primary-hover:       #3ab854;
  --primary-dark:        #2a9e3c;
  --primary-light:       rgba(76, 217, 100, 0.50);
  --primary-rgb:         76, 217, 100;
  --rgba-primary-1:      rgba(76, 217, 100, 0.1);
  --rgba-primary-2:      rgba(76, 217, 100, 0.2);
  --rgba-primary-3:      rgba(76, 217, 100, 0.3);
  --rgba-primary-4:      rgba(76, 217, 100, 0.4);
  --rgba-primary-5:      rgba(76, 217, 100, 0.5);
  --rgba-primary-6:      rgba(76, 217, 100, 0.6);
  --rgba-primary-7:      rgba(76, 217, 100, 0.7);
  --rgba-primary-8:      rgba(76, 217, 100, 0.8);
  --rgba-primary-9:      rgba(76, 217, 100, 0.9);

  /* Bootstrap semantic overrides */
  --bs-primary:          #4cd964;
  --bs-primary-rgb:      76, 217, 100;
  --bs-link-color:       #4cd964;
  --bs-link-color-rgb:   76, 217, 100;
  --bs-link-hover-color: #3ab854;
  --bs-focus-ring-color: rgba(76, 217, 100, 0.25);
  --bs-form-valid-color:        #4cd964;
  --bs-form-valid-border-color: #4cd964;

  /* Body */
  --body-bg:             #f4f4f4;
  --bs-body-bg:          #f4f4f4;
  --bs-body-bg-rgb:      244, 244, 244;

  /* Fonts */
  --font-family-title:   'Space Grotesk', sans-serif;
  --font-family-base:    'Inter', sans-serif;
  --bs-body-font-family: 'Inter', sans-serif;
}

/* ── Dark Mode — body.theme-dark overrides ─────────── */
body.theme-dark {
  /* Primary: landing dark #42f086 = rgb(66, 240, 134) */
  --primary:             #42f086;
  --primary-hover:       #00d36d;
  --primary-dark:        #00a854;
  --primary-light:       rgba(66, 240, 134, 0.50);
  --primary-rgb:         66, 240, 134;
  --rgba-primary-1:      rgba(66, 240, 134, 0.1);
  --rgba-primary-2:      rgba(66, 240, 134, 0.2);
  --rgba-primary-3:      rgba(66, 240, 134, 0.3);
  --rgba-primary-4:      rgba(66, 240, 134, 0.4);
  --rgba-primary-5:      rgba(66, 240, 134, 0.5);
  --rgba-primary-6:      rgba(66, 240, 134, 0.6);
  --rgba-primary-7:      rgba(66, 240, 134, 0.7);
  --rgba-primary-8:      rgba(66, 240, 134, 0.8);
  --rgba-primary-9:      rgba(66, 240, 134, 0.9);

  /* Bootstrap overrides */
  --bs-primary:          #42f086;
  --bs-primary-rgb:      66, 240, 134;
  --bs-link-color:       #42f086;
  --bs-link-color-rgb:   66, 240, 134;

  /* Background — landing dark: #00161e = rgb(0, 22, 30) */
  --body-bg:             #00161e;
  --bs-body-bg:          #00161e;
  --bs-body-bg-rgb:      0, 22, 30;
  --light:               #00161e;

  /* Surfaces — landing surface-container */
  --bg-white:            #03232d;
  --card-bg:             #032633;
  --bg-dark-light:       rgba(0, 49, 63, 0.80);

  /* Text — landing --c-on-background: rgb(202, 231, 245) */
  --dark:                #cae7f5;
  --title:               #cae7f5;
  --body-color:          rgba(202, 231, 245, 0.8);
  --bs-body-color:       rgba(202, 231, 245, 0.8);
  --bs-body-color-rgb:   202, 231, 245;

  /* Borders — landing --c-outline */
  --border-color:        rgba(133, 149, 133, 0.3);
  --border-ui:           #1c3843;

  /* Gradient */
  --bg-gradient: linear-gradient(180deg,
    rgba(0, 22, 30, 0.00) 37.50%,
    rgba(0, 22, 30, 0.67) 44.84%,
    #00161e 56.23%,
    #00161e 100%);
}

/* ── Body background in dark mode ──────────────────── */
body.theme-dark {
  background-color: #00161e !important;
  color: rgba(202, 231, 245, 0.8);
}

/* ── Card / white backgrounds in dark mode ─────────── */
body.theme-dark .bg-white,
body.theme-dark .card,
body.theme-dark .dz-card,
body.theme-dark .stat-card {
  background-color: #03232d !important;
}

body.theme-dark .card-body,
body.theme-dark .offcanvas,
body.theme-dark .modal-content {
  background-color: #03232d !important;
  color: rgba(202, 231, 245, 0.8);
}

body.theme-dark .modal-header,
body.theme-dark .modal-footer {
  border-color: rgba(133, 149, 133, 0.25) !important;
}

body.theme-dark .dropdown-menu {
  background-color: #032633 !important;
  border-color: rgba(133, 149, 133, 0.2) !important;
}

body.theme-dark .dropdown-item {
  color: rgba(202, 231, 245, 0.8) !important;
}

body.theme-dark .dropdown-item:hover,
body.theme-dark .dropdown-item:focus {
  background-color: rgba(66, 240, 134, 0.12) !important;
  color: #42f086 !important;
}

/* ── Sidebar & navbar in dark mode ─────────────────── */
body.theme-dark .sidebar,
body.theme-dark .menubar-area,
body.theme-dark .header {
  background-color: #00161e !important;
  border-color: rgba(133, 149, 133, 0.2) !important;
}

/* Dark overlay that sits on top of sidebar bg-image */
body.theme-dark .sidebar::after {
  background-color: rgba(0, 22, 30, 0.92) !important;
}

/* Nav link text — style.css hardcodes color:#000 */
body.theme-dark .sidebar .navbar-nav li > a,
body.theme-dark .sidebar .navbar-nav li > a::after {
  color: rgba(202, 231, 245, 0.85) !important;
}
body.theme-dark .sidebar .navbar-nav li > a.active {
  background-color: rgba(66, 240, 134, 0.08) !important;
  box-shadow: none !important;
}

/* Author / user info block */
body.theme-dark .sidebar .author-box .name,
body.theme-dark .sidebar .author-box span {
  color: rgba(202, 231, 245, 0.85) !important;
}

/* Bottom settings items */
body.theme-dark .sidebar .sidebar-bottom .app-setting li a span {
  color: rgba(202, 231, 245, 0.8) !important;
}
body.theme-dark .sidebar .sidebar-bottom .app-info {
  color: rgba(202, 231, 245, 0.6) !important;
  border-color: rgba(133, 149, 133, 0.2) !important;
}
body.theme-dark .sidebar .nav-label {
  color: rgba(202, 231, 245, 0.45) !important;
  border-color: rgba(133, 149, 133, 0.2) !important;
}

/* ── Form controls in dark mode ─────────────────────  */
body.theme-dark .form-control,
body.theme-dark .form-select,
body.theme-dark .input-group-text {
  background-color: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(133, 149, 133, 0.3) !important;
  color: rgba(202, 231, 245, 0.9) !important;
}

body.theme-dark .form-control::placeholder {
  color: rgba(202, 231, 245, 0.4);
}

body.theme-dark .form-control:focus,
body.theme-dark .form-select:focus {
  background-color: rgba(255, 255, 255, 0.09) !important;
  border-color: #42f086 !important;
  box-shadow: 0 0 0 0.2rem rgba(66, 240, 134, 0.20) !important;
  color: rgba(202, 231, 245, 0.95) !important;
}

/* ── Light mode: form focus ──────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: #4cd964;
  box-shadow: 0 0 0 0.2rem rgba(76, 217, 100, 0.25);
}

/* ── Primary button ──────────────────────────────── */
.btn-primary {
  --bs-btn-bg:               #4cd964;
  --bs-btn-border-color:     #4cd964;
  --bs-btn-hover-bg:         #3ab854;
  --bs-btn-hover-border-color:#3ab854;
  --bs-btn-active-bg:        #2a9e3c;
  --bs-btn-active-border-color:#2a9e3c;
  --bs-btn-color:            #05301a;
  --bs-btn-hover-color:      #05301a;
  --bs-btn-active-color:     #05301a;
}

body.theme-dark .btn-primary {
  --bs-btn-bg:               #42f086;
  --bs-btn-border-color:     #42f086;
  --bs-btn-hover-bg:         #00d36d;
  --bs-btn-hover-border-color:#00d36d;
  --bs-btn-color:            #003219;
  --bs-btn-hover-color:      #003219;
}

/* ── Outline-primary button ─────────────────────── */
.btn-outline-primary {
  --bs-btn-color:           #4cd964;
  --bs-btn-border-color:    #4cd964;
  --bs-btn-hover-bg:        #4cd964;
  --bs-btn-hover-border-color:#4cd964;
  --bs-btn-hover-color:     #05301a;
  --bs-btn-active-bg:       #3ab854;
  --bs-btn-active-border-color:#3ab854;
  --bs-btn-active-color:    #05301a;
}

body.theme-dark .btn-outline-primary {
  --bs-btn-color:           #42f086;
  --bs-btn-border-color:    #42f086;
  --bs-btn-hover-bg:        #42f086;
  --bs-btn-hover-color:     #003219;
}

/* ── Nav link active state ───────────────────────── */
.nav-link.active,
.sidebar .nav-link.active,
.menubar-nav .nav-link.active {
  color: var(--primary) !important;
}

/* ── Progress bars ───────────────────────────────── */
.progress-bar {
  background-color: var(--primary);
}

/* ── Badges (primary) ────────────────────────────── */
.badge.bg-primary {
  background-color: var(--primary) !important;
  color: #05301a !important;
}
body.theme-dark .badge.bg-primary {
  background-color: var(--primary) !important;
  color: #003219 !important;
}

/* ── Participate page: team-option selected ──────── */
.team-option.selected {
  border-color: #4cd964 !important;
  background: rgba(76, 217, 100, 0.08) !important;
}
body.theme-dark .team-option.selected {
  border-color: #42f086 !important;
  background: rgba(66, 240, 134, 0.12) !important;
}
body.theme-dark .team-option {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(202, 231, 245, 0.85);
}

/* ── Stripe card element ─────────────────────────── */
.stripe-card-element.StripeElement--focus {
  border-color: #4cd964 !important;
  box-shadow: 0 0 0 1px #4cd964 !important;
}
body.theme-dark .stripe-card-element {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(133, 149, 133, 0.3);
}
body.theme-dark .stripe-card-element.StripeElement--focus {
  border-color: #42f086 !important;
  box-shadow: 0 0 0 1px #42f086 !important;
}

/* ── Scrollbar (dark mode) ───────────────────────── */
body.theme-dark ::-webkit-scrollbar-track {
  background: #00161e;
}
body.theme-dark ::-webkit-scrollbar-thumb {
  background: #1c3843;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
  background: #42f086;
}

/* ── Smooth theme transitions (matches landing) ──── */
*, *::before, *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ── Notification Bell ──────────────────────────── */
#notif-dropdown .dropdown-menu {
  width: 310px;
  max-height: 420px;
  overflow-y: auto;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  padding: 0;
}
.notif-item {
  color: inherit;
  transition: background .15s;
}
.notif-item:hover { background: var(--rgba-primary-1); }
.notif-unread     { background: var(--rgba-primary-1); }
.notif-icon-wrap {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.notif-icon-wrap i { color: #fff; font-size: .85rem; }
.notif-title  { font-size: .8rem;  font-weight: 600; color: var(--title, #222); }
.notif-body   { font-size: .73rem; color: var(--body-color, #666); line-height: 1.3; margin-top: 1px; }
.notif-time   { font-size: .68rem; color: #999; margin-top: 2px; }
.notif-dot    {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 5px;
}
#notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--border-color, #eee);
}
#notif-header .notif-heading { font-size: .82rem; font-weight: 700; }
#notif-mark-all { font-size: .72rem; }
body.theme-dark #notif-dropdown .dropdown-menu {
  background: var(--card-bg, #032633);
  border-color: rgba(255,255,255,.08);
}
body.theme-dark .notif-item:hover,
body.theme-dark .notif-unread { background: rgba(66,240,134,.08); }

/* ── Booking modal: wallet section ──────────────────── */
.bm-wallet-section {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
body.theme-dark .bm-wallet-section {
  background: rgba(5, 150, 105, 0.10) !important;
  border-color: rgba(5, 150, 105, 0.30) !important;
}

/* ── Booking modal: confirmation success icon ───────── */
.bm-success-icon {
  width: 72px;
  height: 72px;
  background: #d1fae5;
}
body.theme-dark .bm-success-icon {
  background: rgba(5, 150, 105, 0.18) !important;
}

/* ── Booking modal: confirmation detail card ────────── */
.bm-detail-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
body.theme-dark .bm-detail-card {
  background: var(--card-bg, #032633) !important;
  border-color: rgba(133, 149, 133, 0.25) !important;
}

/* ── Booking modal: confirmation detail text ────────── */
.bm-detail-text {
  font-size: .82rem;
  color: #475569;
}
body.theme-dark .bm-detail-text {
  color: rgba(202, 231, 245, 0.8) !important;
}

/* ── Filter bar: card adapts to theme ───────────────── */
.filter-bar-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e3e3e3);
}