/* CPAGate UI branding normalization — production UI tune-up. */

/* OPS.UI14 — canonical sidebar brand slot for every Boron shell.
   The logo owns the same 85px vertical band as the topbar. This keeps the
   first navigation item below the topbar divider exactly like the base theme. */
.sidenav-menu > .logo {
    width: 100%;
    height: var(--bs-topbar-height);
    min-height: var(--bs-topbar-height);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}

.sidenav-menu > .logo > .logo-light,
.sidenav-menu > .logo > .logo-dark {
    width: 100%;
}

.sidenav-menu > .logo .logo-lg {
    width: 100%;
    height: var(--bs-topbar-height);
    align-items: center;
    justify-content: center;
}

/* Only the currently active light/dark wrapper is visible; inside it the
   large mark is centered vertically in the reserved brand slot. */
.sidenav-menu > .logo .logo-light .logo-lg,
.sidenav-menu > .logo .logo-dark .logo-lg {
    display: flex;
}

.sidenav-menu > .logo .logo-lg img {
    display: block;
    width: min(100%, 205px) !important;
    max-width: 100%;
    height: auto !important;
    max-height: 58px !important;
    margin: 0 auto;
    object-fit: contain;
    object-position: center;
}

/* Small mark keeps its natural aspect ratio. Its final visibility is still
   controlled by Boron's condensed/sm-hover rules below. */
.sidenav-menu > .logo .logo-sm img {
    display: block;
    width: auto !important;
    height: 56px !important;
    max-width: 58px !important;
    max-height: 56px !important;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

/* OPS.UI9 — collapsed sidebar brand mark.
   The Boron condensed rail is 70px wide. Keep the logo in a dedicated
   70x85px brand area instead of treating it like a menu icon. */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu > .logo,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) > .logo {
    width: var(--bs-sidenav-width-sm);
    height: var(--bs-topbar-height);
    min-height: var(--bs-topbar-height);
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    overflow: hidden;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu > .logo .logo-light,
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu > .logo .logo-dark,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) > .logo .logo-light,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) > .logo .logo-dark {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu > .logo .logo-sm,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) > .logo .logo-sm {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu > .logo .logo-sm img,
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:not(:hover) > .logo .logo-sm img {
    width: auto !important;
    height: 58px !important;
    max-width: 60px !important;
    max-height: 58px !important;
    margin: 0 auto !important;
    object-fit: contain;
    object-position: center;
}

/* When sm-hover expands, immediately restore the full wordmark behavior. */
html[data-sidenav-size="sm-hover"]:not([data-layout="topnav"]) .sidenav-menu:hover > .logo {
    padding-inline: 16px !important;
}

/* The topbar duplicate logo follows the same visual scale when it is visible. */
.app-topbar .logo .logo-lg img {
    width: min(100%, 180px) !important;
    height: auto !important;
    max-height: 46px;
    object-fit: contain;
}
.app-topbar .logo .logo-sm img {
    width: 36px !important;
    height: 36px !important;
    object-fit: contain;
}

/* Login uses the Platform logo and gives wide wordmarks enough room to be legible. */
.auth-brand {
    display: flex;
    min-height: 62px;
    align-items: center;
    justify-content: center;
}
.auth-brand img {
    width: min(100%, 250px) !important;
    max-width: 250px;
    height: auto !important;
    max-height: 60px;
    object-fit: contain;
}

/* Site Identity: show exactly what is currently configured before replacing it. */
.cpagate-brand-asset {
    padding: 14px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-secondary-bg);
}
.cpagate-brand-asset-preview {
    display: flex;
    min-height: 92px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 10px;
    border: 1px dashed var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
}
.cpagate-brand-asset-preview img {
    display: block;
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.cpagate-brand-asset-preview--banner { min-height: 120px; }
.cpagate-brand-asset-preview--banner img { max-height: 100px; }
.cpagate-current-value code {
    margin-top: 3px;
    font-size: .72rem;
}

/* A collapsible parent stays open for context, but only the actual destination is highlighted. */
.side-nav-link[data-bs-toggle="collapse"] {
    background-color: transparent;
}
.side-nav-link[data-bs-toggle="collapse"]:not(:hover):not(:focus) {
    box-shadow: none;
}

@media (max-width: 767.98px) {
    .sidenav-menu > .logo .logo-lg img {
        width: min(100%, 175px) !important;
        max-height: 48px;
    }
    .auth-brand img {
        width: min(100%, 220px) !important;
        max-height: 54px;
    }
}

/* OPS.UI2 — Admin overview dashboard */
.cpagate-dashboard-kpi {
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cpagate-dashboard-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--bs-primary-border-subtle, rgba(13,110,253,.28));
}
.cpagate-dashboard-period-summary {
    background: rgba(var(--bs-danger-rgb, 220,53,69), .055);
    border-bottom: 1px solid var(--bs-border-color);
}
.cpagate-dashboard-period-summary > div:not(:last-child) {
    border-right: 1px solid var(--bs-border-color);
}
.cpagate-attention-item {
    padding: .9rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius-lg, .5rem);
    background: var(--bs-body-bg);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.cpagate-attention-item:hover {
    transform: translateY(-2px);
    border-color: var(--bs-primary-border-subtle, rgba(13,110,253,.28));
}
@media (max-width: 767.98px) {
    .cpagate-dashboard-period-summary > div:nth-child(2) {
        border-right: 0;
    }
    .cpagate-dashboard-period-summary > div:nth-child(-n+2) {
        border-bottom: 1px solid var(--bs-border-color);
    }
}

