/*
 * Room33 Dashboard — Completion Card
 * File: assets/css/modules/completion-card.css
 *
 * Loaded automatically via the glob() asset loader.
 * Uses CSS custom properties from dashboard-base.css.
 */

/* ── Card shell ─────────────────────────────────────────────────────────── */

.r33-completion-card {
    background   : var(--r33-card-bg, #1a1a2e);
    border       : 1px solid var(--r33-border, rgba(255,255,255,.08));
    border-radius: var(--r33-radius, 12px);
    padding      : 24px;
    margin-bottom: 24px;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.r33-cc-header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    flex-wrap      : wrap;
    gap            : 12px;
    margin-bottom  : 20px;
}

.r33-cc-title-group {
    display    : flex;
    align-items: center;
    gap        : 10px;
}

.r33-cc-title-link,
.r33-cc-title-link:hover {
    text-decoration: none;
}

.r33-cc-title {
    margin     : 0;
    font-size  : 1rem;
    font-weight: 600;
    color      : var(--r33-text-primary, #fff);
}

.r33-cc-title-link:hover .r33-cc-title {
    color: var(--r33-green, #52c882);
}

/* Status badge */
.r33-cc-status {
    display       : inline-flex;
    align-items   : center;
    padding       : 3px 10px;
    border-radius : 20px;
    font-size     : 0.72rem;
    font-weight   : 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.r33-cc-status--draft    { background: rgba(255,255,255,.08); color: var(--r33-text-muted, #888); }
.r33-cc-status--pending  { background: rgba(255,189,46,.12);  color: #ffbd2e; }
.r33-cc-status--live     { background: rgba(46,204,113,.15);  color: #2ecc71; }
.r33-cc-status--verified { background: rgba(82,130,255,.15);  color: #5282ff; }
.r33-cc-status--top      { background: rgba(46,204,113,.15);  color: #2ecc71; }
.r33-cc-status--elite    { background: rgba(255,189,46,.18);  color: #ffbd2e; }
.r33-cc-status--vip      { background: rgba(212,175,55,.2);   color: #d4af37; }
.r33-cc-status--paused   { background: rgba(255,255,255,.08); color: var(--r33-text-muted, #888); }
.r33-cc-status--premium  { background: rgba(255,189,46,.15);  color: #ffbd2e; }

/* Header action group — preview + submit sit side by side */
.r33-cc-header-actions {
    display    : flex;
    align-items: center;
    gap        : 10px;
    flex-wrap  : wrap;
}

/* Preview button */
.r33-cc-preview-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 6px;
    padding        : 8px 16px;
    border-radius  : var(--r33-radius-sm, 8px);
    background     : var(--r33-accent, #e91e8c);
    color          : #fff;
    font-size      : 0.82rem;
    font-weight    : 600;
    text-decoration: none;
    transition     : opacity .2s;
    white-space    : nowrap;
}

.r33-cc-preview-btn:hover {
    opacity: .85;
    color  : #fff;
}

/* Submit for review button */
.r33-cc-submit-btn {
    display        : inline-flex;
    align-items    : center;
    padding        : 8px 16px;
    border-radius  : var(--r33-radius-sm, 8px);
    background     : #52c882 !important;
    color          : #1a1a2e !important;
    font-size      : 0.82rem;
    font-weight    : 600;
    border         : none;
    cursor         : pointer;
    white-space    : nowrap;
    transition     : background .2s;
}

.r33-cc-submit-btn:hover {
    background: #72d898 !important;
}

.r33-cc-submit-btn--disabled {
    background: rgba(255,255,255,.08);
    color     : rgba(255,255,255,.30);
    cursor    : not-allowed;
}

.r33-cc-submit-notice {
    font-size  : 0.80rem;
    font-weight: 600;
    color      : #2ecc71;
    white-space: nowrap;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */

.r33-cc-progress-wrap {
    display      : flex;
    align-items  : center;
    gap          : 12px;
    margin-bottom: 18px;
}

.r33-cc-progress-track {
    flex         : 1;
    height       : 8px;
    background   : var(--r33-progress-track, rgba(255,255,255,.08));
    border-radius: 99px;
    overflow     : hidden;
}

.r33-cc-progress-fill {
    height       : 100%;
    border-radius: 99px;
    background   : var(--r33-accent, #e91e8c);
    width        : 0%;                              /* start at 0, JS animates to target */
    transition   : width 0.7s cubic-bezier(.4,0,.2,1);
}

/* Green bar when fully complete */
.r33-completion-card[data-completion="100"] .r33-cc-progress-fill {
    background: #2ecc71;
}

.r33-cc-progress-pct {
    font-size  : 0.9rem;
    font-weight: 700;
    color      : var(--r33-text-primary, #fff);
    min-width  : 38px;
    text-align : right;
}

/* ── Nudge copy ─────────────────────────────────────────────────────────── */

.r33-cc-nudge {
    margin   : 0 0 22px;
    font-size: 0.82rem;
    color    : var(--r33-text-muted, #888);
}

.r33-cc-nudge--success  { color: #2ecc71; }
.r33-cc-nudge--verified { color: #5282ff; }
.r33-cc-nudge--premium  { color: #ffbd2e; }

/* ── Collapsible toggle ─────────────────────────────────────────────────── */

.r33-cc-toggle {
    display        : flex;
    align-items    : center;
    gap            : 8px;
    width          : 100%;
    background     : rgba(255,255,255,.04);
    border         : 1px solid var(--r33-border, rgba(255,255,255,.10));
    border-radius  : var(--r33-radius-sm, 8px);
    padding        : 10px 14px;
    margin-top     : 22px;
    cursor         : pointer;
    color          : var(--r33-text-secondary, #ccc);
    font-size      : 0.85rem;
    font-weight    : 500;
    text-align     : left;
    transition     : background .2s, border-color .2s, color .2s;
}

.r33-cc-toggle:hover {
    background  : rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.20);
    color       : var(--r33-text-primary, #fff);
}

.r33-cc-missing-count {
    display      : inline-flex;
    align-items  : center;
    padding      : 2px 8px;
    background   : rgba(231,76,60,.15);
    color        : #e74c3c;
    border-radius: 20px;
    font-size    : 0.72rem;
    font-weight  : 600;
}

.r33-cc-toggle-label {
    margin-left: auto;
    font-size  : 0.78rem;
}

.r33-cc-toggle-icon {
    transition: transform .25s ease;
    flex-shrink: 0;
}

/* Rotate chevron when collapsed */
.r33-cc-toggle[aria-expanded="false"] .r33-cc-toggle-icon {
    transform: rotate(180deg);
}

/* ── Collapsible body ───────────────────────────────────────────────────── */

.r33-cc-body {
    overflow  : hidden;
    max-height: 2000px;           /* large enough — JS toggles this */
    transition: max-height .3s ease, opacity .25s ease;
    opacity   : 1;
}

.r33-cc-body.r33-cc-body--collapsed {
    max-height: 0;
    opacity   : 0;
}

/* ── Checklist ──────────────────────────────────────────────────────────── */

.r33-cc-checklist {
    list-style   : none;
    margin       : 12px 0 4px;
    padding      : 0;
}

.r33-cc-item {
    border-bottom: 1px solid var(--r33-border, rgba(255,255,255,.06));
}

.r33-cc-item:last-child {
    border-bottom: none;
}

.r33-cc-item-link {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    padding        : 11px 0;
    text-decoration: none;
    border-radius  : 4px;
    transition     : background .15s, padding-left .15s;
}

.r33-cc-item-link:hover {
    background  : rgba(255,255,255,.03);
    padding-left: 6px;
}

/* ── Severity icons ─────────────────────────────────────────────────────── */

.r33-cc-item-icon {
    width          : 22px;
    height         : 22px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    border-radius  : 50%;
    font-size      : 0.78rem;
    font-weight    : 700;
    flex-shrink    : 0;
}

/* Green — complete */
.r33-cc-item--done .r33-cc-item-icon {
    background: rgba(46,204,113,.15);
    color     : #2ecc71;
}

/* Red — required field missing */
.r33-cc-item--missing .r33-cc-item-icon {
    background: rgba(231,76,60,.15);
    color     : #e74c3c;
}

/* Amber — optional not done */
.r33-cc-item--optional .r33-cc-item-icon {
    background: rgba(255,255,255,.06);
    color     : var(--r33-text-muted, #888);
}

/* ── Item labels ────────────────────────────────────────────────────────── */

.r33-cc-item-label {
    flex          : 1;
    font-size     : 0.88rem;
    display       : flex;
    flex-direction: column;
    gap           : 2px;
}

.r33-cc-item--done    .r33-cc-item-label { color: var(--r33-text-secondary, #ccc); }
.r33-cc-item--missing .r33-cc-item-label { color: var(--r33-text-primary, #fff); font-weight: 500; }
.r33-cc-item--optional .r33-cc-item-label { color: var(--r33-text-muted, #888); }

.r33-cc-item-hint {
    font-size: 0.75rem;
    color    : #e74c3c;
}

/* Weight pill */
.r33-cc-item-weight {
    font-size  : 0.72rem;
    font-weight: 600;
    color      : var(--r33-text-muted, #666);
    margin-left: auto;
}

.r33-cc-item--done    .r33-cc-item-weight { color: rgba(46,204,113,.6); }
.r33-cc-item--missing .r33-cc-item-weight { color: rgba(231,76,60,.6); }

/* ── Optional section ───────────────────────────────────────────────────── */

.r33-cc-optional {
    margin-top : 16px;
    padding-top: 16px;
    border-top : 1px solid var(--r33-border, rgba(255,255,255,.06));
}

.r33-cc-optional-label {
    margin        : 0 0 4px;
    font-size     : 0.72rem;
    font-weight   : 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color         : var(--r33-text-muted, #666);
}

.r33-cc-checklist--optional .r33-cc-item {
    border-bottom: none;
}

.r33-cc-checklist--optional .r33-cc-item-link {
    padding: 7px 0;
}

/* ── Status bar ─────────────────────────────────────────────────────────── */

.r33-cc-statusbar {
    display       : flex;
    flex-direction: column;
    gap           : 16px;
    padding-top   : 20px;
    margin-top    : 22px;
    border-top    : 1px solid var(--r33-border, rgba(255,255,255,.06));
}

/* Indicators — full width, evenly spread */
.r33-cc-indicators {
    display        : flex;
    align-items    : stretch;
    justify-content: space-between;
    gap            : 1px;
    width          : 100%;
    background     : var(--r33-border, rgba(255,255,255,.06));
    border         : 1px solid var(--r33-border, rgba(255,255,255,.06));
    border-radius  : var(--r33-radius-sm, 8px);
    overflow       : hidden;
}

.r33-cc-ind {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    gap            : 3px;
    flex           : 1;
    padding        : 20px 10px;
    font-size      : 0.82rem;
    color          : var(--r33-text-muted, #888);
    text-decoration: none;
    background     : rgba(255,255,255,.02);
    transition     : background .15s;
}

/* Remove old left-border divider approach — now handled by gap+bg on parent */
.r33-cc-ind + .r33-cc-ind {
    padding-left: 10px;
    border-left : none;
}

.r33-cc-ind-val {
    font-size  : 1.5rem;
    font-weight: 700;
    line-height: 1;
    color      : var(--r33-text-primary, #fff);
}

.r33-cc-ind-lbl {
    font-size: 0.94rem;
    color    : var(--r33-text-muted, #888);
}

/* Mini progress track inside profile indicator */
.r33-cc-ind-mini-track {
    display      : block;
    width        : 40px;
    height       : 3px;
    background   : rgba(255,255,255,.08);
    border-radius: 99px;
    overflow     : hidden;
}

.r33-cc-ind-mini-fill {
    display      : block;
    height       : 100%;
    background   : var(--r33-accent, #e91e8c);
    border-radius: 99px;
}

.r33-cc-ind--ok .r33-cc-ind-val        { color: #2ecc71; }
.r33-cc-ind--ok .r33-cc-ind-mini-fill  { background: #2ecc71; }
.r33-cc-ind--verified                  { color: #2ecc71; }
.r33-cc-ind--verified .r33-cc-ind-val,
.r33-cc-ind--verified .r33-cc-ind-lbl  { color: #2ecc71; }
.r33-cc-ind--unverified                { color: var(--r33-text-muted, #888); }
.r33-cc-ind--gold .r33-cc-ind-val      { color: #ffd700; }
.r33-cc-ind--gold .r33-cc-ind-lbl      { color: var(--r33-text-muted, #888); }

/* Gold indicator — hide decorative SVG dot, show "0 Gold" on one line */
.r33-cc-ind--gold svg {
    display: none;
}

.r33-cc-ind--gold {
    flex-direction : row;
    flex-wrap      : wrap;
    justify-content: center;
    align-items    : center;
    gap            : 5px;
}

.r33-cc-ind--gold .r33-cc-ind-val {
    line-height: 1.2;
}

.r33-cc-ind--gold .r33-cc-ind-lbl {
    font-size  : 0.94rem;
    line-height: 1.2;
}

.r33-cc-ind-add {
    width      : 100%;
    text-align : center;
    font-size  : 0.72rem;
    font-weight: 600;
    color      : #ffd700;
    opacity    : .80;
    margin-top : 1px;
}

/* Zero Gold — clickable nudge */
.r33-cc-ind--add-gold {
    transition: background .2s;
}

.r33-cc-ind--add-gold:hover {
    background: rgba(255,215,0,.06);
}

/* Quick action buttons — full width row */
.r33-cc-quick-actions {
    display: flex;
    gap    : 10px;
    width  : 100%;
}

.r33-cc-qa {
    display        : inline-flex;
    align-items    : center;
    justify-content: center;
    flex           : 1;
    padding        : 11px 14px;
    border-radius  : var(--r33-radius-sm, 8px);
    font-size      : 0.84rem;
    font-weight    : 600;
    text-decoration: none;
    white-space    : nowrap;
    transition     : opacity .2s, background .15s;
    border         : 1px solid transparent;
}

.r33-cc-qa:hover { opacity: .82; }

.r33-cc-qa--secondary {
    background  : rgba(255,255,255,.06);
    color       : var(--r33-text-secondary, #ccc);
    border-color: rgba(255,255,255,.10);
}

.r33-cc-qa--gold {
    background  : rgba(255,215,0,.10);
    color       : #ffd700;
    border-color: rgba(255,215,0,.18);
}

.r33-cc-qa--boost {
    background    : rgba(255,215,0,.14);
    color         : #ffd700;
    border-color  : rgba(255,215,0,.30);
    font-weight   : 700;
    letter-spacing: .02em;
}

.r33-cc-qa--upgrade {
    background  : rgba(255,189,46,.10);
    color       : #ffbd2e;
    border-color: rgba(255,189,46,.18);
}

@media (max-width: 480px) {
    .r33-cc-quick-actions {
        flex-wrap: wrap;
    }
    .r33-cc-qa {
        flex: 1 1 calc(50% - 5px);
    }
}


/* ── Pause banner ───────────────────────────────────────────────────────── */

.r33-pause-banner {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    flex-wrap    : wrap;
    padding      : 12px 18px;
    margin-bottom: 16px;
    background   : rgba(255,189,46,.08);
    border       : 1px solid rgba(255,189,46,.25);
    border-radius: var(--r33-radius, 12px);
    font-size    : 0.85rem;
}

.r33-pause-banner__icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.r33-pause-banner__text {
    flex : 1;
    color: rgba(255,189,46,.90);
}

.r33-pause-banner__text strong {
    color      : #ffbd2e;
    font-weight: 600;
}

.r33-pause-banner__link {
    color          : #ffbd2e;
    font-weight    : 600;
    font-size      : 0.82rem;
    text-decoration: none;
    white-space    : nowrap;
}

.r33-pause-banner__link:hover {
    text-decoration: underline;
}

/* ── Deletion cooling-off banner ─────────────────────────────────────────── */

.r33-deletion-banner {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    flex-wrap    : wrap;
    padding      : 14px 18px;
    margin-bottom: 16px;
    background   : rgba(220,53,69,.08);
    border       : 1px solid rgba(220,53,69,.30);
    border-radius: var(--r33-radius, 12px);
    font-size    : 0.85rem;
}

.r33-deletion-banner__icon {
    font-size  : 1rem;
    flex-shrink: 0;
    color      : #dc3545;
}

.r33-deletion-banner__text {
    flex : 1;
    color: rgba(220,53,69,.90);
}

.r33-deletion-banner__text strong {
    color      : #dc3545;
    font-weight: 600;
}

.r33-deletion-banner__cancel {
    background   : transparent;
    border       : 1px solid rgba(220,53,69,.50);
    border-radius: var(--r33-radius-sm, 8px);
    color        : #dc3545;
    font-size    : 0.82rem;
    font-weight  : 600;
    padding      : 6px 14px;
    cursor       : pointer;
    white-space  : nowrap;
    transition   : background 0.15s, color 0.15s;
}

.r33-deletion-banner__cancel:hover {
    background: rgba(220,53,69,.12);
}

/* ── Settings status warning text ───────────────────────────────────────── */

.r33-settings-row-desc--warning {
    color: #dc3545;
}

/* ── Top nav row (Messages · Exclusive · Wallet) ────────────────────────── */

.r33-topnav {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    margin       : 15px 0;
    flex-wrap    : wrap;
    padding: 14px 12px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    border-radius: 8px;
    background: linear-gradient(
        to bottom,
        rgba(255,255,255,0.02),
        rgba(0,0,0,0.95)
    );
}

.r33-topnav-link {
    display        : inline-flex;
    align-items    : center;
    padding        : 6px 14px;
    border-radius  : 6px;
    font-size      : 14px;
    font-weight    : 500;
    color          : rgba(255,255,255,0.65);
    text-decoration: none;
    transition     : all 0.2s ease;
    border         : 1px solid transparent;
}

.r33-topnav-link:hover {
    background: rgba(212, 175, 55, 0.08);
    color: #d1b36b;
    border-color: rgba(255,255,255,.08);
}

.r33-topnav-link--active {
    background: rgba(212, 175, 55, 0.12);
    color: #d1b36b;
    font-weight : 600;
    border-color: rgba(255,255,255,.12);
    box-shadow:
        inset 0 0 0 1px rgba(212, 175, 55, 0.25),
        0 0 12px rgba(212, 175, 55, 0.15);
}


/* ── Field / section highlight — applied by JS when ?highlight= param present */

/* Accent (pink) glow on the module form container */
.r33-section--highlighted {
    border    : 1px solid var(--r33-accent, #e91e8c) !important;
    box-shadow: 0 0 0 3px rgba(233,30,140,.10);
    animation : r33-section-pulse 1.6s ease 0.4s 2;
}

@keyframes r33-section-pulse {
    0%   { box-shadow: 0 0 0 0    rgba(233,30,140,.35); }
    70%  { box-shadow: 0 0 0 10px rgba(233,30,140,.0);  }
    100% { box-shadow: 0 0 0 0    rgba(233,30,140,.0);  }
}

/* Per-field accent highlight (for fields tagged data-r33-guide) */
.r33-field-highlight {
    border    : 2px solid var(--r33-accent, #e91e8c) !important;
    background: rgba(233,30,140,.05) !important;
    animation : r33-field-pulse-accent 1.2s ease 0.4s 2;
}

@keyframes r33-field-pulse-accent {
    0%   { box-shadow: 0 0 0 0   rgba(233,30,140,.4); }
    70%  { box-shadow: 0 0 0 6px rgba(233,30,140,.0); }
    100% { box-shadow: 0 0 0 0   rgba(233,30,140,.0); }
}

/* Legacy — kept for any explicit uses */
.r33-field-missing {
    border    : 2px solid #e74c3c !important;
    background: rgba(231,76,60,.06) !important;
    animation : r33-field-pulse 1.2s ease 0.4s 2;
}

@keyframes r33-field-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(231,76,60,.5); }
    70%  { box-shadow: 0 0 0 6px rgba(231,76,60,.0); }
    100% { box-shadow: 0 0 0 0   rgba(231,76,60,.0); }
}
/* ── Top-up success banner ───────────────────────────────────────────────── */

.r33-topup-banner {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    padding      : 12px 18px;
    margin-bottom: 16px;
    background   : rgba(34, 197, 94, 0.08);
    border       : 1px solid rgba(34, 197, 94, 0.25);
    border-radius: var(--r33-radius, 12px);
    font-size    : 0.85rem;
    color        : var(--r33-text, #e0e0e0);
}

.r33-topup-banner strong {
    color: #22c55e;
}