/* =========================================================
   controls.css — Input Card, Progress Bar, Stat Cards,
                  Tree Tabs, Chart Card
   MMSEO Crawl & Audit Console
   ========================================================= */

/* ── INPUT CARD ── */
.input-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 12px;display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap;flex-shrink:0;
}
.url-input{
  flex:1;min-width:0;background:var(--white);border:1px solid var(--border);
  color:var(--text);font-family:inherit;font-size:12px;
  padding:0 10px;border-radius:var(--radius-sm);outline:none;height:36px;
  transition:border-color .15s,background .15s;
}
.url-input:focus{border-color:#a8c4e8;background:#eef3fc;box-shadow:none;}
.url-input::placeholder{color:var(--text-dim);}
.sel-full{
  flex-shrink:0;width:auto;background:var(--white);border:1px solid var(--border);
  color:var(--text);font-family:inherit;font-size:12px;
  padding:0 26px 0 10px;border-radius:var(--radius-sm);outline:none;height:36px;
  cursor:pointer;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M0 0l5 7 5-7z' fill='%235a5a48'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color .15s;
}
.sel-full:focus{border-color:var(--forest);outline:none;}
.btn-row{display:contents;}
.btn-crawl{
  background:var(--forest);border:none;color:#fff;
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.3px;
  padding:0 16px;border-radius:var(--radius-sm);cursor:pointer;
  display:flex;align-items:center;gap:6px;transition:background .15s;
  height:36px;white-space:nowrap;flex-shrink:0;
}
.btn-crawl:hover{background:var(--forest-dim);}
.btn-crawl.stop{background:#888;border:none;color:#fff;}
.btn-crawl.stop:hover{background:#666;}
.btn-clear{
  background:var(--white);border:1.5px solid var(--border);color:var(--text-mid);
  font-family:inherit;font-size:12px;font-weight:500;
  padding:0 12px;border-radius:var(--radius-sm);cursor:pointer;
  height:36px;transition:all .15s;opacity:.5;pointer-events:none;white-space:nowrap;flex-shrink:0;
}
.btn-clear.active{opacity:1;pointer-events:auto;}
.btn-clear.active:hover{background:var(--bg2);}

/* ── PROGRESS CARD ── */
/* ── CRAWL STATUS BAR ── */
.crawl-status-bar{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:8px 12px;display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.csb-progress{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0;}
.csb-meta{display:flex;align-items:center;justify-content:space-between;}
.csb-urls{font-size:10.5px;color:var(--text-mid);font-weight:600;}
.csb-stats{display:flex;align-items:center;gap:10px;}
.csb-stat{font-size:9.5px;color:var(--text-dim);display:flex;align-items:center;gap:3px;white-space:nowrap;}
.csb-stat i{font-size:11px;}
.csb-pct{font-size:11px;font-weight:700;color:var(--text-mid);min-width:36px;text-align:right;flex-shrink:0;}
.csb-console-btn{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  background:var(--forest);color:#fff;
  font-size:10.5px;font-weight:600;text-decoration:none;
  white-space:nowrap;flex-shrink:0;
  border:none;cursor:pointer;transition:background .15s;
}
.csb-console-btn:hover{background:var(--forest-dim);}
.csb-console-btn i{font-size:13px;}
.crawl-pill{background:#eaf3e0;border:1px solid #b8d8a0;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;color:var(--forest);white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:6px;}
.crawl-pill-dot{width:7px;height:7px;border-radius:50%;background:#6ab84a;flex-shrink:0;animation:pulse 1s infinite;}
.progress-bar-wrap{flex:1;height:6px;background:var(--bg3);border-radius:4px;overflow:hidden;}
.progress-bar-fill{height:100%;background:var(--forest);border-radius:4px;transition:width .4s ease;}
.progress-count{font-size:13px;color:var(--text-mid);white-space:nowrap;text-align:right;flex-shrink:0;min-width:90px;}
.progress-pct{font-size:12px;color:var(--text-dim);}

/* ── ASCII PROGRESS BAR ── */
.pbar-row{flex:1;display:flex;flex-direction:column;gap:5px;}
.pbar-row-top{display:flex;align-items:center;gap:10px;}
.pbar-lbl{font-size:12px;color:var(--text-mid);}
.pbar-ascii{display:flex;align-items:center;gap:6px;}
.pbar-blockswrap{display:flex;align-items:center;height:12px;overflow:hidden;flex:1;}
.pbar-block{width:4px;height:12px;border-radius:1px;background:var(--forest);opacity:.2;transition:opacity .15s;}
.pbar-block.on{opacity:1;}
.pbar-ascii-pct{font-size:12px;font-weight:700;color:var(--forest);white-space:nowrap;flex-shrink:0;margin-left:8px;}
.pbar-ascii-done{font-size:13px;letter-spacing:-2px;color:var(--forest-dim);white-space:nowrap;overflow:hidden;}
.pbar-row-stats{display:flex;gap:14px;flex-wrap:wrap;}
.pbar-stat{font-size:10px;color:var(--text-dim);}
.pbar-stat span{color:var(--forest);font-weight:700;}
.pbar{display:none;}
.pbar-fill{height:100%;background:var(--forest);border-radius:2px;transition:width .4s;}
#pAsciiRest{font-size:13px;letter-spacing:-2px;color:var(--text-dim);opacity:.3;flex:1;overflow:hidden;}

/* ── STAT CARDS ── */
.stat-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;flex-shrink:0;}
.stat-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:10px 8px;text-align:center;transition:border-color .15s;
  position:relative;text-decoration:none;cursor:pointer;display:block;
}
.stat-card:hover{border-color:var(--forest);}

.stat-card-lbl{font-size:9px;font-weight:600;color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;margin-bottom:4px;line-height:1.3;}
.stat-card-val{font-size:22px;font-weight:700;line-height:1.1;margin-bottom:2px;}
.stat-card-sub{font-size:10px;color:var(--text-dim);}
.sv-green{color:var(--g-green);}
.sv-amber{color:var(--g-amber);}
.sv-red{color:var(--g-red);}

/* ── TREE / AUDIT TABS ── */
.tree-tabs{display:flex;flex-wrap:nowrap;gap:6px;flex-shrink:0;width:100%;}
.tree-tab{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  flex:1;min-width:0;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:6px 4px;font-size:11px;font-weight:500;color:var(--text-mid);
  cursor:pointer;transition:all .15s;white-space:normal;text-align:center;line-height:1.3;color:var(--text);text-decoration:none;
}
.tree-tab:hover{border-color:var(--forest-dim);color:var(--forest);}
.tree-tab.active{background:var(--forest);color:#fff;border-color:var(--forest);}
.tree-tab i{font-size:14px;}

/* ── CHART CARD ── */
.chart-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
}
.chart-card-title{font-size:11px;font-weight:700;color:var(--forest);letter-spacing:.8px;text-transform:uppercase;margin-bottom:12px;}
.chart-inner{flex:1;min-height:0;position:relative;}

/* ── Select dropdown options font size ── */
.sel-full option, .sel-full optgroup{font-size:11px;}