/* ==========================================================================
   Crescent Air -- reusable components
   ========================================================================== */

/* --- Buttons -------------------------------------------------------------
   Four intents, three sizes. Every variant keeps a 1px border so the set
   shares one silhouette whether or not it is filled.                       */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 0 var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}

.btn:hover {
  text-decoration: none;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--primary {
  background: var(--c-brand-600);
  border-color: var(--c-brand-600);
  color: var(--text-inverse);
}

.btn--primary:hover {
  background: var(--c-brand-700);
  border-color: var(--c-brand-700);
}

.btn--primary:active {
  background: var(--c-brand-800);
}

.btn--secondary {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.btn--secondary:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.btn--ghost:hover {
  background: var(--c-ink-100);
  color: var(--text-primary);
}

.btn--danger {
  background: var(--surface-card);
  border-color: var(--border-default);
  color: var(--c-danger-600);
}

.btn--danger:hover {
  background: var(--c-danger-50);
  border-color: var(--c-danger-600);
}

.btn--sm {
  min-height: 30px;
  padding: 0 var(--s-3);
  font-size: var(--fs-12);
}

.btn--lg {
  min-height: 44px;
  padding: 0 var(--s-5);
  font-size: var(--fs-14);
}

.btn--block {
  width: 100%;
}

/* Icon-only buttons still meet the 44px touch target via a transparent
   hit area, and always carry an aria-label. */
.btn--icon {
  min-height: 36px;
  width: 36px;
  padding: 0;
}

/* --- Cards --------------------------------------------------------------- */

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--card-pad);
  border-bottom: 1px solid var(--border-subtle);
}

.card__titles {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.card__body {
  padding: var(--card-pad);
}

.card__body--flush {
  padding: 0;
}

.card__foot {
  padding: var(--s-3) var(--card-pad);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-hover);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.card__actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: none;
}

/* --- Badges --------------------------------------------------------------
   A badge always contains a word. The dot and the tint reinforce it; they
   never replace it.                                                        */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 2px var(--s-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
  flex: none;
}

