/* ===================================================
   Anvandare System – Responsiv CSS
   Mobile-first design
   =================================================== */

:root {
  --primary:    #2563eb;
  --primary-dk: #1d4ed8;
  --secondary:  #64748b;
  --success:    #16a34a;
  --warning:    #d97706;
  --danger:     #dc2626;
  --bg:         #f1f5f9;
  --surface:    #ffffff;
  --border:     #e2e8f0;
  --text:       #1e293b;
  --text-muted: #64748b;
  --radius:     8px;
  --shadow:     0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.08);
  --shadow-lg:  0 10px 25px rgba(0,0,0,.14);
  --nav-h:      56px;
  --transition: .18s ease;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
     background:var(--bg);color:var(--text);line-height:1.6}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{list-style:none}
img{max-width:100%;display:block}

/* ── TOPNAV LAYOUT ── */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:var(--primary);box-shadow:var(--shadow)
}
.topnav-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);padding:0 1.25rem;gap:.5rem
}
.topnav-left{display:flex;align-items:center;height:100%;flex:1;min-width:0}
.topnav-right{display:flex;align-items:center;height:100%;flex-shrink:0}
.brand{
  text-decoration:none;white-space:nowrap;margin-right:.75rem;flex-shrink:0;
  display:flex;align-items:center
}
.brand img{height:28px;width:auto;display:block}
.brand:hover{opacity:.85;text-decoration:none}
.nav-menu{display:flex;align-items:center;list-style:none;height:100%;margin:0;padding:0}
.nav-item{position:relative;height:100%;display:flex;align-items:center}
.nav-item>a{
  display:flex;align-items:center;gap:.25rem;padding:0 .85rem;
  height:100%;color:rgba(255,255,255,.88);font-size:.875rem;font-weight:500;
  text-decoration:none;white-space:nowrap;transition:background .15s,color .15s
}
.nav-item>a:hover{color:#fff;background:rgba(255,255,255,.12);text-decoration:none}
.nav-item.active>a{color:#fff;background:rgba(255,255,255,.18)}
.caret{font-size:.58rem;opacity:.65;transition:transform .15s;margin-top:1px}
.nav-item.open .caret,.nav-item.has-dropdown:hover .caret{transform:rotate(180deg)}
/* Dropdown */
.dropdown{
  display:none;position:absolute;top:100%;left:0;
  background:var(--surface);border-radius:0 var(--radius) var(--radius) var(--radius);
  box-shadow:0 6px 24px rgba(0,0,0,.15);min-width:200px;z-index:400;
  border:1px solid var(--border);border-top:3px solid var(--primary);padding:.3rem 0
}
.dropdown.dd-right{left:auto;right:0;border-radius:var(--radius) 0 var(--radius) var(--radius)}
.nav-item.has-dropdown:hover>.dropdown,.nav-item.has-dropdown.open>.dropdown{display:block}
.dropdown a{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem 1rem;font-size:.86rem;
  color:var(--text);text-decoration:none;transition:background .1s
}
.dropdown a:hover{background:#eff6ff;color:var(--primary);text-decoration:none}
.dropdown a.dd-active{color:var(--primary);font-weight:600}
.dd-divider{margin:.3rem 0;border:none;border-top:1px solid var(--border)}
/* Nested submenu */
.has-sub{position:relative}
.has-sub>a::after{content:'›';float:right;margin-left:.75rem;font-size:1rem;line-height:1.2;opacity:.5}
.sub-dropdown{
  display:none;position:absolute;left:100%;top:-.4rem;
  background:var(--surface);border-radius:var(--radius);
  box-shadow:0 6px 24px rgba(0,0,0,.15);min-width:180px;z-index:500;
  border:1px solid var(--border);border-top:3px solid var(--primary);padding:.3rem 0
}
.has-sub:hover>.sub-dropdown{display:block}
/* Inline button in nav */
.nav-btn{
  display:flex;align-items:center;padding:.3rem .7rem;margin:0 .3rem;
  border-radius:var(--radius);background:rgba(255,255,255,.15);
  color:#fff;font-size:.82rem;font-weight:600;
  text-decoration:none;transition:background .15s;white-space:nowrap;flex-shrink:0
}
.nav-btn:hover{background:rgba(255,255,255,.25);color:#fff;text-decoration:none}
/* Hamburger */
.nav-hamburger{
  display:none;background:none;border:none;color:#fff;
  font-size:1.3rem;cursor:pointer;padding:.3rem .4rem;margin-left:.5rem;line-height:1
}
/* Mobile menu */
.mobile-nav{
  display:none;background:var(--primary-dk);
  border-top:1px solid rgba(255,255,255,.15);padding:.35rem 0
}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:.65rem 1.25rem;
  color:rgba(255,255,255,.9);font-size:.9rem;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06)
}
.mobile-nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.mobile-nav .mob-sep{
  padding:.45rem 1.25rem .2rem;
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;color:rgba(255,255,255,.45)
}
/* Body / Main */
.adm-body{padding-top:var(--nav-h);min-height:100vh}
.adm-main{max-width:1300px;margin:0 auto;padding:1.5rem}

/* ── PUBLIC LAYOUT ── */
.pub-page{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.pub-topbar{
  background:var(--primary);color:#fff;padding:.7rem 1.25rem;
  text-align:center;font-size:.95rem;font-weight:600
}
.pub-center{
  flex:1;display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem
}
.pub-card{
  background:var(--surface);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);width:100%;max-width:430px;padding:2rem
}
.pub-card h1{font-size:1.35rem;text-align:center;margin-bottom:1.5rem;color:var(--text)}
.pub-footer{text-align:center;padding:1rem;font-size:.78rem;color:var(--text-muted)}

/* ── ACCOUNT LAYOUT (inloggad) ── */
.acc-page{min-height:100vh;background:var(--bg);display:flex;flex-direction:column}
.acc-header{
  background:var(--primary);color:#fff;padding:.75rem 1.25rem;
  display:flex;align-items:center;justify-content:space-between
}
.acc-header .brand{font-weight:700;color:#fff;text-decoration:none;font-size:1rem}
.acc-header-right{display:flex;align-items:center;gap:1rem;font-size:.85rem}
.acc-header-right a{color:rgba(255,255,255,.9);text-decoration:none}
.acc-header-right a:hover{color:#fff;text-decoration:underline}
.acc-content{flex:1;padding:1.5rem 1rem;max-width:860px;margin:0 auto;width:100%}

/* ── TYPOGRAPHY ── */
h1{font-size:1.55rem;font-weight:700;margin-bottom:.9rem}
h2{font-size:1.25rem;font-weight:600;margin-bottom:.7rem}
h3{font-size:1.05rem;font-weight:600;margin-bottom:.5rem}
p{margin-bottom:.75rem}

/* ── CARDS ── */
.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.25rem;overflow:hidden}
/* Centrera kort på sidan. Endast top-level-kort (direkt barn till innehållsytan)
   – kort i grid/flex-layouter (t.ex. tvåkolumnsvyer) lämnas orörda. */
.adm-main>.card{max-width:var(--page-max,none);margin-left:auto;margin-right:auto}
.card-header{
  padding:.8rem 1.2rem;background:#f8fafc;border-bottom:1px solid var(--border);
  font-weight:600;font-size:.92rem;display:flex;align-items:center;justify-content:space-between
}
.card-body{padding:1.2rem}

/* ── FORMS ── */
.form-group{margin-bottom:1.25rem}
label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.35rem;color:var(--text)}
/* Fältetiketter dras in en aning så de linjerar med inputtexten (inputens
   vänsterpadding) – ser bättre ut mot de rundade hörnen. Ej kryssrutsrader. */
.form-group > label:not(.cb-row){padding-left:.45rem}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
input[type="number"],input[type="date"],input[type="datetime-local"],input[type="month"],
input[type="time"],input[type="search"],input[type="url"],select,textarea{
  display:block;width:100%;padding:.6rem .85rem;border:1px solid var(--border);
  border-radius:var(--radius);font-size:.93rem;color:var(--text);background:var(--surface);
  line-height:1.4;min-height:42px;font-family:inherit;
  transition:border-color var(--transition),box-shadow var(--transition)
}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .7rem center;padding-right:2rem}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)
}
textarea{resize:vertical;min-height:80px}
.form-hint{font-size:.77rem;color:var(--text-muted);margin-top:.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.form-actions{display:flex;align-items:center;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}

/* Datumfält med kalender-knapp (global smart-datetime, se _smartdatetime.php).
   .smart-date-btn är rent kosmetisk (visar ikonen); en riktig, osynlig
   <input type="date"> (.smart-date-shadow) ligger ovanpå den och tar emot
   det faktiska klicket, så webbläsaren öppnar/stänger sin egen popup helt
   normalt utan någon JS-inblandning (se kommentar i _smartdatetime.php). */
.smart-date-wrap{position:relative;display:flex;align-items:stretch;gap:.4rem}
.smart-date-wrap input.smart-date{flex:1 1 auto;min-width:0}
.smart-date-btn{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:42px;min-height:42px;padding:0;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);color:var(--text-muted);transition:background var(--transition),color var(--transition)}
/* input[type="date"].smart-date-shadow (inte bara .smart-date-shadow) för att
   vinna över basregelns input[type="date"]{width:100%} ovan i specificitet –
   annars sträcker sig shadow-fältet över hela raden (inte bara knappen) och
   klick på SJÄLVA textfältet öppnar felaktigt kalendern också. */
