/* ==========================================================================
   Zakir OS — Tool Hub, sandboxed runner, provider keys.
   ========================================================================== */

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s4)}
.tool-card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease);
}
.tool-card:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.tool-card__icon{
  width:34px;height:34px;border-radius:var(--r-md);
  display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);
}
.tool-card__body{flex:1;min-width:0}
.tool-card__name{font-size:var(--t-base);font-weight:600}
.tool-card__meta{
  font-family:var(--font-mono);font-size:var(--t-2xs);color:var(--text-3);
  letter-spacing:var(--tracking-label);text-transform:uppercase;margin-top:2px;
}
.tool-card__desc{font-size:var(--t-sm);color:var(--text-2);margin-top:var(--s2)}
.tool-card__actions{display:flex;gap:var(--s2)}

/* --- Runner --------------------------------------------------------------- */
.page--flush{max-width:none;padding:0}
.runner{display:flex;flex-direction:column;height:calc(100vh - var(--topbar-h))}
.runner__bar{
  display:flex;align-items:center;gap:var(--s3);
  height:44px;padding:0 var(--s4);
  border-bottom:1px solid var(--line);background:var(--surface);
  flex:none;
}
.runner__name{font-size:var(--t-md);font-weight:600}
.runner__frame{
  flex:1;width:100%;border:none;background:#fff;
  min-height:60vh;
}
.runner--wide{position:fixed;inset:0;z-index:var(--z-modal);background:var(--bg);height:100vh}

/* --- Provider keys -------------------------------------------------------- */
.cred-row{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.cred-row:last-child{border-bottom:none}
.cred-row__body{display:flex;flex-direction:column;flex:1;min-width:140px}
.cred-row__name{font-size:var(--t-md);font-weight:500}
.cred-row__note{font-size:var(--t-sm);color:var(--text-3)}
.cred-row .input{width:220px}

@media (max-width:720px){
  .tool-grid{grid-template-columns:1fr}
  .cred-row .input{width:100%}
  .runner{height:calc(100dvh - var(--topbar-h) - 60px)}
}

/* ==========================================================================
   Tasks board
   ========================================================================== */
.board{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,1fr);
  gap:var(--s3);overflow-x:auto;padding-bottom:var(--s3);align-items:start;
}
.column{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);min-height:120px;
}
.column[data-done="true"]{opacity:.9}
.column__head{display:flex;align-items:center;gap:var(--s2)}
.column__dot{width:8px;height:8px;border-radius:var(--r-full);background:var(--line-strong);flex:none}
.column__label{font-size:var(--t-md);font-weight:600;flex:1}
.column__count{font-size:var(--t-sm);color:var(--text-3)}
.column__cards{display:flex;flex-direction:column;gap:var(--s2)}
.column__new{
  background:none;border:1px dashed var(--line-strong);border-radius:var(--r-md);
  color:var(--text-3);padding:var(--s2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:var(--s1);
  font-size:var(--t-sm);
}
.column__new:hover{color:var(--text-2);border-color:var(--text-3)}
.column__add{padding:var(--s2);background:var(--overlay);border-radius:var(--r-md)}

.card-task{
  background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);display:flex;flex-direction:column;gap:var(--s2);
}
.card-task[data-done="true"] .card-task__title{color:var(--text-3);text-decoration:line-through}
.card-task__title{
  background:none;border:none;padding:0;text-align:left;cursor:pointer;
  font-size:var(--t-md);color:var(--text);font-family:inherit;
}
.card-task__title:hover{color:var(--accent)}
.card-task__meta{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center}
.card-task__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.card-task__who{font-size:var(--t-sm);min-width:0}
.card-task__foot .select--sm{max-width:120px}

@media (max-width:720px){
  .board{grid-auto-flow:row;grid-auto-columns:auto}
}

/* ==========================================================================
   KPI
   ========================================================================== */
