/* ==========================================================================
   Rota İtalya Student Portal — Centralized Semantic Theme & Design System
   WCAG 2.2 AA Compliant Light & Dark Theme Architecture
   ========================================================================== */

:root {
  /* Core Semantic Surface Tokens (Light Theme) */
  --background: #F3F6FA;
  --surface: #FFFFFF;
  --surface-elevated: #EAF0F6;
  --surface-overlay: rgba(255, 255, 255, 0.96);

  /* Core Semantic Typography Tokens (Light Theme) */
  --text-primary: #142238;      /* 14.73:1 on --background, 15.96:1 on --surface */
  --text-secondary: #475569;    /* 6.99:1 on --background, 7.58:1 on --surface */
  --text-muted: #526277;        /* 5.75:1 on --background, 6.23:1 on --surface, 5.42:1 on --surface-elevated */

  /* Core Semantic Border & Focus Tokens (Light Theme) */
  --border: #CBD5E1;
  --border-strong: #78879B;     /* 3.66:1 UI component boundary contrast on --surface */
  --focus-ring: rgba(194, 65, 12, 0.35);

  /* Brand & Action Tokens (Light Theme) */
  --brand-primary: #142238;
  --brand-accent: #B83B08;      /* Accessible warm orange text: 5.73:1 on #FFFFFF, 5.28:1 on #F3F6FA, 4.99:1 on #EAF0F6 */
  --brand-accent-soft: #FFF1E6;
  --button-primary-bg: #C2410C; /* 5.18:1 contrast with #FFFFFF */
  --button-primary-hover: #9A3412; /* 7.31:1 contrast with #FFFFFF */
  --button-primary-text: #FFFFFF;

  /* Semantic Status Tokens (Light Theme) */
  --status-success: #146C43;    /* 5.68:1 on --status-success-bg */
  --status-success-bg: #E6F4EA;
  --status-warning: #8C5400;    /* 5.57:1 on --status-warning-bg */
  --status-warning-bg: #FEF3C7;
  --status-error: #B42318;      /* 5.45:1 on --status-error-bg */
  --status-error-bg: #FEE4E2;
  --status-neutral: #3E4C5E;    /* 7.35:1 on --status-neutral-bg */
  --status-neutral-bg: #E6ECF2;

  /* Elevation & Layout */
  --shadow: 0 10px 28px rgba(20, 34, 56, 0.06);
  --shadow-soft: 0 4px 14px rgba(20, 34, 56, 0.04);
  --ri-font: Inter, "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ri-serif: "Instrument Serif", "Iowan Old Style", Baskerville, Georgia, serif;
  --ri-content: 1220px;

  /* Legacy Variable Mappings (Unified to Semantic Tokens) */
  --ri-bg: var(--background);
  --ri-surface: var(--surface);
  --ri-surface-soft: var(--surface-elevated);
  --ri-white: var(--surface);
  --ri-ink: var(--text-primary);
  --ri-navy: var(--brand-primary);
  --ri-navy-deep: #0B1322;
  --ri-navy-soft: var(--surface-elevated);
  --ri-muted: var(--text-secondary);
  --ri-line: var(--border);
  --ri-line-strong: var(--border-strong);
  --ri-green: var(--brand-accent);
  --ri-green-dark: var(--button-primary-bg);
  --ri-green-soft: var(--brand-accent-soft);
  --ri-burgundy: var(--brand-accent);
  --ri-burgundy-light: #FF9A52;
  --ri-burgundy-soft: var(--brand-accent-soft);
  --navy: var(--text-primary);
  --navy-2: var(--text-secondary);
  --green: var(--brand-accent);
  --green-dark: var(--brand-accent);
  --green-soft: var(--brand-accent-soft);
  --red: var(--status-error);
  --red-soft: var(--status-error-bg);
  --cream: var(--background);
  --white: var(--surface);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --line2: var(--border);
  --max: var(--ri-content);
}

