/* ============================================
   DESIGN TOKENS — importeras från tokens.css
   ============================================ */
@import url('tokens.css');

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.admin-user-card:hover .admin-user-chevron {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}

.bar-tip:hover .bar-tip-label { opacity: 1 !important; }

@property --btn-sweep-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

body {
  font-family: var(--font-family);
  color: var(--color-gray-900);
  background: #EDEDF0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  min-height: 100vh;
}

/* ============================================
   LAYOUT
   ============================================ */
.app {
  max-width: var(--max-width-app);
  margin: 0 auto;
  padding: 24px 16px 64px;
}

/* Text-tunga skärmar håller läsbar bredd även när .app är bredare */
#screen-provinfo,
#screen-review,
#screen-analyzing {
  max-width: var(--max-width-readable);
  margin: 0 auto;
}

/* Snabbkoll/quiz: kortet fyller bredden, men innehållet centreras
   och håller läsbar bredd så texten inte blir sladdrig på desktop */
.screen > .card {
  box-shadow: none;
}

#screen-training > .card {
  padding: 48px 32px 96px;
}
@media (max-width: 768px) {
  #screen-training > .card { padding: 32px 20px 32px; }
}
#screen-training > .card > .training-header,
#screen-training > .card > .training-progress,
#screen-training > .card > .mode-selector,
#screen-training > .card > #training-content {
  max-width: var(--max-width-readable);
  margin-left: auto;
  margin-right: auto;
}

.app-header {
  text-align: center;
  padding: 48px 0 40px;
}

.app-header h1 {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-gray-900);
  letter-spacing: -0.02em;
}

.app-header p {
  font-size: 1rem;
  color: var(--color-gray-500);
  margin-top: 8px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* (compact header replaced by navbar) */

/* ============================================
   STEPS INDICATOR
   ============================================ */
.steps {
  display: flex;
  gap: 8px;
  margin-bottom: 32px;
  max-width: var(--max-width-readable);
  margin-left: auto;
  margin-right: auto;
}

.steps .step-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--color-gray-300);
  transition: background 0.3s;
}

.steps .step-dot.active {
  background: var(--color-primary-600);
}

.steps .step-dot.done {
  background: var(--color-primary-300);
}

/* ============================================
   CARD
   ============================================ */
.card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.card + .card {
  margin-top: 16px;
}

.card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}

