/* ============================================================
   RCN — Phase 2 UI 2.0 dashboard polish (5 jun 2026)
   Loaded AFTER overrides.css, only on the user dashboard (is_author),
   via rcn/inc/ui-fixes.php. All selectors are `body.rcn-theme …` so they
   win over base.css. Zero functional change — render/spacing only.
   ============================================================ */

/* ---- B7 — KPI stat cards ----
   Descriptions were moved to each card's `title` tooltip in dashboard.php, so
   the body is number + label only. Center the icon against the shorter body
   and enforce a min-height so every card in a row matches even if a label
   wraps to two lines. */
body.rcn-theme .rcn-kpi-card {
    align-items: center !important;
    min-height: 92px !important;
}
body.rcn-theme .rcn-kpi-card__label {
    line-height: 1.25 !important;
}

/* ---- B8 — Pro-tip icons ----
   Emoji replaced with inline stroke SVGs in dashboard.php. Style the
   `.rcn-tip__icon` wrapper as a brand icon chip (matches the KPI / sidebar
   icon language) instead of the old 28px emoji glyph. */
body.rcn-theme .rcn-tip__icon {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    font-size: 0 !important;
}
body.rcn-theme .rcn-tip__icon svg {
    width: 22px !important;
    height: 22px !important;
    color: currentColor !important;
}

/* ---- B9 — My Listings rows ----
   (a) The weekly-views figure already shows as the red trend badge next to the
       title, so hide the duplicate "X this week" pill in the meta stats row.
       That row is always exactly: total views · this week · favorites, so
       nth-child(2) is reliably the duplicate. */
body.rcn-theme .rcn-mylisting-row__stats span:nth-child(2) {
    display: none !important;
}
/* (b) Give the actions column a FIXED width so View / Edit / Mark sold /
   Duplicate / Delete align across every card (the track was `auto`, so it
   shifted with each row's button set). Desktop only — the mobile flex layout
   in user-area.css's max-width:768px block keeps its own !important rules. */
