/* ============================================================================
   SIP Toolkit Suite — shared design system (v5.0.2 "Control" restyle)

   A clean, neutral, enterprise-console look (in the spirit of Cisco Control
   Hub): near-black surfaces, hairline borders, one blue accent, humanist
   sans for ALL interface text, monospace reserved for protocol data (SIP,
   ladders, ids). Served locally at /static/shared/app.css — no CDN.

   The :root block still defines every historical variable name the tools
   use (--tx/--rx, --sent/--recv, --in/--out, the profile tester's
   --surface/--teal family, …) so all pages resolve to ONE palette. Ladder
   direction colors (tx=amber, rx=cyan) are kept as data-viz constants,
   independent of the UI accent.
   ========================================================================== */

:root{
  /* core surface + ink (dark, neutral — no blue cast) */
  --bg:#0e0e10; --panel:#17171a; --panel-2:#1e1e22; --line:#2a2a30;
  --ink:#e8eaed; --ink-dim:#9aa0a8; --ink-faint:#63686f;

  /* UI accent (links, focus, active, primary buttons) */
  --accent:#649eff;
  --accent2:#d8a23e;           /* secondary highlight (taglines, warnings) */

  /* status */
  --ok:#3fb970; --bad:#f0655a; --crit:#f0655a; --fail:#f0655a;
  --warn:#e0a63f; --info:#649eff;

  /* direction (ladders — data-viz constants, NOT the UI accent) */
  --tx:#e3a13d; --rx:#4fc3e0;
  --sent:#e3a13d; --recv:#4fc3e0;
  --in:#4fc3e0; --out:#e3a13d;

  /* entities (CUCM / E2E ladders) */
  --node:#b98ae0; --cube:#b98ae0; --cucm:#5fd0c0;
  --webex:#3fb970; --zoom:#649eff;

  /* legacy aliases (sip-profile-tester palette) */
  --surface:var(--panel); --surface2:var(--panel-2);
  --border:var(--line); --border-soft:#242429;
  --teal:var(--accent); --teal-dim:#649eff22; --teal-mid:#649eff55;
  --amber:var(--accent2); --amber-dim:#d8a23e22;
  --red:var(--bad); --red-dim:#f0655a22;
  --green:var(--ok); --green-dim:#3fb97022;
  --blue:var(--info); --blue-dim:#649eff18;
  --muted:var(--ink-dim); --text:var(--ink); --text-dim:#c3c8ce;

  /* header gradient (subtle accent wash, used on every page header) */
  --head-grad:linear-gradient(90deg,rgba(100,158,255,.13),rgba(100,158,255,0) 55%);

  /* shape + type */
  --radius:10px; --radius-lg:14px;
  --sans:"Inter","SF Pro Text",system-ui,-apple-system,"Segoe UI",Roboto,
         "Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","JetBrains Mono","Consolas",
         "Menlo",monospace;
}

