/*
  Copyright - A Produle Systems Private Limited. All Rights Reserved.

  The developer console's widgets: key tables, stat cards, the request
  builder, the create key sheet. The console pages sit inside the developer
  portal shell (DocsTemplates.page), so the header, the footer, the fonts and
  the theme come from docs.css; this file only styles what the console adds.

  Every colour is an alias of a docs.css token, so the console follows the
  reader's light or dark choice with no rules of its own. Scoped under .mfdev
  so nothing here reaches the shell around it.
*/

.mfdev{--blue:var(--mfd-blue);--blue-soft:var(--mfd-blue-soft);--blue-ink:var(--mfd-blue-ink);--ink:var(--mfd-ink);--muted:var(--mfd-muted);
  --faint:var(--mfd-faint);--line:var(--mfd-line);--surface:var(--mfd-surface);--surface2:var(--mfd-surface2);--paper:var(--mfd-paper);
  --violet:var(--mfd-violet);--violet-soft:var(--mfd-violet-soft);--green:var(--mfd-green-ink);--green-soft:var(--mfd-green-soft);
  --green-line:var(--mfd-green-line);--amber:var(--mfd-amber-ink);--amber-soft:var(--mfd-amber-soft);--amber-line:var(--mfd-amber-line);
  --red:var(--mfd-red);--code:var(--mfd-code-bg);--code-ink:var(--mfd-code-ink);
  --display:var(--mfd-display);--body:var(--mfd-body);--mono:var(--mfd-mono)}

/* The console main region is wider than an article: a key table has six columns. */
.mfd-console{max-width:1180px}
.mfd-console-try{max-width:none;padding-left:24px;padding-right:24px}
.mfd-console .mfd-lede{margin-bottom:6px}
.mfd-console h1{margin:0}
.mfd-console h2{font-size:20px;font-weight:600;margin:0}

/* ----- Controls ----- */
.mfdev .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;
  font:inherit;font-size:13.5px;font-weight:500;border:1px solid var(--line);background:var(--paper);color:var(--ink);
  white-space:nowrap;cursor:pointer;text-decoration:none!important}
.mfdev .btn:hover{background:var(--surface)}
.mfdev .btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.mfdev .btn.primary:hover{opacity:.9;background:var(--ink)}
.mfdev .btn.blue{background:var(--blue);color:#fff;border-color:var(--blue)}
.mfdev .btn.blue:hover{background:var(--blue);opacity:.92}
.mfdev .btn.sm{height:30px;padding:0 10px;font-size:12.5px}
.mfdev .btn.ghost{border-color:transparent;color:var(--muted)}
.mfdev .chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:500;
  border:1px solid var(--line);color:var(--muted);background:var(--paper);white-space:nowrap}
.mfdev .chip.plan{color:var(--blue-ink);background:var(--blue-soft);border-color:var(--mfd-blue-line)}
.mfdev .chip.ai{color:var(--violet);background:var(--violet-soft);border-color:var(--mfd-violet-line)}
.mfdev .chip.ok{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
.mfdev .chip.warn{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)}
.mfdev .chip.red{color:var(--red);background:var(--surface2);border-color:var(--line)}
.mfdev .input{height:34px;border:1px solid var(--line);border-radius:6px;padding:0 10px;display:flex;align-items:center;font-size:13px;
  background:var(--paper);color:var(--ink);font-family:inherit;width:100%;outline:none;min-width:0}
