/* ===== IBMS BRAND THEME: WHITE HEADER & PURPLE CONTENT ===== */
/* Custom branding for IBMS with white header and deep purple content sections */

:root {
  /* Brand Colors */
  --brand-header-bg: #ffffff;
  --brand-header-text: #1d194c;
  --brand-header-accent: #5e5df6;
  
  --brand-content-bg: #1d194c;
  --brand-content-text: #ffffff;
  --brand-content-accent: #9fabfd;
  
  --brand-primary: #5e5df6;
  --brand-secondary: #9fabfd;
  --brand-dark: #1d194c;
  --brand-light: #ffffff;
  
  /* Typography - Montserrat Font */
  --brand-font-family: 'Montserrat', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  /* Contrast Colors for Links */
  --brand-link-on-purple: #9fabfd;
  --brand-link-hover-on-purple: #ffffff;
  
  /* Shadows and Effects */
  --brand-header-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  --brand-card-shadow: 0 4px 20px rgba(29, 25, 76, 0.1);
}

/* Global Font Family */
body,
html {
  font-family: var(--brand-font-family) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--brand-font-family) !important;
  font-weight: 600;
}

/* ===== WHITE HEADER STYLES ===== */
.trendz-header,
.navbar,
header {
  background: var(--brand-header-bg) !important;
  color: var(--brand-header-text) !important;
  box-shadow: var(--brand-header-shadow) !important;
  border-bottom: 3px solid var(--brand-header-accent);
}

/* Header Navigation Links */
.trendz-header a,
.navbar a,
.navbar-brand,
header a {
  color: var(--brand-header-text) !important;
  transition: all 0.3s ease;
}

.trendz-header a:hover,
.navbar a:hover,
header a:hover {
  color: var(--brand-header-accent) !important;
}

/* Navbar Brand Logo/Text */
.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand-header-text) !important;
  font-family: var(--brand-font-family) !important;
}

.navbar-brand img {
  max-height: 45px;
  width: auto;
  transition: opacity 0.3s ease;
}

.navbar-brand img:hover {
  opacity: 0.9;
}

.navbar-brand i {
  color: var(--brand-header-accent) !important;
}

/* Navigation Links in Header */
.navbar-nav .nav-link {
  color: var(--brand-header-text) !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-family: var(--brand-font-family) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--brand-header-accent) !important;
  background: rgba(94, 93, 246, 0.1);
  transform: translateY(-2px);
}

/* Mobile Menu Toggle */
.navbar-toggler {
  border-color: var(--brand-header-text);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(29, 25, 76, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown Menus in Header */
.navbar .dropdown-menu {
  background: var(--brand-header-bg);
  border: 1px solid rgba(94, 93, 246, 0.2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.navbar .dropdown-item {
  color: var(--brand-header-text);
}

.navbar .dropdown-item:hover {
  background: rgba(94, 93, 246, 0.1);
  color: var(--brand-header-accent);
}

/* ===== PURPLE CONTENT SECTIONS ===== */
.content-section,
.main-content,
main {
  background: var(--brand-content-bg);
  color: var(--brand-content-text);
  padding: 2rem 0;
}

/* Cards with Purple Background */
.brand-card,
.content-section .card,
.purple-content .card {
  background: var(--brand-content-bg);
  color: var(--brand-content-text);
  border: 1px solid rgba(159, 171, 253, 0.2);
  box-shadow: var(--brand-card-shadow);
  border-radius: 12px;
}

.brand-card .card-header,
.content-section .card .card-header {
  background: rgba(94, 93, 246, 0.3);
  color: var(--brand-content-text);
  border-bottom: 2px solid var(--brand-content-accent);
  font-weight: 600;
}

.brand-card .card-body,
.content-section .card .card-body {
  background: var(--brand-content-bg);
  color: var(--brand-content-text);
}

/* Links on Purple Background */
.content-section a,
.brand-card a,
.purple-content a {
  color: var(--brand-link-on-purple);
  text-decoration: underline;
  text-decoration-color: rgba(159, 171, 253, 0.3);
  transition: all 0.3s ease;
}

.content-section a:hover,
.brand-card a:hover,
.purple-content a:hover {
  color: var(--brand-link-hover-on-purple);
  text-decoration-color: var(--brand-link-hover-on-purple);
}

/* Buttons on Purple Background */
.content-section .btn-primary,
.brand-card .btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  border: none;
  color: var(--brand-dark);
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(159, 171, 253, 0.3);
}

.content-section .btn-primary:hover,
.brand-card .btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-secondary), var(--brand-light));
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(159, 171, 253, 0.5);
}

