/* Wareflow theme for Filament admin — tokens from resources/scss (Vuexy-based) */

:root {
    --wf-body-bg: #f8f8f8;
    --wf-card-radius: 0.357rem;
    --wf-heading: #5e5873;
    --wf-text: #626262;
    --wf-table-head-bg: #f3f2f7;
    --wf-border: #dbdade;
}

/* Base font size 14px like main app (scales all rem-based sizing) */
html {
    font-size: 14px;
}

/* Montserrat everywhere (fallback in case panel font setting is overridden) */
body,
.fi-body {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
}

/* Body background like main app */
.fi-body {
    background-color: var(--wf-body-bg);
    color: var(--wf-text);
}

/* White topbar with the main app's subtle shadow */
.fi-topbar nav {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(165, 163, 174, 0.3);
}

/* Headings color like main app */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    color: var(--wf-heading);
}

/* Cards/sections: Vuexy radius and shadow */
.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
    border-radius: var(--wf-card-radius);
    box-shadow: 0 4px 18px rgba(75, 70, 92, 0.1);
}

/* Table header like main app data tables */
.fi-ta-header-cell {
    background-color: var(--wf-table-head-bg);
    color: var(--wf-heading);
    font-size: 0.857rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Dark mode: light header bg + dark heading text becomes white-on-white; override both */
.dark .fi-ta-header-cell {
    background-color: rgb(31 41 55);
    color: rgb(229 231 235);
}

/* Inputs and buttons radius */
.fi-input-wrp,
.fi-btn,
.fi-select-input,
.fi-dropdown-panel {
    border-radius: 0.358rem;
}

/* Main text color #626262 across content elements */
.fi-ta-text,
.fi-ta-cell,
.fi-in-text,
.fi-input,
.fi-sidebar-item-label,
.fi-dropdown-list-item-label,
.fi-tabs-item-label,
.fi-fo-field-wrp-label .fi-fo-field-wrp-label-text {
    color: var(--wf-text);
}