.card-desc {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-bottom: 20px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
.form-group {
  margin-bottom: 16px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.autocomplete-list {
  display: none;
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 180px;
  overflow-y: auto;
  list-style: none;
  margin: 0; padding: 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

.autocomplete-list li {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 0.9375rem;
}

.autocomplete-list li.active,
.autocomplete-list li:hover {
  background: var(--color-primary-50, #f5f3ff);
}

.admin-sort.active {
  background: var(--color-primary-600, #6C63FF);
  color: #fff;
  border-color: var(--color-primary-600, #6C63FF);
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  margin-bottom: 6px;
}

input[type="text"],
input[type="password"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: 1rem;
  font-family: var(--font-family);
  color: var(--color-gray-900);
  background: #fff;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 4px var(--color-primary-100), var(--shadow-xs);
}

textarea {
  min-height: 80px;
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23667085' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

.form-hint {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-top: 4px;
}

/* ============================================
   BUTTONS
   ============================================ */
label.btn { cursor: pointer; display: inline-flex; margin-bottom: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-family);
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn:focus-visible {
  box-shadow: 0 0 0 4px var(--color-primary-100);
}

.btn-primary {
  background: var(--color-primary-700);
  color: #fff;
  border-color: var(--color-primary-700);
  box-shadow: var(--shadow-xs);
}

.btn-primary:hover {
  background: var(--color-primary-800);
  border-color: var(--color-primary-800);
}

.btn-primary:disabled {
  background: var(--color-primary-200);
  border-color: var(--color-primary-200);
  cursor: not-allowed;
}

.btn-secondary {
  --btn-color: var(--color-primary-600);
  background: transparent;
  color: var(--btn-color);
  border: 2px solid var(--btn-color);
  font-weight: 600;
  position: relative;
  transition: color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s ease;
}

.btn-secondary::before,
.btn-secondary::after {
  content: "";
  position: absolute;
  width: 40px;
  height: 2px;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  offset-path: rect(1px calc(100% - 1px) calc(100% - 1px) 1px round var(--radius-md));
  offset-rotate: auto;
  opacity: 0;
  pointer-events: none;
}

.btn-secondary::before { offset-distance: 0%; }
.btn-secondary::after  { offset-distance: 100%; }

.btn-secondary:hover:not(:disabled)::before {
  animation: btn-travel-cw 0.35s linear;
}

.btn-secondary:hover:not(:disabled)::after {
  animation: btn-travel-ccw 0.35s linear;
}

@keyframes btn-travel-cw {
  0%   { offset-distance: 0%;  opacity: 0.45; }
  90%  { opacity: 0.45; }
  100% { offset-distance: 50%; opacity: 0; }
}

@keyframes btn-travel-ccw {
  0%   { offset-distance: 100%; opacity: 0.45; }
  90%  { opacity: 0.45; }
  100% { offset-distance: 50%;  opacity: 0; }
}

@keyframes btn-border-sweep {
  0%   { background-size: 0 2px, 2px 0, 0 2px, 2px 0;               opacity: 1; }
  25%  { background-size: 100% 2px, 2px 0, 0 2px, 2px 0;             opacity: 1; }
  50%  { background-size: 100% 2px, 2px 100%, 0 2px, 2px 0;          opacity: 1; }
  75%  { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 0;       opacity: 1; }
  100% { background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;    opacity: 0; }
}

@keyframes btn-border-sweep {
  0%   { --btn-sweep-angle:   0deg; opacity: 1; }
  85%  { opacity: 1; }
  100% { --btn-sweep-angle: 360deg; opacity: 0; }
}

/* Mindre storlek — används i täta ytor som block-kort */
.btn-sm {
  padding: 5px 14px;
  font-size: 0.75rem;
}

.btn-lg {
  padding: 12px 20px;
  font-size: 1rem;
}

.btn-full {
  width: 100%;
}

.btn-group {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Staplade btn-full — litet gap utan att använda btn-group */
.btn-full + .btn-full {
  margin-top: 8px;
}

/* Färgvarianter för .btn-secondary via CSS-variabel */
.btn-color-success { --btn-color: var(--color-success-500); }
.btn-color-error   { --btn-color: var(--color-error-500); }
.btn-color-neutral { --btn-color: var(--color-gray-400); }

/* Grön primärknapp — t.ex. "Repetera" när quiz är klart */
.btn-success {
  background: var(--color-success-500);
  color: #fff;
  border-color: var(--color-success-500);
  box-shadow: var(--shadow-xs);
}
.btn-success:hover {
  background: var(--color-success-700);
  border-color: var(--color-success-700);
}

/* ============================================
   UPLOAD ZONE
   ============================================ */
.upload-zone {
  border: 2px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--color-primary-400);
  background: var(--color-primary-25);
}

.upload-zone-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: var(--color-primary-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-zone-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary-600);
}

.upload-zone-title {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

.upload-zone-title span {
  color: var(--color-primary-600);
  font-weight: 600;
  cursor: pointer;
}

.upload-zone-hint {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  margin-top: 4px;
}

/* ============================================
   FILE LIST
   ============================================ */
.file-list {
  margin-top: 16px;
}

.file-item-wrap {
  margin-bottom: 8px;
}

.file-item-wrap:last-child {
  margin-bottom: 0;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: #fff;
}

.file-preview-area {
  padding: 0 12px 12px;
}

.file-preview-area img {
  border: 1px solid var(--color-gray-200);
}

.file-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.thumb-clickable:hover .thumb-eye-overlay {
  opacity: 1 !important;
}

.file-group-header {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray-500);
  padding: 12px 4px 4px;
}
.file-group-header.pending {
  color: #ef4444;
}

.file-icon.pdf { background: var(--color-error-50); color: var(--color-error-600); }
.file-icon.img { background: var(--color-primary-50); color: var(--color-primary-600); }
.file-icon.ppt { background: var(--color-warning-50); color: var(--color-warning-500); }
.file-icon.docx, .file-icon.doc { background: #EFF6FF; color: #2563EB; }
.file-icon.txt { background: var(--color-gray-100); color: var(--color-gray-600); }

.file-info {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-size {
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

.file-remove {
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
}

.file-remove:hover {
  color: var(--color-error-600);
  background: var(--color-error-50);
}

.file-folder {
  margin-bottom: 8px;
}

.file-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray-600);
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
}

.file-folder-header:hover {
  background: var(--color-gray-100);
}

.file-folder-chevron {
  flex-shrink: 0;
  transition: transform 0.15s;
  color: var(--color-gray-400);
}

.file-folder-count {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-gray-400);
}

.file-folder-files {
  padding-left: 16px;
  margin-top: 4px;
}

/* ============================================
   BADGE
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 16px;
}

.badge-primary {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
  border: 1px solid rgba(127,86,217,0.2);
}

.badge-success {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border: 1px solid rgba(18,183,106,0.3);
}

.badge-warning {
  background: var(--color-warning-50);
  color: var(--color-warning-500);
  border: 1px solid rgba(247,144,9,0.3);
}

.badge-error {
  background: var(--color-error-50);
  color: var(--color-error-500);
  border: 1px solid rgba(240,68,56,0.2);
}

/* Filstatus-badges i materialöversikten */
.badge-reading {
  background: rgba(59,130,246,0.1);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.2);
}
.badge-reading::after {
  content: '...';
  display: inline-block;
  width: 1.2em;
  vertical-align: bottom;
  animation: ellipsis-clip 1.6s steps(4, end) infinite;
}
.badge-edited {
  background: var(--color-warning-50);
  color: var(--color-warning-500);
  border: 1px solid rgba(247,144,9,0.3);
}
.badge-analyzed {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border: 1px solid rgba(18,183,106,0.3);
}
.badge-incomplete {
  background: var(--color-error-50);
  color: var(--color-error-500);
  border: 1px solid rgba(240,68,56,0.2);
}
.badge-waiting {
  background: rgba(59,130,246,0.1);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.2);
}
.badge-waiting::after {
  content: '...';
  display: inline-block;
  width: 1.2em;
  vertical-align: bottom;
  animation: ellipsis-clip 1.6s steps(4, end) infinite;
}
@keyframes ellipsis-clip {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}
.badge-ready {
  background: rgba(156,163,175,0.15);
  color: var(--color-gray-500);
  border: 1px solid rgba(156,163,175,0.2);
}

/* ============================================
   PROGRESS / LOADING
   ============================================ */
.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-primary-200);
  border-top-color: var(--color-primary-600);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes anim-dots {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
}
.anim-dots::after {
  content: '.';
  animation: anim-dots 1.2s steps(1, end) infinite;
}
@keyframes indeterminate-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(500%); }
}
.gen-progress-indeterminate {
  height: 100%;
  width: 18%;
  border-radius: 999px;
  background: repeating-linear-gradient(
    -45deg,
    var(--color-primary-500),
    var(--color-primary-500) 10px,
    var(--color-primary-400) 10px,
    var(--color-primary-400) 20px
  );
  background-size: 28.28px 28.28px;
  animation: indeterminate-slide 1.4s ease-in-out infinite, progress-stripes 0.8s linear infinite;
}

.processing-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--color-primary-25);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  color: var(--color-primary-700);
}

/* ============================================
   SCREEN VISIBILITY
   ============================================ */
.screen { display: none; }
.screen.active { display: block; }

/* ============================================
   SUMMARY LIST (analysis result placeholder)
   ============================================ */
.summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.summary-item:last-child {
  border-bottom: none;
}

.summary-count {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-600);
  min-width: 48px;
  text-align: center;
}

.summary-label {
  font-size: 0.875rem;
  color: var(--color-gray-600);
}

/* ============================================
   STUDY PLAN
   ============================================ */
#np-diag-banner {
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--color-primary-25);
  border: 1px solid var(--color-primary-100);
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--color-primary-700);
  line-height: 1.5;
  text-align: center;
}

.stats-row {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.stat-box {
  flex: 1;
  text-align: center;
  padding: 16px 8px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary-600);
}

.stat-label {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.phase-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 12px;
}

.phase-header h3 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.phase-tag {
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
}

.phase-tag-reading {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.phase-tag-practice {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.phase-tag-locked {
  background: var(--color-gray-100);
  color: var(--color-gray-400);
}

.day-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}

.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--color-gray-25);
  border-bottom: 1px solid var(--color-gray-100);
  cursor: pointer;
  user-select: none;
}

