/* Hemmet – tema- och layoutsystem. Alla färger styrs av variabler på [data-theme]. */
:root, [data-theme="ljust"] {
  --bg:#f4f5f7; --surface:#fff; --surface-2:#eceef2; --text:#14161a; --muted:#6b7280; --border:#e3e6ec;
  --accent:#1f2937; --ink:#fff; --accent-2:#9ca3af;
  --grad:linear-gradient(135deg,#374151,#111827);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 12px 28px -12px rgba(16,24,40,.18);
  color-scheme:light;
}
[data-theme="morkt"] {
  --bg:#000; --surface:#0f0f11; --surface-2:#1a1a1d; --text:#f5f5f6; --muted:#9a9aa3; --border:#242428;
  --accent:#f4f4f5; --ink:#09090b; --accent-2:#71717a;
  --grad:linear-gradient(135deg,#3f3f46,#0f0f11);
  --shadow:0 1px 2px rgba(0,0,0,.6),0 12px 28px -12px rgba(0,0,0,.8);
  color-scheme:dark;
}
/* Flickor */
[data-theme="rosa"] {
  --bg:#fff4f9; --surface:#fff; --surface-2:#ffe6f1; --text:#3b1228; --muted:#9a6a82; --border:#fbd0e3;
  --accent:#ec4899; --ink:#fff; --accent-2:#f9a8d4;
  --grad:linear-gradient(135deg,#f9a8d4,#ec4899 55%,#a855f7);
  --shadow:0 1px 2px rgba(236,72,153,.08),0 14px 30px -14px rgba(236,72,153,.35);
}
[data-theme="lavendel"] {
  --bg:#f6f3ff; --surface:#fff; --surface-2:#ebe5ff; --text:#251a4d; --muted:#7a6ba8; --border:#dcd2fb;
  --accent:#8b5cf6; --ink:#fff; --accent-2:#c4b5fd;
  --grad:linear-gradient(135deg,#c4b5fd,#8b5cf6 55%,#ec4899);
  --shadow:0 1px 2px rgba(139,92,246,.08),0 14px 30px -14px rgba(139,92,246,.4);
}
[data-theme="persika"] {
  --bg:#fff6f0; --surface:#fff; --surface-2:#ffe7d8; --text:#4a2113; --muted:#a8735c; --border:#ffd3bc;
  --accent:#f4604f; --ink:#fff; --accent-2:#fdba74;
  --grad:linear-gradient(135deg,#fdba74,#fb7185 55%,#f43f5e);
  --shadow:0 1px 2px rgba(244,96,79,.08),0 14px 30px -14px rgba(244,96,79,.4);
}
[data-theme="mynta"] {
  --bg:#f0fbf8; --surface:#fff; --surface-2:#d9f4ec; --text:#0f3a33; --muted:#5a9186; --border:#bde8dc;
  --accent:#0fa896; --ink:#fff; --accent-2:#99f6e4;
  --grad:linear-gradient(135deg,#5eead4,#14b8a6 55%,#f9a8d4);
  --shadow:0 1px 2px rgba(20,184,166,.08),0 14px 30px -14px rgba(20,184,166,.4);
}
[data-theme="glitter"] {
  --bg:#1a0d2b; --surface:#27153d; --surface-2:#34204f; --text:#fdf0ff; --muted:#bfa0d6; --border:#43296a;
  --accent:#f472b6; --ink:#2a0b25; --accent-2:#fb923c;
  --grad:linear-gradient(135deg,#a855f7,#ec4899 55%,#fb923c);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 32px -14px rgba(236,72,153,.5);
  color-scheme:dark;
}
/* Pojkar */
[data-theme="hav"] {
  --bg:#eff5ff; --surface:#fff; --surface-2:#dfeaff; --text:#0d223f; --muted:#5a7498; --border:#cddefb;
  --accent:#2563eb; --ink:#fff; --accent-2:#38bdf8;
  --grad:linear-gradient(135deg,#38bdf8,#2563eb 55%,#4f46e5);
  --shadow:0 1px 2px rgba(37,99,235,.08),0 14px 30px -14px rgba(37,99,235,.4);
}
[data-theme="skog"] {
  --bg:#f1f7f2; --surface:#fff; --surface-2:#ddefe0; --text:#11301c; --muted:#58806a; --border:#c6e2cc;
  --accent:#15803d; --ink:#fff; --accent-2:#a3e635;
  --grad:linear-gradient(135deg,#86efac,#16a34a 55%,#0f766e);
  --shadow:0 1px 2px rgba(22,163,74,.08),0 14px 30px -14px rgba(22,163,74,.4);
}
[data-theme="rymden"] {
  --bg:#0a0f1f; --surface:#131a33; --surface-2:#1c2547; --text:#e8ecff; --muted:#8e9bc9; --border:#27325c;
  --accent:#818cf8; --ink:#0a0f1f; --accent-2:#22d3ee;
  --grad:linear-gradient(135deg,#22d3ee,#6366f1 55%,#a855f7);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 32px -14px rgba(99,102,241,.55);
  color-scheme:dark;
}
[data-theme="lava"] {
  --bg:#130c09; --surface:#211511; --surface-2:#2d1c16; --text:#fff1ea; --muted:#c29886; --border:#3c2820;
  --accent:#fb923c; --ink:#1a0c05; --accent-2:#facc15;
  --grad:linear-gradient(135deg,#facc15,#f97316 55%,#dc2626);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 32px -14px rgba(249,115,22,.5);
  color-scheme:dark;
}
[data-theme="turbo"] {
  --bg:#0c1016; --surface:#151b23; --surface-2:#1e2630; --text:#eaf2ff; --muted:#8b98a9; --border:#273241;
  --accent:#a3e635; --ink:#0c1016; --accent-2:#22d3ee;
  --grad:linear-gradient(135deg,#a3e635,#22d3ee);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 32px -14px rgba(163,230,53,.35);
  color-scheme:dark;
}

/* ---------- Bas ---------- */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; }
@media (min-width:1800px) { html { font-size:17.5px; } }
@media (min-width:2400px) { html { font-size:20px; } }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.45; transition:background .3s,color .3s; min-height:100dvh;
}
h1,h2,h3,h4,p { margin:0; }
h1 { font-size:1.6rem; font-weight:800; letter-spacing:-.02em; }
h2 { font-size:1.15rem; font-weight:800; letter-spacing:-.01em; }
h3 { font-size:1rem; font-weight:700; }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }
.grow { flex:1; min-width:0; }
.row { display:flex; align-items:center; gap:.75rem; }
.wrap { flex-wrap:wrap; }
.right { margin-left:auto; }
.ic { width:1.25em; height:1.25em; flex:none; }
.hide { display:none !important; }
.num { font-variant-numeric:tabular-nums; }

/* ---------- Skal ---------- */
.shell { display:grid; grid-template-columns:17rem 1fr; min-height:100dvh; }
.side {
  position:sticky; top:0; height:100dvh; padding:1.25rem 1rem; display:flex; flex-direction:column; gap:.25rem;
  background:var(--surface); border-right:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:.7rem; padding:.25rem .6rem 1.1rem; font-weight:800; font-size:1.25rem; letter-spacing:-.02em; }
.brand-logo { width:2.4rem; height:2.4rem; border-radius:.8rem; background:var(--grad); display:grid; place-items:center; font-size:1.3rem; box-shadow:var(--shadow); }
.nav-i { display:flex; align-items:center; gap:.8rem; padding:.7rem .8rem; border-radius:.9rem; color:var(--muted); font-weight:600; transition:.15s; }
.nav-i:hover { background:var(--surface-2); color:var(--text); }
.nav-i.on { background:var(--accent); color:var(--ink); box-shadow:var(--shadow); }
.nav-n { margin-left:auto; min-width:1.4rem; height:1.4rem; padding:0 .4rem; border-radius:1rem; display:grid; place-items:center; font-size:.75rem; font-weight:800; background:#ef4444; color:#fff; }
.side-sp { flex:1; }
.side-user { display:flex; align-items:center; gap:.7rem; padding:.7rem; border-radius:1rem; background:var(--surface-2); }
.main { min-width:0; display:flex; flex-direction:column; }
.top {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.9rem clamp(1rem,3vw,3rem); background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
}
.top-title { display:flex; flex-direction:column; min-width:0; }
.top-title small { color:var(--muted); font-weight:600; }
.top-tools { margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.page { width:100%; max-width:105rem; margin:0 auto; padding:1.5rem clamp(1rem,3vw,3rem) 6rem; display:flex; flex-direction:column; gap:1.25rem; animation:rise .3s ease; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.tabbar { display:none; }

@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  .side { display:none; }
  .top { padding:.7rem 1rem; }
  h1 { font-size:1.35rem; }
  .page { padding:1rem 1rem 7rem; }
  .tabbar {
    display:flex; position:fixed; z-index:30; left:0; right:0; bottom:0; justify-content:space-around; align-items:flex-end;
    padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--surface) 92%,transparent);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--border);
  }
  .tab { flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; padding:.4rem 0; font-size:.7rem; font-weight:700; color:var(--muted); position:relative; }
  .tab.on { color:var(--accent); }
  [data-theme="morkt"] .tab.on, [data-theme="glitter"] .tab.on { color:var(--text); }
  .tab .ic { width:1.5rem; height:1.5rem; }
  .tab-fab { flex:none; width:3.6rem; height:3.6rem; margin:-1.4rem .6rem 0; border-radius:50%; background:var(--grad); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow); border:4px solid var(--bg); }
  .tab-fab .ic { width:1.7rem; height:1.7rem; }
  .tab .nav-n { position:absolute; top:.1rem; left:55%; }
}

/* ---------- Kort, knappar, formulär ---------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:1.4rem; padding:1.25rem; box-shadow:var(--shadow); min-width:0; }
.card-h { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.card-h .sub { color:var(--muted); font-size:.85rem; font-weight:600; margin-left:auto; }
.grid { display:grid; gap:1.25rem; }
.g2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr)); }
.g3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr)); }
.kpis { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr)); }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.7rem 1.1rem; border-radius:.95rem; border:1px solid var(--border);
  background:var(--surface); font-weight:700; transition:.15s; white-space:nowrap;
}
.btn:hover { background:var(--surface-2); }
.btn:active { transform:scale(.97); }
.btn.primary { background:var(--accent); color:var(--ink); border-color:transparent; box-shadow:var(--shadow); }
.btn.primary:hover { filter:brightness(1.07); background:var(--accent); }
.btn.grad { background:var(--grad); color:#fff; border-color:transparent; box-shadow:var(--shadow); }
.btn.ok { background:#16a34a; color:#fff; border-color:transparent; }
.btn.danger { background:color-mix(in srgb,#ef4444 12%,var(--surface)); color:#dc2626; border-color:color-mix(in srgb,#ef4444 30%,var(--border)); }
.btn.ghost { background:transparent; }
.btn.sm { padding:.4rem .75rem; font-size:.85rem; border-radius:.75rem; }
.btn.block { width:100%; padding:.95rem; font-size:1.05rem; }
.btn[disabled] { opacity:.5; pointer-events:none; }
.icon-btn { width:2.5rem; height:2.5rem; border-radius:.85rem; border:1px solid var(--border); background:var(--surface); display:grid; place-items:center; }
.icon-btn:hover { background:var(--surface-2); }

.field { display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field > label, .lbl { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],select,textarea {
  width:100%; padding:.75rem .9rem; border-radius:.9rem; border:1.5px solid var(--border); background:var(--surface); outline:none; transition:.15s;
}
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent); }
textarea { resize:vertical; min-height:4.5rem; }
.fields { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr)); }

.chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip {
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .85rem; border-radius:2rem; border:1.5px solid var(--border);
  background:var(--surface); font-weight:700; font-size:.88rem; transition:.15s; white-space:nowrap;
}
.chip:hover { border-color:var(--accent-2); }
.chip.on { background:var(--accent); color:var(--ink); border-color:transparent; }
.scroll-x { overflow-x:auto; scrollbar-width:none; }
.scroll-x::-webkit-scrollbar { display:none; }

.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .6rem; border-radius:2rem; font-size:.75rem; font-weight:800; }
.badge.pending { background:color-mix(in srgb,#f59e0b 18%,var(--surface)); color:#b45309; }
.badge.approved { background:color-mix(in srgb,#16a34a 16%,var(--surface)); color:#15803d; }
.badge.rejected { background:color-mix(in srgb,#ef4444 15%,var(--surface)); color:#dc2626; }
.badge.paid { background:color-mix(in srgb,var(--accent) 16%,var(--surface)); color:var(--accent); }
[data-theme="morkt"] .badge.paid, [data-theme="glitter"] .badge.paid, [data-theme="turbo"] .badge.paid, [data-theme="lava"] .badge.paid, [data-theme="rymden"] .badge.paid { color:var(--text); }
[data-theme$="morkt"] .badge.pending, [data-theme="glitter"] .badge.pending, [data-theme="rymden"] .badge.pending, [data-theme="lava"] .badge.pending, [data-theme="turbo"] .badge.pending { color:#fbbf24; }
[data-theme="morkt"] .badge.approved, [data-theme="glitter"] .badge.approved, [data-theme="rymden"] .badge.approved, [data-theme="lava"] .badge.approved, [data-theme="turbo"] .badge.approved { color:#4ade80; }
[data-theme="morkt"] .badge.rejected, [data-theme="glitter"] .badge.rejected, [data-theme="rymden"] .badge.rejected, [data-theme="lava"] .badge.rejected, [data-theme="turbo"] .badge.rejected { color:#f87171; }

/* ---------- Avatar ---------- */
.av { width:2.5rem; height:2.5rem; border-radius:50%; background:var(--surface-2) center/cover no-repeat; display:inline-grid; place-items:center; font-size:1.35rem; flex:none; border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--border); }
.av.sm { width:1.6rem; height:1.6rem; font-size:.95rem; border-width:1px; }
.av.lg { width:7rem; height:7rem; font-size:3.6rem; }
.av.xl { width:min(40vw,9rem); height:min(40vw,9rem); font-size:4.6rem; }

/* ---------- Hero och KPI ---------- */
.hero { position:relative; overflow:hidden; border-radius:1.8rem; padding:1.6rem; background:var(--grad); color:#fff; box-shadow:var(--shadow); display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.hero::after { content:""; position:absolute; right:-4rem; top:-5rem; width:18rem; height:18rem; border-radius:50%; background:rgba(255,255,255,.14); }
.hero::before { content:""; position:absolute; right:6rem; bottom:-7rem; width:14rem; height:14rem; border-radius:50%; background:rgba(255,255,255,.1); }
.hero > * { position:relative; z-index:1; }
.hero h1 { font-size:clamp(1.5rem,3vw,2.3rem); }
.hero .big { font-size:clamp(2.2rem,5vw,3.6rem); font-weight:900; letter-spacing:-.03em; line-height:1.05; }
.hero .hero-sub { opacity:.9; font-weight:600; }
.hero .btn { background:rgba(255,255,255,.2); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(6px); }
.hero .btn:hover { background:rgba(255,255,255,.32); }
.hero .btn.solid { background:#fff; color:#111; border-color:#fff; }
.hero .ring-wrap { margin-left:auto; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:1.3rem; padding:1.05rem 1.1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.3rem; min-width:0; }
.kpi-top { display:flex; align-items:center; gap:.5rem; color:var(--muted); font-weight:700; font-size:.82rem; }
.kpi-ic { width:2rem; height:2rem; border-radius:.7rem; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 14%,var(--surface)); font-size:1rem; }
.kpi-v { font-size:1.75rem; font-weight:900; letter-spacing:-.02em; line-height:1.1; }
.kpi-s { color:var(--muted); font-size:.82rem; font-weight:600; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.delta { padding:.1rem .45rem; border-radius:1rem; font-weight:800; font-size:.75rem; }
.delta.up { background:color-mix(in srgb,#16a34a 16%,var(--surface)); color:#16a34a; }
.delta.down { background:color-mix(in srgb,#ef4444 14%,var(--surface)); color:#ef4444; }
.delta.flat { background:var(--surface-2); color:var(--muted); }
a.kpi:hover { transform:translateY(-2px); transition:.15s; }

.prog { display:flex; flex-direction:column; gap:.35rem; }
.prog-h { display:flex; justify-content:space-between; gap:1rem; font-weight:700; font-size:.92rem; }
.track { height:.7rem; border-radius:1rem; background:var(--surface-2); overflow:hidden; }
.fill { height:100%; border-radius:1rem; background:var(--grad); min-width:.35rem; transition:width .6s cubic-bezier(.2,.8,.2,1); }
.fill.good { background:#22c55e; } .fill.warn { background:#f59e0b; } .fill.bad { background:#ef4444; }
.prog-list { display:flex; flex-direction:column; gap:1.1rem; }
.ring { transform:rotate(-90deg); }
.ring .bg { stroke:rgba(128,128,128,.22); }
.ring .fg { stroke:currentColor; stroke-linecap:round; transition:stroke-dasharray .8s cubic-bezier(.2,.8,.2,1); }
.ring-box { position:relative; display:grid; place-items:center; }
.ring-box .ring-c { position:absolute; text-align:center; line-height:1.1; }
.ring-c b { font-size:1.5rem; font-weight:900; display:block; }
.ring-c span { font-size:.75rem; font-weight:700; opacity:.85; }

/* ---------- Diagram ---------- */
.bars { display:flex; align-items:flex-end; gap:clamp(2px,.5%,8px); height:13rem; padding-top:.5rem; border-bottom:1px solid var(--border); position:relative; }
.bars::before { content:attr(data-max); position:absolute; left:0; top:-.2rem; font-size:.7rem; color:var(--muted); font-weight:700; }
.bar { flex:1; min-width:0; height:100%; display:flex; flex-direction:column; justify-content:flex-end; position:relative; }
.bar i { display:block; width:100%; }
.bar i.a { background:var(--grad); border-radius:.4rem .4rem 0 0; }
.bar i.b { background:repeating-linear-gradient(45deg,color-mix(in srgb,var(--accent) 35%,var(--surface)),color-mix(in srgb,var(--accent) 35%,var(--surface)) 4px,var(--surface-2) 4px,var(--surface-2) 8px); border-radius:.4rem .4rem 0 0; }
.bar i.o { background:#f87171; border-radius:.4rem .4rem 0 0; }
.bar:hover i { filter:brightness(1.15); }
.bar[data-tip]:hover::after { content:attr(data-tip); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:var(--text); color:var(--bg); padding:.3rem .55rem; border-radius:.5rem; font-size:.75rem; font-weight:700; white-space:nowrap; z-index:5; pointer-events:none; }
.bar-labels { display:flex; gap:clamp(2px,.5%,8px); margin-top:.35rem; }
.bar-labels span { flex:1; min-width:0; text-align:center; font-size:.68rem; color:var(--muted); font-weight:700; overflow:hidden; white-space:nowrap; }
.legend { display:flex; gap:1rem; font-size:.78rem; color:var(--muted); font-weight:700; flex-wrap:wrap; }
.legend span::before { content:""; display:inline-block; width:.7rem; height:.7rem; border-radius:.25rem; margin-right:.35rem; vertical-align:-1px; background:var(--grad); }
.legend span.b::before { background:color-mix(in srgb,var(--accent) 35%,var(--surface-2)); }
.legend span.o::before { background:#f87171; }
.hbar { display:grid; grid-template-columns:minmax(0,11rem) 1fr auto; gap:.75rem; align-items:center; font-size:.9rem; font-weight:700; }
.hbar .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.empty { text-align:center; color:var(--muted); padding:2rem 1rem; font-weight:600; }
.empty .big-e { font-size:2.6rem; display:block; margin-bottom:.3rem; }

/* ---------- Datumväljare ---------- */
.range { display:flex; align-items:center; gap:.25rem; background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:.2rem; box-shadow:var(--shadow); }
.range .icon-btn { border:none; background:transparent; width:2.1rem; height:2.1rem; }
.range-btn { display:flex; align-items:center; gap:.5rem; padding:.4rem .7rem; border:none; background:transparent; font-weight:800; border-radius:.8rem; }
.range-btn small { display:block; color:var(--muted); font-weight:700; font-size:.68rem; line-height:1; text-align:left; }
.range-btn:hover { background:var(--surface-2); }
.pop-back { position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding:5rem 1rem 1rem; animation:fade .15s; }
@keyframes fade { from { opacity:0; } }
.pop { width:min(100%,30rem); background:var(--surface); border:1px solid var(--border); border-radius:1.5rem; padding:1.25rem; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:1rem; }

/* ---------- Jobb ---------- */
.jobs { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr)); }
.day-h { font-weight:800; color:var(--muted); font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; margin:.5rem 0 -.2rem; }
.job { background:var(--surface); border:1px solid var(--border); border-radius:1.3rem; padding:1rem; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:.75rem; border-left:5px solid var(--border); min-width:0; }
.job.st-pending { border-left-color:#f59e0b; } .job.st-approved { border-left-color:#22c55e; } .job.st-rejected { border-left-color:#ef4444; }
.job-head { display:flex; gap:.75rem; align-items:center; }
.emo { width:2.9rem; height:2.9rem; border-radius:1rem; background:var(--surface-2); display:grid; place-items:center; font-size:1.6rem; flex:none; }
.job h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.amt { text-align:right; font-weight:900; font-size:1.15rem; display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.job-note { background:var(--surface-2); border-radius:.8rem; padding:.55rem .75rem; font-size:.9rem; }
.job-reason { background:color-mix(in srgb,#ef4444 12%,var(--surface)); color:#dc2626; border-radius:.8rem; padding:.55rem .75rem; font-size:.9rem; font-weight:700; }
[data-theme="morkt"] .job-reason, [data-theme="glitter"] .job-reason, [data-theme="rymden"] .job-reason, [data-theme="lava"] .job-reason, [data-theme="turbo"] .job-reason { color:#f87171; }
.ph-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.ph { width:4.6rem; height:4.6rem; border-radius:.9rem; border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--border); background:var(--surface-2) center/cover no-repeat; position:relative; padding:0; overflow:hidden; }
.ph span { position:absolute; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); color:#fff; font-size:.62rem; font-weight:800; padding:.1rem 0; text-align:center; }
.job-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.sumbar { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }

/* ---------- Logga-formulär ---------- */
.split { display:grid; gap:1.25rem; grid-template-columns:minmax(0,1fr) 23rem; align-items:start; }
@media (max-width:1100px) { .split { grid-template-columns:1fr; } }
.sticky { position:sticky; top:5.5rem; }
@media (max-width:1100px) { .sticky { position:static; } }
.sec { display:flex; flex-direction:column; gap:.9rem; }
.sec + .sec { margin-top:1.5rem; padding-top:1.5rem; border-top:1px dashed var(--border); }
.sec h3 { display:flex; align-items:center; gap:.6rem; }
.step { width:1.7rem; height:1.7rem; border-radius:50%; background:var(--accent); color:var(--ink); display:grid; place-items:center; font-size:.85rem; font-weight:900; }
.tiles { display:grid; gap:.7rem; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); }
.tile { text-align:left; border:2px solid var(--border); background:var(--surface); border-radius:1.1rem; padding:.8rem; display:flex; flex-direction:column; gap:.2rem; transition:.15s; }
.tile:hover { border-color:var(--accent-2); transform:translateY(-1px); }
.tile.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--surface)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent); }
.tile .e { font-size:1.9rem; line-height:1.1; }
.tile b { font-size:.92rem; line-height:1.2; }
.tile span { color:var(--muted); font-weight:800; font-size:.85rem; }
.stepper { display:flex; align-items:center; gap:.5rem; }
.stepper b { min-width:2rem; text-align:center; font-size:1.2rem; }
.slots { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)); }
.slot { border:2px dashed var(--border); border-radius:1.2rem; padding:1rem; display:flex; flex-direction:column; gap:.75rem; background:color-mix(in srgb,var(--surface-2) 40%,var(--surface)); }
.slot-head { display:flex; justify-content:space-between; align-items:center; }
.thumbs { display:flex; gap:.5rem; flex-wrap:wrap; min-height:4.6rem; align-items:center; }
.thumbs .ph button { position:absolute; top:.2rem; right:.2rem; width:1.4rem; height:1.4rem; border-radius:50%; border:none; background:rgba(0,0,0,.65); color:#fff; display:grid; place-items:center; padding:0; }
.thumbs .ph button .ic { width:.8rem; height:.8rem; }
.spin { width:1.4rem; height:1.4rem; border-radius:50%; border:3px solid var(--border); border-top-color:var(--accent); animation:sp .7s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }
.total { font-size:2.4rem; font-weight:900; letter-spacing:-.03em; }
.note-box { font-size:.85rem; color:var(--muted); background:var(--surface-2); padding:.7rem .85rem; border-radius:.9rem; }

/* ---------- Kalender / värmekarta ---------- */
.cal-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.4rem; }
.cal-wd { text-align:center; font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase; padding-bottom:.2rem; }
.cell {
  aspect-ratio:1/.82; min-height:3.2rem; border-radius:.85rem; border:2px solid transparent; background:var(--surface-2); padding:.35rem .45rem;
  display:flex; flex-direction:column; justify-content:space-between; text-align:left; position:relative; transition:.12s;
}
.cell:hover { transform:scale(1.04); z-index:2; }
.cell .d { font-size:.78rem; font-weight:800; opacity:.85; }
.cell .v { font-size:.85rem; font-weight:900; align-self:flex-end; }
.cell.out { opacity:.28; pointer-events:none; }
.cell.today { border-color:var(--text); }
.cell.sel { box-shadow:0 0 0 3px var(--accent); }
.cell.inr::after { content:""; position:absolute; left:.4rem; right:.4rem; bottom:.2rem; height:3px; border-radius:2px; background:var(--accent); opacity:.55; }
.lv0 { background:var(--surface-2); }
.lv1 { background:color-mix(in srgb,var(--accent) 22%,var(--surface-2)); }
.lv2 { background:color-mix(in srgb,var(--accent) 45%,var(--surface-2)); }
.lv3 { background:color-mix(in srgb,var(--accent) 72%,var(--surface-2)); color:var(--ink); }
.lv4 { background:var(--accent); color:var(--ink); }
.year-scroll { overflow-x:auto; padding-bottom:.5rem; }
.year { display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); gap:3px; min-width:46rem; }
.year button { aspect-ratio:1; min-width:.7rem; border:none; border-radius:3px; padding:0; }
.year-months { display:grid; min-width:46rem; font-size:.7rem; color:var(--muted); font-weight:700; margin-bottom:.3rem; }
.hm { display:grid; gap:3px; }
.hm-row { display:grid; grid-template-columns:2.4rem repeat(var(--cols),1fr); gap:3px; align-items:center; }
.hm-row span { font-size:.7rem; color:var(--muted); font-weight:800; }
.hm-row i { aspect-ratio:1.4; border-radius:4px; }
.hm-scale { display:flex; align-items:center; gap:.3rem; font-size:.72rem; color:var(--muted); font-weight:700; }
.hm-scale i { width:1rem; height:1rem; border-radius:3px; display:block; }
.insights { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); }
.insight { background:var(--surface-2); border-radius:1rem; padding:.8rem; }
.insight b { display:block; font-size:1.15rem; font-weight:900; }
.insight span { font-size:.78rem; color:var(--muted); font-weight:700; }

/* ---------- Chatt ---------- */
.chat { display:flex; flex-direction:column; height:calc(100dvh - 11rem); min-height:26rem; padding:0; overflow:hidden; }
@media (max-width:900px) { .chat { height:calc(100dvh - 14rem); border-radius:1.2rem; } }
.msgs { flex:1; overflow-y:auto; padding:1.1rem; display:flex; flex-direction:column; gap:.5rem; scroll-behavior:smooth; }
.msg { display:flex; gap:.55rem; align-items:flex-end; max-width:min(100%,38rem); }
.msg.mine { align-self:flex-end; flex-direction:row-reverse; }
.bubble { background:var(--surface-2); padding:.55rem .85rem; border-radius:1.15rem 1.15rem 1.15rem .3rem; min-width:0; overflow-wrap:anywhere; }
.msg.mine .bubble { background:var(--accent); color:var(--ink); border-radius:1.15rem 1.15rem .3rem 1.15rem; }
.bubble .who { display:block; font-size:.72rem; font-weight:800; opacity:.7; }
.bubble time { display:block; font-size:.66rem; opacity:.6; text-align:right; margin-top:.1rem; }
.bubble p { white-space:pre-wrap; }
.sys-day { align-self:center; font-size:.72rem; font-weight:800; color:var(--muted); background:var(--surface-2); padding:.2rem .7rem; border-radius:1rem; margin:.4rem 0; }
.jobref { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; background:rgba(128,128,128,.16); border:none; border-radius:.8rem; padding:.4rem .6rem; margin:.25rem 0; font-size:.82rem; font-weight:700; }
.composer { display:flex; gap:.5rem; align-items:flex-end; padding:.8rem; border-top:1px solid var(--border); background:var(--surface); }
.composer textarea { min-height:2.8rem; max-height:8rem; padding:.7rem .9rem; border-radius:1.2rem; }
.attach-chip { display:flex; align-items:center; gap:.5rem; padding:.45rem .9rem; border-top:1px solid var(--border); font-size:.85rem; font-weight:700; background:var(--surface-2); }

/* ---------- Plånbok ---------- */
.bal-parts { display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr)); width:100%; margin-top:.4rem; }
.bal-part { background:rgba(255,255,255,.16); border-radius:1rem; padding:.65rem .8rem; backdrop-filter:blur(6px); }
.bal-part b { display:block; font-size:1.15rem; font-weight:900; }
.bal-part span { font-size:.74rem; font-weight:700; opacity:.9; }
.actions-row { display:flex; gap:.6rem; flex-wrap:wrap; }
.tx { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--border); }
.tx:last-child { border-bottom:none; }
.tx-amt { font-weight:900; font-variant-numeric:tabular-nums; }
.tx-amt.pos { color:#16a34a; } .tx-amt.neg { color:#ef4444; } .tx-amt.sav { color:var(--accent); }
[data-theme="morkt"] .tx-amt.sav, [data-theme="glitter"] .tx-amt.sav { color:var(--text); }
.goal { display:flex; gap:1rem; align-items:center; padding:.9rem; border:1px solid var(--border); border-radius:1.2rem; background:var(--surface); }
.goal + .goal { margin-top:.75rem; }
.goal-e { font-size:2rem; }
.cat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr)); gap:.5rem; }
.seg { display:flex; background:var(--surface-2); border-radius:1rem; padding:.25rem; gap:.25rem; }
.seg button { flex:1; border:none; background:transparent; border-radius:.8rem; padding:.55rem .6rem; font-weight:800; font-size:.9rem; }
.seg button.on { background:var(--surface); box-shadow:var(--shadow); }

/* ---------- Profil, teman, märken ---------- */
.profile-hero { display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; }
.emoji-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(2.8rem,1fr)); gap:.4rem; }
.emoji-grid button { aspect-ratio:1; border-radius:.85rem; border:2px solid var(--border); background:var(--surface); font-size:1.5rem; padding:0; }
.emoji-grid button.on { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); }
.theme-group { margin-bottom:1.2rem; }
.theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); gap:.9rem; }
.theme-card { border:3px solid transparent; border-radius:1.3rem; padding:0; background:none; text-align:left; transition:.15s; }
.theme-card:hover { transform:translateY(-2px); }
.theme-card.on { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent); }
.theme-prev { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:1.05rem; padding:.7rem; display:flex; flex-direction:column; gap:.45rem; }
.theme-prev .tp-hero { height:2.6rem; border-radius:.7rem; background:var(--grad); }
.theme-prev .tp-row { display:flex; gap:.35rem; }
.theme-prev .tp-row i { flex:1; height:1.1rem; border-radius:.4rem; background:var(--surface); border:1px solid var(--border); }
.theme-prev .tp-row i:first-child { background:var(--accent); border:none; }
.theme-prev .tp-name { font-weight:800; font-size:.88rem; display:flex; gap:.35rem; align-items:center; }
.badges { display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); }
.bdg { border:1px solid var(--border); border-radius:1.2rem; padding:.9rem .7rem; text-align:center; background:var(--surface); display:flex; flex-direction:column; gap:.3rem; align-items:center; }
.bdg .e { font-size:2.2rem; filter:grayscale(1); opacity:.4; }
.bdg.done { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border-color:var(--accent-2); }
.bdg.done .e { filter:none; opacity:1; }
.bdg b { font-size:.85rem; }
.bdg span { font-size:.72rem; color:var(--muted); font-weight:700; }
.bdg .track { width:100%; height:.4rem; }
.menu-list { display:flex; flex-direction:column; gap:.6rem; }
.menu-list a, .menu-list button { display:flex; align-items:center; gap:.9rem; padding:1rem; border-radius:1.1rem; background:var(--surface); border:1px solid var(--border); font-weight:700; text-align:left; width:100%; }

