/* DFT UI style layer (professional, switchable themes).
   This file provides shared overrides and relies on `--dft-*` CSS variables
   defined by individual theme files. */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..900&display=swap");

:root {
  --dft-style: slate;
  --dft-accent: var(--clr-set-1);

  --dft-bg: var(--gradient-set-1);
  --dft-surface: var(--clr-white);
  --dft-surface-2: color-mix(in srgb, var(--clr-white) 92%, var(--clr-border));
  --dft-border: color-mix(in srgb, var(--clr-border) 92%, transparent);
  --dft-text: var(--clr-body);
  --dft-text-muted: color-mix(in srgb, var(--clr-text-light) 90%, var(--clr-body));

  --dft-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --dft-shadow-md: 0 18px 40px rgba(15, 23, 42, 0.12);

  /* Tighter, more minimal geometry */
  --dft-radius-sm: 6px;
  --dft-radius-md: 8px;
  --dft-radius-lg: 10px;
  --dft-radius-pill: 8px;

  /* Inter looks best with minimal default tracking. */
  --dft-letter-spacing: 0;
  --dft-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --dft-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

html {
  background: var(--dft-surface);
}

body {
  font-family: var(--dft-font-body);
  letter-spacing: var(--dft-letter-spacing);
  line-height: 1.34;
  color: var(--dft-text);
  background: var(--dft-surface);
}

.mock-app h1,
.mock-app h2,
.mock-app h3,
.mock-app h4,
.mock-app h5,
.mock-app h6 {
  font-family: var(--dft-font-heading);
  letter-spacing: 0;
}

button,
input,
select,
textarea {
  font-family: var(--dft-font-body);
}

.mock-app {
  background: var(--dft-bg);
  color: var(--dft-text);
}

.mock-shell--no-sidebar {
  grid-template-columns: minmax(0, 1fr);
}

.mock-topbar,
.mock-sidebar {
  background: var(--dft-surface);
  border-color: var(--dft-border);
}

.mock-topbar__subtitle,
.mock-nav__label,
.mock-navlink__meta,
.mock-dropzone__hint {
  color: var(--dft-text-muted);
}

.mock-card,
.mock-stepper,
.mock-subcard {
  background: var(--dft-surface);
  border-color: var(--dft-border);
  border-radius: var(--dft-radius-lg);
  box-shadow: var(--dft-shadow-sm);
}

.mock-subcard {
  background: linear-gradient(180deg, var(--dft-surface), var(--dft-surface-2));
}

/* Titles: slightly tighter and less “round/soft” */
.mock-app h1 {
  font-weight: 780;
  letter-spacing: -0.03em;
  font-size: clamp(30px, 3.2vw, 42px);
  line-height: 1.08;
}

.mock-app h2 {
  font-weight: 750;
  letter-spacing: -0.01em;
}

.mock-topbar__title strong {
  letter-spacing: -0.01em;
  font-weight: 720;
}

/* Reusable upload dropzone (minimal, professional) */
.dft-upload {
  border: 1px solid var(--dft-border);
  background: var(--dft-surface);
  border-radius: var(--dft-radius-lg);
  box-shadow: var(--dft-shadow-sm);
  padding: 16px;
}

.dft-upload__header {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.dft-upload__title {
  font-weight: 800;
  letter-spacing: 0.01em;
}

.dft-upload__subtitle {
  color: var(--dft-text-muted);
  font-size: 13px;
}

.dft-dropzone {
  display: block;
  border: 1px dashed color-mix(in srgb, var(--dft-border) 80%, transparent);
  border-radius: var(--dft-radius-lg);
  background: color-mix(in srgb, var(--dft-surface) 88%, transparent);
  padding: 14px;
  cursor: pointer;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    transform 140ms ease,
    background-color 140ms ease;
}

.dft-dropzone:hover {
  border-color: color-mix(in srgb, var(--dft-accent) 35%, var(--dft-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dft-accent) 10%, transparent);
}

.dft-dropzone:active {
  transform: translateY(0.5px);
}

.dft-dropzone__input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.dft-dropzone__inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dft-dropzone__icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--dft-accent) 12%, transparent);
  color: var(--dft-accent);
  font-size: 16px;
}

