/* ═══════════════════════════════════════════════════
   tools.css — 6 Developer Tools
   ═══════════════════════════════════════════════════ */

.tools-hero { padding:5rem var(--s-8) 2rem; text-align:center; }
.tools-hero h1 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:700; letter-spacing:-0.04em; margin-bottom:var(--s-3); }
.tools-hero p  { font-size:0.95rem; color:var(--text-2); max-width:460px; margin:0 auto; line-height:1.7; }

/* ── TOOL NAV ── */
.tool-nav {
  display:flex; gap:var(--s-2); padding:var(--s-4) var(--s-8) 0;
  max-width:1320px; margin:0 auto; flex-wrap:wrap;
}
.tool-nav-btn {
  display:flex; align-items:center; gap:var(--s-2);
  background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-md);
  padding:0.6rem var(--s-4); font-size:0.82rem; font-weight:600;
  color:var(--text-2); cursor:pointer; transition:all var(--t); user-select:none;
}
.tool-nav-btn:hover  { color:var(--text); border-color:var(--border-2); }
.tool-nav-btn.active { color:var(--amber); background:var(--amber-pale); border-color:var(--border-amb); }
.tool-nav-icon { font-size:1rem; }

/* ── TOOL PANELS ── */
.tool-panel { display:none; max-width:1320px; margin:var(--s-6) auto; padding:0 var(--s-8); }
.tool-panel.active { display:block; }

.tool-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; }

.tool-head { padding:var(--s-6) var(--s-8); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:var(--s-5); }
.tool-head-icon {
  width:52px; height:52px; background:var(--amber-pale); border:1px solid var(--border-amb);
  border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; flex-shrink:0;
}
.tool-head h2 { font-size:1.1rem; font-weight:700; letter-spacing:-0.02em; margin-bottom:0.2rem; }
.tool-head p  { font-size:0.8rem; color:var(--text-2); line-height:1.5; }

.tool-body { display:grid; grid-template-columns:1fr 1fr; }
.tool-body.single { grid-template-columns:1fr; }

.tool-col { padding:var(--s-6) var(--s-8); border-right:1px solid var(--border); }
.tool-col:last-child { border-right:none; }
.tool-col-title { font-family:var(--font-mono); font-size:0.65rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-3); margin-bottom:var(--s-4); }

/* ── SCHEMA DESIGNER ── */
.schema-fields { display:flex; flex-direction:column; gap:var(--s-2); margin-bottom:var(--s-4); }
.schema-row    { display:flex; gap:var(--s-2); align-items:center; }
.schema-row .field-input  { flex:1; }
.schema-row .field-select { width:140px; flex-shrink:0; }
.schema-checks { display:flex; gap:var(--s-3); margin-bottom:var(--s-4); flex-wrap:wrap; }
.schema-check  { display:flex; align-items:center; gap:var(--s-2); font-size:0.78rem; color:var(--text-2); cursor:pointer; user-select:none; }
.schema-check input { accent-color:var(--amber); width:14px; height:14px; cursor:pointer; }

/* ── CONNECTION STRING BUILDER ── */
.conn-form { display:flex; flex-direction:column; gap:var(--s-4); }
.conn-row  { display:flex; gap:var(--s-2); }
.conn-port { width:95px; flex-shrink:0; }
.conn-display {
  background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:var(--s-4); font-family:var(--font-mono); font-size:0.76rem;
  color:var(--green); word-break:break-all; line-height:1.7; min-height:64px;
  margin-top:var(--s-2); position:relative;
}
.conn-snippets { margin-top:var(--s-5); }
.conn-snippet-head { font-family:var(--font-mono); font-size:0.62rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:var(--s-3); }
.conn-snippet-item { background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--s-3) var(--s-4); margin-bottom:var(--s-2); font-family:var(--font-mono); font-size:0.74rem; line-height:1.7; }
.conn-snippet-item b { color:var(--amber); font-weight:600; display:block; margin-bottom:var(--s-1); }

