/* ============================================================================
   Phase 2D — Batch 1 Polish
   ============================================================================
   - Dashboard stat cards: force 6-per-row at default zoom
   - Acting-as banner: yellow → red
   - Sidebar: surface View Site / Account / Sign Out (less buried)
   - Logo: prevent awkward wrapping at narrow widths
   - Password input: room for show/hide eye icon
*/

/* ============================================================================
   1. DASHBOARD STAT CARDS — smaller, 6 per row at desktop
   ============================================================================
   We target common grid containers used on dashboards. If your dashboard uses
   different class names, the JS in batch1.js also forces overrides.
*/
@media (min-width: 1100px) {
    .cpp-dashboard-stats,
    .cpp-stat-cards,
    .cpp-dashboard__stats,
    .cpp-admin__stats,
    [data-stats-grid] {
        display: grid !important;
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 0.7rem !important;
    }

    /* Make individual stat cards smaller too */
    .cpp-stat-card,
    .cpp-dashboard-stat,
    .cpp-dashboard__stat {
        padding: 0.9rem 1rem !important;
        min-height: 0 !important;
    }

    /* Smaller numbers */
    .cpp-stat-card__value,
    .cpp-stat-card .cpp-stat-value,
    .cpp-dashboard-stat__value,
    .cpp-dashboard-stat .value,
    .cpp-stat__number {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin: 0 0 0.25rem !important;
    }

    /* Smaller labels */
    .cpp-stat-card__label,
    .cpp-dashboard-stat__label,
    .cpp-stat__label {
        font-size: 0.75rem !important;
        letter-spacing: 0.04em !important;
    }

    /* Smaller sublabels (the "all time", "registered" etc) */
    .cpp-stat-card__sublabel,
    .cpp-dashboard-stat__sublabel,
    .cpp-stat__sublabel {
        font-size: 0.7rem !important;
    }
}

/* On narrower screens, fall back to 3 per row */
@media (max-width: 1099px) and (min-width: 700px) {
    .cpp-dashboard-stats,
    .cpp-stat-cards,
    .cpp-dashboard__stats,
    .cpp-admin__stats,
    [data-stats-grid] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* On mobile: 2 per row */
@media (max-width: 699px) {
    .cpp-dashboard-stats,
    .cpp-stat-cards,
    .cpp-dashboard__stats,
    .cpp-admin__stats,
    [data-stats-grid] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================================================
   2. ACTING-AS BANNER — yellow → red
   ============================================================================
   Higher visibility when a master admin is impersonating a user. Yellow
   blended into the brand too much; red commands attention.
*/
.cpp-actingbanner,
.cpp-acting-as-banner,
.cpp-acting-as,
[data-acting-as-banner] {
    background: #c61b6f !important;
    color: #fff !important;
    border-color: #161616 !important;
}
.cpp-actingbanner a,
.cpp-acting-as-banner a,
.cpp-acting-as a,
[data-acting-as-banner] a {
    color: #ffd000 !important;
    text-decoration: underline;
}
.cpp-actingbanner strong,
.cpp-acting-as-banner strong,
.cpp-acting-as strong,
[data-acting-as-banner] strong {
    color: #ffd000 !important;
}
.cpp-actingbanner__exit {
    background: #ffd000 !important;
    color: #161616 !important;
    border: 2px solid #161616 !important;
    font-weight: 700;
    padding: 0.3rem 0.7rem !important;
}
.cpp-actingbanner__exit:hover {
    background: #fff !important;
}
.cpp-actingbanner__pulse {
    background: #ffd000 !important;
}

/* ============================================================================
   3. SIDEBAR — surface View Site / My Account / Sign Out
   ============================================================================
   When these links exist deep in a sidebar, the JS adds a class to make them
   stand out. CSS styles that class to look like a distinct utility group.
*/
.cpp-sidebar__utility {
    margin-top: auto !important;
    padding: 1rem 0.8rem 1.25rem !important;
    border-top: 2px solid rgba(255,255,255,0.15);
    background: var(--cpp-ink, #161616);
    position: relative;
    z-index: 100;
}

/* Ensure the sidebar itself sits above the footer's decorative scallop */
.cpp-adminbar,
.cpp-sidebar,
.cpp-master-sidebar {
    z-index: 50;
}
.cpp-sidebar__utility a {
    display: block;
    padding: 0.5rem 0.8rem;
    font-size: 0.85rem;
    opacity: 0.85;
    text-decoration: none;
}
.cpp-sidebar__utility a:hover {
    opacity: 1;
    background: rgba(255,255,255,0.05);
}
.cpp-sidebar__utility a.is-signout {
    color: #ff8a8a !important;
}

/* Quick actions surfacing — when JS moves them up, this gives them prominence */
.cpp-quick-actions-surfaced,
[data-quick-actions-surfaced] {
    background: #fffaf0;
    border: 2px solid #161616;
    padding: 1rem 1.25rem;
    margin: 1rem 0 1.5rem;
}
.cpp-quick-actions-surfaced h2,
.cpp-quick-actions-surfaced h3 {
    font-family: 'Fraunces', Georgia, serif;
    margin: 0 0 0.7rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ============================================================================
   4. LOGO WRAPPING — don't break at narrow widths
   ============================================================================
*/
.cpp-logo,
.cpp-brand,
[class*="brand-logo"],
[class*="site-logo"] {
    white-space: nowrap;
}
.cpp-logo__name,
.cpp-brand__name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Force header logo container to use flex with sensible shrinking */
header .cpp-logo,
header .cpp-brand {
    min-width: 0;
    flex-shrink: 1;
}

/* ============================================================================
   5. PASSWORD INPUT — room for show/hide eye
   ============================================================================
*/
.cpp-password-wrap {
    position: relative;
    display: block;
}
.cpp-password-wrap input[type="password"],
.cpp-password-wrap input[type="text"] {
    padding-right: 2.6rem !important;
}
.cpp-password-toggle {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.3rem;
    color: #666;
    line-height: 1;
    font-size: 1.1rem;
}
.cpp-password-toggle:hover {
    color: #161616;
}
.cpp-password-toggle:focus {
    outline: 2px solid #c61b6f;
    outline-offset: 2px;
}

/* ============================================================================
   Global scallop clearance — add bottom padding to main so the footer's
   decorative scallop doesn't bite into page content on ANY page.
   ============================================================================ */
main {
    padding-bottom: 5rem !important;
}