.dft-dropzone__text {
  flex: 1;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.dft-dropzone__primary {
  font-weight: 750;
}

.dft-dropzone__secondary {
  color: var(--dft-text-muted);
  font-size: 12px;
}

.dft-dropzone__meta {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.dft-dropzone__filename {
  margin-top: 10px;
  color: var(--dft-text-muted);
  font-size: 12px;
  min-height: 16px;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dft-upload__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
}

.dft-upload__hint {
  flex: 1;
}

/* Truncation utility (avoid wide layouts from long titles/filenames). */
.dft-truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Upload/transcription file chips can contain very long filenames. */
.mock-filechip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-uploadbar .mock-filechip {
  max-width: min(360px, 50vw);
}

/* Header titles/subtitles: never force horizontal scrolling. */
.mock-toets-header__title > h1,
.mock-toets-header__title > .mock-muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stepper: show exam title above the steps */
.mock-stepper__header {
  display: grid;
  gap: 8px;
}

.mock-stepper__exam {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 100%;
  color: var(--dft-text-muted);
  font-size: 12px;
}

.mock-stepper__exam-label {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mock-stepper__exam-title {
  font-weight: 650;
  color: var(--dft-text);
  letter-spacing: -0.01em;
}

/* Reduce “playful” marker styling and make it look like a brand label. */
.txt-marker {
  font-family: var(--dft-font-heading);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dft-accent);
}

.txt-marker::before {
  content: "" !important;
  display: none !important;
}

/* Buttons: reduce spacing + remove forced arrow glyph on all non-icon buttons. */
.btn,
.header__tools-search-btn,
.nav-primary .menu-item--prev-link > a,
.toolbar-btn,
input[type="file"]::-webkit-file-upload-button {
  letter-spacing: 0;
  font-weight: 650;
}

.btn,
.nav-primary .menu-item--prev-link > a,
input[type="file"]::-webkit-file-upload-button {
  border-radius: var(--dft-radius-sm);
  min-height: 32px;
  padding: 8px 12px;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.1;
}

.btn--small {
  min-height: 28px;
  padding: 6px 10px;
  font-size: 12.5px;
}

.btn:not([class*=" icon-"])::before,
.nav-primary .menu-item--prev-link > a:not([class*=" icon-"])::before {
  content: "" !important;
}

/* Make ghost buttons look like a SaaS control, not a “pill”. */
.btn--ghost {
  background: transparent;
  border: 1px solid var(--dft-border);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--dft-border) 18%, transparent);
}

.btn--ghost:active {
  background: color-mix(in srgb, var(--dft-border) 26%, transparent);
}

/* Inputs: align with tighter button geometry. */
.mock-input {
  border-radius: var(--dft-radius-md);
  padding: 7px 10px;
  font: inherit;
}

/* Sidebar density (more professional, less whitespace) */
.mock-sidebar {
  padding: 12px 12px;
  font-size: 13px;
}

.mock-nav {
  gap: 10px;
}

.mock-nav__section + .mock-nav__section {
  padding-top: 10px;
}

.mock-nav__label {
  font-size: 11px;
  letter-spacing: 0.06em;
  font-weight: 650;
  margin-bottom: 7px;
}

.mock-nav__items {
  gap: 4px;
}

.mock-navlink {
  padding: 7px 10px;
  gap: 10px;
  font-weight: 550;
  letter-spacing: 0;
}

.mock-navlink::before {
  top: 7px;
  bottom: 7px;
}

.mock-navlink__icon {
  width: 16px;
  height: 16px;
  font-size: 14px;
}

.mock-navlink__meta {
  font-weight: 600;
}

.mock-navlink--minor {
  font-weight: 520;
}

/* Pills/tags: less “bubble”, more minimal */
.pill,
.tag {
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.03em;
}

/* Auth pages (login) */
.auth-page {
  min-height: calc(100vh - 160px);
  display: grid;
  place-items: center;
  padding: 28px 0 48px;
  width: 100%;
}

.auth-panel {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 14px;
}

.auth-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--dft-text-muted);
}

.auth-title {
  margin: 6px 0 0;
}

.auth-title + .auth-subtitle {
  margin-top: 10px;
}

.auth-subtitle {
  margin: 6px 0 0;
  color: var(--dft-text-muted);
  max-width: 62ch;
}

.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  justify-content: center;
}

.auth-card {
  padding: 22px;
  border-radius: var(--dft-radius-lg);
  background: linear-gradient(180deg, var(--dft-surface), var(--dft-surface-2));
  box-shadow: var(--dft-shadow-md);
  max-width: 420px;
  width: 100%;
}

.auth-card__title {
  margin: 0 0 8px;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.auth-actions {
  margin-top: 14px;
  display: grid;
  gap: 10px;
}

.auth-btn {
  width: 100%;
  justify-content: center;
  gap: 10px;
}

.auth-next {
  margin-top: 12px;
}

.auth-allowlist {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--dft-radius-md);
  border: 1px solid var(--dft-border);
  background: color-mix(in srgb, var(--dft-surface) 70%, transparent);
}

.auth-allowlist__label {
  color: var(--dft-text-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.auth-allowlist__values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  align-items: center;
}

.auth-allowlist__sep {
  color: var(--dft-text-muted);
}

.auth-form {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.auth-form .mock-input {
  width: 100%;
  min-width: 0;
}

.auth-disabled {
  margin-top: 12px;
}

@media (max-width: 860px) {
  .auth-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .auth-header {
    align-items: flex-start;
    flex-direction: column;
  }
}