/* ============================================================
   Aurora Design System — Sipay API (Bootstrap-first)
   The UI is built on Bootstrap 5.3 components + utilities.
   This file keeps only what Bootstrap can't provide:
     1. Theme tokens (dark + light)
     2. The app shell (rail / sidebar / topbar) — custom layout
     3. The JSON viewer (syntax classes filled by aurora.js)
     4. A theme bridge mapping the Aurora palette onto Bootstrap
        5.3 `--bs-*` variables, so native Bootstrap components
        (card, form, table, modal, dropdown, badge, pagination,
        btn) render in the Aurora look with no per-component CSS.
   Pages use Bootstrap classes + utilities; avoid new custom CSS.
   ============================================================ */

/* ---- Tokens: dark (default) ---- */
:root, :root[data-theme="dark"]{
  --bg:#0b0d17; --panel:#141829; --panel-2:#1a1f36; --line:#252b45;
  --ink:#e7e9f5; --muted:#8a90b3; --faint:#5b6189;
  --violet:#7c6cff; --violet-2:#9d8bff; --cyan:#38e1d6;
  --green:#3ddc97; --amber:#ffb454; --red:#ff6b81;
  --grad: radial-gradient(1200px 600px at 12% -10%, rgba(124,108,255,.20), transparent 60%),
          radial-gradient(900px 500px at 100% 0%, rgba(56,225,214,.10), transparent 55%);
  --shadow: 0 8px 24px rgba(0,0,0,.35);
  --on-accent:#0b0d17;
  --rail-bg:rgba(10,12,22,.60);
  --side-bg:rgba(16,19,33,.55);
  --topbar-bg:rgba(11,13,23,.40);
  --ln:#3a4061;
  --topbar-h:57px;
  --content-pad:13px;
}

/* ---- Tokens: light ---- */
:root[data-theme="light"]{
  --bg:#f5f7fc; --panel:#ffffff; --panel-2:#f0f3fa; --line:#e3e8f2;
  --ink:#1b2138; --muted:#646b86; --faint:#6f7596;
  --violet:#6a5cff; --violet-2:#7c6cff; --cyan:#0fb5ab;
  --green:#0fa968; --amber:#c9820a; --red:#e0506a;
  --grad: radial-gradient(1100px 560px at 12% -12%, rgba(106,92,255,.10), transparent 60%),
          radial-gradient(800px 460px at 100% 0%, rgba(15,181,171,.07), transparent 55%);
  --shadow: 0 8px 24px rgba(20,30,60,.08);
  --rail-bg:rgba(255,255,255,.62);
  --side-bg:rgba(255,255,255,.58);
  --topbar-bg:rgba(255,255,255,.55);
  --ln:#aab2cc;
}

*{box-sizing:border-box}
body.aurora{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink);
  background-image:var(--grad);background-attachment:fixed;min-height:100vh}

/* ============================================================
   Shell grid
   ============================================================ */
.aurora-app{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.main{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.main-content{flex:1;min-width:0;padding:16px}

/* ============================================================
   Collections sidebar
   ============================================================ */
.side{grid-column:1;align-self:start;position:sticky;top:0;height:100vh;width:252px;z-index:20;
  border-right:1px solid var(--line);background:var(--side-bg);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;min-height:0}
.side .env{margin:12px 12px 10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  background:var(--panel);display:flex;align-items:center;gap:10px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);flex:none}
.side .env small{color:var(--muted);display:block;font-size:12px}
.side .env b{font-size:14px}
.side .env .brand-logo{width:30px;height:30px;border-radius:9px;text-decoration:none;flex:none;
  background:linear-gradient(135deg,var(--violet),var(--cyan));display:grid;place-items:center;
  font-weight:800;color:var(--on-accent)}
.side .search{margin:0 12px 8px;display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:8px 10px;color:var(--muted);font-size:13px}
.side .search svg{width:15px;height:15px;flex:none}
.side .search input{flex:1;border:none;background:transparent;color:var(--ink);font-size:13px;
  outline:none;font-family:inherit}
.side .search input::placeholder{color:var(--muted)}
.tree{flex:1;min-height:0;overflow:auto;padding:4px 8px 16px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tree::-webkit-scrollbar{width:8px}
.tree::-webkit-scrollbar-track{background:transparent}
.tree::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;
  border:2px solid transparent;background-clip:padding-box}
.tree::-webkit-scrollbar-thumb:hover{background:var(--faint);background-clip:padding-box}
.grp{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:7px;
  background:var(--side-bg);backdrop-filter:blur(10px);
  color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  padding:12px 10px 6px;font-weight:600}
.grp svg{width:13px;height:13px;flex:none}
.grp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:13px;
  color:var(--ink);cursor:pointer;text-decoration:none}
