/* =========================================================================
   Flowland Operations — the back office.
   -------------------------------------------------------------------------
   This is the shop's own admin, so it is built out of the things admin screens
   are made of: a rail of views, a dense list, and a record beside it. Not a
   settings panel, not a control board — the learner is looking at a working
   application, because an application is what they are automating.

   It keeps the shop's warm palette rather than borrowing the Tutorial Assets
   panel's graphite. The panel is the teaching layer and should always look
   different; this is still the fiction.

   Color is used sparingly and always means the same thing: terracotta is the
   action worth taking, gold is waiting on someone, green is settled, and a
   muted gray rule is anything finished.
   ========================================================================= */

.ops { padding-bottom: 4rem; }

/* --- the header ---------------------------------------------------------- */

.ops__head {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr);
  margin-block: clamp(1.5rem, 4vw, 2.25rem) 1.5rem;
}
@media (min-width: 900px) { .ops__head { grid-template-columns: 1fr auto; align-items: end; } }

.ops__head h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); margin-block: .3rem .6rem; }
.ops__lead { margin: 0; color: var(--ink-soft); max-width: 62ch; }

.ops__status { display: grid; gap: .35rem; justify-items: start; }
@media (min-width: 900px) { .ops__status { justify-items: end; text-align: right; } }

.ops__live {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--hairline); background: var(--paper-warm); color: var(--ink-faint);
}
.ops__live::before {
  content: ''; width: .45rem; height: .45rem; border-radius: 999px; background: currentColor;
}
.ops__live[data-live='true'] { color: var(--green); border-color: #b9d9c6; background: #f1f9f4; }

.ops__note { margin: 0; font-size: .76rem; color: var(--ink-faint); }
.ops__note[data-on='true'] { color: var(--green); }
.ops__note[data-on='false'] { color: var(--gold); }

.ops__boot {
  border: 1px solid #e9c4b4; background: #fdf2ee;
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1.25rem;
}

/* --- what just happened -------------------------------------------------- */

.notice {
  border-radius: var(--radius); padding: .85rem 1.05rem; margin-bottom: 1.25rem;
  border: 1px solid #b9d9c6; background: #f1f9f4; font-size: .92rem;
}
/* A refusal is the shop's own rule, not an error — amber, not red. */
.notice[data-kind='refused'] { border-color: #e6cf9a; background: #fdf9ef; }
.notice p { margin: 0; }
.notice pre {
  margin: .55rem 0 0; padding: .6rem .7rem;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: 6px;
  font-family: var(--mono); font-size: .74rem; white-space: pre-wrap; word-break: break-word;
  max-height: 12rem; overflow: auto;
}

/* --- the three columns --------------------------------------------------- */

.ops__grid {
  display: grid; gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 900px)  { .ops__grid { grid-template-columns: 190px minmax(0, 1fr); } }
@media (min-width: 1240px) { .ops__grid { grid-template-columns: 190px minmax(0, 1fr) 27rem; } }

/* --- the rail ------------------------------------------------------------ */

.rail { display: grid; gap: .1rem; align-content: start; }

.rail__item {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .7rem; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-mid);
  font-family: var(--body); font-size: .88rem; text-align: left;
  cursor: pointer; width: 100%;
  transition: background .12s, color .12s;
}
.rail__item:hover { background: var(--paper-deep); color: var(--ink); }
.rail__item:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }
.rail__item[aria-current='true'] {
  background: var(--ink); color: #fff; font-weight: 700;
}

