/* ==========================================================================
   Xealio Connect — core components
   Requires tokens.css. No colour literals below this line.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--xc-bg);
  color: var(--xc-text);
  font: var(--xc-t-body);
  font-variant-numeric: var(--xc-nums);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure { margin: 0; }
a { color: var(--xc-navy); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--xc-navy-bright);
  outline-offset: 2px;
  border-radius: var(--xc-r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* --- App shell ----------------------------------------------------------- */

.xc-app { min-height: 100dvh; }

.xc-sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--xc-sidebar-w);
  display: flex; flex-direction: column; gap: var(--xc-1);
  padding: var(--xc-4) var(--xc-3);
  background: var(--xc-nav-bg);
  border-right: 1px solid var(--xc-line);
}
.xc-sidebar__brand { display: flex; align-items: center; gap: var(--xc-2); padding: var(--xc-2) var(--xc-2) var(--xc-6); }

.xc-navlink {
  display: flex; align-items: center; gap: var(--xc-3);
  min-height: var(--xc-tap); padding: 0 var(--xc-3);
  border-radius: var(--xc-r-md);
  color: var(--xc-text); text-decoration: none;
  font: var(--xc-t-body-md);
  transition: background var(--xc-fast) var(--xc-ease);
}
.xc-navlink:hover { background: var(--xc-nav-bg-active); }
.xc-navlink[aria-current="page"] { background: var(--xc-surface); color: var(--xc-navy); }
.xc-navlink__count { margin-left: auto; font: var(--xc-t-meta); color: var(--xc-text-faint); }

.xc-main { padding: var(--xc-6) var(--xc-6) var(--xc-12); margin-left: var(--xc-sidebar-w); }
.xc-main > * { max-width: var(--xc-content-max); }

.xc-tabbar { display: none; }

@media (max-width: 900px) {
  .xc-sidebar { display: none; }
  .xc-main { margin-left: 0; padding: var(--xc-4) var(--xc-4) calc(var(--xc-tabbar-h) + var(--xc-8)); }
  .xc-tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 20;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: calc(var(--xc-tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--xc-nav-bg);
    border-top: 1px solid var(--xc-line);
  }
  .xc-tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    color: var(--xc-text-muted); text-decoration: none; font: var(--xc-t-meta);
  }
  .xc-tabbar__item[aria-current="page"] { color: var(--xc-navy); font-weight: 600; }
}

/* --- Page header ---------------------------------------------------------
   Title, then one muted meta line. The app joins meta with middle dots
   ("Alpha SBR 100 · Ghent, Belgium"); keep that, it is the house style.     */

.xc-page-head { margin-bottom: var(--xc-5); }
.xc-page-head__title { font: var(--xc-t-display); letter-spacing: -.015em; }
.xc-page-head__meta  { font: var(--xc-t-body); color: var(--xc-text-muted); margin-top: var(--xc-1); }

/* --- Card ----------------------------------------------------------------- */

.xc-card {
  background: var(--xc-surface);
  border: 1px solid var(--xc-line);
  border-radius: var(--xc-r-lg);
  box-shadow: var(--xc-shadow-raised);
}
.xc-card__head {
  display: flex; align-items: center; gap: var(--xc-3);
  padding: var(--xc-4) var(--xc-5);
  border-bottom: 1px solid var(--xc-line);
}
.xc-card__title { font: var(--xc-t-h2); }
.xc-card__body { padding: var(--xc-5); }
.xc-card--flush .xc-card__body { padding: 0; }

/* The one navy block per screen. Used for the single most promoted action:
   Talk to an Expert, the critical-alarm banner, or the login panel. */
.xc-card--navy {
  background: var(--xc-navy); border-color: transparent; color: var(--xc-text-on-navy);
}
.xc-card--navy .xc-card__title { color: var(--xc-text-on-navy); }

/* --- Section label --------------------------------------------------------
   Process-group heading on the plant page (Aeration and blowers, etc.).     */
.xc-group-head {
  display: flex; align-items: baseline; gap: var(--xc-3);
  margin: var(--xc-8) 0 var(--xc-3);
}
.xc-group-head__title { font: var(--xc-t-h1); letter-spacing: -.01em; }
.xc-group-head__count { font: var(--xc-t-small); color: var(--xc-text-faint); }

/* --- State: dot, tag, badge ----------------------------------------------
   Colour never carries meaning alone. A dot always sits next to a word, and
   a tag always carries text. Set the state with a modifier class.           */

