/* Brand logo helpers – extracted from inline styles in layouts/nav/sidebar */

.brand-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-app-name {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    margin-left: 2px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1;
}

.brand-logo-img-nav {
    height: 40px;
    width: auto;
}

.brand-logo-img-nav--dark {
    display: none;
}

/* Public pages are light by default → use the dark-on-light logo */
body.md-public .brand-logo-img-nav--light {
    display: block;
}
body.md-public .brand-logo-img-nav--dark {
    display: none;
}

/* If dark theme is enabled, swap to the light-on-dark logo */
body[data-theme="dark"].md-public .brand-logo-img-nav--light,
[data-theme="dark"] body.md-public .brand-logo-img-nav--light {
    display: none;
}
body[data-theme="dark"].md-public .brand-logo-img-nav--dark,
[data-theme="dark"] body.md-public .brand-logo-img-nav--dark {
    display: block;
}

.brand-logo-text {
    align-items: center;
    font-size: 20px;
    font-weight: 600;
}

.brand-med {
    color: #3498db;
}

.brand-device-dark {
    color: #000;
}

.brand-device-light {
    color: #fff;
}

/* In dark mode, make the fallback text readable */
body[data-theme="dark"] .brand-device-dark,
[data-theme="dark"] .brand-device-dark {
    color: #fff;
}

/* Public brand text next to logo */
.brand-app-device {
    color: var(--md-text, #1A1F2E);
}
.brand-app-online {
    color: var(--md-blue, #0F78A5);
}
body.md-public .brand-app-name {
    font-size: 18px;
}

/* In dark mode the logo already contains “Device” -> show only “.online” */
body[data-theme="dark"].md-public .brand-app-device,
[data-theme="dark"] body.md-public .brand-app-device {
    display: none;
}
body[data-theme="dark"].md-public .brand-app-online,
[data-theme="dark"] body.md-public .brand-app-online {
    color: #fff;
}

/* Praxis sidebar sizes */
.brand-logo-img-sidebar-mini {
    height: 34px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

.brand-logo-img-sidebar {
    height: 30px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.brand-logo-text-sidebar {
    vertical-align: middle;
    font-size: 18px;
    font-weight: 600;
}