/* ── REGEX TESTER ── */
.regex-input-wrap {
  display:flex; align-items:center; background:var(--bg-3); border:1px solid var(--border);
  border-radius:var(--r-sm); overflow:hidden; margin-bottom:var(--s-4);
}
.regex-slash  { font-family:var(--font-mono); font-size:1.1rem; color:var(--text-3); padding:0 var(--s-2); flex-shrink:0; }
.regex-main   { flex:1; background:transparent; border:none; padding:0.65rem var(--s-2); font-family:var(--font-mono); font-size:0.9rem; color:var(--text); outline:none; }
.regex-flags  { width:72px; background:transparent; border:none; border-left:1px solid var(--border); padding:0.65rem var(--s-2); font-family:var(--font-mono); font-size:0.85rem; color:var(--purple); outline:none; }
.regex-test   { background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--s-4); font-family:var(--font-mono); font-size:0.82rem; min-height:140px; white-space:pre-wrap; word-break:break-word; line-height:1.75; }
.regex-match  { background:rgba(34,197,94,0.22); border-radius:2px; outline:1px solid rgba(34,197,94,0.45); }
.regex-stats  { font-family:var(--font-mono); font-size:0.7rem; color:var(--text-3); margin-top:var(--s-2); }
.regex-list   { margin-top:var(--s-3); max-height:180px; overflow-y:auto; }
.regex-match-row { font-family:var(--font-mono); font-size:0.73rem; color:var(--green); padding:0.18rem 0; }
.regex-presets { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-bottom:var(--s-4); }

/* ── JSON PATH ── */
.json-ta { background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--s-4); font-family:var(--font-mono); font-size:0.76rem; line-height:1.75; overflow:auto; white-space:pre; min-height:180px; max-height:380px; }
.json-path-bar { display:flex; gap:var(--s-2); margin-bottom:var(--s-3); }
.json-path-presets { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-3); }
.json-result { font-family:var(--font-mono); font-size:0.78rem; margin-top:var(--s-4); }

/* ── DATA TYPES ── */
.dt-tabs { display:flex; gap:var(--s-2); margin-bottom:var(--s-5); flex-wrap:wrap; }
.dt-tab  { background:var(--bg-3); border:1px solid var(--border); border-radius:var(--r-sm); padding:0.35rem 0.85rem; font-family:var(--font-mono); font-size:0.72rem; color:var(--text-2); cursor:pointer; transition:all var(--t); }
.dt-tab.active, .dt-tab:hover { border-color:var(--border-amb); color:var(--amber); background:var(--amber-pale); }
.dt-table { width:100%; border-collapse:collapse; font-size:0.8rem; }
.dt-table th { background:var(--bg-3); color:var(--amber); text-align:left; padding:0.5rem 0.8rem; border-bottom:1px solid var(--border); font-weight:600; font-family:var(--font-mono); font-size:0.67rem; letter-spacing:0.05em; }
.dt-table td { padding:0.45rem 0.8rem; border-bottom:1px solid var(--border); }
.dt-table tr:last-child td { border-bottom:none; }
.dt-table tr:hover td { background:rgba(255,255,255,0.02); }
.dt-type  { font-family:var(--font-mono); color:var(--teal); }
.dt-range { color:var(--text-2); font-size:0.77rem; }
.dt-note  { color:var(--text-3); font-size:0.74rem; }

/* ── INDEX ADVISOR ── */
.advisor-form { display:flex; flex-direction:column; gap:var(--s-4); }
.advisor-result { background:var(--bg-1); border:1px solid var(--border); border-radius:var(--r-sm); padding:var(--s-5); min-height:220px; font-family:var(--font-mono); font-size:0.78rem; line-height:1.75; }
.adv-section-title { font-size:0.65rem; color:var(--text-3); text-transform:uppercase; letter-spacing:0.08em; margin-bottom:var(--s-2); margin-top:var(--s-4); }
.adv-rec  { color:var(--green);  margin-bottom:var(--s-2); }
.adv-warn { color:var(--orange); margin-bottom:var(--s-2); }
.adv-info { color:var(--text-2); margin-bottom:var(--s-2); }
.adv-sql  { color:var(--teal); }

/* ── RESPONSIVE ── */
@media(max-width:860px) {
  .tool-body       { grid-template-columns:1fr; }
  .tool-col        { border-right:none; border-bottom:1px solid var(--border); }
  .tool-col:last-child { border-bottom:none; }
  .tool-head       { flex-direction:column; align-items:flex-start; }
}