.day-header:hover {
  background: var(--color-gray-50);
}

.day-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
}

.day-meta {
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

.day-tasks {
  padding: 4px 0;
}

.day-tasks.collapsed {
  display: none;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 16px;
  transition: background 0.1s;
  cursor: pointer;
}

.task-item:hover {
  background: var(--color-gray-25);
}

.task-checkbox {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-gray-300);
  border-radius: 6px;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all 0.15s;
}

.task-checkbox:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-25);
}

.task-checkbox.checked {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
}

.task-checkbox.checked::after {
  content: '';
  width: 6px;
  height: 10px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translateY(-1px);
}

.task-item.done .task-text {
  text-decoration: line-through;
  color: var(--color-gray-400);
}

.task-text {
  font-size: 0.875rem;
  color: var(--color-gray-700);
  line-height: 1.5;
}

.task-badge {
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Animated progress bar — diagonal stripes */
.animated-progress-bar {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-primary-500),
    var(--color-primary-500) 10px,
    var(--color-primary-400) 10px,
    var(--color-primary-400) 20px
  );
  background-size: 28.28px 28.28px; /* 20px * sqrt(2) for 45° alignment */
  animation: progress-stripes 0.8s linear infinite;
}

@keyframes progress-stripes {
  from { background-position: 0 0; }
  to { background-position: 28.28px 0; }
}

.progress-bar-container {
  background: var(--color-gray-100);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
  margin-top: 8px;
  position: relative;
}

.progress-bar-container.lg {
  height: 10px;
  border-radius: 100px;
  margin-top: 0;
}

.progress-bar-fill {
  height: 100%;
  background: var(--fill-color, var(--color-primary-600));
  border-radius: 4px;
  transition: width 0.3s ease;
}

.progress-bar-container.lg .progress-bar-fill {
  border-radius: 100px;
}

.progress-bar-fill.animated-progress-bar {
  background: repeating-linear-gradient(
    -45deg,
    var(--color-primary-500),
    var(--color-primary-500) 10px,
    var(--color-primary-400) 10px,
    var(--color-primary-400) 20px
  );
}

.progress-bar-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gray-50);
  transform: translateX(-1px);
  pointer-events: none;
}

.progress-bar-label {
  font-size: 0.6875rem;
  min-width: 40px;
  text-align: right;
  color: var(--color-gray-500);
}

/* ============================================
   STATUS PILL
   ============================================ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  border-radius: 16px;
}

.status-pill svg {
  width: 11px;
  height: 11px;
}

.status-pill-success {
  background: var(--color-success-50);
  color: var(--color-success-700);
  border: 1px solid rgba(18,183,106,0.3);
}

.status-pill-error {
  background: var(--color-error-50);
  color: var(--color-error-500);
  border: 1px solid rgba(240,68,56,0.2);
}

/* ============================================
   FILE CHIP
   ============================================ */
.file-chip {
  font-size: 0.6875rem;
  padding: 2px 8px;
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  border-radius: 3px;
  color: var(--color-gray-600);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.file-chip:hover {
  background: var(--color-gray-200);
  border-color: var(--color-gray-300);
}

/* ============================================
   ICON CIRCLE
   Rund ikonbehållare — används i headers och fas-kort
   ============================================ */
.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-circle-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-circle-primary {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}
.icon-circle-success {
  background: var(--color-success-50);
  color: var(--color-success-500);
}
.icon-circle-error {
  background: var(--color-error-50);
  color: var(--color-error-600);
}

/* ============================================
   PHASE CARD ICON — tillstånd
   ============================================ */
.phase-card-icon--active {
  background: var(--color-primary-50);
  color: var(--color-primary-600);
}
.phase-card-icon--done {
  background: var(--color-success-50);
  color: var(--color-success-500);
}

/* ============================================
   FILE REF BADGE
   Klickbar filreferens i läsuppgifter (plan-vy)
   ============================================ */
.file-ref-badge {
  font-size: 0.6875rem;
  padding: 1px 6px;
  background: var(--color-gray-100);
  border-radius: 3px;
  color: var(--color-gray-500);
  cursor: pointer;
  position: relative;
}
.file-ref-badge:hover {
  background: var(--color-gray-200);
}

/* ============================================
   STEP LABEL
   "Steg X av 3 — beskrivning" i plugga-flödet
   ============================================ */
.step-label {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.step-label-num {
  font-weight: 600;
  color: var(--color-primary-600);
}

/* ============================================
   SECTION HEADER
   Rubriksrad med ikon + titel (t.ex. "Genomgång")
   ============================================ */
.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.section-header-title {
  font-weight: 600;
  color: var(--color-gray-800);
}

/* ============================================
   CONTENT BOX
   Grå läsruta för AI-genererat material
   ============================================ */
.content-box {
  padding: 16px 20px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-200);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-gray-700);
}

/* ============================================
   PROSE
   Markdown-renderat innehåll inuti .content-box
   ============================================ */
.prose p        { margin: 6px 0; }
.prose ul,
.prose ol       { margin: 8px 0; padding-left: 20px; }
.prose table    { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.8125rem; }
.prose td,
.prose th       { padding: 6px 10px; border: 1px solid var(--color-gray-200); }
.prose h3       { margin: 20px 0 10px; color: var(--color-primary-700); }
.prose h4       { margin: 16px 0 8px; color: var(--color-gray-800); }

/* ============================================
   MODE TOGGLE
   "Flashcards — Byt övningstyp"-raden i NP-läge
   ============================================ */
.mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.mode-toggle-label {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}
.btn-link {
  font-size: 0.75rem;
  color: var(--color-primary-500);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  font-family: var(--font-family);
}
.btn-link:hover {
  color: var(--color-primary-700);
}
/* "Nya frågor"-knapp i mode-selector — tryckt mot höger */
.mode-btn-new {
  margin-left: auto;
  color: var(--color-gray-400);
}

/* Extra liten knappstorlek — används i fillistans action-knappar */
.btn-xs {
  padding: 4px 10px;
  font-size: 0.6875rem;
  white-space: nowrap;
}

/* ============================================
   TIMELINE CARD (block-kort i studieplan)
   ============================================ */
.timeline-card {
  border: 1px solid var(--color-gray-300);
  box-shadow: none;
  margin-bottom: 12px;
}

.timeline-card-meta {
  font-size: 0.6875rem;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.timeline-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.timeline-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  flex: 1;
  min-width: 0;
}

