/* =========================================================
   BUAI — Avatar, rainbow sidebar & notification theme
   Loaded by the dashboard layout (dash.css) and marketplace
   pages (main.css already carries the pastel tokens).

   Palette (soft pastel rainbow):
     pink    #f7dce7    peach   #fce4d2
     yellow  #f6f1d4    mint    #ddf0e2
     sky     #d9ecf9    lavender #e5d9f2
     lilac   #ece2f6
   ========================================================= */

:root {
    --rb-pink: #f7dce7;
    --rb-peach: #fce4d2;
    --rb-yellow: #f6f1d4;
    --rb-mint: #ddf0e2;
    --rb-sky: #d9ecf9;
    --rb-lavender: #e5d9f2;
    --rb-lilac: #ece2f6;
    /* gentle full-rainbow wash used on hovered/selected sidebar items */
    --rb-wash: linear-gradient(100deg,
        var(--rb-pink) 0%, var(--rb-peach) 20%, var(--rb-yellow) 40%,
        var(--rb-mint) 60%, var(--rb-sky) 80%, var(--rb-lavender) 100%);
    /* notification accents */
    --rb-info: #d9ecf9;
    --rb-info-text: #2a5d7c;
    --rb-success: #ddf0e2;
    --rb-success-text: #2e6b40;
    --rb-warning: #fce4d2;
    --rb-warning-text: #8a5a23;
    --rb-error: #f8e4e6;
    --rb-error-text: #8f3a44;
    --rb-unread: #e5d9f2;
    --rb-unread-text: #4f3a6d;
}

/* =========================================================
   1. Profile avatars — circular, object-fit cover, initials
      fallback underneath the image (image hides on error)
   ========================================================= */
