/* AboveSeven brand: lime accent, warm neutrals, Inter/Poppins. */
:root{
  --bg:#F6F6F6; --card:#FFFFFF; --fg:#2D2D2D; --fg-soft:#4A4A4A; --muted:#ACA79E;
  --border:#E8E8E8; --accent:#E7FE65; --accent-fg:#2D2D2D; --orange:#F8741A; --olive:#787742;
  --purple:#9577D4; --rose:#C6ACAC; --rose-dark:#9D8585; --green:#3E7A3E; --red:#D64545; --blue:#3B5BDB;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1C1C1B; --card:#262625; --fg:#F2F2EE; --fg-soft:#C9C9C4; --muted:#8C8A83; --border:#343432;
    --accent:#E7FE65; --accent-fg:#2D2D2D; --orange:#FF8A3D; --olive:#9FA05E;
    --purple:#B39BE8; --rose:#D4BDBD; --rose-dark:#B09A9A; --green:#7CBF7C; --red:#F07070; --blue:#8FA3F5;
  }
  :root:not([data-theme="light"]) .logo{filter:invert(1)}
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--fg-soft);font-family:"Inter",-apple-system,"Segoe UI",sans-serif;font-size:15.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--fg)}
h1,h2,h3,.wordmark{font-family:"Poppins",-apple-system,"Segoe UI",sans-serif;font-weight:700;color:var(--fg);letter-spacing:-.01em;margin:0}
h1{font-size:clamp(28px,4vw,38px);line-height:1.05;margin-bottom:6px}
h2{font-size:24px;line-height:1.15;margin:34px 0 12px;font-weight:600}
h3{font-size:19px;font-weight:600;margin:0 0 6px}
.lbl{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.meta{font-family:inherit;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.topnav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:18px 24px 6px;flex-wrap:wrap}
.topnav .wordmark{font-size:26px;text-decoration:none;display:inline-flex;align-items:center}
.logo{height:22px;width:auto;display:block}
.topnav .links{display:flex;gap:4px;flex-wrap:wrap}
.topnav .links a{font-family:inherit;font-size:14px;font-weight:600;text-decoration:none;padding:7px 13px;border-radius:999px;color:var(--fg-soft)}
.topnav .links a.on{background:var(--accent);color:var(--accent-fg)}
.topnav .links a.muted{color:var(--muted)}
.topnav .links a:hover:not(.on){background:var(--border)}
.page{max-width:1100px;margin:0 auto;padding:18px 24px 80px}
@media (max-width:680px){.page,.topnav{padding-left:16px;padding-right:16px}}
.card{background:var(--card);border-radius:12px;padding:18px 20px;border:1px solid var(--border)}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tile{border-radius:12px;padding:16px 18px;color:var(--fg)}
.tile.marigold{background:var(--accent)}.tile.peri{background:var(--purple);color:#fff}.tile.blush{background:var(--rose)}.tile.olive{background:var(--olive);color:#fff}
.tile .big{font-family:"Poppins",sans-serif;font-size:36px;font-weight:700;line-height:1}
/* Data tables sit on their own white surface: the page background is warm grey,
   which makes a borderless table look washed out. border-collapse:separate keeps
   the rounded corners working without overflow:hidden, which would break the
   sticky header row. */
table.list{width:100%;border-collapse:separate;border-spacing:0;font-size:15.5px;
  background:var(--card);border:1px solid var(--border);border-radius:12px}
table.list th{text-align:left;font-family:inherit;font-size:12px;font-weight:700;color:var(--muted);padding:9px 10px;border-bottom:1.5px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:2;background:var(--card)}
table.list td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:top;background:var(--card)}
table.list tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--fg) 3.5%, var(--card))}
table.list tbody tr:last-child td{border-bottom:none}
table.list tr:hover td{background:color-mix(in srgb, var(--accent) 26%, var(--card))}
/* The name column stays put when the table is scrolled sideways: each cell
   already carries its own opaque background (zebra/hover), so rows slide under
   it cleanly. The header corner cell is sticky both ways, hence the higher
   z-index. */
