.form-group {
  margin-bottom: 6px !important;
  gap: 2px !important;
  padding: 0 !important;
}
.form-row {
  gap: 12px 24px !important;
}
.form-group label,
.form-group .form-label {
  margin-bottom: 4px !important;
}
.form-group input,
.form-group select,
.form-group textarea {
  margin-bottom: 0 !important;
}
/* Unified form controls */
.form-control,
.form-input,
.form-select,
.form-textarea {
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  background: #fff;
  padding: 8px 12px;
  font-size: 14px;
}
/* Inputs/selects standard height */
input.form-control,
input.form-input,
select.form-control,
select.form-select {
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}
/* Align form elements in tables */
table .form-input,
table .form-select,
table input[type="datetime-local"],
table input[type="date"],
table input[type="time"] {
  vertical-align: middle;
  margin: 0;
}
/* Native selects: clean appearance */
select.form-control,
select.form-select,
select.form-input,
.form-group select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  padding-right: 32px;
}
/* Focus ring */
.form-control:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(62, 149, 205, 0.15);
  border-color: #94a3b8;
}
.form-row input[type="datetime-local"],
.form-row input[type="date"] {
  height: 40px !important;
  padding: 0 12px !important;
  line-height: 40px;
  box-sizing: border-box;
}
.form-section label,
.form-section .form-label {
  text-align: left !important;
  display: block !important;
  padding-left: 0 !important;
}
.form-row .form-group {
  display: flex;
  flex-direction: column;
}
.form-row .form-group select,
.form-row .form-group input,
.form-row .form-group textarea {
  margin-bottom: 0 !important;
}
.form-label {
  text-align: left !important;
  padding-left: 0 !important;
}
.form-section {
  margin-bottom: 38px;
}
/* Formulärsektioner bredvid varandra på breda skärmar */
.form-sections {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 1100px) {
  .form-sections {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .form-sections {
    grid-template-columns: 1fr;
  }
}
.form-section {
  background: none;
  padding: 0;
  box-shadow: none;
}
.form-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #234;
}
.sticky-page-head { position:sticky; top:0; background:var(--bg,#f5f7fb); z-index:50; padding-top:6px; }
/* ========= Core vars ========= */
:root{
  /* Tema */
  --primary-blue:#204E6D;
  --secondary-orange:#FBBC9C;
  --accent-green:#9EBD6E;
  --light-gray:#F7F7F7;
  --dark-gray:#96AAB8;
  --shadow:rgba(32,78,109,0.1);

  /* UI-lab variabler */
  --text:#0f172a;
  --muted:#64748b;
  --bg:#f5f7fb;
  --card:#fff;
  --error:#dc2626;
  --ok:#16a34a;
  --ring: var(--accent-green);
  --radius: 10px;

  /* Global knappfärg */
  --btn:#7DA1C7;

  /* Layout */
  --header-h:70px;
  --sidebar-width:280px;
  --sidebar-handle-offset:8px;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Segoe UI, Tahoma, sans-serif;background:var(--bg);color:var(--text)}

/* ========= Header ========= */
.header{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);
  background:var(--primary-blue);color:#fff;display:flex;align-items:center;
  justify-content:space-between;padding:0 1rem;z-index:1001;border-bottom:1px solid rgba(0,0,0,.05)
}
/* === Esytech logotyp specialstil === */
.logo {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: #FBBC9C !important;
  letter-spacing: -0.5px;
  text-decoration: none !important;
}
.logo-bold {
  font-family: inherit !important;
  font-weight: 700 !important;
  color: #FBBC9C !important;
  letter-spacing: -0.5px;
}
.logo-light {
  font-family: inherit !important;
  font-weight: 400 !important;
  color: #FBBC9C !important;
  letter-spacing: -0.5px;
}
@media (max-width: 600px) {
  .logo {
    font-size: 1.3rem !important;
  }
  .mobile-menu-btn {
    padding: 0.2rem !important;
    font-size: 0.9rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
  .mobile-menu-btn i {
    font-size: 1.1rem !important;
  }
}
.header-icon{color:#fff;padding:.5rem;border-radius:50%;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,color .2s}
.header-icon:hover{background:rgba(255,255,255,.1);color:#fbbc9c}

/* Hamburger – dold på desktop, visas på mobil */
.mobile-menu-btn{display:none;color:#fff;background:transparent;border:0;padding:.5rem;border-radius:8px}
.mobile-menu-btn:hover{background:rgba(255,255,255,.1)}

/* ========= Sidebar & layout ========= */
.admin-container{display:flex;min-height:100vh}

/* Sidebar */
.sidebar{
  position:fixed;top:var(--header-h);left:0;bottom:0;width:var(--sidebar-width);
  background:var(--primary-blue);color:#fff;padding:1rem 0;overflow:auto;
  transition:transform .25s ease;will-change:transform;z-index:1001
}
/* Generic modal overlay & container (placed after sidebar so higher stacking) */
.modal-overlay{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;padding:60px 20px;overflow:auto;background:rgba(0,0,0,.45);z-index:1200}
.modal-overlay.is-open{display:flex}
.modal-card{width:560px;max-width:100%;background:#fff;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.25);padding:18px 20px;position:relative;user-select:none}
.modal-card.dragging{opacity:.92;cursor:grabbing}
.modal-resize-handle{position:absolute;width:14px;height:14px;right:2px;bottom:2px;cursor:nwse-resize;display:flex;align-items:center;justify-content:center;font-size:10px;color:#666}
.modal-resize-handle:after{content:'↘';}
/* Rich text toolbar minimalist */
.rt-toolbar{background:#f8fafc;border:1px solid #dbe2ea;border-radius:6px;padding:4px 6px;display:flex;gap:6px;font-size:13px;user-select:none}
.rt-toolbar button,.rt-toolbar select{background:transparent;border:0;color:#334;padding:2px 4px;min-width:auto;box-shadow:none;font-weight:500;line-height:1;cursor:pointer;border-radius:4px}
.rt-toolbar button:hover,.rt-toolbar select:hover{background:#e2e8f0}
.rt-toolbar button:active{background:#cbd5e1}
.rt-toolbar span.divider{width:1px;background:#d0d7e2;height:18px;margin:0 2px}
.rt-toolbar select{padding:2px 4px;border:1px solid #cbd5e1;background:#fff}
.rt-toolbar button.active{background:#334;color:#fff}

.nav-menu{padding-top:.25rem}
.nav-link{display:flex;gap:.75rem;align-items:center;color:#fff;text-decoration:none;padding:.75rem 1rem;border-left:3px solid transparent}
.nav-link i{width:18px;text-align:center}
.nav-link:hover{background:rgba(255,255,255,.08);color:var(--secondary-orange)}
.nav-link.active{background:rgba(255,255,255,.08);border-left-color:var(--secondary-orange);color:var(--secondary-orange)}

/* Desktop: kollaps – göm sidebar och ge yta till main */
.main-content{flex:1;margin-top:var(--header-h);margin-left:var(--sidebar-width);padding:1rem;transition:margin-left .25s ease}
body.sidebar-collapsed .sidebar{transform:translateX(-100%)}
body.sidebar-collapsed .main-content{margin-left:0}

/* --- Sidebar-handle (halvcirkel, nere vid foten) --- */
/* Halvcirkeln är ALLTID samma form; endast pilen roterar mellan lägen */
.sidebar-toggle{
  position: fixed;
  bottom: calc(34px + 12px);                /* 34px = footerhöjd, 12px luft */
  left: calc(var(--sidebar-width) - 6px);   /* sticker ut 6px över innehållet */
  z-index: 1002;

  width: 36px;
  height: 48px;
  border: 0;

  /* Platt sida åt vänster, rundning åt höger – konstant i båda lägen */
  border-radius: 0 999px 999px 0;

  background: rgba(255,255,255,.90);
  color: #000;                               /* svart pil */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  backdrop-filter: blur(2px);
  transition: left .25s ease, background .2s ease, transform .2s ease, bottom .25s ease;
}
.sidebar-toggle i{
  font-size: 1rem;
  transition: transform .25s ease;
}
.sidebar-toggle:hover{ background: rgba(255,255,255,1) }

/* STÄNGT läge: flytta handtaget till skärmens vänsterkant – formen ändras INTE */
body.sidebar-collapsed .sidebar-toggle{ left: -6px; }
body.sidebar-collapsed .sidebar-toggle i{ transform: rotate(180deg); } /* pil → i stängt läge */

/* ========= Cards, tabeller ========= */
.page-title{font-size:1.4rem}
.card{background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.06);margin:1rem auto;max-width:1100px}
.card-header{padding:1rem 1.25rem;border-bottom:1px solid #eef2f6;display:flex;align-items:center;justify-content:space-between}
.card-body{padding:1.25rem}

/* Tabell */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid #eee;text-align:left}
.table th{background:#f4f6fb;font-weight:600}

/* ===== Table component tweaks ===== */
/* Compact icon buttons and prevent wrapping in actions column */
.tbl-wrap .icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  margin-left:6px;
  border:0;
  background:transparent;
  text-decoration:none;
  line-height:1;
}
.tbl-wrap .icon-btn:first-child{ margin-left:0; }
.tbl-wrap .icon-btn i{ font-size:14px; }
/* Ensure the last (actions) column doesn’t wrap; safe across our tables */
.tbl-wrap .tbl-table tr > td:last-child{ white-space:nowrap; }

/* ========= Knappar – identiska överallt ========= */
/* Base styling för alla knappar */
button,
input[type="button"],
input[type="submit"] {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  transition: transform .04s ease, filter .15s ease, box-shadow .15s ease;
}

/* .btn klassen - standardiserad 40px höjd */
a.btn,
.btn,
.btn.primary,
.btn.secondary,
.btn.warning,
.btn.danger {
  background: var(--btn);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  padding: 0 14px;
  height: 40px;
  min-height: 40px;
  min-width: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 2px 6px var(--shadow);
  transition: transform .04s ease, filter .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}

/* Hover/active/focus */
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
a.btn:hover,
.btn:hover { filter: brightness(0.98); }

button:active,
input[type="button"]:active,
input[type="submit"]:active,
a.btn:active,
.btn:active { transform: translateY(1px); }

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
a.btn:focus-visible,
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(125,161,199,.28);
}

/* Inaktiverad */
button:disabled,
input[type="submit"]:disabled,
.btn:disabled,
.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* Ghost-variant för underknappar (sekundär actions/menyer) */
.btn-ghost,
.btn.btn-ghost,
a.btn.btn-ghost {
  background: transparent;
  color: #2b3b4b;
  border: 1.5px solid #d5dee8;
  box-shadow: none;
}
.btn-ghost:hover,
.btn.btn-ghost:hover,
a.btn.btn-ghost:hover { background: #f1f5f9; filter: none; }
.btn-ghost.is-active, .tab.is-active { background: #e6eef6; border-color: #bcd0e5; }

/* Kompakt storlek för underknappar */
.btn-sm { padding: 6px 10px; min-height: 32px; min-width: auto; font-size: 14px; box-shadow:none; }
/* Force small height to win over base a.btn min-height */
.btn.btn-sm, a.btn.btn-sm { min-height: 32px; padding: 6px 10px; }

/* Sekundär knapp – blå outline-stil, 40px höjd som inputs */
.btn-secondary,
.btn.btn-secondary,
a.btn.btn-secondary {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #60a5fa;
  box-shadow: none;
  height: 40px;
  min-height: 40px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 500;
}
.btn-secondary:hover,
.btn.btn-secondary:hover,
a.btn.btn-secondary:hover {
  background: #bfdbfe;
  border-color: #3b82f6;
  filter: none;
}

/* Inline action group - select/input + button på samma rad, alla 40px */
.inline-action-group {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0 !important;
}
.inline-action-group > select,
.inline-action-group > .form-select,
.inline-action-group > .form-input,
.inline-action-group > input,
.inline-action-group > .btn,
.inline-action-group > button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.inline-action-group > select,
.inline-action-group > .form-select {
  line-height: 38px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Plus-knapp efter rubrik för att skapa ny */
.btn-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #60a5fa;
  border-radius: 4px;
  background: #dbeafe;
  color: #2563eb;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-add-icon:hover {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #fff;
}

/* Pastell-blå "+" knapp för formulär */
.btn-add-pastel,
a.btn-add-pastel,
button.btn-add-pastel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 42px !important;
  padding: 0 14px !important;
  background: #eff6ff !important;
  color: #2563eb !important;
  border: 1.5px solid #93c5fd !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}
.btn-add-pastel:hover,
a.btn-add-pastel:hover,
button.btn-add-pastel:hover {
  background: #dbeafe !important;
  border-color: #60a5fa !important;
  text-decoration: none !important;
  color: #2563eb !important;
}

/* Modal stängknapp - pastell-röd */
.btn-close-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fef2f2;
  color: #dc2626;
  border: 1.5px solid #fecaca;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  position: absolute;
  top: 12px;
  right: 12px;
}
.btn-close-modal:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

/* Delete-knapp (X) för listor */
.btn-delete-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #fecaca;
  border-radius: 4px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-delete-x:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}

/* Input med knapp bredvid - behåller normal formulärlayout */
.input-with-btn {
  display: flex;
  gap: 8px;
  align-items: center;
}
.input-with-btn > input,
.input-with-btn > .btn,
.input-with-btn > button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.input-with-btn > input {
  flex: 1;
  line-height: 38px;
}

/* Chips container - visas bara om den har innehåll */
.chips-container {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chips-container:empty {
  display: none;
}
.chips-container:not(:empty) {
  margin-top: 4px;
}

/* Chips placeholder - reserverar 40px höjd för alignment */
.chips-placeholder {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 32px;
  align-items: center;
}
.chips-placeholder:empty::before {
  content: '';
  display: block;
  height: 32px;
}

/* Tag select dropdown - visas vid klick på plus */
.tag-select-dropdown {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.tag-select-dropdown select[multiple] {
  height: auto;
  min-height: 80px;
  max-height: 150px;
  line-height: 1.4;
  padding: 4px;
}
.tag-select-dropdown select[multiple] option {
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 2px;
}
.tag-select-dropdown select[multiple] option:checked {
  background: #dbeafe;
  color: #1e40af;
}

/* Form group med chips - utan extra margin mellan select och chips */
.form-group:has(.chips-container) {
  margin-bottom: 6px !important;
}
.form-group:has(.chips-container) .inline-action-group {
  margin-bottom: 0;
}

/* Ikon-knapp i btn-stil (fyrkantig +) */
.btn.btn-icon {
  width: 40px;
  padding: 0;
}

/* Ikon-knapp (t.ex. papperskorg) – fyrkantig, transparent */
.icon-btn { width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color:#2b3b4b; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }
.icon-btn:hover { background:#f1f5f9; }
.icon-btn i { font-size:14px; }
/* Färg för destruktiv ikon */
.icon-btn .fa-trash { color: #c0342b; }

/* Alert */
.alert{padding:10px 12px;border-radius:8px;background:#fff3cd;color:#7a5e00;margin:10px 0;border:1px solid #ffeeba}

/* ========= Footer – alltid hela bredden ========= */
.footer{
  position:fixed;bottom:0;right:0;left:var(--sidebar-width);height:34px;
  background:#f1f5f9;color:#334;padding:6px 12px;font-size:.9rem;display:flex;align-items:center;justify-content:flex-end;border-top:1px solid #e2e8f0;z-index:1000
}
body.sidebar-collapsed .footer{left:0}
@media (max-width:768px){ .footer{left:0} }

/* ========= UI-lab – Formulär ========= */
.wrap{max-width:1000px;margin:40px auto;padding:24px}
h1{font-size:1.8rem;margin-bottom:8px}
p.lead{color:var(--muted);margin:0 0 24px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:900px){ .grid{grid-template-columns:1fr} }

.card h2{font-size:1.2rem;margin:0 0 14px;color:var(--primary-blue)}

.form{display:grid;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
@media (max-width:700px){ .form-row{grid-template-columns:1fr} }

.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.form-label{font-weight:600}
.required .form-label:after{content:" *"; color:var(--error); font-weight:700}

.form-input, .form-select, .form-textarea{
  width:100%; font-size:1rem; padding:0 12px; border:1.5px solid #e2e8f0; border-radius:8px; background:#fff; color:var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
  height:40px; line-height:40px; box-sizing:border-box;
}
.form-textarea{min-height:100px; height:auto; line-height:1.5; padding:8px 12px; resize:vertical}

.form-input:focus, .form-select:focus, .form-textarea:focus{
  outline:none; border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(158,189,110,.25);
}

.form-help{font-size:.9rem;color:var(--muted)}
.is-invalid .form-input, .is-invalid .form-select, .is-invalid .form-textarea{border-color:var(--error)}
.is-invalid .form-help{color:var(--error)}
.is-valid   .form-input, .is-valid   .form-select, .is-valid   .form-textarea{border-color:var(--ok)}

.input-icon{ position:relative; display:flex; align-items:center; }
.input-icon i{ position:absolute; left:12px; color:#94a3b8; pointer-events:none; }
.input-icon .form-input{ padding-left:38px }

.check, .radio{display:flex; align-items:center; gap:10px}
.check input[type=checkbox], .radio input[type=radio]{ width:18px; height:18px }

/* Legacy switch with track/thumb - use .switch-legacy if needed */
.switch-legacy{display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none}
.switch-legacy input{display:none}
.switch-legacy .track{
  width:44px; height:24px; background:#e2e8f0; border-radius:999px; position:relative; transition:background .2s ease
}
.switch-legacy .thumb{
  position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%;
  box-shadow:0 2px 6px rgba(0,0,0,.2); transition:left .2s ease
}
.switch-legacy input:checked + .track{ background:var(--accent-green) }
.switch-legacy input:checked + .track .thumb{ left:23px }

.range-wrap{display:flex; align-items:center; gap:12px}
.range-wrap output{min-width:38px;text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:6px 8px}

/* File */
.file{ display:flex;align-items:center;gap:10px;background:#fff;border:1.5px dashed #cbd5e1;border-radius:8px;padding:12px }

/* ========= Login-layout ========= */
.auth-page{
  min-height: calc(100vh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card{
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
  width: 100%;
  max-width: none;
@media (min-width: 1100px) {
  .form-sections.single-section {
    max-width: 420px;
  }
}
  padding: 22px;
}

/* ========= Mobil ========= */
@media (max-width:768px){
  .mobile-menu-btn{display:inline-flex}
  .mobile-menu-btn i{ font-size:1.6rem; } /* större hamburger */

  .sidebar{transform:translateX(-100%);top:var(--header-h);height:calc(100vh - var(--header-h))}
  body.sidebar-open .sidebar{transform:translateX(0)}
  .main-content{margin-left:0}
  .sidebar-toggle{display:none}

  /* overlay för att stänga menyn */
  .overlay{display:none}
  body.sidebar-open .overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000}
}

/* === Global form reset for legacy forms (utan klasser) === */
form input[type="text"],
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="number"],
form input[type="search"],
form input[type="date"],
form input[type="time"],
form input[type="color"],
form select,
form textarea {
  display:block;
  width:100%;
  font-size:1rem;
  padding:12px 12px;
  margin-top:6px;
  margin-bottom:14px;
  border:1.5px solid #e2e8f0;
  border-radius:8px;
  background:#fff;
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
  box-sizing:border-box;
}

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

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="tel"]:focus,
form input[type="number"]:focus,
form input[type="search"]:focus,
form input[type="date"]:focus,
form input[type="time"]:focus,
form input[type="color"]:focus,
form select:focus,
form textarea:focus {
  outline:none;
  border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(158,189,110,.25);
}

/* Etiketter: om du använder riktiga <label> */
form label {
  display:block;
  font-weight:600;
  color:var(--text);
  margin-bottom:6px;
}

/* Checkbox/Radio i gamla formulär – håll dem snyggt med label på sidan */
form input[type="checkbox"],
form input[type="radio"] {
  display:inline-block;
  width:18px; height:18px;
  vertical-align:middle;
  margin-right:8px;
}

/* Body scroll lock when modal open */
body.modal-open { touch-action:none; }

/* === Quill toolbar overrides (scoped to activity modal) === */
#activity-modal #quill-toolbar { border:1px solid #d0d7e2; border-radius:8px 8px 0 0; background:#f8f9fb; padding:2px 4px; display:flex; flex-wrap:wrap; gap:2px; align-items:center; }
#activity-modal #quill-toolbar .ql-picker { font-size:11px; height:22px; line-height:22px; }
#activity-modal #quill-toolbar .ql-picker-label { padding:0 4px; }
#activity-modal #quill-toolbar button { width:20px !important; height:20px !important; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; }
#activity-modal #quill-toolbar button svg { width:14px !important; height:14px !important; }
#activity-modal #quill-toolbar select.ql-header { padding:2px 4px; font-size:11px; height:26px; border:1px solid #d0d7e2; background:#fff; border-radius:4px; }

/* === Quill toolbar overrides (scoped to event edit) === */
#event-edit #quill-toolbar { border:1px solid #d0d7e2; border-radius:8px 8px 0 0; background:#f8f9fb; padding:2px 4px; display:flex; flex-wrap:wrap; gap:2px; align-items:center; }
#event-edit #quill-toolbar .ql-picker { font-size:11px; height:22px; line-height:22px; }
#event-edit #quill-toolbar .ql-picker-label { padding:0 4px; }
#event-edit #quill-toolbar button { width:20px !important; height:20px !important; padding:0 !important; display:inline-flex; align-items:center; justify-content:center; }
#event-edit #quill-toolbar button svg { width:14px !important; height:14px !important; }
#event-edit #quill-toolbar select.ql-header { padding:2px 4px; font-size:11px; height:26px; border:1px solid #d0d7e2; background:#fff; border-radius:4px; }

/* Suggestions dropdown for event edit searches */
#event-edit .suggest { position:absolute; z-index:1300; top:100%; left:0; right:0; background:#fff; border:1px solid #d0d7e2; border-radius:6px; box-shadow:0 6px 18px rgba(16,24,40,0.08); margin-top:4px; max-height:220px; overflow:auto; display:none; }
#event-edit .suggest .item { padding:6px 8px; cursor:pointer; }
#event-edit .suggest .item:hover { background:#f1f5f9; }

/* --- Lightbox (avatar enlarge) --- */
.lightbox-backdrop{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.82);z-index:9999;animation:lb-fade .15s ease;}
.lightbox-backdrop img{max-width:90vw;max-height:90vh;box-shadow:0 8px 32px rgba(0,0,0,.4);border-radius:8px;background:#fff;object-fit:contain;}
@keyframes lb-fade{from{opacity:0}to{opacity:1}}
.lightbox-backdrop button.lb-close{position:absolute;top:14px;right:16px;background:rgba(0,0,0,.55);border:0;color:#fff;font-size:20px;width:38px;height:38px;line-height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.lightbox-backdrop button.lb-close:hover{background:rgba(0,0,0,.75)}

/* === Help Panel === */
#help-panel{position:fixed;top:0;right:-520px;width:520px;max-width:100%;height:100vh;background:#fff;box-shadow:-4px 0 18px rgba(0,0,0,.12);z-index:1400;display:flex;flex-direction:column;transition:right .28s ease;font-size:15px;}
#help-panel.open{right:0}
#help-panel header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
#help-panel header h2{font-size:1.1rem;margin:0;font-weight:600;color:#1e293b}
#help-panel header button{background:transparent;border:0;color:#475569;font-size:20px;width:34px;height:34px;border-radius:8px;cursor:pointer}
#help-panel header button:hover{background:#e2e8f0;color:#0f172a}
#help-panel .tabs{display:flex;border-bottom:1px solid #e2e8f0}
#help-panel .tabs button{flex:1;padding:10px 12px;background:transparent;border:0;border-bottom:3px solid transparent;font-weight:600;color:#475569;cursor:pointer;}
#help-panel .tabs button.active{border-bottom-color:var(--accent-green);color:#0f172a;background:#f1f5f9}
#help-panel .view{flex:1;overflow:auto;padding:18px 20px}
#help-panel .help-html h1,#help-panel .help-html h2,#help-panel .help-html h3{margin:14px 0 8px;font-weight:600;color:#1e293b}
#help-panel .help-html p{margin:0 0 12px;line-height:1.5}
#help-panel .help-html ul{list-style:disc;padding-left:20px;margin:0 0 14px}
#help-panel form.feedback-form{display:grid;gap:14px}
#help-panel form.feedback-form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){#help-panel form.feedback-form .row{grid-template-columns:1fr}}
#help-panel form.feedback-form input[type=text],
#help-panel form.feedback-form input[type=email],
#help-panel form.feedback-form textarea, 
#help-panel form.feedback-form select{width:100%;padding:10px 12px;border:1.5px solid #d0d7e2;border-radius:8px;font:inherit;}
#help-panel form.feedback-form textarea{min-height:130px;resize:vertical}
#help-panel .status{font-size:.9rem;color:var(--muted)}
#help-panel .category-group{display:flex;gap:8px}
#help-panel .badge{display:inline-block;padding:4px 8px;background:#e2e8f0;border-radius:999px;font-size:.75rem;font-weight:600;color:#475569;margin-right:6px}
#help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:1399;opacity:0;pointer-events:none;transition:opacity .28s ease}
#help-overlay.open{opacity:1;pointer-events:auto}

/* Close page button (X) */
.btn-close-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  text-decoration: none;
  font-size: 20px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn-close-page:hover {
  background: #fee2e2;
  color: #dc2626;
  transform: rotate(90deg);
}

/* Open in new tab button - matches btn-close-page size */
.btn-open-new {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #6b7280;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}
.btn-open-new:hover {
  background: #dbeafe;
  color: #2563eb;
}

/* Slide toggle switch */
label.switch,
.switch {
  position: relative;
  display: inline-block !important;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  font-weight: normal;
  margin-bottom: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  transition: 0.3s;
  border-radius: 20px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: #7A9EC3;
}
input:checked + .slider:before {
  transform: translateX(16px);
}

/* Switch-label wrapper - switch först, text efter */
.switch-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.switch-label span {
  font-size: 0.875rem;
  color: #374151;
}
.switch-label .switch {
  flex-shrink: 0;
}

/* Header badge (notifikationsbubbla) */
.header-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 2px solid #1e3a5f;
  z-index: 10;
}

/* === Onboarding Guides === */

/* Guide cards in help panel */
.guides-list{display:flex;flex-direction:column;gap:10px}
.guide-card{display:flex;align-items:center;gap:14px;width:100%;padding:16px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:12px;cursor:pointer;text-align:left;font:inherit;transition:all .18s ease}
.guide-card:hover:not([disabled]){background:#f1f5f9;border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.guide-card[disabled]{opacity:.5;cursor:not-allowed}
.guide-card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;background:var(--accent-green,#16a34a);flex-shrink:0}
.guide-card.completed .guide-card-icon{background:#64748b}
.guide-card.locked .guide-card-icon{background:#cbd5e1;color:#94a3b8}
.guide-card-body{flex:1;min-width:0}
.guide-card-title{font-weight:600;font-size:.95rem;color:#1e293b;margin-bottom:2px}
.guide-card-desc{font-size:.82rem;color:#64748b;line-height:1.35}
.guide-card-progress-bar{height:5px;background:#e2e8f0;border-radius:99px;margin-top:8px;overflow:hidden}
.guide-card-progress-fill{height:100%;background:var(--accent-green,#16a34a);border-radius:99px;transition:width .4s ease}
.guide-card.completed .guide-card-progress-fill{background:#16a34a}
.guide-card.in-progress .guide-card-progress-fill{background:#d97706}
.guide-card-missing{font-size:.75rem;color:#94a3b8;margin-top:4px;font-style:italic}
.guide-card-status{font-size:.78rem;font-weight:600;white-space:nowrap;padding:4px 10px;border-radius:999px;flex-shrink:0}
.guide-card.completed .guide-card-status{color:#16a34a;background:#f0fdf4}
.guide-card.in-progress .guide-card-status{color:#d97706;background:#fffbeb}
.guide-card.not-started .guide-card-status{color:#64748b;background:#f1f5f9}
.guide-card.locked .guide-card-status{color:#94a3b8;background:#f8fafc}

/* Backdrop + spotlight overlay */
.guide-backdrop{position:fixed;inset:0;background:transparent;z-index:10000;opacity:0;pointer-events:none;transition:opacity .25s ease}
.guide-backdrop.active{opacity:1}

.guide-spotlight{position:absolute;z-index:10001;border-radius:8px;box-shadow:0 0 0 9999px rgba(15,23,42,.55);transition:all .3s ease;pointer-events:none;opacity:0}
.guide-spotlight.active{opacity:1}

.guide-spotlight-target{position:relative;z-index:10002 !important}

/* Speech bubble */
.guide-bubble{position:absolute;z-index:10003;width:340px;max-width:calc(100vw - 20px);background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:0;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease}
.guide-bubble.active{opacity:1;pointer-events:auto}
.guide-bubble-arrow{position:absolute;width:16px;height:16px;background:#fff;transform:rotate(45deg);box-shadow:-2px -2px 4px rgba(0,0,0,.06)}
.guide-bubble[data-position="bottom"] .guide-bubble-arrow{top:-7px;left:50%;margin-left:-8px}
.guide-bubble[data-position="top"] .guide-bubble-arrow{bottom:-7px;left:50%;margin-left:-8px;box-shadow:2px 2px 4px rgba(0,0,0,.06)}
.guide-bubble[data-position="left"] .guide-bubble-arrow{right:-7px;top:50%;margin-top:-8px;box-shadow:2px -2px 4px rgba(0,0,0,.06)}
.guide-bubble[data-position="right"] .guide-bubble-arrow{left:-7px;top:50%;margin-top:-8px;box-shadow:-2px 2px 4px rgba(0,0,0,.06)}
.guide-bubble[data-position="center"] .guide-bubble-arrow{display:none}

.guide-bubble-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 0;gap:8px}
.guide-bubble-title{font-weight:700;font-size:1rem;color:#1e293b}
.guide-bubble-close{background:transparent;border:0;color:#94a3b8;font-size:20px;width:28px;height:28px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.guide-bubble-close:hover{background:#f1f5f9;color:#475569}

.guide-bubble-text{padding:8px 16px 12px;color:#475569;font-size:.9rem;line-height:1.55}

.guide-bubble-footer{display:flex;align-items:center;justify-content:space-between;padding:0 16px 14px;border-top:1px solid #f1f5f9;padding-top:12px}
.guide-bubble-progress{font-size:.78rem;color:#94a3b8;font-weight:500}
.guide-bubble-actions{display:flex;gap:8px}
.guide-bubble-actions .btn-sm{padding:6px 14px;font-size:.82rem;border-radius:8px}

/* Toast */
.guide-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 24px;border-radius:10px;font-weight:600;font-size:.9rem;color:#fff;z-index:10010;opacity:0;transition:all .3s ease;pointer-events:none}
.guide-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.guide-toast-success{background:#16a34a}
.guide-toast-info{background:#2563eb}