/*!
 * cakeBilling — app-level overrides on top of SB Admin 2 (MIT).
 * Keep this file free of premium/Pro styles. Load AFTER sb-admin-2.min.css.
 */

/*
 * Privacy/DPDP: the stock theme points .bg-login-image at source.unsplash.com
 * (an external call). Replace it with a self-hosted illustration on a brand
 * gradient so the app makes no third-party requests (design-system.md §6).
 */
.bg-login-image {
    background-color: #4e73df;
    background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
    background-position: center;
    background-size: cover;
    position: relative;
}

.bg-login-image::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Stylesheet-relative, not root-relative: the app is served from a subfolder
       (/cakeBilling/web/public), so a leading "/" resolves to the host root and 404s. */
    background-image: url("../img/undraw_rocket.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 60%;
    opacity: 0.9;
}

/* Central (SuperAdmin) area: tint the sidebar so it reads as a distinct panel
   from the tenant shell (web-ui-architecture.md §4). */
.sidebar.sidebar-central {
    background-image: linear-gradient(180deg, #224abe 10%, #13328c 100%) !important;
}

.brand-wordmark {
    font-weight: 800;
    letter-spacing: 0.02em;
}

/*
 * Per-tenant logo (CR-054). The image is operator-uploaded, so its aspect ratio is
 * unknown: constrain BOTH axes and use object-fit so a tall or very wide mark can
 * never stretch the sidebar, the top bar or the login card.
 */
.brand-logo {
    max-width: 100%;
    object-fit: contain;
}

.brand-logo-sidebar {
    max-height: 2.25rem;
    max-width: 3.5rem;
}

.brand-logo-topbar {
    max-height: 1.75rem;
    max-width: 6rem;
}

.brand-logo-auth {
    max-height: 4.5rem;
    max-width: 14rem;
}

/* SuperAdmin console: the current logo/favicon previews on a tenant's Manage page. */
.brand-logo-preview {
    max-height: 6rem;
    max-width: 100%;
    object-fit: contain;
}

/* Shown at roughly tab size, so the operator sees what users will actually see. */
.brand-favicon-preview {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

/* Help centre: lift the topic cards on hover so they read as clickable. */
.help-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a:hover > .help-card {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(58, 59, 69, 0.2) !important;
}