.timeline-card-desc {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-bottom: 4px;
}

.timeline-card-tasks {
  margin-top: 8px;
}

.timeline-task {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 0.8125rem;
  color: var(--color-gray-800);
}

.timeline-task-done {
  color: var(--color-gray-400);
}

.timeline-task-done .timeline-task-title {
  text-decoration: line-through;
}

.timeline-task-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.timeline-task-icon-pending {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-gray-300);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.timeline-task-title {
  flex: 1;
  min-width: 0;
}

.timeline-tasks-practice {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-gray-200);
}

.timeline-tasks-practice-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.timeline-task-practice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 0.8125rem;
  color: var(--color-gray-700);
}

.timeline-card-footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.timeline-card-progress {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.block-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.block-item:hover {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

.block-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.block-item.locked:hover {
  border-color: var(--color-gray-200);
  box-shadow: none;
}

.block-time {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  font-size: 0.6875rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.block-info {
  flex: 1;
  min-width: 0;
}

.block-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

.block-desc {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  margin-top: 2px;
}

.block-status {
  flex-shrink: 0;
}

/* ============================================
   BLOCK DETAIL — THREE PHASES
   ============================================ */
.phase-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.phase-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  transition: border-color 0.15s;
}

.phase-card.phase-active {
  border-color: var(--color-primary-300);
  background: var(--color-primary-25);
}

.phase-card.phase-done {
  border-color: #A6F4C5;
  background: var(--color-success-50);
}
.phase-card.phase-done .btn-secondary {
  background: transparent;
  --btn-color: var(--color-success-700);
}

.phase-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.phase-card-body {
  flex: 1;
  min-width: 0;
}

.phase-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-700);
  margin-bottom: 2px;
}

.phase-card-subtitle {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.phase-card-hint {
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  margin-top: 6px;
  font-style: italic;
}

.phase-card-action {
  flex-shrink: 0;
  align-self: center;
}

.phase-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 0.6875rem;
  font-weight: 600;
  margin-left: 8px;
}

.phase-badge-practice {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

.phase-badge-exam {
  background: #FEF3C7;
  color: #92400E;
}

.reading-tasks-inline {
  margin-top: 10px;
}

.reading-tasks-inline .task-item {
  padding: 6px 0;
}

.gap-item {
  padding: 10px 14px;
  background: var(--color-warning-50);
  border: 1px solid #FEF0C7;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  font-size: 0.8125rem;
  color: var(--color-gray-700);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.gap-icon {
  flex-shrink: 0;
  color: var(--color-warning-500);
}

.nav-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-gray-200);
  margin-bottom: 20px;
  gap: 0;
}

.nav-tab {
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-500);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-family: var(--font-family);
  transition: color 0.15s, border-color 0.15s;
}

.nav-tab:hover {
  color: var(--color-gray-700);
}

.nav-tab.active {
  color: var(--color-primary-600);
  border-bottom-color: var(--color-primary-600);
}

/* Flatpickr theme override */
.flatpickr-calendar {
  font-family: var(--font-family) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: 1px solid var(--color-gray-200) !important;
}

.flatpickr-months .flatpickr-month {
  background: var(--color-primary-600) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  color: #fff !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #fff !important;
  color: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: #fff !important;
  font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  color: var(--color-gray-900) !important;
}

span.flatpickr-weekday {
  color: var(--color-gray-500) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
}

.flatpickr-day {
  border-radius: var(--radius-md) !important;
  color: var(--color-gray-700) !important;
  font-size: 0.875rem !important;
}

.flatpickr-day:hover {
  background: var(--color-primary-25) !important;
  border-color: var(--color-primary-200) !important;
}

.flatpickr-day.today {
  border-color: var(--color-primary-300) !important;
}

.flatpickr-day.selected {
  background: var(--color-primary-600) !important;
  border-color: var(--color-primary-600) !important;
  color: #fff !important;
}

.flatpickr-day.flatpickr-disabled {
  color: var(--color-gray-300) !important;
}

/* NP area chooser */
.np-area-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--color-gray-50);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.np-area-item:hover {
  background: var(--color-primary-25);
  border-color: var(--color-primary-200);
}

.np-area-item:has(input:checked) {
  background: var(--color-primary-25);
  border-color: var(--color-primary-600);
}

.np-area-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-primary-600);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.np-area-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.np-area-text strong {
  font-size: 0.875rem;
  color: var(--color-gray-800);
}

.np-area-text span {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}

/* NP date input — match subject button style */
#provinfo-np input[type="date"] {
  background: var(--color-gray-50);
  border: 2px solid var(--color-gray-200);
  font-size: 0.875rem;
  color: var(--color-gray-700);
  box-shadow: none;
}

#provinfo-np input[type="date"]:focus {
  border-color: var(--color-primary-600);
  background: var(--color-primary-25);
  box-shadow: none;
}

/* NP subject list */
.np-subject-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.np-subject-list .np-divider {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 0 4px;
  border-top: 1px solid var(--color-gray-200);
  margin-top: 4px;
}

.np-subject-btn {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-family: var(--font-family);
  color: var(--color-gray-700);
  background: var(--color-gray-50);
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.np-subject-btn:hover {
  background: var(--color-primary-25);
  border-color: var(--color-primary-200);
}

.np-subject-btn.selected {
  background: var(--color-primary-25);
  border-color: var(--color-primary-600);
  color: var(--color-primary-700);
  font-weight: 600;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-gray-400);
}

.empty-state svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: var(--color-gray-300);
}

.empty-state p {
  font-size: 0.875rem;
}

/* ============================================
   TRAINING SCREEN
   ============================================ */
.training-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.training-back {
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
}

.training-back:hover {
  color: var(--color-gray-700);
  background: var(--color-gray-50);
}

.training-title {
  flex: 1;
}

.training-title h2 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.training-title p {
  font-size: 0.75rem;
  color: var(--color-gray-500);
}

.mode-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.mode-btn {
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: var(--font-family);
  border: 1px solid var(--color-gray-200);
  border-radius: 20px;
  background: #fff;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.15s;
}

.mode-btn:hover {
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.mode-btn.active {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}

.toggle {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--color-gray-200);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  border: none;
  padding: 0;
}

.toggle.on {
  background: var(--color-primary-600);
}

.toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: var(--shadow-xs);
}

.toggle.on::after {
  transform: translateX(16px);
}

.question-card {
  padding: 24px;
  background: var(--color-gray-25);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  margin-bottom: 16px;
}