.xc-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--xc-idle-mark); }
.xc-state { display: inline-flex; align-items: center; gap: var(--xc-2); font: var(--xc-t-body-md); color: var(--xc-idle-text); }
.xc-state__icon { width: 16px; height: 16px; flex: none; }

.xc-tag {
  display: inline-flex; align-items: center; gap: var(--xc-1);
  font: var(--xc-t-tag); letter-spacing: var(--xc-tag-track); text-transform: uppercase;
  color: var(--xc-idle-text);
}
.xc-badge {
  display: inline-flex; align-items: center; gap: var(--xc-2);
  padding: 3px var(--xc-2); border-radius: var(--xc-r-sm);
  font: var(--xc-t-tag); letter-spacing: var(--xc-tag-track); text-transform: uppercase;
  background: var(--xc-idle-soft); color: var(--xc-idle-text);
}

.is-ok    .xc-dot, .xc-dot.is-ok    { background: var(--xc-ok-mark); }
.is-fault .xc-dot, .xc-dot.is-fault { background: var(--xc-fault-mark); }
.is-warn  .xc-dot, .xc-dot.is-warn  { background: var(--xc-warn-mark); }
.is-info  .xc-dot, .xc-dot.is-info  { background: var(--xc-info-mark); }

.xc-state.is-ok,    .xc-tag.is-ok    { color: var(--xc-ok-text); }
.xc-state.is-fault, .xc-tag.is-fault { color: var(--xc-fault-text); }
.xc-state.is-warn,  .xc-tag.is-warn  { color: var(--xc-warn-text); }
.xc-state.is-info,  .xc-tag.is-info  { color: var(--xc-info-text); }

.xc-badge.is-ok    { background: var(--xc-ok-soft);    color: var(--xc-ok-text); }
.xc-badge.is-fault { background: var(--xc-fault-soft); color: var(--xc-fault-text); }
.xc-badge.is-warn  { background: var(--xc-warn-soft);  color: var(--xc-warn-text); }
.xc-badge.is-info  { background: var(--xc-info-soft);  color: var(--xc-info-text); }

/* --- Equipment row --------------------------------------------------------
   Name, PLC code beneath it in muted 13px, state on the right, value and
   last-update below. Codes are never wrapped in parentheses.                */

.xc-equip { display: grid; grid-template-columns: 1fr auto; gap: var(--xc-1) var(--xc-4);
  padding: var(--xc-4) var(--xc-5); border-bottom: 1px solid var(--xc-line); }
.xc-equip:last-child { border-bottom: 0; }
.xc-equip__name  { font: var(--xc-t-body-md); }
.xc-equip__code  { grid-column: 1; font: var(--xc-t-meta); color: var(--xc-text-faint); letter-spacing: .02em; }
.xc-equip__state { grid-column: 2; grid-row: 1; justify-self: end; }
.xc-equip__value { grid-column: 2; grid-row: 2; justify-self: end; font: var(--xc-t-meta); color: var(--xc-text-muted); }

/* --- Reading (sensor value) ----------------------------------------------- */

.xc-reading { padding: var(--xc-4) var(--xc-5); border-bottom: 1px solid var(--xc-line); }
.xc-reading:last-child { border-bottom: 0; }
.xc-reading__label { font: var(--xc-t-small); color: var(--xc-text-muted); }
.xc-reading__value { font: var(--xc-t-h1); letter-spacing: -.01em; }
.xc-reading__unit  { font: var(--xc-t-body); color: var(--xc-text-muted); margin-left: 2px; }
.xc-reading__stamp { font: var(--xc-t-meta); color: var(--xc-text-faint); }
/* Missing data is stated, never filled in. */
.xc-reading__value.is-nodata { color: var(--xc-text-faint); font: var(--xc-t-h2); }

.xc-readings-grid { display: grid; gap: var(--xc-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* --- Plant card (fleet) ---------------------------------------------------- */

.xc-fleet { display: grid; gap: var(--xc-4); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.xc-plant { display: block; text-decoration: none; color: inherit; overflow: hidden;
  transition: border-color var(--xc-fast) var(--xc-ease); }
.xc-plant:hover { border-color: var(--xc-line-strong); }
.xc-plant__media { aspect-ratio: 16 / 9; background: var(--xc-surface-sunken); object-fit: contain; width: 100%; }
.xc-plant__body { padding: var(--xc-4) var(--xc-5) var(--xc-5); display: grid; gap: var(--xc-2); }
.xc-plant__name { font: var(--xc-t-h2); }
.xc-plant__code { font: var(--xc-t-meta); color: var(--xc-text-faint); }
.xc-plant__meta { font: var(--xc-t-small); color: var(--xc-text-muted); }
.xc-plant__foot { display: flex; align-items: center; gap: var(--xc-3); flex-wrap: wrap;
  margin-top: var(--xc-1); padding-top: var(--xc-3); border-top: 1px solid var(--xc-line); }
/* A left edge carries the status a second time, for scanning a long grid. */
.xc-plant.is-fault { border-left: 3px solid var(--xc-fault-mark); }
.xc-plant.is-warn  { border-left: 3px solid var(--xc-warn-mark); }
.xc-plant.is-idle  { border-left: 3px solid var(--xc-idle-mark); }
.xc-plant.is-ok    { border-left: 3px solid var(--xc-ok-mark); }

/* --- Log / event row ------------------------------------------------------
   Time, coloured icon disc, title, subtitle, category tag — the app's Logs
   layout, with the equipment code added.                                    */

.xc-log { display: grid; grid-template-columns: 52px 40px 1fr; gap: var(--xc-1) var(--xc-3);
  padding: var(--xc-4) var(--xc-5); border-bottom: 1px solid var(--xc-line); }
.xc-log:last-child { border-bottom: 0; }
.xc-log__time { grid-row: 1 / span 3; font: var(--xc-t-small); color: var(--xc-text-muted); padding-top: 2px; }
.xc-log__icon { grid-row: 1 / span 3; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--xc-idle-mark); color: #FFF; }
.xc-log__icon.is-ok { background: var(--xc-ok-mark); }
.xc-log__icon.is-fault { background: var(--xc-fault-mark); }
.xc-log__icon.is-warn { background: var(--xc-warn-mark); }
.xc-log__icon.is-info { background: var(--xc-info-mark); }
.xc-log__title { font: var(--xc-t-body-md); }
.xc-log__sub   { font: var(--xc-t-small); color: var(--xc-text-muted); }
.xc-log__day   { padding: var(--xc-5) var(--xc-5) var(--xc-2); font: var(--xc-t-tag);
  letter-spacing: var(--xc-tag-track); text-transform: uppercase; color: var(--xc-text-faint); }

/* --- Chips (filters) ------------------------------------------------------ */

.xc-chips { display: flex; gap: var(--xc-2); flex-wrap: wrap; }
.xc-chip {
  min-height: 36px; padding: 0 var(--xc-4);
  display: inline-flex; align-items: center; gap: var(--xc-2);
  border: 1px solid var(--xc-line-strong); border-radius: var(--xc-r-pill);
  background: transparent; color: var(--xc-text); font: var(--xc-t-small); cursor: pointer;
}
.xc-chip[aria-pressed="true"] { background: var(--xc-info-soft); border-color: transparent; color: var(--xc-info-text); font-weight: 600; }

/* --- Search --------------------------------------------------------------- */

.xc-search { display: flex; align-items: center; gap: var(--xc-3);
  min-height: 48px; padding: 0 var(--xc-4);
  background: var(--xc-surface); border: 1px solid var(--xc-line-strong);
  border-radius: var(--xc-r-pill); }
.xc-search input { flex: 1; border: 0; background: none; color: inherit; font: var(--xc-t-body); outline: none; }

/* --- Buttons -------------------------------------------------------------- */

.xc-btn {
  min-height: var(--xc-tap); padding: 0 var(--xc-5);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--xc-2);
  border: 1px solid transparent; border-radius: var(--xc-r-md);
  font: var(--xc-t-body-md); cursor: pointer; text-decoration: none;
  transition: background var(--xc-fast) var(--xc-ease);
}
.xc-btn--primary { background: var(--xc-navy); color: var(--xc-text-on-navy); }
.xc-btn--primary:hover { background: var(--xc-navy-deep); }
.xc-btn--secondary { background: var(--xc-surface); border-color: var(--xc-line-strong); color: var(--xc-text); }
.xc-btn--quiet { background: transparent; color: var(--xc-navy); }
.xc-btn--danger { background: var(--xc-fault-text); color: #FFF; }
/* Anything that moves plant equipment. Amber is reserved for this and for
   maintenance state — it is never decorative. */
.xc-btn--control { background: var(--xc-surface); border-color: var(--xc-amber); color: var(--xc-warn-text); }
.xc-btn[disabled] { opacity: .5; cursor: not-allowed; }
.xc-btn--block { width: 100%; }
/* On navy surfaces the promoted button inverts, as in the app. */
.xc-card--navy .xc-btn--primary { background: #FFF; color: var(--xc-navy); }

/* --- Settings / navigation row -------------------------------------------- */

.xc-row {
  display: grid; grid-template-columns: 28px 1fr 16px; align-items: center;
  gap: var(--xc-4); min-height: 64px; padding: var(--xc-3) var(--xc-5);
  border-bottom: 1px solid var(--xc-line); color: inherit; text-decoration: none;
}
.xc-row:last-child { border-bottom: 0; }
.xc-row__title { font: var(--xc-t-body-md); }
.xc-row__sub   { font: var(--xc-t-small); color: var(--xc-text-muted); }
.xc-row__chev  { color: var(--xc-text-faint); }

/* --- Tabs (plant detail) --------------------------------------------------- */

.xc-tabs { display: flex; gap: var(--xc-1); overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--xc-line); margin-bottom: var(--xc-5); }
.xc-tabs::-webkit-scrollbar { display: none; }
.xc-tab { padding: var(--xc-3) var(--xc-4); white-space: nowrap; text-decoration: none;
  color: var(--xc-text-muted); font: var(--xc-t-body-md); border-bottom: 2px solid transparent; }
.xc-tab[aria-current="page"] { color: var(--xc-navy); border-bottom-color: var(--xc-navy); }

/* --- Table that collapses to cards ----------------------------------------- */

.xc-table { width: 100%; border-collapse: collapse; font: var(--xc-t-small); }
.xc-table th { text-align: left; font-weight: 600; color: var(--xc-text-muted);
  background: var(--xc-surface-sunken); padding: var(--xc-3) var(--xc-4); }
.xc-table td { padding: var(--xc-3) var(--xc-4); border-bottom: 1px solid var(--xc-line); }

@media (max-width: 700px) {
  .xc-table, .xc-table tbody, .xc-table tr, .xc-table td { display: block; width: 100%; }
  .xc-table thead { display: none; }
  .xc-table tr { border: 1px solid var(--xc-line); border-radius: var(--xc-r-md);
    margin-bottom: var(--xc-3); padding: var(--xc-2) var(--xc-3); background: var(--xc-surface); }
  .xc-table td { display: flex; justify-content: space-between; gap: var(--xc-4);
    border-bottom: 0; padding: var(--xc-2) 0; }
  .xc-table td::before { content: attr(data-label); color: var(--xc-text-muted); }
}

/* --- Communication health ---------------------------------------------------
   Five links in the chain: portal, collector, router/VPN, PLC, data updating. */

.xc-chain { display: flex; flex-wrap: wrap; gap: var(--xc-2); }
.xc-chain__link { display: inline-flex; align-items: center; gap: var(--xc-2);
  padding: var(--xc-2) var(--xc-3); border-radius: var(--xc-r-sm);
  background: var(--xc-surface-sunken); font: var(--xc-t-meta); color: var(--xc-text-muted); }

/* --- Sticky critical bar ----------------------------------------------------- */

.xc-alarmbar { position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--xc-3);
  padding: var(--xc-3) var(--xc-5); margin-bottom: var(--xc-4);
  border-radius: var(--xc-r-md); box-shadow: var(--xc-shadow-float);
  background: var(--xc-fault-soft); color: var(--xc-fault-text); font: var(--xc-t-body-md); }

/* --- Empty, offline, error states --------------------------------------------
   Say what happened and what to do. No apologies, no illustrations.          */

.xc-state-block { display: grid; gap: var(--xc-2); justify-items: center; text-align: center;
  padding: var(--xc-10) var(--xc-5); color: var(--xc-text-muted); }
.xc-state-block__title { font: var(--xc-t-h2); color: var(--xc-text); }
.xc-state-block__body  { max-width: 46ch; font: var(--xc-t-small); }

.xc-skeleton { border-radius: var(--xc-r-sm); background: var(--xc-surface-sunken);
  animation: xc-pulse 1.4s var(--xc-ease) infinite; }
@keyframes xc-pulse { 50% { opacity: .55; } }

/* --- Utilities ---------------------------------------------------------------- */

.xc-stack   { display: grid; gap: var(--xc-4); }
.xc-stack-2 { display: grid; gap: var(--xc-2); }
.xc-inline  { display: flex; align-items: center; gap: var(--xc-3); flex-wrap: wrap; }
.xc-muted   { color: var(--xc-text-muted); }
.xc-faint   { color: var(--xc-text-faint); font: var(--xc-t-meta); }
.xc-prose   { max-width: var(--xc-prose-max); font: var(--xc-t-reading); }
.xc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }