/* Western Theme for Wanted RP - Application System */

:root {
    /* Western Color Palette */
    --western-primary: #8B2E16; /* Deep rust red */
    --western-secondary: #D97B37; /* Burnt orange */
    --western-accent: #C9A94F; /* Gold/tan */
    --western-dark: #1a1a1a; /* Dark background */
    --western-darker: #0d0d0d; /* Darker background */
    --western-light: #F5E6D3; /* Parchment */
    --western-text: #E8DFD0; /* Light text */
    --western-muted: #8B7355; /* Muted brown */

    /* Status Colors */
    --status-pending: #D97B37;
    --status-review: #3498DB;
    --status-hold: #9B59B6;
    --status-ticket: #1ABC9C;
    --status-approved: #2ECC71;
    --status-rejected: #E74C3C;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6);
}

html, body {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    background-color: var(--western-dark);
    color: var(--western-text);
    min-height: 100vh;
}

/* Headings with Western flair */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Rye', 'Cinzel', cursive;
    color: var(--western-accent);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

/* Links */
a {
    color: var(--western-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--western-accent);
}

/* Buttons */
.btn-primary, .btn-western {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    color: var(--western-light);
    background: linear-gradient(180deg, var(--western-primary) 0%, #6B1D0F 100%);
    border: 2px solid var(--western-secondary);
    border-radius: 4px;
    padding: 0.6rem 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.btn-primary:hover, .btn-western:hover {
    background: linear-gradient(180deg, var(--western-secondary) 0%, var(--western-primary) 100%);
    border-color: var(--western-accent);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    font-family: 'Cinzel', serif;
    color: var(--western-text);
    background: transparent;
    border: 2px solid var(--western-muted);
    border-radius: 4px;
}

.btn-secondary:hover {
    background: rgba(139, 115, 85, 0.2);
    border-color: var(--western-secondary);
    color: var(--western-accent);
}

.btn-success {
    background: linear-gradient(180deg, var(--status-approved) 0%, #1E8449 100%);
    border-color: #27AE60;
}

.btn-danger {
    background: linear-gradient(180deg, var(--status-rejected) 0%, #A93226 100%);
    border-color: #C0392B;
}

/* Cards */
.card, .western-card {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
    border: 1px solid var(--western-muted);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
}

.card-header, .western-card-header {
    background: linear-gradient(90deg, var(--western-primary) 0%, rgba(139, 46, 22, 0.5) 100%);
    border-bottom: 2px solid var(--western-secondary);
    padding: 1rem 1.5rem;
    font-family: 'Rye', cursive;
    color: var(--western-accent);
}

.card-body {
    padding: 1.5rem;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Forms */
.form-control, .form-select {
    font-family: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    background-color: rgba(40, 40, 40, 0.9);
    border: 1px solid var(--western-muted);
    color: var(--western-text);
    padding: 0.75rem 1rem;
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.form-control:focus, .form-select:focus {
    background-color: rgba(50, 50, 50, 0.95);
    border-color: var(--western-secondary);
    box-shadow: 0 0 0 3px rgba(217, 123, 55, 0.25);
    color: var(--western-light);
}

.form-control::placeholder {
    color: var(--western-muted);
}

.form-label {
    font-weight: 600;
    color: var(--western-accent);
    margin-bottom: 0.5rem;
}

textarea.form-control {
    min-height: 120px;
}

/* Form validation */
.valid.modified:not([type=checkbox]) {
    border-color: var(--status-approved);
    outline: none;
}

.invalid {
    border-color: var(--status-rejected);
    outline: none;
}

.validation-message {
    color: var(--status-rejected);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* Tables */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--western-text);
    color: var(--western-text);
}

.table thead th {
    font-family: 'Cinzel', serif;
    background: var(--western-primary);
    color: var(--western-light);
    border-bottom: 2px solid var(--western-secondary);
    padding: 1rem;
}

.table tbody tr {
    border-bottom: 1px solid rgba(139, 115, 85, 0.3);
    transition: background 0.2s ease;
}

.table tbody tr:hover {
    background: rgba(139, 46, 22, 0.15);
}

.table td {
    padding: 0.875rem 1rem;
    vertical-align: middle;
}

/* Status badges */
.badge {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    padding: 0.4em 0.8em;
    border-radius: 4px;
}

.badge-pending {
    background-color: var(--status-pending);
    color: white;
}

.badge-review {
    background-color: var(--status-review);
    color: white;
}

.badge-hold {
    background-color: var(--status-hold);
    color: white;
}

.badge-ticket {
    background-color: var(--status-ticket);
    color: white;
}

.badge-approved {
    background-color: var(--status-approved);
    color: white;
}

.badge-rejected {
    background-color: var(--status-rejected);
    color: white;
}

/* Vote counts */
.vote-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
}

.vote-approve {
    background: rgba(46, 204, 113, 0.2);
    border: 1px solid var(--status-approved);
    color: var(--status-approved);
}

.vote-reject {
    background: rgba(231, 76, 60, 0.2);
    border: 1px solid var(--status-rejected);
    color: var(--status-rejected);
}

.vote-other {
    background: rgba(241, 196, 15, 0.2);
    border: 1px solid #f1c40f;
    color: #f1c40f;
}

/* Page layout */
.page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-header {
    background: linear-gradient(180deg, var(--western-darker) 0%, var(--western-dark) 100%);
    border-bottom: 3px solid var(--western-primary);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-family: 'Rye', cursive;
    font-size: 1.75rem;
    color: var(--western-accent);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--western-secondary);
}

.user-name {
    font-family: 'Cinzel', serif;
    color: var(--western-text);
}

.main-content {
    flex: 1;
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Page body with sidebar */
.page-body {
    display: flex;
    flex: 1;
}

/* Sidebar */
.sidebar {
    width: 220px;
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.98) 0%, rgba(13, 13, 13, 1) 100%);
    border-right: 1px solid var(--western-muted);
    padding: 1rem 0;
    flex-shrink: 0;
}

.sidebar-section {
    margin-bottom: 1.5rem;
}

.sidebar-header {
    font-family: 'Rye', cursive;
    font-size: 0.75rem;
    color: var(--western-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    color: var(--western-text);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.sidebar-link:hover {
    background: rgba(139, 46, 22, 0.3);
    color: var(--western-accent);
}

.sidebar-link i {
    width: 18px;
    text-align: center;
}

/* Main content with sidebar */
.main-content.with-sidebar {
    flex: 1;
    max-width: calc(1400px - 220px);
}

/* Console page overrides max-width so it fills the full available space */
body.console-full-width .main-content {
    max-width: none;
}

/* Reports, the app queue, and app review pages have wide tables and benefit from the
   full available width rather than the site-wide 1400px content cap */
.main-content.full-width {
    max-width: none;
}

/* Form continuation page */
.form-container {
    max-width: 800px;
    margin: 0 auto;
}

.form-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 1rem;
    background: rgba(40, 40, 40, 0.5);
    border-radius: 8px;
}

.progress-step {
    flex: 1;
    height: 8px;
    background: var(--western-muted);
    border-radius: 4px;
    overflow: hidden;
}

.progress-step.completed {
    background: var(--western-secondary);
}

.progress-step.current {
    background: linear-gradient(90deg, var(--western-secondary) 50%, var(--western-muted) 50%);
}

.question-card {
    margin-bottom: 1.5rem;
}

.question-category-heading {
    color: var(--western-accent);
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--western-muted);
}

.question-category-heading:first-child {
    margin-top: 0;
}

.question-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--western-light);
    margin-bottom: 0.75rem;
}