/* OPS.UI3 — AJAX revenue-first Admin Dashboard */
.dashboard-date-range {
    width: min(100%, 250px);
}
.dashboard-kpi-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cpagate-dashboard-finance-strip {
    background: rgba(var(--bs-danger-rgb, 220, 53, 69), .055);
    border-bottom: 1px solid var(--bs-border-color);
}
.cpagate-finance-wallet {
    min-height: 84px;
    padding: 1rem 1.15rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.cpagate-finance-wallet .avatar-sm {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
}
.cpagate-dashboard-finance-strip > div:not(:last-child) .cpagate-finance-wallet {
    border-right: 1px solid var(--bs-border-color);
}
.dashboard-chart-loading {
    min-height: 268px;
    position: relative;
}
.dashboard-chart-loading::after {
    content: 'Loading dashboard data…';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color);
    font-size: .8rem;
}
#dashboard-top-tabs .nav-link {
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
#dashboard-top-tabs .nav-link:hover {
    transform: translateY(-1px);
}
#dashboard-top-tabs .nav-link.active {
    box-shadow: 0 .2rem .45rem rgba(0, 0, 0, .08);
}
@media (max-width: 1199.98px) {
    .cpagate-dashboard-finance-strip > div:nth-child(2) .cpagate-finance-wallet {
        border-right: 0;
    }
    .cpagate-dashboard-finance-strip > div:nth-child(-n+2) .cpagate-finance-wallet {
        border-bottom: 1px solid var(--bs-border-color);
    }
}
@media (max-width: 575.98px) {
    .dashboard-date-range {
        width: 100%;
    }
    .cpagate-finance-wallet {
        padding: .85rem;
    }
}


/* OPS.UI4 — Dashboard custom range + native Boron action styling. */
#admin-dashboard-root .dashboard-date-range {
    min-width: 250px;
    justify-content: space-between;
    align-items: center;
}
#admin-dashboard-root .card-header .btn.btn-sm,
#admin-dashboard-root .card-footer .btn.btn-sm {
    font-weight: 500;
}
@media (max-width: 575.98px) {
    #admin-dashboard-root .dashboard-date-range {
        width: 100%;
        min-width: 0;
    }
}


/* OPS.UI7 — Dashboard date control, viewer timezone and compact Top Performance. */
#admin-dashboard-root #dashboard-days-button,
#admin-dashboard-root .dashboard-date-range > .form-control,
#admin-dashboard-root .dashboard-date-range > .dashboard-date-calendar {
    height: 42px;
}
#admin-dashboard-root .dashboard-date-range {
    width: 258px;
    min-width: 258px;
    flex-wrap: nowrap;
    align-items: stretch;
}
#admin-dashboard-root .dashboard-date-range > .form-control {
    min-width: 0;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius) 0 0 var(--bs-border-radius);
}
#admin-dashboard-root .dashboard-date-range > .dashboard-date-calendar {
    width: 42px;
    min-width: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}