input[type="date"].smart-date-shadow{position:absolute;top:0;right:0;width:42px;height:100%;
  opacity:0;padding:0;margin:0;border:0;cursor:pointer}
.smart-date-wrap:has(.smart-date-shadow:hover) .smart-date-btn{background:var(--bg);color:var(--primary)}
.smart-date-wrap:has(.smart-date-shadow:focus-visible) .smart-date-btn{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.15)}

/* ── Formulärflikar: segmenterad grå kontroll (STANDARD) ──
   Hela flikraden ligger i en ljusgrå platta; aktiv flik = vit upphöjd knapp.
   Används av formulär med flera sektioner (paneler .ftab-panel). */
.form-tabs{display:inline-flex;flex-wrap:wrap;gap:.25rem;max-width:100%;
  background:var(--bg);border-radius:10px;padding:.3rem;margin-bottom:1.4rem}
.form-tabs .ftab{appearance:none;background:none;border:none;cursor:pointer;font:inherit;
  font-weight:600;font-size:.9rem;color:var(--text-muted);padding:.5rem .95rem;
  border-radius:7px;transition:background .15s,color .15s}
.form-tabs .ftab:hover{color:var(--text)}
.form-tabs .ftab.is-active{background:var(--surface);color:var(--primary);
  box-shadow:0 1px 2px rgba(15,23,42,.10)}
