@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* Carrier gateway detail (/gateways/:id) */
.vp-gs {
  --blue:#444DF9; --green:#15803D; --green-bg:#DCFCE7;
  --red:#B91C1C; --red-bg:#FEE2E2; --amber:#B45309; --amber-bg:#FEF3C7;
  --ink:#0F172A; --text:#1E293B; --muted:#5A6B82; --soft:#94A3B8;
  --line:#E4E9F2; --line-soft:#EEF2F8; --surface:#FFFFFF; --hover:#F8FAFF;
  --r:11px; --mono:"JetBrains Mono","Roboto Mono",ui-monospace,monospace;
  color: var(--text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px; line-height: 1.5; padding: 0 0 60px;
  -webkit-font-smoothing: antialiased;
}
.vp-gs h1, .vp-gs h2, .vp-gs h3 { margin: 0; color: var(--ink); letter-spacing: -.02em; }
.vp-gs a { color: var(--blue); text-decoration: none; }
.vp-gs a:hover { text-decoration: underline; }
.vp-gs .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* header */
.vp-gs .gs-head { background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 20px; margin-bottom: 14px; }
.vp-gs .gs-crumb { font-size: 12.5px; color: var(--soft); margin-bottom: 6px; }
.vp-gs .gs-crumb a { color: var(--muted); }
.vp-gs .gs-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.vp-gs .gs-id { min-width: 0; flex: 1 1 320px; }
.vp-gs .gs-id h1 { font-size: 21px; font-weight: 700; overflow-wrap: anywhere; }
.vp-gs .gs-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px;
  font-family: var(--mono); font-size: 11.5px; color: var(--soft); }
.vp-gs .gs-meta .sep { color: #CBD5E1; }
.vp-gs .gs-copy { border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 6px; padding: 1px 7px; font-size: 10.5px; font-family: Inter, sans-serif; cursor: pointer; }
.vp-gs .gs-copy:hover { border-color: #C9D3E6; color: var(--text); }

.vp-gs .gs-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.vp-gs .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--line-soft); color: var(--muted); }
.vp-gs .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--soft); }
.vp-gs .chip.ok { background: var(--green-bg); color: var(--green); }
.vp-gs .chip.ok .dot { background: var(--green); }
.vp-gs .chip.bad { background: var(--red-bg); color: var(--red); }
.vp-gs .chip.bad .dot { background: var(--red); }
.vp-gs .chip.warn { background: var(--amber-bg); color: var(--amber); }
.vp-gs .chip.warn .dot { background: var(--amber); }

/* actions */
.vp-gs .gs-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.vp-gs .gs-actions a { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text) !important;
  font-size: 13px; font-weight: 500; text-decoration: none !important; transition: border-color .14s, background .14s; }