.mfdev .input:focus{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:1px}
.mfdev .input.ph{color:var(--faint)}
.mfdev textarea.input{height:auto;min-height:160px;padding:10px;font-family:var(--mono);font-size:12.5px;line-height:1.55;resize:vertical}
.mfdev select.input{appearance:auto}
.mfdev .lbl{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.mfdev .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.mfdev .tabs span{padding:8px 12px;font-size:12.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;
  cursor:pointer;user-select:none;white-space:nowrap}
.mfdev .tabs .on{color:var(--ink);border-color:var(--ink);font-weight:500}
/* A paragraph with a tint, not a row: as a flex container every text node and
   every link inside became a column of its own and the sentence came apart. */
.mfdev .callout{display:block;border:1px solid var(--mfd-blue-line);background:var(--blue-soft);border-radius:8px;
  padding:12px 14px;margin:14px 0;max-width:70ch;font-size:13.5px;line-height:1.55;color:var(--ink)}
.mfdev .callout p{margin:0;max-width:none}
.mfdev .callout p + p{margin-top:8px}
.mfdev .callout.tip{border-color:var(--green-line);background:var(--green-soft)}
.mfdev .callout a{color:var(--blue-ink)}
.mfdev p{margin:0 0 12px;max-width:68ch;color:var(--ink)}
.mfdev .lede{font-size:15px;color:var(--muted);max-width:66ch}
.mfdev .muted{color:var(--muted)}
.mfdev .faint{color:var(--faint)}
.mfdev .mono{font-family:var(--mono)}
.mfdev .tag{display:inline-block;font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:4px;background:var(--surface2);color:var(--muted)}
.mfdev code,.mfdev .code{font-family:var(--mono)}
.mfdev code{font-size:12.5px;background:var(--surface2);padding:1px 5px;border-radius:4px}
.mfdev pre{background:var(--code);color:var(--code-ink);font-family:var(--mono);font-size:12.5px;line-height:1.6;padding:14px 16px;
  border-radius:8px;margin:0;overflow:auto;white-space:pre-wrap;word-break:break-word;max-width:none}
.mfdev pre .k{color:#7dd3fc}
.mfdev pre .s{color:#a5f3a5}
.mfdev pre .c{color:#94a3b8}
.mfdev pre .n{color:#fbbf24}
.mfdev .keyout{font-family:var(--mono);font-size:13px;background:var(--surface2);border:1px solid var(--line);border-radius:6px;
  padding:10px 12px;word-break:break-all;user-select:all}

/* ----- Loading placeholders -----
   The shimmer MockFlow's Mida panel uses while it waits, drawn with the docs
   tokens so it follows the theme. A section shows these from the first paint
   and swaps them for its rows when the server answers. */
.mfdev .sk{position:relative;overflow:hidden;background:var(--surface2);border-radius:8px;min-height:14px}
.mfdev .sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0,var(--paper) 50%,transparent 100%);opacity:.6;
  animation:mfdevShimmer 1.1s cubic-bezier(.34,.35,.55,.56) infinite}
@keyframes mfdevShimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.mfdev .sk::after{animation:none}}
.mfdev .sk-stat{position:relative;height:74px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.mfdev .sk-stat .sk{position:absolute}
.mfdev .sk-stat .sk:first-child{left:20px;top:18px;width:38%;height:22px}
.mfdev .sk-stat .sk:last-child{left:20px;top:48px;width:60%;height:10px}
.mfdev .sk-rows{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mfdev .sk-row{display:grid;grid-template-columns:1.4fr 1.2fr 1.6fr 1fr 1fr 90px;gap:12px;padding:13px 12px;border-bottom:1px solid var(--line)}
.mfdev .sk-row:first-child{background:var(--surface)}
.mfdev .sk-row:last-child{border-bottom:0}
.mfdev .sk-row .sk{height:12px;margin:2px 0}
.mfdev .sk-row .sk:nth-child(2n){width:70%}
.mfdev .sk-row .sk:nth-child(3n){width:85%}
.mfdev .sk-lines{display:grid;gap:10px;max-width:70ch}
.mfdev .sk-lines .sk:nth-child(2){width:80%}
.mfdev .sk-lines .sk:nth-child(3){width:60%}

/* ----- The console sections ----- */
.mfdev .console-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.mfdev .console-head>div{flex:1;min-width:220px}
.mfdev .console-tabs{margin:18px 0 22px}
.mfdev .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}
.mfdev .card{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--paper);min-width:0}
.mfdev .card .t{font-weight:600;font-size:15px;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.mfdev .card p{font-size:13px;color:var(--muted);margin:0}
.mfdev .stat{display:grid;gap:2px}
.mfdev .stat b{font-size:22px;font-family:var(--display);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.mfdev .stat small{color:var(--faint);font-size:11.5px}
.mfdev .keys{margin-top:22px}
.mfdev .tbl{border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:13px;overflow-x:auto}
.mfdev .tbl .row{display:grid;grid-template-columns:170px 90px minmax(0,1fr);gap:12px;padding:9px 12px;border-bottom:1px solid var(--line);
  align-items:center;min-width:0}
.mfdev .tbl .row:last-child{border-bottom:0}
.mfdev .tbl .row.h{background:var(--surface);font-weight:600;font-size:12px}
.mfdev .tbl .row code{background:none;padding:0;color:var(--ink);font-weight:600}
.mfdev .tbl .row>*{min-width:0;overflow-wrap:anywhere}
.mfdev .tbl .req{color:var(--red);font-size:11px;margin-left:4px}
.mfdev .tbl .ty{color:var(--muted);font-family:var(--mono);font-size:12px}
.mfdev .row.err{background:var(--amber-soft)}
.mfdev .scopes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
.mfdev .scopes label{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--muted)}
.mfdev [hidden]{display:none!important}

/* The create key sheet. */
.mfdev .modal{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:24px;z-index:50}
.mfdev .modal .sheet{background:var(--paper);border-radius:12px;max-width:560px;width:100%;padding:24px;box-shadow:var(--mfd-shadow);
  max-height:90vh;overflow:auto;border:1px solid var(--line)}
.mfdev .sheet h2{margin:0 0 6px;font-size:20px}
.mfdev .sheet .two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.mfdev .sheet .acts{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}

/* ----- The dialog and the toast -----
   The console asks and tells here rather than through window.confirm and
   window.alert, which cannot be styled and which a browser offers to silence
   after the second one. */
.cdlg{border:0;padding:0;background:none;max-width:none;color:var(--mfd-ink)}
.cdlg::backdrop{background:rgba(15,23,42,.5)}
.cdlg form{width:min(480px,calc(100vw - 32px));background:var(--mfd-paper);border:1px solid var(--mfd-line);
  border-radius:12px;padding:22px 22px 18px;box-shadow:var(--mfd-shadow);
  font-family:var(--mfd-body);font-size:13.5px;color:var(--mfd-ink);max-height:86vh;overflow:auto}
.cdlg h2{margin:0 0 6px;font-size:18px;font-weight:600;letter-spacing:-.01em}
.cdlg .lede{font-size:13.5px;color:var(--mfd-muted);margin:0 0 14px;max-width:none}
.cdlg .lbl{font-size:11.5px;font-weight:600;color:var(--mfd-muted);letter-spacing:.04em;text-transform:uppercase;
  margin:14px 0 6px}
.cdlg .input{width:100%;height:34px;border:1px solid var(--mfd-line);border-radius:6px;padding:0 10px;font:inherit;
  font-size:13px;background:var(--mfd-paper);color:var(--mfd-ink)}
.cdlg textarea.input{height:auto;min-height:80px;padding:8px 10px;line-height:1.5;resize:vertical}
.cdlg .input:focus{outline:2px solid var(--mfd-blue);outline-offset:1px;border-color:var(--mfd-blue)}
.cdlg .dlg-hint{margin:6px 0 0;font-size:12px;color:var(--mfd-faint)}
.cdlg .dlg-check{display:flex;gap:9px;align-items:flex-start;margin-top:14px}
.cdlg .dlg-check span{display:grid;gap:2px}
.cdlg .dlg-check small{color:var(--mfd-faint);font-size:12px}
.cdlg .dlg-static{margin-top:14px}
.cdlg .keyout{font-family:var(--mfd-mono);font-size:13px;background:var(--mfd-surface2);border:1px solid var(--mfd-line);
  border-radius:6px;padding:10px 12px;word-break:break-all;user-select:all}
.cdlg .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:20px;flex-wrap:wrap}
.cdlg .btn{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 14px;border-radius:8px;
  font:inherit;font-size:13.5px;font-weight:500;border:1px solid var(--mfd-line);background:var(--mfd-paper);
  color:var(--mfd-ink);cursor:pointer}
.cdlg .btn:hover{background:var(--mfd-surface)}
.cdlg .btn.primary{background:var(--mfd-ink);color:var(--mfd-paper);border-color:var(--mfd-ink)}
.cdlg .btn.danger{background:var(--mfd-red);border-color:var(--mfd-red);color:#fff}

.ctoast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:60;max-width:min(560px,calc(100vw - 32px));
  padding:10px 16px;border-radius:10px;border:1px solid var(--mfd-line);background:var(--mfd-paper);
  box-shadow:var(--mfd-shadow);font-size:13.5px;color:var(--mfd-ink)}
.ctoast[data-tone="error"]{border-color:#f5c6c6;background:#fdeeee;color:#b42318}

/* ----- Keys, logs, limits and apps ----- */
.mfdev .rowacts{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.mfdev .btn.danger-text{color:var(--red)}
.mfdev .callout.warn{border-color:var(--amber-line);background:var(--amber-soft)}
.mfdev .callout b{display:block;margin-bottom:4px}

.mfdev .choice{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mfdev .choice label{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;cursor:pointer;background:var(--paper)}
.mfdev .choice label:has(input:checked){border-color:var(--blue);background:var(--blue-soft)}
.mfdev .choice span{display:grid;gap:2px;font-size:13px}
.mfdev .choice small{color:var(--faint);font-size:12px}

.mfdev .panel-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.mfdev .panel-head>div{flex:1;min-width:240px}

.mfdev .logbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:0 0 14px}
.mfdev .logbar .grow{flex:1}
.mfdev .logbar-f{display:grid;gap:0;min-width:170px}
.mfdev .logbar-f .lbl{margin-bottom:4px}
.mfdev .logmore{display:flex;justify-content:center;margin-top:14px}
.mfdev .logline{border-bottom:1px solid var(--line)}
.mfdev .logline:last-child{border-bottom:0}
.mfdev .logline .row{border-bottom:0}
.mfdev .logline .row.on{background:var(--surface)}
.mfdev .logdetail{padding:4px 14px 16px;background:var(--surface);border-top:1px dashed var(--line)}
.mfdev .logdetail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 18px;margin:12px 0 14px}
.mfdev .logdetail-grid .lbl{margin-bottom:2px}
.mfdev .logdetail-grid .mono{font-size:12.5px;overflow-wrap:anywhere}
.mfdev .logcurl{font-size:12px}
.mfdev .logdetail-acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}

.mfdev .limits{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:16px 18px;margin-top:18px}
.mfdev .limits-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.mfdev .limits-head .grow{flex:1}
.mfdev .limits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mfdev .limits-cell{display:grid;gap:2px}
.mfdev .limits-cell b{font-size:20px;font-family:var(--display);font-weight:700;letter-spacing:-.02em}
.mfdev .limits-cell small{color:var(--faint);font-size:11.5px}
.mfdev .limits-allow{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.mfdev .limits-list{display:flex;flex-wrap:wrap;gap:10px 22px}
.mfdev .limits-item{display:grid;gap:1px}
.mfdev .limits-item b{font-size:15px}
.mfdev .limits-item small{color:var(--faint);font-size:11.5px}
.mfdev .limits-none{margin:0}

.mfdev .app{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:16px 18px;margin-top:14px}
.mfdev .app-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mfdev .app-head .grow{flex:1}
.mfdev .app-head b{font-size:15px}
.mfdev .app-desc{margin:8px 0 0;color:var(--muted);font-size:13px}
.mfdev .app-rows{display:grid;gap:8px;margin-top:14px}
.mfdev .app-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mfdev .app-row .lbl{margin:0;min-width:110px}
.mfdev .app-val{font-size:12.5px;background:var(--surface2);border:1px solid var(--line);border-radius:6px;
  padding:4px 8px;overflow-wrap:anywhere;flex:1;min-width:0}
.mfdev .app-acts{width:132px;flex:none;display:flex;justify-content:flex-end;gap:2px}
.mfdev .app-foot{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}

.mfdev .tools{margin-top:34px}
.mfdev .tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:10px}
.mfdev .tool{border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:16px 18px;display:grid;
  gap:6px;align-content:start}
.mfdev .tool b{font-size:14px}
.mfdev .tool span{font-size:13px;color:var(--muted)}
.mfdev .tool-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* ----- The try it console ----- */
.mfdev .bar{padding:10px 0;display:flex;align-items:center;gap:12px;font-size:13px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mfdev .bar .grow{flex:1}
.mfdev .bar .input{width:260px}
.mfdev .body3{display:grid;grid-template-columns:260px minmax(0,1fr) 400px;gap:0;min-height:0}
.mfdev .side{border-right:1px solid var(--line);padding:20px 16px 24px 0;font-size:13.5px;min-width:0}
.mfdev .side .grp{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:18px 0 6px 10px}
.mfdev .side .grp:first-child{margin-top:0}
.mfdev .side .it{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:6px;color:var(--muted);
  width:100%;text-align:left;background:none;border:0;font:inherit;cursor:pointer;min-width:0}
.mfdev .side .it:hover{background:var(--surface);color:var(--ink)}
.mfdev .side .it.on{background:var(--blue-soft);color:var(--blue-ink);font-weight:500}
.mfdev .side .it.op{justify-content:flex-start}
.mfdev .side .it.op .label{min-width:0}
.mfdev .article{padding:20px 28px 48px;min-width:0}
.mfdev .toc{padding:20px 0 24px 20px;font-size:12.5px;border-left:1px solid var(--line);min-width:0}
.mfdev .toc .t{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:10px}
.mfdev .op-row{display:flex;align-items:center;gap:8px;margin:14px 0 6px;flex-wrap:wrap}
.mfdev .op-row .grow{flex:1}
.mfdev .method{font-family:var(--mono);font-weight:700;font-size:11px;padding:2px 7px;border-radius:5px;display:inline-block;
  color:var(--blue-ink);background:var(--blue-soft);border:1px solid var(--mfd-blue-line)}
.mfdev .get{color:var(--green);background:var(--green-soft);border-color:var(--green-line)}
.mfdev .post{color:var(--blue-ink);background:var(--blue-soft);border-color:var(--mfd-blue-line)}
.mfdev .patch,.mfdev .put{color:var(--amber);background:var(--amber-soft);border-color:var(--amber-line)}
.mfdev .del,.mfdev .delete{color:var(--red);background:var(--surface2);border-color:var(--line)}

@media (max-width:1240px){
  .mfdev:not(.mft-embed) .body3{grid-template-columns:240px minmax(0,1fr)}
  .mfdev:not(.mft-embed) .toc{display:none}
}
@media (max-width:860px){
  .mfd-console-try{padding-left:18px;padding-right:18px}
  .mfdev .stats{grid-template-columns:1fr 1fr}
  .mfdev .body3{grid-template-columns:minmax(0,1fr)}
  .mfdev .side{border-right:0;border-bottom:1px solid var(--line);padding:12px 0 16px}
  .mfdev .article{padding:16px 0 32px}
  .mfdev .bar .input{width:100%}
  .mfdev .tbl .row{grid-template-columns:minmax(0,1fr)!important;gap:4px}
  .mfdev .tbl .row.h{display:none}
  .mfdev .sheet .two,.mfdev .scopes{grid-template-columns:minmax(0,1fr)}
  .mfdev .choice{grid-template-columns:minmax(0,1fr)}
  .mfdev .limits-grid{grid-template-columns:1fr 1fr}
  .mfdev .logdetail-grid{grid-template-columns:1fr 1fr}
  .mfdev .tools-grid{grid-template-columns:minmax(0,1fr)}
  .mfdev .logbar-f{min-width:0;flex:1}
  .mfdev .app-row .lbl{min-width:0}
  .mfdev .app-acts{width:auto}
}
@media (max-width:480px){
  .mfdev .stats{grid-template-columns:minmax(0,1fr)}
}