/*
 * Room33 Dashboard — Top Action Bar
 * File: assets/css/modules/action-bar.css
 *
 * Loaded automatically via the glob() asset loader.
 * Uses CSS custom properties from dashboard-base.css.
 */

/* ── Bar shell ──────────────────────────────────────────────────────────── */

.r33-action-bar {
    display        : flex;
    align-items    : center;
    gap            : 16px;
    flex-wrap      : wrap;
    background     : var(--r33-card-bg, #1a1a2e);
    border         : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius  : var(--r33-radius, 12px);
    padding        : 12px 18px;
    margin-bottom  : 20px;
}


/* ── Status indicators ──────────────────────────────────────────────────── */

.r33-ab-status {
    display    : flex;
    align-items: center;
    gap        : 16px;
    flex-shrink: 0;
}

.r33-ab-stat {
    display    : flex;
    align-items: center;
    gap        : 6px;
    font-size  : 0.80rem;
    color      : var(--r33-text-muted, #888);
}

.r33-ab-stat-value {
    font-weight: 700;
    color      : var(--r33-text-primary, #fff);
}

.r33-ab-stat-label {
    color: var(--r33-text-muted, #888);
}

/* Completion */
.r33-ab-mini-progress {
    width        : 40px;
    height       : 4px;
    background   : rgba(255,255,255,.08);
    border-radius: 99px;
    overflow     : hidden;
    flex-shrink  : 0;
}

.r33-ab-mini-fill {
    height       : 100%;
    background   : var(--r33-accent, #e91e8c);
    border-radius: 99px;
    transition   : width .6s ease;
}

.r33-ab-stat--complete .r33-ab-stat-value { color: #2ecc71; }
.r33-ab-stat--complete .r33-ab-mini-fill  { background: #2ecc71; }

/* Verification */
.r33-ab-stat--verified   { color: #2ecc71; }
.r33-ab-stat--verified   .r33-ab-stat-label { color: #2ecc71; }
.r33-ab-stat--unverified { color: var(--r33-text-muted, #888); }

/* Gold */
.r33-ab-stat--gold          { color: #ffd700; }
.r33-ab-stat--gold          .r33-ab-stat-label { color: var(--r33-text-muted, #888); }
.r33-ab-stat--no-gold       { color: var(--r33-text-muted, #888); }
.r33-ab-stat--no-gold       .r33-ab-stat-value { color: var(--r33-text-muted, #888); }

/* Zero Gold — clickable top-up nudge */
.r33-ab-stat--topup-nudge {
    text-decoration: none;
    border         : 1px solid rgba(255,215,0,.15);
    border-radius  : var(--r33-radius-sm, 8px);
    padding        : 4px 10px;
    transition     : background .2s, border-color .2s;
    cursor         : pointer;
}

.r33-ab-stat--topup-nudge:hover {
    background  : rgba(255,215,0,.06);
    border-color: rgba(255,215,0,.30);
}

.r33-ab-stat-add {
    font-size  : 0.72rem;
    font-weight: 600;
    color      : #ffd700;
    margin-left: 2px;
}

/* Dividers between stat groups */
.r33-ab-stat + .r33-ab-stat {
    padding-left: 16px;
    border-left : 1px solid var(--r33-border, rgba(255,255,255,.08));
}


/* ── Quick actions ──────────────────────────────────────────────────────── */

.r33-ab-actions {
    display    : flex;
    align-items: center;
    gap        : 8px;
    flex-wrap  : wrap;
}

.r33-ab-action {
    display        : inline-flex;
    align-items    : center;
    padding        : 7px 14px;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.78rem;
    font-weight    : 600;
    text-decoration: none;
    white-space    : nowrap;
    transition     : opacity .2s, transform .15s;
    border         : 1px solid transparent;
}

.r33-ab-action:hover {
    opacity  : .85;
    transform: translateY(-1px);
}

.r33-ab-action--primary {
    background  : var(--r33-accent, #e91e8c);
    color       : #fff;
    border-color: transparent;
}

.r33-ab-action--secondary {
    background  : rgba(255,255,255,.06);
    color       : var(--r33-text-secondary, #ccc);
    border-color: rgba(255,255,255,.12);
}

.r33-ab-action--gold {
    background  : rgba(255,215,0,.12);
    color       : #ffd700;
    border-color: rgba(255,215,0,.20);
}

.r33-ab-action--upgrade {
    background  : rgba(255,189,46,.10);
    color       : #ffbd2e;
    border-color: rgba(255,189,46,.20);
}

/* External link — View your profile */
.r33-ab-action--secondary[target="_blank"]::after {
    content    : ' ↗';
    font-size  : 0.70rem;
    opacity    : .7;
}


/* ── Navigation pills ───────────────────────────────────────────────────── */

.r33-ab-nav {
    display    : flex;
    align-items: center;
    gap        : 4px;
    margin-left: auto;
}

.r33-ab-nav-link {
    display        : inline-flex;
    align-items    : center;
    padding        : 7px 16px;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.82rem;
    font-weight    : 500;
    color          : var(--r33-text-muted, #888);
    text-decoration: none;
    transition     : background .15s, color .15s;
    white-space    : nowrap;
}

.r33-ab-nav-link:hover {
    background: rgba(255,255,255,.05);
    color     : var(--r33-text-secondary, #ccc);
}

.r33-ab-nav-link--active {
    background: rgba(255,255,255,.08);
    color     : var(--r33-text-primary, #fff);
    font-weight: 600;
}


/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .r33-ab-nav {
        margin-left: 0;
        width      : 100%;
    }
}

@media (max-width: 600px) {
    .r33-action-bar {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 12px;
    }

    .r33-ab-actions {
        width: 100%;
    }

    .r33-ab-nav {
        width    : 100%;
        flex-wrap: wrap;
    }

    .r33-ab-nav-link {
        flex: 1 1 auto;
        justify-content: center;
    }
}