.rail__n {
  font-family: var(--mono); font-size: .72rem;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.rail__item[aria-current='true'] .rail__n { color: #b9c9bf; }
.rail__n[data-zero='true'] { opacity: .45; }

/* --- the list ------------------------------------------------------------ */

.list, .record, .stock {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper); overflow: hidden;
}

.list__head, .stock .list__head {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: .85rem 1rem; border-bottom: 1px solid var(--hairline);
  background: var(--paper-warm);
}
.list__head h2 { margin: 0; font-size: 1rem; }
.list__count { font-size: .7rem; color: var(--ink-faint); margin-left: auto; }

.list__rows { max-height: 34rem; overflow-y: auto; }

/* A dense row, the way an operations list is dense: scannable down a column. */
.row {
  display: grid; align-items: center; gap: .6rem;
  /* The customer's name is what an operator scans down, so it gets the slack.
     The id and the elapsed time are reference, not scanning material. */
  grid-template-columns: 6.5rem minmax(7rem, 1fr) 5rem 8.5rem 6.5rem 5.5rem;
  width: 100%; padding: .6rem 1rem;
  border: 0; border-bottom: 1px solid var(--hairline);
  background: transparent; color: var(--ink);
  font-family: var(--body); font-size: .86rem; text-align: left;
  cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--paper-warm); }
.row:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }
.row[aria-current='true'] { background: var(--paper-deep); }

.row__id { font-size: .72rem; color: var(--ink-faint); }
.row__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__money { font-variant-numeric: tabular-nums; text-align: right; }
.row__when { font-family: var(--mono); font-size: .68rem; color: var(--ink-faint); text-align: right; }

