/* ============================================================
   KESA Learn — Premium Theme Layer  (loads after style.css/admin.css)
   Brand system from the KESA logo:
     K  red    #e7404a  — primary actions, identity
     E  purple #a058ae  — learning / content accents
     S  blue   #4950ba  — information / progress accents
     A  yellow #f5cb39  — achievement / certificate accents
   Base: clean white, soft warm greys, generous radius, calm shadows.
   ============================================================ */

:root {
    --red: #e7404a;
    --red-dark: #c9303a;
    --red-soft: #fdeef0;
    --purple: #a058ae;
    --purple-soft: #f6eef8;
    --blue: #4950ba;
    --blue-soft: #eef0fb;
    --yellow: #f5cb39;
    --yellow-soft: #fdf7e3;

    --ink: #191a2e;
    --ink-2: #4a5268;
    --ink-3: #8a91a5;
    --line: #ecedf2;
    --paper: #ffffff;
    --paper-2: #f8f8fb;

    --focus-ring: 0 0 0 3px rgba(231, 64, 74, .16);
    --shadow-card: 0 1px 2px rgba(20,22,40,.04), 0 8px 24px rgba(20,22,40,.06);
    --shadow-pop:  0 4px 12px rgba(20,22,40,.08), 0 16px 40px rgba(20,22,40,.12);
    --r-md: 14px;
    --r-lg: 18px;
    --ease: cubic-bezier(.22,.8,.36,1);
}

/* ---------- Global foundation ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: var(--red); color: #fff; }
img { max-width: 100%; height: auto; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: none; box-shadow: var(--focus-ring); border-radius: 8px;
}

/* Slim brand scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d9dbe4; border-radius: 99px; border: 2px solid #fff; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ---------- Buttons ---------- */
.btn {
    font-weight: 700; letter-spacing: .01em;
    border-radius: 12px;
    transition: transform .16s var(--ease), box-shadow .2s var(--ease), background .2s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary {
    background: linear-gradient(135deg, var(--red) 0%, #f0565f 100%);
    border-color: var(--red);
    box-shadow: 0 3px 10px rgba(231,64,74,.30), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--red-dark) 0%, var(--red) 100%);
    border-color: var(--red-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(231,64,74,.35);
}
.btn-secondary {
    background: #fff; border: 1.5px solid var(--line); color: var(--ink);
}
.btn-secondary:hover { border-color: var(--red); color: var(--red); background: var(--red-soft); }
@media (max-width: 768px) {
    .btn { min-height: 44px; }
    input, select, textarea { font-size: 16px !important; } /* stops iOS zoom */
}

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], input[type="date"], input[type="search"], select, textarea {
    border-radius: 12px !important;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--red) !important;
    box-shadow: var(--focus-ring) !important;
    background: #fff !important;
}
label { font-weight: 600; }

/* ---------- Public navbar ---------- */
.navbar {
    backdrop-filter: saturate(1.5) blur(12px);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
    background: rgba(255,255,255,.9);
    border-bottom: 1px solid var(--line);
}
.nav-links a { position: relative; font-weight: 600; }
.nav-links a.active::after, .nav-links a:hover::after {
    content: ""; position: absolute; left: 10%; right: 10%; bottom: -7px;
    height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--red), var(--purple));
}

/* ---------- Cards (site-wide) ---------- */
.card, .event-card, .section-card, .admin-card, .cs-card, .rs-card, .cc-card {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    transition: transform .22s var(--ease), box-shadow .25s var(--ease);
}
.event-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-pop); }