.content-section .btn-outline-primary,
.brand-card .btn-outline-primary {
  border: 2px solid var(--brand-content-accent);
  color: var(--brand-content-accent);
  background: transparent;
}

.content-section .btn-outline-primary:hover,
.brand-card .btn-outline-primary:hover {
  background: var(--brand-content-accent);
  color: var(--brand-dark);
}

/* Tables on Purple Background */
.content-section table,
.brand-card table {
  color: var(--brand-content-text);
}

.content-section table thead,
.brand-card table thead {
  background: rgba(159, 171, 253, 0.2);
  color: var(--brand-content-text);
}

.content-section table tbody tr,
.brand-card table tbody tr {
  border-bottom: 1px solid rgba(159, 171, 253, 0.1);
}

.content-section table tbody tr:hover,
.brand-card table tbody tr:hover {
  background: rgba(159, 171, 253, 0.05);
}

/* Form Inputs on Purple Background */
.content-section .form-control,
.brand-card .form-control,
.content-section .form-select,
.brand-card .form-select {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(159, 171, 253, 0.3);
  color: var(--brand-dark);
}

.content-section .form-control:focus,
.brand-card .form-control:focus {
  background: var(--brand-light);
  border-color: var(--brand-content-accent);
  box-shadow: 0 0 0 0.2rem rgba(159, 171, 253, 0.25);
}

/* Labels on Purple Background */
.content-section label,
.brand-card label,
.content-section .form-label,
.brand-card .form-label {
  color: var(--brand-content-text);
  font-weight: 500;
}

/* Alerts on Purple Background */
.content-section .alert,
.brand-card .alert {
  background: rgba(159, 171, 253, 0.15);
  border: 1px solid rgba(159, 171, 253, 0.3);
  color: var(--brand-content-text);
}

/* Badges on Purple Background */
.content-section .badge,
.brand-card .badge {
  font-weight: 600;
}

/* Text Colors on Purple */
.content-section .text-muted,
.brand-card .text-muted {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Section Dividers */
.content-section hr,
.brand-card hr {
  border-color: rgba(159, 171, 253, 0.2);
}

/* ===== MIXED SECTIONS (WHITE BACKGROUND WITH PURPLE ACCENTS) ===== */
.white-section {
  background: var(--brand-light);
  color: var(--brand-dark);
  padding: 2rem 0;
}

.white-section .card {
  background: var(--brand-light);
  border: 1px solid rgba(29, 25, 76, 0.1);
}

.white-section .card-header {
  background: var(--brand-dark);
  color: var(--brand-light);
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
/* Ensure proper contrast ratios (WCAG AA compliance) */
.content-section ::placeholder,
.brand-card ::placeholder {
  color: rgba(29, 25, 76, 0.6);
}

/* Focus indicators for keyboard navigation */
.content-section a:focus,
.brand-card a:focus,
.navbar a:focus {
  outline: 2px solid var(--brand-content-accent);
  outline-offset: 2px;
}

/* ===== UTILITY CLASSES ===== */
.bg-brand-purple {
  background: var(--brand-content-bg) !important;
  color: var(--brand-content-text) !important;
}

.bg-brand-white {
  background: var(--brand-header-bg) !important;
  color: var(--brand-header-text) !important;
}

.text-brand-purple {
  color: var(--brand-dark) !important;
}

.text-brand-accent {
  color: var(--brand-content-accent) !important;
}

.border-brand-accent {
  border-color: var(--brand-content-accent) !important;
}

/* ===== SMOOTH TRANSITIONS ===== */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}