.question-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-400);
  margin-bottom: 8px;
}

.question-text {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-gray-900);
  line-height: 1.6;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--color-gray-700);
  font-family: var(--font-family);
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}

.quiz-option:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-25);
}

.quiz-option.selected {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

.quiz-option.correct {
  border-color: var(--color-success-500);
  background: var(--color-success-50);
}

.quiz-option.incorrect {
  border-color: var(--color-error-500);
  background: var(--color-error-50);
}

.quiz-option.correct-answer {
  border-color: var(--color-success-500);
  background: var(--color-success-50);
}

.quiz-option-letter {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-gray-600);
  border: none;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.flashcard {
  perspective: 1000px;
  min-height: 200px;
  cursor: pointer;
  margin-bottom: 16px;
}

.flashcard-inner {
  position: relative;
  width: 100%;
  min-height: 200px;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  text-align: center;
}

.flashcard-front {
  background: #fff;
}

.flashcard-back {
  background: var(--color-primary-25);
  border-color: var(--color-primary-200);
  transform: rotateY(180deg);
}

.flashcard-text {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-gray-900);
  line-height: 1.6;
}

.flashcard-hint {
  font-size: 0.75rem;
  color: var(--color-gray-400);
  margin-top: 16px;
}

.flashcard-buttons {
  display: flex;
  gap: 8px;
}

.flashcard-buttons .btn {
  flex: 1;
}

.answer-area textarea {
  width: 100%;
  min-height: 120px;
  padding: 14px 16px;
  font-size: 0.9375rem;
  font-family: var(--font-family);
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  resize: vertical;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.answer-area textarea:focus {
  border-color: var(--color-primary-300);
  box-shadow: 0 0 0 4px var(--color-primary-100), var(--shadow-xs);
}

.feedback-card {
  padding: 16px;
  border-radius: var(--radius-md);
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.feedback-card.positive {
  background: var(--color-success-50);
  border: 1px solid #A6F4C5;
  color: var(--color-success-700);
}

.feedback-card.constructive {
  background: var(--color-warning-50);
  border: 1px solid #FEF0C7;
  color: var(--color-gray-700);
}

.feedback-card.neutral {
  background: var(--color-gray-50);
  border: 1px solid var(--color-gray-200);
  color: var(--color-gray-700);
}

.training-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--color-gray-400);
  margin-bottom: 16px;
}

.training-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--color-gray-100);
  border-radius: 2px;
  overflow: hidden;
}

.training-progress-fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: 2px;
  transition: width 0.3s;
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dashboard-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.plan-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-tile {
  background: #fff;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.plan-tile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.plan-tile:hover {
  border-color: var(--color-primary-300);
}

/* Overlay CTA on hover */
.plan-tile-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: var(--radius-lg);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(2px);
  transition: opacity 0.35s ease;
}

.plan-tile:hover .plan-tile-overlay {
  opacity: 1;
  pointer-events: auto;
}

.plan-tile-overlay .btn {
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.3s ease 0.05s, opacity 0.3s ease 0.05s;
}

.plan-tile:hover .plan-tile-overlay .btn {
  transform: translateY(0);
  opacity: 1;
}

.plan-tile-delete {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  padding: 2px 0;
  font-size: 0.75rem;
  font-family: var(--font-family);
  text-decoration: underline;
  text-underline-offset: 2px;
  z-index: 3;
  display: none;
}

.plan-tile:hover .plan-tile-delete {
  display: block;
}

.plan-tile-delete:hover {
  color: var(--color-error-600);
}

.btn-error {
  background: var(--color-error-600);
  color: #fff;
  border-color: var(--color-error-600);
  box-shadow: var(--shadow-xs);
}

.btn-error:hover {
  background: var(--color-error-700);
  border-color: var(--color-error-700);
}

.plan-tile-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  text-align: center;
}

.plan-tile-info {
  flex: 1;
  min-width: 0;
}

.plan-tile-subject {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-gray-900);
  text-transform: capitalize;
}

.plan-tile-format {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  margin-top: 1px;
}

.plan-tile-progress {
  margin-top: 6px;
}

.plan-tile-progress-bar {
  height: 4px;
  background: var(--color-gray-100);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}

.plan-tile-progress-fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: 2px;
  transition: width 0.3s;
}

.plan-tile-progress-text {
  font-size: 0.6875rem;
  color: var(--color-gray-400);
}
.plan-tile-status {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-top: 4px;
}
.plan-tile-status.status-on-track { color: var(--color-success-600); }
.plan-tile-status.status-behind { color: var(--color-error-600); }

.plan-tile-date {
  flex-shrink: 0;
  text-align: right;
}

.plan-tile-days {
  font-size: 0.8125rem;
  font-weight: 600;
}

.plan-tile-days.urgent { color: var(--color-error-500); }
.plan-tile-days.soon { color: var(--color-warning-500); }
.plan-tile-days.relaxed { color: var(--color-success-500); }
.plan-tile-days.passed { color: var(--color-gray-400); }

.plan-tile-exam-date {
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  margin-top: 1px;
}

/* Empty state / first-time CTA */
.plan-tile-cta {
  background: #fff;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.plan-tile-cta:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-25);
}

.plan-tile-cta-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: var(--color-primary-50);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan-tile-cta-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary-600);
}

.plan-tile-cta h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}

.plan-tile-cta p {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-bottom: 20px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

/* Add-new tile (when plans already exist) */
.plan-tile-add {
  background: #fff;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  transition: border-color 0.2s, background 0.2s;
  color: var(--color-gray-400);
}

.plan-tile-add:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-25);
  color: var(--color-primary-600);
}

.plan-tile-add svg {
  width: 28px;
  height: 28px;
  margin-bottom: 6px;
}

.plan-tile-add span {
  font-size: 0.8125rem;
  font-weight: 500;
}

/* ============================================
   AUTH & ONBOARDING
   ============================================ */
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.auth-card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 420px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-900);
}

.auth-logo p {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  margin-top: 4px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-gray-200);
}

.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}

