/* Warehouze HQ. Tokens fra Warehouze Platform UI Guide. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400..800&family=Inter:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root {
  --ink: #0D0D0B; --bar: #14130F; --body: #2A2A26; --muted: #6E6E68; --faint: #8A8780;
  --surface: #FFFFFF; --paper: #F4F2EC; --border: #E7E4DC; --divider: #EFEDE7;
  --accent: #FF5436; --accent-dn: #E03A1C;
  --danger: #C13520; --danger-bg: #FBEAE6;
  --attention: #B23A1C; --attention-bg: #FEF4EF;
  --success: #1F7A4D; --success-bg: #E6F4EC;
  --warning: #9A7B12; --warning-bg: #FBF6E9;
  --pop: cubic-bezier(.2,.9,.3,1.2);
  --shadow-rest: 0 1px 2px rgba(20,19,15,.06);
  --shadow-lift: 0 4px 10px rgba(20,19,15,.10);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body { background: var(--paper); color: var(--body); font: 14px/1.45 'Inter', system-ui, sans-serif; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: 'Space Mono', monospace; }
.label { font: 700 10px/1 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
h1, h2, h3, .display { font-family: 'Bricolage Grotesque', sans-serif; color: var(--ink); }
.num { font-family: 'Space Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---------- topbar ---------- */
.topbar { height: 62px; background: var(--bar); display: flex; align-items: center; gap: 24px; padding: 0 20px; position: sticky; top: 0; z-index: 40; }
.topbar .logo { font: 700 17px 'Bricolage Grotesque', sans-serif; color: #fff; letter-spacing: -.02em; }
.topbar .logo span { color: var(--accent); }
.topbar nav { display: flex; gap: 6px; }
.topbar nav button { background: none; border: 0; color: rgba(255,255,255,.66); padding: 8px 14px; border-radius: 999px; transition: color .12s, background .12s; font-weight: 500; }
.topbar nav button:hover { color: #fff; }
.topbar nav button.active { background: var(--paper); color: var(--ink); }
.topbar nav button .count { background: var(--accent); color: #fff; border-radius: 999px; font: 700 10px/1 'Space Mono', monospace; padding: 3px 7px; margin-left: 6px; vertical-align: 1px; }
.topbar .spacer { flex: 1; }
.avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 700 11px 'Space Mono', monospace; flex: none; }
.avatar.accent { background: var(--accent); color: #fff; }
.avatar.empty { background: transparent; border: 1px dashed rgba(255,255,255,.35); color: rgba(255,255,255,.5); }
.userbtn { background: none; border: 0; display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.66); }
.usermenu { position: absolute; right: 16px; top: 56px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lift); padding: 6px; min-width: 190px; z-index: 60; }
.usermenu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 9px 12px; border-radius: 9px; }
.usermenu button:hover { background: var(--paper); }
.usermenu .who { padding: 9px 12px; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }

/* ---------- filterbar ---------- */
.filterbar { display: flex; gap: 10px; align-items: center; padding: 14px 20px; flex-wrap: wrap; }
.filterbar input[type=search] { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; width: 240px; font: inherit; }
.filterbar input[type=search]:focus { border-color: var(--accent); outline: none; }
.chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 7px 13px; color: var(--body); transition: all .12s; font-size: 13px; }
.chip:hover { border-color: var(--faint); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ghost { background: none; border: 0; color: var(--muted); padding: 7px 10px; border-radius: 8px; }
.ghost:hover { background: var(--divider); color: var(--ink); }
.btn { background: var(--accent); border: 0; color: #fff; font-weight: 600; padding: 9px 16px; border-radius: 10px; transition: background .12s; }
.btn:hover { background: var(--accent-dn); }
.btn.ink { background: var(--ink); }
.btn.ink:hover { background: #2d2b27; }

/* ---------- board ---------- */
.board { display: flex; gap: 14px; padding: 4px 20px 24px; overflow-x: auto; align-items: flex-start; min-height: calc(100vh - 140px); }
.col { min-width: 264px; width: 264px; flex: none; }
.colhead { display: flex; align-items: baseline; gap: 8px; padding: 6px 4px 10px; position: sticky; top: 0; }
.colhead .label { color: var(--muted); }
.colhead .cnt { font: 700 10px/1 'Space Mono', monospace; background: var(--divider); color: var(--muted); padding: 3px 8px; border-radius: 999px; }
.colhead .vol { margin-left: auto; font: 400 10px 'Space Mono', monospace; color: var(--faint); }
.collist { display: flex; flex-direction: column; gap: 8px; min-height: 60px; border-radius: 14px; transition: background .12s; padding: 2px; }
.collist.dragover { background: var(--divider); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 12px 10px; box-shadow: var(--shadow-rest); cursor: grab; transition: box-shadow .12s, border-color .12s, transform .12s; }
.card:hover { box-shadow: var(--shadow-lift); border-color: #d5d1c6; }
.card.dragging { opacity: .45; }
.card.won { border-left: 3px solid var(--success); }
.card.lost { opacity: .6; }
.card .toprow { display: flex; align-items: flex-start; gap: 8px; }
.card .name { font: 600 14px 'Bricolage Grotesque', sans-serif; color: var(--ink); flex: 1; }
.card .ext { color: var(--faint); text-decoration: none; flex: none; padding: 2px; border-radius: 6px; }
.card .ext:hover { color: var(--accent); background: var(--paper); }
.pill { display: inline-block; font: 700 10px/1 'Space Mono', monospace; letter-spacing: .04em; padding: 4px 9px; border-radius: 999px; }
.pill.core { background: var(--success-bg); color: var(--success); }
.pill.over { background: var(--paper); color: var(--muted); }
.pill.under { background: var(--warning-bg); color: var(--warning); }
.pill.na { background: var(--divider); color: var(--faint); }
.pill.danger { background: var(--danger-bg); color: var(--danger); }
.card .est { font: 700 13px 'Space Mono', monospace; color: var(--ink); font-variant-numeric: tabular-nums; }
.card .est small { font-weight: 400; color: var(--faint); font-size: 10px; }
.card .meta { color: var(--muted); font-size: 12px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .foot { display: flex; align-items: center; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--divider); }
.card .foot .avatar { width: 24px; height: 24px; font-size: 9px; background: var(--paper); border: 1px solid var(--border); }
.card .foot .icons { color: var(--faint); display: flex; gap: 6px; }
.card .foot .age { margin-left: auto; font: 400 10px 'Space Mono', monospace; color: var(--faint); }
.card .midrow { display: flex; align-items: center; gap: 8px; margin-top: 7px; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(13,13,11,.44); backdrop-filter: blur(3px); z-index: 50; opacity: 0; transition: opacity .2s; }
.scrim.show { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 94vw; background: var(--surface); z-index: 55; border-radius: 22px 0 0 22px; box-shadow: -12px 0 34px rgba(20,19,15,.18); transform: translateX(102%); transition: transform .28s var(--pop); display: flex; flex-direction: column; }
.drawer.show { transform: none; }
.drawer header { padding: 22px 24px 14px; border-bottom: 1px solid var(--divider); }
.drawer header .row1 { display: flex; align-items: center; gap: 10px; }
.drawer header h2 { font-size: 20px; flex: 1; }
.drawer header .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.drawer .close { background: none; border: 0; color: var(--muted); font-size: 18px; padding: 4px 8px; border-radius: 8px; }
.drawer .close:hover { background: var(--paper); color: var(--ink); }
.drawer .body { overflow-y: auto; flex: 1; padding: 18px 24px; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 18px; }
.fgrid .f .label { display: block; margin-bottom: 3px; }
.fgrid .f .v { color: var(--ink); font-size: 13px; }
.fgrid .f .v.num { font-size: 13px; }
.contact { background: var(--paper); border-radius: 14px; padding: 14px; margin-bottom: 18px; }
.contact .line { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 13px; }
.contact a { color: var(--ink); }
.seg { display: flex; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 3px; margin: 6px 0 16px; flex-wrap: wrap; }
.seg button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 7px 4px; font-size: 11px; color: var(--muted); transition: all .2s; white-space: nowrap; }
.seg button.on { background: var(--ink); color: #fff; }
select.owner { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; background: var(--surface); margin: 6px 0 16px; }
.notes .item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); }
.notes .item .avatar { width: 26px; height: 26px; font-size: 9px; background: var(--paper); border: 1px solid var(--border); flex: none; }
.notes .item .txt { font-size: 13px; }
.notes .item .when { font: 400 10px 'Space Mono', monospace; color: var(--faint); margin-top: 2px; }
.notes .item.sys .txt { color: var(--muted); font-style: italic; }
.noteform { display: flex; gap: 8px; margin: 10px 0 16px; }
.noteform input { flex: 1; border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; }
.noteform input:focus { border-color: var(--accent); outline: none; }

/* ---------- dashboard ---------- */
.dash { padding: 20px; max-width: 1080px; margin: 0 auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-rest); }
.kpi .n { font: 700 30px 'Bricolage Grotesque', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 6px; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-rest); margin-bottom: 20px; }
.panel h3 { font-size: 15px; margin-bottom: 12px; }
table.stats { width: 100%; border-collapse: collapse; font-size: 13px; }
table.stats th { text-align: left; font: 700 10px 'Space Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 8px 10px; border-bottom: 1px solid var(--border); }
table.stats td { padding: 10px; border-bottom: 1px solid var(--divider); }
table.stats td.num, table.stats th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: 'Space Mono', monospace; }
.funnelrow { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.funnelrow .label { width: 90px; flex: none; }
.funnelrow .track { flex: 1; background: var(--divider); border-radius: 999px; height: 20px; overflow: hidden; }
.funnelrow .fill { height: 100%; background: var(--accent); border-radius: 999px; min-width: 2px; transition: width .4s var(--pop); }
.funnelrow .n { width: 46px; text-align: right; }

/* ---------- users ---------- */
.userspage { padding: 20px; max-width: 760px; margin: 0 auto; }
.uform { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.uform input, .uform select { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; font: inherit; background: var(--surface); }
.uform input:focus { border-color: var(--accent); outline: none; }

/* ---------- drawer edit mode ---------- */
.editgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.editgrid .f .label { display: block; margin-bottom: 5px; }
.editgrid input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font: inherit; background: var(--surface); }
.editgrid input:focus { border-color: var(--accent); outline: none; }
.editactions { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 8px; }
@media (max-width: 700px) { .editgrid { grid-template-columns: 1fr; } }

/* ---------- login ---------- */
.loginwrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.logincard { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lift); padding: 34px; width: 360px; }
.logincard h1 { font-size: 22px; margin-bottom: 2px; }
.logincard .sub { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.logincard .f { margin-bottom: 14px; }
.logincard .f .label { display: block; margin-bottom: 6px; }
.logincard input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px; font: inherit; }
.logincard input:focus { border-color: var(--accent); outline: none; }
.logincard .btn { width: 100%; padding: 12px; margin-top: 6px; }
.loginerr { background: var(--danger-bg); color: var(--danger); border-radius: 999px; padding: 8px 14px; font-size: 12px; margin-bottom: 14px; display: none; }

.pop { animation: pop .2s var(--pop); }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.empty { color: var(--faint); text-align: center; padding: 30px 10px; font-size: 13px; }
@media (max-width: 700px) { .drawer { width: 100vw; border-radius: 0; } .fgrid { grid-template-columns: 1fr; } }