/**



 * SensoDesk — Unified Design System



 * Jeden plik CSS dla wszystkich paneli LMS



 * @author    Wojciech Modzelewski



 * @copyright © 2025-2026 Wojciech Modzelewski



 */







/* ═══════════════════════════════════════════════



   TOKENS



═══════════════════════════════════════════════ */



:root {



  /* Brand */



  --sd-navy:       #1B5FAA;



  --sd-navy-deep:  #2E86DE;



  --sd-navy-mid:   #2E86DE;



  --sd-pink:       #FF6B6B;



  --sd-pink-light: rgba(255,107,107,.10);



  --sd-cyan:       #2E86DE;



  --sd-cyan-light: rgba(46,134,222,.10);







  /* Neutrals */



  --sd-white:      #ffffff;



  --sd-gray-50:    #F0F6FF;



  --sd-gray-100:   #E8F1FB;



  --sd-gray-200:   #e5e7eb;



  --sd-gray-400:   #9ca3af;



  --sd-gray-600:   #6b7280;



  --sd-gray-700:   #374151;



  --sd-gray-900:   #111827;







  /* Semantic */



  --sd-success:    #10b981;



  --sd-success-bg: #f0fdf4;



  --sd-warning:    #f59e0b;



  --sd-warning-bg: #fffbeb;



  --sd-error:      #dc2626;



  --sd-error-bg:   #fef2f2;



  --sd-info:       #3b82f6;



  --sd-info-bg:    #E8F1FB;







  /* Spacing (8px grid) */



  --sd-xs:   8px;



  --sd-sm:   16px;



  --sd-md:   24px;



  --sd-lg:   32px;



  --sd-xl:   48px;







  /* Radius */



  --sd-r-sm:  8px;



  --sd-r-md:  12px;



  --sd-r-lg:  16px;



  --sd-r-xl:  20px;



  --sd-r-pill:100px;







  /* Shadow */



  --sd-shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);



  --sd-shadow-md:  0 4px 16px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);



  --sd-shadow-lg:  0 8px 32px rgba(0,0,0,.12);



  --sd-shadow-xl:  0 20px 60px rgba(0,0,0,.18);







  /* Font */



  --sd-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;



}







/* ═══════════════════════════════════════════════



   RESET SCOPE — wszystko w .sd-scope



═══════════════════════════════════════════════ */



.sd-scope, .sd-scope * {



  box-sizing: border-box;



  font-family: var(--sd-font);



}



.sd-scope { color: var(--sd-gray-900); line-height: 1.6; }







/* ═══════════════════════════════════════════════



   LAYOUT



═══════════════════════════════════════════════ */



.sd-layout {



  display: grid;



  grid-template-columns: 240px 1fr;



  min-height: calc(100vh - 80px);



  max-width: 1280px;



  margin: 0 auto;



  padding: 0 20px 60px;



}



@media(max-width:860px) {



  .sd-layout { grid-template-columns: 1fr; }



}







/* ═══════════════════════════════════════════════



   SIDEBAR



═══════════════════════════════════════════════ */



.sd-sidebar {



  padding: 24px 0;



  border-right: 1px solid var(--sd-gray-100);



  position: sticky;



  top: 80px;



  height: fit-content;



  min-height: calc(100vh - 120px);



}



.sd-sidebar-brand {



  padding: 0 16px 20px;



  border-bottom: 1px solid var(--sd-gray-100);



  margin-bottom: 12px;



}



.sd-sidebar-avatar {



  width: 44px; height: 44px; border-radius: var(--sd-r-md);



  background: linear-gradient(135deg, var(--sd-navy), var(--sd-pink));



  display: flex; align-items: center; justify-content: center;



  font-size: 1rem; font-weight: 900; color: #fff;



  margin-bottom: 10px;



}



.sd-sidebar-name  { font-size: .82rem; font-weight: 800; color: var(--sd-gray-900); }



.sd-sidebar-role  {



  font-size: .65rem; font-weight: 700; text-transform: uppercase;



  letter-spacing: .08em; color: var(--sd-pink);



}



.sd-nav-item {



  display: flex; align-items: center; gap: 9px;



  padding: 9px 14px; margin: 2px 8px; border-radius: var(--sd-r-sm);



  font-size: .78rem; font-weight: 600; color: var(--sd-gray-600);



  text-decoration: none; transition: all .15s; cursor: pointer;



  border: none; background: none; width: calc(100% - 16px);



}



.sd-nav-item:hover { background: var(--sd-gray-50); color: var(--sd-gray-900); }



