/**
 * Meridian brand theme overrides
 * Primary: #9288c1 (from meridianuae.com brand)
 */
:root {
    --meridian-primary: #9288c1;
    --meridian-primary-dark: #7a70a8;
    --meridian-primary-light: #a89fd0;
}

/* Top navbar */
nav.navbar-main.navbar-color,
.navbar-main.navbar-color {
    background-color: var(--meridian-primary) !important;
}

/* Sidebar brand strip + active menu */
.brand-sidebar {
    background: var(--meridian-primary) !important;
}

.sidenav li a.active,
.sidenav-main .sidenav li a.active {
    background: var(--meridian-primary) !important;
}

/* Footer */
footer.page-footer,
.page-footer .footer-copyright {
    background-color: var(--meridian-primary) !important;
}

/* Teal utility classes used as primary */
.cyan,
.cyan.darken-1,
.cyan.darken-2,
.cyan.lighten-1,
.card-content.cyan,
.card-action.cyan {
    background-color: var(--meridian-primary) !important;
}

.cyan.darken-1 {
    background-color: var(--meridian-primary-dark) !important;
}

.teal-text,
.cyan-text {
    color: var(--meridian-primary) !important;
}

/* Cards / gradients that used old teal */
.gradient-45deg-green-teal,
.gradient-45deg-teal,
.content-wrapper-before {
    background: var(--meridian-primary) !important;
    background-image: none !important;
}

/* Switches, checkboxes, tabs accents */
[type="checkbox"]:checked + span:not(.lever):before,
[type="checkbox"].filled-in:checked + span:not(.lever):after,
.switch label input[type="checkbox"]:checked + .lever:after {
    background-color: var(--meridian-primary) !important;
    border-color: var(--meridian-primary) !important;
}

.tabs .tab a.active,
.tabs .tab a:hover {
    color: var(--meridian-primary) !important;
}

.tabs .indicator {
    background-color: var(--meridian-primary) !important;
}

/* Progress / chips / badges */
.progress .determinate,
.badge,
.chip.teal {
    background-color: var(--meridian-primary) !important;
}

/* Pagination active */
.pagination li.active {
    background-color: var(--meridian-primary) !important;
}

/* —— Display / Kiosk / Call top bar logo (keep small inside purple header) —— */
.meridian-callpage-nav {
    position: relative;
}

.meridian-topbar-logo {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    height: 64px;
}

.meridian-topbar-logo img {
    height: 40px !important;
    max-height: 40px !important;
    width: auto !important;
    max-width: 180px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* —— Sidebar brand: logo centered in purple brand bar (not page center) —— */
.brand-sidebar .logo-wrapper {
    position: relative;
    height: 64px;
    margin: 0;
    width: 100%;
}

.brand-sidebar .brand-logo.center.meridian-brand-logo,
.brand-sidebar .meridian-brand-logo {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: auto;
    max-width: calc(100% - 48px); /* keep clear of toggle button */
}

.brand-sidebar .logo-wrapper a.brand-logo img.logo-full,
.brand-sidebar .meridian-brand-logo img.logo-full {
    display: block;
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    max-width: 160px;
    margin: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.brand-sidebar .logo-wrapper a.navbar-toggler {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    left: auto !important;
    transform: translateY(-50%);
    z-index: 2;
}

/* Favicon hidden when sidebar expanded */
.brand-sidebar .meridian-brand-logo img.logo-icon,
.nav-expanded .brand-sidebar .meridian-brand-logo img.logo-icon {
    display: none !important;
}

/* Collapsed sidebar: show only favicon, hide full logo */
.nav-collapsed .brand-sidebar .meridian-brand-logo {
    max-width: 64px;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.nav-collapsed .brand-sidebar .meridian-brand-logo img.logo-full {
    display: none !important;
}

.nav-collapsed .brand-sidebar .meridian-brand-logo img.logo-icon {
    display: block !important;
    height: 28px !important;
    max-height: 28px !important;
    width: 28px !important;
    margin: 0 auto;
    filter: none;
    object-fit: contain;
}

.nav-collapsed .brand-sidebar .logo-wrapper a.navbar-toggler {
    visibility: hidden;
    opacity: 0;
}