/* --------------------------------------------------------- light theme */
:root[data-theme="light"]{
  --bg:#f5f6f8; --panel:#ffffff; --panel-2:#eef0f3; --line:#dde0e5;
  --ink:#1a1d21; --ink-dim:#5a6068; --ink-faint:#8d939b;
  --accent:#2765d1; --accent2:#8f6a14;
  --ok:#157a45; --bad:#c23a2e; --crit:#c23a2e; --fail:#c23a2e;
  --warn:#9c6a06; --info:#2765d1;
  --tx:#a06a10; --rx:#0a7fa0;
  --sent:#a06a10; --recv:#0a7fa0; --in:#0a7fa0; --out:#a06a10;
  --node:#8a45b8; --cube:#8a45b8; --cucm:#0f766e;
  --webex:#157a45; --zoom:#2765d1;
  --head-grad:linear-gradient(90deg,rgba(39,101,209,.10),rgba(39,101,209,0) 55%);
  --border-soft:#e7eaee; --text-dim:#3d434b;
  --teal-dim:#2765d122; --teal-mid:#2765d155;
  --amber-dim:#8f6a1422; --red-dim:#c23a2e22; --green-dim:#157a4522;
  --blue-dim:#2765d118;
}
:root[data-theme="light"] ::selection{background:#c4d8f5}

/* embedded mode: page runs inside the workspace canvas iframe — the shell
   provides the chrome, so the page hides its own. */
html.embedded .app-topbar,html.embedded .app-footer{display:none}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);min-height:100%}
body{font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:#2c3d5c}

/* ---------------------------------------------------------------- topbar */
.app-topbar{border-bottom:1px solid var(--line);background:var(--panel)}
.app-topbar-inner{max-width:none;margin:0;padding:0 20px;height:52px;
                  display:flex;align-items:center;gap:12px}
.app-brand{display:flex;align-items:center;gap:10px;font-size:14.5px;
           font-weight:600;letter-spacing:-.01em;color:var(--ink);
           text-decoration:none;white-space:nowrap}
.app-brand:hover{text-decoration:none}
.app-brand .mark{width:24px;height:24px;border-radius:6px;flex:0 0 auto;
                 background:linear-gradient(135deg,var(--accent),#7db1ff);
                 display:flex;align-items:center;justify-content:center;
                 color:#fff;font-size:11px;font-weight:700}
.app-brand .mark-img{width:24px;height:24px;border-radius:6px;flex:0 0 auto;
                     display:block}
:root[data-theme="light"] .app-brand .mark{color:#fff}
.app-sep{color:var(--ink-faint);font-size:13px}
.app-toolname{font-size:13px;color:var(--ink-dim);letter-spacing:0}
.app-topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.app-version{font-size:11.5px;color:var(--ink-faint);white-space:nowrap}
.app-nav-link{font-size:13px;color:var(--ink-dim);text-decoration:none;
              white-space:nowrap;padding:6px 10px;border-radius:8px}
.app-nav-link:hover{color:var(--ink);background:var(--panel-2);text-decoration:none}
.app-logout-btn{background:transparent;border:1px solid var(--line);
                color:var(--ink-dim);font-family:var(--sans);font-size:12.5px;
                border-radius:999px;padding:5px 14px;cursor:pointer}
.app-logout-btn:hover{color:var(--ink);border-color:var(--ink-dim)}

/* ---------------------------------------------------------------- footer */
.app-footer{border-top:1px solid var(--line);margin-top:48px;
            padding:18px 0;color:var(--ink-faint);font-size:12px}
.app-footer-inner{max-width:1240px;margin:0 auto;padding:0 24px}

/* --------------------------------------------------------------- shared components
   Defaults for pages that don't bring their own versions; per-tool CSS may
   refine these, and shared/overrides.css (loaded after tool CSS) keeps
   headings/typography consistent suite-wide. */
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

.panel{background:var(--panel);border:1px solid var(--line);
       border-radius:var(--radius);padding:20px;margin-bottom:16px}
.panel h2{font-size:13px;font-family:var(--sans);font-weight:600;
          text-transform:none;letter-spacing:0;color:var(--ink);
          margin-bottom:14px}

button{font-family:var(--sans);font-size:13.5px;font-weight:600;border:none;
       border-radius:999px;padding:9px 18px;cursor:pointer}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink-dim);border:1px solid var(--line);
           border-radius:999px}
.btn-ghost:hover{color:var(--ink);border-color:var(--ink-dim)}

input[type=text],input[type=password],input[type=email],input[type=number],
input[type=date],input[type=datetime-local],select,textarea{
  background:var(--panel-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink);font-family:var(--sans);font-size:13.5px;padding:9px 12px}
textarea{font-family:var(--mono);font-size:12.5px}   /* pasted traces = data */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--ink-faint)}
label{color:var(--ink-dim)}

table{border-collapse:collapse;width:100%}
th{font-family:var(--sans);font-size:11px;font-weight:600;text-transform:uppercase;
   letter-spacing:.06em;color:var(--ink-dim);text-align:left;
   padding:9px 10px;border-bottom:1px solid var(--line)}
td{font-size:13px;padding:9px 10px;border-bottom:1px solid var(--border-soft)}

.pill{display:inline-block;font-family:var(--sans);font-size:11px;font-weight:600;
      letter-spacing:.02em;border-radius:999px;padding:2px 10px;
      border:1px solid var(--line);color:var(--ink-dim)}
.pill.ok{color:var(--ok);border-color:var(--ok)}
.pill.bad{color:var(--bad);border-color:var(--bad)}
.pill.warn{color:var(--warn);border-color:var(--warn)}

.chip{font-family:var(--sans);font-size:12.5px;letter-spacing:0;
      border:1px solid var(--line);background:var(--panel);color:var(--ink-dim);
      border-radius:999px;padding:6px 16px;cursor:pointer;transition:all .12s}
.chip:hover{color:var(--ink)}

/* ==================================================================
   COMPONENT LIBRARY (v5.0.3) — the single source of truth for every
   recurring interface element. Tool pages use these classes instead of
   redefining them; shared/overrides.css (loaded after per-tool CSS)
   enforces the same look even where legacy rules linger.
   See UI_GUIDE.md for how to build a new page from these parts.
   ================================================================== */

/* --- file upload drop zone (identical on every app) */
.drop{border:1.5px dashed var(--line);border-radius:var(--radius);
      padding:28px 22px;text-align:center;color:var(--ink-dim);
      font-size:13.5px;background:var(--panel);cursor:pointer;
      transition:border-color .15s,background .15s}
.drop.hover,.drop:focus-visible{border-color:var(--accent);
      background:rgba(100,158,255,.06);outline:none}
.drop strong,.drop b{color:var(--ink);font-weight:600}
.filename{font-family:var(--mono);font-size:12.5px;color:var(--ok)}