html[data-theme="dark"] {
  /* Core Semantic Surface Tokens (Dark Theme) */
  --background: #0B1322;
  --surface: #152238;
  --surface-elevated: #1D2D45;
  --surface-overlay: rgba(11, 19, 34, 0.96);

  /* Core Semantic Typography Tokens (Dark Theme) */
  --text-primary: #F3F6FC;      /* 17.16:1 on --background, 14.72:1 on --surface */
  --text-secondary: #C5CFDE;    /* 11.81:1 on --background, 10.13:1 on --surface */
  --text-muted: #A8B7CB;        /* 9.11:1 on --background, 7.82:1 on --surface, 6.81:1 on --surface-elevated */

  /* Core Semantic Border & Focus Tokens (Dark Theme) */
  --border: #354660;
  --border-strong: #5E7494;     /* 3.34:1 UI component boundary contrast on --surface */
  --focus-ring: rgba(255, 154, 82, 0.45);

  /* Brand & Action Tokens (Dark Theme) */
  --brand-primary: #F3F6FC;
  --brand-accent: #FF9A52;      /* Accessible warm orange text: 8.84:1 on #0B1322, 7.59:1 on #152238, 6.60:1 on #1D2D45 */
  --brand-accent-soft: rgba(255, 154, 82, 0.16);
  --button-primary-bg: #C2410C; /* 5.18:1 contrast with #FFFFFF */
  --button-primary-hover: #9A3412; /* 7.31:1 contrast with #FFFFFF */
  --button-primary-text: #FFFFFF;

  /* Semantic Status Tokens (Dark Theme) */
  --status-success: #6EE7B7;    /* 9.43:1 on --status-success-bg */
  --status-success-bg: #0F2F2A;
  --status-warning: #FCD34D;    /* 10.12:1 on --status-warning-bg */
  --status-warning-bg: #332712;
  --status-error: #FDA29B;      /* 8.08:1 on --status-error-bg */
  --status-error-bg: #381A22;
  --status-neutral: #D0D9E6;    /* 8.69:1 on --status-neutral-bg */
  --status-neutral-bg: #24354F;

  /* Elevation */
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
  --shadow-soft: 0 6px 20px rgba(0, 0, 0, 0.26);

  color-scheme: dark;
}

/* ==========================================================================
   Global Base & Typography Readability
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-padding-top: 136px;
  background: var(--background);
  color: var(--text-primary);
}

body,
.admin-body,
.account-state-page {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--text-primary) !important;
  background: var(--background) !important;
  font-family: var(--ri-font);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

button, input, select, textarea {
  font: inherit;
  color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  text-wrap: pretty;
}

h1, h2 {
  font-family: var(--ri-serif);
  font-weight: 500;
  letter-spacing: -0.03em;
}

p {
  color: var(--text-secondary);
  line-height: 1.65;
  text-wrap: pretty;
}

small, .muted, .muted-text, .help, .footer {
  color: var(--text-secondary);
  line-height: 1.55;
}

b, strong {
  color: var(--text-primary);
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px;
}

::selection {
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
}

.hidden, [hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 12px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--button-primary-text);
  background: var(--button-primary-bg);
  font-weight: 750;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ==========================================================================
   Section Labels, Eyebrows & Kickers
   ========================================================================== */
.section-label,
.kicker,
.eyebrow,
.section-eyebrow,
.task-type,
.v1-deadline-row span,
.document-category-kicker,
.shortlist-card-eyebrow,
.application-card-eyebrow,
.catalog-uni-line {
  color: var(--brand-accent) !important;
  font-family: var(--ri-font);
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: 0.11em;
  line-height: 1.35;
  text-transform: uppercase;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 9px;
}

.kicker::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--brand-accent);
  box-shadow: none;
}

/* ==========================================================================
   Buttons, Inputs & Form Controls (WCAG 2.2 AA Compliant)
   ========================================================================== */
.btn,
button.btn {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.35;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.btn::after {
  display: none !important;
}

.btn:hover {
  transform: none !important;
}

.btn.primary {
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-bg) !important;
  background: var(--button-primary-bg) !important;
}

.btn.primary:hover,
.btn.primary:focus-visible {
  color: var(--button-primary-text) !important;
  border-color: var(--button-primary-hover) !important;
  background: var(--button-primary-hover) !important;
}

.btn.secondary,
.btn.secondary.dark {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
  backdrop-filter: none !important;
}

.btn.secondary:hover,
.btn.secondary.dark:hover {
  color: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  background: var(--surface-elevated) !important;
}

.btn.danger {
  color: var(--status-error) !important;
  border-color: var(--status-error) !important;
  background: var(--status-error-bg) !important;
}

.btn.danger:hover {
  color: #FFFFFF !important;
  border-color: #B42318 !important;
  background: #B42318 !important;
}

.btn.compact {
  min-height: 36px;
  padding: 7px 13px;
  border-radius: 6px !important;
  font-size: 13px;
}

