/* ============================================================
   Fidar IGA — MidPoint 4.9 UI Branding
   Design System v1.0
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    --magenta:    #E40046;
    --charcoal:   #121212;
    --ghost:      #F8F9FA;
    --paper:      #F7F4FB;
    --rule:       #D9D1E2;
    --slate:      #6E6589;
    --grad:       linear-gradient(135deg, #E40046 0%, #9A1A55 45%, #352863 100%);
    --font-title: 'Poppins', sans-serif;
    --font-body:  'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:  'JetBrains Mono', ui-monospace, monospace;
    --radius-sm:  4px;
    --radius-md:  8px;
}

/* ── SIDEBAR ─────────────────────────────────────────────── */
.main-sidebar,
.main-sidebar .brand-link {
    background-color: var(--charcoal) !important;
    border-right: none !important;
}
.brand-link, .brand-text, .sidebar-brand, a.brand-link { display: none !important; }
.main-sidebar::before { display: none; }

/* Nav links — always white, always visible */
.main-sidebar .nav-sidebar .nav-link,
.main-sidebar .nav-sidebar .nav-link p,
.main-sidebar .nav-sidebar .nav-link span {
    color: rgba(248,249,250,0.85) !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.nav-sidebar .nav-header {
    color: var(--slate) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.6875rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}
.nav-sidebar .nav-item.menu-open > .nav-link,
.nav-sidebar .nav-link:hover {
    color: #ffffff !important;
    background-color: rgba(228,0,70,0.14) !important;
}
.nav-sidebar .nav-link.active {
    background: var(--magenta) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
}
.sidebar                                 { padding-top: 0 !important; }
.os-content, .os-viewport, .os-host     { padding-top: 0 !important; margin-top: 0 !important; }
.user-panel                              { margin-top: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; }
.user-panel .info a, .text-lightblue    { color: var(--ghost) !important; font-family: var(--font-body) !important; }
.sidebar > .os-host > .os-padding > .os-viewport > .os-content > *:first-child,
.sidebar-content > *:first-child        { margin-top: 0 !important; padding-top: 0 !important; }

/* ── TOP HEADER ──────────────────────────────────────────── */
.main-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid var(--rule) !important;
}
.navbar-nav li a[href*="logout"],
[title="Log out"], [title="Logout"], [title="log out"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: var(--magenta) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    background: rgba(228,0,70,0.06) !important;
    border: 1px solid rgba(228,0,70,0.4) !important;
    border-radius: var(--radius-sm) !important;
    padding: 4px 12px !important;
    margin-left: 6px !important;
}
.navbar-nav li a[href*="logout"]:hover { background: rgba(228,0,70,0.15) !important; }

/* ── GLOBAL TYPOGRAPHY ───────────────────────────────────── */
body, .content-wrapper {
    font-family: var(--font-body) !important;
    color: var(--charcoal) !important;
}
h1, h2, h3, h4, .page-title, .content-header h1 {
    font-family: var(--font-title) !important;
    font-weight: 600 !important;
    color: var(--charcoal) !important;
}

/* ── DASHBOARD SECTION HEADERS ───────────────────────────── */
/* White background with magenta left border — clean, no gradient */
.content-wrapper .card-header,
.content-wrapper .box-header,
.card-header,
.box-header {
    background: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid var(--rule) !important;
    border-left: 3px solid var(--magenta) !important;
    font-family: var(--font-title) !important;
    font-weight: 600 !important;
    color: var(--charcoal) !important;
    padding: 10px 16px !important;
}
.content-wrapper .card-header *,
.content-wrapper .box-header *,
.card-header h3, .card-header .card-title,
.box-header h3, .box-header .box-title {
    color: var(--charcoal) !important;
    font-family: var(--font-title) !important;
}

/* ── TABLES ──────────────────────────────────────────────── */
.table thead th {
    vertical-align: middle !important;
    padding: 8px 12px !important;
    white-space: nowrap !important;
    font-family: var(--font-mono) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--slate) !important;
    border-bottom: 1px solid var(--rule) !important;
    background: var(--paper) !important;
}
.table tbody td {
    vertical-align: middle !important;
    padding: 8px 12px !important;
    font-family: var(--font-body) !important;
    border-top: 1px solid var(--rule) !important;
    color: var(--charcoal) !important;
}

/* ── HIDE SUBSCRIPTION NOTICE ────────────────────────────── */
.subscription-message,
[class*="subscriptionMessage"],
.main-footer .pull-right,
.main-footer .float-right {
    display: none !important;
}

/* ── LOGIN PAGE ──────────────────────────────────────────── */
.login-page, .login-box { font-family: var(--font-body) !important; }

/* Login card header — signature gradient (overrides the white rule above) */
.login-box .card-header,
.login-page .card-header {
    background: var(--grad) !important;
    background-image: var(--grad) !important;
    border-left: none !important;
    border-bottom: none !important;
}
.login-box .card-header *, .login-page .card-header * { color: #ffffff !important; }

.card-header h1 {
    font-size: 0 !important;
    color: transparent !important;
    line-height: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: auto !important;
    min-height: 2.5rem;
}
.card-header h1::after {
    content: "Fidar IGA";
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    font-family: var(--font-title) !important;
    color: #ffffff !important;
    visibility: visible !important;
    line-height: normal;
    display: inline-block;
    letter-spacing: 0.04em;
}
.card-header h1:has(#fidar-login-logo)::after { display: none !important; }

.login-box .btn-primary, .login-box button[type="submit"] {
    background: var(--magenta) !important;
    border-color: var(--magenta) !important;
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    border-radius: var(--radius-sm) !important;
}
.login-box .btn-primary:hover {
    background: #c6003e !important;
    border-color: #c6003e !important;
}