.badge--neutral { background: var(--c-neutral-50);  border-color: #dbe3ec; color: #405266; }
.badge--brand   { background: var(--c-brand-50);    border-color: #cfe1f4; color: var(--c-brand-700); }
.badge--cool    { background: var(--c-cool-50);     border-color: #c9e7ee; color: var(--c-cool-700); }
.badge--warm    { background: var(--c-warm-50);     border-color: #f2ddc7; color: var(--c-warm-700); }
.badge--ok      { background: var(--c-ok-50);       border-color: #c9e7d9; color: var(--c-ok-600); }
.badge--warn    { background: var(--c-warn-50);     border-color: #f0dfc0; color: var(--c-warn-600); }
.badge--danger  { background: var(--c-danger-50);   border-color: #f2ccc8; color: var(--c-danger-600); }
.badge--muted   { background: var(--c-ink-50);      border-color: var(--border-subtle); color: var(--text-muted); }

/* Trend chip on a KPI card. Direction is stated by the arrow glyph and the
   sign, so it survives greyscale printing and colour blindness. */
.trend {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
}

.trend--up   { color: var(--c-ok-600); }
.trend--down { color: var(--c-danger-600); }
.trend--flat { color: var(--text-muted); }

/* --- Avatar -------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-md);
  background: var(--c-brand-600);
  color: var(--text-inverse);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  flex: none;
}

.avatar--sm { width: 24px; height: 24px; font-size: var(--fs-11); border-radius: var(--r-sm); }
.avatar--lg { width: 36px; height: 36px; font-size: var(--fs-13); }

/* Technician colour keys, so a person reads the same on every screen. */
.avatar--cool    { background: var(--c-cool-600); }
.avatar--warm    { background: var(--c-warm-600); }
.avatar--ok      { background: var(--c-ok-600); }
.avatar--neutral { background: var(--c-ink-600); }

/* --- Alerts -------------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
}

.alert__body { flex: 1; min-width: 0; }
.alert__title { font-weight: var(--fw-semibold); }
.alert__icon { margin-top: 1px; flex: none; }

.alert--success { background: var(--c-ok-50);     border-color: #c9e7d9; color: #10513a; }
.alert--error   { background: var(--c-danger-50); border-color: #f2ccc8; color: #8a2019; }
.alert--info    { background: var(--c-brand-50);  border-color: #cfe1f4; color: var(--c-brand-800); }
.alert--warn    { background: var(--c-warn-50);   border-color: #f0dfc0; color: #7f4b08; }

.alert__close {
  background: none;
  border: 0;
  padding: var(--s-1);
  color: inherit;
  opacity: 0.6;
  border-radius: var(--r-sm);
}

.alert__close:hover { opacity: 1; }

/* --- Tables --------------------------------------------------------------
   Dense by default. Row separators are hairlines rather than zebra stripes,
   which keeps long lists from looking busy.                                */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  padding: var(--s-3) var(--s-4);
  background: var(--surface-hover);
  border-bottom: 1px solid var(--border-default);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-align: left;
  white-space: nowrap;
}

.table tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr {
  transition: background-color var(--t-fast) var(--ease);
}

.table tbody tr:hover {
  background: var(--surface-hover);
}

/* Highlights the row a global-search result pointed at. */
.table tbody tr[data-focus="true"] {
  background: var(--c-brand-50);
  box-shadow: inset 3px 0 0 var(--c-brand-600);
}

.table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table__primary {
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.table__meta {
  display: block;
  color: var(--text-muted);
  font-size: var(--fs-12);
}

/* --- Empty and loading states -------------------------------------------- */

.empty {
  display: grid;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  text-align: center;
}

.empty__mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.empty__title {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}

.empty__body {
  max-width: 44ch;
  font-size: var(--fs-13);
  color: var(--text-secondary);
}

/* Skeletons reserve the exact height of the content they replace, so
   nothing shifts when real data arrives. */
.skeleton {
  background: linear-gradient(90deg, var(--c-ink-100) 25%, var(--c-ink-50) 37%, var(--c-ink-100) 63%);
  background-size: 400% 100%;
  border-radius: var(--r-sm);
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.is-loading {
  position: relative;
  pointer-events: none;
}

.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  border-radius: inherit;
}

/* --- Pagination ---------------------------------------------------------- */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}

.pagination__summary {
  font-size: var(--fs-12);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.pagination__controls {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* --- Dropdown menu ------------------------------------------------------- */

.menu {
  position: relative;
}

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--s-2));
  z-index: var(--z-dropdown);
  min-width: 220px;
  padding: var(--s-2);
  background: var(--surface-overlay);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
}

.menu__panel[hidden] {
  display: none;
}

.menu__header {
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--s-2);
}

.menu__name {
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-secondary);
  font-size: var(--fs-13);
  text-align: left;
}

.menu__item:hover {
  background: var(--c-ink-100);
  color: var(--text-primary);
  text-decoration: none;
}

.menu__item--danger {
  color: var(--c-danger-600);
}

.menu__item--danger:hover {
  background: var(--c-danger-50);
  color: var(--c-danger-600);
}

/* --- Sparkline ----------------------------------------------------------- */

.sparkline {
  display: block;
  width: 100%;
  overflow: visible;
}

.sparkline--brand { color: var(--c-brand-500); }
.sparkline--cool  { color: var(--c-cool-600); }
.sparkline--ok    { color: var(--c-ok-600); }
.sparkline--warm  { color: var(--c-warm-600); }

/* --- Segmented control --------------------------------------------------- */

.segmented {
  display: inline-flex;
  padding: 2px;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
}

.segmented__item {
  padding: var(--s-1) var(--s-3);
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--text-secondary);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
}

.segmented__item[aria-pressed="true"] {
  background: var(--surface-card);
  color: var(--text-primary);
  box-shadow: var(--sh-xs);
}