.btn:disabled,
button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.field {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

label,
.field label,
fieldset legend,
.document-search-wrap label,
.shortlist-search-wrap label,
.catalog-search-main label,
.catalog-filter-grid label {
  color: var(--text-primary) !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.35;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea,
.admin-filterbar input,
.admin-filterbar select,
.admin-calendar-controls input,
.admin-calendar-controls select,
.inline-form input,
.inline-form select,
.document-search-wrap input,
.shortlist-search-wrap input,
.catalog-search-main input,
.catalog-filter-grid select,
.v1-search,
.v1-toolbar select,
.exam-library-toolbar input,
.exam-library-toolbar select,
.admin-deadline-row input,
.admin-deadline-row textarea,
.admin-deadline-row select,
.admin-process-row select,
.admin-process-row input,
.catalog-interest-box textarea {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid var(--border-strong) !important;
  border-radius: 8px !important;
  outline: none;
  color: var(--text-primary) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
  font-size: 15px !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

.field textarea {
  min-height: 112px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.admin-filterbar input:focus,
.admin-filterbar select:focus,
.document-search-wrap input:focus,
.shortlist-search-wrap input:focus,
.catalog-search-main input:focus,
.catalog-filter-grid select:focus,
.v1-search:focus,
.v1-toolbar select:focus {
  border-color: var(--brand-accent) !important;
  box-shadow: 0 0 0 3px var(--focus-ring) !important;
}

.readonly,
input[readonly],
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--text-muted) !important;
  background: var(--surface-elevated) !important;
  border-color: var(--border) !important;
}

/* ==========================================================================
   Alerts, Callouts & Status Banners
   ========================================================================== */
.alert {
  margin: 16px 0;
  padding: 13px 16px;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
}

.alert.error {
  color: var(--status-error) !important;
  border-color: var(--status-error) !important;
  background: var(--status-error-bg) !important;
}

.alert.success {
  color: var(--status-success) !important;
  border-color: var(--status-success) !important;
  background: var(--status-success-bg) !important;
}

.alert.info {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--surface-elevated) !important;
}

.callout,
.settings-status,
.v1-planning-note,
.italy-process-note,
.doc-integrity-note,
.calendar-email-note {
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.callout b,
.v1-planning-note b,
.italy-process-note b {
  color: var(--brand-accent) !important;
}

.callout p,
.v1-planning-note p,
.italy-process-note p {
  color: var(--text-secondary) !important;
}

/* ==========================================================================
   Header, Brand Logo, Theme Toggle & Navigation
   ========================================================================== */
.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 76px;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-overlay) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.header-inner {
  width: min(var(--ri-content), calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  color: var(--text-primary) !important;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand-name {
  font-size: 22px;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}

.brand-logo {
  display: block;
  width: 186px;
  height: auto;
  aspect-ratio: 760 / 201;
  object-fit: contain;
  flex-shrink: 0;
}

/* Fallback if dark logo image hasn't swapped yet in dark mode or on dark surfaces */
html[data-theme="dark"] .brand-logo[src*="rota-italya-logo.png"]:not([src*="dark"]),
.auth-showcase .brand-logo[src*="rota-italya-logo.png"]:not([src*="dark"]),
.admin-sidebar .brand-logo[src*="rota-italya-logo.png"]:not([src*="dark"]) {
  filter: brightness(0) invert(0.95);
}

.auth-showcase .brand,
.admin-brand .brand-logo {
  background: transparent;
  padding: 4px 0;
}

.admin-brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.admin-brand .brand-logo {
  width: min(100%, 200px);
}

.header-note {
  margin-right: auto;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary) !important;
  background: var(--surface-elevated) !important;
  font-size: 11px !important;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.ri-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text-primary) !important;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.ri-theme-toggle:hover,
.ri-theme-toggle:focus-visible {
  background: var(--button-primary-bg);
  border-color: var(--button-primary-bg);
  color: var(--button-primary-text) !important;
}

.user-trigger {
  min-height: 42px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  color: var(--text-primary) !important;
  background: var(--surface-elevated) !important;
}

.user-trigger b,
.user-trigger .chevron {
  color: var(--text-primary) !important;
}

.avatar {
  border-radius: 999px !important;
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  font-weight: 800;
}

.user-dropdown {
  top: 52px;
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--border-strong) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow) !important;
}

.user-dropdown a,
.user-dropdown button {
  min-height: 40px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary) !important;
  font-weight: 650;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
  background: var(--surface-elevated) !important;
  color: var(--brand-accent) !important;
}

.user-dropdown .danger-item {
  color: var(--status-error) !important;
}

.dropdown-divider {
  background: var(--border) !important;
}

/* Primary Navigation Bar */
.portal-v1-nav {
  position: sticky;
  z-index: 90;
  top: 76px;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-overlay) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.portal-v1-nav-inner {
  width: min(var(--ri-content), calc(100% - 48px));
  margin: auto;
  padding: 0 !important;
  display: flex;
  gap: 22px !important;
  overflow-x: auto;
  scrollbar-width: none;
}

.portal-v1-nav-inner::-webkit-scrollbar {
  display: none;
}

.portal-v1-nav a {
  position: relative;
  flex: 0 0 auto;
  padding: 15px 4px 13px !important;
  border-radius: 0 !important;
  color: var(--text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 13.5px;
  font-weight: 650;
  transition: color 0.16s ease;
}

.portal-v1-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--brand-accent);
  transition: transform 0.18s ease;
}

.portal-v1-nav a:hover {
  color: var(--text-primary) !important;
}

.portal-v1-nav a.active {
  color: var(--text-primary) !important;
  font-weight: 800;
}

