@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
    --bg:#f1f5f9;
    --bg-accent:#e8f0fe;
    --surface:#ffffff;
    --surface-alt:#f8fafd;
    --text:#0f1923;
    --muted:#64748b;
    --border:#e2eaf3;
    --primary:#2563eb;
    --primary-strong:#1d4ed8;
    --primary-light:#dbeafe;
    --secondary:#eff6ff;
    --success:#059669;
    --success-soft:#ecfdf5;
    --warning:#b45309;
    --warning-soft:#fffbeb;
    --danger:#dc2626;
    --danger-soft:#fef2f2;
    --shadow:0 4px 24px rgba(15,25,35,.07);
    --shadow-md:0 8px 32px rgba(15,25,35,.10);
    --shadow-lg:0 20px 60px rgba(15,25,35,.13);
    --radius:18px;
    --radius-sm:12px;
    --container:1180px;
    --grad-primary:linear-gradient(135deg,#2563eb,#7c3aed);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;font-size:14.5px}
body{
    margin:0;
    font-family:'Tajawal','Segoe UI',Tahoma,Arial,sans-serif;
    color:var(--text);
    background:
        radial-gradient(ellipse at 0% 0%,rgba(37,99,235,.07),transparent 40%),
        radial-gradient(ellipse at 100% 100%,rgba(124,58,237,.06),transparent 40%),
        linear-gradient(160deg,#f0f6ff 0%,#f8fafd 50%,#f1f5f9 100%);
    min-height:100vh;
}

/* ── Keyframes ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmerLine{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}

a{color:inherit;text-decoration:none}
img{max-width:100%}
button,input,select,textarea{font:inherit}
.container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}
.app-shell{min-height:100vh;animation:fadeInUp .45s ease both}
.page{padding:28px 0 48px}
.print-hide{display:block}

/* ══════════════ TOPBAR ══════════════ */
.topbar{
    position:sticky;
    top:0;
    z-index:50;
    backdrop-filter:blur(20px);
    background:rgba(255,255,255,.86);
    border-bottom:1px solid rgba(226,234,243,.95);
    box-shadow:0 1px 0 rgba(37,99,235,.07),0 2px 16px rgba(15,25,35,.04);
}
.topbar::after{
    content:'';
    position:absolute;
    bottom:0;left:0;right:0;
    height:2px;
    background:linear-gradient(90deg,transparent 0%,#2563eb 30%,#7c3aed 60%,#2563eb 80%,transparent 100%);
    background-size:200% auto;
    animation:shimmerLine 5s linear infinite;
    opacity:.55;
}
.topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:74px;
}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.brand-mark{
    width:44px;height:44px;
    border-radius:14px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    background-size:200% 200%;
    animation:gradientShift 6s ease infinite;
    color:#fff;
    font-weight:900;
    font-size:.88rem;
    letter-spacing:.04em;
    box-shadow:0 6px 20px rgba(37,99,235,.30);
    flex-shrink:0;
}
.brand strong{display:block;font-size:1.05rem;font-weight:800}
.brand small{display:block;color:var(--muted);font-size:.78rem}
.topnav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.topnav a{
    padding:9px 16px;
    border-radius:999px;
    color:var(--muted);
    font-weight:700;
    font-size:.88rem;
    transition:all .2s ease;
}
.topnav a:hover,.topnav a.is-active{
    background:var(--secondary);
    color:var(--primary);
    box-shadow:0 0 0 1.5px rgba(37,99,235,.18);
}
.topnav a.is-active{font-weight:900}

/* ══════════════ PAGE HERO ══════════════ */
.page-hero{
    padding:28px 32px;
    border:1px solid var(--border);
    border-radius:calc(var(--radius) + 4px);
    background:linear-gradient(135deg,#ffffff 0%,#f0f6ff 100%);
    box-shadow:var(--shadow-md);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    margin-bottom:24px;
    position:relative;
    overflow:hidden;
}
.page-hero::before{
    content:'';
    position:absolute;
    top:-50px;left:-50px;
    width:220px;height:220px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.07),transparent 70%);
    pointer-events:none;
}
.page-hero h1{margin:8px 0 10px;font-size:1.6rem;font-weight:900}
.page-hero p{margin:0;max-width:70ch;color:var(--muted);line-height:1.85;font-size:.92rem}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.75rem;
    font-weight:800;
    color:var(--primary);
    background:linear-gradient(135deg,rgba(37,99,235,.1),rgba(124,58,237,.07));
    padding:5px 12px;
    border-radius:999px;
    border:1px solid rgba(37,99,235,.16);
    letter-spacing:.05em;
    text-transform:uppercase;
}

