/* Bamya Space Tenant CSS Overrides */
/* Layout and visibility overrides only - colors handled by bamya_black_white theme */

/* =====================================================
   CSS VARIABLES
   ===================================================== */

:root {
  /* Neutral gradient color - change this to update all gradients at once */
  --bamya-neutral-gradient: #555555;

  /* Tile background color - controls all session tiles and action buttons */
  --bamya-tile-background: #ffffff;
  --bamya-tile-text: #141414;
}

/* =====================================================
   HIDE UI ELEMENTS
   ===================================================== */

/* Hide theme toggle in user panel dropdown */
.dropdown-menu > li.d-flex:has(#theme-toggle) {
  display: none !important;
}

/* Hide divider after theme toggle */
.dropdown-menu > li.d-flex:has(#theme-toggle) + li {
  display: none !important;
}

/* Hide notification toggle button in navbar */
#notifications-toggle,
li.nav-item:has(#notifications-toggle) {
  display: none !important;
}

/* Hide Health Screening section - target the div containing ASRS button */
.goal-item-roadmap:has(button[data-bs-target="#asrsModal"]) {
  display: none !important;
}

/* Hide user avatars in chat messages */
.message.user-message .message-avatar.user-avatar,
.message.user-message .message-avatar img {
  display: none !important;
}

/* =====================================================
   SESSIONS MANAGER LAYOUT - 2 Column List Layout
   (Adopted from adhd-assets tenant)
   ===================================================== */

/* Hide subtitle text in sessions tab */
.sessions-tab-content > p.text-muted.text-center.mb-4 {
  display: none !important;
}

/* 2-column grid layout */
.main-session-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
  margin-top: 2rem !important;
}

.main-session-grid.sessions-grid-3col,
.main-session-grid.sessions-grid-6col {
  grid-template-columns: repeat(2, 1fr) !important;
}

/* Main session tile - horizontal grid layout */
.main-session-tile {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 0.25rem 1.5rem !important;
  align-items: start !important;
  text-align: left !important;
  min-height: auto !important;
  padding: 1.5rem !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.main-session-tile:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}

/* Hide the circular icon */
.main-session-icon {
  display: none !important;
}

/* Level badge - positioned in grid, black circle with white text */
.main-session-level-badge {
  position: static !important;
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  background: #141414 !important;
  color: #FFFFFF !important;
  border-radius: 50% !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Arial Black', Helvetica, sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 900 !important;
  transform: none !important;
  border: none !important;
  bottom: auto !important;
  left: auto !important;
}

/* Title - grid column 2, row 1 */
.main-session-title {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin-bottom: 0 !important;
  font-family: 'Arial Black', Helvetica, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #000000 !important;
  background: transparent !important;
  -webkit-text-fill-color: #000000 !important;
  padding: 4px 0 !important;
  border-radius: 4px !important;
  display: inline-block !important;
}

/* Description - grid column 2, row 2 */
.main-session-description {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin-bottom: 0 !important;
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #000000 !important;
  color: #000000 !important;
}

/* Hide level badge when play indicator is present */
.main-session-tile:has(.main-session-tile-play-indicator) .main-session-level-badge {
  display: none !important;
}

/* Play indicator - positioned in grid like level badge */
.main-session-tile-play-indicator {
  position: static !important;
  grid-row: 1 / 3 !important;
  grid-column: 1 !important;
  width: 60px !important;
  height: 60px !important;
  margin: 0 !important;
  background: #141414 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-radius: 50% !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  line-height: 1 !important;
  padding: 0 !important;
  opacity: 1 !important;
  top: auto !important;
  right: auto !important;
}

/* Hide favorite star indicator */
.main-session-tile-favorite-indicator {
  display: none !important;
}

