/* n2c.overrides.css
   Small overrides to fix sidebar background and 'about-info' (version text) styling.
   Loaded after the generated theme CSS so it has higher precedence.
*/

/*
  Enhanced UI overrides for Tiburtius (B2B focused, 2026)
  - Provide accessible contrast for sidebar and about/info block
  - Two small theme variants: default and alternate
  - Responsive behavior: hide detailed info on small screens
*/

:root {
    /* Tie to Bootstrap vars first; fallback literals */
    --n2c-surface:    var(--bs-body-bg, #f5f5f5);
    --n2c-surface-2:  var(--bs-tertiary-bg, #e9ecef);
    --n2c-text:       var(--bs-body-color, #212529);
    --n2c-muted:      var(--bs-secondary-color, rgba(33,37,41,0.65));
    --n2c-icon:       #4f5b66;
    --n2c-accent:     var(--bs-link-color, #0A5959);
    --n2c-divider:    rgba(34,34,34,0.08);
    --n2c-shadow:     rgba(34,34,34,0.06);
    --n2c-sidebar-width: 260px;
}

/* Default light tokens */
.n2c-theme-default, :root {
    --n2c-sidebar-bg: var(--n2c-surface);
    --n2c-sidebar-foreground: var(--n2c-text);
    --n2c-about-bg: transparent;
}

/* Alternate light tokens */
.n2c-theme-alt {
    --n2c-sidebar-bg: var(--n2c-surface-2);
    --n2c-sidebar-foreground: var(--n2c-text);
    --n2c-about-bg: rgba(255,255,255,0.02);
}

/* Dark overrides (when dark theme selected) */
[data-bs-theme="dark"], .dxbl-theme-dark, .dxbl-fluent-dark {
    --n2c-surface:    #181818;
    --n2c-surface-2:  #1f1f1f;
    --n2c-text:       #f0f0f0;
    --n2c-muted:      rgba(240,240,240,0.65);
    --n2c-icon:       #cfd6de;
    --n2c-accent:     #0B7285;
    --n2c-divider:    rgba(255,255,255,0.08);
    --n2c-shadow:     rgba(0,0,0,0.4);
    --n2c-sidebar-bg: #181818;
    --n2c-sidebar-foreground: #f0f0f0;
    --n2c-about-bg: #1f1f1f;
}

/* Apply to sidebar irrespective of body class */
.xaf-sidebar.sidebar {
    background-color: var(--n2c-sidebar-bg) !important;
    color: var(--n2c-sidebar-foreground) !important;
    min-width: var(--n2c-sidebar-width);
}

/* Improve icon visibility in sidebar (DevExpress + FontAwesome) */
.xaf-sidebar.sidebar svg,
.xaf-sidebar.sidebar .dxbl-image,
.xaf-sidebar.sidebar .dxbl-icon,
.xaf-sidebar.sidebar .dxbl-icon-set-default,
.xaf-sidebar.sidebar .dxbl-icon-set-fluent,
.xaf-sidebar.sidebar .dxbl-icon-set-fluent-small,
.xaf-sidebar.sidebar .dxbl-icon-set-fluent-large {
    color: var(--n2c-icon) !important;
    fill: currentColor !important;
}

.xaf-sidebar.sidebar .dxbl-btn-standalone .dxbl-image,
.xaf-sidebar.sidebar .dxbl-btn-standalone svg {
    color: var(--n2c-icon) !important;
}

/* FontAwesome icons used in nav */
.xaf-sidebar.sidebar i[class*="fa"],
.xaf-sidebar.sidebar i[class*="fas"],
.xaf-sidebar.sidebar i[class*="far"],
.xaf-sidebar.sidebar i[class*="fal"],
.xaf-sidebar.sidebar i[class*="fad"],
.xaf-sidebar.sidebar i[class*="fab"] {
    color: var(--n2c-icon) !important;
}

/* Sidebar shadow separator */
.sidebar-sm-shadow {
    width: 8px;
    background: linear-gradient(90deg, var(--n2c-shadow), rgba(0,0,0,0));
}

/* About/version block - accessible, compact, clear */
.about-info {
    margin-top: auto;
    padding: 0.6rem 0.8rem;
    font-size: 0.875rem; /* slightly larger for legibility */
    color: var(--n2c-muted);
    background-color: var(--n2c-about-bg);
    border-top: 1px solid var(--n2c-divider);
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
}

.about-info .app-name {
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--n2c-accent);
    font-size: 0.95rem;
}

.about-info .version {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Segoe UI Mono", Roboto Mono, monospace;
    font-size: 0.85rem;
    color: var(--n2c-muted);
}

.about-info .meta {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: baseline;
}

.about-info small {
    color: var(--n2c-muted);
}

/* Emphasize the company/build when needed */
.about-info .company {
    font-size: 0.82rem;
    opacity: 0.95;
}

/* Responsive: hide details on very small screens to keep side navigation compact */
@media (max-width: 576px) {
    .about-info { display: none; }
    .xaf-sidebar.sidebar { min-width: 72px !important; }
}

/* Utility: compact variant for narrow sidebars */
.xaf-sidebar.sidebar.compact .about-info { display: none; }