.nav-item:hover{background:var(--panel-2)}
.nav-item.active{box-shadow:inset 2px 0 0 var(--violet);
  background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 18%,transparent),transparent)}
.nav-item i,.nav-link i{font-size:13px;width:15px;text-align:center;color:var(--muted);flex:none}
.nav-item svg,.nav-link svg{width:15px;height:15px;flex:none}
.nav-item span,.nav-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-item.has-children{display:block;padding:0;background:none;box-shadow:none;cursor:default}
.nav-item.has-children>.nav-link{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;
  font-size:13px;color:var(--ink);text-decoration:none}
.nav-item.has-children>.nav-link:hover{background:var(--panel-2)}
.menu-content{display:flex;flex-direction:column;gap:2px;margin:2px 0 2px 16px;padding-left:8px;
  border-left:1px solid var(--line)}
.menu-content .nav-item{font-size:12.5px;padding:6px 9px}
.tree-group[hidden]{display:none}
.nav-item.has-children>.menu-content{display:none}
.nav-item.has-children.open>.menu-content{display:flex}
.nav-item.has-children.search-open>.menu-content{display:flex}
.nav-link .chev{margin-left:auto;width:14px;height:14px;transition:transform .15s ease;color:var(--muted)}
.nav-item.has-children.open>.nav-link .chev{transform:rotate(180deg)}

/* ============================================================
   Topbar
   ============================================================ */
.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:12px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--topbar-bg);backdrop-filter:blur(8px)}
.crumb{font-size:13px;color:var(--muted)}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sep{margin:0 6px;color:var(--faint)}
.tb-actions{display:flex;align-items:center;gap:9px}
.tb-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--muted);
  border:1px solid var(--line);background:var(--panel);cursor:pointer;text-decoration:none}
.tb-icon:hover{color:var(--ink);background:var(--panel-2)}
.tb-icon svg{width:16px;height:16px}
.user{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;cursor:pointer;
  font-size:13px;padding:4px 11px 4px 4px;border-radius:9px;border:1px solid var(--line);background:var(--panel)}
.user:hover{background:var(--panel-2);color:var(--ink)}
.user .av{width:27px;height:27px;border-radius:7px;display:grid;place-items:center;font-size:12px;
  font-weight:700;color:var(--on-accent);background:linear-gradient(135deg,var(--violet),var(--cyan))}

/* ============================================================
   JSON viewer — <pre class="code"><code class="aurora-json" data-raw>
   syntax spans are injected by aurora.js
   ============================================================ */
.code{margin:0;overflow:auto;max-height:60vh;padding:14px 16px;color:var(--ink);
  font:500 14px/1.7 'JetBrains Mono',monospace;background:var(--panel-2);
  border:1px solid var(--line);border-radius:10px;white-space:pre-wrap;word-break:break-word}
.code .k{color:var(--violet-2)}
.code .s{color:var(--green)}
.code .n{color:var(--amber)}
.code .b{color:var(--cyan)}
.code .p{color:var(--muted)}
.code .ln{color:var(--ln);display:inline-block;width:26px;user-select:none}