/* --- inline info note (blue left edge) */
.note{background:var(--panel-2);border:1px solid var(--line);
      border-left:3px solid var(--accent);border-radius:8px;
      padding:10px 14px;color:var(--ink-dim);font-size:12.5px;
      line-height:1.55;margin-bottom:12px}
.note b,.note strong{color:var(--ink)}

/* --- error box */
.err,.error{background:var(--red-dim);border:1px solid var(--bad);
      color:var(--bad);border-radius:8px;padding:10px 14px;
      font-size:13px;margin-bottom:14px}

/* --- stats strip (result summaries) */
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat{background:var(--panel);border:1px solid var(--line);
      border-radius:10px;padding:10px 16px;min-width:92px}
.stat .n{font-family:var(--mono);font-size:21px;font-weight:600;
         color:var(--ink)}
.stat .l{font-family:var(--sans);font-size:10.5px;font-weight:600;
         color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em}
.stat.ok .n{color:var(--ok)}
.stat.warn .n{color:var(--warn)}
.stat.crit .n,.stat.bad .n{color:var(--bad)}

/* --- inline progress indicator */
.progress{display:none;align-items:center;gap:11px;background:var(--panel-2);
      border:1px solid var(--line);border-left:3px solid var(--accent);
      border-radius:8px;padding:10px 14px;margin-top:12px}
.progress.show{display:flex}
.progress .msg{font-size:12.5px;color:var(--ink)}
.progress .el{font-family:var(--mono);font-size:12px;color:var(--ink-dim);
      margin-left:auto}
.spin{width:15px;height:15px;border:2px solid var(--line);
      border-top-color:var(--accent);border-radius:50%;
      animation:spin .7s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* --- secret input with show/hide */
.secret-wrap{position:relative}
.secret-wrap input{padding-right:56px;width:100%}
.reveal-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);
      background:var(--panel);border:1px solid var(--line);
      color:var(--ink-dim);border-radius:6px;font-size:10.5px;
      font-family:var(--sans);font-weight:600;padding:3px 9px;cursor:pointer}
.reveal-btn:hover{color:var(--ink);border-color:var(--accent)}

/* --- key/value detail table (drawer contents) */
table.kv{width:100%;border-collapse:collapse;font-family:var(--mono);
      font-size:12px}
table.kv td{padding:4px 8px 4px 0;border-bottom:1px solid var(--border-soft);
      vertical-align:top}
table.kv td.hn{color:var(--accent);white-space:nowrap;width:1%}

/* --- text helpers */
.muted{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.hidden{display:none}

/* --- right-side inspector / drawer flyout (visual skin; open/close
       mechanics stay in each page's JS) */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(560px,94vw);
        background:var(--panel);border-left:1px solid var(--line);
        box-shadow:-18px 0 40px rgba(0,0,0,.4);z-index:60;
        overflow-y:auto;padding:24px}
.drawer-close{position:absolute;top:14px;right:14px;background:none;
        border:1px solid var(--line);color:var(--ink-dim);border-radius:8px;
        width:30px;height:30px;cursor:pointer;padding:0}
.drawer-close:hover{color:var(--ink)}

/* return-to-workspace button (org/account pages). Hidden when the page is
   embedded in the workspace canvas — the sidebar is the way back there. */
.return-btn{display:inline-block;margin:0 0 14px;font-size:13px;
            color:var(--ink-dim);text-decoration:none;border:1px solid var(--line);
            border-radius:999px;padding:6px 14px;background:var(--panel)}
.return-btn:hover{color:var(--ink);border-color:var(--ink-dim);text-decoration:none}
html.embedded .return-btn{display:none}

/* auth / simple centered forms (login, signup, account) */
.auth-wrap{max-width:420px;margin:8vh auto 0;padding:0 24px}
.auth-card{background:var(--panel);border:1px solid var(--line);
           border-radius:var(--radius-lg);padding:30px}
.auth-card h1{font-family:var(--sans);font-size:20px;font-weight:600;
              letter-spacing:-.01em;margin-bottom:18px}
.auth-card h1 span{color:inherit}          /* no two-tone titles */
.auth-card .field{margin-bottom:14px}
.auth-card .field span{display:block;font-size:12px;letter-spacing:0;
                       text-transform:none;color:var(--ink-dim);margin-bottom:6px}
.auth-card input{width:100%}
.auth-card .actions{margin-top:18px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.flash{border:1px solid var(--line);border-left:3px solid var(--info);
       background:var(--panel);border-radius:8px;
       padding:10px 14px;margin:0 0 12px;font-size:13px}
.flash.error{border-left-color:var(--bad)}
.flash.success{border-left-color:var(--ok)}
.flash.warning{border-left-color:var(--warn)}

@media (max-width:700px){
  .app-topbar-inner{padding:0 12px}
  .app-footer-inner{padding:0 16px}
}