/* ================================================================
   Role Dashboards v2.0 — dashboard.css
   Phase 1b additions at bottom of file.
   ================================================================ */

/* ----------------------------------------------------------------
   CSS Custom Properties
   ---------------------------------------------------------------- */
:root {
    --rd-blue:   #2271b1;
    --rd-purple: #6d28d9;
    --rd-orange: #d97706;
    --rd-red:    #dc2626;

    --rd-gray-50:  #f9fafb;
    --rd-gray-100: #f3f4f6;
    --rd-gray-200: #e5e7eb;
    --rd-gray-400: #9ca3af;
    --rd-gray-500: #6b7280;
    --rd-gray-700: #374151;
    --rd-gray-900: #111827;
    --rd-white:    #ffffff;

    --rd-radius:    10px;
    --rd-radius-sm: 6px;
    --rd-shadow:    0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --rd-shadow-md: 0 6px 16px rgba(0,0,0,.10);
    --rd-transition: .2s ease;

    /* Default accent — overridden per role below */
    --rd-accent:       var(--rd-blue);
    --rd-accent-light: rgba(34, 113, 177, .10);
}

/* ----------------------------------------------------------------
   Role Accent Overrides
   ---------------------------------------------------------------- */
.rd-accent-blue   { --rd-accent: var(--rd-blue);   --rd-accent-light: rgba(34,113,177,.10);  }
.rd-accent-purple { --rd-accent: var(--rd-purple); --rd-accent-light: rgba(109,40,217,.10);  }
.rd-accent-orange { --rd-accent: var(--rd-orange); --rd-accent-light: rgba(217,119,6,.10);   }
.rd-accent-red    { --rd-accent: var(--rd-red);    --rd-accent-light: rgba(220,38,38,.10);   }

/* ----------------------------------------------------------------
   Outer Wrapper
   ---------------------------------------------------------------- */
.role-dashboard {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px 56px;
    font-family: inherit;
    color: var(--rd-gray-900);
    box-sizing: border-box;
}

.role-dashboard *,
.role-dashboard *::before,
.role-dashboard *::after {
    box-sizing: inherit;
}

/* ================================================================
   Profile Header
   ================================================================ */

.rd-header {
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--rd-white);
    border-left: 5px solid var(--rd-accent);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    padding: 24px 28px;
    margin-bottom: 36px;
    position: relative; /* needed for the notification bell absolute positioning */
}

/* Notification bell — injected by site-notifications plugin */
.rd-header__bell {
    position: absolute;
    top:   16px;
    right: 16px;
}

/* Avatar wrapper — needed for the unread-message badge */
.rd-avatar-wrap {
    position: relative;
    display:  inline-block;
    flex-shrink: 0;
}

/* Avatar injected by get_avatar() */
.rd-header .rd-avatar,
.rd-header img.rd-avatar {
    width:  72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    border: 3px solid var(--rd-accent) !important;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
}

/* Unread messages badge on avatar */
.rd-avatar-badge {
    position:        absolute;
    top:             -4px;
    right:           -4px;
    min-width:       20px;
    height:          20px;
    padding:         0 4px;
    background:      #ef4444;
    color:           #fff;
    border:          2px solid #fff;
    border-radius:   20px;
    font-size:       10px;
    font-weight:     700;
    line-height:     16px;
    text-align:      center;
    text-decoration: none;
    white-space:     nowrap;
    box-shadow:      0 1px 4px rgba(0,0,0,.25);
    transition:      transform .15s, background .15s;
    z-index:         2;
    display:         flex;
    align-items:     center;
    justify-content: center;
}
.rd-avatar-badge:hover {
    background:  #b91c1c;
    transform:   scale(1.1);
    color:       #fff;
}

.rd-header__info {
    flex: 1;
    min-width: 0;
}

.rd-header__greeting {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--rd-gray-900);
    margin: 0 0 8px;
    line-height: 1.2;
}