/* ---------- Inloggning ---------- */
.login { min-height:100dvh; display:grid; place-items:center; padding:1.5rem; background:var(--bg); position:relative; overflow:hidden; }
.login::before { content:""; position:absolute; inset:-20% -10% auto auto; width:60vmax; height:60vmax; border-radius:50%; background:var(--grad); opacity:.18; filter:blur(40px); }
.login-card { position:relative; width:min(100%,34rem); background:var(--surface); border:1px solid var(--border); border-radius:2rem; padding:2rem 1.5rem; box-shadow:var(--shadow); text-align:center; display:flex; flex-direction:column; gap:1.3rem; align-items:center; }
.login-users { display:grid; grid-template-columns:repeat(auto-fit,minmax(6.5rem,1fr)); gap:.8rem; width:100%; }
.lu { border:2px solid var(--border); background:var(--surface); border-radius:1.4rem; padding:1rem .5rem; display:flex; flex-direction:column; align-items:center; gap:.4rem; font-weight:800; transition:.15s; }
.lu:hover { transform:translateY(-3px); border-color:var(--accent-2); }
.lu small { color:var(--muted); font-weight:700; }
.lu .av { width:3.8rem; height:3.8rem; font-size:2rem; }
.dots { display:flex; gap:.8rem; }
.dots i { width:1rem; height:1rem; border-radius:50%; border:2px solid var(--accent); transition:.15s; }
.dots i.f { background:var(--accent); transform:scale(1.15); }
.dots.err { animation:shake .4s; }
@keyframes shake { 25% { transform:translateX(-8px); } 75% { transform:translateX(8px); } }
.pad { display:grid; grid-template-columns:repeat(3,4.4rem); gap:.7rem; }
.pad button { height:4.4rem; border-radius:50%; border:1px solid var(--border); background:var(--surface-2); font-size:1.5rem; font-weight:800; }
.pad button:active { background:var(--accent); color:var(--ink); }

/* ---------- Modal, toast, lightbox ---------- */
.modal-back { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:1rem; animation:fade .15s; overflow-y:auto; }
.modal { width:min(100%,32rem); max-height:92dvh; overflow-y:auto; background:var(--surface); border:1px solid var(--border); border-radius:1.7rem; padding:1.4rem; box-shadow:0 30px 80px -20px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:1.1rem; animation:rise .2s; }
.modal.wide { width:min(100%,60rem); }
@media (max-width:600px) { .modal-back { align-items:flex-end; padding:0; } .modal { border-radius:1.7rem 1.7rem 0 0; max-height:94dvh; } }
.modal-h { display:flex; align-items:center; gap:.6rem; }
.lightbox { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); }
.lightbox figure { margin:0; display:flex; flex-direction:column; gap:.4rem; }
.lightbox figcaption { font-weight:800; font-size:.85rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.lightbox img { width:100%; border-radius:1rem; display:block; background:var(--surface-2); }
#toasts { position:fixed; z-index:100; left:50%; transform:translateX(-50%); bottom:6rem; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; width:min(94vw,26rem); }
@media (min-width:901px) { #toasts { bottom:2rem; } }
.toast { background:var(--text); color:var(--bg); padding:.75rem 1.1rem; border-radius:1rem; font-weight:700; box-shadow:0 12px 30px rgba(0,0,0,.35); animation:rise .25s; }
.toast.err { background:#dc2626; color:#fff; }
.banner { display:flex; align-items:center; gap:.8rem; padding:.9rem 1.1rem; border-radius:1.2rem; background:color-mix(in srgb,#f59e0b 16%,var(--surface)); border:1px solid color-mix(in srgb,#f59e0b 40%,var(--border)); font-weight:700; }
.banner.info { background:color-mix(in srgb,var(--accent) 10%,var(--surface)); border-color:var(--accent-2); }
.hr { height:1px; background:var(--border); border:none; margin:0; }

/* Mobil: verktygsraden (personfilter + datumväljare) ska aldrig sticka ut */
@media (max-width:900px) {
  .top-tools { margin-left:0; width:100%; justify-content:space-between; flex-wrap:wrap; }
  .top-tools > .chips { flex:1 1 100%; max-width:100%; }
  .range { margin-left:auto; }
}