/* ============================================================
   Console plateforme (super-admin TechXYZ)

   Ported from design/app/console.css, plus the handful of classes
   the prototype kept in its auth.css because the admin screens
   lived there — the modal, the notes list, the filter chips, the
   admin KPI grid. The console is their only consumer here.

   Layout only, like every other sheet: colours come from the
   tokens. The one exception is the platform banner, and it is
   deliberate — see below.
   ============================================================ */

.gxc-root { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.gxc-root .gx-app { height: auto; flex: 1; min-height: 0; }

/* ---------- platform banner — the signature of the super-admin universe ----
   Never themed, and that is the point: a customer's brand repaints the whole
   application, and the one strip that says "you are outside every customer"
   has to look the same whichever customer you were just reading about. It
   takes the TechXYZ ramp directly rather than the semantic tokens, exactly as
   the status colours do. */
.gxc-top {
  flex: none; height: 34px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  background: var(--ink-900);
  color: rgba(255, 255, 255, .72);
  font-size: var(--text-2xs);
  letter-spacing: .04em;
  position: relative; overflow: hidden;
}
.gxc-top::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, var(--azure-500), rgba(0, 171, 252, 0));
}
.gxc-top .wm {
  font-family: var(--font-display, var(--font-sans));
  font-weight: 700; letter-spacing: .12em;
  color: var(--neutral-0); font-size: 11px;
}
.gxc-top .wm i { color: var(--azure-500); font-style: normal; font-weight: 500; }
.gxc-top .sepv { width: 1px; height: 14px; background: rgba(255, 255, 255, .16); }
.gxc-top .sp { flex: 1; }
.gxc-top b { color: var(--neutral-0); font-weight: var(--weight-semibold); }
.gxc-top .env {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: var(--radius-pill);
  background: rgba(0, 171, 252, .16); color: var(--azure-300);
  font-weight: var(--weight-semibold); letter-spacing: .06em;
}
.gxc-top .env i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-success); display: block;
}

/* ---------- the console's own mark in the sidebar ---------- */
.gxc-brand {
  display: flex; flex-direction: column; gap: 3px;
  padding: 2px 2px 14px;
  border-bottom: 1px solid var(--gx-sb-border);
  margin-bottom: 4px;
}
.gxc-brand .l1 {
  font-family: var(--font-display, var(--font-sans));
  font-size: 19px; font-weight: 700; letter-spacing: .06em;
  color: var(--gx-sb-fg); line-height: 1;
}
.gxc-brand .l1 i { color: var(--gx-sb-accent); font-style: normal; font-weight: 500; }
.gxc-brand .l2 {
  font-size: var(--text-2xs); letter-spacing: .22em;
  text-transform: uppercase; color: var(--gx-sb-muted);
}

/* ---------- the morning queue ---------- */
.gxc-stack { display: flex; flex-direction: column; gap: 0; }
.gxc-alert {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-top: 1px solid var(--border-subtle);
  cursor: pointer; text-align: left; width: 100%;
  background: none; border-left: 0; border-right: 0; border-bottom: 0;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-standard);
}
.gxc-alert:first-child { border-top: 0; }
.gxc-alert:hover { background: var(--surface-sunken); }
.gxc-alert:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.gxc-alert .ic {
  width: 38px; height: 38px; flex: none;
  border-radius: var(--radius-md); display: grid; place-items: center;
}
.gxc-alert .ic.warn { background: var(--warning-50); color: var(--color-warning); }
.gxc-alert .ic.bad { background: var(--danger-50); color: var(--color-danger); }
.gxc-alert .ic.brand { background: var(--azure-50); color: var(--color-primary); }
.gxc-alert .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gxc-alert .t {
  display: block; font-size: var(--text-md);
  font-weight: var(--weight-bold); color: var(--text-strong);
}
.gxc-alert .d { display: block; font-size: var(--text-sm); color: var(--text-muted); }
.gxc-alert .go { color: var(--text-subtle); flex: none; }
.gxc-alert:hover .go { color: var(--color-primary); }

/* ---------- mini-KPI band (customer record) ----------
   Four figures divided by hairlines rather than by cards: they are one reading
   of one space, and boxing each would make them look independent. */
