/* ============================================================
   07 — ADMIN
   The console is deliberately not the same colour as the product.
   A rose stripe, a rose brand mark and a permanent "admin" chip,
   so nobody ever confuses the two at a glance.
   ============================================================ */

body.is-admin{position:relative}
body.is-admin::before{
  content:"";position:fixed;left:0;right:0;top:0;height:3px;z-index:120;pointer-events:none;
  background:linear-gradient(90deg,var(--rose),var(--gold) 45%,var(--rose));
}
body.is-admin .brand .mk{background:linear-gradient(135deg,var(--rose),var(--gold))}
body.is-admin .side a.on{background:rgba(255,107,90,.14);color:var(--text)}
body.is-admin .side a.on::before{background:linear-gradient(180deg,var(--rose),var(--gold))}
body.is-admin .page-hd{border-bottom-color:rgba(255,107,90,.28)}

.adminflag{
  margin:0 12px 16px;padding:9px 11px;border-radius:10px;
  border:1px solid rgba(255,107,90,.32);background:rgba(255,107,90,.09);
  font:500 10.5px/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--rose);
}
@media(max-width:900px){.adminflag{display:none}}

/* the admin console never gets the aurora — it should feel like a back office */
body.is-admin .aurora{display:none}

/* ============================================================
   FORM VALIDATION — used across signup, admin and the builder
   ============================================================ */
.fieldmsg{margin-top:6px;font:400 12px/1.4 var(--ui);color:var(--dim);min-height:0}
.fieldmsg.bad{color:var(--rose)}
.fld input.invalid,.fld select.invalid,.fld textarea.invalid{
  border-color:var(--rose);box-shadow:0 0 0 3px rgba(255,107,90,.18);
}

/* sortable table headings */
table.tbl th[data-sort]{cursor:pointer;user-select:none;position:sticky}
table.tbl th[data-sort]:hover{color:var(--text)}
table.tbl th[data-sort]::after{content:"↕";margin-left:7px;opacity:.35;font-size:10px}
table.tbl th[aria-sort="ascending"]::after{content:"↑";opacity:1;color:var(--cyan)}
table.tbl th[aria-sort="descending"]::after{content:"↓";opacity:1;color:var(--cyan)}

/* rows hidden by paging must not leave a gap */
table.tbl tbody tr[style*="display: none"]{border:0}

/* provider rows reuse .rule but need room for the note line */
.rule .txt .small{display:block;margin-top:3px}

/* payment method marks in the checkout */
.methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.method{
  display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--line);background:var(--glass);transition:border-color .15s,background .15s;
}
.method:hover{border-color:rgba(168,85,247,.5)}
.method[aria-checked="true"]{border-color:var(--blue);background:rgba(168,85,247,.12)}
.method .mk{
  width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--spectrum-soft);color:var(--cyan);font:600 11px/1 var(--mono);
}
.method b{font-size:13px;display:block}
.method span{font-size:11.5px;color:var(--faint)}

/* order summary */
.summary{display:grid;gap:10px;font-size:13.5px}
.summary .row{display:flex;justify-content:space-between;gap:16px}
.summary .row.total{
  border-top:1px solid var(--line);padding-top:12px;margin-top:4px;
  font-size:16px;font-weight:600;
}
.summary .row span:last-child{font-family:var(--mono)}

/* trust strip under the pay button */
.trust{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px}
.trust span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--faint)}
.trust svg{opacity:.8}

@media(max-width:560px){
  .methods{grid-template-columns:1fr 1fr}
}

/* ============================================================
   OPERATOR CHROME
   The admin console is not the customer dashboard with a
   different colour. A customer is looking at their own account;
   an operator is about to change something for everybody.

   So the top of every admin page carries the three things
   somebody in that position needs in view before they click:
   WHICH environment, WHO they are, and whether anything is on
   fire. None of those belong on a customer's page and all three
   belong here.
   ============================================================ */
.opbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 22px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,79,216,.07),transparent);
  position:sticky;top:0;z-index:30;backdrop-filter:blur(10px);
}
.env{
  font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  padding:6px 11px;border-radius:var(--r-sm);flex:0 0 auto;
}
/*  Production is red. Not because it is broken — because the one mistake this
    bar exists to prevent is doing something here while believing you are on
    staging. A calm colour would defeat the point. */
.env.live{background:rgba(255,107,90,.16);color:var(--rose);
  border:1px solid rgba(255,107,90,.45)}
.env.staging{background:rgba(49,229,164,.14);color:var(--mint);
  border:1px solid rgba(49,229,164,.4)}

.opsearch{
  flex:1 1 260px;min-width:200px;position:relative;display:flex;align-items:center;gap:9px;
  padding:0 12px;height:34px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:rgba(255,255,255,.045);color:var(--faint);
}
.opsearch input{
  flex:1;background:none;border:0;color:var(--text);font:400 13px var(--ui);outline:none;
}
.opsearch input::placeholder{color:var(--faint)}
.opsearch kbd{
  font:500 10px/1 var(--mono);color:var(--faint);
  padding:4px 6px;border:1px solid var(--line);border-radius:4px;
}

