/*
 * Clarkson Fantasy Sports - Main Stylesheet
 * This file contains global variables and core styles used throughout the site
 */

/* ========== VARIABLES ========== */
:root {
  /* Core Colors */
  --core-primary: #004e42;
  --core-secondary: #ffcd00;

  /* Secondary Colors - Bold */
  --bold-green: #7a9a01;
  --bold-orange: #cf4520;
  --bold-blue: #418fde;
  --bold-navy: #002d72;

  /* Secondary Colors - Mature */
  --mature-sage: #a2a569;
  --mature-tan: #c6893f;
  --mature-blue: #7bafd4;
  --mature-teal: #005587;

  /* Neutral Colors */
  --neutral-light: #d7d2cb;
  --neutral-medium: #a59c94;
  --neutral-dark: #6e6259;

  /* Social Media Colors */
  --yahoo-purple: #6001D2;
  --yahoo-purple-dark: #4B01A5;
}

/* ========== CORE ELEMENTS ========== */

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--core-primary);
}

/* ========== LAYOUT COMPONENTS ========== */

/* Cards */
.card {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 1.5rem;
}

.card-header {
  background-color: var(--core-primary);
  color: white;
  font-weight: 500;
}

.card-title {
  color: var(--core-primary);
  font-weight: 600;
}

.border-success {
  border-color: var(--bold-green) !important;
}

/* Navigation */
.navbar-dark.bg-success {
  background-color: var(--core-primary) !important;
}

.navbar-dark .navbar-brand {
  color: white;
}

.navbar-dark .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
}

.navbar-dark .nav-link:hover {
  color: white !important;
}

/* Navbar Active States - Both Main Nav and Dropdowns */
.navbar-dark .nav-link.active,
.navbar .nav-link.active,
.navbar .dropdown-item.active,
.dropdown-menu .dropdown-item.active {
  background-color: var(--core-secondary) !important;
  color: var(--core-primary) !important;
  font-weight: 600;
}

.navbar-dark .nav-link.active:hover,
.navbar .nav-link.active:hover,
.navbar .dropdown-item.active:hover,
.dropdown-menu .dropdown-item.active:hover {
  background-color: var(--core-secondary) !important;
  color: var(--core-primary) !important;
}

/* Tables */
.table thead th {
  background-color: var(--core-primary);
  color: white;
  border-bottom: none;
  font-weight: 500;
}

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(215, 210, 203, 0.3);
}

.table-hover tbody tr:hover {
  background-color: rgba(255, 205, 0, 0.1);
}

/* Table Header Style Variants - TinyMCE Custom Styles */
.tinymce-header-primary {
  background-color: var(--core-primary) !important;
  color: white !important;
  border-bottom: 2px solid var(--core-secondary) !important;
}

.tinymce-header-secondary {
  background-color: var(--core-secondary) !important;
  color: var(--core-primary) !important;
  border-bottom: 2px solid var(--core-primary) !important;
}

.tinymce-header-success {
  background-color: var(--bold-green) !important;
  color: white !important;
  border-bottom: 2px solid var(--mature-sage) !important;
}

.tinymce-header-warning {
  background-color: var(--mature-tan) !important;
  color: white !important;
  border-bottom: 2px solid var(--bold-orange) !important;
}

.tinymce-header-info {
  background-color: var(--mature-blue) !important;
  color: white !important;
  border-bottom: 2px solid var(--mature-teal) !important;
}

/* TinyMCE Table Style Variants */
.tinymce-table-striped tbody tr:nth-child(odd) {
  background-color: rgba(215, 210, 203, 0.3) !important;
}

.tinymce-table-striped tbody tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.tinymce-table-bordered {
  border: 2px solid var(--neutral-medium) !important;
}

.tinymce-table-bordered th,
.tinymce-table-bordered td {
  border: 1px solid var(--neutral-medium) !important;
}

.tinymce-table-hover tbody tr:hover {
  background-color: rgba(255, 205, 0, 0.2) !important;
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.tinymce-table-compact th,
.tinymce-table-compact td {
  padding: 6px 10px !important;
  font-size: 0.9em;
}

/* ========== UI COMPONENTS ========== */

/* Buttons */
.btn-success {
  background-color: var(--bold-green);
  border-color: var(--bold-green);
}

.btn-success:hover, .btn-success:focus {
  background-color: #698501;
  border-color: #698501;
}

.btn-primary {
  background-color: var(--core-primary);
  border-color: var(--core-primary);
}

.btn-primary:hover, .btn-primary:focus {
  background-color: #003c33;
  border-color: #003c33;
}

.btn-info {
  background-color: var(--mature-blue);
  border-color: var(--mature-blue);
  color: white;
}

.btn-info:hover, .btn-info:focus {
  background-color: #6a9ec3;
  border-color: #6a9ec3;
  color: white;
}

.btn-warning {
  background-color: var(--core-secondary);
  border-color: var(--core-secondary);
  color: var(--core-primary);
}

.btn-warning:hover, .btn-warning:focus {
  background-color: #e6b900;
  border-color: #e6b900;
  color: var(--core-primary);
}

.btn-outline-success {
  color: var(--bold-green);
  border-color: var(--bold-green);
}

.btn-outline-success:hover, .btn-outline-success:focus {
  background-color: var(--bold-green);
  border-color: var(--bold-green);
}

.btn-outline-primary {
  color: var(--core-primary);
  border-color: var(--core-primary);
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--core-primary);
  border-color: var(--core-primary);
}

