/* Learning Management System - Brand Theme (Blue + Orange) */
:root {
  /* Brand palette */
  --brand-primary: #1E3A8A;        /* deep blue */
  --brand-primary-hover: #1E40AF;  /* darker blue for hover */
  --brand-primary-light: #3B82F6;  /* light blue for accents */
  --brand-accent: #0EA5E9;         /* blue accent */
  --brand-accent-hover: #0284C7;   /* darker blue for hover */

  --brand-success: #16A34A;        /* green */
  --brand-danger: #DC2626;         /* red */
  --brand-warning: #F59E0B;        /* amber */
  --brand-info: #3B82F6;           /* info blue */

  --brand-bg: #F8FAFC;             /* page background */
  --brand-surface: #FFFFFF;        /* cards/surfaces */
  --brand-text: #0F172A;           /* headings/body text */
  --brand-muted: #475569;          /* secondary text */
  --brand-border: #E2E8F0;         /* borders/dividers */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, Noto Sans, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  /* Blue → Orange gradient for brand text/elements */
  --brand-grad-start: #1E3A8A;   /* blue */
  --brand-grad-mid:   #2563EB;   /* mid blue */
  --brand-grad-end:   #3B82F6;   /* blue end gradient */

  /* Bootstrap CSS variable overrides */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 30, 58, 138;
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-info: var(--brand-accent);          /* use orange as brand info accent */
  --bs-info-rgb: 249, 115, 22;
  --bs-success: var(--brand-success);
  --bs-danger: var(--brand-danger);
  --bs-warning: var(--brand-warning);
}

/* Header hover fix: ensure header actions stay blue on hover (learn_course.php header right) */
@media (min-width: 992px) {
  .navbar-light .nav-link:hover, .navbar-light .dropdown-toggle:hover {
    color: #fff !important;
    /* Light blue hover background */
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
  }
  .navbar-light .dropdown-menu .dropdown-item:hover {
    /* Light blue hover background for dropdown items */
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #fff !important;
  }
}

html { font-size: 16px; }
body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--brand-text);
  letter-spacing: -0.015em;
  margin: 0 0 0.5rem 0;
}

h1 { font-weight: 800; font-size: clamp(1.875rem, 3.5vw, 3rem); line-height: 1.1; }
h2 { font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; }
h3 { font-weight: 700; font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.2; }
h4 { font-weight: 700; font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.25; }

p { margin: 0 0 0.75rem 0; color: var(--brand-muted); }
small, .text-muted { color: #64748b !important; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { color: var(--brand-primary-hover); text-decoration: none; }

/* Buttons */
.btn-brand {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  color: #fff; border: none; border-radius: 12px;
}

.btn-primary{
  background-image: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-hover));
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
}
.btn-primary:hover{
  background-image: linear-gradient(135deg, var(--brand-primary-hover), var(--brand-primary));
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
  color: #fff;
}
.btn-outline-primary{
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.btn-outline-primary:hover{
  color: #fff;
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Accent utility (orange) */
.btn-accent{
  background-image: linear-gradient(135deg, var(--brand-accent), var(--brand-accent-hover));
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
  color: #fff;
}
.btn-outline-accent{
  color: var(--brand-accent);
  border-color: var(--brand-accent);
}
.btn-outline-accent:hover{
  color: #fff;
  background-color: var(--brand-accent);
  border-color: var(--brand-accent);
}

/* Status colors */
.btn-success{ background-color: var(--brand-success); border-color: var(--brand-success); }
.btn-success:hover{ background-color: #15803D; border-color: #15803D; }
.btn-danger{ background-color: var(--brand-danger); border-color: var(--brand-danger); }
.btn-danger:hover{ background-color: #B91C1C; border-color: #B91C1C; }
.btn-warning{ background-color: var(--brand-warning); border-color: var(--brand-warning); color: #111827; }

/* Info elements using brand accent (orange) */
.bg-info{ background-color: var(--bs-info) !important; }
.text-info{ color: var(--bs-info) !important; }
.badge.bg-info{ background-color: var(--bs-info) !important; }

/* Brand text gradient (Blue → Orange) */
.text-brand {
  background-image: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 50%, var(--brand-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-accent { background-color: var(--brand-accent) !important; }
.text-brand-primary { color: var(--brand-primary) !important; }
.text-brand-accent { color: var(--brand-accent) !important; }
.border-brand-primary { border-color: var(--brand-primary) !important; }
.border-brand-accent { border-color: var(--brand-accent) !important; }

/* Common component accents to brand */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
  background-color: var(--brand-primary);
}
.page-link{ color: var(--brand-primary); }
.page-item.active .page-link{
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-check-input:checked{
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-range::-webkit-slider-thumb{ background-color: var(--brand-primary); }
.form-range::-moz-range-thumb{ background-color: var(--brand-primary); }

/* Sidebar: white background with deep blue borders on desktop */
@media (min-width: 992px) {
  .sidebar { background: #fff !important; border-right: none !important; }
  .sidebar .card-header { background: #fff !important; border-bottom: none !important; color: #0f172a !important; }
  .sidebar .lesson-nav-item { background: #fff !important; border: 0 !important; color: #0f172a !important; }
  .sidebar .lesson-nav-item:hover { background: #fff !important; border-color: transparent !important; color: #0f172a !important; }
  .sidebar .lesson-nav-item.active { background: #fff !important; color: var(--brand-primary) !important; border-color: transparent !important; }
  .sidebar-header { background: #fff !important; border-bottom: none !important; }
}

/* Navbar brand text can use gradient */
.navbar-brand {
  background-image: linear-gradient(90deg, var(--brand-grad-start), var(--brand-grad-mid) 50%, var(--brand-grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  display: inline-block;
  font-weight: 800;
}

.lead { font-size: clamp(1.05rem, 1.8vw, 1.25rem); color: var(--brand-muted); }
.card-title { font-weight: 700; font-size: 1.05rem; }
.card-text { color: var(--brand-muted); }