/* ============================================================
   Responsive — sidebar becomes an off-canvas drawer < 1200px
   ============================================================ */
@media (max-width:1200px){
  .aurora-app{grid-template-columns:1fr}
  /* Off-canvas drawer: fully off-screen to the left, slides in on .side-open. */
  .side{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);
    transition:transform .2s;box-shadow:var(--shadow)}
  body.side-open .side{transform:translateX(0)}
}

/* ============================================================
   BOOTSTRAP-FIRST THEME BRIDGE
   Maps the Aurora palette onto Bootstrap 5.3 CSS variables so
   native Bootstrap components adopt the Aurora look with NO
   per-component custom CSS. <html> carries data-bs-theme = data-theme.
   ============================================================ */
[data-bs-theme="dark"]{
  --bs-primary-rgb:124,108,255; --bs-success-rgb:61,220,151; --bs-danger-rgb:255,107,129;
  --bs-warning-rgb:255,180,84; --bs-info-rgb:56,225,214; --bs-link-color-rgb:157,139,255;
}
[data-bs-theme="light"]{
  --bs-primary-rgb:106,92,255; --bs-success-rgb:15,169,104; --bs-danger-rgb:224,80,106;
  --bs-warning-rgb:201,130,10; --bs-info-rgb:15,181,171; --bs-link-color-rgb:106,92,255;
}
[data-bs-theme]{
  --bs-body-bg:var(--bg); --bs-body-color:var(--ink); --bs-emphasis-color:var(--ink);
  --bs-secondary-color:var(--muted); --bs-tertiary-color:var(--faint);
  --bs-secondary-bg:var(--panel-2); --bs-tertiary-bg:var(--panel);
  --bs-border-color:var(--line);
  --bs-primary:var(--violet); --bs-success:var(--green); --bs-danger:var(--red);
  --bs-warning:var(--amber); --bs-info:var(--cyan);
  --bs-link-color:var(--violet-2); --bs-link-hover-color:var(--violet);
  --bs-border-radius:.625rem; --bs-border-radius-sm:.5rem;
  --bs-border-radius-lg:.875rem; --bs-border-radius-xl:1rem;
}
/* Component surfaces (override the component-local Bootstrap vars) */
.card{--bs-card-bg:var(--panel);--bs-card-cap-bg:var(--panel-2);--bs-card-border-color:var(--line);--bs-card-color:var(--ink);box-shadow:var(--shadow)}
.card-header{font-weight:600}
.modal{--bs-modal-bg:var(--panel);--bs-modal-border-color:var(--line);--bs-modal-color:var(--ink)}
.modal-header,.modal-footer{background:var(--panel-2)}
.dropdown-menu{--bs-dropdown-bg:var(--panel);--bs-dropdown-border-color:var(--line);--bs-dropdown-color:var(--ink);--bs-dropdown-link-color:var(--ink);--bs-dropdown-link-hover-bg:var(--panel-2);--bs-dropdown-link-hover-color:var(--ink);box-shadow:var(--shadow)}
.table{--bs-table-bg:transparent;--bs-table-color:var(--ink);--bs-table-border-color:var(--line);--bs-table-hover-bg:var(--panel-2);--bs-table-hover-color:var(--ink)}
.table>thead{--bs-table-color:var(--muted)}
.table>thead th{text-transform:uppercase;font-size:12px;letter-spacing:.4px}
.pagination{--bs-pagination-bg:var(--panel);--bs-pagination-color:var(--ink);--bs-pagination-border-color:var(--line);--bs-pagination-hover-bg:var(--panel-2);--bs-pagination-hover-color:var(--ink);--bs-pagination-focus-bg:var(--panel-2);--bs-pagination-active-bg:var(--violet);--bs-pagination-active-border-color:var(--violet)}
.list-group{--bs-list-group-bg:var(--panel);--bs-list-group-border-color:var(--line);--bs-list-group-color:var(--ink);--bs-list-group-action-hover-bg:var(--panel-2)}
/* Form controls — slightly elevated surface + violet focus ring */
.form-control,.form-select{background-color:var(--panel-2);border-color:var(--line);color:var(--ink)}
.form-control:focus,.form-select:focus{background-color:var(--panel-2);border-color:var(--violet);color:var(--ink);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--violet) 25%,transparent)}
.form-control::placeholder{color:var(--faint)}
.form-control[readonly]{background-color:var(--panel)}
.form-label{color:var(--muted);font-weight:500;margin-bottom:.4rem}
.form-text{color:var(--muted)}
.input-group-text{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
/* Primary button keeps the Aurora violet gradient */
.btn-primary{--bs-btn-color:#fff;--bs-btn-hover-color:#fff;--bs-btn-active-color:#fff;--bs-btn-bg:var(--violet);--bs-btn-border-color:var(--violet);--bs-btn-hover-bg:var(--violet-2);--bs-btn-hover-border-color:var(--violet-2);--bs-btn-active-bg:var(--violet-2);--bs-btn-active-border-color:var(--violet-2);background-image:linear-gradient(135deg,var(--violet),var(--violet-2));border:none}
.btn-outline-primary{--bs-btn-color:var(--violet-2);--bs-btn-border-color:var(--violet);--bs-btn-hover-bg:var(--violet);--bs-btn-hover-border-color:var(--violet);--bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--violet);--bs-btn-active-border-color:var(--violet)}
/* Alerts (flash) — token-tinted so both themes adapt */
.alert-success{--bs-alert-bg:color-mix(in srgb,var(--green) 14%,var(--panel));--bs-alert-border-color:color-mix(in srgb,var(--green) 35%,transparent);--bs-alert-color:var(--ink)}
.alert-danger{--bs-alert-bg:color-mix(in srgb,var(--red) 14%,var(--panel));--bs-alert-border-color:color-mix(in srgb,var(--red) 35%,transparent);--bs-alert-color:var(--ink)}
.alert-warning{--bs-alert-bg:color-mix(in srgb,var(--amber) 14%,var(--panel));--bs-alert-border-color:color-mix(in srgb,var(--amber) 35%,transparent);--bs-alert-color:var(--ink)}
.alert-info{--bs-alert-bg:color-mix(in srgb,var(--cyan) 14%,var(--panel));--bs-alert-border-color:color-mix(in srgb,var(--cyan) 35%,transparent);--bs-alert-color:var(--ink)}
/* JetBrains Mono helper for URLs / keys / code values */
.text-mono{font-family:'JetBrains Mono',monospace}

/* ---- Select2 (jQuery plugin — not a Bootstrap component) → Aurora ---- */
.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{
  background:var(--panel-2)!important;border:1px solid var(--line)!important;border-radius:10px!important;min-height:38px}
.select2-container--default .select2-selection__rendered,.select2-search__field{color:var(--ink)!important}
.select2-dropdown{background:var(--panel)!important;border:1px solid var(--line)!important;color:var(--ink)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:color-mix(in srgb,var(--violet) 30%,transparent)!important;color:var(--ink)!important}
.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:color-mix(in srgb,var(--violet) 22%,transparent)!important;border:none!important;color:var(--ink)!important;border-radius:6px}