.rw-avatar,
.account-avatar,
.msg-avatar,
.bs-avatar,
.chat-row-avatar,
.dash-conversation-avatar,
.dash-enquiry-avatar,
.admin-topbar-avatar,
.msg-head-avatar img,
.chat-head-avatar,
.chat-msg-avatar,
.msg-bubble-avatar,
.dash-message-avatar,
.dash-thread-avatar {
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    background: var(--rb-lilac, #ece2f6);
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
}

.rw-avatar img,
.account-avatar img,
.msg-avatar img,
.bs-avatar img,
.chat-row-avatar img,
.dash-conversation-avatar img,
.dash-enquiry-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

/* every avatar container gets the initials fallback behind the image */
.account-avatar,
.msg-avatar,
.bs-avatar,
.chat-row-avatar,
.dash-conversation-avatar,
.dash-enquiry-avatar {
    position: relative;
    color: #4f3a6d;
    font-weight: 700;
}
.account-avatar::before,
.msg-avatar::before,
.bs-avatar::before,
.chat-row-avatar::before,
.dash-conversation-avatar::before,
.dash-enquiry-avatar::before {
    content: "";
}
/* hide the image when it fails; the initial letter shows through */
img.rw-fallback-hidden { display: none !important; }

/* sizes */
.account-avatar { width: 34px; height: 34px; font-size: 14px; }
.msg-avatar, .chat-row-avatar { width: 40px; height: 40px; font-size: 15px; }
.bs-avatar { width: 28px; height: 28px; font-size: 12px; }
.bs-card .bs-avatar { width: 24px; height: 24px; font-size: 10px; }
.admin-topbar-avatar { width: 32px; height: 32px; object-fit: cover; }
.dash-enquiry-avatar { width: 22px; height: 22px; font-size: 10px; vertical-align: middle; margin-right: 4px; display: inline-grid; }
.msg-head-avatar { display: flex; align-items: center; gap: 14px; }
.msg-head-avatar img { width: 56px; height: 56px; object-fit: cover; }
.chat-head-avatar { width: 26px; height: 26px; object-fit: cover; margin-right: 6px; }
.chat-row-avatar img { position: relative; z-index: 1; }
.chat-row-avatar.no-img img { display: none; }
.chat-row-letter { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; }
.dash-conversation-avatar { width: 38px; height: 38px; font-size: 15px; border-radius: 14px; }
.dash-conversation-avatar img { position: relative; z-index: 1; border-radius: 14px; }
.dash-conversation-avatar.no-img img { display: none; }
.dash-conversation-letter { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; }

/* message bubble avatars (aligned with names/timestamps) */
.chat-bubble-row { display: flex; align-items: flex-end; gap: 7px; }
.chat-bubble-row.chat-mine { flex-direction: row-reverse; }
.chat-msg-avatar { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; background: var(--rb-lilac); }
.chat-msg-avatar.hidden-av { display: none; }
.chat-bubble-row.cont { margin-top: -4px; }

.msg-row-bubble { display: flex; align-items: flex-end; gap: 8px; }
.msg-bubble-avatar { width: 26px; height: 26px; object-fit: cover; border-radius: 50%; background: var(--rb-lilac); }
.msg-row-bubble.msg-cont { margin-top: -6px; }
.msg-row-bubble.msg-mine { flex-direction: row-reverse; }

.dash-message-avatar { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; background: var(--rb-lilac); flex: 0 0 22px; }
.dash-message-bubble { display: flex; align-items: flex-end; gap: 8px; background-clip: padding-box; }
.dash-bubble-content { flex: 1 1 auto; min-width: 0; }
.dash-message-bubble.cont { margin-top: -6px; }
.dash-thread-avatar { width: 34px; height: 34px; object-fit: cover; }
.dash-thread-subject { display: flex; align-items: center; gap: 10px; }
.dash-thread-subject-title { color: var(--buai-muted, #73776f); font-weight: 500; }

/* =========================================================
   2. Dashboard sidebar — charcoal default, rainbow hover/active
   ========================================================= */
.dash-sidebar {
    background: linear-gradient(180deg, #17191b 0%, #101113 100%);
}
.dash-brand span { color: var(--rb-lavender, #e5d9f2); }

.dash-nav a {
    margin: 2px 10px;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    border-left: 3px solid transparent !important;
    color: #c6c7c2 !important;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.dash-nav a:hover {
    background: var(--rb-wash) !important;
    color: #26241f !important;
    font-weight: 600;
    transform: translateX(2px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
}
.dash-nav a:focus-visible {
    outline: 3px solid var(--rb-lavender);
    outline-offset: 1px;
    background: var(--rb-wash);
    color: #26241f;
}
.dash-nav a.active {
    background: var(--rb-wash) !important;
    color: #26241f !important;
    border-left-color: #a98fd4 !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 3px 12px rgba(0, 0, 0, .25);
}
.dash-nav a.active:hover { transform: none; }
.dash-nav a.active::before,
.dash-nav a[data-dash-link]::before { color: inherit; }
.dash-nav .dash-nav-label { margin: 0 10px; padding: 16px 14px 5px; color: #8b8d88; letter-spacing: 2px; }
.dash-nav a { background-origin: border-box; }

/* badge on sidebar items — soft lavender accent, dark text */
.dash-nav .dash-badge,
.dash-badge {
    background: var(--rb-unread, #e5d9f2) !important;
    color: #4f3a6d !important;
}

/* admin (superadmin) sidebar — same treatment */
.admin-sidebar { background: linear-gradient(180deg, #17191b 0%, #101113 100%); }
.admin-nav a {
    margin: 2px 10px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.admin-nav a:hover {
    background: var(--rb-wash) !important;
    color: #26241f !important;
    font-weight: 600;
    transform: translateX(2px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .25);
}
.admin-nav a:focus-visible {
    outline: 3px solid var(--rb-lavender);
    outline-offset: 1px;
    background: var(--rb-wash);
    color: #26241f;
}
.admin-nav a.active {
    background: var(--rb-wash) !important;
    color: #26241f !important;
    border-left-color: #a98fd4 !important;
    font-weight: 700 !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 3px 12px rgba(0, 0, 0, .25);
}
.admin-nav a.active:hover { transform: none; }

@media (prefers-reduced-motion: reduce) {
    .dash-nav a, .admin-nav a { transition: none !important; transform: none !important; }
}

/* =========================================================
   3. Notifications — pastel rainbow instead of harsh yellow
   ========================================================= */
/* unread badges (nav messages, chat rows, dashboard inbox) */
.msg-unread-badge,
.chat-unread-badge,
.dash-message-unread {
    background: var(--rb-unread) !important;
    color: var(--rb-unread-text) !important;
}
/* unread row highlight — lavender edge instead of yellow */
.msg-row-unread { border-left: 4px solid var(--rb-unread) !important; }
.chat-row-unread { border-left: 4px solid var(--rb-unread) !important; }

/* floating chat launcher count */
.chat-unread {
    background: var(--rb-unread) !important;
    color: var(--rb-unread-text) !important;
}

/* dashboards: warning pill + notice + pending status track */
.dash-pill.warn { background: var(--rb-warning) !important; color: var(--rb-warning-text) !important; }
.dash-notice { background: var(--rb-warning) !important; border: 1px solid #f0d2b8 !important; color: var(--rb-warning-text) !important; }
.dash-status-track span.status-yellow,
.dash-status-legend .status-yellow { background: #f3e3a8; }
.dash-status-legend .status-yellow i, .dash-status-track span.status-yellow { background: #f3e3a8 !important; }

/* admin alerts */
.admin-alert.success { background: var(--rb-success) !important; color: var(--rb-success-text) !important; }
.admin-alert.error { background: var(--rb-error) !important; color: var(--rb-error-text) !important; }
.dash-flash.success { background: var(--rb-success) !important; color: var(--rb-success-text) !important; }
.dash-flash.error { background: var(--rb-error) !important; color: var(--rb-error-text) !important; }

/* admin status badges */
.admin-body .status-badge.pending,
.admin-body .status-badge.replied,
.status-badge.pending {
    background: var(--rb-warning) !important;
    color: var(--rb-warning-text) !important;
}

/* boosted badges + pending banners — soft peach */
.bs-badge.boost { background: var(--rb-peach) !important; color: #7c4a17 !important; }
.bs-dash-row.is-boosted { border-left-color: var(--rb-peach) !important; }
.svc-apply-banner.pending { border-left: 4px solid var(--rb-peach) !important; background: #fdf3ea !important; }

/* stat cards keep their pastel look; the yellow one softens */
.stat-card.pastel-yellow { background: #fbf8e9 !important; }

/* account page booking + barber-dash status */
.ab-status.upcoming, .sd-badge.upcoming {
    background: var(--rb-warning) !important;
    color: var(--rb-warning-text) !important;
}