@font-face {
    font-family: 'Calibri';
    src: url('../fonts/calibri.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriB';
    src: url('../fonts/calibrib.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.app-header-title,
th,
label,
.show-entries-label {
    font-family: 'CalibriB', sans-serif;
}

:root {
    --primary-color: #062E52;
    --secondary-color: #FF5C0A;
    --accent-color: #6366f1;
    --bg-color: #f4f6f8;
    --text-color: #111827;
    --text-heading: #062E52;
    --text-light: #f8fafc;

    --panel-border: #e5e7eb;
    --header-height: 40px;
    --footer-height: 30px;

    --card-shadow: rgba(0, 0, 0, 0.08);
    --button-hover-shadow: rgba(0, 0, 0, 0.1);
    --button-background: #26549E;
    --button-hover-background: #FF5C0A;
    --header-footer-bg: #26549E;

    /* Status Colors */
    --status-active: #BCFADD;
    --status-inactive: #D3E3DC;
    --status-suspended: #F0D6B1;
    --status-deleted: #F59E93;

    /* LLM Type Colors */
    --llm-google-bg: #E6F6F2;
    --llm-google-text: #0E775F;
    --llm-openai-bg: #E8F0FE;
    --llm-openai-text: #1A73E8;
    --llm-ollama-bg: #FFECE0;
    --llm-ollama-text: #3c2207;

    /* Role Colors */
    --role-judge: #BFF5F2;
    --role-member: #BFF5F2;
    --role-encoder: #049e47;
    --role-admin: #4A94E3;

    /* Consistent Line Percentage & Progress Colors based on Value */
    --pct-excellent: #11532f; /* >= 90%: Dark Forest Green */
    --pct-good:      #059669; /* 75-89%: Emerald Green */
    --pct-moderate:  #2563eb; /* 50-74%: Royal Blue */
    --pct-warning:   #d97706; /* 25-49%: Amber / Orange */
    --pct-low:       #dc2626; /* < 25%: Crimson Red */
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Calibri', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
}




#spa-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-color, #FF5C0A), var(--primary-color, #062E52));
    z-index: 9999;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(255, 92, 10, 0.6);
    transition: width 0.25s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

#spa-loader.loading {
    opacity: 1;
    width: 75%;
    transition: width 2.5s cubic-bezier(0.1, 0.3, 0.3, 1);
}

#spa-loader.done {
    width: 100% !important;
    transition: width 0.2s ease, opacity 0.4s ease 0.15s;
    opacity: 0;
}

.coderstation-fx {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    font-family: 'CalibriB', sans-serif;
}

/* User Level and Status Badge Classes */
.coderstation-badge {
    border-radius: 6px !important;
    padding: 2px 10px;
    font-weight: 600;
    color: var(--text-color);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: inline-block;
    font-size: 0.85rem;
    text-align: left !important;
    min-width: 110px;
    /* Make all badges equal width */
}

.badge-role-judge,
.badge-role-member {
    background-color: var(--role-judge) !important;
    color: var(--primary-color) !important;
}

.badge-role-encoder,
.badge-role-data-encoder {
    background-color: var(--role-encoder) !important;
    color: var(--text-light) !important;
}

.badge-role-admin {
    background-color: var(--role-admin) !important;
    color: var(--text-light) !important;
}

.badge-role-guest {
    background-color: #F0D6B1 !important;
    color: #78350f !important;
}

.badge-status-active {
    background-color: var(--status-active) !important;
    color: #064e3b !important;
}

.badge-status-inactive {
    background-color: var(--status-inactive) !important;
    color: #334155 !important;
}

.badge-status-suspended {
    background-color: var(--status-suspended) !important;
    color: #78350f !important;
}

.badge-status-deleted {
    background-color: var(--status-deleted) !important;
    color: #7f1d1d !important;
}

.badge-status-success {
    background-color: #BBFCD7 !important;
    color: #11532f !important;
}

.badge-status-failed {
    background-color: #FCC6BB !important;
    color: #6a1608 !important;
}

.badge-llm-google,
.badge-llm-google-gemini {
    background-color: var(--llm-google-bg) !important;
    color: var(--llm-google-text) !important;
}

.badge-llm-openai {
    background-color: var(--llm-openai-bg) !important;
    color: var(--llm-openai-text) !important;
}

.badge-llm-ollama,
.badge-llm-ollama-local {
    background-color: var(--llm-ollama-bg) !important;
    color: var(--llm-ollama-text) !important;
}

.badge-llm-ollama-cloud {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

.badge-llm-nvidia {
    background-color: #dcfce7 !important;
    color: #166534 !important;
}

.badge-llm-openrouter {
    background-color: #e0f2fe !important;
    color: #0369a1 !important;
}

.badge-llm-anthropic {
    background-color: #fed7aa !important;
    color: #9a3412 !important;
}

.badge-llm-deepseek {
    background-color: #dbeafe !important;
    color: #1e40af !important;
}

.badge-llm-mistral {
    background-color: #fef08a !important;
    color: #854d0e !important;
}

.badge-llm-sealion {
    background-color: #ccfbf1 !important;
    color: #115e59 !important;
}

.badge-llm-baseten {
    background-color: #fce7f3 !important;
    color: #9d174d !important;
}

.badge-llm-cloudflare {
    background-color: #ffedd5 !important;
    color: #c2410c !important;
}

.badge-llm-groq {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
}

.badge-llm-cohere {
    background-color: #e0e7ff !important;
    color: #3730a3 !important;
}

.badge-llm-together {
    background-color: #ede9fe !important;
    color: #5b21b6 !important;
}

.badge-llm-default,
.badge-llm-general {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}

/* Usecase Badges */
.badge-llm-embeddings {
    background-color: #e8ef9b !important;
    color: #241c01 !important;
}

.badge-llm-reasoning {
    background-color: #deedfc !important;
    color: #0e4792 !important;
}

.badge-llm-translation {
    background-color: #bafbd8 !important;
    color: #013e06 !important;
}

.badge-llm-coding {
    background-color: #ede9fe !important;
    color: #5b21b6 !important;
}

.badge-llm-vision {
    background-color: #ccfbf1 !important;
    color: #094743 !important;
}

.badge-llm-chat {
    background-color: #fef3c7 !important;
    color: #92400e !important;
}

.badge-llm-agent {
    background-color: #fae8ff !important;
    color: #86198f !important;
}

/* Universal subtle border for standard badge palette */
.badge-role-judge,
.badge-role-member,
.badge-role-encoder,
.badge-role-data-encoder,
.badge-role-admin,
.badge-role-guest,
.badge-status-active,
.badge-status-inactive,
.badge-status-suspended,
.badge-status-deleted,
.badge-status-success,
.badge-status-failed,
.badge-llm-google,
.badge-llm-google-gemini,
.badge-llm-openai,
.badge-llm-ollama,
.badge-llm-ollama-local,
.badge-llm-ollama-cloud,
.badge-llm-nvidia,
.badge-llm-openrouter,
.badge-llm-anthropic,
.badge-llm-deepseek,
.badge-llm-mistral,
.badge-llm-sealion,
.badge-llm-baseten,
.badge-llm-cloudflare,
.badge-llm-groq,
.badge-llm-cohere,
.badge-llm-together,
.badge-llm-default,
.badge-llm-general,
.badge-llm-embeddings,
.badge-llm-reasoning,
.badge-llm-translation,
.badge-llm-coding,
.badge-llm-vision,
.badge-llm-chat,
.badge-llm-agent {
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

/* Theme Brand Badges */
.badge-theme-primary {
    background-color: rgba(6, 46, 82, 0.08) !important;
    color: var(--primary-color) !important;
    border: 1px solid rgba(6, 46, 82, 0.2) !important;
}

.badge-theme-secondary {
    background-color: rgba(255, 92, 10, 0.1) !important;
    color: var(--secondary-color) !important;
    border: 1px solid rgba(255, 92, 10, 0.25) !important;
}

/* === Consistent Line Percentage & Track Styling === */
.coderstation-pct-track {
    width: 100%;
    height: 6px;
    background-color: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.coderstation-pct-bar {
    height: 100%;
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.pct-color-excellent { color: var(--pct-excellent) !important; background-color: var(--pct-excellent) !important; }
.pct-color-good      { color: var(--pct-good) !important;      background-color: var(--pct-good) !important; }
.pct-color-moderate  { color: var(--pct-moderate) !important;  background-color: var(--pct-moderate) !important; }
.pct-color-warning   { color: var(--pct-warning) !important;   background-color: var(--pct-warning) !important; }
.pct-color-low       { color: var(--pct-low) !important;       background-color: var(--pct-low) !important; }

.pct-text-excellent { color: var(--pct-excellent) !important; }
.pct-text-good      { color: var(--pct-good) !important; }
.pct-text-moderate  { color: var(--pct-moderate) !important; }
.pct-text-warning   { color: var(--pct-warning) !important; }
.pct-text-low       { color: var(--pct-low) !important; }

/* === Universal Module Page Layout === */
.user-manager-container,
.apis-manager-container,
.apis-playground-container,
#apiStatusLogsModule,
#chatContainer {
    flex-direction: column !important;
    box-sizing: border-box !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    transition: opacity 0.15s ease;
}

/* SPA page visibility helpers — declared AFTER Bootstrap so they always win */
.spa-module-hidden {
    display: none !important;
}

.spa-module-visible {
    display: flex !important;
}

/* Table Modules: Never scroll outer page; table card fills remaining height */
#userManagerModule,
#onlineUsersModule,
#userLogsModule,
#myJournalLogsModule,
#submittedProposalModule,
#reviewSubmittedProposalModule,
#approvedProposalModule,
#myProposalModule,
#llmProviderModule,
#llmModelModule,
#apisManagerModule,
#apiStatusLogsModule,
#manageDocumentsModule {
    overflow: hidden !important;
    padding-bottom: 16px !important;
}

/* The table container must be positioned so the absolute card can fill it */
#usersTableContainer,
#onlineUsersTableContainer,
#userLogsTableContainer,
#myJournalLogsTableContainer,
#submittedProposalsTableContainer,
#reviewProposalsTableContainer,
#approvedProposalsTableContainer,
#myProposalsTableContainer,
#llmProviderTableContainer,
#llmModelTableContainer,
#apisTableContainer,
#apiStatusLogsTableContainer {
    flex: 1 1 auto;
    position: relative;
    min-height: 0;
}

/* Proposal Status Badges */
.badge-proposal-pending {
    background-color: #FEF3C7 !important;
    color: #92400E !important;
    border: 1px solid #FDE68A !important;
}

.badge-proposal-approved {
    background-color: #D1FAE5 !important;
    color: #065F46 !important;
    border: 1px solid #A7F3D0 !important;
}

.badge-proposal-reject,
.badge-proposal-disapproved {
    background-color: #FEE2E2 !important;
    color: #991B1B !important;
    border: 1px solid #FECACA !important;
}

/* Scrollable Modules: smoothly scroll inside their container without affecting header/footer */
#dashboardModule,
#aboutThesisModule,
#aboutLlmRouterModule,
#aboutCoderstationModule,
#aboutAuthorModule,
#apiAnalyticsReportModule,
#providerAnalyticsModule,
#modelAnalyticsModule,
#userAnalyticsModule,
#databaseAnalyticsModule {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding-bottom: 24px !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) rgba(15, 23, 42, 0.08);
}

/* === Enhanced Terminal & Response Box (APIs Manager & APIs Playground) === */
.terminal-container {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px -2px rgba(6, 46, 82, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) !important;
}

.terminal-header {
    background: linear-gradient(90deg, #f8fafc 0%, #edf2f7 100%) !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.terminal-header span,
.terminal-header .terminal-title {
    font-family: 'CalibriB', sans-serif !important;
    font-size: 0.85rem !important;
    color: var(--primary-color, #062E52) !important;
    letter-spacing: 0.5px;
}

#testResponseBox,
.pg-response-box,
#pgResponseBox {
    width: 100%;
    resize: none;
    background-color: #ffffff !important;
    border: none !important;
    outline: none !important;
    font-family: 'Consolas', 'Cascadia Code', 'Fira Code', 'Monaco', monospace !important;
    font-size: 0.94rem !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    line-height: 1.75 !important;
    text-shadow: none !important;
    letter-spacing: 0.2px;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

#testResponseBox::placeholder,
.pg-response-box::placeholder,
#pgResponseBox::placeholder {
    color: #94a3b8 !important;
    font-style: italic;
    opacity: 0.85 !important;
}

/* Custom Scrollbar for Response Boxes */
#testResponseBox::-webkit-scrollbar,
.pg-response-box::-webkit-scrollbar,
#pgResponseBox::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
}

#testResponseBox::-webkit-scrollbar-track,
.pg-response-box::-webkit-scrollbar-track,
#pgResponseBox::-webkit-scrollbar-track {
    background: #f8fafc !important;
    border-radius: 4px;
}

#testResponseBox::-webkit-scrollbar-thumb,
.pg-response-box::-webkit-scrollbar-thumb,
#pgResponseBox::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px;
}

