/*
    APP.CSS — UTILITÁRIOS GLOBAIS
    Só regras utilitárias compartilhadas (scrollbar, labels, tabs, classes
    tailwind-ish). Tokens/variáveis de tema ficam em variables.css; hacks de
    páginas específicas em page-overrides.css.
*/

/* Scrollbars */
::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}



/* Expert Labels */
.expert-label {
    font-family: 'Inter', sans-serif; /* Fallback will handle if not loaded */
    font-size: 11px;
    font-weight: 800;
    color: #64748b; /* slate-500 */
    text-transform: uppercase;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.expert-field {
    border: 0;
    outline: none;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    color: #0f172a;
    width: 100%;
}

/* Clean Tabs Style */
.clean-tabs .mud-tabs-toolbar {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: 2px solid #e2e8f0; /* thicker line */
    min-height: 36px !important;
    height: 36px !important;
}

.clean-tabs .mud-tab {
    min-width: unset !important;
    padding: 0 16px !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    font-size: 12px !important;
    letter-spacing: 0.05em;
    color: #94a3b8 !important; /* slate-400 */
    height: 36px !important;
    min-height: 36px !important;
}

.clean-tabs .mud-tab-active {
    color: #2563eb !important; /* blue-600 */
    border-bottom: 2px solid #2563eb;
    background-color: transparent !important;
}

.clean-tabs .mud-tabs-panels {
    background-color: transparent !important;
    padding: 0 !important;
    height: 100%;
}

/* Common Tailwind-ish Utilities */
.bg-slate-50 { background-color: #f8fafc; }
.bg-white { background-color: #ffffff; }
.text-slate-700 { color: #334155; }
.border-slate-300 { border-color: #cbd5e1; }
.rounded { border-radius: 4px; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }

/* Utility Class for Highlight Panels (variáveis definidas em variables.css) */
.highlight-panel {
    background-color: var(--custom-highlight-tint) !important;
    border: 1px solid var(--custom-highlight-border-soft) !important;
}