/**
 * FearProject Academy - Minimalist Stylesheet
 * Palette: #410000, #580B0B, #771919, #FF3636
 * Font: Inter Bold strictly everywhere
 * Strict Minimalist Flat UI (Zero gradients)
 */

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

:root {
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --color-410000: #410000;
  --color-580B0B: #580B0B;
  --color-771919: #771919;
  --color-FF3636: #FF3636;
  --color-bg-base: #410000;
  --color-bg-card: #580B0B;
  --color-bg-elevated: #771919;
  --color-border: #410000;
  --color-border-bright: #580B0B;
}

*, ::before, ::after {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

body, html, input, textarea, select, button,
h1, h2, h3, h4, h5, h6,
p, span, div, a, label,
table, thead, tbody, tr, th, td,
.font-sans, .font-mono,
.font-normal, .font-medium, .font-semibold, .font-bold,
.font-extrabold, .font-black {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

body {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  background-color: var(--color-bg-base);
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Zero outline on outer site edges and main layout containers */
aside, main, #app-main-layout, body, html {
  border: none !important;
  outline: none !important;
}

/* Prominent Selection Highlight for Access Radios in Modals */
.fpa-access-radio:checked + .fpa-access-card {
  background-color: #FF3636 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(255, 54, 54, 0.45) !important;
  outline: 2px solid #FFFFFF !important;
  outline-offset: -1px !important;
}

.fpa-access-radio:checked + .fpa-access-card .fpa-check-icon {
  display: inline-flex !important;
}

/* Customization Modal: Accent Buttons - Crisp Internal Border Without Clipping */
.fpa-accent-btn {
  box-sizing: border-box !important;
  outline: none !important;
  border: 2px solid transparent !important;
}

.fpa-accent-btn.is-selected {
  border: 2px solid #FFFFFF !important;
  box-shadow: inset 0 0 0 1px #FFFFFF, 0 4px 14px rgba(0, 0, 0, 0.45) !important;
  background-color: var(--fpa-theme-base, #131012) !important;
}

/* Custom Responsive Scrollbars */
*, *::before, *::after {
  scrollbar-width: thin;
  scrollbar-color: var(--fpa-scrollbar-thumb, #771919) var(--fpa-scrollbar-track, #410000);
}

::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: var(--fpa-scrollbar-size, 7px);
  height: var(--fpa-scrollbar-size, 7px);
}

::-webkit-scrollbar-track,
*::-webkit-scrollbar-track {
  background: var(--fpa-scrollbar-track, #410000);
  border-radius: var(--fpa-scrollbar-radius, 6px);
}

::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb {
  background: var(--fpa-scrollbar-thumb, #771919);
  border-radius: var(--fpa-scrollbar-radius, 6px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:hover {
  background: var(--fpa-scrollbar-thumb-hover, #FF3636);
  box-shadow: 0 0 8px rgba(var(--fpa-accent-rgb, 255, 54, 54), 0.5);
}

/* Dedicated Table Scrollbars */
.overflow-x-auto,
.overflow-x-auto * {
  scrollbar-width: thin !important;
  scrollbar-color: var(--fpa-scrollbar-thumb, #771919) rgba(0, 0, 0, 0.35) !important;
}

.overflow-x-auto::-webkit-scrollbar {
  height: var(--fpa-scrollbar-table-size, 7px) !important;
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: var(--fpa-scrollbar-radius, 6px) !important;
}

.overflow-x-auto::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: var(--fpa-scrollbar-radius, 6px) !important;
  margin: 0 4px;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
  background: var(--fpa-scrollbar-thumb, #771919) !important;
  border-radius: var(--fpa-scrollbar-radius, 6px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
  background: var(--fpa-scrollbar-thumb-hover, #FF3636) !important;
  box-shadow: 0 0 10px rgba(var(--fpa-accent-rgb, 255, 54, 54), 0.6) !important;
}

/* Specific Highlight Palette (#88FF82 and #FF4848 for online dots and highlighted words) */
.fpa-dot-green,
.fpa-online-dot {
  background-color: #88FF82 !important;
}

.fpa-dot-red,
.fpa-testing-dot {
  background-color: #FF4848 !important;
}

.fpa-word-green,
.fpa-highlight-green {
  color: #88FF82 !important;
}

.fpa-word-red,
.fpa-highlight-red {
  color: #FF4848 !important;
}

/* Ensure all red text states use true #FF4848 */
.text-rose-200,
.text-rose-300,
.text-rose-400,
.text-rose-500 {
  color: #FF4848 !important;
}

/* Explicit Table Header & Cell alignments */
th {
  text-align: left;
}
th.text-center,
td.text-center,
.text-center {
  text-align: center !important;
}
th.text-right,
td.text-right,
.text-right {
  text-align: right !important;
}
th.text-left,
td.text-left,
.text-left {
  text-align: left !important;
}

/* Login card default prominent shadow */
#login-card, .fpa-login-card {
  box-shadow: 0 18px 45px -5px rgba(0, 0, 0, 0.7), 0 8px 18px -3px rgba(0, 0, 0, 0.55) !important;
}

/* ANTI-CHEAT HARDENING STYLES (Active ONLY during test) */
.fpa-test-mode-protected {
  user-select: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  -webkit-touch-callout: none !important;
}

.fpa-test-mode-protected textarea,
.fpa-test-mode-protected input {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Prevent Print / PDF Capture during test */
@media print {
  body {
    display: none !important;
  }
}

/* Flat active navigation states */
.tab-active {
  background-color: #FF3636 !important;
  color: #FFFFFF !important;
}

/* Focus Rings in #FF3636 */
input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px #FF3636 !important;
}

/* ======================================================== */
/* Responsive & Mobile Enhancements                        */
/* ======================================================== */

/* Hide scrollbars for clean horizontal tab bars */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Touch responsiveness - eliminates mobile tap delay */
button, a, input, select, textarea, [role="button"], label {
  touch-action: manipulation;
}

/* Safe area support for notched phones */
@supports (padding: max(0px)) {
  #app-main-layout {
    padding-left: max(0.75rem, env(safe-area-inset-left));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  #test-runner-container {
    padding-top: env(safe-area-inset-top);
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* Smooth touch scrolling */
.overflow-x-auto, .overflow-y-auto {
  -webkit-overflow-scrolling: touch;
}

/* Mobile table cell padding tuning */
@media (max-width: 640px) {
  table th, table td {
    padding-left: 0.875rem !important;
    padding-right: 0.875rem !important;
  }
}

/* ======================================================== */
/* 250%+ Zoom & High-DPI Adaptation (WCAG 1.4.10 Reflow)    */
/* ======================================================== */

/* Prevent horizontal page blowout while preserving inner table scrolling */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Ensure containers can shrink properly inside flexbox */
#app-main-layout, main, aside, header {
  min-width: 0;
}

/* Universal Modal Safety for 250%+ Zoom & Short Viewports */
#modal-container {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#modal-container .fixed.inset-0 {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 0.5rem !important;
}

#modal-container .fixed.inset-0 > div {
  margin-top: auto !important;
  margin-bottom: auto !important;
  max-width: 100% !important;
  flex-shrink: 0 !important;
}

/* Short Viewport Adaptation (250%+ Zoom on standard displays) */
@media (max-height: 560px) {
  /* Prevent fixed height modal locking when vertical space is constrained */
  #modal-container .max-h-\[92vh\] {
    max-height: none !important;
  }
  #fpa-customization-scroll {
    max-height: 240px !important;
  }
  #login-card {
    padding: 1.25rem !important;
  }
  #login-card img {
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  #login-card h1 {
    font-size: 1rem !important;
    margin-bottom: 0.75rem !important;
  }
}

/* Narrow & High Zoom Breakpoint (<= 768px - covers 250% zoom on 1080p and 200%+ on 1366x768) */
@media (max-width: 768px) {
  /* Let lengthy headers & titles wrap naturally instead of breaking out */
  h1.text-2xl, h1.text-xl {
    font-size: 1.25rem !important;
    line-height: 1.5rem !important;
    white-space: normal !important;
  }
  h2.text-xl, h2.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.375rem !important;
    white-space: normal !important;
  }
  
  /* Compact table cells for narrow viewports */
  table th, table td {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 0.8125rem !important;
  }

  /* Compact scrollbars */
  ::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 5px !important;
    height: 5px !important;
  }
}

/* Extreme Zoom Breakpoint (<= 480px - covers 300%-500% zoom and small mobile) */
@media (max-width: 480px) {
  #app-main-layout {
    padding: 0.5rem !important;
  }

  main {
    padding: 0.875rem !important;
    border-radius: 1rem !important;
  }

  header {
    padding: 0.875rem !important;
    border-radius: 1rem !important;
  }

  /* Make modal dialog padding compact to maximize readable area */
  #modal-container .fixed.inset-0 > div {
    padding: 0.875rem !important;
    border-radius: 1rem !important;
  }

  /* Responsive action buttons inside items */
  button {
    min-height: 2rem;
  }
}