#testResponseBox::-webkit-scrollbar-thumb:hover,
.pg-response-box::-webkit-scrollbar-thumb:hover,
#pgResponseBox::-webkit-scrollbar-thumb:hover {
    background: var(--button-background, #26549E) !important;
}

#testTimeCounter,
.pg-progress-timer {
    font-size: 0.8rem !important;
    color: #062E52 !important;
    font-family: 'Consolas', monospace !important;
    font-weight: 600 !important;
    background: #e2e8f0 !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 3px 10px !important;
}

/* ==========================================================================
   Reusable Card / Container Accent - Secondary Color Top Border & Hover Effect
   ========================================================================== */
.card-top-secondary,
.card-border-top-secondary {
    border-top: 3.5px solid var(--secondary-color, #FF5C0A) !important;
    transition: border-top-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                border-top-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card-top-secondary:hover:not(.no-hover),
.card-border-top-secondary:hover:not(.no-hover),
.coderstation-card.card-top-secondary:hover:not(.no-hover),
.card.card-top-secondary:hover:not(.no-hover) {
    border-top: 4.5px solid var(--secondary-color, #FF5C0A) !important;
    box-shadow: 0 -3px 14px rgba(255, 92, 10, 0.4), 0 10px 25px rgba(0, 0, 0, 0.08) !important;
}

.coderstation-card.no-hover.card-top-secondary:hover,
.coderstation-card.no-hover:hover,
.card.no-hover.card-top-secondary:hover,
.card.no-hover:hover,
#aboutThesisModule .card,
#aboutThesisModule .card:hover,
#aboutLlmRouterModule .card,
#aboutLlmRouterModule .card:hover,
#aboutCoderstationModule .card,
#aboutCoderstationModule .card:hover,
#aboutAuthorModule .card,
#aboutAuthorModule .card:hover {
    transform: none !important;
    border-top: 3.5px solid var(--secondary-color, #FF5C0A) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
    outline: none !important;
}


/* ==========================================================================
   Universal Table Column Badge Styling (Entire Program):
   - Equal 4px horizontal padding (padding-left: 4px, padding-right: 4px)
   - Inline-flex centered alignment with no wrapping
   - Border-box sizing for consistent per-column widths
   ========================================================================== */
table tbody td .badge,
table tbody td .coderstation-badge,
table tbody td [class*="badge-"],
.table tbody td .badge,
.table tbody td .coderstation-badge,
.table tbody td [class*="badge-"],
.coderstation-table tbody td .badge,
.coderstation-table tbody td .coderstation-badge,
.coderstation-table tbody td [class*="badge-"] {
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* In table cells, allow coderstation badges to be sized per column rather than static 110px */
table tbody td .coderstation-badge,
.table tbody td .coderstation-badge,
.coderstation-table tbody td .coderstation-badge {
    text-align: center !important;
    min-width: 0 !important;
}

/* ==========================================================================
   Card Custom Footer & Left-aligned Captions
   ========================================================================== */
.coderstation-card .card-custom-footer,
.card-custom-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: left !important;
}

/* ==========================================================================
   Global Icon & Caption Spacing Across All Program Components
   ========================================================================== */
.btn i + span,
button i + span,
a i + span,
label i + span,
.badge i + span,
.coderstation-badge i + span,
.toolbar-title i + h6,
.toolbar-title i + h5,
.proposal-panel-title i + span,
.narrative-field-label i + span,
.review-narrative-header i + span,
.review-meta-label i + span,
.kpi-card-subtitle i + span,
.sidebar-accordion-wrapper .nav-link i + span,
.sidebar-accordion-wrapper .accordion-button i + span {
    margin-left: 6px;
}

.btn span + i,
a span + i,
.kpi-card-link i {
    margin-left: 6px;
}

/* ==========================================================================
   Universal Table Column Icon & Data Spacing
   Ensures clear separation between icons and text/data inside table cells
   ========================================================================== */
table tbody td i:not(:only-child),
.table tbody td i:not(:only-child),
.coderstationtable tbody td i:not(:only-child),
.coderstation-table tbody td i:not(:only-child),
table thead th i:not(:only-child),
.table thead th i:not(:only-child),
.coderstationtable thead th i:not(:only-child),
.coderstation-table thead th i:not(:only-child) {
    margin-right: 8px !important;
}

table tbody td .badge i:not(:only-child),
table tbody td .coderstation-badge i:not(:only-child),
.table tbody td .badge i:not(:only-child),
.table tbody td .coderstation-badge i:not(:only-child),
.coderstationtable tbody td .badge i:not(:only-child),
.coderstationtable tbody td .coderstation-badge i:not(:only-child),
.coderstation-table tbody td .badge i:not(:only-child),
.coderstation-table tbody td .coderstation-badge i:not(:only-child) {
    margin-right: 6px !important;
}

/* Support fractional spacing utilities used across components */
.gap-1\.5 {
    gap: 0.45rem !important;
}

.me-1\.5 {
    margin-right: 0.45rem !important;
}

.ms-1\.5 {
    margin-left: 0.45rem !important;
}

/* Floating input / combobox / calendar icon-to-caption spacing */
.coderstation-floating-textbox .floating-input,
.coderstation-floating-combobox .floating-select,
.coderstation-floating-calendar .floating-input {
    padding-left: 2.95rem;
}

.coderstation-floating-textbox .floating-label,
.coderstation-floating-combobox .floating-label,
.coderstation-floating-calendar .floating-label {
    left: 2.95rem;
}

.coderstation-card .card-custom-footer:not(.justify-content-end) > span:first-child:not(:last-child),
.card-custom-footer:not(.justify-content-end) > span:first-child:not(:last-child),
.coderstation-card .card-custom-footer .footer-caption,
.card-custom-footer .footer-caption {
    margin-right: auto !important;
    text-align: left !important;
    display: inline-flex !important;
    align-items: center !important;
}

.coderstation-card .card-custom-footer > span:last-child:not(:first-child),
.card-custom-footer > span:last-child:not(:first-child),
.card-custom-footer.justify-content-end,
.card-custom-footer.justify-content-end > span,
#paProviderCombinedFooterSummary {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

.card-custom-footer.justify-content-end {
    justify-content: flex-end !important;
}

/* Platform Domain Leaderboards Badges */
#execCombinedLeaderboardsCard .badge,
#execTopProvidersList .badge,
#execTopModelsList .badge,
#execTopUsersList .badge {
    padding-left: 4px !important;
    padding-right: 4px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Universal Container Safety: Remove left border highlight/accent effects across all containers */
.coderstation-card,
.card,
.modal-content,
.proposal-inner-panel,
.dashboard-hero-banner,
.glass-card,
.cst-glass-card {
    border-left-width: 1px !important;
}

.coderstation-card.border-0,
.card.border-0 {
    border-left: none !important;
}