/* swept-ui.css — Swept design system layer for katia.
   Loaded after each page's inline styles; overrides component look & layout rhythm.
   Pure presentation: no selectors are removed, no JS hooks change. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Inter:wght@400..700&display=swap');

:root{
    /* anpacken — warm ground, brass signature. Matches swept + mend. */
    --bg: #F6F5F0; --surface: #FFFFFF; --surface2: #FAF9F6; --surface3: #F0EEE9;
    --border: #E8E6DE; --border2: #D6D1C7; --border-soft: #EDEAE3;
    --accent: #0E5945; --accent-dark: #0B4736; --accent-dim: rgba(14,89,69,0.10);
    --accent2: #0E5945;
    --green: #0E5945; --green-dim: rgba(14,89,69,0.10);
    --amber: #0E5945; --amber-dim: rgba(14,89,69,0.12);
    --red: #C24040; --red-dim: rgba(194,64,64,0.10);
    --purple: #5C5952;
    --panel: #FFFFFF; --muted: #8A867E;
    --danger: #C24040; --warn: #0E5945; --ok: #0E5945;
    --text: #1A1A18; --text2: #5C5952; --text3: #8A867E;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono: 'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --display: 'Fraunces', Georgia, 'Times New Roman', serif;
    --shadow: 0 1px 2px rgba(26,26,24,0.04), 0 2px 8px rgba(26,26,24,0.05);
    --shadow-md: 0 2px 6px rgba(26,26,24,0.06), 0 12px 32px rgba(26,26,24,0.08);
  }

body{background:var(--bg);color:var(--text);font-size:14px;line-height:1.55}

