/* ==========================================================================
   CloudServus — Portal Component Library
   Requires cloudservus-tokens.css (loaded first).

   Every component is built from the tokens, so a brand change is one file.
   Nothing here hard-codes a hex value.

   Colour choices meet WCAG 2.1 AA (4.5:1 body text). Ratios are noted in
   the tokens file. Focus states and prefers-reduced-motion are handled.
   ========================================================================== */

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

body.cs-app {
  margin: 0;
  font-family: var(--cs-font);
  font-size: var(--cs-text-base);
  line-height: var(--cs-leading-body);
  color: var(--cs-text);
  background: var(--cs-canvas);
  -webkit-font-smoothing: antialiased;
}

.cs-app h1, .cs-app h2, .cs-app h3, .cs-app h4 {
  margin: 0 0 var(--cs-space-3);
  font-weight: var(--cs-weight-heavy);
  line-height: var(--cs-leading-tight);
  letter-spacing: var(--cs-tracking-heading);
  color: var(--cs-text);
}
.cs-app h1 { font-size: 28px; }
.cs-app h2 { font-size: 22px; }
.cs-app h3 { font-size: var(--cs-text-md); }
.cs-app h4 { font-size: var(--cs-text-base); font-weight: var(--cs-weight-bold); }
.cs-app p  { margin: 0 0 var(--cs-space-4); }
.cs-app a  { color: var(--cs-link); text-decoration: underline; text-underline-offset: 2px; }
.cs-app a:hover { text-decoration-thickness: 2px; }

/* Links inside navy chrome must not inherit the blue underlined link style. */
.cs-app .cs-sidebar a, .cs-app .cs-navlink { color: var(--cs-dark-text); text-decoration: none; }
.cs-app .cs-navlink--active { color: #FFFFFF; }

/* The wide-tracked uppercase kicker is a CloudServus signature. Worth keeping. */
.cs-eyebrow {
  font-size: var(--cs-text-xs);
  font-weight: var(--cs-weight-bold);
  letter-spacing: var(--cs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cs-orange-text);
}
.cs-muted  { color: var(--cs-text-muted); }
.cs-subtle { color: var(--cs-text-subtle); font-size: var(--cs-text-sm); }

/* Global focus ring. Never remove this without replacing it. */
.cs-app :focus-visible {
  outline: 2px solid var(--cs-orange);
  outline-offset: 2px;
  border-radius: var(--cs-radius-sm);
}

/* ---------------------------------------------------- app shell ---------- */
/* Navy chrome + light content. The layout that keeps it on-brand and usable. */
.cs-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }

.cs-sidebar {
  background: var(--cs-navy);
  color: var(--cs-dark-text);
  padding: var(--cs-space-6) var(--cs-space-4);
  display: flex; flex-direction: column; gap: var(--cs-space-6);
}
.cs-sidebar__logo img { width: 150px; height: auto; display: block; }
.cs-sidebar__group { display: flex; flex-direction: column; gap: 2px; }
.cs-sidebar__label {
  font-size: var(--cs-text-xs); font-weight: var(--cs-weight-bold);
  letter-spacing: var(--cs-tracking-eyebrow); text-transform: uppercase;
  color: var(--cs-dark-muted); padding: 0 var(--cs-space-3) var(--cs-space-2);
}
.cs-navlink {
  display: flex; align-items: center; gap: var(--cs-space-3);
  padding: 10px var(--cs-space-3);
  border-radius: var(--cs-radius);
  color: var(--cs-dark-text);
  font-size: 14px; font-weight: var(--cs-weight-semibold);
  text-decoration: none;
  transition: background var(--cs-transition);
}
.cs-navlink:hover { background: rgba(255,255,255,.07); text-decoration: none; }
/* Active state uses an orange rail, not an orange fill — keeps orange scarce. */
.cs-navlink--active {
  background: rgba(255,255,255,.10);
  box-shadow: inset 3px 0 0 var(--cs-orange);
  color: #FFFFFF;
}

.cs-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cs-space-4);
  padding: var(--cs-space-4) var(--cs-space-8);
  background: var(--cs-surface);
  border-bottom: 1px solid var(--cs-border);
}
.cs-main { padding: var(--cs-space-8); max-width: var(--cs-container); }

@media (max-width: 860px) {
  .cs-shell { grid-template-columns: 1fr; }
  .cs-sidebar { flex-direction: row; align-items: center; gap: var(--cs-space-4); overflow-x: auto; }
  .cs-main { padding: var(--cs-space-4); }
}