.gxc-minis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-subtle);
}
.gxc-mini { background: var(--surface-card); padding: 14px 16px; }
.gxc-mini .l {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .08em;
  font-weight: var(--weight-semibold); color: var(--text-muted);
}
.gxc-mini .v {
  font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--text-strong);
  font-variant-numeric: tabular-nums; margin-top: 5px; line-height: 1.1;
}
.gxc-mini .s { font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 2px; }

/* ---------- twelve-week histogram ----------
   Bars only, no axis and no numbers: it answers « est-ce que ça monte ou ça
   descend », which is the only question the console is allowed to ask about
   what happens inside a customer's space. */
.gxc-spark { display: flex; align-items: flex-end; gap: 4px; height: 78px; }
.gxc-spark i {
  flex: 1; background: var(--azure-100); border-radius: 3px 3px 0 0;
  min-height: 2px; display: block;
}
.gxc-spark i.on { background: var(--color-primary); }
.gxc-axis {
  display: flex; justify-content: space-between;
  font-size: var(--text-2xs); color: var(--text-subtle); margin-top: 7px;
}

/* ---------- theme swatch, read only ---------- */
.gxc-sw {
  display: flex; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-default) inset; flex: none;
}
.gxc-sw i { width: 22px; height: 34px; display: block; }

/* ---------- state dot (services, tickets) ---------- */
.gxc-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.gxc-dot.ok { background: var(--color-success); }
.gxc-dot.warn { background: var(--color-warning); }
.gxc-dot.bad { background: var(--color-danger); }
.gxc-dot.brand { background: var(--color-primary); }

/* Not watched from here — hollow rather than coloured, because a filled dot of
   any colour reads as a verdict and this one is « nobody looked ». */
.gxc-dot.off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-subtle); }

/* ---------- « pas d'accès aux données » — documentation on screen ----------
   07 §5 asks for this to be kept. It is not decoration: it is the boundary of
   the whole console, written where somebody reading a customer will see it. */
.gxc-note {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-muted); line-height: 1.55;
}
.gxc-note svg { flex: none; margin-top: 1px; color: var(--text-subtle); }
.gxc-note b { color: var(--text-strong); }