#admin-dashboard-root .dashboard-date-range > .dashboard-date-calendar i {
    font-size: 18px;
    line-height: 1;
}
#admin-dashboard-root .dashboard-timezone-badge {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .3rem .55rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary-color);
    font-size: .72rem;
    font-weight: 500;
    white-space: nowrap;
}
#admin-dashboard-root .dashboard-top-header {
    display: block;
}
#admin-dashboard-root .dashboard-top-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
}
#admin-dashboard-root #dashboard-top-tabs {
    flex: 0 0 auto;
    gap: .2rem;
}
#admin-dashboard-root .dashboard-top-table-wrap {
    width: 100%;
    overflow-x: hidden;
}
#admin-dashboard-root .dashboard-top-table {
    width: 100%;
    table-layout: fixed;
}
#admin-dashboard-root .dashboard-top-table th,
#admin-dashboard-root .dashboard-top-table td {
    min-width: 0;
    vertical-align: middle;
}
#admin-dashboard-root .dashboard-top-table .col-offer { width: 34%; }
#admin-dashboard-root .dashboard-top-table .col-user { width: 15%; }
#admin-dashboard-root .dashboard-top-table .col-network { width: 13%; }
#admin-dashboard-root .dashboard-top-table .col-geo { width: 8%; text-align: center; }
#admin-dashboard-root .dashboard-top-table .col-received { width: 19%; }
#admin-dashboard-root .dashboard-top-table .col-gross { width: 11%; }
#admin-dashboard-root .dashboard-offer-name,
#admin-dashboard-root .dashboard-public-id,
#admin-dashboard-root .dashboard-cell-ellipsis {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 991.98px) {
    #admin-dashboard-root .dashboard-top-title-row {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }
    #admin-dashboard-root #dashboard-top-tabs {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }
}
@media (max-width: 767.98px) {
    #admin-dashboard-root .dashboard-timezone-badge {
        width: 100%;
        justify-content: center;
    }
    #admin-dashboard-root .dashboard-date-range {
        width: 100%;
        min-width: 0;
    }
    #admin-dashboard-root .dashboard-top-table-wrap {
        overflow-x: auto;
    }
    #admin-dashboard-root .dashboard-top-table {
        min-width: 720px;
    }
}


/* OPS.UI11 — compact dashboard filters and card actions.
   Keep Boron styling, but remove oversized controls/wrapping on overview cards. */
#admin-dashboard-root .dashboard-filter-stack {
    flex: 0 0 auto;
    min-width: 0;
}

#admin-dashboard-root .dashboard-filter-stack > .d-flex {
    flex-wrap: nowrap !important;
    gap: .5rem !important;
}

#admin-dashboard-root #dashboard-days-button {
    height: 38px;
    min-height: 38px;
    padding: .375rem .75rem;
    line-height: 1.25;
    white-space: nowrap;
    box-shadow: none;
}

#admin-dashboard-root .dashboard-date-range {
    width: 272px;
    min-width: 272px;
    height: 38px;
    flex: 0 0 272px;
}

#admin-dashboard-root .dashboard-date-range > .form-control,
#admin-dashboard-root .dashboard-date-range > .dashboard-date-calendar {
    height: 38px;
    min-height: 38px;
    box-shadow: none;
}

#admin-dashboard-root .dashboard-date-range > .form-control {
    padding: .375rem .75rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}

#admin-dashboard-root .dashboard-date-range > .dashboard-date-calendar {
    width: 38px;
    min-width: 38px;
    flex: 0 0 38px;
    border-left: 0;
}

#admin-dashboard-root .dashboard-date-range > .dashboard-date-calendar i {
    font-size: 16px;
}

#admin-dashboard-root .dashboard-timezone-note {
    margin-top: .25rem;
    text-align: right;
    font-size: .68rem;
    line-height: 1.2;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* OPS.UI12 — action buttons intentionally inherit Boron `.btn.btn-sm`
   sizing, hover, active and shadow/elevation behavior (same pattern as Add Brand).
   Only layout safety is scoped here; visual button styling stays theme-native. */
#admin-dashboard-root .dashboard-card-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    flex: 0 0 auto;
}

#admin-dashboard-root .dashboard-card-action i {
    line-height: 1;
}

#admin-dashboard-root .card-header {
    min-width: 0;
}

#admin-dashboard-root .card-header > div:first-child {
    min-width: 0;
}

#admin-dashboard-root .card-header .header-title {
    line-height: 1.25;
}

@media (max-width: 991.98px) {
    #admin-dashboard-root .page-title-head {
        align-items: flex-start !important;
    }

    #admin-dashboard-root .dashboard-filter-stack {
        width: 100%;
        margin-top: .75rem !important;
    }

    #admin-dashboard-root .dashboard-filter-stack > .d-flex {
        justify-content: flex-start !important;
    }

    #admin-dashboard-root .dashboard-timezone-note {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    #admin-dashboard-root .dashboard-filter-stack > .d-flex {
        flex-wrap: wrap !important;
    }

    #admin-dashboard-root .dashboard-date-range {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }

    #admin-dashboard-root .dashboard-timezone-note {
        white-space: normal;
    }

    #admin-dashboard-root .dashboard-card-action {
        max-width: 100%;
    }
}