/* Responsive: tablet and below - single column for home page */
@media (max-width: 992px) {
  .main-session-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .main-session-grid.sessions-grid-3col,
  .main-session-grid.sessions-grid-6col {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Home page grids - single column on tablet and below */
  .sessions-responsive-grid {
    grid-template-columns: 1fr !important;
  }

  .main-session-tile {
    padding: 1.25rem !important;
    gap: 0.25rem 1.25rem !important;
  }

  .main-session-level-badge {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.1rem !important;
  }

  .main-session-tile-play-indicator {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.3rem !important;
  }
}

/* Mobile: single column */
@media (max-width: 576px) {
  .main-session-grid,
  .main-session-grid.sessions-grid-3col,
  .main-session-grid.sessions-grid-6col,
  .sessions-responsive-grid {
    grid-template-columns: 1fr !important;
  }

  .main-session-tile {
    padding: 1rem !important;
    gap: 0.25rem 1rem !important;
  }

  .main-session-level-badge {
    width: 48px !important;
    height: 48px !important;
    font-size: 1rem !important;
  }

  .main-session-tile-play-indicator {
    width: 48px !important;
    height: 48px !important;
    font-size: 1.2rem !important;
  }
}

/* Disabled tiles - greyed out for test-phase tools */
.main-session-tile.disabled-tile {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

.main-session-tile.disabled-tile .main-session-level-badge {
  background: #666666 !important;
}

/* =====================================================
   LOGO FRAME - Remove border, show directly in header
   ===================================================== */

.logo-frame {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.logo-frame:hover {
  box-shadow: none !important;
  transform: none !important;
}

.logo-frame-static {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* =====================================================
   REMOVE COLORFUL GRADIENTS - Use Neutral Gray
   ===================================================== */

/* Dropdown menu items - override all colored gradient classes to black-on-white */
.dropdown-item-purple,
.dropdown-item-success,
.dropdown-item-info,
.dropdown-item-warning,
.dropdown-item-primary,
.dropdown-item-danger,
.dropdown-item-dark {
  background: transparent !important;
  background-color: transparent !important;
  color: #141414 !important;
}

.dropdown-item-purple:hover,
.dropdown-item-success:hover,
.dropdown-item-info:hover,
.dropdown-item-warning:hover,
.dropdown-item-primary:hover,
.dropdown-item-danger:hover,
.dropdown-item-dark:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #141414 !important;
}

/* Session tiles and action buttons - BLACK TEXT ON WHITE BACKGROUND - ALL IDENTICAL */
.session-tile,
.all-sessions-tile,
.rc-redo-btn,
.rc-cheatsheet-btn,
.rc-discuss-buddy-btn {
  background: var(--bamya-tile-background) !important;
  background-image: none !important;
  border: 2px solid #999999 !important;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.1) !important;
}

.session-tile:hover,
.all-sessions-tile:hover,
.rc-redo-btn:hover,
.rc-cheatsheet-btn:hover,
.rc-discuss-buddy-btn:hover {
  background: var(--bamya-tile-background) !important;
  background-image: none !important;
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.1) !important;
}

/* Override template-specific hover shadows for session tiles */
.session-tile[data-session-index="0"]:hover,
.session-tile[data-session-index="1"]:hover,
.session-tile[data-session-index="2"]:hover,
.session-tile[data-session-index="3"]:hover,
.session-tile[data-session-index="4"]:hover {
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.1) !important;
}

/* Prevent ::before pseudo-element from showing gradient on hover */
.session-tile::before,
.all-sessions-tile::before,
.rc-redo-btn::before,
.rc-cheatsheet-btn::before,
.rc-discuss-buddy-btn::before {
  display: none !important;
  opacity: 0 !important;
}

/* Ensure text and icons are BLACK on all tiles - override inline styles */
.session-tile .stat-icon,
.session-tile .stat-label,
.session-tile .session-label,
.session-tile .session-level-badge,
.all-sessions-tile .stat-icon,
.all-sessions-tile .stat-label,
.all-sessions-tile .session-label,
.rc-redo-btn .stat-icon-compact,
.rc-cheatsheet-btn .stat-icon-compact,
.rc-discuss-buddy-btn .stat-icon-compact,
.rc-redo-btn .stat-label-compact,
.rc-cheatsheet-btn .stat-label-compact,
.rc-discuss-buddy-btn .stat-label-compact {
  color: var(--bamya-tile-text) !important;
}

/* Override any inline color styles on icons */
.session-tile .stat-icon[style],
.all-sessions-tile .stat-icon[style] {
  color: var(--bamya-tile-text) !important;
}

/* Override template-defined gradients for session tiles with data-session-index */
.session-tile[data-session-index] {
  background: var(--bamya-tile-background) !important;
  background-image: none !important;
  border-color: #999999 !important;
}

/* =====================================================
   CHAT MESSAGES - Assistant/Coach Messages
   ===================================================== */

/* Assistant/coach messages - gray background with white text */
.message.assistant-message .message-content,
.message.coach-message .message-content {
  background: #555555 !important;
  color: #ffffff !important;
}

/* =====================================================
   HOME PAGE HEADINGS - Consistent Title Styling
   ===================================================== */

/* Continue session heading */
#my-sessions-section > h3 {
  font-family: 'Arial Black', Helvetica, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--bamya-tile-text) !important;
}