.question-required {
    color: var(--status-rejected);
    margin-left: 0.25rem;
}

/* Form progress text */
.form-progress-text {
    color: var(--western-light);
    font-size: 1rem;
}

.form-progress-text strong {
    color: var(--western-accent);
}

/* Checkbox and radio labels */
.form-check-label {
    color: var(--western-light);
    font-size: 1rem;
}

.form-check-input {
    background-color: rgba(40, 40, 40, 0.9);
    border-color: var(--western-muted);
}

.form-check-input:checked {
    background-color: var(--western-secondary);
    border-color: var(--western-secondary);
}

/* Override Bootstrap's text utilities for better contrast on dark background */
.text-muted {
    color: var(--western-muted) !important;
}

.text-secondary {
    color: var(--western-secondary) !important;
}

/* Override Bootstrap's default text color */
.card-body,
.card-body *:not(.badge):not(.btn):not(a) {
    color: var(--western-text);
}

/* Small text should also be readable */
small,
.small {
    color: var(--western-muted) !important;
}

/* List items in cards */
.card-body li {
    color: var(--western-text);
}

/* Labels and strong text */
.card-body strong,
.card-body label {
    color: var(--western-accent) !important;
}

/* Auto-save indicator */
.auto-save-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--western-muted);
    transition: all 0.3s ease;
}

.auto-save-indicator.saving {
    color: var(--western-secondary);
}

