/* ===== GLOBAL STYLES - British Smart Minds Academy ===== */

/* Custom Properties */
:root {
  --bsm-navy: #1A2E6F;
  --bsm-gold: #C9A84C;
  --bsm-gold-light: #F0D080;
  --bsm-white: #FFFFFF;
  --bsm-offwhite: #F5F6FA;
  --bsm-success: #2ECC8E;
  --bsm-text: #2D2D2D;
  --bsm-muted: #7A8599;
  --sidebar-width: 240px;
  --sidebar-collapsed: 72px;
  --navbar-height: 64px;
}

/* Bootstrap overrides */
:root {
  --bs-primary: var(--bsm-navy);
  --bs-body-bg: var(--bsm-offwhite);
}
.btn-primary {
  background-color: var(--bsm-navy);
  border-color: var(--bsm-navy);
}
.btn-primary:hover {
  background-color: #142558;
  border-color: #142558;
}

/* Typography */
[lang="ar"] .font-display {
  font-family: 'Tajawal', sans-serif;
}
[lang="en"] .font-display {
  font-family: 'Playfair Display', serif;
}
.font-body {
  font-family: 'Cairo', sans-serif;
}
body {
  font-family: 'Cairo', sans-serif;
  color: var(--bsm-text);
  background: var(--bsm-offwhite);
}

/* BSM Card */
.bsm-card {
  background: var(--bsm-white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(26, 46, 111, 0.08);
  transition: all 0.25s ease;
}
.bsm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(26, 46, 111, 0.15);
}

/* Sidebar */
.bsm-sidebar {
  background: linear-gradient(180deg, var(--bsm-navy) 0%, #0F1D4A 100%);
  width: var(--sidebar-width);
  min-height: calc(100vh - var(--navbar-height));
  transition: width 0.3s ease;
}
.bsm-sidebar.collapsed {
  width: var(--sidebar-collapsed);
}
.sidebar-link {
  color: rgba(255, 255, 255, 0.8);
  padding: 0.75rem 1rem;
  border-left: 3px solid transparent;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: all 0.2s;
}
[dir="rtl"] .sidebar-link {
  border-left: none;
  border-right: 3px solid transparent;
}
.sidebar-link:hover {
  color: var(--bsm-white);
  background: rgba(255, 255, 255, 0.1);
}
.sidebar-link.active {
  color: var(--bsm-gold);
  border-left-color: var(--bsm-gold);
  background: rgba(201, 168, 76, 0.1);
}
[dir="rtl"] .sidebar-link.active {
  border-right-color: var(--bsm-gold);
  border-left-color: transparent;
}
.bsm-sidebar.collapsed .sidebar-text {
  display: none;
}
.bsm-sidebar.collapsed > div:first-child img {
  width: 36px;
  height: 36px;
}
.bsm-sidebar.collapsed > div:first-child {
  padding: 0.5rem !important;
}
.sidebar-link i {
  flex-shrink: 0;
  font-size: 1.25rem;
}

/* Navbar */
.bsm-navbar {
  height: var(--navbar-height);
  background: var(--bsm-white);
  box-shadow: 0 2px 12px rgba(26, 46, 111, 0.06);
}

/* RTL: Navbar actions - position at start (right) and fix order using logical flex */
[dir="rtl"] .bsm-navbar .container-fluid > .d-flex.ms-auto {
  margin-inline-start: 0;
  margin-inline-end: auto; /* push to inline-start (right) in RTL */
  flex-direction: row-reverse; /* User first at start, then Bell, EN at end */
  gap: 0.5rem;
}

/* RTL: Dropdown menu - align to inline-end (right) of trigger */
[dir="rtl"] .bsm-navbar .dropdown-menu-end {
  left: auto;
  right: 0;
}

/* RTL: Avatar spacing - logical margin between text and avatar */
[dir="rtl"] .bsm-navbar .dropdown-toggle .me-2 {
  margin-inline-end: 0;
  margin-inline-start: 0.5rem;
}

.main-content {
  margin-top: var(--navbar-height);
  min-height: calc(100vh - var(--navbar-height));
}

/* Progress bar */
.bsm-progress-bar {
  height: 8px;
  background: rgba(26, 46, 111, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.bsm-progress-fill {
  height: 100%;
  border-radius: 4px;
  animation: fillBar 1s ease-out forwards;
  transform-origin: left;
}
[dir="rtl"] .bsm-progress-fill {
  transform-origin: right;
}

/* View fade */
[data-view]:not(.d-none) {
  animation: viewFadeIn 0.3s ease-out;
}

/* Toast container */
.toast-container {
  position: fixed;
  top: calc(var(--navbar-height) + 16px);
  right: 16px;
  z-index: 1100;
}
[dir="rtl"] .toast-container {
  right: auto;
  left: 16px;
}

/* Logo placeholder */
.bsm-logo-placeholder {
  width: 48px;
  height: 48px;
  background: var(--bsm-navy);
  color: var(--bsm-gold);
  font-weight: 700;
  font-size: 0.875rem;
}

/* Modal styling */
.bsm-modal-content .modal-header {
  background: var(--bsm-navy);
  color: white;
  border-radius: 20px 20px 0 0;
}
.bsm-modal-content {
  border-radius: 20px;
}

/* Animations */
@keyframes fillBar {
  from {
    width: 0% !important;
  }
  to {
    width: var(--target-width, 0) !important;
  }
}
@keyframes viewFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleFade {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Desktop sidebar */
@media (min-width: 992px) {
  .bsm-sidebar {
    position: fixed;
    top: var(--navbar-height);
    bottom: 0;
    left: 0;
    z-index: 1030;
  }
  [dir="rtl"] .bsm-sidebar {
    left: auto;
    right: 0;
  }
  .main-content {
    margin-inline-start: var(--sidebar-width);
  }
  .sidebar-collapsed .main-content {
    margin-inline-start: var(--sidebar-collapsed);
  }
  .sidebar-collapsed .bsm-sidebar {
    width: var(--sidebar-collapsed);
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .bsm-sidebar {
    position: fixed;
    top: var(--navbar-height);
    bottom: 0;
    left: 0;
    width: var(--sidebar-collapsed) !important;
    z-index: 1030;
  }
  [dir="rtl"] .bsm-sidebar {
    left: auto;
    right: 0;
  }
  .bsm-sidebar .sidebar-text {
    display: none;
  }
  .bsm-sidebar > div:first-child img {
    width: 36px;
    height: 36px;
  }
  .bsm-sidebar > div:first-child {
    padding: 0.5rem !important;
  }
  .main-content {
    margin-inline-start: var(--sidebar-collapsed);
  }
}

/* Mobile sidebar overlay */
@media (max-width: 767px) {
  .bsm-sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    width: var(--sidebar-width) !important;
    height: calc(100vh - var(--navbar-height));
    z-index: 1040;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }
  [dir="rtl"] .bsm-sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }
  .bsm-sidebar.show {
    transform: translateX(0);
  }
  .main-content {
    margin-inline-start: 0 !important;
  }
  .bsm-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1035;
    display: none;
  }
  .bsm-sidebar-backdrop.show {
    display: block;
  }
}
@media (min-width: 768px) {
  .bsm-sidebar-backdrop {
    display: none !important;
  }
}