/* ============================================================
   api.css — RattusWMS Integration API docs, aligned to the
   RattusWMS v2 design system. Loaded ONLY on api.html.
   All rules scoped under .apidoc so nothing affects other pages.
   ============================================================ */

.apidoc{ --api-purple:#6d43c9; --api-purple-soft:#efeafb; background:var(--paper); }

/* ---------- Hero (night blueprint band) ---------- */
.apidoc-hero{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(160deg,var(--night) 0%,var(--night-2) 100%);
  border-bottom:1px solid var(--night-line);
}
.apidoc-hero::before{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(var(--night-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--night-grid) 1px,transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(180deg,#000,transparent 88%);
}
.apidoc-hero-inner{ position:relative; max-width:760px; margin:0 auto; padding:64px var(--gut) 52px; }
.apidoc-hero .hero-tag{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-300); display:block; margin-bottom:16px;
}
.apidoc-hero h1{
  font-family:var(--display); font-weight:600; letter-spacing:-.03em;
  font-size:clamp(30px,4.4vw,46px); line-height:1.06; color:var(--night-ink); margin:0;
}
.apidoc-hero h1 span{ color:var(--blue-300); }
.apidoc-hero p{ margin:16px auto 0; max-width:620px; color:var(--night-ink-2); font-size:16px; line-height:1.6; }
.apidoc-hero .hero-pills{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.apidoc-hero .pill{
  font-family:var(--mono); font-size:12px; color:var(--night-ink);
  background:rgba(136,178,216,.10); border:1px solid var(--night-line);
  padding:6px 13px; border-radius:var(--r-pill);
}
.apidoc-hero .pill.green{ color:#7fd6b0; border-color:rgba(127,214,176,.4); }
.apidoc-hero .pill.blue{ color:var(--blue-300); border-color:rgba(136,178,216,.4); }
.apidoc-hero .pill.purple{ color:#c4b5fd; border-color:rgba(196,181,253,.35); }

/* ---------- Layout (sidebar + content) ---------- */
.apidoc .layout{ display:grid; grid-template-columns:238px minmax(0,1fr); gap:48px; padding:40px 0 88px; align-items:start; }
.apidoc .sidebar{ position:sticky; top:92px; align-self:start; max-height:calc(100vh - 108px); overflow-y:auto; }
.apidoc .content{ min-width:0; max-width:840px; }

/* ---------- Sidebar nav ---------- */
.apidoc .nav-section{ margin-bottom:20px; }
.apidoc .nav-label{ font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.11em; text-transform:uppercase; color:var(--blue-700); margin-bottom:6px; padding-left:12px; }
.apidoc .nav-link{ display:block; padding:6px 12px; border-radius:var(--r-sm); font-size:13.5px; color:var(--ink-3); border-left:2px solid transparent; transition:color .15s,background .15s,border-color .15s; }
.apidoc .nav-link:hover{ color:var(--ink); background:var(--tint-2); }
.apidoc .nav-link.active{ color:var(--blue-700); background:var(--tint); border-left-color:var(--blue-700); font-weight:500; }

/* ---------- Section headers + body copy ---------- */
.apidoc .section{ margin-bottom:56px; scroll-margin-top:96px; }
.apidoc .section-header{ display:flex; align-items:center; gap:12px; margin-bottom:22px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.apidoc .section-icon{ width:38px; height:38px; border-radius:var(--r-md); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.apidoc .section-icon.blue{ background:var(--tint); }
.apidoc .section-icon.green{ background:var(--mint-soft); }
.apidoc .section-icon.purple{ background:var(--api-purple-soft); }
.apidoc .section-icon.orange{ background:var(--amber-soft); }
.apidoc .section-title{ font-family:var(--display); font-weight:600; letter-spacing:-.02em; font-size:22px; color:var(--ink); line-height:1.1; }
.apidoc .section-sub{ font-size:13px; color:var(--ink-3); margin-top:3px; }
.apidoc .dir-badge{ font-family:var(--mono); font-size:10px; padding:4px 11px; border-radius:var(--r-pill); margin-left:auto; flex-shrink:0; white-space:nowrap; font-weight:600; }
.apidoc .dir-badge.in{ background:var(--tint); color:var(--blue-700); border:1px solid var(--blue-100); }
.apidoc .dir-badge.out{ background:var(--mint-soft); color:var(--mint); border:1px solid #bfe6d5; }

.apidoc p{ font-size:15px; color:var(--ink-2); margin:0 0 15px; line-height:1.7; max-width:74ch; }
.apidoc h3{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--ink); margin:24px 0 10px; letter-spacing:-.01em; }
.apidoc h4{ font-family:var(--mono); font-weight:600; font-size:12.5px; color:var(--ink); margin:22px 0 8px; letter-spacing:.02em; }

/* ---------- Code blocks (light chrome, night code) ---------- */
.apidoc .code-block{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; margin:16px 0; box-shadow:var(--sh-1); }
.apidoc .code-header{ display:flex; align-items:center; justify-content:space-between; padding:9px 14px; background:var(--tint-2); border-bottom:1px solid var(--line); }
.apidoc .code-lang{ font-family:var(--mono); font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em; }
.apidoc .copy-btn{ font-family:var(--mono); font-size:10px; color:var(--blue-700); background:none; border:1px solid var(--line-strong); padding:3px 10px; border-radius:var(--r-xs); cursor:pointer; transition:all .15s; }
.apidoc .copy-btn:hover{ background:var(--blue-700); color:#fff; border-color:var(--blue-700); }
.apidoc pre{ padding:18px 20px; overflow-x:auto; font-family:var(--mono); font-size:12.5px; line-height:1.7; color:#cfe0f1; background:var(--night); white-space:pre; margin:0; }
.apidoc pre .kw{ color:#b9a3e8; }
.apidoc pre .str{ color:#7fd6b0; }
.apidoc pre .num{ color:#e3b778; }
.apidoc pre .cmt{ color:#6b83a0; }
.apidoc pre .key{ color:#8fc0e8; }

/* ---------- Endpoints ---------- */
.apidoc .endpoint{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin:16px 0; overflow:hidden; box-shadow:var(--sh-1); }
.apidoc .endpoint-header{ display:flex; align-items:center; gap:12px; padding:13px 18px; background:var(--tint-2); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.apidoc .method{ font-family:var(--mono); font-size:11px; font-weight:700; padding:4px 10px; border-radius:var(--r-xs); flex-shrink:0; color:#fff; }
.apidoc .method.post{ background:var(--mint); }
.apidoc .method.get{ background:var(--blue-600); }
.apidoc .endpoint-url{ font-family:var(--mono); font-size:13.5px; color:var(--ink); word-break:break-all; font-weight:500; }
.apidoc .endpoint-desc{ font-size:12px; color:var(--ink-3); margin-left:auto; }
.apidoc .endpoint-body{ padding:16px 18px; }

/* ---------- Tables ---------- */
.apidoc table{ width:100%; border-collapse:collapse; margin:16px 0; font-size:14px; }
.apidoc th{ text-align:left; padding:9px 14px; font-family:var(--mono); font-size:10px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em; border-bottom:1px solid var(--line); background:var(--tint-2); }
.apidoc td{ padding:11px 14px; border-bottom:1px solid var(--line-2); color:var(--ink-2); vertical-align:top; }
.apidoc td:first-child{ font-family:var(--mono); font-size:12.5px; color:var(--blue-700); }
.apidoc tr:last-child td{ border-bottom:none; }
.apidoc .req{ color:var(--rose); font-size:10px; font-family:var(--mono); }
.apidoc .opt{ color:var(--ink-4); font-size:10px; font-family:var(--mono); }
.apidoc .tag-new{ font-family:var(--mono); font-size:9px; font-weight:700; color:var(--mint); border:1px solid #bfe6d5; border-radius:3px; padding:0 5px; margin-left:6px; letter-spacing:.04em; }
.apidoc table.map td:first-child, .apidoc table.map td:nth-child(2){ font-family:var(--mono); font-size:12.5px; }
.apidoc table.map td:nth-child(2){ color:var(--mint); }

/* ---------- Status pills ---------- */
.apidoc .status{ display:inline-block; font-family:var(--mono); font-size:10px; font-weight:700; padding:3px 9px; border-radius:var(--r-xs); }
.apidoc .status.pending{ background:var(--paper-2); color:var(--ink-3); border:1px solid var(--line); }
.apidoc .status.processing{ background:var(--amber-soft); color:var(--amber); border:1px solid #ecd7ac; }
.apidoc .status.processed{ background:var(--mint-soft); color:var(--mint); border:1px solid #bfe6d5; }
.apidoc .status.failed, .apidoc .status.rejected{ background:var(--rose-soft); color:var(--rose); border:1px solid #f2c9c5; }

/* ---------- Info-box callouts ---------- */
.apidoc .info-box{ border-radius:var(--r-sm); padding:14px 18px; margin:16px 0; font-size:14px; border-left:3px solid; line-height:1.65; }
.apidoc .info-box.blue{ background:var(--tint); border-color:var(--blue-600); color:var(--blue-800); }
.apidoc .info-box.green{ background:var(--mint-soft); border-color:var(--mint); color:#0d6b4a; }
.apidoc .info-box.orange{ background:var(--amber-soft); border-color:var(--amber); color:#8a5a15; }
.apidoc .info-box.purple{ background:var(--api-purple-soft); border-color:var(--api-purple); color:#4a2c8f; }
.apidoc .info-box code{ font-family:var(--mono); font-size:12.5px; color:var(--ink); background:rgba(10,22,38,.05); padding:1px 5px; border-radius:3px; }
.apidoc .info-box strong{ color:inherit; }

/* ---------- Flow diagram ---------- */
.apidoc .flow{ display:flex; align-items:center; gap:0; margin:20px 0; flex-wrap:wrap; }
.apidoc .flow-box{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:10px 16px; font-size:12.5px; font-family:var(--mono); color:var(--ink); text-align:center; box-shadow:var(--sh-1); }
.apidoc .flow-arrow{ color:var(--blue-600); font-size:18px; padding:0 8px; }

/* ---------- Message cards ---------- */
.apidoc .msg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.apidoc .msg-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px; box-shadow:var(--sh-1); }
.apidoc .msg-type{ font-family:var(--mono); font-size:11px; font-weight:700; color:var(--blue-700); margin-bottom:4px; }
.apidoc .msg-dir{ font-size:10px; color:var(--ink-4); margin-bottom:6px; font-family:var(--mono); }
.apidoc .msg-desc{ font-size:12.5px; color:var(--ink-2); }
.apidoc .msg-badge{ display:inline-block; font-size:9px; padding:2px 6px; border-radius:3px; margin-top:6px; font-family:var(--mono); font-weight:700; }
.apidoc .msg-badge.live{ background:var(--mint-soft); color:var(--mint); }
.apidoc .msg-badge.soon{ background:var(--amber-soft); color:var(--amber); }
.apidoc .msg-badge.draft{ background:var(--api-purple-soft); color:var(--api-purple); }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .apidoc .layout{ grid-template-columns:1fr; gap:0; padding-top:26px; }
  .apidoc .sidebar{ position:static; max-height:none; overflow:visible; border-bottom:1px solid var(--line); padding-bottom:18px; margin-bottom:20px; }
  .apidoc .msg-grid{ grid-template-columns:1fr; }
  .apidoc .section-title{ font-size:19px; }
}
@media (max-width:560px){
  .apidoc-hero-inner{ padding:46px var(--gut) 38px; }
  .apidoc .endpoint-desc{ margin-left:0; width:100%; }
}