.auth-footer a {
  color: var(--color-primary-600);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.auth-footer a:hover {
  text-decoration: underline;
}

.auth-error {
  padding: 10px 14px;
  background: var(--color-error-50);
  border: 1px solid #FECDCA;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
  color: var(--color-error-700);
  margin-bottom: 16px;
  display: none;
}

.auth-error.visible {
  display: block;
}

.grade-selector {
  display: flex;
  gap: 8px;
}

.grade-btn {
  flex: 1;
  padding: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: var(--font-family);
  text-align: center;
  border: 1px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.15s;
}

.grade-btn:hover {
  border-color: var(--color-primary-300);
  color: var(--color-primary-600);
}

.grade-btn.selected {
  background: var(--color-primary-50);
  border-color: var(--color-primary-400);
  color: var(--color-primary-700);
}

/* Onboarding slides */
.onboarding-slide {
  text-align: center;
  padding: 16px 0;
}

.onboarding-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: var(--color-primary-50);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.onboarding-icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary-600);
}

.onboarding-slide h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 8px;
}

.onboarding-slide p {
  font-size: 0.875rem;
  color: var(--color-gray-500);
  line-height: 1.6;
  max-width: 320px;
  margin: 0 auto;
}

.onboarding-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0 16px;
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-gray-200);
  transition: background 0.2s;
}

.onboarding-dot.active {
  background: var(--color-primary-600);
}

/* Profile / Min sida */
.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.8125rem;
}

.profile-info h2 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.profile-info p {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
}

.profile-section {
  margin-bottom: 24px;
}

.profile-section h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-gray-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-gray-100);
}

.profile-row:last-child {
  border-bottom: none;
}

.profile-row-label {
  font-size: 0.875rem;
  color: var(--color-gray-500);
}

.profile-row-value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

.history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.history-item-time {
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  white-space: nowrap;
}

.history-item-text {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  flex: 1;
}

.profile-exam-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}

.profile-exam-item:last-child {
  margin-bottom: 0;
}

.profile-exam-emoji {
  font-size: 1.25rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.profile-exam-info {
  flex: 1;
  min-width: 0;
}

.profile-exam-subject {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-gray-900);
}

.profile-exam-detail {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  margin-top: 2px;
}

.profile-exam-delete {
  background: none;
  border: none;
  color: var(--color-gray-400);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 0.75rem;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
}

.profile-exam-delete:hover {
  color: var(--color-error-600);
  background: var(--color-error-50);
}

/* ============================================
   NAVBAR — Rad 1: Global nav
   ============================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-gray-900);
  border-bottom: 1px solid var(--color-gray-800);
}
.navbar-inner {
  max-width: var(--max-width-app);
  margin: 0 auto;
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar-back {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  padding: 6px;
  border-radius: var(--radius-sm);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
  width: 32px;
}
.navbar-back:hover {
  color: #fff;
  background: rgba(255,255,255,0.08);
}
.navbar-brand {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.navbar-user-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  border: none;
  background: none;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
}
.navbar-user-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.avatar-xs {
  width: 22px;
  height: 22px;
  font-size: 0.625rem;
}

/* ============================================
   CONTEXT BAR — Rad 2: Exam info
   ============================================ */
.context-bar {
  position: sticky;
  top: 52px;
  z-index: 99;
  background: #fff;
  border-bottom: 1px solid var(--color-gray-200);
}
.context-bar-inner {
  max-width: var(--max-width-app);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
}
.context-bar-row-main {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.context-bar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.context-bar-title {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--color-gray-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.context-bar-sep {
  color: var(--color-gray-300);
}
.context-bar-days {
  font-size: 0.75rem;
  color: var(--color-gray-500);
  white-space: nowrap;
}
.context-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.context-bar-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}
.context-bar-progress-track {
  width: 100px;
  height: 5px;
  background: var(--color-gray-200);
  border-radius: 3px;
  overflow: hidden;
}
.context-bar-progress-fill {
  height: 100%;
  background: var(--color-primary-500);
  border-radius: 3px;
  transition: width 0.4s ease;
  width: 0%;
}
.context-bar-pct {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--color-gray-500);
  min-width: 24px;
}
.context-bar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--color-gray-700);
  line-height: 1;
  padding-bottom: 10px;
}
.context-bar-status:empty { display: none; }
.cbs-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.cbs-icon-status-on-track { color: var(--color-success-700); }
.cbs-icon-status-behind-mild { color: #d97706; }
.cbs-icon-status-behind-severe { color: var(--color-error-600); }
.cbs-headline { font-weight: 600; }
.cbs-detail { color: var(--color-gray-500); }

/* ============================================
   COACHING ZONE — Rad 3: Status banner
   ============================================ */
#plan-coaching-zone:empty { display: none; }
#plan-coaching-zone {
  max-width: var(--max-width-app);
  margin: 0 auto;
  padding: 12px 16px 0;
}
.coaching-zone {
  padding: 10px 14px;
  font-size: 0.8125rem;
  line-height: 1.5;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.coaching-zone.status-on-track,
.coaching-zone.status-ahead {
  color: var(--color-success-700);
  background: var(--color-success-50);
  border-color: var(--color-success-200);
}
.coaching-zone.status-behind-mild {
  color: #92400E;
  background: var(--color-warning-50);
  border-color: #E5C07B;
}
.coaching-zone.status-behind-severe {
  color: var(--color-error-600);
  background: var(--color-error-50);
  border-color: var(--color-error-200);
}
.coaching-zone-title {
  font-size: 0.8125rem;
  font-weight: 600;
}
.coaching-zone-details {
  font-size: 0.75rem;
  opacity: 0.8;
}

/* File list hover */
.overview-file-row:hover { background: var(--color-gray-100) !important; }
.file-delete-btn:hover { color: var(--color-error-500) !important; }

/* Profile inline inputs */
.profile-inline-input {
  font-size: 0.875rem !important;
  padding: 8px 12px !important;
}

/* Provinfo modal fields */
.provinfo-select,
.provinfo-input {
  font-size: 0.875rem !important;
  padding: 8px 12px !important;
  height: 38px;
}
.provinfo-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px !important;
  cursor: pointer;
}
input.provinfo-input {
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-color: #fff !important;
  padding-right: 32px !important;
  cursor: pointer !important;
}

/* Legacy compat — hidden */
#exam-info-header { display: none; }
.exam-header-bar { display: none; }
.exam-header-body { display: none; }
#plan-study-content.dimmed {
  opacity: 0.3;
  pointer-events: none;
  filter: blur(2px);
  transition: opacity 0.2s, filter 0.2s;
}

.avatar-dropdown {
  position: fixed;
  top: 60px;
  right: 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
  min-width: 200px;
  z-index: 200;
  display: none;
  overflow: hidden;
}

