/* Retos back office. Same tokens as retos.lt and the Klientų zona; denser. */
:root{
  --bg:#faf9f5; --surface:#fdfcf9; --surface-warm:#f3f1ea; --text:#16150f; --muted:#5c574c;
  --border:#e7e3d8; --border-strong:#d6d0c1; --accent:#4338ca; --accent-strong:#3730a3; --accent-tint:#eef0fe;
  --danger:#9b2c1f; --danger-tint:#f7e6e2; --ok:#1d6b45; --ok-tint:#e3f1e8; --warn:#8a5a00; --warn-tint:#fbf0d9;
  --r-sm:5px; --r-md:8px; --r-lg:12px; --panel-w:560px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;font-weight:600;letter-spacing:-.01em}
a{color:var(--accent)}
.muted{color:var(--muted)} .sm{font-size:12.5px} .strong{font-weight:600} .mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12.5px}

/* Bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:0 24px;min-height:58px;background:var(--bg);border-bottom:1px solid var(--border);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--text)}
.brand .wm{font-family:"Space Grotesk",sans-serif;font-weight:600;font-size:16px;letter-spacing:-.02em}
.brand .tag{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);background:var(--accent-tint);padding:3px 7px;border-radius:var(--r-sm)}
.tabs{display:flex;gap:2px;flex:1;flex-wrap:wrap}
.tabs a{display:inline-flex;align-items:center;gap:6px;min-height:58px;padding:0 12px;color:var(--muted);text-decoration:none;font-weight:500;border-bottom:2px solid transparent}
.tabs a:hover{color:var(--text)}
.tabs a.on{color:var(--text);border-bottom-color:var(--accent)}
.count:not(:empty){background:var(--danger);color:#fff;font-size:11px;font-weight:600;border-radius:999px;padding:0 6px;line-height:18px}
.who{display:flex;align-items:center;gap:12px}
.who a{text-decoration:none}

/* View */
.view{padding:28px 24px 64px;max-width:1240px;transition:margin-right .2s ease}
body.has-panel .view{margin-right:var(--panel-w)}
.view-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.view-head h1{font-size:24px}
.view-head p{margin-top:2px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar input[type=search]{width:300px;max-width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:13px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);border-radius:999px;padding:5px 11px;cursor:pointer;min-height:32px}
.chip .n{color:var(--muted);font-variant-numeric:tabular-nums}
.chip.on{background:var(--text);border-color:var(--text);color:#fff}
.chip.on .n{color:#cfcabd}

/* Buttons + inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border-radius:var(--r-md);border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);font:inherit;font-weight:500;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--text)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-strong);border-color:var(--accent-strong)}
.btn.ghost{background:transparent}
.btn.sm{min-height:30px;padding:0 10px;font-size:12.5px}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger)}
.btn.wide{width:100%;margin-top:18px;min-height:44px}
.btn[disabled]{opacity:.55;cursor:progress}
input,select,textarea{font:inherit;font-size:14px;color:var(--text);background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:8px 10px;min-height:38px;width:100%}
textarea{resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
:focus-visible{outline:3px solid #a5abf3;outline-offset:2px}
input[disabled],select[disabled],textarea[disabled]{background:var(--surface-warm);color:var(--muted)}
input[type=checkbox]{width:18px;min-height:18px;height:18px;accent-color:var(--accent)}
.check{display:flex;align-items:center;gap:8px;margin:12px 0}

/* Tables */
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
table.grid{width:100%;border-collapse:collapse}
.grid th{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface-warm)}
.grid td{padding:11px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.grid tbody tr:last-child td{border-bottom:0}
.grid tbody tr[tabindex]{cursor:pointer}
.grid tbody tr[tabindex]:hover{background:var(--accent-tint)}
.grid td.src{max-width:220px}
.grid th,.grid td.nowrap{white-space:nowrap}
body.has-panel .grid td.src,body.has-panel .grid th.src{display:none}
.overdue{color:var(--danger);font-weight:600}
.empty{padding:28px;color:var(--muted);text-align:center}

/* Pills: stage hue only where it carries meaning (won green, lost red), the rest neutral/indigo */
.pill{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-warm);color:var(--muted);white-space:nowrap}
.st-new{background:var(--accent-tint);color:var(--accent-strong)}
.st-contacted,.st-meeting,.st-proposal{background:#e9e6dc;color:var(--text)}
.st-won,.mem-active{background:var(--ok-tint);color:var(--ok)}
.st-lost,.mem-disabled{background:var(--danger-tint);color:var(--danger)}
.mem-invited{background:var(--warn-tint);color:var(--warn)}
.pill.ev{background:var(--surface-warm);color:var(--text);font-weight:500}

/* Cards and inline forms */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;margin-bottom:16px}
.card h3{font-size:15px;margin:4px 0 6px}
.card h3 + p{margin-bottom:10px}
.settings textarea{margin:6px 0 10px}
.settings input[name=known_nets]{margin-bottom:14px}
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form input{flex:1 1 180px;width:auto}
h3{font-size:15px;margin:22px 0 10px}

/* Skeleton */
.skeleton{padding:14px}
.sk-row{height:16px;border-radius:4px;margin:12px 0;background:linear-gradient(90deg,#efece4 0,#f6f4ee 40%,#efece4 80%);background-size:300% 100%;animation:sk 1.4s ease infinite}
.sk-row:nth-child(3n){width:70%} .sk-row:nth-child(3n+1){width:90%}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.sk-row{animation:none}.view{transition:none}}

/* Panel (client record) */
.panel{position:fixed;top:58px;right:0;bottom:0;width:var(--panel-w);max-width:100vw;background:var(--surface);border-left:1px solid var(--border);
  overflow-y:auto;padding:22px 24px 40px;z-index:4;box-shadow:-12px 0 30px -18px rgba(22,21,15,.25)}
.phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.phead h2{font-size:21px}
.pform{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.fld label,.invite label{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-bottom:4px}
.fld.full,.pform .full{grid-column:1 / -1}
.psec{padding:16px 0;border-bottom:1px solid var(--border)}
.psec h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-family:Inter,sans-serif;font-weight:600}
.row-form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.row-form input:not([type=file]){flex:1 1 160px;width:auto}
.row-form input[type=date]{flex:0 0 150px}
.row-form input[type=file]{flex:1 1 200px;width:auto;padding:6px}
.tasks{list-style:none}
.tasks li{display:flex;gap:10px;align-items:center;padding:6px 0}
.tasks li > span:first-of-type{flex:1}
.tasks li.done span{color:var(--muted);text-decoration:line-through}
.tasks .due{font-variant-numeric:tabular-nums;color:var(--muted);font-size:12.5px}
.tasks .due.overdue{color:var(--danger)}
.tasks.big{padding:6px 16px}
.tasks.big li{border-bottom:1px solid var(--border);padding:12px 0;gap:14px}
.tasks.big li:last-child{border-bottom:0}
.tasks.big a{min-width:180px}
.docs{list-style:none}
.docs li{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.table-wrap .docs{padding:4px 16px}
.docs li:last-child{border-bottom:0}
.share-out{grid-column:1 / -1}
.invite{margin-top:10px;display:flex;flex-direction:column;gap:8px;background:var(--accent-tint);border-radius:var(--r-md);padding:12px}
.invite textarea{background:#fff}
.note-form{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-bottom:12px}
.timeline{list-style:none}
.timeline li{padding:9px 0;border-top:1px solid var(--border)}
.timeline .meta{font-size:11.5px;color:var(--muted)}
.timeline .txt{white-space:pre-wrap;overflow-wrap:anywhere}
.danger-zone{border-bottom:0}

/* Toast */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10;padding:11px 16px;border-radius:var(--r-md);background:var(--text);color:#fff;font-weight:500;max-width:min(560px,92vw)}
.toast.err{background:var(--danger)}

/* Sign-in + 2FA pages */
.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{width:min(380px,100%);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px}
.auth-card h1{font-size:22px;margin:16px 0 2px}
.auth-card h2{font-size:16px;margin-bottom:6px}
.auth-card .sub,.auth-card p{color:var(--muted);font-size:13.5px}
.auth-card label{display:block;font-size:12.5px;font-weight:500;margin:14px 0 5px}
.auth-card .check{font-weight:400}
.auth-card .brand .wm{font-size:16px}
.code-input{letter-spacing:.3em;text-align:center}
.err{background:var(--danger-tint);color:var(--danger);font-size:13px;padding:9px 12px;border-radius:var(--r-md);margin-top:14px}
.ok{background:var(--ok-tint);color:var(--ok);font-size:13px;padding:9px 12px;border-radius:var(--r-md);margin-top:12px}
.wrap-2fa{width:min(460px,100%);display:flex;flex-direction:column;gap:16px}
.wrap-2fa .auth-card{width:100%}
.key{font-family:"JetBrains Mono",monospace;font-size:14px;word-break:break-all;background:#fff;border:1px dashed var(--border-strong);border-radius:var(--r-md);padding:12px;margin-top:8px;user-select:all}
.state{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;margin-bottom:10px}
.state.on{background:var(--ok-tint);color:var(--ok)} .state.off{background:var(--accent-tint);color:var(--accent-strong)}
.dev{list-style:none;margin-top:10px} .dev li{border-top:1px solid var(--border);padding:8px 0;font-size:12.5px;color:var(--muted)}
a.back,form.back{display:block;text-align:center;font-size:13px;color:var(--muted)}
ol{margin:12px 0 4px 18px;font-size:13px;color:var(--muted);line-height:1.7}

@media (max-width:1100px){ body.has-panel .view{margin-right:0} .panel{width:min(var(--panel-w),100vw)} }
@media (max-width:640px){
  .bar{padding:0 14px;gap:8px}
  .tabs a{min-height:44px;padding:0 9px}
  .view{padding:20px 14px 48px}
  .pform{grid-template-columns:1fr}
  .panel{top:0;padding:18px 16px 40px}
  .who a{display:none}
}
