@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Raleway:wght@600;700&display=swap");

:root {
  --par-yellow: #fcc32e; --par-yellow-soft: #fff1c8; --par-yellow-deep: #785a00;
  --par-onyx: #1a1a1a; --par-cream: #faf6f3; --par-surface-muted: #f1edea;
  --par-border: #d3c5ad; --par-border-soft: #e5e2df;
  --par-text: #1c1b1a; --par-muted: #5f5e5e;
  --par-success: #2d6a4f; --par-success-soft: #dff5e9;
  --par-error: #d90429; --par-error-soft: #ffe0e5;
}

html, body { margin: 0; min-height: 100%; background: var(--par-cream); }
body { color: var(--par-text); -webkit-font-smoothing: antialiased; }
audio { display: block; }

.par-app-shell, .par-main, .par-detail-drawer .mantine-Drawer-content { background: var(--par-cream); }
.par-header { border-bottom: 1px solid var(--par-border-soft); background: rgba(250, 246, 243, 0.96); backdrop-filter: blur(10px); }
.par-topbar, .par-topbar-row { width: 100%; min-width: 0; }
.par-main { min-height: 100vh; }
.par-main-container { max-width: 100%; padding: 24px; }
.par-sidebar { background: var(--par-onyx); color: #f7f3f0; }
.par-toolbar, .par-panel, .par-empty-card, .par-summary-card, .par-history-card, .par-muted-box, .par-meta-item, .par-detail-card {
  border-color: var(--par-border-soft);
  border-radius: var(--mantine-radius-sm);
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 27, 25, 0.03);
}

.par-brand-mark {
  position: relative; width: 32px; height: 32px; flex: 0 0 32px;
  border: 1px solid rgba(252, 195, 46, 0.35); border-radius: var(--mantine-radius-sm); background: #0f0f0f;
}
.par-brand-dot {
  position: absolute; top: 6px; right: 6px; width: 9px; height: 9px;
  border-radius: 999px; background: var(--par-yellow); box-shadow: 0 0 0 3px rgba(252, 195, 46, 0.16);
}