/* Session tile titles and Pick a new topic button text */
.session-tile .session-label,
.all-sessions-tile .session-label {
  font-family: 'Arial Black', Helvetica, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--bamya-tile-text) !important;
}

/* =====================================================
   COMPLETED SESSIONS TILE - Custom Layout
   ===================================================== */

/* Completed sessions tile - horizontal layout with icon and content */
.completed-sessions-tile {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.5rem !important;
  padding: 1.5rem !important;
  text-align: left !important;
  justify-content: flex-start !important;
  border-color: #999999 !important;
}

/* Icon - centered vertically on the left */
.completed-sessions-icon {
  flex-shrink: 0 !important;
  display: inline-block !important;
  font-size: 47px !important;
  transition: transform 0.3s ease !important;
  margin-left: 1rem !important;
  color: var(--bamya-tile-text) !important;
}

.completed-sessions-tile:hover .completed-sessions-icon {
  transform: scale(1.2) rotate(15deg) !important;
}

/* Content area - title and list */
.completed-sessions-content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

/* Title */
.completed-sessions-title {
  font-family: 'Arial Black', Helvetica, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--bamya-tile-text) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* List */
.completed-sessions-list {
  list-style: disc !important;
  margin: 0 !important;
  padding-left: 1.5rem !important;
  color: var(--bamya-tile-text) !important;
}

.completed-sessions-list li {
  font-size: 1rem !important;
  font-weight: bold !important;
  line-height: 1.6 !important;
  color: var(--bamya-tile-text) !important;
  margin-bottom: 0.25rem !important;
}

/* =====================================================
   RECENT COMPLETION ACTION BUTTONS - Bigger Icons
   ===================================================== */

/* Make action button icons bigger */
.rc-redo-btn .stat-icon-compact,
.rc-cheatsheet-btn .stat-icon-compact,
.rc-discuss-buddy-btn .stat-icon-compact {
  font-size: 48px !important;
}

/* =====================================================
   TOOLBOX PAGE - Tool Icons Override
   Replace all tool icons with FontAwesome open book
   ===================================================== */

/* Override tool icon container - make it a black circle */
.tool-icon {
  background: #141414 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* Hide the original SVG icon and ::before pseudo-element */
.tool-icon img,
.tool-icon-svg,
.tool-icon::before,
.tool-icon-green::before,
.tool-icon-yellow::before,
.tool-icon-orange::before,
.tool-icon-blue::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Add FontAwesome open book icon using ::after */
.tool-icon::after {
  content: '\f518' !important;  /* FontAwesome book-open icon */
  font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', FontAwesome !important;
  font-weight: 900 !important;
  font-size: 36px !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Remove color classes effect */
.tool-icon-green,
.tool-icon-yellow,
.tool-icon-orange,
.tool-icon-blue {
  background: #141414 !important;
}

/* Hover effect - slightly lighter background */
.adhd-tool-card:hover .tool-icon {
  background: #333333 !important;
  animation: none !important;
}

/* Level completion date - black text */
.level-date {
  color: #141414 !important;
}