.rd-role-badge {
    display: inline-block;
    background: var(--rd-accent);
    color: var(--rd-white);
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 13px;
    border-radius: 20px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.rd-header__msg {
    font-size: .9rem;
    color: var(--rd-gray-500);
    margin: 0;
    line-height: 1.55;
}

/* ================================================================
   Sections
   ================================================================ */

.rd-sections {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.rd-section {
    background: var(--rd-white);
    border-radius: var(--rd-radius);
    box-shadow: var(--rd-shadow);
    overflow: hidden;
}

.rd-section__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    background: var(--rd-gray-50);
    border-bottom: 1px solid var(--rd-gray-200);
}

.rd-section__icon.dashicons {
    color: var(--rd-accent);
    font-size: 17px !important;
    width:  18px !important;
    height: 18px !important;
    line-height: 1 !important;
    flex-shrink: 0;
    margin-top: 1px;
}

.rd-section__title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--rd-gray-700);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.rd-section__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    padding: 22px;
}

/* ================================================================
   Cards
   ================================================================ */

.rd-card {
    position: relative;
    background: var(--rd-white);
    border: 1px solid var(--rd-gray-200);
    border-radius: var(--rd-radius-sm);
    display: flex;
    flex-direction: column;

    /* Hover */
    transition: box-shadow var(--rd-transition), transform var(--rd-transition);

    /* Entrance animation — initial state */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .35s ease, transform .35s ease,
                box-shadow .2s ease;
}

/* JS adds this class to trigger entrance */
.rd-card.rd-card--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Lift on hover — only once visible */
.rd-card.rd-card--visible:hover {
    box-shadow: var(--rd-shadow-md);
    transform: translateY(-3px);
}

/* ---- Count Badge (top-right corner) ---- */
.rd-card__badge {
    position: absolute;
    top: -9px;
    right: -9px;
    background: var(--rd-accent);
    color: var(--rd-white);
    font-size: .7rem;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
    z-index: 1;
}

/* ---- Card Body ---- */
.rd-card__body {
    flex: 1;
    padding: 18px 16px 10px;
}

.rd-card__title {
    font-size: .92rem;
    font-weight: 700;
    color: var(--rd-gray-900);
    margin: 0 0 7px;
    line-height: 1.3;
}

.rd-card__desc {
    font-size: .82rem;
    color: var(--rd-gray-500);
    margin: 0;
    line-height: 1.55;
}

/* ---- Extra Inline Content (order pills, earnings summary) ---- */
.rd-card__extra {
    margin: 12px 16px 0;
    padding-top: 10px;
    border-top: 1px dashed var(--rd-gray-200);
    font-size: .8rem;
    color: var(--rd-gray-700);
    line-height: 1.5;
}

