:root {
  --primary:    #c0392b;
  --primary-dk: #a93226;
  --secondary:  #64748b;
  --success:    #16a34a;
  --warning:    #d97706;
  --danger:     #dc2626;
  --bg:         #f8f1f1;
  --surface:    #ffffff;
  --border:     #e2d5d5;
  --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;
}

*,*::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 ── */
.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:26px;width:auto;display:block}
.brand-text{margin-left:.5rem;color:rgba(255,255,255,.92);font-size:.95rem;font-weight:500;letter-spacing:.01em}
.brand-text b{font-weight:800}
.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:#fff5f5;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)}

/* ── Formulärflikar: segmenterad grå kontroll (matchar adminix2) ── */
.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}
.form-sep{margin:1.5rem 0 1rem;border:none;border-top:1px solid var(--border)}
.var-chips{display:flex;flex-wrap:wrap;gap:.3rem}
.var-chip{appearance:none;cursor:pointer;font:inherit;font-size:.72rem;line-height:1.2;
  background:var(--bg);border:1px solid var(--border);border-radius:9999px;
  padding:.22rem .55rem;color:var(--text-muted)}
.var-chip strong{color:var(--primary);font-family:monospace}
.var-chip:hover{background:#fff5f5;color:var(--text)}
.op-chip{font-size:.92rem;font-weight:700;font-family:monospace;min-width:2rem;text-align:center;padding:.2rem .4rem;color:var(--text)}

/* 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-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-footer{text-align:center;padding:1rem;font-size:.78rem;color:var(--text-muted)}

/* ── 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}
.card-header{
  padding:.8rem 1.2rem;background:#fdf5f5;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:1rem}
label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.3rem;color:var(--text)}
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],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);
  transition:border-color var(--transition),box-shadow var(--transition)
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(192,57,43,.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}

/* ── 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),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-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:#fff5f5;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}
.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
}

/* ── 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:#fdf5f5;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:#fff8f8}
.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 115px;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}
.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}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}
.empty-state .icon{font-size:2.5rem;margin-bottom:.75rem}

/* ── 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}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}

/* ── LOGIN ── */
.login-logo{text-align:center;margin-bottom:1.75rem}
.login-logo p{color:var(--text-muted);font-size:.88rem;margin:0}

/* ── DASHBOARD STATS ── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;text-align:center}
.stat-card .stat-num{font-size:2rem;font-weight:800;color:var(--primary)}
.stat-card .stat-label{font-size:.82rem;color:var(--text-muted);margin-top:.25rem}

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

/* ── 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}
  thead th:nth-child(n+5),tbody td:nth-child(n+5){display:none}
}
@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 neutrala variabler; temafärgen (--primary, röd) och topnav:en behålls. */
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{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,
html[data-theme="dark"] .var-chip:hover{background:rgba(255,255,255,.07);color:var(--text)}
html[data-theme="dark"] .alert-danger{background:rgba(220,38,38,.16);color:#fca5a5}
html[data-theme="dark"] .alert-warning{background:rgba(245,158,11,.15);color:#fcd34d}
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")}
/* Inline-hårdkodade ljusa färger i vyerna (t.ex. Underhåll-bannern) */
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:#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}
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:#fdf5f5"],
html[data-theme="dark"] [style*="background:#fff5f5"],
html[data-theme="dark"] [style*="background:#e2e8f0"]{background-color:#172033!important}
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:#fef9c3"],
html[data-theme="dark"] [style*="background:#fefce8"]{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}
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:#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: #991b1b"],
html[data-theme="dark"] [style*="color:#b91c1c"]{color:#fca5a5!important}
html[data-theme="dark"] [style*="color:#475569"]{color:#cbd5e1!important}
html[data-theme="dark"] [style*="color:#1e293b"]{color:var(--text)!important}
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"]{border-color:rgba(245,158,11,.4)!important}
html[data-theme="dark"] [style*="solid #bbf7d0"]{border-color:rgba(22,163,74,.4)!important}
html[data-theme="dark"] [style*="solid #bfdbfe"],
html[data-theme="dark"] [style*="solid #c7d2fe"]{border-color:rgba(59,130,246,.4)!important}