.avatar-dropdown.open {
  display: block;
}

.avatar-dropdown-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-gray-100);
}

.avatar-dropdown-header .dropdown-name {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-gray-800);
}

.avatar-dropdown-header .dropdown-email {
  font-size: 0.8125rem;
  color: var(--color-gray-400);
  margin-top: 2px;
}

.avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  font-size: 0.875rem;
  color: var(--color-gray-600);
  cursor: pointer;
  text-align: left;
}

.avatar-dropdown-item:hover {
  background: var(--color-gray-50);
}

.avatar-dropdown-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.avatar-dropdown-divider {
  height: 1px;
  background: var(--color-gray-100);
}

.avatar-dropdown-item.danger {
  color: #F04438;
}

.topbar-user-legacy {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 4px 10px 4px 4px;
  border-radius: 20px;
  border: none;
  background: none;
  font-family: var(--font-family);
  transition: background 0.15s;
}

.topbar-user:hover {
  background: var(--color-gray-100);
}

.topbar-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-gray-300);
}

.link-danger {
  color: var(--color-error-600);
  font-size: 0.8125rem;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-family);
  padding: 4px 0;
}

.link-danger:hover {
  text-decoration: underline;
}

/* ============================================
   CONSENT MODAL
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-width: 480px;
  width: 100%;
  padding: 24px;
  transform: translateY(8px);
  transition: transform 0.2s;
}

.modal-overlay.visible .modal {
  transform: translateY(0);
}

.modal h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin-bottom: 8px;
}

.modal p {
  font-size: 0.875rem;
  color: var(--color-gray-600);
  line-height: 1.6;
  margin-bottom: 12px;
}

.modal ul {
  font-size: 0.8125rem;
  color: var(--color-gray-600);
  line-height: 1.7;
  margin: 0 0 16px 16px;
}

.modal ul li {
  margin-bottom: 4px;
}

.ocr-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  margin-top: 4px;
}

/* ============================================
   DEEP DIVE
   ============================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 0.8125rem;
}

.breadcrumb {
  color: var(--color-primary-600);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font-family);
  font-size: 0.8125rem;
  padding: 2px 4px;
  border-radius: 4px;
}

.breadcrumb:hover {
  background: var(--color-primary-50);
  text-decoration: underline;
}

.breadcrumb-sep {
  color: var(--color-gray-300);
}

.breadcrumb-current {
  color: var(--color-gray-500);
  font-weight: 500;
}

.deepdive-content {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-gray-700);
}

.deepdive-content strong {
  color: var(--color-gray-900);
}

.deepdive-content p {
  margin-bottom: 12px;
}

.selectable-text {
  cursor: text;
}

.deepdive-trigger {
  position: absolute;
  display: none;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-family);
  background: var(--color-gray-900);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  white-space: nowrap;
}

.deepdive-trigger:hover {
  background: var(--color-gray-800);
}

/* ============================================
   SESSION SUMMARY
   ============================================ */
.summary-section {
  margin-top: 16px;
}

.summary-stat-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.summary-stat {
  flex: 1;
  padding: 12px;
  background: var(--color-gray-50);
  border-radius: var(--radius-md);
  text-align: center;
}

.summary-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-primary-600);
}

.summary-stat-label {
  font-size: 0.6875rem;
  color: var(--color-gray-400);
  margin-top: 2px;
}

.summary-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-block-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.8125rem;
}

.summary-block-row.mastered {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.summary-block-row.needs-work {
  background: var(--color-warning-50);
  color: var(--color-gray-700);
}

.summary-block-icon {
  flex-shrink: 0;
}

/* ============================================
   PRINT STYLES
   ============================================ */
.print-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.print-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 0.15s;
  background: #fff;
  font-family: var(--font-family);
  text-align: left;
  width: 100%;
}

.print-option:hover {
  border-color: var(--color-primary-300);
}

.print-option.selected {
  border-color: var(--color-primary-400);
  background: var(--color-primary-25);
}

.print-option-icon {
  width: 36px;
  height: 36px;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-gray-500);
}

.print-option-info h4 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-700);
}

.print-option-info p {
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

.print-block-select {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.print-block-chip {
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--font-family);
  border: 1px solid var(--color-gray-200);
  border-radius: 16px;
  background: #fff;
  color: var(--color-gray-500);
  cursor: pointer;
  transition: all 0.15s;
}

.print-block-chip.selected {
  background: var(--color-primary-50);
  border-color: var(--color-primary-300);
  color: var(--color-primary-700);
}

/* Print media query */
@media print {
  body { background: #fff; }
  .app-header, .steps, .nav-tabs, .btn, .btn-group,
  .mode-selector, .toggle-row, .training-header,
  .training-progress, .no-print { display: none !important; }
  .app { max-width: 100%; padding: 0; }
  .card { border: none; box-shadow: none; padding: 0; }
  .screen { display: none !important; }
  .screen.print-active { display: block !important; }
  #print-output { display: block !important; }
  #print-output .card { border: 1px solid #ddd; padding: 16px; margin-bottom: 16px; page-break-inside: avoid; }
  #print-output h2 { font-size: 1.25rem; margin-bottom: 8px; }
  #print-output h3 { font-size: 1rem; margin: 12px 0 6px; }
  #print-output p, #print-output li { font-size: 0.875rem; line-height: 1.6; }
}

#print-output {
  display: none;
}

/* ============================================
   TOAST
   ============================================ */
#toast-container {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--color-gray-900);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
  pointer-events: auto;
}
.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   RESPONSIVE
   ============================================ */
/* Tablet (<=768px) */
@media (max-width: 768px) {
  .context-bar-progress-track { width: 72px; }
}

