/* global-premium.css - Essential Global Premium Overrides */

/* CSS Variables for Ultimate Consistency */
:root {
    --fcom-c-primary: #111827;     /* Almost black */
    --fcom-c-hover: #374151;       /* Dark gray for hover */
    --fcom-c-bg: #F9FAFB;          /* Light gray background */
    --fcom-c-border: #E5E7EB;      /* Clean borders */
    --fcom-c-text: #374151;        /* Primary text */
    --fcom-c-heading: #111827;     /* Headings */
}

/* ========================================================
   1. ELEMENT UI (ADMIN & PORTAL FRAMEWORK) OVERRIDES
   ======================================================== */

/* Primary Buttons */
.el-button--primary, 
.el-button--primary:focus {
    background-color: var(--fcom-c-primary) !important;
    border-color: var(--fcom-c-primary) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.el-button--primary:hover {
    background-color: var(--fcom-c-hover) !important;
    border-color: var(--fcom-c-hover) !important;
}

/* Default Buttons */
.el-button--default,
.el-button {
    border-radius: 6px !important;
    font-weight: 500 !important;
    border-color: var(--fcom-c-border) !important;
    color: var(--fcom-c-text) !important;
}

.el-button--default:hover,
.el-button:hover {
    background-color: var(--fcom-c-bg) !important;
    border-color: #D1D5DB !important;
    color: var(--fcom-c-heading) !important;
}

/* Cards & Containers */
.el-card,
.fcom-admin-card,
.fc-card {
    border: 1px solid var(--fcom-c-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    background-color: #ffffff !important;
    transition: box-shadow 0.2s ease !important;
}

.el-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
}

/* Menu & Navigation */
.el-menu,
.fc-sidebar,
.fcom-sidebar,
.fluent-community-sidebar {
    background-color: var(--fcom-c-bg) !important;
    border-right: 1px solid var(--fcom-c-border) !important;
}

.el-menu-item.is-active,
.fc-nav-item.active {
    background-color: #E5E7EB !important;
    color: var(--fcom-c-heading) !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

.el-menu-item:hover,
.fc-nav-item:hover {
    background-color: #F3F4F6 !important;
    color: var(--fcom-c-heading) !important;
    border-radius: 6px !important;
}

/* Inputs & Form Elements */
.el-input__inner,
.el-textarea__inner,
.fcom-input,
.fc-input {
    background-color: var(--fcom-c-bg) !important;
    border: 1px solid var(--fcom-c-border) !important;
    border-radius: 6px !important;
    color: var(--fcom-c-heading) !important;
}

.el-input__inner:focus,
.el-textarea__inner:focus,
.fcom-input:focus,
.fc-input:focus {
    background-color: #ffffff !important;
    border-color: #9CA3AF !important;
    box-shadow: 0 0 0 1px #9CA3AF !important;
}

/* Tabs */
.el-tabs__item.is-active {
    color: var(--fcom-c-primary) !important;
    font-weight: 600 !important;
}
.el-tabs__active-bar {
    background-color: var(--fcom-c-primary) !important;
}
.el-tabs__item:hover {
    color: var(--fcom-c-hover) !important;
}

/* ========================================================
   2. TAILWIND & GLOBAL OVERRIDES FOR FLUENTCOMMUNITY
   ======================================================== */

#fluent-community-app,
.fc-app-wrapper,
body.fluent-community-page {
    background-color: var(--fcom-c-bg) !important;
}

.bg-white {
    background-color: #ffffff !important;
}

.shadow-sm,
.shadow {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Typography Overrides */
h1, h2, h3, h4, h5, h6,
.el-card__header,
.fc-heading {
    color: var(--fcom-c-heading) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}

/* Badges / Tags */
.el-tag {
    background-color: #F3F4F6 !important;
    border-color: #E5E7EB !important;
    color: var(--fcom-c-text) !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

/* Custom Checkboxes and Radios */
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-radio__input.is-checked .el-radio__inner {
    background-color: var(--fcom-c-primary) !important;
    border-color: var(--fcom-c-primary) !important;
}

.el-checkbox__inner:hover,
.el-radio__inner:hover {
    border-color: var(--fcom-c-primary) !important;
}