/* commergenix-components.css
 * Commergenix component patterns (Phase 3). HAND-AUTHORED — safe to edit.
 * Framework-neutral: the classes work in AdminLTE and Tabler pages alike and
 * are driven entirely by --cg-* tokens. Backing tag helpers live in
 * Core.UI/TagHelpers/CommergenixComponentTagHelpers.cs. Load after the shell CSS.
 */

/* ---- Page header ---- */
.cg-page-header{
  display:flex; align-items:flex-start; gap:var(--cg-space-6);
  margin-bottom:var(--cg-space-7);
}
.cg-page-header__main{ min-width:0; }
.cg-page-header__title{
  margin:0; color:var(--cg-text);
  font-size:var(--cg-font-size-2xl); font-weight:var(--cg-font-weight-bold);
  letter-spacing:-.01em; line-height:var(--cg-line-tight); text-wrap:balance;
}
.cg-page-header__desc{
  margin:var(--cg-space-2) 0 0; color:var(--cg-text-muted);
  font-size:var(--cg-font-size-base);
}
.cg-page-header__actions{ margin-left:auto; display:flex; gap:var(--cg-space-4); flex-shrink:0; }
@media (max-width:767.98px){
  .cg-page-header{ flex-direction:column; gap:var(--cg-space-4); }
  .cg-page-header__actions{ margin-left:0; }
}

/* ---- Workspace toolbar ---- */
.cg-toolbar{
  display:flex; align-items:center; gap:var(--cg-space-4);
  flex-wrap:wrap; margin-bottom:var(--cg-space-6);
}
.cg-toolbar__spacer{ margin-left:auto; }

/* ---- Filter bar ---- */
.cg-filterbar{
  display:flex; align-items:center; gap:var(--cg-space-3); flex-wrap:wrap;
  padding:var(--cg-space-4) var(--cg-space-5);
  background:var(--cg-surface);
  border:var(--cg-border-thin) solid var(--cg-border);
  border-radius:var(--cg-radius-lg);
  margin-bottom:var(--cg-space-6);
}

/* ---- Panel ---- */
.cg-panel{
  background:var(--cg-surface);
  border:var(--cg-border-thin) solid var(--cg-border);
  border-radius:var(--cg-radius-lg);
  box-shadow:var(--cg-shadow-sm);
  overflow:hidden;
}
.cg-panel + .cg-panel{ margin-top:var(--cg-space-6); }
.cg-panel__head{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--cg-space-4);
  padding:var(--cg-space-5) var(--cg-space-6);
  border-bottom:var(--cg-border-thin) solid var(--cg-border);
}
/* A logo or icon before the panel title (cg-panel-media): a fixed tile so mixed logos line up. */
.cg-panel__media, .cg-tile__media{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:var(--cg-radius-md); overflow:hidden;
}
.cg-panel__media img, .cg-tile__media img{ max-width:100%; max-height:100%; object-fit:contain; }
/* A lettered tile standing in for a missing logo (e.g. an integration without one). */
.cg-monogram{
  display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%;
  background:var(--cg-surface-sunken); color:var(--cg-text-muted);
  font-size:var(--cg-font-size-sm); font-weight:var(--cg-font-weight-bold); letter-spacing:.02em;
}
/* A grid of compact tiles: media, a title and an action (e.g. integrations not yet connected). */
.cg-tiles{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:var(--cg-space-4); padding:var(--cg-space-6);
}
.cg-tile{
  display:flex; align-items:center; gap:var(--cg-space-4); min-width:0;
  padding:var(--cg-space-4) var(--cg-space-5);
  border:var(--cg-border-thin) solid var(--cg-border); border-radius:var(--cg-radius-lg); background:var(--cg-surface);
}
.cg-tile__body{ flex:1 1 auto; min-width:0; }
.cg-tile__title{ margin:0; color:var(--cg-text); font-weight:var(--cg-font-weight-semibold); }
.cg-tile__meta{ margin:0; color:var(--cg-text-muted); font-size:var(--cg-font-size-sm); }
.cg-panel__title{
  margin:0; color:var(--cg-text);
  font-size:var(--cg-font-size-md); font-weight:var(--cg-font-weight-semibold);
}
.cg-panel__count{ color:var(--cg-text-subtle); font-size:var(--cg-font-size-sm); font-variant-numeric:tabular-nums; }
.cg-panel__status{ display:inline-flex; align-items:center; gap:var(--cg-space-3); }
.cg-panel__actions{ margin-left:auto; display:flex; gap:var(--cg-space-3); }
.cg-panel__body{ padding:var(--cg-space-6); }
.cg-panel__body--flush{ padding:0; }