table.list th:first-child,table.list td:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--border)}
table.list th:first-child{z-index:3}
table.list thead tr:first-child th:first-child{border-top-left-radius:12px}
table.list thead tr:first-child th:last-child{border-top-right-radius:12px}
table.list tbody tr:last-child td:first-child{border-bottom-left-radius:12px}
table.list tbody tr:last-child td:last-child{border-bottom-right-radius:12px}
/* Contact type: one monochrome glyph per type, so the column scans fast without
   turning every row into a colour chart. Only "Kund" gets emphasis. */
td .type{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
td .type .icon{width:14px;height:14px;color:var(--muted);flex:none}
td .type.is-customer{font-weight:600;color:var(--fg)}
td .type.is-customer .icon{color:var(--olive)}
table.list a{text-decoration:none}
table.list a:hover{text-decoration:underline}
.pill{display:inline-block;font-family:inherit;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:999px;border:1.5px solid var(--border);color:var(--fg-soft);white-space:nowrap}
.pill.prio-A{background:var(--fg);border-color:var(--fg);color:#fff}
.pill.prio-B{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.pill.status-Aktiv,.pill.status-I\ dialog{background:color-mix(in srgb, var(--purple) 25%, transparent);border-color:var(--purple);color:var(--fg)}
.pill.status-Vilande,.pill.status-Inte\ aktuell{color:var(--muted)}
.pill.warn{background:var(--orange);border-color:var(--orange);color:#fff}
.days.red{color:var(--orange);font-weight:700}
.btn,.btn-ghost{font-family:inherit;border-radius:999px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;transition:background .15s,color .15s,border-color .15s}
.btn{background:var(--fg);border:1.5px solid var(--fg);padding:8px 16px;color:#fff}
.btn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn-ghost{background:none;border:1.5px solid var(--border);padding:7px 14px;color:var(--fg)}
.btn-ghost:hover{background:var(--border);color:var(--fg)}
.btn.small,.btn-ghost.small{font-size:12.5px;padding:4px 11px}
input[type=text],input[type=search],input[type=date],input[type=datetime-local],input[type=email],input[type=url],select,textarea{font-family:inherit;font-size:16px;color:var(--fg);background:var(--card);border:1.5px solid var(--border);border-radius:8px;padding:8px 13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)}
form.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 18px}
form.filters select,form.filters input{font-size:14.5px;padding:6px 11px;border-radius:999px}
.msgs{margin-bottom:14px}.msg{background:var(--accent);border-radius:14px;padding:10px 16px;color:var(--accent-fg)}
.empty{color:var(--muted);font-style:italic}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{padding:12px 0;border-top:1px solid var(--border);display:grid;grid-template-columns:110px 1fr;gap:12px}
.timeline li:first-child{border-top:0}
.todo{display:flex;align-items:flex-start;gap:11px;padding:6px 0}
.tick{flex:none;width:22px;height:22px;margin-top:3px;border-radius:999px;border:1.8px solid var(--muted);background:none;cursor:pointer;padding:0}
.tick:hover{border-color:var(--fg)}
.todo.done .tick{background:var(--fg);border-color:var(--fg)}
.todo.done .t{color:var(--muted);text-decoration:line-through}
.todo .t{flex:1;color:var(--fg)}
.todo.sub{margin-left:32px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--border)}
.gallery figcaption{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.3}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ok{color:var(--green)}.fail{color:var(--red)}

/* Utilities shared with the board */
.icon{width:16px;height:16px;vertical-align:-3px;stroke-width:2}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1.5px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer}
.icon-btn:hover{background:var(--border)}
.icon-btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.avatar{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--fg);color:#fff;font-family:"Inter",sans-serif;font-size:11px;font-weight:700}
.avatar.maria{background:var(--purple)}
.avatar.marcus{background:var(--olive)}
.avatar.both{background:var(--fg)}
.avatar{position:relative;overflow:hidden;flex:none}
.avatar.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:999px;background:inherit}
.avatar-pair{display:inline-flex;align-items:center}
.avatar-pair .avatar + .avatar{margin-left:-7px;box-shadow:0 0 0 2px var(--card)}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;background:var(--dot, var(--muted))}
.toast-stack{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:1000}
.toast{background:var(--fg);color:#fff;padding:10px 14px;border-radius:10px;font-size:14px}
.toast.error{background:var(--orange)}
.toast.ok{background:var(--accent);color:var(--accent-fg)}