.auto-save-indicator.saved {
    color: var(--status-approved);
}

.auto-save-indicator.error {
    color: var(--status-rejected);
}

/* Staff dashboard */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: linear-gradient(135deg, rgba(139, 46, 22, 0.3) 0%, rgba(30, 30, 30, 0.95) 100%);
    border: 1px solid var(--western-muted);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.stat-number {
    font-family: 'Rye', cursive;
    font-size: 2.5rem;
    color: var(--western-accent);
}

.stat-label {
    font-size: 0.9rem;
    color: var(--western-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.submission-list {
    list-style: none;
    padding: 0;
}

.submission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(139, 115, 85, 0.2);
    transition: background 0.2s ease;
}

.submission-item:hover {
    background: rgba(139, 46, 22, 0.1);
}

.submission-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.submission-applicant {
    font-weight: 600;
    color: var(--western-light);
}

.submission-form-name {
    font-size: 0.875rem;
    color: var(--western-muted);
}

.submission-date {
    font-size: 0.8rem;
    color: var(--western-muted);
}

/* Notes section */
.notes-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--western-muted);
}

.note-item {
    background: rgba(40, 40, 40, 0.5);
    border-left: 3px solid var(--western-secondary);
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0 4px 4px 0;
}

.note-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--western-muted);
}

.note-author {
    font-weight: 600;
    color: var(--western-secondary);
}

.note-content {
    color: var(--western-text);
}

.note-item-compact {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* Leaflet tooltips (Position History map) live inside a .card-body, so the ".card-body
   *:not(...)" override above clobbers Leaflet's own light-text-on-white default with our
   light theme text color - forcing near-unreadable light-on-white. Restyle to match the
   app's dark theme instead of just reverting to Leaflet's plain white default.
   Position History links leaflet.css from inside the page body (Index.razor), so it lands in
   the DOM - and the cascade - after this stylesheet. Every property here needs !important or
   Leaflet's own same-specificity, later-loaded rule wins the property back (this is why the
   background kept reverting to white while only the !important'd text color stuck). */
.leaflet-tooltip {
    background-color: var(--western-dark) !important;
    border-color: var(--western-secondary) !important;
    color: var(--western-text) !important;
}
.leaflet-tooltip-top:before { border-top-color: var(--western-secondary) !important; }
.leaflet-tooltip-bottom:before { border-bottom-color: var(--western-secondary) !important; }
.leaflet-tooltip-left:before { border-left-color: var(--western-secondary) !important; }
.leaflet-tooltip-right:before { border-right-color: var(--western-secondary) !important; }

/* Player report popups (click, not hover) are a completely separate Leaflet component from
   tooltips - same ".card-body *" clobbering, same fix needed, different CSS classes. */
.leaflet-popup-content-wrapper {
    background-color: var(--western-dark) !important;
    border: 1px solid var(--western-secondary) !important;
    color: var(--western-text) !important;
}
.leaflet-popup-content-wrapper *:not(.badge):not(.btn):not(a) {
    color: var(--western-text) !important;
}
.leaflet-popup-content {
    margin: 10px 14px;
}
.leaflet-popup-tip {
    background-color: var(--western-dark) !important;
    border: 1px solid var(--western-secondary) !important;
    box-shadow: none !important;
}
.leaflet-popup-close-button {
    color: var(--western-text) !important;
}
.leaflet-popup-close-button:hover {
    color: var(--western-accent) !important;
}

/* Player report flags (Position History map) - only mounted while playback is within
   REPORT_VISIBLE_WINDOW_MS of the report's own time (see Index.razor.js), with a gentle idle
   pulse so they read as "very visible" while shown, then flash harder for a few seconds when
   playback crosses that report's exact moment. */
.report-flag-icon {
    background: transparent;
    border: none;
}

.report-flag-shape {
    font-size: 22px;
    line-height: 1;
    text-align: center;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
    transform-origin: 50% 90%;
}

.report-flag-idle {
    animation: report-flag-idle-pulse 2.2s ease-in-out infinite;
}

.report-flag-active {
    animation: report-flag-active-pulse 0.5s ease-in-out 0s 6;
}

@keyframes report-flag-idle-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(0,0,0,0.8)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(231,76,60,0.9)); }
}

@keyframes report-flag-active-pulse {
    0%, 100% { transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(231,76,60,0.9)); }
    50% { transform: scale(1.6); filter: drop-shadow(0 0 14px rgba(255,80,60,1)); }
}