/* ============================================================
   Compact density
   Bootstrap is rem-based, so lowering the root font-size scales
   type, spacing, and controls down proportionally across every
   page — the rem lever for all Bootstrap content. The px-based shell
   (sidebar/topbar) carries its own font-sizes, tuned to match this root.
   ============================================================ */
html{font-size:13.9px}
.main-content{padding:var(--content-pad)}
/* Cards a touch tighter */
.card{--bs-card-spacer-y:.85rem;--bs-card-spacer-x:1rem}
.card-header{padding-top:.55rem;padding-bottom:.55rem}
/* Denser tables */
.table{--bs-table-cell-padding-y:.5rem;--bs-table-cell-padding-x:.65rem;font-size:.875rem}
/* Slightly smaller controls + labels */
.form-control,.form-select{padding-top:.4rem;padding-bottom:.4rem;font-size:.875rem}
.form-label{font-size:.8rem;margin-bottom:.3rem}
.btn{--bs-btn-padding-y:.4rem;--bs-btn-padding-x:.85rem;--bs-btn-font-size:.875rem}
.input-group-text{font-size:.875rem;padding-top:.4rem;padding-bottom:.4rem}
.badge{font-weight:600}
/* Tame Bootstrap's large heading scale */
h1,.h1{font-size:1.6rem}
h2,.h2{font-size:1.4rem}
h3,.h3{font-size:1.2rem}
h4,.h4{font-size:1.05rem}
h5,.h5{font-size:.95rem}
h6,.h6{font-size:.85rem}
/* Modal padding a little tighter */
.modal-header,.modal-body,.modal-footer{padding:.85rem 1rem}