/* ---------- Header — Swept anatomy ---------- */
header{padding:14px 30px;background:var(--surface);border-bottom:1px solid var(--border);gap:14px}
.logo{font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.3px;color:var(--text)}
.logo span,.logo .ai{color:var(--accent)}
.lsub{font-size:10.5px;color:var(--text3);letter-spacing:1.4px;text-transform:uppercase;margin-left:10px;font-weight:400}
nav{gap:4px}
nav a{font-family:var(--sans);font-size:12.5px;font-weight:500;color:var(--text2);padding:7px 14px;border-radius:8px;letter-spacing:0;text-transform:none}
nav a:hover{color:var(--text);background:var(--surface2)}
nav a.active{background:var(--accent);color:#FFFFFF}
.header-right{gap:10px}
.live-pill{font-size:11px;letter-spacing:.4px;color:var(--accent);border:1px solid var(--accent-dim);background:var(--accent-dim);border-radius:20px;padding:4px 11px}
.live-dot{background:var(--accent)}
.last-updated{font-size:11px}
.auth-user-chip{font-family:var(--sans)!important;font-size:12px!important;border-radius:20px!important;border:1px solid var(--border)!important;color:var(--text2)!important}
.auth-user-chip.admin{color:var(--accent-dark)!important;border-color:var(--accent-dim)!important;background:var(--accent-dim)!important}
.auth-logout-btn{font-family:var(--sans)!important;font-size:12px!important;border-radius:9px!important;padding:6px 12px!important}

/* Mode switcher — Swept segmented control */
.mode-label{font-size:10px;letter-spacing:1.2px;color:var(--text3)}
.mode-toggle{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:3px}
.mode-btn{font-family:var(--sans);font-size:11.5px;font-weight:600;border-radius:7px;padding:5px 12px;letter-spacing:0}
.mode-btn.active-supervised{background:var(--accent);color:#FFFFFF}
.mode-btn.active-semi{background:var(--amber);color:#FFFFFF}
.mode-btn.active-auto{background:var(--green);color:#FFFFFF}
.mode-status{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.6px;border-radius:20px;padding:4px 11px}
.mode-status.supervised{background:var(--accent-dim);color:var(--accent-dark);border:1px solid var(--accent-dim)}
.mode-status.semi{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-dim)}
.mode-status.auto{background:var(--green-dim);color:var(--accent-dark);border:1px solid var(--green-dim)}

/* ---------- Page rhythm ---------- */
.page{max-width:1160px;padding:28px 30px 80px}
.page-title{font-family:var(--display);font-size:29px;font-weight:600;letter-spacing:0}
.page-sub{font-size:12.5px;color:var(--text2)}

/* ---------- Tiles & cards ---------- */
.stat-card,.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
.stat-card::before{display:none}
.stat-label,.card-label{font-family:var(--sans);font-size:10px;letter-spacing:1.4px;color:var(--text3);margin-bottom:8px}
.stat-value,.card-value{font-family:var(--display);font-size:30px;font-weight:600;color:var(--text)}
.stat-value.blue,.stat-value.green,.stat-value.amber,.stat-value.purple{color:var(--text)}
.stat-detail,.card-detail{font-family:var(--sans);font-size:11.5px;color:var(--text2)}
.section,.chart-box,.invite-card,.master-card,.property-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.section-title{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text)}
.section-badge{font-family:var(--sans);border-radius:14px}
.section-header{border-bottom:1px solid var(--border)}

/* ---------- Buttons ---------- */
.btn,.btn-primary,.generate-btn,.kb-save-btn,.kb-open-btn,.kb-ai-approve,.cmd-select,button.filter{font-family:var(--sans);border-radius:9px;font-weight:600}
.btn-primary,.generate-btn,.kb-save-btn,.kb-ai-approve{background:var(--accent);color:#FFFFFF;border:none}
.btn-primary:hover,.generate-btn:hover,.kb-save-btn:hover{background:var(--accent-dark)}
.btn-ghost,.kb-open-btn{background:var(--surface);color:var(--text2);border:1px solid var(--border)}
.btn-danger{background:var(--surface);color:var(--red);border:1px solid var(--border)}
.btn-amber{background:var(--amber);color:#FFFFFF;border:none}

/* ---------- Inputs ---------- */
input,select,textarea{font-family:var(--sans);border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-dim)}
.guest-msg-input,.draft-area{border-radius:12px}

/* ---------- Pills, tags, chips ---------- */
.pill,.badge,.flag-tag,.unit-pill,.guest-chip,.asana-chip,.prop-ai-chip,.prop-human-chip,.kb-cov-gap-pill,.ai-pill,.master-unit-pill{font-family:var(--sans);border-radius:14px;font-weight:600}
.flag-info{background:var(--accent-dim);color:var(--accent-dark)}
.flag-extension{background:var(--green-dim);color:var(--accent-dark)}
.flag-maintenance{background:var(--amber-dim);color:var(--amber)}
.flag-urgent{background:var(--red-dim);color:var(--red)}

/* ---------- Tables ---------- */
.agent-table th,.prop-table th{font-family:var(--sans);font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:var(--text3);border-bottom:1px solid var(--border)}
.agent-table td,.prop-table td{border-bottom:1px solid var(--border)}
.rank{font-family:var(--display)}

/* ---------- Dashboard workspace (3-col) ---------- */
.sidebar,.input-panel{background:var(--surface);border-color:var(--border)}
.sidebar-label,.input-label,.draft-label,.kb-field-label{font-family:var(--sans);font-size:10px;letter-spacing:1.4px;color:var(--text3);text-transform:uppercase}
.sidebar-section{border-color:var(--border-soft)}
.main{background:var(--bg)}
.main-top{background:var(--surface);border-bottom:1px solid var(--border)}
.conv-item{border-radius:10px}
.conv-item:hover{background:var(--surface2)}
.msg-bubble{border-radius:12px;box-shadow:var(--shadow)}
.msg-meta{font-family:var(--sans);font-size:10.5px}
.status-bar{background:var(--surface);border-top:1px solid var(--border);font-family:var(--sans)}

/* ---------- Modals ---------- */
.kb-modal{border-radius:14px;box-shadow:0 4px 16px rgba(20,20,16,.08),0 24px 64px rgba(20,20,16,.10);border:1px solid var(--border)}
.kb-modal-head{border-bottom:1px solid var(--border)}
.kb-modal-title{font-family:var(--display);font-weight:600;letter-spacing:0;text-transform:none}
.kb-modal-foot{border-top:1px solid var(--border)}

/* ---------- Charts ---------- */
.chart-legend,.split-legend,.chart-labels{font-family:var(--sans)}
.top-topic-rank,.topic-rank-num{font-family:var(--display)}

/* ---------- Misc polish ---------- */
.empty-state{color:var(--text3)}
.sent-toast{background:var(--text);color:#FFFFFF;border-radius:10px;font-family:var(--sans)}
.toast{border-radius:10px}
::selection{background:var(--accent-dim)}


/* ---------- anpacken light ground — swept/mend parity ---------- */
body{background:var(--bg)}
.page-title,.stat-value,.card-value,.section-title{font-family:var(--display);font-weight:400;letter-spacing:-0.01em}
.page-title{font-size:34px;line-height:1.12}
.stat-value,.card-value{font-size:34px;font-weight:400}
.btn-primary,.generate-btn,.kb-save-btn,.kb-ai-approve{background:var(--green);color:#fff}
.btn-primary:hover,.generate-btn:hover,.kb-save-btn:hover{background:#22503F}
.mode-btn.active-supervised,.mode-btn.active-semi,.mode-btn.active-auto{color:#fff}

/* ================= anpacken app shell — swept-style left rail ================= */
html.nl-shelled, html.nl-shelled body{ height:100%; }
html.nl-shelled body{ overflow:hidden; }
.nl-shell{ display:flex; align-items:stretch; height:100vh; background:var(--bg); }
.nl-side{ width:232px; flex:none; display:flex; flex-direction:column; background:var(--bg);
  border-right:1px solid var(--border); padding:20px 14px 18px; overflow-y:auto; gap:22px; }
.nl-brand{ display:flex; align-items:center; padding:0 8px 2px; flex-wrap:wrap; gap:2px; }
.nl-brand .logo{ font-family:var(--display); font-size:25px; font-weight:400; letter-spacing:-.01em; }
.nl-brand .lsub{ font-size:9.5px; letter-spacing:1.3px; margin-left:0; width:100%; color:var(--text3); }
.nl-nav{ display:flex; flex-direction:column; gap:1px; }
.nl-nav a{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px;
  font-family:var(--sans); font-size:14px; font-weight:500; line-height:1.2; color:var(--text2);
  text-decoration:none; border:1px solid transparent; transition:background .12s ease,color .12s ease; }
.nl-nav a:hover{ background:var(--surface2); color:var(--text); }
.nl-nav a.active{ background:var(--surface); color:var(--text); font-weight:600;
  border-color:var(--border); box-shadow:var(--shadow); }
.nl-ico{ width:17px; height:17px; flex:none; opacity:.72; }
.nl-nav a.active .nl-ico{ opacity:1; color:var(--accent); }
.nl-main{ flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; }
.nl-topbar{ flex:none; display:flex; align-items:center; justify-content:flex-end; gap:10px;
  flex-wrap:wrap; padding:12px 30px; min-height:56px; background:var(--bg);
  border-bottom:1px solid var(--border); }
.nl-topbar .header-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.nl-topbar .mode-switcher{ display:flex; align-items:center; gap:9px; }
.nl-content{ flex:1; min-height:0; overflow-y:auto; }
html.nl-appgrid .nl-content{ overflow:hidden; display:flex; }
html.nl-appgrid .nl-content > .app{ height:auto; flex:1; min-height:0; width:100%; }
@media (max-width:1080px){
  .nl-side{ width:70px; padding:18px 10px; }
  .nl-side .nl-brand .lsub{ display:none; }
  .nl-nav a{ justify-content:center; padding:11px 0; font-size:0; gap:0; }
  .nl-ico{ width:19px; height:19px; }
  .nl-brand .logo{ font-size:19px; }
}
/* ================= type + density — measured from swept ================= */
body{ font-size:14px; line-height:1.5; font-family:var(--sans); }
.page{ max-width:1240px; padding:30px 34px 90px; }
.page-title{ font-family:var(--display); font-size:32px; font-weight:500;
  letter-spacing:-0.015em; line-height:1.15; margin-bottom:6px; }
.page-sub{ font-size:13.5px; color:var(--text2); }
.stat-card,.card{ padding:18px 20px; border-radius:14px; }
.stat-label,.card-label{ font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:normal; text-transform:none; color:var(--text3); margin-bottom:8px; }
.stat-value,.card-value{ font-family:var(--display); font-size:32px; font-weight:500;
  letter-spacing:-0.015em; line-height:1.15; }
.stat-detail,.card-detail{ font-size:12.5px; margin-top:5px; }
.section-title{ font-family:var(--display); font-size:20px; font-weight:500; letter-spacing:-0.01em; }
.section-header{ padding:15px 20px; }
.nl-nav a{ font-size:14px; font-weight:400; padding:11px 12px; }
.nl-nav a.active{ font-weight:500; }
.nl-brand .logo{ font-family:var(--display); font-size:24px; font-weight:500; }
.agent-table th,.prop-table th{ font-size:11px; letter-spacing:normal; text-transform:none; font-weight:500; }

/* rail sections + product sub-links */
.nl-nav .nl-sec{ font-size:10px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--text3); padding:16px 12px 5px; }
.nl-nav a.sub{ padding-left:40px; font-size:13px; }