/* Centralized theme tokens and polished UI styles - generated by Copilot */
:root{
  --bg: #F8FAFC;
  --surface:#FFFFFF;
  --border:#E2E8F0;
  --text-primary:#0F172A;
  --text-secondary:#64748B;
  --muted:#94A3B8;
  --primary:#0099ED;
  --primary-hover:#0078C6;
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --danger-hover:#DC2626;
  --info:#06B6D4;
  --radius-button:12px;
  --radius-input:12px;
  --radius-card:16px;
  --shadow-sm: 0 1px 2px rgba(2,6,23,0.05);
  --shadow-md: 0 4px 12px rgba(2,6,23,0.08);
  --shadow-lg: 0 10px 30px rgba(2,6,23,0.12);
  --font-stack: Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
:root.dark{
  --bg:#182A3C;
  --surface:#1E3A54;
  --surface-alt:#223E5C;
  --card:#1E3347;
  --card-strong:#243A58;
  --border:#2E4A63;
  --border-soft:#3C5B75;
  --text-primary:#F8FAFC;
  --text-secondary:#B8D1EB;
  --muted:#A1B9D5;
}
html,body{font-family:var(--font-stack);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg)!important;color:var(--text-primary)!important;}
body{line-height:1.45}
button,input,select,textarea{transition:all 180ms ease;border-radius:var(--radius-button)}
input,select,textarea{border-radius:var(--radius-input)!important}
.rounded-lg{border-radius:var(--radius-button)!important}
.rounded-2xl,.rounded-3xl{border-radius:var(--radius-card)!important}
.bg-white{background-color:var(--surface)!important}
.bg-gray-50{background-color:var(--bg)!important}
.bg-gray-100{background-color:rgba(15,23,42,0.03)!important}
.bg-gray-900{background-color:var(--card)!important}
.text-gray-900,.dark .text-gray-100{color:var(--text-primary)!important}
.text-gray-700{color:var(--text-secondary)!important}
.text-gray-600{color:var(--text-secondary)!important}
.text-gray-500{color:var(--muted)!important}
.border-gray-200{border-color:var(--border)!important}
.border-gray-300{border-color:var(--border-soft)!important}
.border-gray-600{border-color:var(--border-soft)!important}
.dark .border-gray-700,.border-gray-700{border-color:var(--border)!important}
.shadow,.shadow-lg,.shadow-2xl{box-shadow:var(--shadow-md)!important}
.shadow-lg:hover,.hover\:shadow-xl:hover{box-shadow:var(--shadow-lg)!important}
button.bg-blue-600,.bg-blue-600{background-color:var(--primary)}
button.bg-blue-600:hover,.bg-blue-600:hover{background-color:var(--primary-hover)}
[class*="bg-blue-600"]{background-color:var(--primary)}
[class*="peer-checked:bg-blue-600"]{background-color:var(--primary)}
[class*="peer-checked:border-blue-600"]{border-color:var(--primary)}
[class*="bg-blue-500"]{background-color:var(--primary)}
[class*="hover:bg-blue-700"]:hover{background-color:var(--primary-hover)}
[class*="focus:ring-blue-500"]:focus{box-shadow:0 0 0 4px rgba(0,153,237,0.18)}
.dark .bg-gray-50{background-color:var(--bg)!important}
.dark .bg-gray-100{background-color:rgba(255,255,255,0.05)!important}
.dark .bg-gray-200{background-color:rgba(255,255,255,0.08)!important}
.dark .bg-gray-300{background-color:rgba(255,255,255,0.10)!important}
.dark .bg-gray-700{background-color:rgba(255,255,255,0.08)!important}
.dark .bg-gray-800{background-color:var(--surface)!important}
.dark .bg-gray-900{background-color:var(--card)!important}
.dark .border-gray-200{border-color:var(--border)!important}
.dark .border-gray-300{border-color:var(--border-soft)!important}
.dark .border-gray-600{border-color:var(--border-soft)!important}
.dark .border-gray-700{border-color:var(--border)!important}
.dark .text-gray-100{color:var(--text-primary)!important}
.dark .text-gray-300{color:var(--text-secondary)!important}
.dark .text-gray-400{color:var(--muted)!important}
.dark .dark\:bg-gray-900{background-color:var(--bg)!important}
.dark .dark\:bg-gray-800{background-color:var(--surface)!important}
.dark .dark\:bg-gray-700{background-color:rgba(255,255,255,0.08)!important}
.dark .dark\:bg-gray-600{background-color:rgba(255,255,255,0.10)!important}
.dark .dark\:bg-blue-600,.dark .dark\:bg-blue-500{background-color:var(--primary)!important}
.dark .dark\:bg-red-600{background-color:var(--danger)!important}
.dark .dark\:bg-red-700{background-color:var(--danger-hover)!important}
.dark .dark\:hover\:bg-blue-700:hover,.hover\:bg-blue-700:hover{background-color:var(--primary-hover)!important}
.dark .dark\:focus\:ring-blue-500:focus,.focus\:ring-blue-500:focus{box-shadow:0 0 0 4px rgba(0,153,237,0.18)!important}
input:focus,textarea:focus,select:focus{outline:none!important;box-shadow:0 0 0 4px rgba(0,153,237,0.12)!important;border-color:var(--primary)!important}
input,textarea,select{border:1px solid var(--border)!important;background-color:var(--surface)!important;color:var(--text-primary)!important;padding:0.5rem}
.kbd,.chip{border-radius:999px;padding:0.25rem 0.5rem;font-size:0.75rem;background:rgba(2,6,23,0.03);border:1px solid var(--border)}
.table-header{background-color:rgba(15,23,42,0.03);font-weight:600;color:var(--text-secondary)}
.modal{border-radius:20px;box-shadow:var(--shadow-lg)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Scrollbar polish */
.scrollbox::-webkit-scrollbar{width:10px}
.scrollbox::-webkit-scrollbar-track{background:var(--border);border-radius:8px}
.scrollbox::-webkit-scrollbar-thumb{background:#9ca3af;border-radius:8px}
.dark .scrollbox::-webkit-scrollbar-track{background:#1f2937}
.dark .scrollbox::-webkit-scrollbar-thumb{background:#4b5563}
/* Component-specific helpers */
.drop-zone{border:2px dashed var(--primary);border-radius:8px;padding:40px;text-align:center;cursor:pointer;transition:all 0.3s}
.drop-zone:hover{background:rgba(0,153,237,0.05)}
.drop-zone.drag-over{background:rgba(0,153,237,0.15);border-color:#0078c6}
.log-entry{padding:0.75rem;margin-bottom:0.5rem;border-radius:6px;font-size:0.875rem;display:flex;align-items:flex-start;gap:0.5rem}
.icon {
  color: var(--primary);
}
/* Make lucide icons inherit the current text color by default, while preserving stroke and clearing fill. */
[data-lucide], svg[data-lucide], i[data-lucide] {
  color: currentColor;
  stroke: currentColor !important;
  fill: none !important;
}

/* Selection Cards: Remove dot indicator and use a subtle border highlight only */
.choice-card {
  cursor: pointer;
  transition: all 200ms ease-out !important;
}
.choice-indicator {
  display: none !important;
}
input.peer:checked ~ .choice-card {
  border-color: var(--primary) !important;
}

/* Ensure lucide icons inherit the surrounding text color (usually white)
   when placed inside colored buttons/labels so they remain visible. */
.bg-red-500 [data-lucide],
.bg-red-600 [data-lucide],
.bg-red-700 [data-lucide],
.bg-blue-600 [data-lucide],
.bg-blue-700 [data-lucide],
.bg-green-600 [data-lucide],
.bg-green-700 [data-lucide],
button.bg-red-500 [data-lucide],
button.bg-red-600 [data-lucide],
button.bg-blue-600 [data-lucide],
button.bg-green-600 [data-lucide],
label.bg-blue-600 [data-lucide],
label.bg-green-600 [data-lucide],
.text-white [data-lucide] {
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}
.log-pending{background:#fef3c7;color:#92400e;border-left:4px solid var(--warning)}
.log-processing{background:#dbeafe;color:#0c4a6e;border-left:4px solid var(--primary)}
.log-success{background:#dcfce7;color:#166534;border-left:4px solid var(--success)}
.log-error{background:#fee2e2;color:#991b1b;border-left:4px solid var(--danger)}
.dark .log-pending{background:#78350f;color:#fef3c7}
.dark .log-processing{background:#082f49;color:#bfdbfe}
.dark .log-success{background:#15803d;color:#dcfce7}
.dark .log-error{background:#7f1d1d;color:#fee2e2}
.modal-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:50;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}

/* Normalize label-based file-picker buttons so they match <button> styles */
label.bg-blue-600,
label.bg-blue-700,
label.bg-green-600,
label.bg-red-600,
button.bg-blue-600,
.bg-blue-600 {
  background-color: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

label.bg-blue-600:hover,
label.bg-blue-700:hover,
button.bg-blue-600:hover,
.bg-blue-600:hover {
  background-color: var(--primary-hover) !important;
}

/* Remove focus/active outlines from labels used as buttons so appearance matches */
label.bg-blue-600:focus,
label.bg-blue-600:active,
button.bg-blue-600:focus,
button.bg-blue-600:active {
  outline: none !important;
  box-shadow: none !important;
}

/* === Unified UI (respondents.html reference) === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
}
.navbar-spacer {
  height: 4rem;
  flex-shrink: 0;
}
.btn-logout {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem;
  background: none;
  border: none;
  transition: color 150ms;
}
.btn-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-card);
  background-color: var(--surface) !important;
  border: 1px solid var(--border);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transform: translateZ(0);
  transition: transform 200ms ease-out, box-shadow 200ms, background-color 200ms;
}
.btn-page-nav:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.dark .btn-page-nav:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}
.page-header {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 768px) {
  .page-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}
@media (min-width: 768px) {
  .page-title { font-size: 1.875rem; }
}
.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0;
}
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-card);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  min-width: 180px; /* Standardize size to match the reference register button */
  background-color: rgba(15, 23, 42, 0.03) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.dark .btn-action {
  background-color: var(--card) !important;
}
.btn-action:hover:not(:disabled) {
  border-color: #9ca3af !important;
  box-shadow: var(--shadow-md) !important;
}
.btn-action:active:not(:disabled) {
  transform: scale(0.98);
}
.btn-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-action-row {
  flex: 1; /* Make adjacent buttons take equal space */
}
.btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border-radius: var(--radius-card);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  min-width: 180px;
  background-color: #fee2e2 !important;
  color: #991b1b !important;
  border: 1px solid #fca5a5 !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: border-color 200ms, box-shadow 200ms, background-color 200ms, transform 200ms;
}
.dark .btn-delete {
  background-color: rgba(127, 29, 29, 0.4) !important;
  color: #fecaca !important;
  border-color: #991b1b !important;
}
.btn-delete:hover:not(:disabled) {
  background-color: #fecaca !important;
  border-color: #f87171 !important;
  box-shadow: var(--shadow-md) !important;
}
.dark .btn-delete:hover:not(:disabled) {
  background-color: rgba(127, 29, 29, 0.6) !important;
  border-color: #dc2626 !important;
}
.btn-delete:active:not(:disabled) {
  transform: scale(0.98);
}
.btn-delete:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-delete-row {
  flex: 1; /* Match btn-action-row for equal sizing in flex containers */
}
.modal-footer-center {
  display: flex;
  justify-content: center;
}
.help-modal-icon {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
}
.dark .help-modal-icon {
  color: #fff;
}

/* === Dashboard badges (etiketter) === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;      /* 12px */
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
}

.badge-primary {
  /* Lite starkare bakgrund och tydligare kant i ljust läge */
  background-color: rgba(0, 153, 237, 0.16) !important;
  color: #0369A1 !important;                /* något mörkare blå text */
  border-color: rgba(0, 153, 237, 0.65) !important;
}

/* Dark mode-justeringar */
html.dark .badge-primary {
  background-color: rgba(0, 153, 237, 0.16) !important;
  color: #E0F2FE !important; /* ljusblå text */
  border-color: rgba(56, 189, 248, 0.7) !important;
}

/* Extra hög knapp bara för Hepro Care-login */
.btn-login-hepro {
  padding-top: 1rem !important;      /* justera fritt */
  padding-bottom: 1rem !important;
  min-height: 3.25rem;               /* kan tas bort om du vill */
}