/* ---------- under ~900px, a sentence rather than a botched mobile shell ---- */
.gxc-toonarrow {
  display: none;
  min-height: 100dvh;
  place-items: center;
  padding: var(--space-6);
  background: var(--surface-sunken);
  text-align: center;
}
.gxc-toonarrow > div { max-width: 34ch; display: flex; flex-direction: column; gap: var(--space-3); }
.gxc-toonarrow h1 {
  margin: 0; font-size: var(--text-lg);
  font-weight: var(--weight-bold); color: var(--text-strong);
}
.gxc-toonarrow p { margin: 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   Support — the 340px inbox and the ticket beside it (07 §7)
   ============================================================ */

.gxc-two { display: grid; grid-template-columns: 340px 1fr; gap: 18px; align-items: start; }

.gxc-tklist {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 300px); overflow-y: auto;
}
.gxc-tk {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 16px;
  border: 0; border-top: 1px solid var(--border-subtle);
  background: none; font-family: inherit; text-align: left; width: 100%;
  cursor: pointer;
}
.gxc-tk:first-child { border-top: 0; }
.gxc-tk:hover { background: var(--surface-sunken); }
.gxc-tk:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.gxc-tk.on { background: var(--azure-50); box-shadow: inset 3px 0 0 var(--color-primary); }
.gxc-tk .r1 { display: flex; align-items: center; gap: 8px; }
.gxc-tk .cl {
  font-size: var(--text-2xs); font-weight: var(--weight-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gxc-tk .ag {
  margin-left: auto; font-size: var(--text-2xs);
  color: var(--text-subtle); white-space: nowrap;
}
.gxc-tk .sj {
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  color: var(--text-strong); line-height: 1.35;
}
.gxc-tk .wh { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- the thread ---------- */
.gxc-msgs { display: flex; flex-direction: column; gap: 14px; padding: 18px; }
.gxc-msg {
  display: flex; flex-direction: column;
  max-width: 82%; padding: 12px 15px;
  border-radius: var(--radius-lg);
  font-size: var(--text-sm); line-height: 1.55;
}
.gxc-msg.them {
  background: var(--surface-sunken); color: var(--text-body);
  border: 1px solid var(--border-subtle);
  align-self: flex-start; border-bottom-left-radius: 4px;
}
.gxc-msg.me {
  background: var(--azure-50); border: 1px solid var(--azure-200);
  color: var(--azure-900);
  align-self: flex-end; border-bottom-right-radius: 4px;
}
.gxc-msg .h { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.gxc-msg .h b { font-size: var(--text-xs); color: var(--text-strong); }
.gxc-msg .h span { font-size: var(--text-2xs); color: var(--text-subtle); }

/* ---------- the internal note ----------
   The contrast with the bubbles is the safeguard, not decoration: this is the
   one block on the screen the customer must never be shown, and it has to be
   impossible to mistake for something that was sent. */
.gxc-hint {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 18px 18px; padding: 12px 14px;
  border-radius: var(--radius-md);
  background: var(--warning-50); border: 1px solid var(--warning-100);
  font-size: var(--text-xs); color: var(--warning-700); line-height: 1.5;
}
.gxc-hint svg { flex: none; margin-top: 1px; }

/* ---------- the context stapled to the ticket ---------- */
.gxc-ctx {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border-subtle);
  border-radius: var(--radius-md); overflow: hidden;
  margin: 0;
}
.gxc-ctx div { background: var(--surface-sunken); padding: 10px 12px; }
.gxc-ctx dt {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-subtle); font-weight: var(--weight-semibold);
}
.gxc-ctx dd {
  margin: 3px 0 0; font-size: var(--text-xs);
  color: var(--text-strong); font-weight: var(--weight-semibold);
  word-break: break-word;
}

/* ============================================================
   Formules & tarifs (07 §8)
   ============================================================ */

.gxc-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gxc-plan {
  display: flex; flex-direction: column; gap: 14px;
  padding: 22px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: relative;
}
.gxc-plan.reco { border-color: var(--azure-200); box-shadow: var(--shadow-sm); }
.gxc-plan.reco::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--gradient-spark);
}
.gxc-plan .nm {
  font-family: var(--font-display, var(--font-sans));
  font-size: var(--text-lg); font-weight: 700;
  color: var(--text-strong); letter-spacing: .02em;
}
.gxc-plan .pr {
  font-size: var(--text-2xl); font-weight: var(--weight-bold);
  color: var(--text-strong); line-height: 1; font-variant-numeric: tabular-nums;
}
.gxc-plan .pr small {
  font-size: var(--text-sm); color: var(--text-muted);
  font-weight: var(--weight-semibold);

  /* Razor eats the newline between the amount and the unit, and « 49 €/ mois »
     is not a price anybody writes. */
  margin-left: 4px;
}
.gxc-plan .fr { font-size: var(--text-sm); color: var(--text-muted); line-height: 1.5; }
.gxc-plan .lim {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--surface-sunken);
  font-size: var(--text-xs); color: var(--text-body);
}
.gxc-plan ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.gxc-plan li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: var(--text-sm); color: var(--text-body); line-height: 1.45;
}
.gxc-plan li svg { flex: none; margin-top: 2px; color: var(--color-primary); }
.gxc-plan .use {
  display: flex; align-items: baseline; gap: 8px;
  padding-top: 14px; margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-muted);
}
.gxc-plan .use b {
  font-size: var(--text-md); color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Santé & journal (07 §8) — the service lines of the same shape
   as the morning screen's
   ============================================================ */

.gxc-svc {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-top: 1px solid var(--border-subtle);
}
.gxc-svc:first-child { border-top: 0; }
.gxc-svc .n {
  display: block; font-size: var(--text-sm);
  font-weight: var(--weight-bold); color: var(--text-strong);
}
.gxc-svc .d {
  display: block; font-size: var(--text-xs);
  color: var(--text-muted); margin-top: 2px;
}
.gxc-svc .m {
  margin-left: auto; font-size: var(--text-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* ============================================================
   Référentiels (07 §8) — the removable pills
   ============================================================ */

.gxc-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gxc-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-body);
}
.gxc-tag button {
  border: 0; background: none; padding: 0;
  display: grid; place-items: center;
  color: var(--text-subtle); cursor: pointer;
}
.gxc-tag button:hover { color: var(--color-danger); }
.gxc-tag button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ============================================================
   Vocabulary the prototype kept in auth.css — console-only here
   ============================================================ */

.gx-adm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--radius-pill);
  background: var(--azure-50); color: var(--azure-800);
  font-size: 10.5px; font-weight: var(--weight-bold);
  letter-spacing: .05em; text-transform: uppercase;
}
.gx-adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.gx-adm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* The app's own .gx-fchip is quieter — azure-50 when on. 07 §4 draws the
   console's filled with --color-primary, so the override is scoped to the
   console rather than moved, and every other screen keeps its own. */