.row__status, .record__status {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .18rem .45rem; border-radius: 4px;
  background: var(--paper-deep); color: var(--ink-soft);
  justify-self: start; white-space: nowrap;
}
.row__status[data-status='pending'],
.record__status[data-status='pending']            { background: #fbf1d8; color: #8a6512; }
.row__status[data-status='awaiting_approval'],
.record__status[data-status='awaiting_approval']  { background: #fbf1d8; color: #8a6512; }
.row__status[data-status='backordered'],
.record__status[data-status='backordered']        { background: #fbe4dc; color: #9c3f1f; }
.row__status[data-status='paid'],
.row__status[data-status='approved'],
.record__status[data-status='paid'],
.record__status[data-status='approved']           { background: #e6eef9; color: #2c4f80; }
.row__status[data-status='shipped'],
.row__status[data-status='delivered'],
.record__status[data-status='shipped'],
.record__status[data-status='delivered']          { background: #e2f2e8; color: #16643c; }
.row__status[data-status='cancelled'],
.row__status[data-status='refunded'],
.record__status[data-status='cancelled'],
.record__status[data-status='refunded']           { opacity: .7; }

/* Not an error badge — a note that this one is not moving on its own. */
.row__flag {
  font-family: var(--mono); font-size: .6rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--terracotta); white-space: nowrap;
}

.empty {
  margin: 0; padding: 2.5rem 1.2rem; text-align: center;
  color: var(--ink-faint); font-size: .9rem;
}

/* --- the record ---------------------------------------------------------- */

.record { padding: 0; }
.record__none { padding: 2.5rem 1.4rem; color: var(--ink-soft); font-size: .92rem; }
.record__none p { margin: 0 0 .5rem; }
.record__none p:last-child { margin: 0; }

.record__head {
  padding: 1rem 1.2rem .9rem;
  border-bottom: 1px solid var(--hairline); background: var(--paper-warm);
}
.record__id { margin: 0; font-size: .7rem; color: var(--ink-faint); }
.record__who { margin: .15rem 0 .2rem; font-size: 1.15rem; }
.record__where { margin: 0 0 .5rem; font-size: .72rem; color: var(--ink-faint); }

.record__flags {
  padding: .75rem 1.2rem; background: #fdf9ef;
  border-bottom: 1px solid #e6cf9a;
}
.flagline { margin: 0 0 .25rem; font-size: .85rem; color: #7a5a12; }
.flagline:last-child { margin: 0; }

.record__items { width: 100%; border-collapse: collapse; font-size: .86rem; }
.record__items td { padding: .5rem 1.2rem; border-bottom: 1px solid var(--hairline); }
.record__items .mono { font-size: .7rem; color: var(--ink-faint); }
.record__items .num { text-align: right; font-variant-numeric: tabular-nums; }
.record__total td { font-weight: 700; background: var(--paper-warm); }

.record__facts { margin: 0; padding: .9rem 1.2rem; display: grid; gap: .7rem; }
.record__facts > div { display: grid; gap: .2rem; }
.record__facts dt {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.record__facts dd { margin: 0; font-size: .85rem; display: grid; gap: .15rem; }
.muted { color: var(--ink-faint); }

.pay, .stockline, .apr-inline { font-size: .82rem; }
.pay[data-status='failed']    { color: var(--terracotta); }
.pay[data-status='refunded']  { color: var(--ink-faint); }
.stockline[data-low='true']   { color: var(--terracotta); }
.apr-inline[data-status='pending']  { color: var(--gold); }
.apr-inline[data-status='approved'] { color: var(--green); }
.apr-inline[data-status='rejected'] { color: var(--terracotta); }

/* What the resume URL answered. The one genuinely diagnostic thing on the page,
   kept because a stale execution id is invisible without it. */
.record__delivery {
  margin: 0 1.2rem; padding: .75rem .9rem; border-radius: 8px;
  border: 1px solid #e9c4b4; background: #fdf2ee; font-size: .84rem;
}
.record__delivery[data-ok='true'] { border-color: #b9d9c6; background: #f1f9f4; }
.record__delivery p { margin: 0; }
.record__delivery__why { margin-top: .4rem !important; color: var(--ink-soft); font-size: .79rem; }

.record__do {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 1.1rem 1.2rem; border-top: 1px solid var(--hairline);
  background: var(--paper-warm);
}

.act {
  padding: .5rem .85rem; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: .85rem; font-weight: 700;
  transition: background .12s, border-color .12s, color .12s;
}
.act:hover { border-color: var(--ink-faint); background: var(--paper-deep); }
.act:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.act--accent {
  background: var(--terracotta); border-color: var(--terracotta); color: #fff;
}
.act--accent:hover { background: #ad4826; border-color: #ad4826; color: #fff; }
.act--quiet { color: var(--ink-soft); font-weight: 400; }

/* --- stock --------------------------------------------------------------- */

.stock { margin-top: 1.25rem; }
.stock__rows { max-height: 22rem; overflow-y: auto; }

.stock-row {
  display: grid; align-items: center; gap: .75rem;
  grid-template-columns: 10rem minmax(0, 1fr) 6rem auto;
  padding: .55rem 1rem; border-bottom: 1px solid var(--hairline);
  font-size: .85rem;
}
.stock-row:last-child { border-bottom: 0; }
.stock-row__w { font-family: var(--mono); font-size: .72rem; color: var(--ink-faint); }
.stock-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.stock-row[data-out='true'] { background: #fdf6f3; }
.stock-row[data-out='true'] .num { color: var(--terracotta); font-weight: 700; }

@media (max-width: 720px) {
  .row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .2rem; }
  .row__id, .row__when { grid-column: 1 / -1; }
  .stock-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .2rem; }
}

/* --- the two halves of the back office ------------------------------------
   Orders is the day's work; Inventory is what is on the shelves behind it.
   They are different jobs and different screens, so they are tabs rather than
   one long page.
   ---------------------------------------------------------------------- */

.ops__tabs {
  display: flex; gap: .25rem; margin-bottom: 1rem;
  border-bottom: 1px solid var(--hairline);
}

.ops__tab {
  padding: .55rem .95rem; border: 0; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--body); font-size: .95rem; font-weight: 700;
  color: var(--ink-faint); cursor: pointer;
  transition: color .12s, border-color .12s;
}
.ops__tab:hover { color: var(--ink); }
.ops__tab:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }
.ops__tab[aria-selected='true'] { color: var(--ink); border-bottom-color: var(--terracotta); }

.stock { margin-top: 0; }

/* Nothing connected yet.
   Sits directly above the action row, because that is where the learner is
   looking when they are about to press something that would go nowhere. */
.record__unwired {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #e6cf9a;
  border-left: 3px solid var(--gold, #b8912f);
  border-radius: 4px;
  background: #fdf9ef;
  font-size: 0.85rem;
  line-height: 1.45;
}
.record__unwired strong { font-weight: 600; }
.record__unwired .act { margin-left: auto; }