/* =========================================================
   Juwelier Häge CRM – Custom Admin Theme
   Bronze (#caba9c) auf tiefem Schwarz, Cormorant Garamond
   für Überschriften, Inter für Body.
   ========================================================= */

:root {
    --jh-bronze:        #caba9c;
    --jh-bronze-soft:   #ddd0b8;
    --jh-bronze-deep:   #a8946f;
    --jh-black:         #0a0a0a;
    --jh-charcoal:      #14140f;
    --jh-line:          rgba(202, 186, 156, 0.18);
}

/* ---------- Typografie ---------- */
body, .fi-body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

.fi-page-heading,
.fi-section-header-heading,
.fi-header-heading,
.fi-modal-heading,
.fi-h1, .fi-h2 {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
}

/* Brand-Name oben in Sidebar */
.fi-sidebar-header .fi-logo {
    letter-spacing: 1.5px;
}

/* ---------- Sidebar – tiefes Schwarz mit Bronze-Akzenten ---------- */
.fi-sidebar,
.fi-sidebar-nav {
    background-color: var(--jh-black) !important;
    border-right: 1px solid var(--jh-line) !important;
}

.fi-sidebar-group-label {
    color: var(--jh-bronze) !important;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.7;
}

.fi-sidebar-item-button {
    border-radius: 0 !important;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
}

.fi-sidebar-item-button:hover {
    background-color: rgba(202, 186, 156, 0.06) !important;
    color: var(--jh-bronze-soft) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button,
.fi-sidebar-item-button[aria-current="page"] {
    background-color: rgba(202, 186, 156, 0.1) !important;
    color: var(--jh-bronze) !important;
    border-left-color: var(--jh-bronze) !important;
}

/* ---------- Topbar ---------- */
.fi-topbar {
    background-color: var(--jh-charcoal) !important;
    border-bottom: 1px solid var(--jh-line) !important;
}

/* ---------- Buttons – Bronze-Akzent mit subtilem Verlauf ---------- */
.fi-btn-color-primary {
    background-image: linear-gradient(135deg, var(--jh-bronze-soft) 0%, var(--jh-bronze) 50%, var(--jh-bronze-deep) 100%) !important;
    color: var(--jh-black) !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fi-btn-color-primary:hover {
    filter: brightness(1.07);
    box-shadow: 0 2px 6px rgba(202, 186, 156, 0.25);
}

/* ---------- Cards / Sections ---------- */
.fi-section, .fi-fo-section {
    border: 1px solid var(--jh-line) !important;
    border-radius: 6px !important;
    background-color: var(--jh-charcoal) !important;
}

.fi-section-header {
    border-bottom: 1px solid var(--jh-line) !important;
}

/* ---------- Tabellen ---------- */
.fi-ta-table thead {
    background-color: var(--jh-charcoal) !important;
    border-bottom: 1px solid var(--jh-line) !important;
}

.fi-ta-header-cell {
    color: var(--jh-bronze) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
}

.fi-ta-row:hover {
    background-color: rgba(202, 186, 156, 0.04) !important;
}

/* ---------- Tabs unter Headlines ---------- */
.fi-tabs-item[aria-selected="true"] {
    border-bottom-color: var(--jh-bronze) !important;
    color: var(--jh-bronze) !important;
}

/* ---------- Stat-Widgets ---------- */
.fi-wi-stats-overview-stat {
    border: 1px solid var(--jh-line) !important;
    background: linear-gradient(155deg, var(--jh-charcoal) 0%, #1a1a14 100%) !important;
}

.fi-wi-stats-overview-stat-value {
    font-family: 'Cormorant Garamond', serif !important;
    font-weight: 600 !important;
    font-size: 2rem !important;
    color: var(--jh-bronze-soft) !important;
}

/* ---------- Login-Seite ---------- */
.fi-simple-page {
    background:
        radial-gradient(ellipse at top, rgba(202, 186, 156, 0.08), transparent 60%),
        var(--jh-black) !important;
}

.fi-simple-main {
    border: 1px solid var(--jh-line) !important;
    background-color: var(--jh-charcoal) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- Sidebar-Header / Logo: mehr Atemluft ---------- */
.fi-sidebar-header {
    border-bottom: 1px solid var(--jh-line) !important;
    padding-top: 1.5rem !important;
    padding-bottom: 1rem !important;
    min-height: 5.5rem;
}

.fi-sidebar-header .fi-logo,
.fi-sidebar-header img {
    max-height: 3rem !important;
    height: 3rem !important;
}

/* ---------- Topbar-Höhe für Datum/Uhr-Widget ---------- */
.fi-topbar > div,
.fi-topbar nav {
    min-height: 4rem;
}

#jh-clock {
    /* leichtes Tracking, vertikal mittig */
    align-self: center;
}

/* ---------- Notification-Indikator ---------- */
.fi-topbar-database-notifications-trigger:hover {
    color: var(--jh-bronze) !important;
}