.kpi-list{display:flex;flex-direction:column;gap:var(--s4)}
.kpi[data-off="true"]{opacity:.6}
.kpi__sub{font-size:var(--t-sm);margin-top:2px}
.kpi__rows{display:flex;flex-direction:column;margin-top:var(--s3)}
.kpi-row{
  display:grid;grid-template-columns:minmax(90px,1fr) minmax(180px,2fr) auto auto;
  gap:var(--s3);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.kpi-row:last-child{border-bottom:none}
.kpi-row[data-you="true"]{background:var(--accent-soft);border-radius:var(--r-sm)}
.kpi-row__who{font-size:var(--t-md);font-weight:500}
.kpi-row__bar{display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.kpi-row__track{height:6px;background:var(--overlay);border-radius:var(--r-full);overflow:hidden}
.kpi-row__fill{
  display:block;height:100%;border-radius:var(--r-full);
  background:var(--accent);transition:width var(--base) var(--ease);
}
.kpi-row__fill[data-tone="up"]{background:var(--up)}
.kpi-row__fill[data-tone="warn"]{background:var(--warn)}
.kpi-row__fill[data-tone="down"]{background:var(--down)}
.kpi-row__nums{font-size:var(--t-sm)}
.kpi-row__nums .up{color:var(--up)} .kpi-row__nums .warn{color:var(--warn)} .kpi-row__nums .down{color:var(--down)}
.kpi-row__entry{display:flex;gap:var(--s1);align-items:center}
.kpi-row__entry .input{width:92px}

@media (max-width:900px){
  .kpi-row{grid-template-columns:1fr;row-gap:var(--s2)}
  .kpi-row__entry{justify-content:flex-start}
}

/* --- CRM ------------------------------------------------------------------ */
.column__value{font-size:var(--t-sm);margin-top:-2px}
.due-list{display:flex;flex-direction:column}
.due{
  display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) 0;border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.due:last-child{border-bottom:none}
.due[data-overdue="true"] .due__subject{color:var(--warn)}
.due__kind{
  width:28px;height:28px;flex:none;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:var(--overlay);border:1px solid var(--line);color:var(--text-2);
}
.due__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.due__subject{font-size:var(--t-md);font-weight:500}
.due__ctx{font-size:var(--t-sm)}

/* --- Knowledge base -------------------------------------------------------- */
.kb-search{margin-bottom:var(--s3)}
.kb-search .input{font-size:var(--t-base);height:44px}
.kb-filters{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.kb-filters__sep{width:1px;height:20px;background:var(--line);margin:0 var(--s1)}
.chip{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-full);
  padding:5px var(--s3);font-size:var(--t-sm);color:var(--text-2);cursor:pointer;
}
.chip:hover{border-color:var(--line-strong);color:var(--text)}
.chip[data-on="true"]{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

.kb-list{display:flex;flex-direction:column;gap:var(--s2)}
.kb-item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);
}
.kb-item[data-draft="true"]{border-style:dashed}
.kb-item__title{
  background:none;border:none;padding:0;text-align:left;cursor:pointer;
  font-size:var(--t-lg);font-weight:600;color:var(--text);font-family:inherit;
}
.kb-item__title:hover{color:var(--accent)}
.kb-item__summary{font-size:var(--t-sm);margin:0}
.kb-item__meta{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;font-size:var(--t-sm)}

.drawer--wide{width:min(760px,100vw)}
.kb-read__summary{font-size:var(--t-base);color:var(--text-2);margin-bottom:var(--s4)}
.kb-read{line-height:var(--lh-body)}
.kb-read h2{font-size:var(--t-xl);margin:var(--s5) 0 var(--s2)}
.kb-read h3{font-size:var(--t-lg);margin:var(--s4) 0 var(--s2)}
.kb-read h4{font-size:var(--t-base);margin:var(--s3) 0 var(--s1)}
.kb-read p{margin:0 0 var(--s3)}
.kb-read ul{margin:0 0 var(--s3);padding-left:var(--s5)}
.kb-read li{margin-bottom:var(--s1)}
.kb-read code{
  font-family:var(--font-mono);font-size:.9em;
  background:var(--overlay);padding:2px 5px;border-radius:var(--r-sm);
}
.kb-read pre{
  background:var(--overlay);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s3);overflow-x:auto;margin:0 0 var(--s3);
}
.kb-read pre code{background:none;padding:0}
.kb-read a{color:var(--accent)}
.kb-read__tags{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:var(--s4)}
.kb-editor{font-family:var(--font-mono);font-size:var(--t-sm);line-height:1.6}
.kpi-row__note{font-size:var(--t-sm);grid-column:2/-1}

