/* Color Admin 5 Material variant: white elevated header, dark slate top menu, Material elevation. */
body, .app { background: #eceff1; }

/* Header: white with elevation */
.app-header { background: #fff !important; border-bottom: 0; box-shadow: 0 2px 4px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.08); }
.app-header { --bf-hw-bg: #f1f3f4; --bf-hw-bg-hover: #e3e7ea; --bf-hw-muted: #5f6368; --bf-hw-text: #202124; }

/* Top menu: dark slate bar */
.app-top-menu { background: #263238 !important; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.app-top-menu .menu .menu-item > .menu-link { color: rgba(255,255,255,.75); font-weight: 600; }
.app-top-menu .menu .menu-item > .menu-link .menu-icon,
.app-top-menu .menu .menu-item > .menu-link .menu-icon i { color: rgba(255,255,255,.55) !important; background: transparent !important; }
.app-top-menu .menu .menu-item:hover > .menu-link { color: #fff; background: rgba(255,255,255,.06); }
.app-top-menu .menu .menu-item.active > .menu-link { color: #fff; background: var(--bf-blue); }
.app-top-menu .menu .menu-item.active > .menu-link .menu-icon i { color: #fff !important; }
.app-top-menu .menu .menu-item.bf-menu-alert > .menu-link .menu-icon i { color: #ff8a80 !important; }
.app-top-menu .menu .menu-control > .menu-link { color: #fff; background: #263238; }
@media (min-width: 768px) {
    .app-top-menu .menu .menu-item .menu-submenu { background: #fff; border-radius: 4px; }
}
@media (max-width: 767.98px) {
    .app-top-menu .menu .menu-submenu { background: rgba(0,0,0,.2); }
    .app-top-menu .menu .menu-submenu .menu-item > .menu-link { color: rgba(255,255,255,.75); }
}

/* Material elevation and shapes */
.bf-card, .card.bf-card { border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); }
.bf-card > .card-header { border-bottom: 1px solid rgba(0,0,0,.06); padding-bottom: 12px; }
.bf-hw-menu { border-radius: 8px; box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2); }
.bf-hw-card { border-radius: 6px; }
.modal-content { border-radius: 8px; }

/* Material buttons */
.btn { font-weight: 700; letter-spacing: .03em; }
.btn-theme, .btn-primary, .btn-warning { box-shadow: 0 2px 2px rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px rgba(0,0,0,.2); }
.btn-theme:hover, .btn-primary:hover, .btn-warning:hover { box-shadow: 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2); }
.bf-titlebar-actions .btn, .app-header .btn-theme { border-radius: 4px !important; }
.bf-titlebar .bf-stat { border-color: rgba(0,0,0,.1); }
.bf-tabs .nav-link { border-radius: 4px; }

/* White page background; cards keep a light outline to stay distinct */
body, .app, .app-content { background: #fff !important; }
.bf-card, .card.bf-card { box-shadow: 0 1px 3px rgba(16,24,40,.06), 0 4px 14px rgba(16,24,40,.05); border: 1px solid #e6ebf1 !important; }

/* Auth pages, aligned with the app (Material): slate-to-blue brand panel, 8px radii, light-blue active tab */
.bf-auth__brand {
    background:
        radial-gradient(900px 500px at 110% 110%, rgba(47,116,192,.55), transparent 60%),
        radial-gradient(600px 400px at -10% -10%, rgba(255,255,255,.05), transparent 60%),
        linear-gradient(160deg, #263238 0%, #1f3a5c 100%) !important;
}
.bf-auth .form-control, .bf-auth .iti, .bf-auth .intl-tel-input input { border-radius: 8px !important; }
.bf-auth .btn-lg, .bf-auth .btn-primary { border-radius: 8px !important; box-shadow: none !important; letter-spacing: .02em; }
.bf-auth .btn-primary:not(:disabled):hover { box-shadow: 0 4px 12px rgba(47,116,192,.3) !important; }
.bf-segment { border-radius: 10px; background: #f3f5f8; border-color: #e6ebf1; }
.bf-segment button { border-radius: 8px; }
.bf-segment button.active { background: #eaf2fb; color: #255f9f; box-shadow: inset 0 0 0 1px #d6e4f5; }
.bf-choice label { border-radius: 8px; }
.bf-choice input:checked + label { background: #eaf2fb; border-color: #2f74c0; }
.bf-auth__icon { border-radius: 10px; background: #eaf2fb; }
.bf-lang { border-radius: 8px; }
#app .app-header a.bf-header-cta, #app .app-header .bf-header-refund .btn-group > .btn:first-child { border-top-left-radius: 999px !important; border-bottom-left-radius: 999px !important; box-shadow: none !important; } #app .app-header a.bf-header-cta { border-top-right-radius: 999px !important; border-bottom-right-radius: 999px !important; } #app .app-header .bf-header-refund .btn-group > .bf-split { border-top-right-radius: 999px !important; border-bottom-right-radius: 999px !important; box-shadow: none !important; } #app .app-header .bf-header-refund .btn { box-shadow: none !important; }