/* Social Provider Buttons */
.btn-yahoo {
  background-color: #6001D2;
  color: #ffffff;
}

.btn-yahoo:hover {
  background-color: #4B01A5;
  color: #ffffff;
}

/* Google Button */
.btn-google {
  background-color: #DB4437;
  color: #ffffff;
  border: none;
  transition: all 0.2s ease;
}

.btn-google:hover {
  background-color: #A33224;
  color: #ffffff;
}

/* Badges */
.badge.bg-success {
  background-color: var(--bold-green) !important;
}

.badge.bg-secondary {
  background-color: var(--neutral-medium) !important;
}

.badge.bg-info {
  background-color: var(--mature-blue) !important;
}

.badge.bg-primary {
  background-color: var(--core-primary) !important;
}

.badge.bg-warning {
  background-color: var(--core-secondary) !important;
  color: var(--core-primary);
}

/* Alerts */
.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

.alert-info {
  background-color: rgba(123, 175, 212, 0.2);
  border-color: var(--mature-blue);
  color: var(--mature-teal);
}

/* Form Elements */
.form-label {
  color: var(--core-primary);
  font-weight: 500;
}

.form-select:focus, .form-control:focus {
  border-color: var(--core-primary);
  box-shadow: 0 0 0 0.25rem rgba(0, 78, 66, 0.25);
}

.form-check-input:checked {
  background-color: var(--bold-green);
  border-color: var(--bold-green);
}

/* ========== UTILITY CLASSES ========== */

/* Background Colors */
.bg-success {
  background-color: var(--core-primary) !important;
  color: white !important;
}

.bg-light {
  background-color: var(--neutral-light) !important;
}

/* Text Colors */
.text-success {
  color: var(--core-primary) !important;
}

/* Loading indicator (initially hidden) */
.loading-indicator {
  display: none;
}

/* Hidden element class (for JavaScript toggling) */
.hidden {
  display: none !important;
}

/* Alert with max width */
.alert-max-width {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Navbar Active State */
.navbar.bg-success {
  background-color: var(--core-primary) !important;
}

.navbar .nav-link.active,
.navbar .dropdown-item.active {
  background-color: var(--core-secondary) !important;
  color: var(--core-primary) !important;
}

.navbar .nav-link.active:hover,
.navbar .dropdown-item.active:hover {
  color: var(--core-primary) !important;
}

.navbar .dropdown-item:hover {
  background-color: rgba(255, 205, 0, 0.1);
  color: var(--core-primary);
}

/* Alert close button */
.alert .btn-close {
  color: #000;
}

/* Dropdown Menu Styling */
.navbar .dropdown-menu,
.dropdown-menu {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.navbar .dropdown-item,
.dropdown-menu .dropdown-item {
  color: var(--core-primary);
}

.navbar .dropdown-item:hover,
.dropdown-menu .dropdown-item:hover {
  background-color: rgba(255, 205, 0, 0.1);
  color: var(--core-primary);
}

.navbar .dropdown-header,
.dropdown-menu .dropdown-header {
  color: var(--core-primary);
  font-weight: 600;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar .dropdown-divider,
.dropdown-menu .dropdown-divider {
  border-color: rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
}

/* ========== USER PROFILE STYLES ========== */

/* Profile Header */
.profile-header {
  background-color: var(--core-primary);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-header h1,
.profile-header p {
  color: white;
}

.profile-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid var(--core-secondary);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--core-primary);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Sidebar */
.profile-sidebar .nav-link {
  color: var(--core-primary);
  border-radius: 0.375rem;
  margin-bottom: 0.25rem;
  transition: all 0.2s ease;
}

.profile-sidebar .nav-link:hover {
  background-color: rgba(0, 78, 66, 0.05);
}

.profile-sidebar .nav-link.active {
  background-color: var(--core-primary);
  color: white;
}

.profile-sidebar .nav-link-danger {
  color: var(--bold-orange);
}

.profile-sidebar .nav-link-danger:hover {
  background-color: rgba(207, 69, 32, 0.05);
}

/* Connected Account Item */
.connected-account {
  display: flex;
  align-items: center;
  border-radius: 0.375rem;
  background-color: rgba(215, 210, 203, 0.1);
}

.connected-account i {
  font-size: 1.5rem;
  color: var(--bold-blue);
}

/* Toggle Switch for Notifications */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .toggle-slider {
  background-color: var(--bold-green);
}

input:checked + .toggle-slider:before {
  transform: translateX(26px);
}

/* Session Item */
.session-item {
  border-radius: 0.375rem;
  background-color: rgba(215, 210, 203, 0.1);
  border-left: 4px solid var(--bold-green);
}