/* ==========================================================================
   Global Theme • Scholarship Test
   Works across: index.php, test.php, result.php, /admin/*
   Built on Bootstrap 5 – keep this file loaded AFTER Bootstrap CSS
   ========================================================================== */

/* --- CSS Variables (Brand Palette) --- */
:root{
    --blue-600:#2563eb;
    --blue-700:#1d4ed8;
    --indigo-600:#4f46e5;
    --violet-500:#7c3aed;
    --cyan-500:#06b6d4;
    --teal-500:#14b8a6;
    --amber-500:#f59e0b;
    --rose-500:#ef4444;
    --slate-800:#0f172a;
    --slate-700:#334155;
    --muted:#64748b;
  
    --soft-1:#f5f9ff;
    --soft-2:#e8f0ff;
    --glass-bg: rgba(255,255,255,.80);
    --glass-br: rgba(255,255,255,.35);
  }
  
  /* --- Base & Utilities --- */
  *{ box-sizing:border-box }
  html,body{ scroll-behavior:smooth }
  .fw-extrabold{ font-weight:800 }
  .rounded-3xl{ border-radius:1.25rem }
  .text-deep{ color:#0f172a }
  .text-gradient{
    background:linear-gradient(90deg,var(--blue-600),var(--indigo-600));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .badge-soft{
    display:inline-block; background:linear-gradient(90deg,#dbeafe,#e9d5ff);
    color:#1e293b; border-radius:999px; padding:.4rem .7rem; font-weight:600;
  }
  .btn-gradient{
    background:linear-gradient(90deg,var(--blue-600),var(--indigo-600));
    border:none; color:#fff;
  }
  .btn-gradient:hover{ filter:brightness(1.05); color:#fff }
  
  /* --- Backgrounds --- */
  .bg-soft{ background: #f5f9ff; }
  .bg-gradient{
    background: linear-gradient(135deg, #f5f9ff 0%, #e8f0ff 40%, #eaf3ff 100%);
  }
  body.bg-hero{
    min-height:100vh;
    background:
      radial-gradient(1200px 600px at -10% -10%, #dbeafe 0%, transparent 60%),
      radial-gradient(1200px 600px at 110% 10%, #e9d5ff 0%, transparent 60%),
      linear-gradient(135deg,#f0f9ff 0%,#e8f0ff 40%,#eef2ff 100%);
  }
  body.bg-result{
    min-height:100vh;
    background:
      radial-gradient(800px 400px at 0% 0%, #dbeafe 0%, transparent 60%),
      radial-gradient(900px 400px at 100% 0%, #ede9fe 0%, transparent 60%),
      linear-gradient(135deg, #f5f9ff 0%, #eef2ff 100%);
    position: relative;
    overflow-x: hidden;
  }
  
  /* --- Nav --- */
  .glassy-nav{
    background:linear-gradient(90deg, rgba(37,99,235,.95), rgba(79,70,229,.95));
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
  }
  .brand-mark{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.15)); }
  
  /* --- Glass Cards --- */
  .glassy-card, .glassy-form{
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border:1px solid var(--glass-br);
  }
  
  /* --- Hero Art & Decorative Elements --- */
  .hero-art{ position:relative; min-height:360px; }
  .bubble{ position:absolute; border-radius:50%; filter: blur(30px); opacity:.75; }
  .bubble-1{ width:220px; height:220px; background:#bfdbfe; top:8%; right:10%; }
  .bubble-2{ width:140px; height:140px; background:#c7d2fe; bottom:12%; right:28%; }
  .bubble-3{ width:160px; height:160px; background:#ccfbf1; top:40%; right:0; }
  .wave{ position:absolute; left:0; bottom:-1px; width:100%; height:auto; pointer-events:none; }
  
  /* --- Feature Cards / Icon Pills --- */
  .icon-pill{ width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; }
  .ip-blue{   background:linear-gradient(135deg,#3b82f6,#1e3a8a) }
  .ip-violet{ background:linear-gradient(135deg,#8b5cf6,#4c1d95) }
  .ip-cyan{   background:linear-gradient(135deg,#06b6d4,#0e7490) }
  .ip-amber{  background:linear-gradient(135deg,#f59e0b,#92400e) }
  .ip-teal{   background:linear-gradient(135deg,#14b8a6,#065f46) }
  .ip-rose{   background:linear-gradient(135deg,#ef4444,#881337) }
  
  /* --- Stats Chips (index + result) --- */
  .stat-chip{
    border-radius:16px; padding:1rem; background:#fff;
    border:1px solid #eef2ff; box-shadow:0 10px 28px rgba(2,6,23,.06); text-align:center;
  }
  .stat-label{ font-size:.85rem; color:var(--muted) }
  .stat-value{ font-weight:800; font-size:1.35rem }
  
  /* --- Test Page (MCQ options) --- */
  .option-tile{
    border: 1px solid #e7ebf3; border-radius: .75rem; padding: .25rem .5rem; background: #fff;
    transition: transform .05s ease, box-shadow .2s ease;
  }
  .option-tile:hover{
    box-shadow: 0 6px 18px rgba(13,110,253,.08);
    transform: translateY(-1px);
  }
  .option-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:50%;
    margin-right:.5rem; font-weight:700; border:1px solid var(--blue-600); color:var(--blue-600);
  }
  
  /* --- Result Page --- */
  .result-glass{
    background: var(--glass-bg);
    border:1px solid var(--glass-br);
    backdrop-filter: blur(10px);
  }
  .colorful-line{
    display:inline-block; padding:.4rem .7rem; border-radius:.75rem;
    background:linear-gradient(90deg, #e0e7ff, #cffafe, #fce7f3);
  }
  .highlight-link{
    color:var(--indigo-600); text-decoration:none; border-bottom:2px solid rgba(79,70,229,.25); padding-bottom:1px;
  }
  .highlight-link:hover{ color:#3730a3; border-color: rgba(55,48,163,.45); }
  
  /* Confetti Canvas (result pass) */
  #confettiCanvas{
    position:fixed; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:2;
  }
  
  /* --- Admin Panel Styling --- */
  .admin-nav{ background:linear-gradient(90deg,#2563eb,#4f46e5); }
  .admin-nav .nav-link,.admin-nav .navbar-brand{ color:#fff!important; }
  .content-wrap{ padding:20px; }
  .dashboard-card{
    border:none; border-radius:1rem; color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .dashboard-card:hover{ transform:translateY(-4px); box-shadow:0 12px 28px rgba(0,0,0,.2); }
  .dash-icon{ font-size:2rem; opacity:.9; margin-bottom:.5rem; }
  
  .bg-gradient-blue   { background:linear-gradient(135deg,#3b82f6,#1e3a8a) }
  .bg-gradient-green  { background:linear-gradient(135deg,#10b981,#065f46) }
  .bg-gradient-purple { background:linear-gradient(135deg,#8b5cf6,#4c1d95) }
  .bg-gradient-amber  { background:linear-gradient(135deg,#f59e0b,#92400e) }
  .bg-gradient-rose   { background:linear-gradient(135deg,#f43f5e,#881337) }
  
  /* Tables (admin & lists) */
  .table td, .table th{ vertical-align:middle; }
  .table td{ word-break:break-word; }
  
  /* --- FAQ Section --- */
  .faq .accordion-button:not(.collapsed){ background:#eef2ff; color:#111827 }
  
  /* --- Footer --- */
  .footer{ background:linear-gradient(90deg,#1e3a8a,#4f46e5); color:#e5e7eb }
  
  /* --- Forms --- */
  .form-control-lg{ border-radius:.8rem }
  
  /* --- Micro Interactions --- */
  .card:hover{ will-change:transform }
  .fancy-list li{ margin:.35rem 0; color:#475569 }
  
  /* ==========================================================================
     RESPONSIVE TWEAKS
     ========================================================================== */
  
  /* ≥1200px: give hero art a little more breathing space */
  @media (min-width: 1200px){
    .hero-art{ min-height:420px; }
  }
  
  /* ≤991px: stack hero content better */
  @media (max-width: 991px){
    .hero-art{ min-height:280px; margin-top:1rem; }
  }
  
  /* ≤768px: tighter paddings, friendlier chips */
  @media (max-width: 768px){
    .stat-chip{ padding:.9rem; }
    .rounded-3xl{ border-radius:1rem; }
  }
  
  /* ≤576px: mobile-first refinements */
  @media (max-width: 576px){
    .display-6{ font-size:1.75rem; }
    .badge-soft{ font-size:.85rem; }
    .stat-value{ font-size:1.15rem; }
    body{ overflow-x:hidden; }
    .navbar .btn{ padding:.4rem .7rem; font-size:.9rem; }
    .hero-art{ min-height:220px; }
  }
  
  /* ==========================================================================
     PRINT (Result download / print-friendly)
     ========================================================================== */
  @media print{
    nav, .footer, #confettiCanvas { display:none !important; }
    .result-glass, .glassy-card, .glassy-form { border:1px solid #e5e7eb !important; backdrop-filter:none !important; }
  }