/* ------------------------------------------------------- buttons --------- */
/* Padding, radius, weight and hover lift are taken verbatim from the live site.
   The one change: navy label on the orange fill (6.35:1) instead of white
   (2.58:1, which fails AA). */
.cs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--cs-space-2);
  padding: 15px 30px;
  border-radius: var(--cs-radius);
  font-family: var(--cs-font); font-size: 16px;
  font-weight: var(--cs-weight-bold); line-height: 1;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: transform var(--cs-transition), background var(--cs-transition),
              border-color var(--cs-transition);
}
.cs-btn:hover { text-decoration: none; }
.cs-btn:disabled, .cs-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* One per view. That scarcity is what makes it read as the action. */
.cs-btn--primary   { background: var(--cs-orange); color: var(--cs-orange-on-fill); }
.cs-btn--primary:hover:not(:disabled) { background: var(--cs-orange-hover); transform: translateY(-2px); }

.cs-btn--secondary { background: var(--cs-surface); color: var(--cs-text); border-color: var(--cs-border-strong); }
.cs-btn--secondary:hover:not(:disabled) { background: var(--cs-surface-sunken); transform: translateY(-2px); }

.cs-btn--subtle    { background: transparent; color: var(--cs-link); }
.cs-btn--subtle:hover:not(:disabled) { background: var(--cs-surface-sunken); }

.cs-btn--danger    { background: var(--cs-danger); color: #FFFFFF; }
.cs-btn--danger:hover:not(:disabled) { filter: brightness(.92); transform: translateY(-2px); }

/* For dark/marketing surfaces — the site's ghost button. */
.cs-btn--ghost-dark { background: rgba(255,255,255,.08); color: #FFFFFF; border-color: var(--cs-dark-border-strong); }
.cs-btn--ghost-dark:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }

.cs-btn--sm  { padding: 9px 16px;  font-size: 14px; }
.cs-btn--lg  { padding: 18px 36px; font-size: 17px; }
.cs-btn--block { width: 100%; }

/* --------------------------------------------------------- cards --------- */
.cs-card {
  background: var(--cs-surface);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);      /* 16px — matches the site */
  padding: var(--cs-space-6);
  box-shadow: var(--cs-shadow-sm);
}
.cs-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--cs-space-4); margin-bottom: var(--cs-space-4);
}
.cs-card__title { margin: 0; font-size: var(--cs-text-md); font-weight: var(--cs-weight-bold); }
.cs-card--flush { padding: 0; overflow: hidden; }

/* Stat tile. Orange reserved for the number itself. */
.cs-stat { display: flex; flex-direction: column; gap: var(--cs-space-1); }
.cs-stat__value { font-size: 32px; font-weight: var(--cs-weight-heavy); letter-spacing: var(--cs-tracking-heading); }
.cs-stat__label { font-size: var(--cs-text-sm); color: var(--cs-text-muted); }
.cs-stat--accent .cs-stat__value { color: var(--cs-orange-text); }

.cs-grid { display: grid; gap: var(--cs-space-4); }
.cs-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cs-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* -------------------------------------------------------- tables --------- */
.cs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cs-table th {
  text-align: left; padding: 12px var(--cs-space-4);
  background: var(--cs-surface-sunken);
  font-size: var(--cs-text-xs); font-weight: var(--cs-weight-bold);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--cs-text-muted);
  border-bottom: 1px solid var(--cs-border);
  white-space: nowrap;
}
.cs-table td { padding: 14px var(--cs-space-4); border-bottom: 1px solid var(--cs-border); vertical-align: middle; }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-table tbody tr:hover { background: var(--cs-canvas); }
.cs-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.cs-table-wrap { overflow-x: auto; }   /* tables scroll, the page never does */

/* -------------------------------------------------------- badges --------- */
.cs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--cs-radius-pill);
  font-size: var(--cs-text-xs); font-weight: var(--cs-weight-bold);
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid transparent;
}
/* Colour is never the only signal — pair with the label text. */
.cs-badge--neutral { background: var(--cs-surface-sunken); color: var(--cs-text-muted); border-color: var(--cs-border); }
.cs-badge--success { background: rgba(27,122,75,.10);  color: var(--cs-success); border-color: rgba(27,122,75,.25); }
.cs-badge--warning { background: rgba(150,89,11,.10);  color: var(--cs-warning); border-color: rgba(150,89,11,.25); }
.cs-badge--danger  { background: rgba(192,39,28,.10);  color: var(--cs-danger);  border-color: rgba(192,39,28,.25); }
.cs-badge--info    { background: rgba(0,65,145,.10);   color: var(--cs-info);    border-color: rgba(0,65,145,.25); }
.cs-badge--accent  { background: var(--cs-orange-tint); color: var(--cs-orange-text); border-color: rgba(249,128,35,.30); }

