/* ======================================================
   ACEP LMS DESIGN SYSTEM
   Version: 1.0
   Author: ChatGPT
====================================================== */

:root{

    /* Primary Colours */

    --primary:#0B1A2E;
    --primary-light:#173556;

    --gold:#FBBF24;
    --gold-light:#FCD34D;

    --success:#10B981;
    --danger:#EF4444;
    --warning:#F59E0B;
    --info:#3B82F6;

    --white:#FFFFFF;

    --gray50:#F8FAFC;
    --gray100:#F1F5F9;
    --gray200:#E2E8F0;
    --gray300:#CBD5E1;
    --gray500:#64748B;
    --gray700:#334155;
    --gray900:#0F172A;

    /* Radius */

    --radius-sm:8px;
    --radius:14px;
    --radius-lg:20px;

    /* Shadows */

    --shadow-sm:0 3px 8px rgba(0,0,0,.08);

    --shadow:
        0 10px 30px rgba(0,0,0,.10);

    --shadow-lg:
        0 20px 60px rgba(0,0,0,.15);

}

/* ============================================= */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

font-family:'Inter',sans-serif;

background:var(--gray50);

color:var(--gray700);

line-height:1.6;

}

/* ============================================= */
/* Container */
/* ============================================= */

.container{

width:min(1300px,95%);

margin:auto;

}

/* ============================================= */
/* Cards */
/* ============================================= */

.card{

background:#fff;

border-radius:var(--radius);

box-shadow:var(--shadow-sm);

padding:24px;

transition:.25s;

}

.card:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.card-header{

margin-bottom:20px;

}

.card-title{

font-size:22px;

font-weight:700;

color:var(--primary);

}

/* ============================================= */
/* Buttons */
/* ============================================= */

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:12px 24px;

border:none;

border-radius:12px;

cursor:pointer;

font-weight:700;

font-size:15px;

text-decoration:none;

transition:.25s;

}

.btn:hover{

transform:translateY(-2px);

}

.btn-primary{

background:var(--primary);

color:white;

}

.btn-primary:hover{

background:var(--primary-light);

}

.btn-success{

background:var(--success);

color:white;

}

.btn-warning{

background:var(--gold);

color:var(--primary);

}

.btn-danger{

background:var(--danger);

color:white;

}

.btn-outline{

background:white;

border:2px solid var(--gray200);

color:var(--primary);

}

/* ============================================= */
/* Hero */
/* ============================================= */

.hero{

background:linear-gradient(135deg,
var(--primary),
var(--primary-light));

padding:35px;

border-radius:20px;

color:white;

margin-bottom:30px;

position:relative;

overflow:hidden;

}

.hero::before{

content:"";

position:absolute;

right:-80px;

top:-80px;

width:220px;

height:220px;

border-radius:50%;

background:rgba(255,255,255,.06);

}

.hero h1{

font-size:34px;

margin-bottom:10px;

font-weight:800;

}

.hero p{

color:#d7e3ef;

}

/* ============================================= */
/* Progress */
/* ============================================= */

.progress{

height:10px;

background:var(--gray200);

border-radius:20px;

overflow:hidden;

margin-top:10px;

}

.progress-bar{

height:100%;

background:linear-gradient(90deg,
var(--gold),
#ffd86b);

transition:.4s;

}

/* ============================================= */
/* Badges */
/* ============================================= */

.badge{

display:inline-block;

padding:6px 14px;

border-radius:50px;

font-size:13px;

font-weight:700;

}

.badge-success{

background:#D1FAE5;

color:#065F46;

}

.badge-warning{

background:#FEF3C7;

color:#92400E;

}

.badge-danger{

background:#FEE2E2;

color:#991B1B;

}

.badge-primary{

background:#DBEAFE;

color:#1E3A8A;

}

/* ============================================= */
/* Statistics Cards */
/* ============================================= */

.stats-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:20px;

}

.stat-card{

background:white;

padding:24px;

border-radius:18px;

box-shadow:var(--shadow-sm);

}

.stat-card h2{

font-size:34px;

color:var(--primary);

}

.stat-card p{

color:var(--gray500);

}

/* ============================================= */
/* Forms */
/* ============================================= */

.form-control{

width:100%;

padding:14px;

border:2px solid var(--gray200);

border-radius:12px;

font-size:15px;

transition:.2s;

}

.form-control:focus{

outline:none;

border-color:var(--gold);

}

/* ============================================= */
/* Tables */
/* ============================================= */

.table{

width:100%;

border-collapse:collapse;

background:white;

border-radius:16px;

overflow:hidden;

}

.table th{

background:var(--primary);

color:white;

padding:15px;

}

.table td{

padding:15px;

border-bottom:1px solid var(--gray200);

}

/* ============================================= */
/* Alerts */
/* ============================================= */

.alert{

padding:18px;

border-radius:12px;

margin:20px 0;

font-weight:600;

}

.alert-success{

background:#ECFDF5;

color:#065F46;

}

.alert-danger{

background:#FEF2F2;

color:#991B1B;

}

.alert-warning{

background:#FFFBEB;

color:#92400E;

}

/* ============================================= */
/* Animations */
/* ============================================= */

.fade-up{

animation:fadeUp .5s ease;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:none;

}

}

/* ============================================= */
/* Mobile */
/* ============================================= */

@media(max-width:768px){

.hero{

padding:24px;

}

.hero h1{

font-size:26px;

}

.btn{

width:100%;

}

}

/* ===========================================
   GLASS HEADER
=========================================== */

.glass-header{

background:rgba(255,255,255,.95);

backdrop-filter:blur(12px);

border-radius:20px;

padding:20px 30px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

margin-bottom:25px;

}

.stats-card{

display:flex;

align-items:center;

justify-content:space-between;

padding:22px;

background:white;

border-radius:18px;

box-shadow:var(--shadow-sm);

transition:.25s;

}

.stats-card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

.stats-icon{

width:60px;

height:60px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

background:#EEF4FF;

color:var(--primary);

}

.stats-value{

font-size:34px;

font-weight:800;

color:var(--primary);

}

.stats-label{

font-size:14px;

color:var(--gray500);

}

.module-card{

background:white;

border-radius:18px;

padding:24px;

box-shadow:var(--shadow-sm);

transition:.3s;

border-left:5px solid var(--gold);

}

.module-card:hover{

transform:translateY(-5px);

box-shadow:var(--shadow);

}

.course-progress{

margin-top:15px;

}

.course-progress small{

font-weight:700;

color:var(--gray500);

}

.status{

display:inline-block;

padding:8px 18px;

border-radius:40px;

font-size:13px;

font-weight:700;

}

.status.completed{

background:#D1FAE5;

color:#065F46;

}

.status.progress{

background:#DBEAFE;

color:#1E40AF;

}

.status.locked{

background:#E5E7EB;

color:#4B5563;

}