/*  Wally operator console
    ------------------------------------------------------------------
    Same brand as the marketing site: black and red.

    The console inverts the marketing site's emphasis. Marketing opens
    light because a dark landing page reads as guarded. The console runs
    on a black rail against a white work surface, because an operator
    stares at it for an hour and white is where the numbers belong.

    Red marks money moving and anything requiring action. Nothing
    decorative is red.
*/
:root{
  --black:#0B0B0C; --ink:#17181A; --char:#232529;
  --smoke:#6B7178; --pale:#DFE1E4; --wash:#F6F7F8; --paper:#FFF;
  --red:#D8232A; --red-dk:#A81A20; --green:#1E8E5A; --hold:#9A6B10;
  --rail:196px;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--wash);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
}
a{color:var(--red)}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* forms, shared with the sign-in card */
label{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--smoke);font-weight:700;margin-bottom:6px}
input, select, textarea{
  width:100%;padding:11px 12px;border:1px solid var(--pale);background:var(--paper);
  font:inherit;font-size:15px;line-height:1.35;color:var(--ink);margin-bottom:18px;
  height:42px;border-radius:0;
}
textarea{height:auto;min-height:120px;resize:vertical}
input:focus, select:focus, textarea:focus{border-color:var(--ink);outline:none}

/*  Native select chrome is the one control that refuses to match anything
    around it: different height, different corner radius, an arrow drawn by the
    operating system. Left alone it makes a carefully aligned toolbar look
    broken, which is exactly what it did here. */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7178' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
select::-ms-expand{display:none}
input[type=file]{padding:9px 12px;cursor:pointer}
button{width:100%;padding:13px;background:var(--red);color:var(--paper);border:0;
  font:inherit;font-weight:700;cursor:pointer;line-height:1.35;border-radius:0}
button:hover:not(:disabled){background:var(--red-dk)}
button:disabled{background:var(--pale);color:var(--smoke);cursor:default}
.err{background:#FEF6F6;border-left:3px solid var(--red);color:var(--red-dk);
  padding:10px 12px;font-size:13.5px;margin-bottom:18px}
.warn{background:#FFFAF0;border-left:3px solid var(--hold);color:#7A5409;
  padding:12px 14px;font-size:14px;margin-bottom:22px}

/* shell */
.shell{display:flex;min-height:100vh}
.rail{width:var(--rail);flex:0 0 var(--rail);background:var(--black);color:#fff;
  display:flex;flex-direction:column}
.rail .mark{display:flex;align-items:center;gap:9px;padding:16px 20px;
  border-bottom:1px solid var(--char);text-decoration:none;color:#fff}
.rail .mark img{height:28px}
.rail .mark span{font-weight:800;font-size:20px;letter-spacing:-.02em}
.rail nav{padding:14px 0;flex:1}
/*  The hidden attribute has to actually hide things.

    A browser's default [hidden]{display:none} is the weakest rule there is, so
    any selector setting display wins against it. That is how the Platform link
    stayed visible to people who are not platform admins: the rule below set
    display:block and quietly overrode hidden.

    Declared first, so nothing further down this file can win by accident. */
[hidden]{display:none !important}

.rail nav a{display:block;padding:9px 20px;color:#B9BDC4;text-decoration:none;
  font-size:14.5px;border-left:3px solid transparent}
.rail nav a:hover{color:#fff}
.rail nav a.on{color:#fff;font-weight:600;border-left-color:var(--red);background:#131417}

/*  Group headings. Quiet enough to scan past when you know where you are
    going, present enough to orient somebody who does not. */
.rail nav .grp{
  display:block;padding:16px 20px 5px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#5A6069;font-weight:700;
}

/*  Setup progress. Neutral rather than red: it is a count of what is left to
    do, not something wrong. */
.rail nav a #setupBadge{
  display:inline-block;margin-left:8px;background:#2A2D33;color:#B9BDC4;
  font-size:10.5px;font-weight:700;line-height:1;padding:3px 6px;
  font-variant-numeric:tabular-nums;vertical-align:1px;
}

/*  Unread count on the Replies link. Red, because it is one of the two things
    in this interface that means "somebody is waiting". */
.rail nav a #unreadBadge{
  display:inline-block;margin-left:8px;background:var(--red);color:#fff;
  font-size:11px;font-weight:700;line-height:1;padding:3px 6px;
  font-variant-numeric:tabular-nums;vertical-align:1px;
}
/*  Three stacked lines, not three inline ones.

    Spans are inline by default, so the org name and the sign-out button ran
    together into one unreadable line. Each gets its own row. */
.rail .foot{padding:16px 20px;border-top:1px solid var(--char);font-size:12.5px;color:#8A8F98}
.rail .foot > *{display:block}
.rail .foot .who{color:#fff;font-weight:600;margin-bottom:1px;line-height:1.35}
.rail .foot #orgName{line-height:1.35;margin-bottom:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .foot button{background:none;border:0;color:#8A8F98;padding:0;width:auto;
  font:inherit;font-size:12.5px;text-decoration:underline;cursor:pointer;font-weight:400;
  text-align:left}
.rail .foot button:hover{color:#fff;background:none}

.main{flex:1;padding:30px 34px 60px;max-width:1100px}
h1{font-weight:800;font-size:25px;letter-spacing:-.03em;margin:0 0 4px}
.sub{color:var(--smoke);font-size:14.5px;margin:0 0 26px}

/* balance meter, the one loud thing */
.meter{background:var(--paper);border:1px solid var(--pale);border-top:3px solid var(--red);
  padding:22px 24px;margin-bottom:24px}
.meter .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--smoke);font-weight:700;margin-bottom:8px}
.meter .fig{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.meter .fig.low{color:var(--red)}
.meter .buys{margin-top:10px;font-size:14px;color:var(--smoke)}
.meter .buys strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* stat strip */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--pale);border:1px solid var(--pale);margin-bottom:28px}
.stats .s{background:var(--paper);padding:16px 18px}
.stats .s .n{font-size:24px;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.2}
.stats .s .k{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--smoke);font-weight:700;margin-top:3px}
.stats .s.alert .n{color:var(--red)}

/* tables */
table.data{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--pale)}
table.data th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--smoke);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--pale)}
table.data td{padding:12px 14px;border-bottom:1px solid var(--pale);font-size:14px}
table.data tr:last-child td{border-bottom:0}
table.data td.num{text-align:right;font-variant-numeric:tabular-nums}

.tag{display:inline-block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border:1px solid currentColor;font-weight:700}
.tag.sending{color:var(--hold)} .tag.completed{color:var(--green)}
.tag.draft{color:var(--smoke)} .tag.scheduled{color:var(--smoke)}
.tag.insufficient_funds,.tag.cancelled{color:var(--red)}

.empty{background:var(--paper);border:1px dashed var(--pale);padding:30px 24px;color:var(--smoke)}
.empty h2{font-size:17px;color:var(--ink);margin:0 0 6px;font-weight:700}
.empty p{margin:0 0 4px;font-size:14px}

.loading{color:var(--smoke);font-size:14px;padding:24px 0}

@media (max-width:720px){
  .shell{flex-direction:column}
  .rail{width:100%;flex:none}
  .rail nav{display:flex;padding:0;overflow-x:auto}
  .rail nav a{border-left:0;border-bottom:3px solid transparent;white-space:nowrap}
  .rail nav a.on{border-left:0;border-bottom-color:var(--red)}
  .rail .foot{display:none}
  .main{padding:20px}
}