.portal-v1-nav a:hover::after,
.portal-v1-nav a.active::after {
  transform: scaleX(1);
}

.nav-count {
  border-radius: 999px !important;
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  font-weight: 800;
}

/* ==========================================================================
   Student Dashboard: Next Step Card, Hero & Progress Ring
   ========================================================================== */
.portal-main,
.portal-main.v1-main {
  width: min(var(--ri-content), calc(100% - 48px));
  padding: 36px 0 76px;
}

#personalNextStep {
  margin-bottom: 24px;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--brand-accent) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  padding: 22px 26px !important;
}

.v1-next-step-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#personalNextStep h2 {
  margin: 6px 0 8px;
  font-family: var(--ri-font);
  font-size: 22px;
  font-weight: 750;
  color: var(--text-primary) !important;
}

#personalNextStep p {
  margin: 0;
  color: var(--text-secondary) !important;
  font-size: 15px;
  line-height: 1.6;
}

.v1-dashboard-hero,
.v1-page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  gap: clamp(28px, 5vw, 64px);
  margin-bottom: 28px;
  padding: 32px 0 32px !important;
  overflow: visible;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.v1-dashboard-hero::before,
.v1-dashboard-hero::after,
.v1-page-hero::before,
.v1-page-hero::after {
  display: none !important;
}

.v1-dashboard-hero h1,
.v1-page-hero h1 {
  max-width: 15ch;
  margin: 12px 0 16px;
  color: var(--text-primary) !important;
  font-family: var(--ri-serif);
  font-size: clamp(40px, 5vw, 64px) !important;
  font-weight: 500;
  line-height: 1.03 !important;
  letter-spacing: -0.035em !important;
}

.v1-dashboard-hero p,
.v1-page-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary) !important;
  font-size: 16px !important;
  line-height: 1.7;
}

.v1-hero-status,
.v1-page-hero aside {
  align-items: center;
  justify-content: center;
  padding: 24px !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  color: var(--text-primary) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
  text-align: center;
}

.v1-hero-status > span,
.v1-page-hero aside > span {
  color: var(--brand-accent) !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.v1-hero-status > strong,
.v1-page-hero aside > strong {
  color: var(--text-primary) !important;
  font-family: var(--ri-serif);
  font-size: 30px;
  font-weight: 500;
  margin: 4px 0;
}

.v1-hero-status > small,
.v1-page-hero aside > small {
  color: var(--text-secondary) !important;
  font-size: 13px;
}

.v1-overall-ring {
  margin-top: 14px;
}

.v1-overall-ring circle {
  fill: none;
  stroke: var(--border-strong) !important;
  stroke-width: 9;
}

.v1-overall-ring circle.fill {
  stroke: var(--brand-accent) !important;
  stroke-linecap: round;
}

.v1-overall-ring strong {
  color: var(--text-primary) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
}

.v1-hero-actions {
  margin-top: 24px;
}

/* ==========================================================================
   KPI Cards, Panels & Application Progress Cards ("Dosyanın sağlık durumu")
   ========================================================================== */
.v1-kpi-grid,
.admin-grid-stats,
.admin-v1-kpis {
  gap: 14px !important;
}

.v1-kpi-grid article,
.v1-kpi,
.admin-v1-kpis article,
.admin-stat,
.application-stat,
.shortlist-stats > div,
.document-metric,
.exam-library-kpis article {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-soft) !important;
}

.v1-kpi-grid span,
.admin-v1-kpis span,
.admin-stat span,
.application-stat span,
.shortlist-stats span,
.document-metric span,
.exam-library-kpis span {
  color: var(--text-secondary) !important;
  font-size: 11.5px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.v1-kpi-grid strong,
.v1-kpi strong,
.admin-v1-kpis strong,
.admin-stat strong,
.application-stat strong,
.shortlist-stats strong,
.document-metric strong,
.exam-library-kpis strong {
  color: var(--text-primary) !important;
  font-family: var(--ri-serif);
  font-size: 38px !important;
  font-weight: 500;
  line-height: 1.05;
  margin: 6px 0 4px;
}

.v1-kpi-grid small,
.admin-v1-kpis small,
.admin-v1-kpis a {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 500;
}

/* Main Cards & Panels */
.v1-panel,
.panel,
.admin-panel,
.module-card,
.document-section,
.doc-card,
.application-card,
.shortlist-card,
.exam-card,
.calendar-main-panel,
.message-card,
.community-card,
.profile-summary,
.document-hero-card,
.document-chart-card,
.document-empty,
.document-tools,
.process-section,
.university-section,
.official-source-card,
.application-progress-card,
.shortlist-hero-note,
.shortlist-toolbar-card,
.catalog-intelligence,
.catalog-profile-lens,
.catalog-filter-shell,
.catalog-admin-toolbar,
.catalog-card,
.student-list-card,
.material-card,
.student-exam-library,
.intel-card,
.process-card,
.process-step-body,
.university-application-card {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-soft) !important;
}

