/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; font-size: 14px; color: #2d3748; background: #fafafa; min-height: 100vh; }

/* ===== LOADING & TOAST ===== */
.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.loading-overlay.hidden { display: none; }
.spinner { width: 40px; height: 40px; border: 4px solid #e8e4f0; border-top-color: #8b7fc7; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; color: #fff; font-weight: 500; z-index: 9998; transition: opacity 0.3s; white-space: pre-line; max-width: 500px; text-align: center; }
.toast.hidden { opacity: 0; pointer-events: none; }
.toast.success { background: #48bb78; }
.toast.error { background: #f56565; }
.toast.info { background: #4299e1; }

/* ===== HEADER ===== */
.app-header { display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: #fff; border-bottom: 2px solid #e8e4f0; position: sticky; top: 0; z-index: 100; }
.header-left h1 { font-size: 18px; color: #8b7fc7; white-space: nowrap; }
.header-nav { display: flex; gap: 4px; flex: 1; }
.nav-btn { padding: 8px 16px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: #718096; transition: all 0.2s; }
.nav-btn:hover { background: #f7f5fb; color: #8b7fc7; }
.nav-btn.active { background: #8b7fc7; color: #fff; }
.ai-toggle-btn { padding: 8px 16px; border: 2px solid #8b7fc7; background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: #8b7fc7; white-space: nowrap; transition: all 0.2s; }
.ai-toggle-btn:hover { background: #8b7fc7; color: #fff; }

/* ===== MAIN ===== */
.main-content { padding: 24px; max-width: 1400px; margin: 0 auto; transition: margin-right 0.3s; }
body.ai-open .main-content { margin-right: 400px; }

.view { display: none; }
.view.active { display: block; }

.view-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.view-header h2 { font-size: 20px; color: #2d3748; }

/* ===== BUTTONS ===== */
.btn { padding: 8px 16px; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-primary { background: #8b7fc7; color: #fff; }
.btn-primary:hover { background: #7a6db8; }
.btn-secondary { background: #e8e4f0; color: #4a5568; }
.btn-secondary:hover { background: #d6d0e8; }
.btn-danger { background: #f56565; color: #fff; }
.btn-danger:hover { background: #e53e3e; }
.btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; padding: 4px 8px; opacity: 0.7; transition: opacity 0.2s; }
.btn-icon:hover { opacity: 1; }

/* ===== SCORECARD ===== */
.scorecard { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sc-item { flex: 1; min-width: 140px; background: #fff; border-radius: 10px; padding: 14px 18px; border: 2px solid #e8e4f0; text-align: center; transition: all 0.2s; }
.sc-item .sc-value { display: block; font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.sc-item .sc-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #718096; letter-spacing: 0.5px; }
.sc-item .sc-detail { display: block; font-size: 10px; color: #a0aec0; margin-top: 2px; }
.sc-item.sc-good { border-color: #c6f6d5; background: #f0fff4; }
.sc-item.sc-good .sc-value { color: #276749; }
.sc-item.sc-warn { border-color: #fefcbf; background: #fffff0; }
.sc-item.sc-warn .sc-value { color: #975a16; }
.sc-item.sc-bad { border-color: #fed7d7; background: #fff5f5; }
.sc-item.sc-bad .sc-value { color: #c53030; }
.sc-item.sc-clickable { cursor: pointer; }
.sc-item.sc-clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139, 127, 199, 0.15); border-color: #8b7fc7; }

/* ===== SCHEDULE ===== */
.schedule-tabs { display: flex; gap: 4px; background: #e8e4f0; padding: 3px; border-radius: 8px; }
.tab-btn { padding: 6px 16px; border: none; background: none; border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500; color: #718096; }
.tab-btn.active { background: #fff; color: #8b7fc7; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

.schedule-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.schedule-period { font-weight: 600; font-size: 15px; min-width: 180px; text-align: center; }

.schedule-legend { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 8px 16px; background: #fff; border-radius: 8px; border: 1px solid #e8e4f0; font-size: 12px; flex-wrap: wrap; }
.legend-item { display: flex; align-items: center; gap: 4px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; }
.legend-sep { color: #cbd5e0; }
.dot-dag { background: #c6f6d5; border: 1px solid #68d391; }
.dot-kvall { background: #fefcbf; border: 1px solid #ecc94b; }
.dot-natt { background: #c3dafe; border: 1px solid #7f9cf5; }
.dot-usk { background: #e8e4f0; border: 1px solid #8b7fc7; }
.dot-ssk { background: #c3dafe; border: 1px solid #667eea; }
.dot-sta { background: #fed7e2; border: 1px solid #ed64a6; }
.dot-kok { background: #fed7d7; border: 1px solid #f56565; }

/* Schedule table */
.schedule-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.schedule-table th { padding: 10px 8px; background: #f7f5fb; font-size: 12px; font-weight: 600; text-transform: uppercase; color: #718096; border-bottom: 2px solid #e8e4f0; text-align: center; }
.schedule-table th:first-child { text-align: left; padding-left: 16px; min-width: 160px; }
.schedule-table td { padding: 6px 4px; border-bottom: 1px solid #f0edf5; text-align: center; vertical-align: top; min-width: 100px; }
.schedule-table td:first-child { text-align: left; padding-left: 16px; }
.schedule-table tr:last-child td { border-bottom: none; }
.schedule-table tr:hover { background: #faf9fd; }
.today-col { background: #f7f5fb; }

.col-personal { min-width: 160px; width: 160px; }

.staff-cell { display: flex; flex-direction: column; gap: 1px; }
.staff-cell-name { font-weight: 600; font-size: 13px; }
.staff-cell-info { font-size: 11px; color: #a0aec0; }
.staff-cell-hours { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; display: inline-block; margin-top: 1px; width: fit-content; }
.hours-ok { background: #c6f6d5; color: #276749; }
.hours-under { background: #fefcbf; color: #975a16; }
.hours-over { background: #fed7d7; color: #c53030; }
.hours-empty { background: #edf2f7; color: #a0aec0; }

/* Shift tags — olika färger per passtyp */
.shift-tag { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin: 1px; cursor: pointer; transition: transform 0.1s; position: relative; }
.shift-tag:hover { transform: scale(1.05); }
.shift-tag.dag { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
.shift-tag.kvall { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.shift-tag.natt { background: #e0e7ff; color: #4338ca; border: 1px solid #a5b4fc; }
.shift-tag.vikarie { background: #fee2e2; color: #991b1b; border: 1px dashed #ef4444; }

/* Category indicator on shift tag */
.shift-tag .cat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.cat-dot-usk { background: #8b7fc7; }
.cat-dot-ssk { background: #667eea; }
.cat-dot-sta { background: #ed64a6; }
.cat-dot-kok { background: #f56565; }
.cat-dot-chef { background: #ecc94b; }

.no-shift { color: #e2e8f0; font-size: 12px; }

/* Summary & indicator rows */
.summary-row td { background: #f7f5fb !important; font-weight: 600; font-size: 12px; color: #8b7fc7; }
.summary-row:hover td { background: #f7f5fb !important; }
.summary-row .gap-num { color: #c53030; background: #fed7d7; padding: 1px 4px; border-radius: 3px; }
.summary-row .over-num { color: #975a16; background: #fefcbf; padding: 1px 4px; border-radius: 3px; }
.other-row td { background: #faf9fd !important; font-weight: 500; font-size: 11px; color: #718096; }
.other-row:hover td { background: #faf9fd !important; }
.other-row .gap-num { color: #c53030; background: #fed7d7; padding: 1px 4px; border-radius: 3px; }
.other-summary { color: #718096; }

.indicator-row td { background: #fff !important; padding: 8px 4px; }
.indicator-row:hover td { background: #fff !important; }

.day-status { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.day-status-ok { background: #c6f6d5; color: #276749; }
.day-status-bad { background: #fed7d7; color: #c53030; animation: pulse-red 1.5s ease-in-out infinite; }
@keyframes pulse-red { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.ind-dots { display: flex; gap: 3px; justify-content: center; }
.ind-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.ind-dot.ind-ok { background: #c6f6d5; color: #276749; }
.ind-dot.ind-warn { background: #fefcbf; color: #975a16; }
.ind-dot.ind-bad { background: #fed7d7; color: #c53030; }

/* Month view */
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.month-header { padding: 8px; background: #f7f5fb; font-size: 11px; font-weight: 600; text-transform: uppercase; color: #718096; text-align: center; }
.month-day { min-height: 80px; padding: 4px; border: 1px solid #f0edf5; background: #fff; }
.month-day.other-month { background: #fafafa; opacity: 0.5; }
.month-day.today { border-color: #8b7fc7; border-width: 2px; }
.month-day.month-day-ok { border-left: 3px solid #48bb78; }
.month-day.month-day-gap { border-left: 3px solid #f56565; }
.month-day-num { font-size: 11px; font-weight: 600; color: #718096; margin-bottom: 2px; }
.month-day-shifts { display: flex; flex-wrap: wrap; gap: 1px; }
.month-shift-dot { width: 8px; height: 8px; border-radius: 2px; }
.month-shift-dot.dag { background: #68d391; }
.month-shift-dot.kvall { background: #ecc94b; }
.month-shift-dot.natt { background: #7f9cf5; }
.month-day-summary { font-size: 9px; color: #a0aec0; margin-top: 2px; font-weight: 600; }

/* ===== CARDS ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.card { background: #fff; border-radius: 10px; padding: 16px; border: 1px solid #e8e4f0; transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.card-title { font-weight: 600; font-size: 15px; }
.card-badge { padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.card-badge.usk { background: #e8e4f0; color: #8b7fc7; }
.card-badge.ssk { background: #c3dafe; color: #667eea; }
.card-badge.sta { background: #fed7e2; color: #d53f8c; }
.card-badge.kok { background: #fed7d7; color: #e53e3e; }
.card-badge.chef { background: #fefcbf; color: #d69e2e; }
.card-detail { font-size: 12px; color: #718096; margin-top: 4px; }
.card-actions { display: flex; gap: 4px; }

/* ===== RULES ===== */
.rules-section { background: #fff; border-radius: 10px; padding: 20px; margin-bottom: 16px; border: 1px solid #e8e4f0; }
.rules-section h3 { font-size: 16px; margin-bottom: 12px; color: #8b7fc7; text-transform: capitalize; }
.rule-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0edf5; }
.rule-row:last-child { border-bottom: none; }
.rule-actions { display: flex; gap: 4px; margin-left: auto; }
.rule-key { font-weight: 600; min-width: 180px; font-size: 13px; }
.rule-desc { flex: 1; font-size: 12px; color: #718096; }
.rule-value { min-width: 100px; text-align: right; }
.rule-value input { width: 80px; padding: 4px 8px; border: 1px solid #e8e4f0; border-radius: 6px; font-size: 13px; text-align: right; }
.rule-value input:disabled { background: #f7f5fb; color: #a0aec0; border-color: transparent; }
.rule-lock { font-size: 12px; color: #a0aec0; }

/* ===== MODALS ===== */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 200; }
.modal-backdrop.hidden { display: none; }
.modal { background: #fff; border-radius: 12px; padding: 24px; width: 90%; max-width: 440px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
.modal.modal-large { max-width: 600px; }
.modal h3 { margin-bottom: 16px; font-size: 18px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-close-btn { width: 32px; height: 32px; border: none; background: none; cursor: pointer; font-size: 18px; border-radius: 6px; color: #718096; }
.modal-close-btn:hover { background: #f7f5fb; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

.scorecard-detail-content { max-height: 60vh; overflow-y: auto; }

/* ===== STAFF RULES & CONSTRAINTS ===== */
.staff-rules-content { padding: 20px 0; }
.rules-section { margin-bottom: 32px; }
.rules-section:last-child { margin-bottom: 0; }
.rules-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid #e2e8f0; }
.rules-section-header h4 { margin: 0; font-size: 1.1rem; color: #1e293b; }
.rules-list { display: flex; flex-direction: column; gap: 12px; }
.empty-state-small { padding: 24px; text-align: center; color: #94a3b8; font-size: 0.9rem; background: #f8fafc; border-radius: 6px; }

.rule-override-item, .constraint-item { padding: 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; display: flex; flex-direction: column; gap: 8px; }
.rule-override-header, .constraint-header { font-size: 0.95rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule-override-reason, .constraint-reason { font-size: 0.85rem; color: #64748b; padding-left: 20px; }
.rule-override-item button, .constraint-item button { align-self: flex-start; margin-top: 4px; }

.badge-priority-must { background: #fee2e2; color: #b91c1c; }
.badge-priority-should { background: #fef3c7; color: #b45309; }
.badge-priority-prefer { background: #dcfce7; color: #15803d; }

#constraint-value { margin-top: 4px; }
#constraint-value select, #constraint-value input { width: 100%; }
.form-control { width: 100%; padding: 10px 14px; font-size: 0.9rem; font-family: inherit; color: #0f172a; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 5px; transition: border-color 0.15s, box-shadow 0.15s; }
.form-control:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12); }
.detail-section { margin-bottom: 20px; }
.detail-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #2d3748; }
.detail-section p { margin-bottom: 8px; font-size: 14px; color: #4a5568; }
.detail-list { list-style: none; padding: 0; margin: 0; }
.detail-list li { padding: 8px 12px; margin-bottom: 4px; background: #f7fafc; border-radius: 6px; font-size: 13px; color: #2d3748; }
.success-msg { color: #276749; background: #f0fff4; padding: 12px; border-radius: 8px; border: 1px solid #c6f6d5; }

.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #718096; margin-bottom: 4px; }
.form-group input, .form-group select { width: 100%; padding: 8px 12px; border: 1px solid #e8e4f0; border-radius: 8px; font-size: 14px; }
.form-group input:focus, .form-group select:focus { outline: none; border-color: #8b7fc7; box-shadow: 0 0 0 3px rgba(139,127,199,0.15); }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }

/* ===== SUGGESTIONS ===== */
.suggestions-grid {
  display: grid;
  gap: 16px;
}

.suggestion-card {
  background: #fff;
  border: 1px solid #e8e4f0;
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s;
}

.suggestion-card:hover {
  box-shadow: 0 4px 12px rgba(139, 127, 199, 0.1);
  border-color: #8b7fc7;
}

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

.suggestion-title {
  font-weight: 600;
  font-size: 16px;
  color: #2d3748;
  flex: 1;
}

.suggestion-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.badge {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.badge-category {
  background: #e8e4f0;
  color: #5a4a8f;
}

.badge-priority-hög {
  background: #fee;
  color: #c53030;
}

.badge-priority-medel {
  background: #fef3e0;
  color: #c05621;
}

.badge-priority-låg {
  background: #e8e4f0;
  color: #6b7280;
}

.badge-status-förslag {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-status-planerat {
  background: #fef3e0;
  color: #c05621;
}

.badge-status-pågående {
  background: #dbeafe;
  color: #1e40af;
}

.badge-status-klart {
  background: #dcfce7;
  color: #166534;
}

.suggestion-description {
  color: #6b7280;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.suggestion-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}

.suggestion-votes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vote-btn {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vote-btn:hover {
  background: #8b7fc7;
  color: white;
  border-color: #8b7fc7;
}

.vote-btn.voted {
  background: #8b7fc7;
  color: white;
  border-color: #8b7fc7;
}

.vote-count {
  font-weight: 600;
}

.suggestion-actions {
  display: flex;
  gap: 8px;
}

.suggestion-actions .btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* ===== Form hints ===== */
.form-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: #64748b;
  font-style: italic;
}

/* ===== AI SIDEBAR ===== */
.ai-sidebar { position: fixed; right: -400px; top: 0; width: 400px; height: 100vh; background: #fff; border-left: 2px solid #e8e4f0; display: flex; flex-direction: column; z-index: 150; transition: right 0.3s; }
body.ai-open .ai-sidebar { right: 0; }
.ai-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid #e8e4f0; }
.ai-header h3 { font-size: 16px; }
.ai-close-btn { width: 32px; height: 32px; border: none; background: none; cursor: pointer; font-size: 18px; border-radius: 6px; }
.ai-close-btn:hover { background: #f7f5fb; }
.ai-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ai-msg { padding: 10px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5; max-width: 90%; word-wrap: break-word; white-space: pre-wrap; }
.ai-msg-system {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 0.8rem;
  padding: 8px 12px;
  border-radius: 8px;
  margin: 8px 0;
  text-align: center;
}

.ai-msg-bot { background: #f7f5fb; color: #2d3748; align-self: flex-start; }
.ai-msg-bot p { margin: 0 0 8px 0; line-height: 1.5; }
.ai-msg-bot p:last-child { margin-bottom: 0; }
.ai-msg-bot ul, .ai-msg-bot ol { margin: 4px 0 8px 18px; padding: 0; }
.ai-msg-bot li { margin-bottom: 2px; }
.ai-msg-bot strong { font-weight: 600; }
.ai-msg-bot code { background: #e8e0f0; padding: 1px 5px; border-radius: 3px; font-size: 0.85em; }
.ai-msg-bot pre { background: #2d3748; color: #e2e8f0; padding: 10px 12px; border-radius: 6px; overflow-x: auto; margin: 8px 0; }
.ai-msg-bot pre code { background: none; padding: 0; color: inherit; }
.ai-msg-bot table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 0.85em; }
.ai-msg-bot th, .ai-msg-bot td { border: 1px solid #d4c8e8; padding: 4px 8px; text-align: left; }
.ai-msg-bot th { background: #e8e0f0; font-weight: 600; }
.ai-msg-bot h1, .ai-msg-bot h2, .ai-msg-bot h3 { margin: 8px 0 4px; font-size: 1em; font-weight: 600; }

.ai-header-actions { display: flex; align-items: center; gap: 4px; }
.ai-msg-user { background: #8b7fc7; color: #fff; align-self: flex-end; }
.ai-status-bar { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: linear-gradient(90deg, #f7f5fb, #ede9f7, #f7f5fb); background-size: 200% 100%; animation: ai-shimmer 1.5s ease-in-out infinite; border-radius: 10px; font-size: 12px; color: #8b7fc7; font-weight: 500; align-self: flex-start; max-width: 90%; }
@keyframes ai-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ai-status-bar .status-icon { animation: ai-pulse 1s ease-in-out infinite; }
@keyframes ai-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
.ai-done-indicator { display: inline-block; padding: 4px 10px; background: #c6f6d5; color: #276749; border-radius: 6px; font-size: 11px; font-weight: 600; margin-top: 4px; }
.ai-input-form { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid #e8e4f0; }
.ai-input-form input { flex: 1; padding: 8px 12px; border: 1px solid #e8e4f0; border-radius: 8px; font-size: 14px; }
.ai-input-form input:focus { outline: none; border-color: #8b7fc7; }
.ai-input-form input:disabled { background: #f7f5fb; color: #a0aec0; }
.ai-input-form button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== FILTER ===== */
.filter-group select { padding: 6px 12px; border: 1px solid #e8e4f0; border-radius: 8px; font-size: 13px; background: #fff; }

/* ===== EMPTY STATE ===== */
.empty-state { text-align: center; padding: 48px 24px; color: #a0aec0; }
.empty-state-icon { font-size: 48px; margin-bottom: 12px; }
.empty-state-text { font-size: 15px; }

/* ===== SETTINGS ===== */
.settings-container { max-width: 800px; }

.settings-section { background: #fff; border-radius: 10px; padding: 24px; margin-bottom: 20px; border: 1px solid #e8e4f0; }
.settings-section h3 { font-size: 18px; margin-bottom: 8px; color: #2d3748; }

.danger-zone { border-color: #fed7d7; background: linear-gradient(135deg, #fff5f5 0%, #fff 100%); }
.delete-checklist { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.delete-check-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 8px; cursor: pointer; transition: background 0.15s; }
.delete-check-item:hover { background: rgba(0,0,0,0.04); }
.delete-check-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: #e53e3e; cursor: pointer; flex-shrink: 0; }
.delete-check-info { display: flex; align-items: center; gap: 8px; }
.delete-check-info strong { font-size: 14px; font-weight: 500; color: #2d3748; }
.delete-check-count { font-size: 12px; color: #a0aec0; background: #edf2f7; padding: 2px 8px; border-radius: 99px; }
.select-all-item strong { color: #718096; font-size: 13px; }
.delete-check-divider { height: 1px; background: #e2e8f0; margin: 4px 14px; }
.delete-actions { display: flex; gap: 8px; align-items: center; }
#deleteSelectedBtn { transition: all 0.2s; }
#deleteSelectedBtn:disabled { opacity: 0.5; cursor: not-allowed; }
.danger-zone h3 { color: #c53030; }
.danger-zone-description { font-size: 13px; color: #718096; margin-bottom: 20px; padding: 12px; background: #fff; border-left: 3px solid #f56565; border-radius: 6px; }

.danger-action { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; background: #fff; border: 1px solid #fed7d7; border-radius: 8px; }
.danger-action-info { flex: 1; }
.danger-action-info strong { display: block; font-size: 15px; color: #2d3748; margin-bottom: 4px; }
.danger-action-info p { font-size: 13px; color: #718096; margin: 0; }

/* ===== AUTO-SCHEDULE MODAL ===== */
.modal-xl { max-width: 1100px; width: 95vw; max-height: 90vh; overflow-y: auto; }

.auto-schedule-preview { padding: 16px; min-height: 200px; }

.auto-loading { display: flex; align-items: center; gap: 12px; justify-content: center; padding: 40px; color: #718096; font-size: 15px; }
.spinner-small { width: 24px; height: 24px; border: 3px solid #e8e4f0; border-top-color: #8b7fc7; border-radius: 50%; animation: spin 0.8s linear infinite; }

.auto-stats { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.auto-period-header { margin-bottom: 20px; }
.auto-period-header h4 { margin-bottom: 12px; }
.auto-helg-groups { margin-bottom: 20px; padding: 16px; background: #f0f4ff; border-radius: 8px; }
.auto-helg-groups h4 { margin-bottom: 10px; }
.auto-helg-row { display: flex; gap: 12px; flex-wrap: wrap; }
.auto-helg-group { background: #fff; padding: 10px 14px; border-radius: 6px; border: 1px solid #dbeafe; font-size: 0.85rem; flex: 1; min-width: 150px; }
.auto-week-nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0; }
.auto-week-label { font-weight: 600; font-size: 1rem; min-width: 160px; text-align: center; }
.auto-summary-row td { background: #f1f5f9; font-weight: 500; font-size: 0.75rem; }
.auto-cell-summary { font-size: 0.7rem; white-space: nowrap; }
.auto-warnings-small { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.auto-staff-summary { margin-top: 20px; }
.auto-staff-summary h4 { margin-bottom: 10px; }
.auto-stat { background: #f7f5fb; border-radius: 8px; padding: 12px 20px; text-align: center; flex: 1; }
.auto-stat-value { display: block; font-size: 24px; font-weight: 700; color: #8b7fc7; }
.auto-stat-label { font-size: 12px; color: #718096; text-transform: uppercase; letter-spacing: 0.05em; }

.auto-warnings { background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
.auto-warnings h4 { font-size: 14px; margin-bottom: 8px; color: #92400e; }
.auto-warnings ul { list-style: none; padding: 0; }
.auto-warnings li { font-size: 13px; color: #78350f; padding: 3px 0; }

.auto-success { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; color: #166534; font-weight: 600; text-align: center; }

.auto-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid #e8e4f0; }
.auto-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.auto-table th { background: #f7f5fb; padding: 8px 10px; text-align: center; font-weight: 600; color: #4a5568; border-bottom: 2px solid #e8e4f0; white-space: nowrap; }
.auto-table th:first-child { text-align: left; }
.auto-table td { padding: 6px 8px; text-align: center; border-bottom: 1px solid #edf2f7; vertical-align: middle; }
.auto-table td:first-child { text-align: left; font-weight: 500; }
.auto-table tr:hover td { background: #faf8ff; }

.auto-cell-empty { color: #cbd5e0; }

.auto-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.auto-tag.dag { background: #c6f6d5; color: #276749; }
.auto-tag.kvall { background: #fefcbf; color: #975a16; }
.auto-tag.natt { background: #e9d8fd; color: #553c9a; }

.auto-diff-ok { color: #38a169; font-weight: 600; }
.auto-diff-over { color: #e53e3e; font-weight: 600; }
.auto-diff-under { color: #dd6b20; font-weight: 600; }

/* Vikarie */
.auto-stat-vikarie { background: #fff7ed; }
.auto-stat-vikarie .auto-stat-value { color: #ea580c; }
.auto-vikarie-summary { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.auto-vikarie-summary h4 { font-size: 14px; margin-bottom: 6px; color: #9a3412; }

/* Vikarie-rader i veckoschema */
.vikarie-row { background: #fff7ed !important; border-left: 3px solid #f97316; }
.vikarie-row:hover td { background: #ffedd5 !important; }
.vikarie-name { color: #c2410c; font-weight: 600; }
.vikarie-shift { background: #fed7aa !important; color: #9a3412 !important; border: 1px dashed #f97316 !important; }
.vikarie-shift.dag { background: #fed7aa !important; }
.vikarie-shift.kvall { background: #fed7aa !important; }
.auto-vikarie-summary p { font-size: 13px; color: #7c2d12; margin-bottom: 10px; }
.auto-vikarie-weeks { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-vik-badge { padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.vik-ok { background: #dcfce7; color: #166534; }
.vik-low { background: #fef3c7; color: #92400e; }
.vik-high { background: #fee2e2; color: #991b1b; }
.auto-vikarie-row td { background: #fff7ed !important; }
.auto-vikarie-row td:first-child { color: #ea580c; }
.auto-tag.vikarie { border: 2px dashed #ea580c; background: #fff7ed !important; color: #9a3412 !important; }
.auto-tag.dag.vikarie { background: #fff7ed !important; color: #9a3412 !important; }
.auto-tag.kvall.vikarie { background: #fff7ed !important; color: #9a3412 !important; }
.auto-tag.natt.vikarie { background: #fff7ed !important; color: #9a3412 !important; }
.vik-indicator { color: #ea580c; font-weight: 600; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .app-header { flex-wrap: wrap; padding: 8px 12px; }
  .header-nav { order: 3; width: 100%; overflow-x: auto; }
  .main-content { padding: 12px; }
  body.ai-open .main-content { margin-right: 0; }
  .ai-sidebar { width: 100%; right: -100%; }
  .schedule-table th:first-child, .schedule-table td:first-child { min-width: 120px; }
  .view-header { flex-direction: column; align-items: flex-start; }
  .scorecard { flex-direction: column; }
  .sc-item { min-width: auto; }
}