/* ══════════════ METRIC CARDS ══════════════ */
.metrics-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
    margin-bottom:24px;
}
.metric-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px 20px 20px;
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:8px;
    position:relative;
    overflow:hidden;
    transition:transform .22s ease,box-shadow .22s ease;
}
.metric-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.metric-card::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;
    height:3px;
    border-radius:var(--radius) var(--radius) 0 0;
}
.metric-card:nth-child(1)::before{background:linear-gradient(90deg,#2563eb,#60a5fa)}
.metric-card:nth-child(2)::before{background:linear-gradient(90deg,#059669,#34d399)}
.metric-card:nth-child(3)::before{background:linear-gradient(90deg,#7c3aed,#c084fc)}
.metric-card:nth-child(4)::before{background:linear-gradient(90deg,#b45309,#fbbf24)}
.metric-label{color:var(--muted);font-weight:700;font-size:.86rem;letter-spacing:.02em}
.metric-value{font-size:1.8rem;line-height:1;font-weight:900;letter-spacing:-.03em}
.metric-value-small{font-size:.95rem;line-height:1.6;font-weight:800}
.metric-card small{color:var(--muted);line-height:1.7;font-size:.8rem}

/* ══════════════ PANEL CARDS ══════════════ */
.card-grid{display:grid;gap:16px;margin-bottom:24px}
.card-grid.two-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.panel-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    box-shadow:var(--shadow);
    transition:box-shadow .22s ease;
}
.panel-card:hover{box-shadow:var(--shadow-md)}
.panel-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:16px;
}
.panel-head h2{margin:6px 0 0;font-size:1.15rem;font-weight:800}
.panel-text{color:var(--muted);line-height:1.85;margin:0;font-size:.88rem}
.cluster{display:flex;gap:10px;flex-wrap:wrap}

/* ══════════════ BADGES ══════════════ */
.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:30px;
    padding:0 14px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.04em;
}
.badge-college{
    background:linear-gradient(135deg,#d1fae5,#a7f3d0);
    color:#065f46;
    border:1px solid rgba(16,185,129,.22);
}
.badge-lycee{
    background:linear-gradient(135deg,#dbeafe,#bfdbfe);
    color:#1e40af;
    border:1px solid rgba(37,99,235,.22);
}
.badge-neutral{
    background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
    color:#374151;
    border:1px solid rgba(107,114,128,.18);
}
.badge-warning{
    background:linear-gradient(135deg,#fef3c7,#fde68a);
    color:#92400e;
    border:1px solid rgba(180,83,9,.18);
}

/* ══════════════ FLASH MESSAGES ══════════════ */
.flash{
    padding:14px 20px;
    border-radius:14px;
    margin-bottom:18px;
    border:1px solid transparent;
    font-weight:700;
    animation:fadeInUp .3s ease both;
}
.flash-success{
    background:linear-gradient(135deg,#ecfdf5,#d1fae5);
    color:#065f46;
    border-color:rgba(16,185,129,.22);
}
.flash-error{
    background:linear-gradient(135deg,#fef2f2,#fee2e2);
    color:#991b1b;
    border-color:rgba(220,38,38,.22);
}

/* ══════════════ FILTER PILLS ══════════════ */
.filter-pills,.cycle-switch{display:flex;gap:10px;flex-wrap:wrap}
.pill,.cycle-pill{
    border:1px solid var(--border);
    background:var(--surface-alt);
    padding:9px 18px;
    border-radius:999px;
    font-weight:700;
    color:var(--muted);
    transition:all .2s ease;
    font-size:.9rem;
}
.pill:hover,.pill.is-active,.cycle-pill.is-active{
    background:var(--secondary);
    color:var(--primary);
    border-color:rgba(37,99,235,.25);
    box-shadow:0 0 0 3px rgba(37,99,235,.08);
}
.cycle-pill{position:relative;cursor:pointer}
.cycle-pill input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ══════════════ FORMS ══════════════ */
.form-grid{display:grid;gap:16px}
.form-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-weight:700;color:#1e293b;font-size:.91rem}
.input,.select,textarea{
    width:100%;
    border:1.5px solid var(--border);
    background:var(--surface);
    color:var(--text);
    border-radius:12px;
    min-height:44px;
    padding:10px 14px;
    outline:none;
    transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    font-size:.93rem;
}
.input:focus,.select:focus,textarea:focus{
    border-color:rgba(37,99,235,.5);
    box-shadow:0 0 0 4px rgba(37,99,235,.08);
    background:#fff;
}
.switch-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.switch{
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:var(--surface-alt);
    border:1.5px solid var(--border);
    padding:14px 16px;
    border-radius:14px;
    flex:1;
    min-width:min(100%,320px);
    transition:border-color .2s ease;
}
.switch:hover{border-color:rgba(37,99,235,.25)}
.switch input{margin-top:4px}

.cycle-panel{display:none}
.cycle-panel.is-active{display:block}
.stage-block+.stage-block{margin-top:26px}
.stage-head{margin-bottom:14px}
.stage-head h3{margin:0 0 6px;font-size:1.06rem;font-weight:800}
.stage-head p{margin:0;color:var(--muted);line-height:1.7}
.track-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.track-card,.track-result-card,.specialty-card{
    border:1.5px solid var(--border);
    background:var(--surface-alt);
    border-radius:14px;
    padding:14px;
    transition:border-color .2s ease,background .2s ease;
}
.track-card:hover{border-color:rgba(37,99,235,.22);background:#f8faff}
.track-card-head{
    display:flex;align-items:flex-start;
    justify-content:space-between;gap:10px;margin-bottom:10px;
}
.track-card-head strong{font-size:.92rem;font-weight:800}
.track-card-head small{color:var(--muted);font-size:.8rem}
.track-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.track-fields .input{min-height:40px;padding:8px 12px;font-size:.92rem}
.track-fields .field span{font-size:.82rem}

.specialty-group+.specialty-group{margin-top:20px}
.specialty-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.specialty-card{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 14px;
}
.specialty-card:hover{border-color:rgba(37,99,235,.22);background:#f8faff}
.specialty-title{font-weight:700;line-height:1.5;flex:1;font-size:.88rem}
.specialty-card .input{
    width:72px;
    min-height:38px;
    padding:6px 8px;
    text-align:center;
    flex-shrink:0;
    border-radius:10px;
    font-size:.95rem;
    font-weight:700;
}
.specialty-card.is-hidden{display:none}

/* ══════════════ BUTTONS ══════════════ */
.form-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-start}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:46px;
    border:none;
    border-radius:14px;
    padding:0 20px;
    cursor:pointer;
    font-weight:800;
    font-size:.94rem;
    transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn-primary{
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    box-shadow:0 6px 20px rgba(37,99,235,.32);
}
.btn-primary:hover{
    background:linear-gradient(135deg,#3b73f5,#2563eb);
    box-shadow:0 10px 28px rgba(37,99,235,.42);
}
.btn-secondary{
    background:var(--secondary);
    color:var(--primary);
    border:1.5px solid rgba(37,99,235,.18);
}
.btn-secondary:hover{background:#dbeafe;border-color:rgba(37,99,235,.32)}
.btn-danger{
    background:var(--danger-soft);
    color:var(--danger);
    border:1.5px solid rgba(220,38,38,.15);
}
.btn-danger:hover{background:#fee2e2}
.btn-lg{min-height:54px;padding-inline:28px;font-size:1rem}
.btn-sm{min-height:34px;padding-inline:14px;font-size:.85rem}
.btn-block{width:100%}

/* ══════════════ TABLES ══════════════ */
.table-wrap{
    overflow:auto;
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:0 2px 10px rgba(15,25,35,.04);
}
.data-table{width:100%;border-collapse:collapse;min-width:860px;background:#fff}
.data-table.compact{min-width:760px}
.data-table th,
.data-table td{
    padding:14px;
    border-bottom:1px solid var(--border);
    vertical-align:top;
    text-align:right;
    font-size:.92rem;
}
.data-table thead th{
    background:linear-gradient(180deg,#f8fafd,#f1f5f9);
    color:#374151;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.data-table tbody tr{transition:background .15s ease}
.data-table tbody tr:hover{background:#f0f6ff}
.data-table tfoot th{background:#f8fafd;font-weight:800}
.actions-col{width:180px}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.table-actions form{margin:0}
.pill-status{
    display:inline-flex;
    min-width:40px;
    justify-content:center;
    padding:5px 12px;
    border-radius:999px;
    font-weight:800;
    font-size:.82rem;
}
.pill-danger{background:#fee2e2;color:#991b1b}
.pill-success{background:#d1fae5;color:#065f46}

/* ══════════════ EMPTY STATE ══════════════ */
.empty-state{padding:48px 18px;text-align:center}
.empty-state h3{margin:0 0 10px;font-size:1.3rem;font-weight:800}
.empty-state p{color:var(--muted);max-width:60ch;margin:0 auto 20px;line-height:1.9}

/* ══════════════ RESULT HERO ══════════════ */
.result-hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    margin-bottom:24px;
    padding:28px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    background:linear-gradient(135deg,#ffffff,#f0f6ff);
    box-shadow:var(--shadow-md);
    position:relative;
    overflow:hidden;
}
.result-hero::before{
    content:'';
    position:absolute;
    bottom:-30px;right:-30px;
    width:160px;height:160px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,99,235,.06),transparent 70%);
    pointer-events:none;
}
.result-main h2{margin:12px 0 8px;font-size:1.45rem;font-weight:900}
.result-main p{margin:0;color:var(--muted)}
.dot-sep{padding-inline:8px}

.track-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.track-mini-stats{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);margin-bottom:12px}
.details-card{
    border:1.5px dashed rgba(37,99,235,.2);
    border-radius:14px;
    background:#fafcff;
    padding:0;
}
.details-card summary{
    cursor:pointer;
    list-style:none;
    padding:14px 18px;
    font-weight:700;
    color:var(--primary);
}
.details-card summary::-webkit-details-marker{display:none}
.details-card>*:not(summary){padding:0 16px 16px}
.inline-list{display:grid;gap:10px;color:var(--muted)}
.inline-list strong{color:var(--text)}

.stack-lg{display:grid;gap:18px}
.stack-xl{display:grid;gap:24px}

/* ══════════════ LOGIN PAGE ══════════════ */
.login-page{
    background:
        radial-gradient(ellipse at 8% 15%,rgba(37,99,235,.18),transparent 38%),
        radial-gradient(ellipse at 92% 82%,rgba(124,58,237,.15),transparent 38%),
        radial-gradient(ellipse at 50% 50%,rgba(16,185,129,.05),transparent 55%),
        linear-gradient(155deg,#eef4ff 0%,#f5f0ff 50%,#f0fff8 100%);
}
.login-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:1.15fr .85fr;
}
.login-showcase{
    padding:56px 56px 42px;
    color:#0b1f39;
    display:flex;
    flex-direction:column;
    justify-content:center;
    position:relative;
}
.login-showcase::after{
    content:'';
    position:absolute;
    top:10%;bottom:10%;
    left:0;
    width:1px;
    background:linear-gradient(180deg,transparent,rgba(37,99,235,.22),rgba(124,58,237,.2),transparent);
}
.login-showcase h1{
    font-size:2.4rem;
    margin:14px 0;
    font-weight:900;
    background:linear-gradient(135deg,#1e40af,#7c3aed);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1.15;
}
.login-showcase p{font-size:.92rem;line-height:1.9;max-width:62ch;color:#324054}
.showcase-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:28px;
}
.showcase-card{
    padding:20px;
    border-radius:20px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 8px 32px rgba(15,25,35,.08);
    backdrop-filter:blur(16px);
    display:flex;
    flex-direction:column;
    gap:10px;
    transition:transform .22s ease,box-shadow .22s ease;
}
.showcase-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(15,25,35,.13)}
.showcase-icon{
    width:42px;height:42px;
    border-radius:12px;
    display:grid;place-items:center;
    font-size:1.3rem;
    flex-shrink:0;
}
.showcase-card strong{font-size:.94rem;font-weight:800}
.showcase-card span{color:var(--muted);line-height:1.8;font-size:.86rem}

.login-panel{
    padding:28px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.38);
    backdrop-filter:blur(10px);
}
.login-card{
    width:min(100%,460px);
    background:rgba(255,255,255,.95);
    border:1px solid rgba(255,255,255,.88);
    border-radius:28px;
    padding:36px;
    box-shadow:0 32px 64px rgba(15,23,42,.14),0 0 0 1px rgba(37,99,235,.07);
    backdrop-filter:blur(24px);
    animation:scaleIn .4s ease both;
}
.login-brand{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:20px;
    padding-bottom:18px;
    border-bottom:1px solid var(--border);
}
.login-brand-mark{
    width:40px;height:40px;
    border-radius:12px;
    display:grid;place-items:center;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    color:#fff;
    font-weight:900;
    font-size:.84rem;
    box-shadow:0 6px 16px rgba(37,99,235,.28);
    flex-shrink:0;
}
.login-brand-text strong{display:block;font-size:.95rem;font-weight:800}
.login-brand-text small{color:var(--muted);font-size:.78rem}
.login-head h2{margin:12px 0 8px;font-size:1.5rem;font-weight:900}
.login-head p{margin:0;color:var(--muted);line-height:1.8;font-size:.86rem}
.login-foot{
    margin-top:20px;
    border-top:1px solid var(--border);
    padding-top:18px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.login-foot small{display:block;color:var(--muted);margin-bottom:6px;font-size:.8rem}
.login-foot strong{
    display:block;
    padding:7px 14px;
    background:var(--surface-alt);
    border-radius:10px;
    border:1px solid var(--border);
    font-family:monospace;
    font-size:1rem;
    letter-spacing:.06em;
    color:var(--text);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media(max-width:1100px){
    .metrics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .card-grid.two-cols,.track-result-grid{grid-template-columns:1fr}
    .track-grid,.specialty-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .login-layout{grid-template-columns:1fr}
    .login-showcase{padding-bottom:18px}
    .login-showcase::after{display:none}
}

@media(max-width:760px){
    .container{width:min(var(--container),calc(100% - 20px))}
    .topbar-inner,.page-hero,.result-hero{flex-direction:column}
    .metrics-grid,.track-grid,.specialty-grid,.form-grid-2,.login-foot,.showcase-grid{grid-template-columns:1fr}
    .specialty-card{padding:10px 12px}
    .track-fields{grid-template-columns:1fr}
    .btn,.btn-lg{width:100%}
    .hero-actions,.form-actions,.cluster{width:100%}
    .page-hero h1{font-size:1.6rem}
    .login-showcase{padding:30px 20px 0}
    .login-showcase h1{font-size:2.2rem}
    .login-panel{padding:20px}
    .panel-card{padding:18px}
    .login-card{padding:24px;border-radius:20px}
}

@media print{
    body{background:#fff}
    .topbar,.page-hero,.print-hide,.form-actions,.topnav{display:none !important}
    .panel-card,.metric-card,.result-hero{box-shadow:none}
    .container{width:100%}
    .page{padding:0}
}