.v1-panel,
.panel {
  padding: clamp(20px, 2.4vw, 28px);
}

.v1-panel-head h2,
.panel h2,
.admin-panel h2,
.document-section-head h2,
.application-section-head h2 {
  color: var(--text-primary) !important;
  font-family: var(--ri-font);
  font-weight: 750;
  font-size: 22px;
}

.v1-panel-head p,
.panel-head p,
.document-section-head p,
.application-section-head p {
  color: var(--text-secondary) !important;
  font-size: 14px;
}

.v1-panel-head > a,
.text-link,
.source-link,
.intel-links a,
.shortlist-link-row a {
  color: var(--brand-accent) !important;
  font-weight: 750;
}

.v1-panel-head > a:hover,
.text-link:hover,
.source-link:hover {
  text-decoration: underline;
}

/* Application Progress Cards ("Dosyanın sağlık durumu") */
.v1-track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.v1-track-card {
  display: flex;
  flex-direction: column;
  padding: 16px 18px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.v1-track-card:hover {
  border-color: var(--brand-accent) !important;
  background: var(--surface) !important;
}

.v1-track-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.v1-track-card span {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35;
}

.v1-track-card strong {
  color: var(--brand-accent) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
}

.v1-progress {
  height: 8px !important;
  background: var(--border-strong) !important;
  border-radius: 999px !important;
  margin-top: 12px !important;
  overflow: hidden;
}

.v1-progress i {
  display: block;
  height: 100%;
  background: var(--brand-accent) !important;
  border-radius: inherit;
}

.v1-track-card small {
  display: block;
  color: var(--text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.45;
  margin-top: 10px !important;
}

/* ==========================================================================
   Timeline, Important Dates & Semantic Status Badges
   ========================================================================== */
.v1-deadline-row,
.v1-task-row,
.agenda-row,
.calendar-row,
.exam-plan-row,
.mini-deadline,
.dependency-row,
.security-row,
.session-item,
.log-item,
.catalog-interest-row,
.admin-deadline-row,
.admin-material-row,
.admin-dm-audit,
.activity-row-v11,
.admin-community-row,
.admin-report-row,
.admin-process-row,
.admin-case-row,
.admin-task-row {
  border-color: var(--border) !important;
}

.v1-deadline-row b,
.v1-task-row b,
.agenda-row b,
.calendar-row b,
.calendar-row time,
.exam-plan-row b,
.mini-deadline b,
.mini-deadline strong,
.dependency-row strong {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.v1-deadline-row small,
.v1-task-row p,
.v1-task-row small,
.agenda-row small,
.calendar-row p,
.exam-plan-row p,
.exam-plan-row small,
.mini-deadline span,
.mini-deadline small {
  color: var(--text-secondary) !important;
}

.v1-deadline-row time,
.task-side strong {
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-weight: 750;
}

/* Semantic Status Badges (WCAG 2.2 AA Verified) */
.v1-badge,
.doc-status,
.doc-requirement,
.process-status,
.application-status,
.shortlist-status,
.admin-pill,
.catalog-match,
.catalog-source-badge,
.verified,
.unverified,
.status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
  box-shadow: none !important;
}

/* Neutral Status */
.v1-badge.neutral,
.doc-status.waived,
.doc-status.optional,
.doc-requirement.optional,
.process-status,
.process-status.waiting,
.process-status.not_applicable,
.application-status,
.application-status.research,
.application-status.shortlisted,
.application-status.withdrawn,
.shortlist-status,
.shortlist-status.backup,
.shortlist-status.promoted,
.admin-pill,
.admin-pill.completed,
.admin-pill.lead,
.admin-pill.archived,
.admin-pill.waived,
.catalog-match,
.catalog-match.neutral,
.catalog-source-badge.source-catalog,
.status {
  background: var(--status-neutral-bg) !important;
  color: var(--status-neutral) !important;
  border: 1px solid var(--border) !important;
}

/* Success Status */
.v1-badge.good,
.doc-status.approved,
.doc-status.uploaded,
.doc-requirement.required,
.process-status.completed,
.application-status.conditional_offer,
.application-status.offer,
.application-status.enrolled,
.shortlist-status.recommended,
.shortlist-status.finalist,
.admin-pill.active,
.admin-pill.approved,
.admin-pill.uploaded,
.catalog-match.high,
.catalog-source-badge.source-complete,
.verified {
  background: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border: 1px solid var(--status-success) !important;
}

/* Warning Status */
.v1-badge.warn,
.doc-status.in_review,
.process-status.in_progress,
.application-status.preparing,
.application-status.ready,
.application-status.submitted,
.application-status.under_review,
.application-status.waitlisted,
.admin-pill.paused,
.admin-pill.in_review,
.catalog-match.mid,
.catalog-source-badge.source-partial {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border: 1px solid var(--status-warning) !important;
}

/* Error Status */
.v1-badge.bad,
.doc-status.missing,
.doc-status.revision_required,
.process-status.blocked,
.application-status.rejected,
.shortlist-status.excluded,
.admin-pill.missing,
.admin-pill.revision_required,
.catalog-match.low,
.unverified {
  background: var(--status-error-bg) !important;
  color: var(--status-error) !important;
  border: 1px solid var(--status-error) !important;
}

/* Module Grid Cards on Dashboard */
.v1-module-grid {
  gap: 14px !important;
}

.v1-module-grid a {
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-soft) !important;
}

.v1-module-grid a:hover {
  border-color: var(--brand-accent) !important;
}

.v1-module-grid b {
  color: var(--text-primary) !important;
  font-size: 17px;
}

.v1-module-grid span {
  color: var(--text-secondary) !important;
  font-size: 13.5px;
}

.v1-module-grid em {
  color: var(--brand-accent) !important;
  font-size: 12px;
  font-weight: 800;
}

/* ==========================================================================
   Portal Subpages: Documents, Applications, Shortlist, Calendar, Messages, Exams
   ========================================================================== */
.documents-page .document-hero-card,
.application-hero-copy,
.shortlist-hero > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-soft) !important;
  padding: clamp(22px, 3vw, 34px);
}