.sd-nav-item.active { background: var(--sd-pink-light); color: var(--sd-pink); }



.sd-nav-icon { font-size: .95rem; flex-shrink: 0; width: 18px; text-align: center; }



.sd-nav-badge {



  margin-left: auto; background: var(--sd-pink); color: #fff;



  font-size: .58rem; font-weight: 700; padding: 2px 6px;



  border-radius: var(--sd-r-pill); min-width: 18px; text-align: center;



}



@media(max-width:860px) {



  .sd-sidebar {



    position: static; border-right: none;



    border-bottom: 1px solid var(--sd-gray-100);



    padding: 12px 0; min-height: auto;



  }



  .sd-sidebar-brand { display: none; }



  .sd-nav-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px; }



  .sd-nav-item { flex: 0 0 auto; width: auto; margin: 0; }



  .sd-nav-item span:not(.sd-nav-icon):not(.sd-nav-badge) { display: none; }



}







/* ═══════════════════════════════════════════════



   MAIN CONTENT



═══════════════════════════════════════════════ */



.sd-main { padding: 28px 0 0 28px; }



@media(max-width:860px) { .sd-main { padding: 20px 0 0; } }







.sd-section-header {



  display: flex; align-items: center; justify-content: space-between;



  margin-bottom: 20px;



}



.sd-section-title { font-size: 1.1rem; font-weight: 900; color: var(--sd-gray-900); margin: 0; }



.sd-section-sub   { font-size: .72rem; color: var(--sd-gray-400); margin-top: 2px; }







/* ═══════════════════════════════════════════════



   KARTA (card)



═══════════════════════════════════════════════ */



.sd-card {



  background: var(--sd-white);



  border: 1.5px solid var(--sd-gray-100);



  border-radius: var(--sd-r-lg);



  padding: 20px;



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



  transition: box-shadow .2s, border-color .2s, transform .2s;



}



.sd-card:hover { box-shadow: var(--sd-shadow-md); }



.sd-card--interactive:hover {



  border-color: rgba(255,107,107,.3);



  transform: translateY(-2px);



  box-shadow: var(--sd-shadow-lg);



}



.sd-card--dark {



  background: linear-gradient(135deg, var(--sd-navy) 0%, var(--sd-navy-mid) 100%);



  border-color: rgba(255,255,255,.08);



  color: #fff;



}



.sd-card--pink-glow {



  box-shadow: var(--sd-shadow-sm), 0 0 0 1px rgba(255,107,107,.15);



}







/* ═══════════════════════════════════════════════



   WELCOME BANNER



═══════════════════════════════════════════════ */