/* Static vendor reference markers (Position History map) - calm/steady, unlike the report flags,
   since these aren't alerts, just fixed points of interest. */
.vendor-icon {
    background: transparent;
    border: none;
}

.vendor-marker {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: rgba(20, 20, 20, 0.75);
    border: 1px solid var(--western-secondary);
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

/* Answers display */
.answer-grid {
    display: grid;
    gap: 1rem;
}

.answer-item {
    padding: 1rem;
    background: rgba(40, 40, 40, 0.3);
    border-radius: 4px;
    overflow: hidden;
    word-wrap: break-word;
}

.answer-category-heading {
    grid-column: 1 / -1;
    color: var(--western-accent);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1rem 0 0;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.answer-category-heading:first-child {
    margin-top: 0;
}

.answer-question {
    font-weight: 600;
    color: var(--western-accent);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.answer-value {
    color: var(--western-text);
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    padding: 0.75rem 1rem;
}

/* Login page */
.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.login-card {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.98) 100%);
    border: 2px solid var(--western-primary);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}

.login-logo {
    max-width: 200px;
    margin-bottom: 2rem;
}

.welcome-text {
    color: var(--western-text);
    font-size: 1.1rem;
}

.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: #5865F2;
    color: white;
    padding: 0.75rem 2rem;
    border-radius: 4px;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

.discord-btn:hover {
    background: #4752C4;
    color: white;
}

/* Error UI */
.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--western-primary);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    padding: 0.7rem 1.2rem;
    background: var(--western-primary);
    color: white;
}

/* Focus styles for accessibility */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--western-dark), 0 0 0 4px var(--western-secondary);
}

h1:focus {
    outline: none;
}