.document-hero-card::before,
.document-hero-card::after,
.application-hero-copy::after,
.shortlist-hero > div::after {
  display: none !important;
}

.documents-page .document-hero-card h1,
.application-hero-copy h1,
.shortlist-hero > div h1 {
  color: var(--text-primary) !important;
  font-family: var(--ri-serif);
  font-size: clamp(34px, 3.8vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.documents-page .document-hero-card > p,
.application-hero-copy > p,
.shortlist-hero > div > p {
  color: var(--text-secondary) !important;
  font-size: 15.5px !important;
  line-height: 1.68 !important;
}

.documents-page .document-hero-card .kicker,
.application-hero-copy .kicker,
.shortlist-hero > div .kicker {
  color: var(--brand-accent) !important;
}

.documents-page .document-badge {
  color: var(--text-primary) !important;
  background: var(--surface-elevated) !important;
  border: 1px solid var(--border) !important;
}

.application-progress-ring {
  background: conic-gradient(var(--brand-accent) calc(var(--progress) * 1%), var(--border-strong) 0) !important;
}

.application-progress-ring::before {
  background: var(--surface) !important;
}

.application-progress-ring strong {
  color: var(--text-primary) !important;
}

.application-progress-ring span {
  color: var(--text-secondary) !important;
}

/* Sub-cards and metadata blocks across all pages */
.doc-meta-item,
.doc-note,
.doc-current-file,
.upload-guide-item,
.application-card-meta span,
.application-next-action,
.application-advisor-note,
.process-advisor-note,
.process-meta span,
.case-grid span,
.intel-facts span,
.shortlist-key-grid,
.shortlist-score-row > div,
.shortlist-pro,
.shortlist-risk,
.catalog-card-facts,
.catalog-dialog-grid > div,
.catalog-explain,
.catalog-health-quota,
.catalog-profile-lens #catalogProfileLens > div,
.student-list-item,
.student-exam-library-head,
.exam-library-workspace-head {
  background: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.doc-file-label,
.official-links a,
.catalog-interest-btn,
.catalog-list-btn,
.document-filter,
.shortlist-filter,
.community-tabs button {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
}

.document-filter.active,
.shortlist-filter.active,
.community-tabs button.active,
.catalog-interest-btn.active {
  background: var(--brand-accent-soft) !important;
  border-color: var(--brand-accent) !important;
  color: var(--brand-accent) !important;
}

/* Shortlist Comparison Table */
.shortlist-table-wrap {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

.shortlist-comparison-table th,
.shortlist-comparison-table td {
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.shortlist-comparison-table thead th,
.shortlist-comparison-table tbody > tr > th {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
}

/* Calendar Grid */
.month-weekdays span {
  color: var(--text-secondary) !important;
  border-bottom: 1px solid var(--border) !important;
}

.month-day {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.month-day.outside {
  background: var(--surface-elevated) !important;
  color: var(--text-muted) !important;
}

.calendar-chip {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}

.calendar-chip.scholarship {
  background: var(--status-warning-bg) !important;
  color: var(--status-warning) !important;
  border-color: var(--status-warning) !important;
}

.calendar-chip.visa {
  background: var(--status-error-bg) !important;
  color: var(--status-error) !important;
  border-color: var(--status-error) !important;
}

.calendar-chip.personal {
  background: var(--status-success-bg) !important;
  color: var(--status-success) !important;
  border-color: var(--status-success) !important;
}

/* Messages & Community Chat */
.chat-stream {
  background: var(--background) !important;
}

.chat-bubble {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

.chat-bubble.mine {
  background: var(--surface-elevated) !important;
  border-color: var(--brand-accent) !important;
}

.chat-compose {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

.chat-compose textarea {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

.community-group-row.active,
.community-dm-thread.active,
.admin-inbox-row.active,
.exam-library-nav-row.active {
  background: var(--surface-elevated) !important;
  border-color: var(--brand-accent) !important;
}

.community-member-row,
.community-dm-thread,
.exam-library-nav-row,
.exam-library-sidebar {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* Dialogs & Modals */
.catalog-dialog,
.v1-modal-card {
  background: var(--surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}

.catalog-dialog-close,
.icon-close {
  background: var(--surface-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
}

.v1-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.v1-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(11, 19, 34, 0.65);
  backdrop-filter: blur(3px);
}

.v1-modal-card {
  position: relative;
  z-index: 1;
  width: min(640px, 100%);
  max-height: 85vh;
  overflow: auto;
  padding: 24px;
}

/* ==========================================================================
   Account, Profile, Roadmaps & Authentication Pages
   ========================================================================== */
.portal-intro h1,
.account-heading h1,
.portal-page-heading h1 {
  color: var(--text-primary) !important;
  font-family: var(--ri-serif);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.portal-page-heading {
  max-width: 760px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.portal-page-heading h1 {
  margin: 10px 0 14px;
  font-size: clamp(38px, 4.8vw, 58px);
  line-height: 1.03;
}

.portal-page-heading p {
  margin: 0;
  color: var(--text-secondary) !important;
  font-size: 16px;
}

.account-main {
  width: min(1080px, calc(100% - 48px));
  padding: 40px 0 76px;
}

.account-nav {
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
}

.account-nav a {
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-secondary) !important;
}

.account-nav a.active,
.account-nav a:hover {
  color: var(--brand-accent) !important;
  background: var(--brand-accent-soft) !important;
}

.admin-tabs,
.profile-tabs {
  padding: 0;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0;
  background: transparent !important;
}

.admin-tab,
.profile-tab {
  padding: 12px 4px 11px;
  margin-right: 20px;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 13.5px;
  color: var(--text-secondary) !important;
  background: transparent !important;
}

.admin-tab.active,
.profile-tab.active {
  border-bottom-color: var(--brand-accent) !important;
  color: var(--text-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Roadmaps List */
.roadmap-access-list {
  display: grid;
  gap: 14px;
  max-width: 940px;
}

.roadmap-access-card,
.roadmap-access-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 28px;
  padding: 24px;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

.roadmap-access-card h2,
.roadmap-access-item h2 {
  margin: 8px 0;
  font-family: var(--ri-serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--text-primary) !important;
}

.roadmap-access-card p,
.roadmap-access-item p {
  margin: 0;
  color: var(--text-secondary) !important;
  font-size: 14.5px;
}

.roadmap-access-side {
  display: grid;
  justify-items: end;
  gap: 9px;
  min-width: 190px;
}

.roadmap-access-side small {
  max-width: 220px;
  color: var(--text-secondary) !important;
  font-size: 12.5px;
  text-align: right;
}

.roadmap-status,
.access-status {
  color: var(--brand-accent) !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Authentication & Account State Screens */
.auth-layout {
  min-height: 100vh;
  grid-template-columns: minmax(0, 1.02fr) minmax(430px, 0.98fr);
  background: var(--background) !important;
}

.auth-showcase {
  margin: 0 !important;
  padding: 42px max(6vw, 42px);
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: #F3F6FC !important;
  background: #0B1322 !important;
  box-shadow: none !important;
}

.auth-showcase::before,
.auth-showcase::after {
  display: none !important;
}

.auth-showcase .brand {
  color: #F3F6FC !important;
}

.auth-copy {
  max-width: 690px;
}

.auth-copy .kicker {
  color: #FF9A52 !important;
}

.auth-copy h1 {
  max-width: 11ch;
  margin: 18px 0 22px;
  color: #F3F6FC !important;
  font-family: var(--ri-serif);
  font-size: clamp(46px, 5.6vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.auth-copy p {
  max-width: 560px;
  color: #C5CFDE !important;
  font-size: 16.5px;
  line-height: 1.7;
}

.auth-feature {
  padding-top: 17px;
  border-top: 1px solid #354660;
}

.auth-feature b {
  color: #F3F6FC !important;
  font-size: 13.5px;
}

.auth-feature span {
  color: #A8B7CB !important;
  font-size: 13px;
}

.auth-panel {
  padding: 36px clamp(28px, 5vw, 72px);
  background: var(--surface) !important;
}

.auth-card {
  width: min(480px, 100%);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.auth-card h2 {
  margin: 11px 0 13px;
  color: var(--text-primary) !important;
  font-family: var(--ri-serif);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.05;
}

.auth-card > p {
  margin-bottom: 26px;
  color: var(--text-secondary) !important;
  font-size: 15px !important;
}

.auth-switch {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.auth-switch a,
.auth-row a,
.text-action {
  color: var(--brand-accent) !important;
  font-weight: 750;
}

.account-state-card {
  padding: clamp(28px, 6vw, 56px);
  border: 1px solid var(--border) !important;
  border-radius: 14px;
  background: var(--surface) !important;
  color: var(--text-primary) !important;
}

/* ==========================================================================
   Admin Shell & Tables
   ========================================================================== */
.admin-shell {
  grid-template-columns: 256px minmax(0, 1fr);
}

.admin-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  margin: 0 !important;
  padding: 28px 18px;
  border: 0 !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  color: #F3F6FC !important;
  background: #0B1322 !important;
  box-shadow: none !important;
}

.admin-brand {
  padding: 0 8px 24px;
  border-bottom: 1px solid #354660;
}

.admin-brand b {
  color: #F3F6FC !important;
  font-size: 18px;
}

.admin-brand small {
  color: #A8B7CB !important;
  font-size: 10.5px;
}

.admin-nav-label {
  margin: 24px 10px 9px;
  color: #FF9A52 !important;
  font-size: 10.5px;
}

.admin-nav a {
  padding: 10px 12px;
  border-radius: 8px;
  color: #C5CFDE !important;
  font-size: 13.5px;
  font-weight: 650;
}

.admin-nav a:hover,
.admin-nav a.active {
  color: #F3F6FC !important;
  background: #1D2D45 !important;
}

.admin-topbar {
  margin-bottom: 26px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  padding: 0 10px 11px;
  color: var(--text-secondary) !important;
  font-size: 11px;
}

.admin-table td {
  padding: 14px 10px;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

.admin-table td b {
  color: var(--text-primary) !important;
}

.admin-table td small {
  color: var(--text-secondary) !important;
  font-size: 12.5px;
}

.admin-table tbody tr:hover td {
  background: var(--surface-elevated) !important;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */
@media (max-width: 1080px) {
  .admin-shell {
    display: block;
  }
  .admin-sidebar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    padding: 18px 22px !important;
  }
  .admin-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .admin-nav a {
    flex: 0 0 auto;
  }
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .auth-showcase {
    display: none;
  }
  .auth-panel {
    min-height: 100vh;
  }
  .auth-card .mobile-brand {
    display: flex;
  }
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 124px;
  }
  body:not(.admin-body) {
    padding-bottom: 0 !important;
  }
  .site-header {
    top: 0 !important;
    height: 70px;
  }
  .header-inner,
  .portal-v1-nav-inner,
  .portal-main,
  .portal-main.v1-main,
  .account-main,
  .footer {
    width: min(100% - 32px, var(--ri-content));
  }
  .portal-v1-nav {
    position: sticky !important;
    inset: auto 0 auto !important;
    top: 70px !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border) !important;
    border-radius: 0 !important;
    background: var(--surface-overlay) !important;
    box-shadow: none !important;
    overflow: hidden;
  }
  .portal-v1-nav-inner {
    width: min(100% - 32px, var(--ri-content)) !important;
    height: auto !important;
    padding: 0 !important;
    gap: 18px !important;
  }
  .portal-v1-nav a {
    display: block !important;
    height: auto !important;
    min-width: max-content;
    padding: 14px 2px 12px !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  .v1-dashboard-hero,
  .v1-page-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px !important;
  }
  .v1-kpi-grid,
  .admin-grid-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .v1-track-grid {
    grid-template-columns: 1fr;
  }
  .v1-next-step-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .account-layout {
    grid-template-columns: 1fr;
  }
  .account-nav {
    position: static;
    display: flex;
    overflow-x: auto;
  }
  .account-nav a {
    flex: 0 0 auto;
  }
  .form-grid,
  .admin-form-grid,
  .access-management-grid {
    grid-template-columns: 1fr;
  }
  .roadmap-access-card,
  .roadmap-access-item {
    grid-template-columns: 1fr;
  }
  .roadmap-access-side {
    justify-items: start;
  }
  .roadmap-access-side small {
    text-align: left;
  }
}

@media (max-width: 520px) {
  .header-note,
  .user-trigger b {
    display: none;
  }
  .brand-logo {
    width: 150px;
  }
  .portal-main {
    padding-top: 24px;
  }
  .v1-dashboard-hero h1,
  .v1-page-hero h1 {
    font-size: 38px !important;
  }
  .v1-kpi-grid,
  .admin-grid-stats {
    grid-template-columns: 1fr !important;
  }
  .auth-panel {
    padding-inline: 20px;
  }
  .auth-card h2 {
    font-size: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}