/* Atlants Compliance Console skin.
 *
 * Tokens derived from design-system (src/tokens: Colors, Typography,
 * Shadows, BorderRules, Spacing) and web/ auth chrome. Loaded after
 * pico.min.css: Pico provides the reset/forms baseline; everything visible
 * is re-themed here. Fonts are self-hosted (CSP default-src 'self').
 */

@font-face {
  font-family: Graphik;
  src: url("/static/fonts/GraphikLC-Regular.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: Graphik;
  src: url("/static/fonts/GraphikLC-Medium.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: 500;
}

:root {
  /* --- design-system tokens ---------------------------------- */
  --vds-gray-1: #ffffff;
  --vds-gray-2: #fafafa;
  --vds-gray-3: #efeff1;
  --vds-gray-5: #d6d6d8;
  --vds-gray-7: #838391;
  --vds-gray-8: #60606c;
  --vds-gray-9: #3a3a41;
  --vds-gray-10: #222226;

  --vds-pearl-1: #f8fafb;
  --vds-pearl-2: #f2f5f8;
  --vds-pearl-3: #ebeff4;
  --vds-pearl-4: #dee5ed;
  --vds-pearl-6: #9cb1c9;
  --vds-pearl-7: #6788ac;
  --vds-pearl-8: #455f7d;
  --vds-pearl-9: #202d3b;

  --vds-blue-1: #eff4fd;
  --vds-blue-2: #deebff;
  --vds-blue-6: #3c7be1; /* palette.link */
  --vds-blue-7: #2d5ca9;
  --vds-blue-8: #244883;

  --vds-pink-2: #ffd6e6;
  --vds-pink-6: #fa2075;
  --vds-pink-9: #7f103c;

  --vds-red-1: #fff0f0;
  --vds-red-2: #ffc2c2;
  --vds-red-6: #eb3232;
  --vds-red-7: #c10000;
  --vds-red-8: #970000;

  --vds-orange-2: #ffe5c2;
  --vds-orange-8: #8f4000;

  --vds-yellow-2: #fef4c3;
  --vds-yellow-8: #7a5a00;

  --vds-green-2: #d4ecd4;
  --vds-green-8: #356435;

  --vds-background: #f6f8f9;            /* otherColors.background */
  --vds-divider: rgba(34, 34, 38, 0.1); /* otherColors.divider */

  --vds-light-shadow-1: 0 2px 4px #2029300f;
  --vds-light-shadow-2: 0 4px 24px #2029300f, 0 2px 12px #2029300f;
  --vds-light-shadow-3: 0 6px 40px #20293014, 0 4px 24px #20293014;

  --vds-round-4: 4px;
  --vds-round-6: 6px;
  --vds-round-8: 8px;
  --vds-round-12: 12px;
  --vds-round-33: 33px;

  /* brandColors */
  --vds-brand-gradient: linear-gradient(to right, #ff2f80, #cea5ff, #438cff);
  --vds-bg-brand-gradient: linear-gradient(
    to right,
    #050a1c,
    #1c274b,
    #282148,
    #1a1326,
    #060917
  );

  --main-font-family: Graphik, Helvetica, Noto, sans-serif;
}

/* Pico declares its theme on :root:not([data-theme=dark]) — match that
 * specificity so these overrides win in cascade order. */
:root,
:root:not([data-theme="dark"]) {
  /* --- Pico re-theme ------------------------------------------------ */
  --pico-font-family: var(--main-font-family);
  --pico-background-color: var(--vds-background);
  --pico-color: var(--vds-gray-10);
  --pico-h1-color: var(--vds-gray-10);
  --pico-h2-color: var(--vds-gray-10);
  --pico-h3-color: var(--vds-gray-9);
  --pico-primary: var(--vds-blue-6);
  --pico-primary-background: var(--vds-blue-6);
  --pico-primary-border: var(--vds-blue-6);
  --pico-primary-hover: var(--vds-blue-7);
  --pico-primary-hover-background: var(--vds-blue-7);
  --pico-primary-hover-border: var(--vds-blue-7);
  --pico-primary-underline: transparent;
  --pico-primary-focus: rgba(60, 123, 225, 0.35);
  --pico-primary-inverse: var(--vds-gray-1);
  --pico-border-radius: var(--vds-round-8);
  --pico-form-element-border-color: var(--vds-pearl-4);
  --pico-form-element-focus-color: var(--vds-blue-6);
  --pico-form-element-active-border-color: var(--vds-blue-6);
  --pico-card-background-color: var(--vds-gray-1);
  --pico-card-box-shadow: var(--vds-light-shadow-2);
  --pico-mark-background-color: var(--vds-pink-2);
  --pico-mark-color: var(--vds-pink-9);
  --pico-font-size: 100%;
}

body {
  font-family: var(--main-font-family);
  letter-spacing: 0;
}

/* Typography scale (VDS Heading4 26/32, Heading6 20/28, Body1 16/24) */
h2 {
  font-size: 26px;
  line-height: 32px;
  font-weight: 500;
  margin-bottom: var(--pico-spacing);
}

h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
}

a {
  color: var(--vds-blue-6);
}

/* --- App chrome: dark brand header with gradient hairline ----------- */

.app-chrome {
  background: var(--vds-bg-brand-gradient);
  border-bottom: 3px solid transparent;
  border-image: var(--vds-brand-gradient) 1;
  margin-bottom: 32px;
}

.app-chrome .chrome-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 60px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--vds-gray-1);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.brand:is(:hover, :focus) {
  color: var(--vds-gray-1);
  text-decoration: none;
}

.brand .wordmark {
  display: block;
  height: 18px;
  width: auto;
  /* atlant-logo.svg is the navy (#20326C) wordmark; render white on chrome */
  filter: brightness(0) invert(1);
}

.brand .brand-sub {
  color: var(--vds-pearl-6);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.chrome-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.chrome-nav a {
  color: var(--vds-pearl-5, #bdcbdb);
  text-decoration: none;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 12px;
  border-radius: var(--vds-round-6);
}

.chrome-nav a:is(:hover, :focus) {
  color: var(--vds-gray-1);
  background: rgba(255, 255, 255, 0.08);
}

.chrome-session {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.logout-form {
  margin: 0;
}

.logout-form button {
  margin: 0;
  width: auto;
  font-size: 13px;
  line-height: 18px;
  padding: 6px 14px;
  color: var(--vds-pearl-5, #bdcbdb);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--vds-round-33);
}

.logout-form button:is(:hover, :focus) {
  color: var(--vds-gray-1);
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

main.container {
  max-width: 1180px;
  padding-top: 0;
}

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

.card {
  background: var(--vds-gray-1);
  border-radius: var(--vds-round-12);
  box-shadow: var(--vds-light-shadow-2);
  padding: 24px;
  margin-bottom: 24px;
}

/* --- Flash / alerts --------------------------------------------------- */

article[role="alert"],
.flash {
  background: var(--vds-gray-1);
  border-left: 4px solid var(--vds-blue-6);
  border-radius: var(--vds-round-8);
  box-shadow: var(--vds-light-shadow-1);
  padding: 14px 18px;
  margin-bottom: 20px;
}

p[role="alert"] {
  color: var(--vds-red-7);
  background: var(--vds-red-1);
  border-radius: var(--vds-round-8);
  padding: 10px 14px;
  font-size: 14px;
}

/* --- Tables (pearl headers, divider rows — platform data-table look) -- */

table {
  font-size: 14px;
  line-height: 20px;
}

table th {
  background: var(--vds-pearl-2);
  color: var(--vds-pearl-8);
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--vds-pearl-4);
  padding: 10px 12px;
}

table td {
  border-bottom: 1px solid var(--vds-divider);
  padding: 10px 12px;
  vertical-align: top;
}

table tbody tr:hover td {
  background: var(--vds-pearl-1);
}

td .row-action {
  margin: 0;
}

.row-action button {
  margin: 0;
  width: auto;
  font-size: 12px;
  line-height: 16px;
  padding: 4px 12px;
  border-radius: var(--vds-round-33);
  background: transparent;
  color: var(--vds-pearl-8);
  border: 1px solid var(--vds-pearl-5, #bdcbdb);
}

.row-action button:is(:hover, :focus) {
  color: var(--vds-red-7);
  border-color: var(--vds-red-6);
  background: var(--vds-red-1);
}

/* --- Status chips (palette-derived lifecycle colors) ------------------ */

.status-chip,
#call-status {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: var(--vds-round-33);
  background: var(--vds-gray-3);
  color: var(--vds-gray-8);
}

:is(.status-chip, #call-status).status-pending {
  background: var(--vds-yellow-2);
  color: var(--vds-yellow-8);
}

:is(.status-chip, #call-status).status-processing {
  background: var(--vds-blue-2);
  color: var(--vds-blue-8);
}

:is(.status-chip, #call-status).status-completed {
  background: var(--vds-green-2);
  color: var(--vds-green-8);
}

:is(.status-chip, #call-status).status-failed {
  background: var(--vds-red-2);
  color: var(--vds-red-8);
}

.flag-badge {
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: var(--vds-round-33);
  background: var(--vds-orange-2);
  color: var(--vds-orange-8);
  margin-right: 6px;
}

/* Search-term highlight inside previews (brand pink family) */
.preview mark,
td mark {
  background: var(--vds-pink-2);
  color: var(--vds-pink-9);
  border-radius: var(--vds-round-4);
  padding: 0 3px;
}

.preview {
  color: var(--vds-gray-7);
  max-width: 34ch;
}

td.cell-uuid a {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* --- Filter bar -------------------------------------------------------- */

.filter-card {
  background: var(--vds-gray-1);
  border-radius: var(--vds-round-12);
  box-shadow: var(--vds-light-shadow-1);
  padding: 20px 24px 4px;
  margin-bottom: 24px;
}

.filter-card input,
.filter-card select {
  font-size: 14px;
  height: 42px;
  margin-bottom: 16px;
}

.filter-card .filter-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filter-card button[type="submit"] {
  width: auto;
  padding: 8px 28px;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 16px;
}

.filter-card .clear-link {
  font-size: 14px;
  color: var(--vds-pearl-7);
  margin-bottom: 16px;
}

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

.pagination {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 4px 0;
  font-size: 14px;
  color: var(--vds-gray-7);
}

.pagination a {
  font-weight: 500;
}

.empty-state {
  color: var(--vds-gray-7);
  text-align: center;
  padding: 40px 0 24px;
  font-size: 16px;
}

/* --- Auth (login) — dark brand backdrop, web/ auth chrome -------------- */

html:has(body.auth) {
  background: var(--vds-bg-brand-gradient);
}

body.auth {
  background: var(--vds-bg-brand-gradient);
  min-height: 100vh;
}

body.auth .app-chrome {
  background: transparent;
  border-image: none;
  border-bottom: none;
}

.auth-card {
  max-width: 400px;
  margin: 8vh auto 0;
  background: var(--vds-gray-1);
  border-radius: var(--vds-round-12);
  box-shadow: var(--vds-light-shadow-3);
  padding: 36px 36px 28px;
  border-top: 4px solid transparent;
  border-image: var(--vds-brand-gradient) 1;
}

.auth-card h2 {
  margin-bottom: 4px;
}

.auth-card .auth-sub {
  color: var(--vds-gray-7);
  font-size: 14px;
  margin-bottom: 24px;
}

.auth-card label {
  font-size: 13px;
  font-weight: 500;
  color: var(--vds-gray-8);
}

.auth-card button[type="submit"] {
  font-weight: 500;
  margin-top: 8px;
}

/* --- Detail page ------------------------------------------------------- */

#call-metadata dl {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 24px;
  margin: 0;
}

#call-metadata dt {
  color: var(--vds-pearl-8);
  font-size: 12px;
  line-height: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

#call-metadata dd {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

#transcript-text {
  background: var(--vds-pearl-1);
  border-left: 4px solid transparent;
  border-image: var(--vds-brand-gradient) 1;
  border-radius: var(--vds-round-8);
  padding: 20px 24px;
  margin: 0 0 24px;
  font-size: 16px;
  line-height: 26px;
  color: var(--vds-gray-9);
}

#transcript-language {
  color: var(--vds-gray-7);
  font-size: 14px;
  margin-bottom: 8px;
}

#failure-reason {
  border-left-color: var(--vds-red-6);
}

#failure-reason strong {
  color: var(--vds-red-7);
}

#segments td:first-child {
  white-space: nowrap;
  color: var(--vds-pearl-7);
  font-variant-numeric: tabular-nums;
}

.back-link {
  font-size: 14px;
}

/* --- Token reveal ------------------------------------------------------- */

#new-token {
  display: inline-block;
  background: var(--vds-pearl-9);
  color: var(--vds-gray-1);
  border-radius: var(--vds-round-6);
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: 0.5px;
  user-select: all;
}

.token-alert {
  border-left: 4px solid transparent;
  border-image: var(--vds-brand-gradient) 1;
}

/* --- Error page ---------------------------------------------------------- */

.error-page {
  text-align: center;
  padding: 10vh 0;
}

.error-page h2 {
  font-size: 64px;
  line-height: 1;
  background: var(--vds-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 16px;
}

.error-page p {
  color: var(--vds-gray-7);
}

/* --- Page header row ------------------------------------------------------ */

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.page-head h2 {
  margin-bottom: 0;
}

.page-head .muted {
  color: var(--vds-gray-7);
  font-size: 14px;
}