/* ============================================================
   Workbench components — API request/response pages
   Mockup: design-mockups/01-aurora-workbench.html
   Only what Bootstrap can't provide; all colors via tokens.
   ============================================================ */
.wb-urlbar{display:flex;gap:10px;align-items:center;
  position:sticky;top:var(--topbar-h);z-index:12;
  margin:0 calc(-1 * var(--content-pad)) 14px;padding:11px var(--content-pad);
  background:var(--panel-2);border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.wb-method{font:600 .8rem/1 'JetBrains Mono',monospace;background:color-mix(in srgb,var(--green) 14%,transparent);
  color:var(--green);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);
  padding:11px 14px;border-radius:10px;flex:none}
.wb-method.get{background:color-mix(in srgb,var(--cyan) 14%,transparent);color:var(--cyan);
  border-color:color-mix(in srgb,var(--cyan) 30%,transparent)}
.wb-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:500 .8rem/1 'JetBrains Mono',monospace;
  color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.wb-send{background:linear-gradient(135deg,var(--violet),var(--violet-2));color:#fff;border:none;
  padding:11px 22px;border-radius:10px;font-weight:600;font-size:.85rem;cursor:pointer;
  display:flex;gap:8px;align-items:center;flex:none;text-decoration:none;
  box-shadow:0 8px 24px color-mix(in srgb,var(--violet) 40%,transparent)}
.wb-send:hover{color:#fff;filter:brightness(1.05)}
.wb-send svg{width:16px;height:16px}
.wb-send.alt{background:var(--panel);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.wb-send.alt:hover{background:var(--panel-2);color:var(--ink);filter:none}

.wb-chips{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.wb-chip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:8px 12px}
.wb-chip .av{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:12px;
  font-weight:700;color:var(--on-accent);background:linear-gradient(135deg,var(--violet),var(--cyan))}
.wb-chip small{color:var(--muted);font-size:12px;display:block;line-height:1.2}
.wb-chip b{font-size:13.5px}

.wb-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;
  box-shadow:var(--shadow);overflow:hidden}
.wb-panel-h{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);
  background:var(--panel-2)}
.wb-panel-h>b{font-weight:600}
.wb-panel-b{padding:16px}
.wb-seg{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:3px}
.wb-seg span{font-size:13px;padding:5px 11px;border-radius:7px;color:var(--muted);cursor:default}
.wb-seg span.on{background:var(--panel-2);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 40%,transparent)}

.wb-pill{padding:4px 10px;border-radius:20px;font-size:12.5px;font-weight:700;flex:none}
.wb-pill.ok{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--green) 30%,transparent)}
.wb-pill.err{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 30%,transparent)}
.wb-meta{color:var(--muted);font-size:13px;display:flex;gap:16px}
.wb-meta b{color:var(--ink)}

.wb-empty{text-align:center;color:var(--muted);padding:36px 16px}