@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-member: #BFF5F2;
    --role-encoder: #049e47;
    --role-admin: #4A94E3;
}

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-member {
    background-color: var(--role-member) !important;
    color: var(--primary-color) !important;
}

.badge-role-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;
}

/* LLM Type Badges */
.badge-llm-google {
    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 {
    background-color: var(--llm-ollama-bg) !important;
    color: var(--llm-ollama-text) !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-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-member,
.badge-role-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-openai,
.badge-llm-ollama,
.badge-llm-anthropic,
.badge-llm-deepseek,
.badge-llm-mistral,
.badge-llm-sealion,
.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;
}

/* === 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,
#llmProviderModule,
#apisManagerModule,
#apiStatusLogsModule {
    overflow: hidden !important;
    padding-bottom: 16px !important;
}

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

/* Scrollable Modules: smoothly scroll inside their container without affecting header/footer */
#aboutLlmRouterModule,
#aboutCoderstationModule,
#aboutAuthorModule,
#apiAnalyticsReportModule,
#providerAnalyticsModule,
#modelAnalyticsModule,
#userAnalyticsModule {
    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,
#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;
}

.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;
}