/* Responsive */
@media (max-width: 768px) {
    .main-content {
        padding: 1rem;
    }

    .main-header {
        padding: 0.75rem 1rem;
    }

    .brand {
        font-size: 1.25rem;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .submission-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}

/* TipTap Document Editor Styles */
.tiptap-editor {
    min-height: 450px;
    padding: 1rem;
    background: var(--western-darker);
    color: var(--western-text);
    font-family: 'Georgia', serif;
    font-size: 1rem;
    line-height: 1.6;
}

.tiptap-editor:focus {
    outline: none;
}

.tiptap-editor .ProseMirror {
    min-height: 400px;
}

.tiptap-editor .ProseMirror:focus {
    outline: none;
}

.tiptap-editor h1 {
    font-size: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.tiptap-editor h2 {
    font-size: 1.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.tiptap-editor h3 {
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.tiptap-editor p {
    margin-bottom: 1rem;
}

.tiptap-editor ul,
.tiptap-editor ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.tiptap-editor li {
    margin-bottom: 0.25rem;
}

.tiptap-editor blockquote {
    border-left: 3px solid var(--western-accent);
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    color: var(--western-muted);
    font-style: italic;
}

.tiptap-editor code {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.tiptap-editor pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.tiptap-editor pre code {
    background: none;
    padding: 0;
}

.tiptap-editor hr {
    border: none;
    border-top: 2px solid var(--western-muted);
    margin: 2rem 0;
}

.tiptap-editor a {
    color: var(--western-secondary);
    text-decoration: underline;
}

.tiptap-editor a:hover {
    color: var(--western-accent);
}

/* Placeholder text */
.tiptap-editor .is-editor-empty:first-child::before {
    content: 'Start writing your document...';
    float: left;
    color: var(--western-muted);
    pointer-events: none;
    height: 0;
}

/* Toolbar styling */
.tiptap-toolbar .btn-toolbar {
    background: var(--western-darker);
    border-color: var(--western-muted);
}

.tiptap-toolbar .btn,
.tiptap-toolbar .btn.btn-outline-secondary {
    color: var(--western-text);
    border-color: var(--western-muted);
    background: transparent;
}

.tiptap-toolbar .btn:hover,
.tiptap-toolbar .btn.btn-outline-secondary:hover {
    background: var(--western-primary);
    border-color: var(--western-primary);
    color: white;
}

.tiptap-toolbar .btn.active,
.tiptap-toolbar .btn-secondary,
.tiptap-toolbar .btn.btn-outline-secondary.active {
    background: var(--western-secondary);
    border-color: var(--western-secondary);
    color: white;
}

/* ===================== Document Watermark ===================== */

.document-watermark {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1000;
    user-select: none;
    -webkit-user-select: none;
}

.watermark-row {
    display: flex;
    justify-content: space-around;
    padding: 2rem 0;
}

.watermark-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(-30deg);
    opacity: 0.08;
    color: var(--western-text);
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.watermark-item .watermark-time {
    font-size: 0.7rem;
    font-weight: 400;
    margin-top: 0.25rem;
    letter-spacing: 0.05em;
}

/* Print styles - make watermark more visible when printing */
@media print {
    .document-watermark {
        position: fixed;
    }

    .watermark-item {
        opacity: 0.15;
    }
}

/* ===================== Document View Page ===================== */

.document-view-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.document-view-header {
    background: var(--western-darker);
    border-bottom: 2px solid var(--western-accent);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.document-view-header h1 {
    font-family: 'Cinzel', serif;
    color: var(--western-accent);
}

.document-view-content {
    flex: 1;
    background: var(--western-dark);
}

.document-view-footer {
    background: var(--western-darker);
    border-top: 1px solid var(--bs-border-color);
}

/* Document rendered content styling */
.document-rendered-content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--western-text);
}

.document-rendered-content h1 {
    font-family: 'Rye', cursive;
    color: var(--western-accent);
    font-size: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--western-accent);
    padding-bottom: 0.5rem;
}

.document-rendered-content h2 {
    font-family: 'Cinzel', serif;
    color: var(--western-secondary);
    font-size: 1.5rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
}

.document-rendered-content h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.document-rendered-content p {
    margin-bottom: 1rem;
}

.document-rendered-content ul,
.document-rendered-content ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.document-rendered-content li {
    margin-bottom: 0.25rem;
}

.document-rendered-content blockquote {
    border-left: 3px solid var(--western-accent);
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
    color: var(--western-muted);
    font-style: italic;
}

.document-rendered-content code {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.document-rendered-content pre {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin-bottom: 1rem;
}

.document-rendered-content pre code {
    background: none;
    padding: 0;
}

.document-rendered-content hr {
    border: none;
    border-top: 2px solid var(--western-muted);
    margin: 2rem 0;
}

.document-rendered-content a {
    color: var(--western-secondary);
    text-decoration: underline;
}

.document-rendered-content a:hover {
    color: var(--western-accent);
}

.document-rendered-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

.document-rendered-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.document-rendered-content th,
.document-rendered-content td {
    border: 1px solid var(--bs-border-color);
    padding: 0.5rem;
    text-align: left;
}

.document-rendered-content th {
    background: var(--western-darker);
    font-weight: 600;
}

/* ===================== Editor Status Indicators ===================== */

.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    background: var(--western-muted);
}

.status-indicator.status-connected {
    background: #00b894;
    box-shadow: 0 0 6px rgba(0, 184, 148, 0.5);
}

.status-indicator.status-reconnecting {
    background: #fdcb6e;
    animation: pulse 1s infinite;
}

.status-indicator.status-disconnected {
    background: #d63031;
}

.status-indicator.status-local {
    background: #0984e3;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.editor-status-bar {
    font-size: 0.85rem;
}

.collaborator-bar {
    font-size: 0.8rem;
}

.collaborator-bar .badge {
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

/* Single-editor mode styles */
.tiptap-editor.editor-readonly {
    background: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
}

.tiptap-editor.editor-readonly .ProseMirror {
    opacity: 0.9;
}

.toolbar-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.tiptap-toolbar .btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Connection status indicator */
.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: var(--bs-secondary);
}

.status-indicator.status-connected {
    background: var(--bs-success);
}

.status-indicator.status-reconnecting {
    background: var(--bs-warning);
    animation: pulse 1s infinite;
}

.status-indicator.status-disconnected {
    background: var(--bs-danger);
}

/* Participants bar */
.participants-bar {
    font-size: 0.85rem;
}

.participants-bar .badge {
    font-size: 0.75rem;
}

/* ===================== Minimal Layout ===================== */

.minimal-layout {
    min-height: 100vh;
    background: var(--western-bg);
    color: var(--western-text);
}

/* ===================== Modal Dark Theme ===================== */

.modal-content {
    background: #1e1e1e;
    border: 1px solid var(--western-muted);
    color: var(--western-text);
}

.modal-header {
    background: #151515;
    border-bottom: 1px solid var(--western-muted);
    color: var(--western-text);
}

.modal-header .modal-title {
    color: var(--western-accent);
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
    background: #1e1e1e;
    color: var(--western-text);
}

.modal-footer {
    background: #151515;
    border-top: 1px solid var(--western-muted);
}

/* Modal backdrop - darker for better contrast */
.modal-backdrop.show {
    opacity: 0.85;
}