/* Casper365.UI — the platform design system. Tokens today (light + dark);
   the component kit and injected chrome widgets are part of the same library.
   Consumed platform-wide (shells, workload UIs, Portal.Admin) via static web
   assets (/_content/Casper365.UI/casper-ui.css). Token values change here and
   ship pinned with each service's image. */

:root {
  --cds-font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cds-bg: #F7FAFA;
  --cds-surface: #FFFFFF;
  --cds-surface-sunken: #F1FBFB;
  --cds-surface-raised: #FFFFFF;
  --cds-text: #333333;
  --cds-text-muted: #70757A;
  --cds-border: #D8E7E7;
  --cds-border-strong: #B8CFCF;
  --cds-accent: #FF8300;
  --cds-accent-deep: #E67300;
  --cds-accent-hot: #FF4700;
  --cds-on-accent: #FFFFFF;
  --cds-ok: #1A7F37;
  --cds-warn: #9A6700;
  --cds-danger: #CF222E;
  --cds-info: #0969DA;
  --cds-focus: rgba(255,131,0,0.4);
  --cds-radius: 10px;
  --cds-radius-sm: 6px;
  --cds-tap: 44px;
  --cds-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cds-bg: #0E1116;
    --cds-surface: #161B22;
    --cds-surface-sunken: #0D1117;
    --cds-surface-raised: #1C2129;
    --cds-text: #E6EDF3;
    --cds-text-muted: #8B949E;
    --cds-border: #30363D;
    --cds-border-strong: #3D444D;
    --cds-accent: #FF9A33;
    --cds-accent-deep: #FF8300;
    --cds-accent-hot: #FF6A3D;
    --cds-on-accent: #1A1205;
    --cds-ok: #3FB950;
    --cds-warn: #D29922;
    --cds-danger: #F85149;
    --cds-info: #4C8DFF;
    --cds-focus: rgba(255,154,51,0.45);
    --cds-shadow: 0 4px 12px rgba(0,0,0,0.45);
  }
}

/* Byte-identical duplicate of the dark block above — deliberate: CSS cannot
   share a declaration block between a media query and an attribute selector. */
:root[data-theme="dark"] {
  --cds-bg: #0E1116;
  --cds-surface: #161B22;
  --cds-surface-sunken: #0D1117;
  --cds-surface-raised: #1C2129;
  --cds-text: #E6EDF3;
  --cds-text-muted: #8B949E;
  --cds-border: #30363D;
  --cds-border-strong: #3D444D;
  --cds-accent: #FF9A33;
  --cds-accent-deep: #FF8300;
  --cds-accent-hot: #FF6A3D;
  --cds-on-accent: #1A1205;
  --cds-ok: #3FB950;
  --cds-warn: #D29922;
  --cds-danger: #F85149;
  --cds-info: #4C8DFF;
  --cds-focus: rgba(255,154,51,0.45);
  --cds-shadow: 0 4px 12px rgba(0,0,0,0.45);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cds-bg);
  color: var(--cds-text);
  font-family: var(--cds-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ============================================================================
   Component kit (.cds-*). Extracted from the recurring patterns in the four
   converted SPA hosts (PartnerV2, ZenzeroClientCenter, IdentityMigration,
   ExchangeMigration). Colors come exclusively from the --cds-* tokens above so
   every component works in both light and dark mode. Touch targets are
   var(--cds-tap); mobile-first — wide-viewport rules only widen layouts.
   ========================================================================== */

/* ---- App header bar --------------------------------------------------------
   Sticky platform chrome. Owns the top safe-area inset so the bar itself
   covers the notch region when scrolled. --accent swaps the hairline for the
   brand underline (Zenzero frame style). */
.cds-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 56px;
  padding: env(safe-area-inset-top) 12px 0 12px;
  background: var(--cds-surface);
  border-bottom: 1px solid var(--cds-border);
}
.cds-header--accent { border-bottom: 3px solid var(--cds-accent); }
.cds-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--cds-tap);
  font-size: 16px;
  font-weight: 700;
  color: var(--cds-text);
  text-decoration: none;
}
.cds-header__brand img { height: 36px; display: block; }
.cds-header__title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--cds-text); }
.cds-header__divider { width: 1px; height: 24px; background: var(--cds-border); }
.cds-header__meta { color: var(--cds-text-muted); font-size: 0.8rem; }
/* Right-aligned cluster (meta text, theme toggle). One auto margin so the
   remaining header items stay packed left. */
