/*
 * The console's stylesheet.
 *
 * LIGHT, and deliberately not theme-following: this sits beside the Cloudflare
 * dashboard all day and is mostly dense tables of small text read while
 * something is going wrong. One committed palette, every colour chosen against
 * white — rather than two half-tuned ones neither of which is quite right.
 */
:root{
    --bg:#f7f7f7;          /* page */
    --panel:#fff;          /* cards, tables */
    --ink:#1d1d1f;         /* body text */
    --ink-2:#4a4a4f;       /* secondary */
    --mut:#77777d;         /* labels, captions */
    --line:#e3e3e6;        /* hairlines */
    --line-2:#d3d3d8;      /* stronger edges */
    --acc:#f6821f;         /* Cloudflare orange, used sparingly */
    --ok:#12784a;
    --bad:#c0392b;
    --shadow:0 1px 2px rgba(0,0,0,.04);
  }
  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1100px;margin:0 auto;padding:26px 22px 90px}

  header{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    padding-bottom:18px;margin-bottom:26px;border-bottom:1px solid var(--line-2)
  }
  h1{font-size:18px;font-weight:600;margin:0;letter-spacing:-.01em}
  .sub{font-size:13px;color:var(--mut);margin-top:2px}
  h2{
    font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    color:var(--mut);margin:34px 0 10px
  }
  p{margin:0 0 14px}
  .muted{color:var(--mut);font-size:13px}

  /* Stat tiles. The number leads; the label explains. */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
  .card{
    background:var(--panel);border:1px solid var(--line);border-radius:8px;
    padding:16px 18px;box-shadow:var(--shadow)
  }
  .n{
    font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
    font-variant-numeric:tabular-nums
  }
  .lbl{font-size:12.5px;color:var(--mut);margin-top:4px}

  /* Wide content scrolls in its own box; the page never does. */
  .scroll{overflow-x:auto;background:var(--panel);border:1px solid var(--line);
          border-radius:8px;box-shadow:var(--shadow)}
  table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:660px}
  th{
    text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--mut);padding:11px 16px;
    background:#fafafa;border-bottom:1px solid var(--line);white-space:nowrap
  }
  td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
  tr:last-child td{border-bottom:0}
  .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px}
  td.nowrap{white-space:nowrap}
  .ok{color:var(--ok);font-weight:500}
  .bad{color:var(--bad);font-weight:500}
  .tag{
    display:inline-block;font-size:11px;padding:2px 8px;border-radius:20px;
    background:#f0f0f2;color:var(--ink-2);border:1px solid var(--line)
  }

  button{
    font:inherit;font-size:13px;font-weight:500;padding:8px 14px;border-radius:6px;
    border:1px solid var(--line-2);background:#fff;color:var(--ink);cursor:pointer;
    min-height:36px;transition:background .12s,border-color .12s
  }
  button:hover{background:#fafafa;border-color:#bfbfc4}
  button.primary{background:var(--acc);border-color:var(--acc);color:#fff}
  button.primary:hover{background:#e0741a;border-color:#e0741a}
  button.link{border:0;background:none;color:var(--acc);padding:6px 4px;min-height:0}
  button:disabled{opacity:.55;cursor:default}
  button:focus-visible,input:focus-visible,select:focus-visible{
    outline:2px solid var(--acc);outline-offset:1px
  }

  label{display:block;font-size:12.5px;color:var(--mut);margin-bottom:5px}
  input,select{
    font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line-2);
    border-radius:6px;background:#fff;color:var(--ink);width:100%
  }
  input::placeholder{color:#a6a6ac}

  .row{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin:14px 0 18px}
  .row>div{flex:1 1 200px}
  .row>div.fit{flex:0 0 auto}

  .secret{
    background:#fffaf4;border:1px solid #f3c99a;border-radius:8px;
    padding:14px 16px;margin:14px 0
  }
  .empty{color:var(--mut);padding:22px 16px;text-align:center;font-size:13.5px}

  /* The search box is the front door, so it is the largest control here. */
  .search{display:flex;gap:10px;margin:0 0 18px}
  .search input{
    flex:1 1 auto;font-size:16px;padding:13px 15px;border-radius:10px;
    border:1px solid var(--line-2);box-shadow:var(--shadow)
  }
  .search button{flex:0 0 auto;padding:0 22px;border-radius:10px;font-size:14px}

  /* One line, not a wall of tiles. Colour only when it means something. */
  .health{
    display:flex;gap:20px;align-items:center;flex-wrap:wrap;
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:14px 18px;margin-bottom:12px;box-shadow:var(--shadow);font-size:13.5px
  }
  .health b{font-variant-numeric:tabular-nums;font-weight:600}
  .health .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:7px}
  .health .dot.ok{background:var(--ok)} .health .dot.bad{background:var(--bad)}
  .health .dot.idle{background:#b8b8be}

  .quota{
    background:var(--panel);border:1px solid var(--line);border-radius:10px;
    padding:14px 18px;margin-bottom:18px;box-shadow:var(--shadow)
  }
  .qrow{display:flex;align-items:center;gap:12px;margin:9px 0;font-size:13px}
  .qname{flex:0 0 190px;color:var(--ink-2)}
  .qbar{flex:1 1 auto;height:7px;border-radius:99px;background:#eeeef0;overflow:hidden}
  .qfill{height:100%;background:var(--ok);border-radius:99px}
  .qfill.warn{background:#e8a33d} .qfill.hot{background:var(--bad)}
  .qnum{flex:0 0 auto;color:var(--mut);font-variant-numeric:tabular-nums}

  .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;
       flex-wrap:wrap;margin:0 0 10px}
  .filters{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .filters select,.filters input[type=date]{width:auto;padding:7px 10px;border-radius:8px;font-size:13px}
  .inline{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--ink-2)}
  .inline input{width:auto}

  .more{display:flex;justify-content:center;margin:14px 0 0}
  .foot{margin-top:14px;font-size:12.5px}

  /* An expandable row: the forensic detail lives here, not in the table.
     NOT .row — that is the form-layout class below and sets display:flex,
     which turned every table row into a flex container and stacked the cells
     at the same x. A generic class name colliding with a structural one is the
     whole failure. */
  tr.logrow{cursor:pointer}
  tr.logrow:hover{background:#fafafa}
  tr.detail td{background:#fbfbfc;padding:0}
  .dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
         gap:10px 26px;padding:16px 18px}
  /* Ids and error strings are long and unbreakable; without this they run
     under the next column instead of wrapping inside their own. */
  .dgrid div{font-size:12.5px;min-width:0;overflow-wrap:anywhere}
  .dgrid .k{color:var(--mut);display:block;margin-bottom:2px}

  .tabs{display:inline-flex;gap:2px;margin-right:14px}
  .tab{border-radius:7px;padding:6px 12px;min-height:32px;font-size:13px;
       border:1px solid transparent;background:none;color:var(--ink-2)}
  .tab[aria-current]{background:#fff;border-color:var(--line-2);color:var(--ink);font-weight:600}
  .who{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--mut)}