/* Critical CSS for preventing theme flashing */
/* This file contains only the most essential styles needed to prevent FOUC */

:root {
    --primary-color: #dc2626;
    --primary-hover: #b91c1c;
    --secondary-color: #2D2CAE;
    --secondary-hover: #2524a0;
    --accent-color: #dc2626;
    --accent-hover: #b91c1c;
    --success-color: #2D2CAE;
    --warning-color: #d97706;
    --error-color: #dc2626;
    --info-color: #dc2626;
    --white: #ffffff;
    --gray-50: #fafaf9;
    --gray-100: #f5f5f4;
    --gray-200: #e7e5e4;
    --gray-300: #d6d3d1;
    --gray-400: #a8a29e;
    --gray-500: #78716c;
    --gray-600: #57534e;
    --gray-700: #44403c;
    --gray-800: #292524;
    --gray-900: #1c1917;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Prevent theme flashing by setting initial styles */
body {
    font-family: var(--font-family);
    background-color: var(--gray-50);
    color: var(--gray-800);
    margin: 0;
    padding: 0;
    padding-top: 80px;
    visibility: visible;
}

/* Ensure navbar has consistent styling */
.ui.fixed.inverted.menu {
    background: #000000 !important;
}

/* Prevent content flash */
.main-content {
    min-height: calc(100vh - 160px);
    padding: 1.5rem 0;
}

/* Ensure consistent button styling */
.ui.primary.button {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

/* Ensure consistent table styling */
.ui.table th {
    background-color: var(--gray-50);
    color: var(--gray-800) !important;
}

.ui.table td {
    color: var(--gray-800) !important;
}

/* Ensure consistent form styling */
.ui.form input,
.ui.form textarea,
.ui.form select {
    color: var(--gray-800) !important;
}

/* Ensure consistent segment styling */
.ui.segment {
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
}

/* Ensure consistent card styling */
.ui.card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
}

/* Ensure consistent message styling */
.ui.message {
    color: var(--gray-800);
}

/* Ensure consistent dropdown styling */
.ui.dropdown .menu .item {
    color: var(--gray-800) !important;
}

/* Ensure consistent label styling */
.ui.label {
    color: var(--gray-800) !important;
}

/* Ensure consistent statistics styling */
.ui.statistics .statistic .value,
.ui.statistics .statistic .label {
    color: var(--gray-800) !important;
}

.ui.three.statistics .statistic .value {
    color: var(--primary-color) !important;
}

.ui.three.statistics .statistic .label {
    color: var(--gray-700) !important;
}