@import url("design-system.css");

/* Learning progress dashboard */
.learning-dashboard{padding:52px 0}
.progress-panel{background:linear-gradient(180deg,#0f2238,#0a1929);border:1px solid rgba(255,255,255,.11);border-radius:20px;padding:24px;box-shadow:0 18px 45px rgba(0,0,0,.18)}
.progress-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.progress-stat{background:#091827;border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:18px;text-align:center}
.progress-stat strong{display:block;color:#38bdf8;font-size:1.8rem;line-height:1.2}
.progress-stat span{color:#b8c7d9;font-size:.91rem}
.progress-main{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.progress-card{background:#091827;border:1px solid rgba(255,255,255,.09);border-radius:15px;padding:18px}
.progress-card h3{margin:0 0 10px;color:#eef8ff}
.progress-card .ar{direction:rtl;text-align:right;color:#dce7f1}
.progress-card a,.progress-card a:visited{display:inline-flex;align-items:center;gap:6px;margin:8px 0;padding:7px 11px;border:1px solid rgba(56,189,248,.45);border-radius:9px;background:rgba(56,189,248,.10);color:#7dd3fc!important;font-weight:700;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease}
.progress-card a:hover,.progress-card a:focus-visible{color:#ffffff!important;background:rgba(14,165,233,.24);border-color:#38bdf8;transform:translateY(-1px);outline:none}
.continue-learning-button,.continue-learning-button:link,.continue-learning-button:visited{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:fit-content;max-width:100%;margin:10px 0 14px!important;padding:10px 15px!important;border:1px solid #38bdf8!important;border-radius:10px!important;background:linear-gradient(135deg,rgba(2,132,199,.30),rgba(37,99,235,.24))!important;color:#e0f2fe!important;font-weight:800!important;text-decoration:none!important;text-shadow:none!important;box-shadow:0 8px 20px rgba(2,132,199,.16)!important}
.continue-learning-button:hover,.continue-learning-button:focus-visible,.continue-learning-button:active{background:linear-gradient(135deg,#0284c7,#2563eb)!important;border-color:#7dd3fc!important;color:#ffffff!important;outline:none!important;transform:translateY(-1px)}
.progress-track{height:14px;border-radius:999px;background:#06101d;overflow:hidden;border:1px solid rgba(255,255,255,.08);margin:12px 0 8px}
.progress-fill{width:0;height:100%;background:linear-gradient(90deg,#0284c7,#2563eb,#22c55e);border-radius:inherit;transition:width .45s ease}
.progress-caption{display:flex;justify-content:space-between;gap:12px;color:#aebfd0;font-size:.88rem}
.progress-list{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.progress-item{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:10px;border:1px solid rgba(56,189,248,.42);background:#0b1b2c;color:#7dd3fc;font-size:.82rem;font-weight:700;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.learning-dashboard .progress-list .progress-item.completed,.learning-dashboard .progress-list .progress-item.completed:link,.learning-dashboard .progress-list .progress-item.completed:visited{border-color:#22c55e!important;background:linear-gradient(135deg,rgba(34,197,94,.34),rgba(21,128,61,.28))!important;color:#dcfce7!important;box-shadow:0 0 0 1px rgba(34,197,94,.22),0 8px 18px rgba(22,163,74,.12)!important}
.learning-dashboard .progress-list .progress-item.attempted,.learning-dashboard .progress-list .progress-item.attempted:link,.learning-dashboard .progress-list .progress-item.attempted:visited{border-color:#facc15!important;background:linear-gradient(135deg,rgba(250,204,21,.30),rgba(202,138,4,.24))!important;color:#fef3c7!important;box-shadow:0 0 0 1px rgba(250,204,21,.18),0 8px 18px rgba(202,138,4,.10)!important}
.learning-dashboard .progress-list .progress-item:not(.completed):not(.attempted),.learning-dashboard .progress-list .progress-item:not(.completed):not(.attempted):link,.learning-dashboard .progress-list .progress-item:not(.completed):not(.attempted):visited{border-color:rgba(56,189,248,.48)!important;background:linear-gradient(180deg,#10283f,#0c2135)!important;color:#7dd3fc!important}
.learning-dashboard .progress-list .progress-item:hover,.learning-dashboard .progress-list .progress-item:focus-visible{transform:translateY(-2px);filter:brightness(1.12);outline:2px solid rgba(125,211,252,.35);outline-offset:2px}
.progress-note{margin-top:14px;color:#9fb2c5;font-size:.88rem}
.progress-reset{margin-top:14px;border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:9px 13px;background:#0b1b2c;color:#fff;cursor:pointer}
.progress-reset:hover{border-color:rgba(56,189,248,.55)}
.achievement{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;background:#0b1b2c;border:1px solid rgba(255,255,255,.08);margin:9px 0}
.achievement-icon{font-size:1.55rem}.achievement strong{display:block;color:#fff}.achievement span{color:#aebfd0;font-size:.88rem}
.achievement.locked{opacity:.45;filter:grayscale(.7)}
.ag-home-menu-link{margin-top:0!important;padding-top:11px!important;border-top:0!important}
@media(max-width:900px){.progress-summary{grid-template-columns:repeat(2,1fr)}.progress-main{grid-template-columns:1fr}}
@media(max-width:620px){.progress-summary{grid-template-columns:1fr 1fr}.progress-list{grid-template-columns:repeat(4,1fr)}.progress-panel{padding:16px}.progress-card a,.continue-learning-button{width:100%!important;justify-content:center!important;text-align:center!important}.progress-item{min-height:56px;font-size:1rem}}
@media print{.learning-dashboard{display:none}}