/* CBD LOGIN — MOSHIO | CBD ADMIN PORTAL
   Premium white / red (#D6001C) / black glass enterprise UI */

:root {
    --cbd-primary: #D6001C;
    --cbd-primary-hover: #b80018;
    --cbd-black: #0a0a0a;
    --cbd-glass: rgba(255, 255, 255, 0.78);
    --cbd-glass-dark: rgba(12, 12, 12, 0.82);
    --cbd-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    --cbd-shadow-red: 0 8px 32px rgba(214, 0, 28, 0.12);
    --cbd-radius: 16px;
}

/* App shell */
.fi-body {
    background:
        radial-gradient(1200px 600px at 10% -10%, rgba(214, 0, 28, 0.08), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, rgba(0, 0, 0, 0.04), transparent 50%),
        linear-gradient(160deg, #ffffff 0%, #f7f7f8 45%, #fef2f2 100%) !important;
}

.dark .fi-body {
    background:
        radial-gradient(1000px 500px at 0% 0%, rgba(214, 0, 28, 0.18), transparent 55%),
        linear-gradient(160deg, #050505 0%, #0f0f0f 50%, #1a0508 100%) !important;
}

/* Glass sidebar / topbar */
.fi-sidebar {
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    background: var(--cbd-glass) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.03);
}

.dark .fi-sidebar {
    background: var(--cbd-glass-dark) !important;
    border-right-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-topbar {
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    background: var(--cbd-glass) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

.dark .fi-topbar {
    background: var(--cbd-glass-dark) !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* Brand mark */
.fi-logo,
.fi-simple-header .fi-logo {
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    color: var(--cbd-black) !important;
}

.fi-logo span,
.fi-simple-header .fi-logo span {
    background: linear-gradient(90deg, var(--cbd-black) 0%, var(--cbd-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.dark .fi-logo,
.dark .fi-simple-header .fi-logo {
    color: #fff !important;
}

/* Login page styles live in cbd-admin-login.css (scoped to .fi-simple-layout). */

/* Stats / widgets glass */
.fi-wi-stats-overview-stat {
    border-radius: var(--cbd-radius) !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--cbd-shadow) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--cbd-shadow-red) !important;
}

.dark .fi-wi-stats-overview-stat {
    background: rgba(24, 24, 24, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
}

.fi-wi-widget,
.fi-section,
.fi-ta-ctn,
.fi-fo-component-ctn {
    border-radius: var(--cbd-radius) !important;
}

.fi-ta-ctn,
.fi-section {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(8px);
    box-shadow: var(--cbd-shadow);
}

.dark .fi-ta-ctn,
.dark .fi-section {
    background: rgba(20, 20, 20, 0.72);
    border-color: rgba(255, 255, 255, 0.06);
}

/* Primary actions */
.fi-btn-color-primary {
    background-color: var(--cbd-primary) !important;
}

.fi-btn-color-primary:hover {
    background-color: var(--cbd-primary-hover) !important;
}

/* Nav active / hover */
.fi-sidebar-item-button:hover,
.fi-sidebar-item-active .fi-sidebar-item-button {
    background: rgba(214, 0, 28, 0.08) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-label {
    color: var(--cbd-primary) !important;
    font-weight: 600;
}

.fi-sidebar-group-label {
    color: rgba(0, 0, 0, 0.45) !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.68rem !important;
}

.dark .fi-sidebar-group-label {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Page motion */
.fi-main {
    animation: cbdFadeIn 0.4s ease;
}

@keyframes cbdFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Tables */
.fi-ta-row:hover {
    background: rgba(214, 0, 28, 0.03) !important;
}

.fi-ta-header-cell {
    font-weight: 700 !important;
}

/* Input focus ring in brand red */
.fi-input:focus,
.fi-select-input:focus,
textarea.fi-input:focus {
    --tw-ring-color: rgba(214, 0, 28, 0.35) !important;
    border-color: var(--cbd-primary) !important;
}

/* User menu: Profile + Logout as clear separate actions */
.fi-user-menu-items .fi-dropdown-list-item,
.fi-user-menu .fi-dropdown-list-item {
    font-weight: 600;
}

.fi-user-menu-items [data-color="danger"],
.fi-user-menu [data-color="danger"],
.fi-user-menu-items .fi-color-danger,
.fi-user-menu .fi-color-danger,
.fi-dropdown-list-item.fi-color-danger {
    color: #dc2626 !important;
}

.fi-user-menu-items [data-color="danger"] svg,
.fi-user-menu [data-color="danger"] svg,
.fi-dropdown-list-item.fi-color-danger svg {
    color: #dc2626 !important;
}

/* Always-visible Profile + Logout beside avatar (not buried in dropdown) */
.cbd-topbar-user-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-inline-end: 0.5rem;
}

.cbd-topbar-profile-btn,
.cbd-topbar-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cbd-topbar-profile-btn {
    color: #0a0a0a;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.1);
}

.cbd-topbar-profile-btn:hover {
    background: #fff;
    border-color: rgba(214, 0, 28, 0.35);
    color: var(--cbd-primary);
}

.cbd-topbar-logout-btn {
    color: #fff;
    background: var(--cbd-primary);
    border-color: var(--cbd-primary);
    box-shadow: 0 4px 12px rgba(214, 0, 28, 0.2);
}

.cbd-topbar-logout-btn:hover {
    background: var(--cbd-primary-hover);
    border-color: var(--cbd-primary-hover);
}

.cbd-topbar-logout-form {
    display: inline-flex;
    margin: 0;
}

@media (max-width: 640px) {
    .cbd-topbar-user-actions {
        gap: 0.35rem;
        margin-inline-end: 0.35rem;
    }

    .cbd-topbar-profile-btn,
    .cbd-topbar-logout-btn {
        padding: 0.3rem 0.55rem;
        font-size: 0.75rem;
    }
}