:root {
  --background: rgb(245, 245, 245);
  --foreground: rgb(10, 10, 10);
  --card: rgb(255, 255, 255);
  --card-foreground: rgb(10, 10, 10);
  --popover: rgb(255, 255, 255);
  --popover-foreground: rgb(10, 10, 10);
  --primary: rgb(2, 1, 41);
  --primary-foreground: rgb(250, 250, 250);
  --secondary: rgb(245, 245, 245);
  --secondary-foreground: rgb(23, 23, 23);
  --muted: rgb(245, 245, 245);
  --muted-foreground: rgb(113, 113, 113);
  --accent: rgb(245, 245, 245);
  --accent-foreground: rgb(23, 23, 23);
  --destructive: rgb(231, 0, 11);
  --destructive-foreground: rgb(245, 250, 250);
  --border: rgb(229, 229, 229);
  --input: rgb(229, 229, 229);
  --ring: rgb(161, 161, 161);
  --chart-1: rgb(115, 115, 115);
  --sidebar: rgb(250, 250, 250);
  --sidebar-foreground: rgb(10, 10, 10);
  --sidebar-primary: rgb(23, 23, 23);
  --sidebar-primary-foreground: rgb(250, 250, 250);
  --sidebar-accent: rgb(245, 245, 245);
  --sidebar-accent-foreground: rgb(23, 23, 23);
  --sidebar-border: rgb(229, 229, 229);
  --sidebar-ring: rgb(161, 161, 161);
  --font-sans: monospace;
  --font-serif: monospace;
  --font-mono: monospace;
  --radius: 0rem;
  --spacing: 0.25rem;
  --shadow-x: 0px;
  --shadow-y: 0px;
  --tracking-normal: 0em;

  /* Status colors for analysis results */
  --status-critical: var(--destructive);
  --status-error: var(--destructive);
  --status-warning: var(--ring);
  --status-info: var(--muted-foreground);
  --status-minor: var(--muted-foreground);
  --status-success: var(--chart-1);

  /* Quote background colors */
  --quote-critical: rgb(255, 200, 200);
  --quote-error: rgb(255, 255, 200);
  --quote-warning: rgb(200, 200, 200);
  --quote-info: rgb(240, 240, 240);
  --quote-minor: rgb(250, 250, 250);
  --quote-success: var(--background);
  --quote-fixed: rgb(200, 255, 200);
  --lh-body: 1.5;
  --text-max-width: 65ch;
  --container-max-width: 1600px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--background);
  color: var(--foreground);
  margin: 0;
  padding: 0;
}

/* Override Vuetify default styles to match Application Style Settings */
.v-card {
  background-color: var(--card) !important;
  color: var(--card-foreground) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
}

.v-text-field .v-field {
  background-color: var(--input) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
}

.v-btn {
  border-radius: var(--radius) !important;
  font-family: var(--font-sans) !important;
}

.v-btn--variant-elevated {
  box-shadow: var(--shadow-x) var(--shadow-y) 0px 0px rgba(0, 0, 0, 0) !important;
}

.v-alert {
  border-radius: var(--radius) !important;
}

.v-dialog .v-card {
  background-color: var(--popover) !important;
  color: var(--popover-foreground) !important;
}

/* Force all elements to use our font family */
* {
  font-family: var(--font-sans) !important;
}

/* Specific overrides for headings and other elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans) !important;
}

.v-card-title {
  font-family: var(--font-sans) !important;
}

.v-radio-group .v-label {
  font-family: var(--font-sans) !important;
}

/* Framework list styles */
.framework-list {
  max-height: 400px;
  overflow-y: auto;
}

.framework-item {
  border: 2px solid transparent;
  margin-bottom: 4px;
}

.framework-item:hover {
  background-color: rgba(115, 115, 115, 0.05) !important;
  border-color: var(--primary) !important;
}

.framework-item.selected {
  background-color: rgba(115, 115, 115, 0.1) !important;
  border-color: var(--primary) !important;
  font-weight: 600;
  color: rgb(10, 10, 10) !important;
}

.cursor-pointer {
  cursor: pointer;
}

/* Error display styles */
.quote-block {
  font-style: italic;
  border-left: 4px solid rgba(0, 0, 0, 0.1);
  margin-left: 8px;
  padding-left: 12px;
  position: relative;
}

.error-description {
  margin-top: 8px;
  line-height: 1.4;
}

/* Error display enhancements */
.error-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--primary);
  color: var(--primary-foreground);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  flex-shrink: 0;
}

.error-severity {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 0.5px;
}

/* Two-column layout enhancements */
@media (min-width: 1264px) {
  /* lg breakpoint */
  .layout-columns {
    gap: 24px;
  }
}

/* Example buttons row layout (right aligned) */
.example-buttons-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
}

.example-buttons-row .v-btn {
  flex-shrink: 0;
}

pre.clarifying-block {
  background-color: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  line-height: 1.4;
}

/* App container max width */
.app-container {
  max-width: var(--container-max-width) !important;
  margin: 0 auto;
}

/* Footer styles */
.app-footer {
  background-color: var(--sidebar) !important;
  color: var(--sidebar-foreground) !important;
  border-top: 1px solid var(--sidebar-border);
}

.app-footer a {
  color: var(--sidebar-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.app-footer a:hover {
  text-decoration-thickness: 2px;
}

/* Left column animation styles */
.results-column-enter-active {
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.results-column-leave-active {
  transition: all 0.4s cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

.results-column-enter-from {
  opacity: 0;
  filter: blur(20px);
  transform: translateX(-30px) scale(0.96);
  transform-origin: left center;
}

.results-column-leave-to {
  opacity: 0;
  filter: blur(20px);
  transform: translateX(-30px) scale(0.96);
  transform-origin: left center;
}

.results-column-enter-to,
.results-column-leave-from {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0px) scale(1);
  transform-origin: left center;
}

/* Readability and accessibility enhancements */
html { font-size: 16px; }
@media (min-width: 1280px) { html { font-size: 17px; } }
body { line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

.readable { max-width: var(--text-max-width); margin-inline: auto; }

a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

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

.v-text-field .v-field { background-color: var(--input) !important; border-color: rgb(138, 138, 138) !important; }

.v-btn { min-height: 44px; min-width: 44px; font-weight: 600 !important; }
.v-btn:hover { filter: brightness(1.04); }

h1 { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.2; }
h2 { font-size: clamp(1.5rem, 2vw, 1.75rem);   line-height: 1.3; }
h3 { font-size: 1.25rem;                       line-height: 1.35; }

:lang(ru) { hyphens: auto; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Cookie Consent Banner Styles */
.cookie-consent-banner {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  max-width: 400px;
  background-color: var(--card);
  color: var(--card-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  padding: 1rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
}

.cookie-consent-banner__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookie-consent-banner__buttons {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.cookie-consent-banner__button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.cookie-consent-banner__button:hover {
  filter: brightness(1.05);
}

.cookie-consent-banner__button:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.cookie-consent-banner__button--accept {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

.cookie-consent-banner__button--decline {
  background-color: var(--destructive);
  color: var(--destructive-foreground);
  border-color: var(--destructive);
}

/* Mobile responsiveness */
@media (max-width: 480px) {
  .cookie-consent-banner {
    bottom: 0.5rem;
    right: 0.5rem;
    left: 0.5rem;
    max-width: none;
  }

  .cookie-consent-banner__buttons {
    flex-direction: column;
  }

  .cookie-consent-banner__button {
    width: 100%;
  }
}