.c-slate { color: #334155 !important; }
.c-gray { color: #6b7280 !important; }
.c-red { color: #dc2626 !important; }
.c-orange { color: #ea580c !important; }
.c-amber { color: #d97706 !important; }
.c-yellow { color: #ca8a04 !important; }
.c-lime { color: #65a30d !important; }
.c-green { color: #16a34a !important; }
.c-darkgreen { color: #166534 !important; }
.c-teal { color: #0f766e !important; }
.c-cyan { color: #0891b2 !important; }
.c-blue { color: #2563eb !important; }
.c-indigo { color: #4f46e5 !important; }
.c-purple { color: #7c3aed !important; }
.c-pink { color: #db2777 !important; }
.c-rose { color: #e11d48 !important; }

.bg-slate { background-color: #334155 !important; }
.bg-gray { background-color: #6b7280 !important; }
.bg-red { background-color: #dc2626 !important; }
.bg-orange { background-color: #ea580c !important; }
.bg-amber { background-color: #d97706 !important; }
.bg-yellow { background-color: #facc15 !important; color: #1f2937 !important; }
.bg-lime { background-color: #84cc16 !important; color: #1f2937 !important; }
.bg-green { background-color: #16a34a !important; }
.bg-darkgreen { background-color: #166534 !important; }
.bg-teal { background-color: #0f766e !important; }
.bg-cyan { background-color: #0891b2 !important; }
.bg-blue { background-color: #2563eb !important; }
.bg-indigo { background-color: #4f46e5 !important; }
.bg-purple { background-color: #7c3aed !important; }
.bg-pink { background-color: #db2777 !important; }
.bg-rose { background-color: #e11d48 !important; }

.bk-admin-tabs > .fi-tabs {
    gap: .45rem !important;
    padding: .35rem !important;
    border: 1px solid #dbe3ee !important;
    border-radius: .75rem !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .04) !important;
}

.bk-admin-tabs > .fi-tabs .fi-tabs-item {
    min-height: 2.75rem !important;
    border-radius: .55rem !important;
    color: #475569 !important;
    font-weight: 800 !important;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease !important;
}

.bk-admin-tabs > .fi-tabs .fi-tabs-item:hover {
    background: #f8fafc !important;
    color: #0f172a !important;
}

.bk-admin-tabs > .fi-tabs .fi-tabs-item.fi-active {
    background: #fff7ed !important;
    color: #c2410c !important;
    box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .12) !important;
}

.bk-admin-tabs-compact > .fi-tabs {
    box-shadow: none !important;
}

/*
 * Keep the blog editor controls reachable while editing long articles.
 * The Filament top bar is 4rem high, so the toolbar sits directly below it.
 */
.bk-blog-editor {
    overflow: visible !important;
}

.bk-blog-editor .fi-fo-rich-editor-toolbar {
    background: #fff;
    box-shadow: 0 8px 14px -12px rgba(15, 23, 42, .45);
}

.bk-blog-sticky-toolbar-placeholder,
.bk-blog-sticky-actions-placeholder {
    display: none;
}

.bk-blog-sticky-toolbar-placeholder.is-active,
.bk-blog-sticky-actions-placeholder.is-active {
    display: block;
}

.bk-blog-editor .fi-fo-rich-editor-toolbar.is-stuck {
    position: fixed !important;
    top: 4rem;
    z-index: 35;
}

.fi-resource-create-record-page .fi-header-actions-ctn.is-stuck,
.fi-resource-edit-record-page .fi-header-actions-ctn.is-stuck {
    position: fixed !important;
    top: 4rem;
    z-index: 40;
}

.fi-resource-create-record-page .fi-header-actions-ctn > .fi-ac,
.fi-resource-edit-record-page .fi-header-actions-ctn > .fi-ac {
    gap: .75rem;
}

.dark .bk-blog-editor .fi-fo-rich-editor-toolbar {
    background: var(--gray-900);
}

@media (max-width: 639px) {
    .bk-blog-editor .fi-fo-rich-editor-toolbar.is-stuck {
        max-height: calc(100vh - 4rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .fi-resource-create-record-page .fi-header-actions-ctn.is-stuck,
    .fi-resource-edit-record-page .fi-header-actions-ctn.is-stuck {
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .fi-resource-create-record-page .fi-header-actions-ctn > .fi-ac,
    .fi-resource-edit-record-page .fi-header-actions-ctn > .fi-ac {
        justify-content: flex-end;
        min-width: max-content;
    }
}