/* Mobile (<=480px) */
@media (max-width: 480px) {
  .app { padding: 16px 12px 48px; }
  .app-header { padding: 32px 0 24px; }
  .app-header h1 { font-size: 1.5rem; }
  .card { padding: 16px; }
  .btn-group { flex-direction: column; }
  .stats-row { flex-wrap: wrap; }
  .stat-box { min-width: calc(50% - 6px); }
  #plan-inline-fields { grid-template-columns: 1fr !important; }
  .navbar-inner { padding: 0 12px; }
  .navbar-brand { font-size: 0.8125rem; }
  /* Navbar: hide name, center logo */
  #topbar-firstname { display: none; }
  .navbar-user-btn { padding: 4px; }
  .navbar-inner {
    padding: 0 12px;
    display: grid;
    grid-template-columns: 32px 1fr 32px;
    align-items: center;
  }
  .navbar-brand { text-align: center; font-size: 0.8125rem; }
  .navbar-user-btn { justify-self: end; }

  /* Context bar: stacked layout on mobile */
  .context-bar-inner {
    padding: 10px 12px 0;
  }
  .context-bar-row-main {
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .context-bar-left {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .context-bar-sep { display: none; }
  .context-bar-title {
    font-size: 0.875rem;
    text-align: center;
    white-space: normal;
    overflow: visible;
  }
  .context-bar-days { font-size: 0.6875rem; }
  .context-bar-right {
    width: 100%;
    justify-content: space-between;
  }
  .context-bar-progress-track { width: 80px; }
  #context-bar-info { font-size: 0.625rem; padding: 4px 10px 4px 6px; }
  .context-bar-status { font-size: 0.6875rem; justify-content: center; padding-bottom: 10px; }

  /* Cards: solid border instead of blurry shadow */
  .card {
    box-shadow: none;
    border: 1px solid var(--color-gray-300);
  }
  .coaching-zone { padding: 8px 12px; }

  .chat-panel {
    width: calc(100% - 16px) !important;
    right: 8px !important;
    bottom: 8px !important;
    height: 70vh !important;
  }
}

/* ============================================
   AI CHAT
   ============================================ */
.chat-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background 0.15s, transform 0.15s;
}

.chat-fab:hover {
  background: var(--color-primary-700);
  transform: scale(1.05);
}

.chat-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 380px;
  height: 500px;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  display: flex;
  flex-direction: column;
  z-index: 1001;
  overflow: hidden;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--color-primary-600);
  color: #fff;
}

.chat-header-title {
  font-weight: 600;
  font-size: 0.9375rem;
}

.chat-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  opacity: 0.8;
}

.chat-close:hover {
  opacity: 1;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.chat-msg-ai {
  align-self: flex-start;
  background: var(--color-gray-100);
  color: var(--color-gray-800);
  border-bottom-left-radius: 4px;
}

.chat-msg-user {
  align-self: flex-end;
  background: var(--color-primary-600);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.chat-msg-loading {
  align-self: flex-start;
  background: var(--color-gray-100);
  color: var(--color-gray-400);
  font-style: italic;
  border-bottom-left-radius: 4px;
}

/* Markdown-rendering i AI-chattbubblor */
.chat-md-heading {
  font-weight: 700;
  margin-bottom: 4px;
}
.chat-md-p {
  margin-bottom: 2px;
}
.chat-md-li::before {
  content: '•';
  margin-right: 5px;
}
.chat-md-li {
  padding-left: 10px;
  margin-bottom: 2px;
}
.chat-md-gap {
  height: 8px;
}

.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--color-gray-200);
}

.chat-input-row textarea {
  flex: 1;
  border: 1px solid var(--color-gray-300);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-family: var(--font-family);
  resize: none;
  min-height: 20px;
  max-height: 120px;
  outline: none;
  line-height: 1.4;
}

.chat-input-row textarea:focus {
  border-color: var(--color-primary-300);
}

.chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-600);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-send:hover {
  background: var(--color-primary-700);
}

.chat-send:disabled {
  background: var(--color-gray-300);
  cursor: not-allowed;
}

/* ---- Markera-text popover ---- */
#explain-popover {
  position: absolute;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  z-index: 1100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}
#explain-popover.visible {
  pointer-events: auto;
  opacity: 1;
}
#explain-popover-btn {
  position: relative;
  background: var(--color-gray-900);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  transition: background 0.12s;
}
#explain-popover-btn:hover {
  background: var(--color-primary-600);
}
#explain-popover-btn:hover::after {
  border-top-color: var(--color-primary-600);
}
/* Liten pil nedåt */
#explain-popover-btn::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-gray-900);
}

/* ============================================
   NP STUDY CHOICE SCREEN
   ============================================ */
.np-choice-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
}

.np-choice-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  background: #fff;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.np-choice-card:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.np-choice-card:active {
  border-color: var(--color-primary-500);
}

.np-level-btn {
  padding: 12px 8px;
  border: 2px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: white;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  font-family: var(--font-family);
}
.np-level-btn:hover {
  border-color: var(--color-primary-300);
  background: var(--color-primary-50);
}
.np-level-btn.active {
  border-color: var(--color-primary-500);
  background: var(--color-primary-50);
}
.np-level-btn.active div:first-child {
  color: var(--color-primary-600);
}

.np-choice-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-primary-50);
  color: var(--color-primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.np-choice-title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-gray-900);
  margin-bottom: 4px;
}

.np-choice-desc {
  font-size: 0.8125rem;
  color: var(--color-gray-500);
  line-height: 1.4;
}

.np-choice-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  font-size: 0.8125rem;
  color: var(--color-gray-400);
}

.np-choice-divider::before,
.np-choice-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-gray-200);
}

.np-choice-chat {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ============================================
   LISTENING / TTS
   ============================================ */
.quiz-listen-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.btn-listen {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s;
}

.btn-listen.playing {
  background: var(--color-primary-50);
  border-color: var(--color-primary-400);
  color: var(--color-primary-700);
}

.listen-hint {
  font-size: 0.75rem;
  color: var(--color-gray-400);
}

.np-choice-chat-messages {
  max-height: 220px;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Frågor-fliken (elevnära admin-vy) */
.np-fraga-card + .np-fraga-card { margin-top: 0; }
.np-fraga-card { min-width: 0; max-width: 100%; overflow: hidden; }
.np-fraga-section { margin-top: 12px; min-width: 0; }
.np-fraga-section:first-child { margin-top: 0; }
.np-fraga-map-thumb svg { width: 100%; height: auto; display: block; }
#np-fragor-list-fysik, #np-fragor-list-geografi { min-width: 0; }
.np-fragor-list-grid { min-width: 0; }
.np-fraga-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-gray-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.np-fraga-editable {
  transition: border-color 0.15s, box-shadow 0.15s;
}
.np-fraga-editable:hover {
  border-color: #6941C6 !important;
  box-shadow: 0 0 0 2px #F4EBFF;
}
.np-fraga-editable:focus {
  outline: none;
  border-color: #6941C6 !important;
  box-shadow: 0 0 0 2px #F4EBFF;
}
.np-fragor-card h3 + p { margin: 0; }