/* ============================================================
   /data/css/ui/badges.css
   - Shared badge / pill styles
   - Uses legacy page class names so no markup changes are needed
   ============================================================ */

/* ============================================================
   Base pill / badge shapes
   ============================================================ */

.badge,
.expiry-badge,
.accounting-receipts-badge,
.clients-project-status,
.clients-project-due-pill,
.hosting-status-badge,
.domain-manage-badge,
.inv-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    white-space: nowrap;
}

/* Medium badges */
.badge,
.expiry-badge,
.accounting-receipts-badge,
.clients-project-status,
.hosting-status-badge {
    min-height: 28px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

/* Small pills */
.clients-project-due-pill,
.domain-manage-badge,
.inv-pill {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

/* Due/date pills */
.clients-project-due-pill {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
}

/* Tiny management badge */
.domain-manage-badge {
    min-height: 22px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Invoice view pill */
.inv-pill {
    padding: 6px 10px;
}

/* ============================================================
   Shared semantic variants
   ============================================================ */

/* Success */
.badge-paid,
.accounting-receipts-direction-income,
.hosting-status-badge.is-active {
    border-color: rgba(80, 200, 120, 0.34);
    background: rgba(80, 200, 120, 0.16);
    color: #dff7e7;
}

/* Danger */
.badge-overdue,
.accounting-receipts-direction-expense,
.hosting-status-badge.is-inactive,
.domain-manage-badge.is-external {
    border-color: rgba(255, 90, 90, 0.34);
    background: rgba(255, 90, 90, 0.16);
    color: #ffe3e3;
}

/* Info */
.badge-sent,
.accounting-receipts-status-linked {
    border-color: rgba(90, 170, 255, 0.34);
    background: rgba(90, 170, 255, 0.16);
    color: #e3f0ff;
}

/* Warning */
.badge-draft,
.accounting-receipts-status-unlinked {
    border-color: rgba(255, 190, 90, 0.34);
    background: rgba(255, 190, 90, 0.16);
    color: #fff2d9;
}

/* Neutral / muted */
.badge-void,
.accounting-receipts-direction-unlinked,
.expiry-expired {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   Project status semantic variants
   ============================================================ */

.clients-project-status.is-planned {
    background: rgba(108, 117, 125, 0.18);
    border-color: rgba(108, 117, 125, 0.55);
}

.clients-project-status.is-in-dev {
    background: rgba(13, 110, 253, 0.18);
    border-color: rgba(13, 110, 253, 0.55);
}

.clients-project-status.is-waiting-client {
    background: rgba(255, 152, 0, 0.18);
    border-color: rgba(255, 152, 0, 0.55);
}

.clients-project-status.is-on-hold {
    background: rgba(139, 92, 246, 0.18);
    border-color: rgba(139, 92, 246, 0.55);
}

.clients-project-status.is-ready-review {
    background: rgba(6, 182, 212, 0.18);
    border-color: rgba(6, 182, 212, 0.55);
}

.clients-project-status.is-done {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.55);
}

.clients-project-status.is-cancelled {
    background: rgba(220, 53, 69, 0.18);
    border-color: rgba(220, 53, 69, 0.55);
}

/* ============================================================
   Project due semantic variants
   ============================================================ */

.clients-project-due-pill.is-no-due,
.clients-project-due-pill.is-dim {
    color: rgba(255, 255, 255, 0.68);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}

.clients-project-due-pill.is-future {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
}

.clients-project-due-pill.is-due-soon {
    color: #ffffff;
    background: rgba(255, 152, 0, 0.18);
    border-color: rgba(255, 152, 0, 0.55);
}

.clients-project-due-pill.is-today {
    color: #ffffff;
    background: rgba(255, 111, 0, 0.22);
    border-color: rgba(255, 111, 0, 0.60);
}

.clients-project-due-pill.is-overdue {
    color: #ffffff;
    background: rgba(220, 53, 69, 0.18);
    border-color: rgba(220, 53, 69, 0.55);
}

/* ============================================================
   Expiry badge semantic variants
   ============================================================ */

.expiry-ok {
    border-color: rgba(60, 180, 110, 0.30);
    background: rgba(60, 180, 110, 0.14);
}

.expiry-warn {
    border-color: rgba(255, 200, 60, 0.35);
    background: rgba(255, 200, 60, 0.15);
    color: rgba(255, 230, 150, 0.95);
}

.expiry-danger {
    border-color: rgba(255, 80, 80, 0.35);
    background: rgba(255, 80, 80, 0.16);
    color: rgba(255, 190, 190, 0.95);
}

.expiry-expired {
    color: rgba(255, 255, 255, 0.90);
}

.expiry-missing {
    opacity: .8;
}

/* ============================================================
   Small legacy nuances
   ============================================================ */

.badge-draft {
    opacity: .85;
}

.badge-void {
    opacity: .7;
}

.hosting-status-badge {
    letter-spacing: 0.02em;
}