.ftab-panel{display:none}
.ftab-panel.is-active{display:block}
/* Hårlinje ovanför formulärknappar (STANDARD) */
.form-sep{margin:1.5rem 0 1rem;border:none;border-top:1px solid var(--border)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.1rem;border-radius:var(--radius);
  font-size:.88rem;font-weight:600;cursor:pointer;border:none;
  transition:background var(--transition),transform var(--transition),opacity var(--transition);
  text-decoration:none;white-space:nowrap;line-height:1.4
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dk);text-decoration:none;color:#fff}
.btn-secondary{background:var(--secondary);color:#fff}
.btn-secondary:hover{background:#475569;text-decoration:none;color:#fff}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#15803d;text-decoration:none;color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c;text-decoration:none;color:#fff}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:hover{background:#eff6ff;text-decoration:none}
.btn-sm{padding:.35rem .7rem;font-size:.78rem}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ── ALERTS ── */
.alert{padding:.8rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.88rem;border-left:4px solid}
.alert-success{background:#f0fdf4;border-color:var(--success);color:#166534}
.alert-danger{background:#fef2f2;border-color:var(--danger);color:#991b1b}
.alert-warning{background:#fffbeb;border-color:var(--warning);color:#92400e}
.alert-info{background:#eff6ff;border-color:var(--primary);color:#1e40af}
.flash-msg{padding:.8rem 1rem;border-radius:var(--radius);margin-bottom:1rem;
  background:#f0fdf4;border-left:4px solid var(--success);color:#166534;font-size:.88rem}
.validation-errors{
  background:#fef2f2;border:1px solid #fca5a5;border-radius:var(--radius);
  padding:.75rem 1rem;margin-bottom:1rem;font-size:.86rem;color:#991b1b
}
.validation-errors ul{padding-left:1.2rem;list-style:disc}
.validation-errors li{margin-bottom:.2rem}
/* Trongates summeringslista är själv .validation-errors (= rutan); ta bort
   punktmarkörer så det blir en ren ruta utan extra indrag/dubbelruta. */
.validation-errors--summary{list-style:none}
.validation-errors--summary li{margin-bottom:.2rem}
.validation-errors--summary li:last-child{margin-bottom:0}

/* ── BADGES ── */
.badge{
  display:inline-flex;align-items:center;padding:.2rem .55rem;
  border-radius:9999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em
}
.badge-superadmin{background:#fdf4ff;color:#7c3aed;border:1px solid #e9d5ff}
.badge-admin{background:#dbeafe;color:#1e40af}
.badge-schemaadmin{background:#ede9fe;color:#5b21b6}
.badge-user{background:#f1f5f9;color:#475569}
.badge-active{background:#dcfce7;color:#166534}
.badge-inactive{background:#f1f5f9;color:#94a3b8}
.badge-pending{background:#fef9c3;color:#854d0e}
.badge-locked{background:#fee2e2;color:#991b1b}
.badge-success{background:#dcfce7;color:#166534}
.badge-failed{background:#fee2e2;color:#991b1b}

/* ── TABLES ── */
.table-wrapper{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead th{
  background:#f8fafc;padding:.7rem 1rem;text-align:left;
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap
}
tbody td{padding:.7rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafafa}
.td-actions{white-space:nowrap;text-align:right}

/* ── DETAIL LIST ── */
.detail-list .dl-row{
  display:flex;padding:.6rem 0;border-bottom:1px solid var(--border);
  font-size:.88rem;gap:1rem;align-items:flex-start
}
.detail-list .dl-row:last-child{border-bottom:none}
.detail-list .dl-row .dl-label{flex:0 0 155px;font-weight:600;color:var(--text-muted)}
.detail-list .dl-row .dl-value{flex:1;color:var(--text);word-break:break-word}

/* ── PAGE HEADER ── */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;flex-wrap:wrap;gap:.75rem;max-width:var(--page-max,none);margin-left:auto;margin-right:auto}
.page-header h1{margin:0;font-size:1.4rem}

/* ── SEARCH BAR ── */
.search-bar{display:flex;gap:.5rem;margin-bottom:1.2rem;flex-wrap:wrap}
.search-bar input{flex:1;min-width:200px}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-box{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:1.5rem;max-width:440px;width:90%}
.modal-title{font-size:1.05rem;font-weight:700;margin-bottom:.75rem;color:var(--danger)}
.modal-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.25rem}

/* ── LOGIN SPECIFIC ── */
.login-logo{text-align:center;margin-bottom:1.75rem}
.login-logo h1{font-size:1.7rem;font-weight:800;color:var(--primary);margin-bottom:.25rem}
.login-logo p{color:var(--text-muted);font-size:.88rem;margin:0}
/* Loggan ligger på menyfärgen så den syns även på det vita kortet (loggan
   är gjord för den färgade menyn). Bakgrundsfärgen sätts inline från temat. */
.login-logo-chip{
  display:inline-block;padding:.7rem 1.1rem;border-radius:10px;
  margin-bottom:1rem;box-shadow:var(--shadow)
}
.login-logo-chip img{height:36px;width:auto;display:block}
.login-links{margin-top:1.25rem;text-align:center;font-size:.86rem;color:var(--text-muted)}
.login-links a{color:var(--primary)}
.login-links p{margin:.35rem 0}

/* ── REMEMBER ME ── */
.cb-row{display:flex;align-items:center;gap:.5rem;font-size:.88rem;cursor:pointer;margin-bottom:.5rem}

/* ── Chips: kryssrutor som klickbara etiketter ──────────────────────────────
   Används där man väljer flera saker ur en lista, t.ex. vilka funktioner en
   nod ska ha. Anknytningsfältet inuti chipet visas först när rutan är i. */
.chip-grupp{display:flex;flex-wrap:wrap;gap:.5rem;margin:.15rem 0 .25rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .8rem;
  border:1.5px solid var(--border);border-radius:12px;background:var(--surface);
  font-size:.86rem;font-weight:600;color:var(--text);cursor:pointer;
  transition:border-color var(--transition),background var(--transition)}
.chip:hover{border-color:var(--primary)}
.chip input[type="checkbox"]{width:auto;display:inline;cursor:pointer;margin:0;
  accent-color:var(--primary)}
.chip:has(input[type="checkbox"]:checked){border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.chip input[type="text"]{width:4.6rem;margin:0 0 0 .1rem;padding:.15rem .4rem;
  font-size:.8rem;font-weight:400;text-align:center}
.chip input[type="checkbox"]:not(:checked) ~ input[type="text"]{display:none}
.chip .chip-not{font-weight:400;color:var(--text-muted);font-size:.76rem}

/* ── Katalogträdet ──────────────────────────────────────────────────────────
   Hela organisationen på en sida: grupper, noder i flera nivåer och deras
   ringbara poster. Indraget bärs av --niva så att djupet syns direkt. */
.trad-grupp{margin-bottom:1.25rem}
.trad-grupp > .card-body{padding:.5rem .6rem}
.trad-rad{display:flex;align-items:center;gap:.6rem;padding:.42rem .5rem;
  border-radius:6px;position:relative}
.trad-rad:hover{background:color-mix(in srgb,var(--text) 5%,transparent)}
.trad-rad .namn{font-weight:600;font-size:.9rem}
.trad-rad .namn a{color:var(--text)}
.trad-barn{margin-left:1.1rem;padding-left:.75rem;
  border-left:1px solid var(--border)}
.trad-rad .knappar{margin-left:auto;display:flex;gap:.35rem;flex-shrink:0}
.trad-rad .ankn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.8rem;color:var(--text-muted)}
.trad-tom{color:var(--text-muted);font-size:.84rem;padding:.5rem}
.trad-panel{margin:.15rem 0 .6rem 1.1rem;padding:.8rem .9rem;
  border:1px solid var(--border);border-radius:var(--radius);
  background:color-mix(in srgb,var(--text) 3%,transparent)}
.trad-vippa{appearance:none;background:none;border:none;cursor:pointer;
  color:var(--text-muted);font:inherit;font-size:.8rem;width:1.1rem;
  padding:0;flex-shrink:0}
.trad-vippa[aria-expanded="true"]{transform:rotate(90deg)}


.cb-row input[type="checkbox"]{width:auto;display:inline;cursor:pointer}

/* ── PASSWORD REQUIREMENTS ── */
.pw-req{
  font-size:.79rem;color:var(--text-muted);background:#f8fafc;
  border:1px solid var(--border);border-radius:var(--radius);
  padding:.65rem 1rem;margin-top:.5rem
}
.pw-req ul{padding-left:1.2rem;list-style:disc}
.pw-req li{margin-bottom:.15rem}

/* ── MISC ── */
hr{border:none;border-top:1px solid var(--border);margin:1rem 0}
.text-muted{color:var(--text-muted)}
.text-center{text-align:center}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.gap-1{gap:.5rem}

::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .nav-menu{display:none}
  .nav-hamburger{display:flex}
  .adm-main{padding:1rem}
  .form-row{grid-template-columns:1fr}
  .page-header{flex-direction:column;align-items:flex-start}
  .detail-list .dl-row{flex-direction:column;gap:.1rem}
  .detail-list .dl-row .dl-label{flex:none}
  thead th:nth-child(n+5),tbody td:nth-child(n+5){display:none}
  .acc-content{padding:1rem}
  .modal-overlay{align-items:flex-end}
  .modal-box{max-width:100%;border-radius:var(--radius) var(--radius) 0 0}
}

@media(max-width:480px){
  .pub-card{padding:1.5rem 1.2rem}
  h1{font-size:1.3rem}
  .btn{font-size:.84rem;padding:.5rem .9rem}
}

/* ════════ DARK MODE (html[data-theme="dark"]) ════════
   Överrider de neutrala variablerna; kundens temafärg (--primary) och den
   varumärkesfärgade topnav:en behålls. Plus några hårdkodade ljusa ytor i
   kärnan som annars inte följer med. */
html[data-theme="dark"]{
  --bg:#0f172a; --surface:#1e293b; --border:#334155;
  --text:#e2e8f0; --text-muted:#94a3b8;
  --shadow:0 1px 3px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 12px 28px rgba(0,0,0,.55);
  color-scheme:dark;
}
html[data-theme="dark"] .card-header,
html[data-theme="dark"] thead th,
html[data-theme="dark"] .pw-req{background:#172033}
html[data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .dropdown a:hover,
html[data-theme="dark"] .btn-outline:hover{background:rgba(255,255,255,.07);color:var(--text)}
html[data-theme="dark"] .table-search{background-color:var(--surface)}
html[data-theme="dark"] .badge-user,
html[data-theme="dark"] .badge-inactive{background:#334155;color:#cbd5e1}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 35%,transparent)}
html[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2394a3b8' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
html[data-theme="dark"] .hjalp-panel{background:var(--surface)}
html[data-theme="dark"] .hjalp-grip::before{border-color:var(--text-muted)}

/* ── Dark mode: fånga vanliga INLINE-hårdkodade ljusa färger i vyerna ──
   Inline-stilar slår selektorer, så !important krävs. Allt scopat till dark.
   Tint-reglerna ligger EFTER de neutrala så att t.ex. #fffbeb (amber) vinner
   över den generella #fff-matchningen. */
/* Vita/nära-vita behållare → yta */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"],
html[data-theme="dark"] [style*="background:#fafafa"],
html[data-theme="dark"] [style*="background:#fcfdff"],
html[data-theme="dark"] [style*="background:#fafbff"],
html[data-theme="dark"] [style*="background:#f9fafb"]{background-color:var(--surface)!important}
/* Ljusgrå insatspaneler → mörk panel */
html[data-theme="dark"] [style*="background:#f8fafc"],
html[data-theme="dark"] [style*="background: #f8fafc"],
html[data-theme="dark"] [style*="background:#f1f5f9"],
html[data-theme="dark"] [style*="background: #f1f5f9"],
html[data-theme="dark"] [style*="background:#eef2f7"],
html[data-theme="dark"] [style*="background:#e2e8f0"]{background-color:#172033!important}
/* Tonade alert-/badge-bakgrunder → genomskinliga hue-tinter */
html[data-theme="dark"] [style*="background:#fee2e2"],
html[data-theme="dark"] [style*="background: #fee2e2"],
html[data-theme="dark"] [style*="background:#fef2f2"]{background-color:rgba(220,38,38,.16)!important}
html[data-theme="dark"] [style*="background:#fef3c7"],
html[data-theme="dark"] [style*="background: #fef3c7"],
html[data-theme="dark"] [style*="background:#fffbeb"],
html[data-theme="dark"] [style*="background: #fffbeb"],
html[data-theme="dark"] [style*="background:#fefce8"],
html[data-theme="dark"] [style*="background:#fef9c3"],
html[data-theme="dark"] [style*="background:#fde68a"]{background-color:rgba(245,158,11,.15)!important}
html[data-theme="dark"] [style*="background:#dcfce7"],
html[data-theme="dark"] [style*="background: #dcfce7"],
html[data-theme="dark"] [style*="background:#f0fdf4"]{background-color:rgba(22,163,74,.16)!important}
html[data-theme="dark"] [style*="background:#eff6ff"],
html[data-theme="dark"] [style*="background: #eff6ff"],
html[data-theme="dark"] [style*="background:#dbeafe"],
html[data-theme="dark"] [style*="background:#eef2ff"],
html[data-theme="dark"] [style*="background:#e0e7ff"]{background-color:rgba(59,130,246,.16)!important}
html[data-theme="dark"] [style*="background:#ede9fe"],
html[data-theme="dark"] [style*="background:#f5f3ff"],
html[data-theme="dark"] [style*="background:#f3e8ff"]{background-color:rgba(139,92,246,.18)!important}
/* Mörk accenttext (på tonad bg) → ljusare för läsbarhet */
html[data-theme="dark"] [style*="color:#92400e"],
html[data-theme="dark"] [style*="color: #92400e"],
html[data-theme="dark"] [style*="color:#854d0e"]{color:#fcd34d!important}
html[data-theme="dark"] [style*="color:#1e40af"],
html[data-theme="dark"] [style*="color: #1e40af"],
html[data-theme="dark"] [style*="color:#1e3a8a"],
html[data-theme="dark"] [style*="color:#3730a3"]{color:#93c5fd!important}
html[data-theme="dark"] [style*="color:#166534"]{color:#86efac!important}
html[data-theme="dark"] [style*="color:#991b1b"],
html[data-theme="dark"] [style*="color:#b91c1c"]{color:#fca5a5!important}
html[data-theme="dark"] [style*="color:#5b21b6"],
html[data-theme="dark"] [style*="color:#6b21a8"]{color:#c4b5fd!important}
html[data-theme="dark"] [style*="color:#475569"]{color:#cbd5e1!important}
html[data-theme="dark"] [style*="color:#1e293b"]{color:var(--text)!important}
/* .xls-registreringsgrid (lönekörning/bokföring) – egen komponent-CSS i vyerna */
html[data-theme="dark"] table.xls th,
html[data-theme="dark"] table.xls td.belopp{background:#172033!important}
html[data-theme="dark"] table.xls tr.tom td{background:rgba(255,255,255,.03)!important}
html[data-theme="dark"] table.xls input:focus,
html[data-theme="dark"] table.xls select:focus{background:var(--surface)!important}
/* Pastell-RAMAR (alert-/info-rutor) → tonade i samma hue */
html[data-theme="dark"] [style*="solid #fecaca"],
html[data-theme="dark"] [style*="solid #fca5a5"]{border-color:rgba(220,38,38,.4)!important}
html[data-theme="dark"] [style*="solid #fde68a"],
html[data-theme="dark"] [style*="solid #fcd34d"],
html[data-theme="dark"] [style*="solid #fef3c7"]{border-color:rgba(245,158,11,.4)!important}
html[data-theme="dark"] [style*="solid #bbf7d0"],
html[data-theme="dark"] [style*="solid #86efac"]{border-color:rgba(22,163,74,.4)!important}
html[data-theme="dark"] [style*="solid #bfdbfe"],
html[data-theme="dark"] [style*="solid #c7d2fe"],
html[data-theme="dark"] [style*="solid #93c5fd"]{border-color:rgba(59,130,246,.4)!important}
html[data-theme="dark"] [style*="solid #e9d5ff"]{border-color:rgba(139,92,246,.4)!important}
/* Kalender vy-väljare (Dag/Vecka/Månad/År) – inaktiv flik hade background:#fff */
html[data-theme="dark"] .kal-vy span{background:var(--surface)}
/* Dashboard: panelen "Pågående lönekörning" (egen komponent-CSS, gul ton) */
html[data-theme="dark"] .pag-lon{border-color:rgba(245,158,11,.35);border-left-color:#f59e0b}
html[data-theme="dark"] .pag-lon-head{background:rgba(245,158,11,.13);border-bottom-color:rgba(245,158,11,.22);color:#fcd34d}
html[data-theme="dark"] .pag-lon-rad{border-top-color:rgba(255,255,255,.06)}
html[data-theme="dark"] .pag-lon-rad:hover{background:rgba(245,158,11,.08)}
html[data-theme="dark"] .pag-lon-pill.pag-lon-warn{background:rgba(245,158,11,.2);color:#fcd34d}
html[data-theme="dark"] .pag-lon-pill.pag-lon-ok{background:rgba(22,163,74,.2);color:#86efac}