/* ============================================================
   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 {
    /* ── BRAND ───────────────────────────────────────── */
    --magenta:      #E40046;
    --charcoal:     #121212;
    --indigo-ink:   #140C2E;
    --brand-indigo: #352863;
    --ghost:        #F8F9FA;
    --paper:        #F7F4FB;
    --paper-2:      #ECE6F2;
    --slate:        #6E6589;
    --rule:         #D9D1E2;
    /* ── FUNCTIONAL ─────────────────────────────────── */
    --teal:         #79C6C7;
    --tier-low:     #90B5DF;
    --tier-med:     #F2E0A6;
    --tier-high:    #F1B07E;
    /* ── GRADIENT ────────────────────────────────────── */
    --grad:         linear-gradient(135deg, #E40046 0%, #9A1A55 45%, #352863 100%);
    /* ── TYPOGRAPHY ────────────────────────────────────── */
    --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(--brand-indigo) !important;   /* raised dark surface */
    border-right: none !important;
}
.brand-link, .brand-text, .sidebar-brand, a.brand-link { display: none !important; }
.main-sidebar::before { display: none; }

/* Kill all reserved space from AdminLTE brand area */
.main-sidebar .brand-link,
.main-sidebar a.brand-link {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}

/* Force brand block to hug the logo tightly */
#fidar-brand-block {
    background: transparent !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    border: none !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 0 !important;
    text-align: center !important;
    overflow: hidden !important;
}
#fidar-brand-block a {
    display: inline-block !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}
#fidar-brand-block img {
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    mix-blend-mode: screen !important;
}

/* Remove all top spacing from sidebar and its OverlayScrollbar wrappers */
.main-sidebar {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.main-sidebar .sidebar {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.main-sidebar .os-host,
.main-sidebar .os-viewport,
.main-sidebar .os-content,
.main-sidebar .os-padding {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 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: var(--indigo-ink) !important;   /* deepest dark for header */
    border-bottom: 1px solid rgba(255,255,255,0.08) !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;
    background-color: var(--paper) !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;
}
h2, .section-title { font-size: 22px !important; font-weight: 500 !important; }

/* ── TILE / CATALOG ICONS — ensure full visibility ───────── */
.content-wrapper img,
.content-wrapper svg,
.content-wrapper .icon img,
.content-wrapper .card img,
.content-wrapper .tile img,
.content-wrapper .catalog-item img,
.content-wrapper [class*="icon"] img,
.content-wrapper [class*="Icon"] img {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
}
.content-wrapper svg,
.content-wrapper [class*="icon"] svg,
.content-wrapper [class*="Icon"] svg {
    color: var(--brand-indigo) !important;
    fill: currentColor;
    opacity: 1 !important;
}

/* Preserve original icon colors */
.content-wrapper svg,
.content-wrapper i,
.content-wrapper [class*="Icon"],
.content-wrapper [class*="icon"],
.content-wrapper .fa,
.content-wrapper .fas,
.content-wrapper .far,
.content-wrapper .fab {
    color: unset !important;
    fill: unset !important;
}

/* ── DASHBOARD SECTION HEADERS ───────────────────────────── */
.content-wrapper .card-header,
.content-wrapper .box-header,
.card-header,
.box-header {
    background: var(--paper) !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: 500 !important;                    /* Section/H2 weight */
    font-size: 22px !important;                     /* Section/H2 22px  */
    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.6875rem !important;               /* eyebrow: 11px */
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;             /* eyebrow tracking */
    text-transform: uppercase !important;
    color: var(--slate) !important;
    border-bottom: 1px solid var(--rule) !important;
    background: var(--paper-2) !important;         /* paper-2 for table header shading */
}
.table tbody td {
    vertical-align: middle !important;
    padding: 8px 12px !important;
    font-family: var(--font-body) !important;
    font-size: 0.875rem !important;                /* 14px body in tables */
    border-top: 1px solid var(--rule) !important;
    color: var(--charcoal) !important;
}
.table tbody tr:nth-child(even) td {
    background: var(--paper-2) !important;         /* paper-2 row shading */
}

/* ── HIDE SUBSCRIPTION NOTICE & FOOTER ──────────────────── */
.subscription-message,
[class*="subscriptionMessage"],
.main-footer,
footer.main-footer {
    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;
    padding: 12px 16px !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: 6px;
    height: auto !important;
    min-height: unset;
    padding: 0 !important;
    margin: 0 !important;
}
.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;
}
/* ===== Force sidebar logo/header to be compact ===== */

.main-sidebar .brand-link,
.main-sidebar .brand-link-custom {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-sidebar #fidar-brand-block img {
    mix-blend-mode: screen !important;
}

/* Remove any top spacing in sidebar */

.main-sidebar .sidebar {
    padding-top: 0 !important;
}

.main-sidebar .os-content {
    padding-top: 0 !important;
}

/* Hide empty branding containers */

.main-sidebar .brand-text {
    display: none !important;
}