/* ============================================================================
   ORPPIO master back office (/m) — additions to the bo-* layer.

   The master console is built from the same components as the agency back office
   (backoffice.css): the same tables, cards, badges, forms. What this file adds is
   the one thing that must never be confused — whose data you are looking at. The
   chrome is re-tinted from the deep green of a tenant's rail to a green-cast
   graphite the product uses nowhere else, and the active-item accent goes from
   pine to the brand's burnt orange, so an operator with two tabs open can tell
   the platform console from a tenant's CRM from across the room. Everything else
   is inherited.

   This is the one place burnt orange is spent as an interface colour, and it is
   spent on exactly one item at a time. Everywhere else it stays an accent.
   ============================================================================ */
body.bo-app--master {
  /* A graphite with the brand's green in it rather than the blue it used to
     carry: unmistakably not a tenant's rail, still unmistakably Orppio. Inks
     are given with their contrast against --bo-chrome. */
  --bo-chrome:        #151A17;
  --bo-chrome-hover:  #1E241F;
  --bo-chrome-line:   #2A322C;
  --bo-chrome-raised: #354039;
  --bo-chrome-quiet:  #1A211C;
  --bo-chrome-well:   #0E1310;
  --bo-chrome-floor:  #0E1310;
  --bo-chrome-edge:   #0A0E0C;
  --bo-chrome-faint:  #7F8C84;   /*  5.0:1 */
  --bo-chrome-muted:  #9BA8A0;   /*  7.1:1 */
  --bo-chrome-soft:   #DFE6E1;   /* 13.9:1 */
  --bo-chrome-pill-bg:  #2E3832;
  --bo-chrome-pill-ink: #C8D3CC;
  /* The brand orange at full strength, with the deep green as its ink: 7.5:1
     against the rail and 7.5:1 for the label on it. A washed-out orange with
     white on top — what this was — cleared neither. */
  --kernol-nav-active-bg:   var(--kernol-tan-400);
  --kernol-nav-active-ink:  #2A1405;
  --kernol-nav-active-icon: #2A1405;
  --kernol-nav-active-ring: var(--kernol-tan-400);
}
body.bo-app--master .bo-nav-item.is-active:hover { background: var(--kernol-tan-500); }
body.bo-app--master .bo-nav-item.is-active .bo-nav-count { background: #7A3A0C; color: #FFE6D3; }
body.bo-app--master .bo-nav-item.is-active { box-shadow: none; }
body.bo-app--master .bo-sidebar { scrollbar-color: #3A453D transparent; }

/* The brand slot names the console as well as the product: the Orppio mark, the
   name, and "Master console" under it, so an operator always knows which of the
   two back offices they are typing into. */
.ms-brand { display: flex; align-items: center; gap: 10px; padding: 18px var(--kernol-space-4) 6px; color: var(--bo-chrome-ink); }
.ms-brand-mark { width: auto; height: 30px; display: block; flex: none; }
.ms-brand-word { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.ms-brand-sub { display: block; font-size: var(--bo-t-10); font-weight: 650; text-transform: uppercase; letter-spacing: 0.12em; color: var(--kernol-tan-200); margin-top: 2px; }

/* The workspace slot under the brand: "Platform" when reading across tenants, the
   agency's name when inside one. The orange dot is the second "which tenant" signal,
   beside the topbar crumbs. */
.ms-context { margin: var(--kernol-space-3) var(--kernol-space-3) var(--kernol-space-2); display: flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--bo-chrome-line); border-radius: var(--bo-r-sm); color: var(--bo-chrome-ink); font-size: var(--bo-t-12); font-weight: 600; line-height: 1.25; min-width: 0; }
.ms-context:hover { background: var(--bo-chrome-hover); }
.ms-context-dot { width: 8px; height: 8px; border-radius: var(--bo-r-full); background: var(--kernol-tan-500); flex: none; }
.ms-context-dot--platform { background: var(--kernol-teal-500); }
.ms-context-txt { min-width: 0; flex: 1; }
.ms-context-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-context-sub { display: block; font-size: var(--bo-t-10); font-weight: 500; color: var(--bo-chrome-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* The topbar search is a real field, not a palette trigger: the console is keyboard-
   driven by people who paste references all day. */
.ms-search { display: flex; align-items: center; gap: var(--kernol-space-2); width: 340px; height: 38px; padding: 0 12px; border: 1px solid var(--bo-border); border-radius: var(--bo-r-sm); background: var(--kernol-surface); color: var(--bo-faint); box-shadow: var(--bo-shadow-card); }
.ms-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: var(--bo-t-13); color: var(--bo-ink); }
.ms-search:focus-within { border-color: var(--kernol-blue-400); box-shadow: var(--kernol-focus-ring); }

/* The agency workspace head: name, slug, status, and the facts an operator wants
   before opening any tab. It sits on the canvas under the page head, above the
   tab rail. */
.ms-agency-head { display: flex; align-items: flex-start; gap: var(--kernol-space-4); padding: var(--kernol-space-2) var(--bo-page-x) 0; flex-wrap: wrap; }
.ms-agency-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: var(--bo-t-12); color: var(--bo-muted); margin-top: 6px; }
.ms-agency-facts strong { color: var(--bo-ink-soft); font-weight: 600; }
.ms-agency-head .bo-viewtabs { width: 100%; padding-inline: 0; margin-top: var(--kernol-space-3); }

/* Metric tiles that are also links read as buttons; a tile with a problem in it
   carries its tone on the tile, not on the number. */
.bo-metric { text-decoration: none; }
a.bo-metric:hover { border-color: var(--bo-border-hover); }
.bo-metric-tile--neg { background: var(--kernol-danger-soft); color: var(--kernol-danger-ink); }
.bo-metric-tile--warn { background: var(--kernol-warning-soft); color: var(--kernol-warning-ink); }
.bo-metric-tile--pos { background: var(--kernol-success-soft); color: var(--kernol-success-ink); }
.bo-metric-tile--info { background: var(--kernol-info-soft); color: var(--kernol-info-ink); }

/* A pager control that has nowhere to go stays visible, so the pair keeps its
   shape, but says so. */
.bo-pager-btn.is-disabled { opacity: 0.45; pointer-events: none; }

/* A destructive action is asked for twice: the button is red, and the confirmation
   names what it will do to what. The well holds the second half. */
.ms-danger { border-color: var(--bo-red-200); }
.ms-danger .bo-card-head { background: var(--bo-red-50); border-bottom-color: var(--bo-red-200); }
.ms-danger .bo-card-title { color: var(--bo-red-700); }

/* Two-column key/value facts with room for long values (emails, hosts). */
.ms-kv { grid-template-columns: 160px 1fr; }
.ms-mono { font-family: var(--bo-font-mono); font-size: var(--bo-t-12); }

/* An inline form of one field and a button, as on the settings and integrations pages. */
.ms-inline-form { display: flex; align-items: flex-end; gap: var(--kernol-space-2); flex-wrap: wrap; }
.ms-inline-form .bo-field { min-width: 180px; }

@media (max-width: 1080px) { .ms-search { width: 220px; } }
@media (max-width: 900px) {
  .ms-brand { justify-content: center; padding-inline: 0; }
  .ms-brand-word, .ms-context { display: none; }
  .ms-search { width: 44px; padding: 0; justify-content: center; }
  .ms-search input { display: none; }
}

/* The identity cell's two lines are spans (so the cell can sit inside an inline
   link); they stack regardless. */
.bo-app--master .bo-entity-txt > .bo-entity-name,
.bo-app--master .bo-entity-txt > .bo-entity-sub { display: block; }

/* Eighteen tabs do not fit one row at any sane width: the rail wraps rather than
   hiding sections behind a scrollbar nobody can see. */
.ms-agency-head .bo-viewtabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; }

/* A route inside a key/value list wraps rather than running off the card. */
.bo-app--master .bo-kv .bo-route { white-space: normal; flex-wrap: wrap; }