/* --- CRM leads table ------------------------------------------------------ */
.lead-head,.lead-row{
  display:grid;
  grid-template-columns:minmax(140px,1.6fr) minmax(100px,1fr) 110px 100px 90px 100px 64px;
  gap:var(--s3);align-items:center;
}
.lead-head{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line-strong);
}
.lead-row{padding:var(--s3) 0;border-bottom:1px solid var(--line)}
.lead-row:last-child{border-bottom:none}
.lead-row[data-outcome="won"]{background:var(--up-soft);border-radius:var(--r-sm)}
.lead-row[data-outcome="lost"]{opacity:.55}
.lead-row__name{display:flex;flex-direction:column;gap:2px;font-weight:500}
.lead-row__name .dim{font-size:var(--t-sm);font-weight:400}
@media (max-width:900px){
  .lead-head{display:none}
  .lead-row{grid-template-columns:1fr auto;row-gap:var(--s1);padding:var(--s3) 0}
  .lead-row > *:nth-child(n+2):nth-last-child(n+2){font-size:var(--t-sm)}
}
.tag-row{display:flex;gap:var(--s1);flex-wrap:wrap;margin-bottom:var(--s2)}
.tag-row .pill{cursor:pointer;border:1px solid var(--line-strong)}
.tag-row .pill:hover{border-color:var(--down);color:var(--down)}

/* --- Integrations --------------------------------------------------------- */
.integration{display:flex;flex-direction:column;gap:var(--s3)}
.integration__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.integration__name{font-size:var(--t-md);font-weight:600;display:block}
.integration__note{font-size:var(--t-sm);display:block;margin-top:2px}
.integration__steps{
  margin:var(--s2) 0 0;padding-left:var(--s5);
  font-size:var(--t-sm);color:var(--text-2);line-height:var(--lh-body);
}
.integration__steps li{margin-bottom:var(--s2)}
.integration .input[readonly]{font-size:var(--t-sm);flex:1;min-width:0}

/* --- Files ---------------------------------------------------------------- */
.dropzone{border-radius:var(--r-lg);transition:outline-color var(--base) var(--ease)}
.dropzone[data-drag="true"]{outline:2px dashed var(--accent);outline-offset:6px}
.file-rows{display:flex;flex-direction:column}
.file-row{
  display:grid;grid-template-columns:minmax(200px,3fr) 80px 90px 90px auto;
  gap:var(--s3);align-items:center;
  padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.file-row:last-child{border-bottom:none}
.file-head{
  font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);
  padding-bottom:var(--s2);
}
.file-row__name{display:flex;flex-direction:column;gap:2px;min-width:0}
.file-row__name .dim{font-size:var(--t-sm)}
.file-row__name .kb-item__title{font-size:var(--t-md)}
.file-row__tags{display:flex;gap:var(--s1);flex-wrap:wrap;margin-top:2px}
@media (max-width:900px){
  .file-row{grid-template-columns:1fr auto;row-gap:var(--s1)}
  .file-head{display:none}
  .file-row__name{grid-column:1/-1}
}

/* --- Meeting notes -------------------------------------------------------- */
.attendees{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s1)}

/* --- Analytics ------------------------------------------------------------ */
.an-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);margin-top:var(--s2)}
.an-stat{display:flex;flex-direction:column;gap:2px}
.an-stat__value{font-size:var(--t-lg);font-weight:600}
.an-chart{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.chart{
  display:flex;align-items:flex-end;gap:2px;height:72px;
  padding:var(--s2);background:var(--overlay);border-radius:var(--r-md);
}
.chart__bar{flex:1;min-width:2px;border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.chart__bar:hover{opacity:1}
.an-sources{margin-top:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.an-source{display:grid;grid-template-columns:minmax(70px,1fr) 2fr auto;gap:var(--s2);align-items:center;font-size:var(--t-sm)}
.an-source__bar{height:6px;background:var(--overlay);border-radius:var(--r-full);overflow:hidden}
.an-source__bar span{display:block;height:100%;background:var(--accent);border-radius:var(--r-full)}
.an-person{
  display:grid;grid-template-columns:minmax(90px,2fr) repeat(4,minmax(48px,1fr));
  gap:var(--s2);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line);
}
.an-person:last-child{border-bottom:none}
.an-person--head{font-family:var(--font-mono);font-size:var(--t-2xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3);border-bottom:1px solid var(--line-strong)}
.an-person .num{text-align:right}
.an-person .warn{color:var(--warn)}
.tile__value.warn{color:var(--warn)} .tile__value.down{color:var(--down)} .tile__value.ok{color:var(--up)}
@media (max-width:720px){
  .an-stats{grid-template-columns:1fr}
  .an-person{grid-template-columns:1fr repeat(2,minmax(44px,1fr))}
}
.kpi-row__target{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-sm);white-space:nowrap}
.kpi-row__target .warn{color:var(--warn)}
.assignees{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s1) 0}
.assignee{
  display:flex;align-items:center;gap:var(--s1);
  padding:5px var(--s3);border:1px solid var(--line);border-radius:var(--r-full);
  font-size:var(--t-sm);cursor:pointer;
}
.assignee:hover{border-color:var(--line-strong)}
.assignee:has(input:checked){background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}