.vp-gs .gs-actions a:hover { border-color: #C9D3E6; background: #FCFDFF; }
.vp-gs .gs-actions a.gs-primary { background: var(--blue) !important; border-color: var(--blue) !important; color: #fff !important; }
.vp-gs .gs-actions a.gs-primary:hover { background: #3A42D8 !important; }
.vp-gs .gs-actions a.gs-danger { color: var(--red) !important; border-color: #F1C4C4 !important; background: #FEF7F7 !important; }
.vp-gs .gs-actions a.gs-danger:hover { background: #FDEDED !important; border-color: #E9A9A9 !important; }

/* kpi tiles */
.vp-gs .gs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.vp-gs .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px; }
.vp-gs .kpi .k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--soft); }
.vp-gs .kpi .v { margin-top: 5px; font-size: 20px; font-weight: 600; color: var(--ink);
  font-family: var(--mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.vp-gs .kpi .v.txt { font-family: Inter, sans-serif; font-size: 15px; font-weight: 600; }
.vp-gs .kpi .v.none { color: var(--soft); font-weight: 400; }

/* layout */
.vp-gs .gs-shell { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .vp-gs .gs-shell { grid-template-columns: 1fr; } }
.vp-gs .gs-main { min-width: 0; }
.vp-gs .gs-rail > * { margin-bottom: 12px; }

/* tabs */
.vp-gs .tabs { background: transparent; border: 0; }
.vp-gs .tabs > ul.nav-tabs, .vp-gs .tabs > ul.ui-tabs-nav {
  display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 14px; padding: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.vp-gs .tabs > ul li { list-style: none; margin: 0; padding: 0; background: none; border: 0; float: none; }
.vp-gs .tabs > ul li a { display: block; padding: 7px 13px; border-radius: 8px; font-size: 13px;
  font-weight: 500; color: var(--muted) !important; text-decoration: none !important; transition: background .12s, color .12s; }
.vp-gs .tabs > ul li a:hover { background: var(--hover); color: var(--text) !important; }
.vp-gs .tabs > ul li.ui-tabs-active a,
.vp-gs .tabs > ul li.ui-state-active a,
.vp-gs .tabs > ul li.active a,
.vp-gs .tabs > ul li[aria-selected="true"] a,
.vp-gs .tabs > ul li.vp-on a { background: #EEF0FF; color: var(--blue) !important; font-weight: 600; }
.vp-gs .tabs .ui-tabs-panel, .vp-gs .tabs .tab-content > div { padding: 0; border: 0; background: transparent; }

/* cards */
.vp-gs .gs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.vp-gs .card { background: var(--surface); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.vp-gs .card > h3, .vp-gs .card > .card-head { display: flex; align-items: center; gap: 9px;
  padding: 12px 17px; border-bottom: 1px solid var(--line-soft); font-size: 12px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: #FCFDFF; }
.vp-gs .card table { width: 100%; border-collapse: collapse; margin: 0; }
.vp-gs .card tr { border-bottom: 1px solid var(--line-soft); }
.vp-gs .card tr:last-child { border-bottom: 0; }
.vp-gs .card tr:hover { background: var(--hover); }
.vp-gs .card th { width: 46%; text-align: left; padding: 9px 8px 9px 17px; font-size: 12.5px;
  font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0; vertical-align: top;
  background: transparent; border: 0; }
.vp-gs .card td { padding: 9px 17px 9px 8px; font-size: 13.5px; color: var(--text); vertical-align: top;
  overflow-wrap: anywhere; border: 0; }
.vp-gs .card td .mono, .vp-gs .card td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.vp-gs .card .empty { color: var(--soft); font-style: normal; font-size: 12.5px; text-transform: lowercase; }
.vp-gs .card .status_tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px;
  font-weight: 700; letter-spacing: .03em; background: var(--line-soft); color: var(--muted); text-transform: uppercase; }
.vp-gs .card .status_tag.yes { background: var(--green-bg); color: var(--green); }
.vp-gs .card .status_tag.no { background: var(--red-bg); color: var(--red); }

/* other panels inside tabs keep the card look */
.vp-gs .tabs .attributes_table { background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; overflow: hidden; margin-bottom: 14px; }
.vp-gs .tabs .attributes_table table { width: 100%; border-collapse: collapse; margin: 0; }
.vp-gs .tabs .attributes_table tr { border-bottom: 1px solid var(--line-soft); }
.vp-gs .tabs .attributes_table tr:last-child { border-bottom: 0; }
.vp-gs .tabs .attributes_table tr:hover { background: var(--hover); }
.vp-gs .tabs .attributes_table th { width: 42%; text-align: left; padding: 9px 8px 9px 17px;
  font-size: 12.5px; font-weight: 500; color: var(--muted); text-transform: none; letter-spacing: 0;
  vertical-align: top; background: transparent; border: 0; }
.vp-gs .tabs .attributes_table td { padding: 9px 17px 9px 8px; font-size: 13.5px; vertical-align: top;
  overflow-wrap: anywhere; border: 0; }
.vp-gs .tabs .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
  margin-bottom: 14px; overflow: hidden; }
.vp-gs .tabs .panel > h3 { padding: 12px 17px; border-bottom: 1px solid var(--line-soft); font-size: 12px;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: #FCFDFF; }
.vp-gs .tabs .panel_contents { padding: 14px 17px; }
.vp-gs .tabs pre { background: #F7F9FC; border: 1px solid var(--line-soft); border-radius: 9px;
  padding: 12px 14px; font-family: var(--mono); font-size: 12.5px; overflow: auto; }

/* right rail (yeti sidebar sections) */
.vp-gs .gs-rail .sidebar_section { background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; overflow: hidden; margin: 0 0 12px; padding: 0; width: auto; }
.vp-gs .gs-rail .sidebar_section > h3 { padding: 11px 15px; margin: 0; border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: #FCFDFF; }
.vp-gs .gs-rail .sidebar_section > div, .vp-gs .gs-rail .sidebar_section > ul,
.vp-gs .gs-rail .sidebar_section > h3 ~ * { padding: 12px 15px; font-size: 13px; color: var(--muted); margin: 0; }
.vp-gs .gs-rail .sidebar_section ul { list-style: none; }
.vp-gs .gs-rail .sidebar_section li { padding: 3px 0; }
.vp-gs .gs-rail .sidebar_section table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vp-gs .gs-rail .sidebar_section th, .vp-gs .gs-rail .sidebar_section td { padding: 5px 0; text-align: left;
  font-weight: 500; color: var(--muted); }

.vp-gs .gs-foot { margin-top: 18px; font-size: 12px; color: var(--soft); }