/* Status pill — injected by other plugins via filter */
.rd-status-pill {
    display: inline-block;
    font-size: .72rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 12px;
    margin: 2px 3px 2px 0;
    vertical-align: middle;
    text-transform: capitalize;
}
.rd-status-pill--processing { background: #dbeafe; color: #1d4ed8; }
.rd-status-pill--completed  { background: #dcfce7; color: #15803d; }
.rd-status-pill--pending    { background: #fef9c3; color: #a16207; }
.rd-status-pill--on-hold    { background: #f3e8ff; color: #7e22ce; }
.rd-status-pill--cancelled  { background: #fee2e2; color: #b91c1c; }

/* ---- Card Footer (CTA button) ---- */
.rd-card__footer {
    padding: 10px 16px 16px;
}

.rd-card__btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--rd-accent);
    color: var(--rd-white) !important;
    text-decoration: none !important;
    font-size: .83rem;
    font-weight: 600;
    padding: 9px 14px;
    border-radius: var(--rd-radius-sm);
    line-height: 1.4;
    transition: filter var(--rd-transition), box-shadow var(--rd-transition);
}

.rd-card__btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 4px 12px rgba(0,0,0,.16);
    color: var(--rd-white) !important;
    text-decoration: none !important;
}

/* ================================================================
   Access Denied / Not Logged In Message
   ================================================================ */

.rd-access-denied {
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    border-radius: var(--rd-radius-sm);
    padding: 14px 20px;
    font-size: .9rem;
    color: var(--rd-gray-700);
    margin: 16px 0;
}

.rd-access-denied a {
    color: var(--rd-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* ================================================================
   Responsive — Tablet
   ================================================================ */

@media (max-width: 768px) {
    .rd-header {
        flex-direction: column;
        text-align: center;
        padding: 20px 18px;
        gap: 14px;
    }

    .rd-header__greeting {
        font-size: 1.2rem;
    }

    .rd-section__cards {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 14px;
        padding: 16px;
    }
}

/* ================================================================
   Responsive — Mobile
   ================================================================ */

@media (max-width: 480px) {
    .role-dashboard {
        padding: 0 10px 40px;
    }

    .rd-header {
        padding: 18px 14px;
    }

    .rd-section__cards {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px;
    }

    .rd-sections {
        gap: 20px;
    }
}

/* ================================================================
   Phase 1b — Inline Extra Content Styles
   ================================================================ */

/* ---- Shared extra utilities ------------------------------------------ */
.rd-extra-empty {
    font-size: .8rem;
    color: var(--rd-gray-400);
    margin: 0;
    font-style: italic;
}

.rd-extra-note {
    font-size: .78rem;
    color: var(--rd-gray-500);
    margin: 4px 0 0;
}

.rd-extra-note--warn {
    color: #b45309;
    background: #fef9c3;
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 6px;
}

/* ---- Recent order rows ----------------------------------------------- */
.rd-order-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rd-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    font-size: .8rem;
    border-bottom: 1px solid var(--rd-gray-100);
}

.rd-order-row:last-child { border-bottom: none; }

.rd-order-row__id   { font-weight: 700; color: var(--rd-gray-900); flex-shrink: 0; }
.rd-order-row__date { color: var(--rd-gray-400); flex: 1; text-align: center; }

/* ---- Inline stat chips (design / product counts) --------------------- */
.rd-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.rd-inline-stat {
    font-size: .74rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--rd-gray-100);
    color: var(--rd-gray-700);
    white-space: nowrap;
}

.rd-inline-stat strong { font-weight: 700; }

.rd-inline-stat--active   { background: #dcfce7; color: #15803d; }
.rd-inline-stat--pending  { background: #fef9c3; color: #a16207; }
.rd-inline-stat--rejected { background: #fee2e2; color: #b91c1c; }
.rd-inline-stat--draft    { background: var(--rd-gray-100); color: var(--rd-gray-500); }
.rd-inline-stat--approved { background: #dcfce7; color: #15803d; }

/* ---- Pending design list --------------------------------------------- */
.rd-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rd-pending-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
    border-bottom: 1px solid var(--rd-gray-100);
    font-size: .8rem;
}

.rd-pending-item:last-child { border-bottom: none; }

.rd-pending-item__title {
    font-weight: 600;
    color: var(--rd-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rd-pending-item__note {
    font-size: .74rem;
    color: #b45309;
    font-style: italic;
}

/* ---- Designer application status ------------------------------------- */
.rd-application-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .8rem;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
}

.rd-application-status__dot {
    width:  8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    opacity: .7;
}

.rd-application-status--pending  { background: #fef9c3; color: #a16207; }
.rd-application-status--approved { background: #dcfce7; color: #15803d; }
.rd-application-status--rejected { background: #fee2e2; color: #b91c1c; }
.rd-application-status--draft    { background: var(--rd-gray-100); color: var(--rd-gray-500); }

/* ---- Earnings summary ------------------------------------------------ */
.rd-earnings-summary {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rd-earnings-summary__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .82rem;
}

.rd-earnings-summary__label { color: var(--rd-gray-500); }

.rd-earnings-summary__value {
    font-weight: 700;
    color: var(--rd-gray-900);
}

.rd-earnings-summary__value--secondary {
    font-weight: 600;
    color: var(--rd-gray-500);
    font-size: .78rem;
}

.rd-earnings-diff {
    font-size: .76rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-align: right;
    margin-top: 2px;
}

.rd-earnings-diff--positive { background: #dcfce7; color: #15803d; }
.rd-earnings-diff--negative { background: #fee2e2; color: #b91c1c; }

/* ---- Admin KPI strip ------------------------------------------------- */
.rd-kpi-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rd-kpi {
    flex: 1;
    min-width: 70px;
    text-align: center;
    background: var(--rd-accent-light);
    border-radius: var(--rd-radius-sm);
    padding: 8px 6px;
}

.rd-kpi__value {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--rd-accent);
    line-height: 1.2;
}

.rd-kpi__label {
    display: block;
    font-size: .65rem;
    color: var(--rd-gray-500);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: 2px;
    line-height: 1.3;
}