/* ===== Color Palette & Theme ===== */
:root {
    --primary-color: #007BFF;
    --accent-color: #DC143C;
    --background-color: #1C1C1C;
    --card-background: #2A2A2A;
    --secondary-text: #CCCCCC;
    --highlight-color: #9B30FF;
    --border-color: #444444;
    --surface-soft: rgba(255, 255, 255, 0.05);
    --surface-strong: rgba(255, 255, 255, 0.08);
    --shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.18);
    --shadow-strong: 0 18px 44px rgba(0, 0, 0, 0.24);
}

/* ===== Typography & Font Stack ===== */
html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--background-color);
    color: #FFFFFF;
}

/* Headings use Poppins for visual hierarchy */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    color: #FFFFFF;
}

h1, .h1 { font-size: 2.5rem; font-weight: 700; }
h2, .h2 { font-size: 2rem; font-weight: 700; }
h3, .h3 { font-size: 1.75rem; font-weight: 600; }
h4, .h4 { font-size: 1.5rem; font-weight: 600; }
h5, .h5 { font-size: 1.25rem; font-weight: 600; }
h6, .h6 { font-size: 1rem; font-weight: 600; }

/* ===== Focus States for Accessibility ===== */
*:focus,
*:focus-visible {
    outline: 3px solid var(--highlight-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* ===== Navigation Menu Overrides ===== */
/* NavLink renders <a> tags without the Blazor scope attribute, so scoped CSS in
   NavMenu.razor.css doesn't apply to them. These global rules ensure typography
   and colors are consistent across both NavLink anchors and inline button nav links. */

.site-nav .nav-link {
    font-weight: 700;
    font-size: clamp(0.75rem, 1vw, 0.82rem);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
    white-space: nowrap;
    text-decoration: none;
}

.site-nav .nav-link:hover {
    color: rgba(255, 255, 255, 0.95) !important;
    text-decoration: none;
}

/* Dropdown items — NavLink renders <a> without scope attribute, so these must be global */
.nav-dropdown-item {
    display: block;
    padding: 0.55rem 0.85rem;
    border-radius: 0.6rem;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72) !important;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    text-decoration: none;
}

.nav-dropdown-item.active {
    background: linear-gradient(135deg, rgba(220, 20, 60, 0.22), rgba(37, 140, 251, 0.18));
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
    text-decoration: none;
}

.nav-dropdown-action {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

@media (max-width: 767.98px) {
    .navbar-nav .nav-link {
        padding: 0.75rem 0.75rem !important;
        width: 100%;
    }
}

/* ===== Links & Buttons ===== */
a, .btn-link {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

a:hover, .btn-link:hover {
    color: var(--highlight-color);
    text-decoration: underline;
}

a:focus, .btn-link:focus {
    outline: 3px solid var(--highlight-color);
    outline-offset: 2px;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #2993ff);
    border-color: transparent;
    font-weight: 600;
    border-radius: 999px;
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #0063cf, #1f7ae0);
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 123, 255, 0.28);
}

.btn-outline-light,
.btn-secondary,
.btn-outline-primary {
    border-radius: 999px;
}

.btn-outline-light {
    color: #ffffff;
    border-width: 2px;
}

.btn-outline-light:hover {
    color: #11141c;
    background-color: #ffffff;
    text-decoration: none;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--highlight-color);
}

/* ===== Content Spacing ===== */
.content {
    padding-top: 1.5rem;
}

/* ===== Form Validation ===== */
.valid.modified:not([type=checkbox]) {
    outline: 2px solid #26b050;
}

.invalid {
    outline: 2px solid #dc3545;
}

.validation-message {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

/* ===== Text Colors ===== */
.text-muted {
    color: var(--secondary-text) !important;
}

/* ===== Error UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    display: none;
    left: 0;
    padding: 0.75rem 1.25rem 0.75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        font-size: 1.5rem;
        line-height: 1;
        opacity: 0.7;
        transition: opacity 0.2s ease;
    }
    
    #blazor-error-ui .dismiss:hover {
        opacity: 1;
    }

.blazor-error-boundary {
    background: linear-gradient(135deg, rgba(179, 33, 33, 0.96), rgba(117, 20, 20, 0.98));
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

/* ===== Loading Indicator ===== */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--primary-color);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
    color: var(--secondary-text);
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* ===== Code Display ===== */
code {
    color: #c02d76;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
    padding: 0.125rem 0.25rem;
    background-color: #333333;
    border-radius: 3px;
}

/* ===== Utility Classes for Vertical Centering ===== */
.v-center {
    display: flex;
    align-items: center;
}

.v-center-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ===== Smooth Transitions for Interactive Elements ===== */
a, .btn, .card, .badge, input, select, textarea, .nav-item a {
    transition: all 0.2s ease;
}

/* Specific transitions for common interactions */
.vote-card {
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.rating-badge {
    transition: transform 0.2s ease;
}

/* ===== Page & Main Container ===== */
.page {
    background-color: var(--background-color);
}

main {
    background-color: var(--background-color);
}

/* ===== Cards ===== */
.card {
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.96), rgba(26, 26, 26, 0.98));
    border-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border-radius: 1.15rem;
    box-shadow: var(--shadow-soft);
}

/* ===== Tables ===== */
.table {
    --bs-table-color: #FFFFFF;
    --bs-table-striped-color: #FFFFFF;
    --bs-table-hover-color: #FFFFFF;
    --bs-table-border-color: rgba(255, 255, 255, 0.15);
    --bs-table-striped-bg: rgba(255, 255, 255, 0.04);
    color: #FFFFFF;
}

.table-responsive {
    background: var(--card-background);
}

/* Add subtle row separators instead of striping for better readability */
.table > tbody > tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ===== Alerts ===== */
.alert {
    background: linear-gradient(180deg, rgba(42, 42, 42, 0.96), rgba(26, 26, 26, 0.98));
    border-color: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border-radius: 1rem;
    box-shadow: var(--shadow-soft);
}

.alert-danger {
    background-color: rgba(220, 20, 60, 0.2);
    border-color: var(--accent-color);
}

.alert-info {
    background-color: rgba(0, 123, 255, 0.2);
    border-color: var(--primary-color);
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
}