.gxc-root .gx-fchip.on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--neutral-0);
  font-weight: var(--weight-semibold);
}
.gxc-root .gx-fchip .n { font-variant-numeric: tabular-nums; opacity: .72; font-size: var(--text-xs); }

/* ---------- internal notes ---------- */
.gx-notes { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; }
.gx-note-it { display: flex; gap: 11px; }
.gx-note-it .who { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--text-strong); }
.gx-note-it .when { font-size: var(--text-xs); color: var(--text-subtle); }
.gx-note-it .txt { font-size: var(--text-sm); color: var(--text-body); line-height: 1.5; margin-top: 3px; }

.gx-ta {
  width: 100%; font-family: inherit; font-size: var(--text-sm);
  color: var(--text-strong); padding: 11px 13px;
  border: 1.5px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); resize: vertical; min-height: 74px; outline: none;
}
.gx-ta:focus { border-color: var(--border-focus); box-shadow: var(--ring-brand); }

/* ---------- modal ---------- */
.gx-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(12, 34, 54, .5);
  z-index: 60; display: grid; place-items: center; padding: 24px;
}
.gx-modal {
  width: 100%; max-width: 540px;
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;

  /* The body scrolls, the title and the buttons do not. Until the catalogue's
     nine-field form arrived every modal here fitted on the screen, and this one
     pushed « Enregistrer » off the bottom of a 900px viewport — with the scrim
     underneath it, so there was nothing to scroll either. */
  display: flex; flex-direction: column;
  max-height: calc(100vh - 48px);
}
.gx-modal-h, .gx-modal-f { flex: none; }
.gx-modal-b { overflow-y: auto; }
.gx-modal-h { padding: 20px 22px 0; }
.gx-modal-h h3 {
  font-family: var(--font-display, var(--font-sans));
  font-weight: var(--display-weight, 700);
  font-size: calc(var(--text-lg) * var(--display-head-scale, 1));
  color: var(--text-strong); margin: 0;
}
.gx-modal-h p { margin: 7px 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: 1.55; }
.gx-modal-b { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.gx-modal-f {
  padding: 14px 22px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  display: flex; justify-content: flex-end; gap: 10px;
}

/* ---------- the one destructive button in the console ----------
   07 §4 asks for « Refuser la demande » in danger, and it earns it: the modal
   behind it sends an e-mail somebody outside the company reads, and starts a
   three-month deletion clock. The app has no danger variant — every other
   destructive action is an outline button with a bin — so rather than invent a
   variant nobody else uses, this re-points Fluent's accent tokens on one button.
   Same mechanism fluent-bridge.css uses to make the accent azure in the first
   place. */
.gx-danger {
  --accent-fill-rest: var(--danger-500) !important;
  --accent-fill-hover: var(--danger-600) !important;
  --accent-fill-active: var(--danger-700) !important;
  --accent-fill-focus: var(--danger-500) !important;
}

/* ---------- responsive: one breakpoint, as 07 §9 specifies ---------- */
@media (max-width: 1180px) {
  .gx-adm-kpis { grid-template-columns: repeat(2, 1fr); }
  .gxc-minis { grid-template-columns: repeat(2, 1fr); }
  .gxc-two { grid-template-columns: 1fr; }
  .gxc-plans { grid-template-columns: 1fr; }
  .gxc-ctx { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .gxc-root { display: none; }
  .gxc-toonarrow { display: grid; }
}