.cds-header__end {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (min-width: 600px) {
  .cds-header { padding-left: 16px; padding-right: 16px; }
}

/* ---- Theme toggle -----------------------------------------------------------
   44px square glyph button driven by casper-ui.js (window.casperTheme). */
.cds-theme-toggle {
  flex: 0 0 auto;
  min-width: var(--cds-tap);
  min-height: var(--cds-tap);
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--cds-text);
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-radius-sm);
  font-size: 1.1rem;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
}

/* ---- Page / section headers ------------------------------------------------ */
.cds-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 4px; color: var(--cds-text); }
.cds-subtitle { color: var(--cds-text-muted); font-size: 0.9rem; margin: 0; }
.cds-section-title { font-size: 1rem; font-weight: 600; margin: 0 0 12px; color: var(--cds-text); }

/* ---- Cards ------------------------------------------------------------------ */
.cds-card {
  background: var(--cds-surface);
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-radius);
  padding: 16px;
}
.cds-card--raised { box-shadow: var(--cds-shadow); }
.cds-card--sunken { background: var(--cds-surface-sunken); }
@media (min-width: 600px) {
  .cds-card--raised { padding: 24px; }
}

/* ---- Banners ----------------------------------------------------------------
   Status strip with a 4px left accent. Default (no modifier) is the brand
   banner; status modifiers recolor the accent and tint the surface with the
   status color so severity reads without relying on the edge alone. */
.cds-banner {
  background: var(--cds-surface-sunken);
  border: 1px solid var(--cds-border);
  border-left: 4px solid var(--cds-accent);
  border-radius: var(--cds-radius);
  padding: 12px 14px;
  font-size: 0.9rem;
  color: var(--cds-text);
}
.cds-banner--warn   { border-left-color: var(--cds-warn);   background: color-mix(in srgb, var(--cds-warn) 12%, var(--cds-surface)); }
.cds-banner--danger { border-left-color: var(--cds-danger); background: color-mix(in srgb, var(--cds-danger) 12%, var(--cds-surface)); }

/* ---- Badges / pills --------------------------------------------------------- */
.cds-badge {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--cds-surface-raised);
  border: 1px solid var(--cds-border);
  color: var(--cds-text-muted);
}
/* Status is carried by the tinted background + border, not by colored text —
   accent orange (and friends) sit near 2.5:1 on light surfaces, far below AA
   for badge-sized text, so the label itself stays full-contrast --cds-text. */
.cds-badge--accent {
  background: color-mix(in srgb, var(--cds-accent) 15%, var(--cds-surface));
  border-color: color-mix(in srgb, var(--cds-accent) 45%, var(--cds-border));
  color: var(--cds-text);
}
.cds-badge--ok {
  background: color-mix(in srgb, var(--cds-ok) 15%, var(--cds-surface));
  border-color: color-mix(in srgb, var(--cds-ok) 45%, var(--cds-border));
  color: var(--cds-text);
}
.cds-badge--danger {
  background: color-mix(in srgb, var(--cds-danger) 15%, var(--cds-surface));
  border-color: color-mix(in srgb, var(--cds-danger) 45%, var(--cds-border));
  color: var(--cds-text);
}
.cds-badge--warn {
  background: color-mix(in srgb, var(--cds-warn) 15%, var(--cds-surface));
  border-color: color-mix(in srgb, var(--cds-warn) 45%, var(--cds-border));
  color: var(--cds-text);
}

/* ---- Buttons ----------------------------------------------------------------
   Transparent border on every variant so secondary's visible border doesn't
   change the box size. :active feedback is filter-based so it works for all
   variants in both modes without per-variant pressed colors. */