.sd-welcome {



  background: linear-gradient(135deg, var(--sd-navy) 0%, #0D2E6B 100%);



  border-radius: var(--sd-r-xl);



  padding: 24px 28px;



  display: grid; grid-template-columns: 1fr auto;



  gap: 20px; align-items: center;



  margin-bottom: var(--sd-md);



  position: relative; overflow: hidden;



}



.sd-welcome::before {



  content: ''; position: absolute; top: -40%; right: -5%;



  width: 40%; height: 180%;



  background: radial-gradient(ellipse, rgba(255,107,107,.15) 0%, transparent 65%);



  pointer-events: none;



}



.sd-welcome-inner { position: relative; z-index: 1; }



.sd-welcome-hello { font-size: .68rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; }



.sd-welcome-name  { font-size: 1.25rem; font-weight: 900; color: #fff; margin-bottom: 4px; }



.sd-welcome-sub   { font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.5; }



@media(max-width:540px) {



  .sd-welcome { grid-template-columns: 1fr; }



}







/* ═══════════════════════════════════════════════



   STATYSTYKI (stat tiles)



═══════════════════════════════════════════════ */



.sd-stats-grid {



  display: grid; grid-template-columns: repeat(4,1fr);



  gap: 10px; margin-bottom: var(--sd-md);



}



@media(max-width:700px) { .sd-stats-grid { grid-template-columns: repeat(2,1fr); } }



.sd-stat {



  background: var(--sd-white);



  border: 1.5px solid var(--sd-gray-100);



  border-radius: var(--sd-r-md);



  padding: 16px;



  transition: border-color .15s;



}



.sd-stat:hover { border-color: rgba(255,107,107,.2); }



.sd-stat-icon  { font-size: 1.3rem; display: block; margin-bottom: 8px; }



.sd-stat-val   { font-size: 1.5rem; font-weight: 900; color: var(--sd-gray-900); line-height: 1; margin-bottom: 4px; }



.sd-stat-val em { font-style: normal; color: var(--sd-pink); }



.sd-stat-label { font-size: .62rem; color: var(--sd-gray-400); text-transform: uppercase; letter-spacing: .06em; }







/* ═══════════════════════════════════════════════



   PROGRESS BAR



═══════════════════════════════════════════════ */



.sd-progress {



  height: 6px; background: var(--sd-gray-100);



  border-radius: var(--sd-r-pill); overflow: hidden;



}



.sd-progress-fill {



  height: 100%;



  background: linear-gradient(90deg, var(--sd-pink), var(--sd-cyan));



  border-radius: var(--sd-r-pill);



  transition: width .6s cubic-bezier(.4,0,.2,1);



}



.sd-progress-label {



  font-size: .65rem; color: var(--sd-gray-400);



  margin-top: 4px;



}







/* ═══════════════════════════════════════════════



   BADGES / TAGS



═══════════════════════════════════════════════ */



.sd-badge {



  display: inline-flex; align-items: center; gap: 4px;



  padding: 3px 10px; border-radius: var(--sd-r-pill);



  font-size: .62rem; font-weight: 700;



}



.sd-badge--success { background: #dcfce7; color: #16a34a; }



.sd-badge--error   { background: #fee2e2; color: #dc2626; }



.sd-badge--warning { background: #fef9c3; color: #b45309; }



.sd-badge--info    { background: #dbeafe; color: #1d4ed8; }



.sd-badge--pink    { background: var(--sd-pink-light); color: var(--sd-pink); }



.sd-badge--cyan    { background: var(--sd-cyan-light); color: var(--sd-cyan); }



.sd-badge--gray    { background: var(--sd-gray-100); color: var(--sd-gray-600); }







/* ═══════════════════════════════════════════════



   PRZYCISKI



═══════════════════════════════════════════════ */



.sd-btn {



  display: inline-flex; align-items: center; gap: 6px;



  padding: 8px 18px; border-radius: var(--sd-r-sm);



  font-size: .75rem; font-weight: 700; font-family: var(--sd-font);



  cursor: pointer; border: none; text-decoration: none;



  transition: all .15s; white-space: nowrap;



}



.sd-btn--primary {



  background: var(--sd-pink); color: #fff;



  box-shadow: 0 4px 14px rgba(255,107,107,.3);



}



.sd-btn--primary:hover { opacity: .9; transform: translateY(-1px); color: #fff; }



.sd-btn--secondary {



  background: var(--sd-cyan); color: #fff;



  box-shadow: 0 4px 14px rgba(46,134,222,.25);



}



.sd-btn--secondary:hover { opacity: .9; transform: translateY(-1px); color: #fff; }



.sd-btn--ghost {



  background: var(--sd-gray-50); color: var(--sd-gray-700);



  border: 1.5px solid var(--sd-gray-200);



}



.sd-btn--ghost:hover { border-color: var(--sd-pink); color: var(--sd-pink); }



.sd-btn--dark {



  background: var(--sd-navy); color: #fff;



}



.sd-btn--dark:hover { opacity: .85; color: #fff; }



.sd-btn--lg { padding: 12px 28px; font-size: .85rem; border-radius: 10px; }



.sd-btn--sm { padding: 5px 12px; font-size: .68rem; }



.sd-btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }







/* ═══════════════════════════════════════════════



   FORMULARZE



═══════════════════════════════════════════════ */



.sd-label {



  display: block; font-size: .65rem; font-weight: 700;



  text-transform: uppercase; letter-spacing: .08em;



  color: var(--sd-gray-400); margin-bottom: 5px;



}



.sd-input, .sd-select, .sd-textarea {



  width: 100%; padding: 10px 14px;



  border: 1.5px solid var(--sd-gray-200);



  border-radius: var(--sd-r-sm);



  font-size: .82rem; font-family: var(--sd-font);



  color: var(--sd-gray-900); background: var(--sd-gray-50);



  outline: none; transition: border-color .15s, background .15s;



}



.sd-input:focus, .sd-select:focus, .sd-textarea:focus {



  border-color: var(--sd-pink); background: var(--sd-white);



  box-shadow: 0 0 0 3px rgba(255,107,107,.08);



}



.sd-select {



  appearance: none;



  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ca3af' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");



  background-repeat: no-repeat;



  background-position: right 12px center;



  padding-right: 32px;



  cursor: pointer;



}



.sd-textarea { min-height: 100px; resize: vertical; }



.sd-form-row { margin-bottom: 14px; }



.sd-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }



.sd-form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }



@media(max-width:560px) {



  .sd-form-grid-2, .sd-form-grid-3 { grid-template-columns: 1fr; }



}



.sd-checkbox-row {



  display: flex; align-items: flex-start; gap: 10px;



  font-size: .78rem; color: var(--sd-gray-600); line-height: 1.55;



  cursor: pointer;



}



.sd-checkbox-row input {



  margin-top: 2px; accent-color: var(--sd-pink);



  flex-shrink: 0; width: 16px; height: 16px;



}







/* ═══════════════════════════════════════════════



   ALERT / NOTICE



═══════════════════════════════════════════════ */



.sd-alert {



  display: flex; align-items: flex-start; gap: 12px;



  padding: 14px 18px; border-radius: var(--sd-r-md);



  margin-bottom: 10px;



}



.sd-alert--warn    { background: #fff7ed; border: 1.5px solid #fed7aa; }



.sd-alert--info    { background: var(--sd-info-bg); border: 1.5px solid #bfdbfe; }



.sd-alert--success { background: var(--sd-success-bg); border: 1.5px solid #bbf7d0; }



.sd-alert--error   { background: var(--sd-error-bg); border: 1.5px solid #fca5a5; }



.sd-alert-icon    { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }



.sd-alert-title   { font-size: .8rem; font-weight: 700; color: var(--sd-gray-900); margin-bottom: 2px; }



.sd-alert-sub     { font-size: .72rem; color: var(--sd-gray-600); }







/* ═══════════════════════════════════════════════



   TABELA



═══════════════════════════════════════════════ */



.sd-table { width: 100%; border-collapse: collapse; font-size: .76rem; }



.sd-table th {



  text-align: left; padding: 8px 12px;



  border-bottom: 2px solid var(--sd-gray-100);



  font-size: .62rem; font-weight: 700;



  text-transform: uppercase; letter-spacing: .06em;



  color: var(--sd-gray-400);



}



.sd-table td {



  padding: 10px 12px;



  border-bottom: 1px solid var(--sd-gray-50);



  vertical-align: middle;



}



.sd-table tr:hover td { background: var(--sd-gray-50); }



.sd-table-overflow { overflow-x: auto; }







/* ═══════════════════════════════════════════════



   EMPTY STATE



═══════════════════════════════════════════════ */



.sd-empty {



  text-align: center; padding: 48px 24px;



  color: var(--sd-gray-400);



}



.sd-empty-icon  { font-size: 2.5rem; display: block; margin-bottom: 14px; }



.sd-empty-title { font-size: .9rem; font-weight: 700; color: var(--sd-gray-700); margin-bottom: 6px; }



.sd-empty-sub   { font-size: .78rem; line-height: 1.65; }







/* ═══════════════════════════════════════════════



   QUIZ ENGINE — specyficzne komponenty



═══════════════════════════════════════════════ */



.sd-quiz-wrap {



  max-width: 720px; margin: 0 auto; padding: 32px 24px 60px;



}



.sd-quiz-header {



  background: linear-gradient(135deg, var(--sd-navy), var(--sd-navy-mid));



  border-radius: var(--sd-r-xl); padding: 24px 28px;



  margin-bottom: 24px; color: #fff; position: relative; overflow: hidden;



}



.sd-quiz-header::before {



  content: ''; position: absolute; top: -30%; right: -5%;



  width: 40%; height: 180%;



  background: radial-gradient(ellipse, rgba(255,107,107,.12) 0%, transparent 65%);



  pointer-events: none;



}



.sd-quiz-progress-outer {



  height: 6px; background: rgba(255,255,255,.15);



  border-radius: var(--sd-r-pill); overflow: hidden; margin-bottom: 8px;



}



.sd-quiz-progress-inner {



  height: 100%; background: linear-gradient(90deg, var(--sd-pink), var(--sd-cyan));



  border-radius: var(--sd-r-pill); transition: width .4s ease;



}



.sd-quiz-meta {



  display: flex; align-items: center; justify-content: space-between;



  font-size: .72rem; color: rgba(255,255,255,.55);



}



.sd-quiz-timer {



  display: inline-flex; align-items: center; gap: 5px;



  font-size: .82rem; font-weight: 700; color: #fff;



  background: rgba(255,255,255,.1); padding: 5px 12px;



  border-radius: var(--sd-r-pill);



}



.sd-quiz-timer.warning { color: #fbbf24; background: rgba(251,191,36,.15); }



.sd-quiz-timer.danger  { color: #f87171; background: rgba(248,113,113,.15); animation: sd-pulse .8s infinite; }







@keyframes sd-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }







/* Pytanie */



.sd-question-card {



  background: var(--sd-white);



  border: 1.5px solid var(--sd-gray-100);



  border-radius: var(--sd-r-xl); padding: 28px 28px 24px;



  box-shadow: var(--sd-shadow-md);



  margin-bottom: 20px;



}



.sd-question-num  { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--sd-pink); margin-bottom: 12px; }



.sd-question-text { font-size: 1rem; font-weight: 800; color: var(--sd-gray-900); line-height: 1.45; margin-bottom: 24px; }







/* Odpowiedzi */



.sd-answer {



  display: flex; align-items: flex-start; gap: 12px;



  padding: 13px 16px; border-radius: var(--sd-r-md);



  border: 2px solid var(--sd-gray-100); background: var(--sd-gray-50);



  cursor: pointer; transition: all .15s; margin-bottom: 8px;



  font-size: .85rem; color: var(--sd-gray-700); font-weight: 600;



  user-select: none;



}



.sd-answer:hover:not(.disabled) { border-color: var(--sd-pink); background: var(--sd-pink-light); }



.sd-answer.selected { border-color: var(--sd-pink); background: var(--sd-pink-light); color: var(--sd-pink); }



.sd-answer.correct  { border-color: var(--sd-success); background: var(--sd-success-bg); color: #166534; }



.sd-answer.wrong    { border-color: var(--sd-error); background: var(--sd-error-bg); color: #991b1b; }



.sd-answer.disabled { cursor: default; }



.sd-answer-letter {



  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;



  display: flex; align-items: center; justify-content: center;



  font-size: .72rem; font-weight: 900;



  background: var(--sd-gray-200); color: var(--sd-gray-600);



  transition: all .15s;



}



.sd-answer.selected .sd-answer-letter { background: var(--sd-pink); color: #fff; }



.sd-answer.correct  .sd-answer-letter { background: var(--sd-success); color: #fff; }



.sd-answer.wrong    .sd-answer-letter { background: var(--sd-error); color: #fff; }







/* Wynik */



.sd-result-wrap {



  max-width: 560px; margin: 0 auto; padding: 48px 24px; text-align: center;



}



.sd-result-circle {



  width: 120px; height: 120px; border-radius: 50%;



  display: flex; align-items: center; justify-content: center;



  margin: 0 auto 24px;



  font-size: 2.2rem; font-weight: 900;



}



.sd-result-circle--pass {



  background: conic-gradient(var(--sd-success) var(--pct, 0%), var(--sd-gray-100) 0);



  box-shadow: 0 0 0 8px var(--sd-success-bg);



  color: var(--sd-success);



}



.sd-result-circle--fail {



  background: conic-gradient(var(--sd-error) var(--pct, 0%), var(--sd-gray-100) 0);



  box-shadow: 0 0 0 8px var(--sd-error-bg);



  color: var(--sd-error);



}



.sd-result-title { font-size: 1.5rem; font-weight: 900; margin-bottom: 8px; }



.sd-result-sub   { font-size: .88rem; color: var(--sd-gray-600); line-height: 1.7; margin-bottom: 28px; }



.sd-result-stats {



  display: grid; grid-template-columns: repeat(3,1fr);



  gap: 12px; margin-bottom: 28px;



}



.sd-result-stat {



  background: var(--sd-gray-50); border-radius: var(--sd-r-md);



  padding: 14px 10px; text-align: center;



}



.sd-result-stat-val   { font-size: 1.4rem; font-weight: 900; color: var(--sd-gray-900); }



.sd-result-stat-label { font-size: .62rem; color: var(--sd-gray-400); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }







/* ═══════════════════════════════════════════════



   CERTYFIKAT PREVIEW



═══════════════════════════════════════════════ */



.sd-cert-preview {



  background: linear-gradient(135deg, var(--sd-navy) 0%, var(--sd-navy-mid) 100%);



  border-radius: var(--sd-r-xl); padding: 36px;



  text-align: center; color: #fff; position: relative; overflow: hidden;



  margin: 24px 0;



}



.sd-cert-preview::before {



  content: ''; position: absolute; inset: 0;



  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");



  pointer-events: none;



}



.sd-cert-icon   { font-size: 3rem; margin-bottom: 12px; }



.sd-cert-title  { font-size: 1.1rem; font-weight: 900; margin-bottom: 6px; }



.sd-cert-name   { font-size: 1.5rem; font-weight: 900; color: var(--sd-cyan); margin-bottom: 4px; }



.sd-cert-course { font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 16px; }



.sd-cert-nr     { font-size: .65rem; color: rgba(255,255,255,.35); letter-spacing: .1em; text-transform: uppercase; }