/* Firewall Configurator (tool-specific) */
/* This file contains only layout/styling unique to firewall-configurator.html.
   Shared colors, typography, buttons, cards come from tools.css. */

  :root{
    --bg:#0b1020; --bg2:#0a0f1d; --panel:#11162a; --panel2:#131a31;
    --field:#0b1227; --stroke:#1f2a44; --text:#e7ecff; --muted:#94a3b8;
    --brand:#2563eb; --brand-strong:#1e4fd6; --accent:#2a355d; --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  *{box-sizing:border-box}
  body{font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:linear-gradient(180deg,var(--bg),var(--bg2));color:var(--text)}
  header{background:linear-gradient(180deg,#1b2550,#131a31);color:#fff;padding:1.1rem;text-align:center}
  h1{margin:.1rem 0;font-size:1.4rem} p.lead{margin:0;color:#cbd5ff;font-size:.95rem}
  main{max-width:1100px;margin:1.5rem auto;padding:1.25rem;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--stroke);border-radius:10px;box-shadow:var(--shadow)}
  .grid{display:grid;grid-template-columns:1fr 360px;gap:1rem}
  fieldset{border:1px solid var(--stroke);padding:12px;border-radius:8px;margin:0 0 1rem 0;background:transparent}
  legend{font-weight:600;padding:0 6px;color:#dbe4ff}
  label.row{display:flex;align-items:center;gap:.6rem;margin:.4rem 0}
  .muted{color:var(--muted);font-size:.9rem}
  select,input[type="text"],textarea{width:100%;padding:8px;border-radius:6px;border:1px solid var(--stroke);background:var(--field);color:var(--text)}
  select[multiple]{height:120px}
  textarea#output{height:320px;font-family:monospace;white-space:pre-wrap;overflow:auto;background:var(--field);color:var(--text);border:1px solid var(--stroke)}
  button{background:var(--brand);color:#fff;border:none;padding:.6rem .9rem;border-radius:8px;cursor:pointer}
  button:hover{filter:brightness(1.08)}
  button.ghost{background:rgba(255,255,255,.04);color:#dbe3ff;border:1px solid #2a355d}
  .disclaimer{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:#fde68a;padding:10px;border-radius:6px;margin-bottom:12px}
  .sidepanel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--stroke);padding:12px;border-radius:8px;height:100%}
  .diagram{border:1px dashed var(--stroke);border-radius:8px;padding:8px;background:var(--field)}
  .small{font-size:.85rem;color:var(--muted)}
  footer{font-size:.85rem;color:var(--muted);text-align:center;margin-top:14px}
  .top-actions{display:flex;gap:.5rem;flex-wrap:wrap}
  .inline{display:inline-block;margin-right:.5rem}
  .hint{font-size:.85rem;color:#cbd5e1}
  @media (max-width:980px){.grid{grid-template-columns:1fr}.sidepanel{order:2}}

  /* OS toggle pills */
  .os-toggle{display:inline-flex;align-items:center;border:1px solid var(--stroke);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.04)}
  .os-toggle button{background:transparent;color:#cfe0ff;padding:.5rem .85rem;border:0;border-right:1px solid var(--stroke);cursor:pointer;font-weight:600}
  .os-toggle button:last-child{border-right:0}
  .os-toggle button[aria-pressed="true"]{background:var(--brand);color:#fff}
  .os-toggle .badge{font-size:.72rem;margin-left:.4rem;padding:.1rem .35rem;border-radius:6px;background:rgba(255,255,255,.15)}
 

/* ===== Layout fixes (Dec 2025) ===== */
/* Tool header – match other tools pages */
.tool-header{
  background: #0a0e27;            /* same black/navy used site-wide */
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
}

.tool-header h1{
  margin: 0;
}

.tool-header .muted{
  margin-top: 4px;
}

/* The HTML uses .fw-grid (not .grid). Without this, the preview panel drops below. */
.fw-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap: 1rem;
  align-items: start;
}

@media (max-width:980px){
  .fw-grid{ grid-template-columns: 1fr; }
  .sidepanel{ order: 2; }
}

/* Keep form controls from stretching edge-to-edge on wide screens */
label.row{ flex-wrap: wrap; }

label.row .inline{
  flex: 0 0 160px;
}

label.row select,
label.row input[type="text"]{
  width: auto;
  flex: 1 1 320px;
  max-width: 520px;
}

/* Multi-select can stay wider but still bounded */
#countrySelect{
  width: auto;
  max-width: 520px;
}

/* Textareas should remain full width */
.output-wrap textarea,
textarea#output{
  width: 100%;
}