@media (min-width: 769px) {
    body.rcn-theme .rcn-mylisting-row__main {
        grid-template-columns: 140px minmax(0, 1fr) 160px 168px !important;
    }
    body.rcn-theme .rcn-mylisting-row__actions {
        width: 100% !important;
    }
    body.rcn-theme .rcn-mylisting-row__actions .rcn-btn {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ---- B10 — Profile photo upload ----
   The avatar <input type="file"> already carries the `hidden` attribute, but a
   theme input rule (specificity > [hidden]) overrides it, so the raw native
   "Choose file" control leaks into the card. Force it hidden — the styled
   "Upload photo" / "Change photo" button triggers it via
   $refs.fileInput.click(), which still fires on a display:none input — and the
   live image preview gives the user their visual feedback. */
body.rcn-theme .rcn-avatar-upload input[type="file"] {
    display: none !important;
}

/* ---- B11 — Notifications: day grouping + STAFF / moderation badge ---- */
body.rcn-theme .rcn-notif-group { margin-bottom: 18px !important; }
body.rcn-theme .rcn-notif-group:last-child { margin-bottom: 0 !important; }
body.rcn-theme .rcn-notif-group__label {
    font-size: 11.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 0 8px 2px !important;
}
body.rcn-theme .rcn-notif-titlerow {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
/* STAFF badge: visibility is driven by the parent `.rcn-notif-item--staff`
   class (same isStaffNotif() check as the template's x-show), NOT by the
   badge's own display. Hidden by default so an !important display can't fight
   Alpine's x-show; shown only when the item itself is a staff/mod item. */
body.rcn-theme .rcn-notif-staff-tag {
    display: none !important;
    align-items: center !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fcd34d !important;
    line-height: 1.6 !important;
    flex-shrink: 0 !important;
}
body.rcn-theme .rcn-notif-item--staff .rcn-notif-staff-tag {
    display: inline-flex !important;
}
/* Moderation / staff items: subtle amber accent so they read differently from
   personal notifications at a glance — without removing them from the feed. */
body.rcn-theme .rcn-notif-item--staff {
    border-left: 3px solid #f59e0b !important;
    background: linear-gradient(90deg, #fffbeb 0%, rgba(255, 251, 235, 0) 62%) !important;
}
body.rcn-theme .rcn-notif-item--staff .rcn-notif-icon {
    background: #fef3c7 !important;
    color: #b45309 !important;
}

/* ============================================================
   B12 — Dashboard overview upgrades (12 jun 2026)
   Action-needed banner · KPI views trend · recent-messages
   mini-feed. Additive presentation only — all data comes from
   existing helpers (no new endpoints / tables).
   ============================================================ */

/* ---- Action-needed banner (pending moderation + drafts) ---- */
body.rcn-theme .rcn-dash-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}
body.rcn-theme .rcn-dash-alert__icon {
    width: 38px;
    height: 38px;
    background: #fef3c7;
    color: #b45309;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.rcn-theme .rcn-dash-alert__body { flex: 1; min-width: 220px; }
body.rcn-theme .rcn-dash-alert__body strong {
    display: block;
    color: #92400e;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 2px;
}
body.rcn-theme .rcn-dash-alert__body p {
    margin: 0;
    color: #78350f;
    font-size: 13px;
    line-height: 1.5;
}
body.rcn-theme .rcn-dash-alert .rcn-btn { flex-shrink: 0; }

/* ---- KPI views trend (sub-line under Total Views) ---- */
body.rcn-theme .rcn-kpi-trend {
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}
body.rcn-theme .rcn-kpi-trend.is-up   { color: #15803d; }
body.rcn-theme .rcn-kpi-trend.is-down { color: #b91c1c; }
body.rcn-theme .rcn-kpi-trend__prev {
    color: #94a3b8;
    font-weight: 500;
}

/* ---- Recent messages mini-feed ---- */
body.rcn-theme .rcn-dash-msgs {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    overflow: hidden;
}
body.rcn-theme .rcn-dash-msgs__unread {
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: middle;
}
body.rcn-theme .rcn-dash-msg {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f1f5f9;
    transition: background .15s;
}
body.rcn-theme .rcn-dash-msg:last-child { border-bottom: none; }
body.rcn-theme .rcn-dash-msg:hover { background: #fafbfc; }
body.rcn-theme .rcn-dash-msg.is-unread {
    border-left: 3px solid #dc2626;
    padding-left: 15px;
    background: #fff;
}
body.rcn-theme .rcn-dash-msg__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
body.rcn-theme .rcn-dash-msg__body { flex: 1; min-width: 0; }
body.rcn-theme .rcn-dash-msg__top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
body.rcn-theme .rcn-dash-msg__top strong {
    color: #0f172a;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.rcn-theme .rcn-dash-msg.is-unread .rcn-dash-msg__top strong { font-weight: 800; }
body.rcn-theme .rcn-dash-msg__time {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
    flex-shrink: 0;
}
body.rcn-theme .rcn-dash-msg__subject {
    color: #dc2626;
    font-size: 11.5px;
    font-weight: 600;
    margin: 1px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.rcn-theme .rcn-dash-msg__preview {
    color: #6b7280;
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
body.rcn-theme .rcn-dash-msg.is-unread .rcn-dash-msg__preview {
    color: #0f172a;
    font-weight: 600;
}
body.rcn-theme .rcn-dash-msg__badge {
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Contextual tip links */
body.rcn-theme .rcn-tip p a {
    color: #dc2626;
    font-weight: 700;
    text-decoration: underline;
}

@media (max-width: 600px) {
    body.rcn-theme .rcn-dash-alert { padding: 12px 14px; }
    body.rcn-theme .rcn-dash-alert .rcn-btn { width: 100%; justify-content: center; }
}