.opstate{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.opstat{
  font:400 11.5px/1 var(--mono);color:var(--dim);display:inline-flex;align-items:center;gap:6px;
}
.opstat b{color:var(--text);font-weight:500}

.opwho{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font:500 12px/1 var(--ui);color:var(--dim);
}
.opwho i{
  width:24px;height:24px;border-radius:50%;background:var(--spectrum);color:#12061F;
  display:grid;place-items:center;font:700 10px/1 var(--display);font-style:normal;
}

/*  The kill switch is one click from every admin page. An operator who has to
    navigate to reach it is an operator who hesitates, and hesitation is the
    expensive part. */
.opkill{
  display:flex;align-items:center;gap:8px;margin:10px 12px 2px;padding:9px 12px;
  border:1px solid rgba(255,107,90,.4);border-radius:var(--r-sm);
  background:rgba(255,107,90,.09);color:var(--rose);
  font:600 12px/1 var(--display);
}
.opkill:hover{background:rgba(255,107,90,.18)}

/*  Denser than the customer's. An operator scans hundreds of rows and reads
    almost none of them; a customer reads a handful and scans none. */
.is-admin .page-hd.admin-hd{padding-top:16px;padding-bottom:12px}
.is-admin .tbl td,.is-admin .tbl th{padding-top:9px;padding-bottom:9px;font-size:12.5px}
.is-admin .tbl td.acts{white-space:nowrap;display:flex;gap:6px}
.is-admin .panel-bd{padding-top:14px}

@media(max-width:900px){
  .opstate{display:none}
  .opbar{padding:9px 16px;gap:10px}
}

/* ---------- key rows ------------------------------------------
   A saved key is never shown back — only whether one is set. A
   panel that echoes a secret leaks it to anybody who reaches the
   screen, including a shoulder and a screen-share.
   ------------------------------------------------------------ */
.keyrow{display:grid;gap:6px;padding:14px 0}
.keyrow + .keyrow{border-top:1px solid var(--line-2)}
.k-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.k-head b{font:600 14px/1.2 var(--display)}
.k-head code{font:400 11px var(--mono);color:var(--faint)}
.k-help{font-size:12.5px;line-height:1.55;color:var(--dim)}
.k-in{display:flex;align-items:center;gap:10px;margin-top:4px}
.k-in input{
  flex:1;min-width:0;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:var(--text);font:400 13px var(--mono);
}
.k-in input:focus{outline:none;border-color:rgba(255,79,216,.5)}
.k-in .riskchip{flex:0 0 auto}
@media(max-width:560px){.k-in{flex-wrap:wrap}}

/* an empty table, said plainly. A row of dashes would still look like a row */
.tl-empty td{
  padding:26px 16px;text-align:center;color:var(--faint);
  font-size:13px;line-height:1.6;
}

/* ============================================================
   THE OPERATOR SIDEBAR

   Visibly not the customer's. Same geometry, so nothing about the
   layout has to change, but a different edge and a different
   header — because the fastest way to make somebody act on the
   wrong account is to give two consoles the same chrome.

   The customer sidebar is magenta-lit and starts with a bridge
   picker. This one starts with WHO YOU ARE, which is the fact
   that matters when the next click can stop every customer's
   trading.
   ============================================================ */
.side-admin{
  /*  A cool edge against the customer side's magenta. Colour is
      never the only signal — the operator's name at the top is —
      but at a glance it says "different room".  */
  border-right:1px solid rgba(109,59,245,.28);
  background:linear-gradient(180deg,rgba(109,59,245,.06),transparent 40%);
}

.adminwho{
  margin:0 4px 16px;padding:12px;
  border:1px solid rgba(109,59,245,.34);border-radius:var(--r);
  background:rgba(109,59,245,.10);
}
.adminwho .lbl{
  display:block;font:500 9.5px/1 var(--mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
.adminwho b{
  display:block;font:600 13px/1.25 var(--display);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/*  Control is destructive: the kill switch, the flags, the keys.
    Separated from the groups above it so the click nobody meant to
    make is not the one next to "Executions".  */
.side-admin .side-grp:nth-last-child(2){
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,107,90,.22);
}
.side-admin .side-grp:nth-last-child(2) > .lbl{color:var(--rose)}

/*  Leaving the console is a leave, not a peer of the sections.  */
.side-admin .side-grp:last-child{
  margin-top:10px;padding-top:12px;
  border-top:1px solid var(--line-2);
}
.side-admin .side-grp:last-child a{color:var(--faint)}
.side-admin .side-grp:last-child a:hover{color:var(--dim)}