.par-brand-title, .par-page-title, .login-title, .par-section-title, .drawer-title {
  font-family: "Raleway", sans-serif; font-weight: 700;
}
.par-brand-title { color: #fff; font-size: 20px; line-height: 1.1; }
.par-brand-subtitle, .par-user-email { color: rgba(250, 246, 243, 0.64); font-size: 12px; }
.par-page-title { color: var(--par-text); font-size: 28px; line-height: 1.1; }
.par-section-title { margin: 0; color: var(--par-text); font-size: 19px; }
.drawer-title { margin: 0; }

.par-eyebrow, .par-meta-label, .par-nav-heading, .par-table-summary, .par-mono-cell, .par-pagination-label, .transcript-role {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.par-eyebrow, .par-meta-label, .par-nav-heading, .par-table-summary, .transcript-role {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.par-page-subtitle, .par-muted, .login-copy, .par-snippet, .par-mono-cell, .par-pagination-label, .transcript-role { color: var(--par-muted); }
.par-muted { line-height: 1.55; }
.par-table-summary { color: var(--par-muted); }

.par-nav-heading { color: rgba(250, 246, 243, 0.46); padding: 0 10px 4px; }
.par-nav-link, .par-logout-link, .par-secondary-link, .par-mobile-nav-link {
  border-radius: var(--mantine-radius-sm); font-weight: 700; text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.par-nav-link { display: block; min-height: 40px; padding: 10px 12px; color: rgba(250, 246, 243, 0.78); }
.par-nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.par-nav-link-active, .par-nav-link-active:hover { background: var(--par-yellow); color: var(--par-onyx); }
.par-sidebar-footer { border-top: 1px solid rgba(250, 246, 243, 0.12); padding-top: 16px; }

.par-user-avatar {
  display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--par-yellow); color: var(--par-onyx);
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; font-weight: 700;
}
.par-user-copy { min-width: 0; }
.par-user-name { color: #fff; font-weight: 700; }
.par-user-email { max-width: 172px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.par-logout-link, .par-secondary-link, .par-mobile-nav-link {
  display: inline-flex; min-height: 36px; align-items: center; justify-content: center; border: 1px solid currentColor;
}
.par-logout-link { width: 100%; color: #fff; }
.par-secondary-link, .par-mobile-nav-link { color: var(--par-onyx); }
.par-secondary-link { width: 100%; margin-top: 12px; }
.par-secondary-link:hover, .par-mobile-nav-link:hover { background: #fff7de; }
.par-secondary-link-disabled { pointer-events: none; opacity: 0.5; }
.par-mobile-nav, .login-alert-empty, .par-hidden-button { display: none; }
.par-mobile-nav-link { min-height: 30px; padding: 5px 10px; font-size: 13px; }
.par-header-badge, .par-neutral-badge, .par-current-badge {
  background: var(--par-yellow);
  color: var(--par-onyx);
  border: 0;
  font-weight: 700;
}

.login-page {
  display: grid; min-height: 100vh; place-items: center; padding: 24px;
  background: linear-gradient(135deg, rgba(26, 26, 26, 0.92), rgba(26, 26, 26, 0.72)),
    radial-gradient(circle at 20% 20%, rgba(252, 195, 46, 0.26), transparent 34%), var(--par-cream);
}
.login-card, .par-toolbar, .par-panel, .par-empty-card { padding: 18px; }
.login-card { width: min(440px, 100%); padding: 28px; box-shadow: 0 12px 30px rgba(28, 27, 25, 0.08); }
.login-brand { margin-bottom: 24px; }
.login-title { margin-bottom: 8px; font-size: 30px; }
.login-copy { margin-bottom: 18px; line-height: 1.55; }
.login-alert { margin-bottom: 16px; }

.par-input { width: 100%; }
.par-toolbar-button { align-self: end; }
.par-panel-header { margin-bottom: 14px; }
.calls-page, .evaluations-page { gap: 18px; }
.calls-toolbar-grid, .evaluations-toolbar-grid { align-items: end; }
.calls-panel, .evaluations-panel { overflow: hidden; }

.par-table-scroll { border: 1px solid var(--par-border-soft); border-radius: var(--mantine-radius-sm); }
.par-data-table { --table-border-color: var(--par-border-soft); }
.par-table-row-active td { background: var(--par-yellow-soft); }
.par-table-strong, .par-meta-value, .par-card-title { color: var(--par-text); font-weight: 700; }
.par-mono-cell, .par-pagination-label { font-size: 12px; }
.par-snippet-cell { max-width: 360px; }
.par-snippet, .transcript-text { line-height: 1.5; }
.par-pagination-bar, .drawer-header { border-top: 1px solid var(--par-border-soft); margin-top: 14px; padding-top: 14px; }
.drawer-header { border-top: 0; border-bottom: 1px solid var(--par-border-soft); margin: 0 0 18px; padding: 6px 0 16px; }
.par-detail-drawer .mantine-Drawer-body { padding-top: 22px; }
.par-flash-alert { border-radius: var(--mantine-radius-sm); }

.status-pending, .rauda-progress { background: #fef3d2; color: #6d5100; }
.status-approved, .rauda-fixed { background: var(--par-success-soft); color: var(--par-success); }
.status-rejected, .rauda-needs-fix { background: var(--par-error-soft); color: var(--par-error); }
.rauda-testing { background: #eaf1ff; color: #2453a6; }
.rauda-awaiting { background: #eee7ff; color: #5c3fa3; }
.rauda-empty, .par-meta-item, .par-summary-card, .par-history-card, .par-muted-box { background: var(--par-surface-muted); }

.par-detail-card, .par-meta-item, .par-summary-card, .par-history-card, .par-muted-box { padding: 14px; }
.par-detail-card-dark { background: var(--par-onyx); color: #fff; }
.par-detail-card-dark .par-section-title { color: #fff; }
.par-detail-card-dark .par-muted { color: rgba(255, 255, 255, 0.68); }
.par-audio-control { width: 100%; border-radius: var(--mantine-radius-sm); background: #0f0f0f; }
.par-meta-item { padding: 10px 12px; }
.par-meta-label { margin-bottom: 6px; color: var(--par-muted); }
.par-meta-value { line-height: 1.35; }
.par-summary-row { min-height: 34px; border-bottom: 1px solid rgba(211, 197, 173, 0.45); }
.par-summary-row:last-child { border-bottom: 0; }
.par-history-notes, .transcript-text { white-space: pre-wrap; }
.par-history-notes {
  padding: 10px 12px; border: 1px solid var(--par-border-soft); border-radius: var(--mantine-radius-sm);
  background: #fff; color: var(--par-muted);
}

.transcript-stack { max-height: 520px; overflow: auto; }
.transcript-bubble { padding: 12px; }
.transcript-user { background: #fff; }
.transcript-agent { border-color: #f2dc99; background: #fff7de; }
.transcript-role { margin-bottom: 6px; font-size: 10px; }
.transcript-role-agent { color: var(--par-yellow-deep); }
.transcript-role-user { color: var(--par-muted); }
.transcript-text { color: var(--par-text); }

.par-empty-table-text { padding: 28px 12px; color: var(--par-muted); text-align: center; }
.par-empty-table-error { color: var(--par-error); }
.par-hidden-button { display: none; }

@media (max-width: 767px) {
  .par-main-container { padding: 16px; }
  .par-page-title { font-size: 23px; }
  .par-header-badge { display: none; }
  .par-mobile-nav { display: flex; }
  .par-toolbar, .par-panel, .par-detail-card { padding: 14px; }
}