.cds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cds-tap);
  min-width: var(--cds-tap);
  padding: 10px 16px;
  background: var(--cds-accent);
  color: var(--cds-on-accent);
  border: 1px solid transparent;
  border-radius: var(--cds-radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
}
.cds-btn:active { filter: brightness(0.92); }
.cds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Pointer-only hover affordance — guarded so touch devices never get a sticky
   hover state after tap. Filter-based like :active, so one rule covers every
   variant in both modes. */
@media (hover: hover) {
  .cds-btn:hover:not(:disabled) { filter: brightness(0.95); }
  .cds-btn:hover:active:not(:disabled) { filter: brightness(0.92); }
}
.cds-btn--secondary {
  background: var(--cds-surface-raised);
  color: var(--cds-text);
  border-color: var(--cds-border);
}
.cds-btn--danger { background: var(--cds-danger); color: var(--cds-on-accent); }
.cds-btn--block { width: 100%; }
/* Stacked full-width on phones; wraps to a horizontal row from 600px. */
.cds-btn-row { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 600px) {
  .cds-btn-row { flex-direction: row; flex-wrap: wrap; }
}

/* ---- Form fields ------------------------------------------------------------ */
.cds-field { display: block; margin: 12px 0 0; }
.cds-label {
  display: block;
  font-size: 0.85rem;
  color: var(--cds-text-muted);
  margin: 0 0 4px;
}
.cds-input {
  width: 100%;
  min-height: var(--cds-tap);
  padding: 10px 12px;
  background: var(--cds-surface);
  color: var(--cds-text);
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-radius-sm);
  font-size: 1rem;
  font-family: inherit;
}
.cds-input:focus { outline: 2px solid var(--cds-accent); outline-offset: 1px; }
.cds-hint { color: var(--cds-text-muted); font-size: 0.85rem; margin: 4px 0 0; }
.cds-check {
  display: flex;
  /* flex-start, not center: with a multi-line label the box must sit against
     the first line, not float mid-paragraph. */
  align-items: flex-start;
  gap: 10px;
  min-height: var(--cds-tap);
  font-size: 0.95rem;
  color: var(--cds-text);
  cursor: pointer;
}
.cds-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--cds-accent);
}

/* ---- Segmented control ------------------------------------------------------ */
.cds-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.cds-seg__btn {
  flex: 1 1 auto;
  min-height: var(--cds-tap);
  padding: 8px 12px;
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-radius-sm);
  background: var(--cds-surface);
  color: var(--cds-text);
  font-size: 0.9rem;
  font-family: inherit;
  cursor: pointer;
}
.cds-seg__btn--on {
  background: var(--cds-accent);
  border-color: var(--cds-accent);
  color: var(--cds-on-accent);
  font-weight: 600;
}

/* ---- Data table -------------------------------------------------------------- */
.cds-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.cds-table th,
.cds-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--cds-border);
  text-align: left;
}
.cds-table th { color: var(--cds-text-muted); font-weight: 600; }

/* ---- Row list ----------------------------------------------------------------
   Separator-ruled rows (job lists); items need no class of their own. */
.cds-list { list-style: none; margin: 0; padding: 0; }
.cds-list > li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--cds-border);
  font-size: 0.9rem;
}
.cds-list > li:last-child { border-bottom: none; }

/* ---- Code / preformatted output ---------------------------------------------- */
.cds-pre {
  background: var(--cds-surface-sunken);
  border: 1px solid var(--cds-border);
  border-radius: var(--cds-radius);
  padding: 12px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}
.cds-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--cds-text-muted);
  word-break: break-all;
}

/* ---- Keyboard focus ----------------------------------------------------------
   :focus-visible only, so touch/pointer activation stays ring-free. */
.cds-btn:focus-visible,
.cds-seg__btn:focus-visible,
.cds-theme-toggle:focus-visible,
.cds-check:focus-within {
  outline: 2px solid var(--cds-accent);
  outline-offset: 2px;
}