/* ---------- Alerts ---------- */
.alert { border-radius: 14px; border: 1px solid transparent; border-left-width: 4px; font-weight: 500; }
.alert-success { border-left-color: #16a34a; background: #f0fdf4; }
.alert-error   { border-left-color: var(--red); background: var(--red-soft); }
.alert-warning { border-left-color: var(--yellow); background: var(--yellow-soft); }

/* ============================================================
   LEARNER PORTAL  (user dashboard & user pages)
   ============================================================ */

/* Welcome hero — white card with the four-colour brand ribbon */
.welcome-card {
    position: relative;
    background: linear-gradient(120deg, #fff 55%, var(--red-soft) 100%) !important;
    border: 1px solid var(--line) !important;
    border-radius: 22px !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden;
}
.welcome-card::before {
    content: "" !important; position: absolute; left: 0; right: 0; top: 0;
    height: 5px; opacity: 1 !important; border-radius: 0 !important;
    width: auto !important; transform: none !important;
    background: linear-gradient(90deg, var(--red) 0 28%, var(--purple) 28% 52%, var(--blue) 52% 76%, var(--yellow) 76% 100%) !important;
}
.welcome-card::after {
    content: "" !important;
    position: absolute; right: -70px; bottom: -90px;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(231,64,74,.12), rgba(160,88,174,.07) 55%, transparent 70%) !important;
    transform: none !important;
}
.welcome-avatar {
    border: 3px solid #fff !important;
    box-shadow: 0 0 0 3px var(--red), 0 8px 20px rgba(231,64,74,.25) !important;
}
.welcome-text h1, .welcome-text h2 { color: var(--ink); letter-spacing: -.02em; }

/* Stat cards — each gets a brand colour personality */
.stats-grid { gap: 16px !important; }
.stat-card {
    position: relative;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-card) !important;
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.stat-card::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
    background: linear-gradient(90deg, var(--red), transparent 80%);
    opacity: .8;
}
.stat-card:nth-child(2)::after { background: linear-gradient(90deg, var(--purple), transparent 80%); }
.stat-card:nth-child(3)::after { background: linear-gradient(90deg, var(--blue), transparent 80%); }
.stat-card:nth-child(4)::after { background: linear-gradient(90deg, var(--yellow), transparent 80%); }
.stat-icon { border-radius: 14px !important; box-shadow: 0 6px 14px rgba(20,22,40,.12); }
.stat-icon.red    { background: linear-gradient(135deg, var(--red), #f0565f) !important; }
.stat-icon.purple { background: linear-gradient(135deg, var(--purple), #b977c6) !important; }
.stat-icon.blue   { background: linear-gradient(135deg, var(--blue), #6a71d6) !important; }
.stat-icon.yellow { background: linear-gradient(135deg, #e0b32a, var(--yellow)) !important; }
.stat-value { font-weight: 800 !important; color: var(--ink) !important; letter-spacing: -.02em; }
.stat-label { color: var(--ink-3) !important; font-weight: 600; text-transform: uppercase; font-size: .72rem !important; letter-spacing: .08em; }

/* Section cards & headers */
.section-card { background: #fff !important; }
.section-card-header { border-bottom: 1px solid var(--line) !important; }
.section-card-title {
    font-weight: 800 !important; color: var(--ink) !important; letter-spacing: -.01em;
    display: flex; align-items: center; gap: 10px;
}
.section-card-title::before {
    content: ""; width: 4px; height: 18px; border-radius: 4px;
    background: linear-gradient(180deg, var(--red), var(--purple));
}

/* Quick actions */
.quick-action-btn {
    border-radius: 14px !important;
    border: 1.5px solid var(--line) !important;
    background: #fff !important;
    font-weight: 700 !important;
    transition: all .18s var(--ease) !important;
}
.quick-action-btn:hover {
    border-color: var(--red) !important; color: var(--red) !important;
    background: var(--red-soft) !important; transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(231,64,74,.14);
}

/* Upcoming events list */
.upcoming-item {
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    background: #fff !important;
    transition: all .18s var(--ease);
}
.upcoming-item:hover { border-color: var(--blue); box-shadow: 0 6px 16px rgba(73,80,186,.12); transform: translateX(3px); }
.upcoming-date {
    background: linear-gradient(135deg, var(--blue), #6a71d6) !important;
    color: #fff !important; border-radius: 12px !important;
    box-shadow: 0 6px 14px rgba(73,80,186,.28);
}
.upcoming-date-day { font-weight: 800 !important; }
.live-badge {
    background: linear-gradient(135deg, var(--red), #f0565f) !important;
    box-shadow: 0 0 0 0 rgba(231,64,74,.5); animation: kesaPulse 1.8s infinite;
    border-radius: 99px !important; font-weight: 800 !important;
}
@keyframes kesaPulse {
    0% { box-shadow: 0 0 0 0 rgba(231,64,74,.45); }
    70% { box-shadow: 0 0 0 9px rgba(231,64,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(231,64,74,0); }
}

/* Completion chips */
.completion-chip { border-radius: 99px !important; font-weight: 600; }
.completion-chip.done { background: #f0fdf4 !important; color: #15803d !important; border-color: #bbf7d0 !important; }

/* Certificate-name card — yellow "achievement" accent */
.cert-name-card {
    border: 1px solid var(--line) !important;
    border-left: 4px solid var(--yellow) !important;
    border-radius: var(--r-lg) !important;
    background: linear-gradient(120deg, #fff 70%, var(--yellow-soft)) !important;
    box-shadow: var(--shadow-card) !important;
}
.cert-name-icon { background: linear-gradient(135deg, var(--yellow), #ffd95e) !important; color: #7a5d00 !important; border-radius: 14px !important; }
.cert-name-btn { background: var(--red) !important; border-radius: 12px !important; font-weight: 700 !important; }
.cert-name-btn:hover { background: var(--red-dark) !important; }
.cert-name-input { border-radius: 12px !important; }
.cert-name-input:focus { border-color: var(--red) !important; box-shadow: var(--focus-ring) !important; }

/* Mobile bottom navigation (learner) */
.user-bottom-nav {
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    background: rgba(255,255,255,.94) !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: 0 -8px 24px rgba(20,22,40,.06) !important;
}
.user-nav-item { font-weight: 600 !important; color: var(--ink-3) !important; transition: color .15s; position: relative; }
.user-nav-item.active { color: var(--red) !important; }
.user-nav-item.active::before {
    content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px;
    border-radius: 0 0 4px 4px; background: var(--red);
}
.user-nav-item:hover { color: var(--red) !important; }

/* ============================================================
   ADMIN CONSOLE
   ============================================================ */

.admin-sidebar {
    background: linear-gradient(180deg, #1b1c30 0%, #14152a 100%) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
}
.sidebar-header { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.sidebar-section-title {
    color: #7a7f9c !important; font-size: .66rem !important;
    letter-spacing: .14em !important; font-weight: 700 !important;
}
.sidebar-link {
    border-radius: 10px !important; margin: 1px 10px !important;
    color: #b9bdd4 !important; font-weight: 600 !important;
    transition: all .15s var(--ease) !important;
}
.sidebar-link:hover { background: rgba(255,255,255,.07) !important; color: #fff !important; }
.sidebar-link.active {
    background: linear-gradient(90deg, rgba(231,64,74,.95), rgba(231,64,74,.75)) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(231,64,74,.35) !important;
}
.sidebar-link.active svg { color: #fff !important; }
.count-badge {
    background: var(--yellow) !important; color: #5b4500 !important;
    font-weight: 800 !important; border-radius: 99px !important;
}

.admin-topbar {
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.92) !important;
    border-bottom: 1px solid var(--line) !important;
}

.admin-content { background: var(--paper-2); }
.admin-header h1 { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.admin-header p { color: var(--ink-3); }

/* Admin stat cards — four brand accents */
.admin-stat-card {
    border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
    background: #fff !important; box-shadow: var(--shadow-card) !important;
    position: relative; overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}
.admin-stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.admin-stat-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--red);
}
.admin-stat-card:nth-child(4n+2)::before { background: var(--purple); }
.admin-stat-card:nth-child(4n+3)::before { background: var(--blue); }
.admin-stat-card:nth-child(4n+4)::before { background: var(--yellow); }
.admin-stat-icon { border-radius: 12px !important; }

/* Admin cards & tables */
.admin-card { background: #fff !important; }
.admin-table { border-collapse: separate !important; border-spacing: 0; }
.admin-table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--paper-2) !important; color: var(--ink-2) !important;
    font-size: .72rem !important; text-transform: uppercase; letter-spacing: .08em;
    border-bottom: 1px solid var(--line) !important;
}
.admin-table td { border-bottom: 1px solid var(--line) !important; }
.admin-table tbody tr { transition: background .12s; }
.admin-table tbody tr:hover td { background: var(--red-soft) !important; }

/* Badges */
.badge, .status-badge { border-radius: 99px !important; font-weight: 700 !important; letter-spacing: .02em; }
.badge-success { background: #dcfce7 !important; color: #15803d !important; }
.badge-muted   { background: var(--paper-2) !important; color: var(--ink-3) !important; }

/* Bulk actions bar */
.bulk-actions-bar {
    border-radius: var(--r-md) !important;
    background: var(--ink) !important; color: #fff !important;
    box-shadow: var(--shadow-pop) !important;
}

/* ---------- Auth screens (login / signup / OTP) ---------- */
.otp-input { letter-spacing: .04em; border-radius: 12px !important; }
.otp-btn--primary {
    background: linear-gradient(135deg, var(--red), #f0565f) !important;
    border-radius: 12px !important; font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(231,64,74,.3) !important;
}
.otp-btn--primary:hover { background: linear-gradient(135deg, var(--red-dark), var(--red)) !important; }
.btn-google-primary { border-radius: 12px !important; border: 1.5px solid var(--line) !important; font-weight: 700 !important; }
.btn-google-primary:hover { border-color: var(--blue) !important; box-shadow: 0 6px 16px rgba(73,80,186,.14) !important; }

/* ---------- Motion & a11y ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Mobile polish ---------- */
@media (max-width: 768px) {
    .container { padding-left: 16px; padding-right: 16px; }
    h1 { font-size: clamp(1.45rem, 6vw, 2rem); letter-spacing: -.02em; }
    h2 { font-size: clamp(1.15rem, 5vw, 1.55rem); }
    .nav-links { box-shadow: 0 18px 40px rgba(0,0,0,.12); border-radius: 0 0 18px 18px; }
    .admin-content, main { overflow-x: hidden; }
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Print (certificates / reports) ---------- */
@media print {
    .navbar, footer, .nav-actions, .btn, .user-bottom-nav, .admin-sidebar, .admin-topbar { display: none !important; }
    body { background: #fff; }
}