/* ---- Dashboard widget stack ---- */
/* Uniform vertical rhythm between top-level dashboard widgets, whatever each
   widget's root element is (a bare cg-panel or a Bootstrap grid row). */
.cg-dashboard > * + *{ margin-top:var(--cg-space-6); }
/* Vertical gap between wrapped rows of a multi-card widget grid (e.g. Analytics). */
.cg-dashboard .cg-dash-grid{ row-gap:var(--cg-space-6); }

/* ---- Data table ---- */
.cg-table{ width:100%; border-collapse:collapse; font-size:var(--cg-font-size-sm); }
.cg-table th{
  text-align:left; background:var(--cg-surface); color:var(--cg-text-muted);
  font-size:var(--cg-font-size-xs); font-weight:var(--cg-font-weight-semibold);
  letter-spacing:.06em; text-transform:uppercase;
  padding:var(--cg-table-row-py-default) var(--cg-space-6);
  border-bottom:var(--cg-border-thin) solid var(--cg-border);
}
.cg-table td{
  color:var(--cg-text); font-variant-numeric:tabular-nums;
  padding:var(--cg-table-row-py-default) var(--cg-space-6);
  border-bottom:var(--cg-border-thin) solid var(--cg-surface-sunken);
}
.cg-table tbody tr:last-child td{ border-bottom:none; }
.cg-table tbody tr:hover{ background:var(--cg-surface-sunken); }
.cg-table--compact th, .cg-table--compact td{
  padding-top:var(--cg-table-row-py-compact); padding-bottom:var(--cg-table-row-py-compact);
}

/* ---- Status indicator ---- */
.cg-status{
  display:inline-flex; align-items:center; gap:var(--cg-space-3);
  font-size:var(--cg-font-size-xs); font-weight:var(--cg-font-weight-semibold);
  padding:3px var(--cg-space-4); border-radius:var(--cg-radius-pill);
  border:var(--cg-border-thin) solid transparent; white-space:nowrap;
}
.cg-status__dot{ width:8px; height:8px; border-radius:50%; background:currentColor; flex:0 0 auto; }
.cg-status--success{ background:var(--cg-success-bg); color:var(--cg-success-fg); }
.cg-status--warning{ background:var(--cg-warning-bg); color:var(--cg-warning-fg); }
.cg-status--danger { background:var(--cg-danger-bg);  color:var(--cg-danger-fg);  }
.cg-status--info   { background:var(--cg-info-bg);    color:var(--cg-info-fg);    }
.cg-status--inactive,
.cg-status--pending,
.cg-status--blocked,
.cg-status--unknown{ background:var(--cg-surface); color:var(--cg-text-muted); border-color:var(--cg-border); }
/* dot keeps the true status hue even where the label text is muted */
.cg-status--inactive .cg-status__dot{ background:var(--cg-inactive); }
.cg-status--pending  .cg-status__dot{ background:var(--cg-pending);  }
.cg-status--blocked  .cg-status__dot{ background:var(--cg-blocked);  }
.cg-status--unknown  .cg-status__dot{ background:var(--cg-unknown);  }
.cg-status__icon{ font-size:.9em; line-height:1; flex:0 0 auto; }
/* Red tag: non-conforming material, quarantined. Solid like the physical tag, so it stands out from ordinary danger. */
.cg-status--redtag{ background:var(--cg-danger); color:#fff; border-color:var(--cg-danger); }
.cg-status--redtag .cg-status__icon{ transform:rotate(-20deg); }

/* ---- Metric ---- */
.cg-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--cg-space-5); }
.cg-metric{
  background:var(--cg-surface);
  border:var(--cg-border-thin) solid var(--cg-border);
  border-radius:var(--cg-radius-lg);
  padding:var(--cg-space-5) var(--cg-space-6);
}
.cg-metric__label{
  margin:0; color:var(--cg-text-muted);
  font-size:var(--cg-font-size-xs); font-weight:var(--cg-font-weight-semibold);
  letter-spacing:.06em; text-transform:uppercase;
}
.cg-metric__value{
  margin:var(--cg-space-2) 0 0; color:var(--cg-text);
  font-size:var(--cg-font-size-3xl); font-weight:var(--cg-font-weight-bold);
  letter-spacing:-.02em; line-height:var(--cg-line-tight); font-variant-numeric:tabular-nums;
}
.cg-metric__delta{ font-size:var(--cg-font-size-sm); font-weight:var(--cg-font-weight-semibold); }
.cg-metric__delta--up{ color:var(--cg-success-fg); }
.cg-metric__delta--down{ color:var(--cg-danger-fg); }
/* A small static trend line under the value (inline SVG; stroke and fill follow currentColor). */
.cg-metric__spark{ margin-top:var(--cg-space-3); color:var(--cg-text-muted); }
.cg-metric__spark svg{ display:block; width:100%; height:32px; overflow:visible; }
.cg-metric__spark-line{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.cg-metric__spark-area{ fill:currentColor; opacity:.12; stroke:none; }
.cg-metric__spark--up{ color:var(--cg-success-fg); }
.cg-metric__spark--down{ color:var(--cg-danger-fg); }
.cg-metric__spark-caption{ margin-top:var(--cg-space-1); color:var(--cg-text-muted); font-size:var(--cg-font-size-xs); font-variant-numeric:tabular-nums; }

/* ---- Status strip: one small block per period (e.g. the last 24 hours), coloured by how it went ---- */
.cg-strip{ display:flex; gap:2px; align-items:stretch; height:20px; min-width:0; }
.cg-strip__cell{ flex:1 1 0; min-width:2px; border-radius:2px; background:var(--cg-border); }
.cg-strip__cell--up{ background:var(--cg-success); }
.cg-strip__cell--partial{ background:var(--cg-warning); }
.cg-strip__cell--down{ background:var(--cg-danger); }
.cg-strip__cell--off{ background:var(--cg-info); opacity:.45; }
.cg-strip__cell--none{ background:var(--cg-border); }

/* ---- Empty state ---- */
.cg-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:var(--cg-space-11) var(--cg-space-6); color:var(--cg-text-muted);
}
.cg-empty__icon{ width:44px; height:44px; color:var(--cg-text-subtle); margin-bottom:var(--cg-space-5); }
.cg-empty__title{ margin:0 0 var(--cg-space-2); color:var(--cg-text); font-size:var(--cg-font-size-lg); font-weight:var(--cg-font-weight-semibold); }
.cg-empty__desc{ margin:0 0 var(--cg-space-5); font-size:var(--cg-font-size-sm); max-width:42ch; }