/* --------------------------------------------------------- forms --------- */
.cs-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--cs-space-5); }
.cs-label { font-size: var(--cs-text-sm); font-weight: var(--cs-weight-bold); color: var(--cs-text); }
.cs-label__req { color: var(--cs-danger); margin-left: 2px; }

.cs-input, .cs-select, .cs-textarea {
  width: 100%;
  padding: 11px var(--cs-space-3);
  font-family: var(--cs-font); font-size: var(--cs-text-base);
  color: var(--cs-text);
  background: var(--cs-surface);
  border: 1px solid var(--cs-border-strong);
  border-radius: var(--cs-radius);
  transition: border-color var(--cs-transition), box-shadow var(--cs-transition);
}
.cs-input::placeholder, .cs-textarea::placeholder { color: var(--cs-text-subtle); }
.cs-input:focus, .cs-select:focus, .cs-textarea:focus {
  outline: none;
  border-color: var(--cs-orange);
  box-shadow: 0 0 0 3px var(--cs-orange-ring);
}
.cs-textarea { min-height: 110px; resize: vertical; }
.cs-select { appearance: none; padding-right: var(--cs-space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%234A5D75' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--cs-space-3) center; }

.cs-help  { font-size: var(--cs-text-sm); color: var(--cs-text-muted); }
.cs-error { font-size: var(--cs-text-sm); color: var(--cs-danger); font-weight: var(--cs-weight-semibold); }
.cs-field--invalid .cs-input,
.cs-field--invalid .cs-select,
.cs-field--invalid .cs-textarea { border-color: var(--cs-danger); }

.cs-check { display: flex; align-items: flex-start; gap: var(--cs-space-2); font-size: 14px; }
.cs-check input { margin-top: 3px; accent-color: var(--cs-orange); width: 16px; height: 16px; }

/* -------------------------------------------------------- alerts --------- */
.cs-alert {
  display: flex; gap: var(--cs-space-3);
  padding: var(--cs-space-4);
  border-radius: var(--cs-radius);
  border: 1px solid var(--cs-border);
  border-left-width: 4px;
  background: var(--cs-surface);
  font-size: 14px;
}
.cs-alert--success { border-left-color: var(--cs-success); }
.cs-alert--warning { border-left-color: var(--cs-warning); }
.cs-alert--danger  { border-left-color: var(--cs-danger);  }
.cs-alert--info    { border-left-color: var(--cs-info);    }
.cs-alert__title   { font-weight: var(--cs-weight-bold); margin-bottom: 2px; }

/* ---------------------------------------------------------- tabs --------- */
.cs-tabs { display: flex; gap: var(--cs-space-5); border-bottom: 1px solid var(--cs-border); margin-bottom: var(--cs-space-6); }
.cs-tab {
  padding: 10px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--cs-font); font-size: 14px; font-weight: var(--cs-weight-bold);
  color: var(--cs-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cs-tab:hover { color: var(--cs-text); }
.cs-tab[aria-selected="true"] { color: var(--cs-text); border-bottom-color: var(--cs-orange); }

/* -------------------------------------------------------- avatar --------- */
.cs-avatar {
  width: 36px; height: 36px; border-radius: var(--cs-radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cs-navy); color: #FFFFFF;
  font-size: var(--cs-text-sm); font-weight: var(--cs-weight-bold);
  letter-spacing: .02em; flex: none;
}

/* --------------------------------------------------- empty state --------- */
.cs-empty { text-align: center; padding: var(--cs-space-10) var(--cs-space-6); color: var(--cs-text-muted); }
.cs-empty__title { font-size: var(--cs-text-md); font-weight: var(--cs-weight-bold); color: var(--cs-text); margin-bottom: var(--cs-space-2); }

/* --------------------------------------------------------- misc ---------- */
.cs-divider { height: 1px; background: var(--cs-border); border: 0; margin: var(--cs-space-6) 0; }
.cs-skeleton {
  background: linear-gradient(90deg, var(--cs-surface-sunken) 25%, var(--cs-border) 37%, var(--cs-surface-sunken) 63%);
  background-size: 400% 100%; border-radius: var(--cs-radius-sm);
  animation: cs-shimmer 1.4s ease infinite;
}
@keyframes cs-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* Screen-reader-only text, for icon-only buttons and table captions. */
.cs-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cs-app *, .cs-btn { transition: none !important; animation: none !important; }
  .cs-btn:hover { transform: none; }
}