/* ---- Loading ---- */
.cg-loading{ display:inline-flex; align-items:center; gap:var(--cg-space-4); color:var(--cg-text-muted); font-size:var(--cg-font-size-sm); padding:var(--cg-space-6); }
.cg-spinner{ display:inline-block; vertical-align:middle; flex:0 0 auto; width:18px; height:18px; border:2px solid var(--cg-border-strong); border-top-color:var(--cg-green); border-radius:50%; animation:cg-spin .7s linear infinite; }
@keyframes cg-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cg-spinner{ animation-duration:2.4s; } }

/* ---- AI insight / recommendation ---- */
.cg-ai{
  display:flex; gap:var(--cg-space-4);
  padding:var(--cg-space-5) var(--cg-space-6);
  background:var(--cg-green-soft);
  border:var(--cg-border-thin) solid var(--cg-success-border, #B0DAC1);
  border-left:var(--cg-border-thick) solid var(--cg-green);
  border-radius:var(--cg-radius-lg);
}
.cg-ai__icon{ color:var(--cg-green-deep); flex:0 0 auto; margin-top:1px; }
.cg-ai__label{ font-size:var(--cg-font-size-xs); font-weight:var(--cg-font-weight-semibold); letter-spacing:.08em; text-transform:uppercase; color:var(--cg-green-deep); margin:0 0 var(--cg-space-2); }
.cg-ai__body{ font-size:var(--cg-font-size-sm); color:var(--cg-text); margin:0; }

/* ---- Confidence / prediction indicator ---- */
.cg-confidence{ display:inline-flex; align-items:center; gap:var(--cg-space-3); font-size:var(--cg-font-size-xs); color:var(--cg-text-muted); font-variant-numeric:tabular-nums; }
.cg-confidence__track{ width:64px; height:6px; border-radius:var(--cg-radius-pill); background:var(--cg-surface-sunken); overflow:hidden; }
.cg-confidence__fill{ height:100%; background:var(--cg-green); border-radius:inherit; }
.cg-confidence--low .cg-confidence__fill{ background:var(--cg-warning); }
.cg-confidence--vlow .cg-confidence__fill{ background:var(--cg-danger); }

/* ---- Sortable table headers (cg-table) ---- */
.cg-table th.cg-sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
.cg-table th.cg-sortable:hover{ color:var(--cg-text); }
.cg-table th.cg-sortable .cg-sort-caret{ margin-left:var(--cg-space-2); opacity:.3; }
.cg-table th.cg-sort-asc .cg-sort-caret,
.cg-table th.cg-sort-desc .cg-sort-caret{ opacity:1; color:var(--cg-green); }

/* ---- Search input ---- */
.cg-search{
  height:var(--cg-control-h-sm); min-width:200px; max-width:320px;
  padding:0 var(--cg-space-4);
  background:var(--cg-surface); color:var(--cg-text);
  border:var(--cg-border-thin) solid var(--cg-border); border-radius:var(--cg-radius-sm);
  font-size:var(--cg-font-size-sm);
}
.cg-search::placeholder{ color:var(--cg-text-subtle); }
.cg-search:focus{ outline:none; border-color:var(--cg-green); box-shadow:var(--cg-focus-ring); }

/* ---- Pager ---- */
.cg-pager{
  display:flex; align-items:center; gap:var(--cg-space-4);
  padding:var(--cg-space-4) var(--cg-space-6);
  border-top:var(--cg-border-thin) solid var(--cg-border);
  font-size:var(--cg-font-size-sm); color:var(--cg-text-subtle);
  font-variant-numeric:tabular-nums;
}
.cg-pager__spacer{ margin-left:auto; }
.cg-pager__btns{ display:inline-flex; gap:var(--cg-space-2); }
.cg-pager__btn{
  min-width:var(--cg-control-h-sm); height:var(--cg-control-h-sm); padding:0 var(--cg-space-3);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cg-surface); color:var(--cg-text);
  border:var(--cg-border-thin) solid var(--cg-border); border-radius:var(--cg-radius-sm);
  cursor:pointer; font-size:var(--cg-font-size-sm); font-variant-numeric:tabular-nums;
}
.cg-pager__btn:hover:not(:disabled){ background:var(--cg-surface-sunken); }
.cg-pager__btn[aria-current="true"]{ background:var(--cg-green); color:var(--cg-text-on-brand); border-color:var(--cg-green); }
.cg-pager__btn:disabled{ opacity:.4; cursor:default; }

/* ---- Login / Identity account card (shared by all /Identity/Account pages) ---- */
.login-page{ background:var(--cg-canvas); }
.cg-login-card.card.card-outline{
  border:var(--cg-border-thin) solid var(--cg-border);
  border-top:var(--cg-border-thick) solid var(--cg-green);
  border-radius:var(--cg-radius-lg);
  box-shadow:var(--cg-shadow-lg);
  overflow:hidden;
}
.cg-login-card .card-header{
  background:var(--cg-surface); border-bottom:0;
  padding-top:var(--cg-space-8); padding-bottom:var(--cg-space-3);
}
.cg-login-card .login-box-msg{ color:var(--cg-text-muted); }
.cg-login-card .input-group-text{
  background:var(--cg-surface-sunken); border-color:var(--cg-border); color:var(--cg-text-muted);
}
.cg-login-card .social-auth-links > span{ color:var(--cg-text-subtle); font-size:var(--cg-font-size-sm); }

/* ---- Tabs (cg-tabs) ----
 * Page-level tabs: each tab is a link (its own URL), so tabbed screens keep their pages' handlers.
 * The active tab carries the brand green as an interaction cue (never as status). Scrolls sideways on phones.
 */
.cg-tabs{
  display:flex; gap:var(--cg-space-2); flex-wrap:nowrap; overflow-x:auto;
  margin:0 0 var(--cg-space-6); padding:0; list-style:none;
  border-bottom:var(--cg-border-thin) solid var(--cg-border);
  scrollbar-width:thin;
}
.cg-tabs__item{ flex:0 0 auto; }
.cg-tabs__link{
  display:inline-flex; align-items:center; gap:var(--cg-space-2);
  padding:var(--cg-space-3) var(--cg-space-5);
  margin-bottom:calc(-1 * var(--cg-border-thin));
  border-bottom:var(--cg-border-thick) solid transparent;
  color:var(--cg-text-muted); font-size:var(--cg-font-size-sm); font-weight:var(--cg-font-weight-medium);
  text-decoration:none; white-space:nowrap;
}
.cg-tabs__link:hover{ color:var(--cg-text); text-decoration:none; border-bottom-color:var(--cg-border-strong); }
.cg-tabs__link:focus-visible{ outline:var(--cg-focus-ring-width) solid var(--cg-focus-ring); outline-offset:var(--cg-focus-ring-offset); }
.cg-tabs__link.is-active,
.cg-tabs__link[aria-current="page"]{ color:var(--cg-text); font-weight:var(--cg-font-weight-semibold); border-bottom-color:var(--cg-green); }

/* ---- Avatar (cg-avatar) ----
 * Gravatar over initials on the person's own hue; a missing Gravatar removes the image and the initials show.
 */
.cg-avatar{
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:var(--cg-avatar-size, 34px); height:var(--cg-avatar-size, 34px); border-radius:50%; overflow:hidden;
  background:hsl(var(--cg-avatar-hue, 210) 45% 88%); color:hsl(var(--cg-avatar-hue, 210) 45% 26%);
  font-size:calc(var(--cg-avatar-size, 34px) * .4); font-weight:var(--cg-font-weight-semibold); line-height:1; user-select:none;
}
.cg-avatar__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }