/* ============================================================
   /data/css/ui/chips.css
   - Shared chip / tag styles
   - Uses legacy page class names so no markup changes are needed
   ============================================================ */

/* ============================================================
   Base chip geometry
   ============================================================ */

.hosting-client-tag,
.hosting-client-domain-tag,
.domain-linked-server-pill,
.clients-project-tag,
.projects-form-tag-btn {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 999px;
    user-select: none;
    -webkit-user-select: none;
}

/* Small chips */
.hosting-client-domain-tag,
.domain-linked-server-pill,
.clients-project-tag {
    min-height: 24px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1;
}

/* Medium chips */
.hosting-client-tag {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 13px;
    line-height: 1;
}

/* Selectable form chips */
.projects-form-tag-btn {
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

/* ============================================================
   Default neutral chip look
   ============================================================ */

.hosting-client-domain-tag,
.domain-linked-server-pill,
.clients-project-tag,
.projects-form-tag-btn {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
}

.hosting-client-tag {
    border: 1px solid rgba(255, 136, 0, 0.28);
    background: rgba(255, 136, 0, 0.10);
    color: #f2f4f8;
}

/* ============================================================
   Shared transitions
   ============================================================ */

.hosting-client-tag,
.hosting-client-domain-tag,
.domain-linked-server-pill,
.projects-form-tag-btn {
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        filter 0.15s ease;
}

/* ============================================================
   Hover / selected states
   ============================================================ */

.projects-form-tag:hover .projects-form-tag-btn {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
}

.projects-form-tag-input:checked + .projects-form-tag-btn {
    color: #ffffff;
    border-color: rgba(255, 136, 0, 0.45);
    background: rgba(255, 136, 0, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hosting-domain-option:hover .hosting-client-domain-tag {
    border-color: rgba(255, 136, 0, 0.35);
    background: rgba(255, 136, 0, 0.08);
    color: #ffffff;
}

.hosting-domain-option input:checked + .hosting-client-domain-tag {
    background: rgba(255, 136, 0, 0.18);
    border-color: rgba(255, 136, 0, 0.55);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 136, 0, 0.25);
}

/* ============================================================
   Linked chip behavior
   ============================================================ */

.hosting-client-tag.is-link,
.hosting-domain-tag.is-link {
    text-decoration: none;
    display: inline-flex;
}

.hosting-client-tag.is-link:hover,
.hosting-client-tag.is-link:focus,
.hosting-domain-tag.is-link:hover,
.hosting-domain-tag.is-link:focus {
    text-decoration: none;
    color: #ffffff;
    filter: brightness(1.06);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.06),
        0 0 12px rgba(255, 255, 255, 0.10);
    transform: translateY(-1px);
}

.hosting-client-tag.is-link:visited,
.hosting-domain-tag.is-link:visited,
.hosting-client-tag.is-link:active,
.hosting-domain-tag.is-link:active {
    text-decoration: none;
    color: #f2f4f8;
}

/* ============================================================
   Shared palette
   ============================================================ */

.hosting-client-tag.tag-1,
.domain-linked-server-pill.tag-1 {
    border-color: rgba(230, 70, 70, 0.36);       /* red */
    background: rgba(230, 70, 70, 0.14);
}

.hosting-client-tag.tag-2,
.domain-linked-server-pill.tag-2 {
    border-color: rgba(46, 184, 92, 0.36);       /* green */
    background: rgba(46, 184, 92, 0.14);
}

.hosting-client-tag.tag-3,
.domain-linked-server-pill.tag-3 {
    border-color: rgba(60, 130, 255, 0.36);      /* blue */
    background: rgba(60, 130, 255, 0.14);
}

.hosting-client-tag.tag-4,
.domain-linked-server-pill.tag-4 {
    border-color: rgba(145, 90, 255, 0.36);      /* purple */
    background: rgba(145, 90, 255, 0.14);
}

.hosting-client-tag.tag-5,
.domain-linked-server-pill.tag-5 {
    border-color: rgba(255, 140, 40, 0.36);      /* orange */
    background: rgba(255, 140, 40, 0.14);
}

.hosting-client-tag.tag-6,
.domain-linked-server-pill.tag-6 {
    border-color: rgba(0, 185, 170, 0.36);       /* teal */
    background: rgba(0, 185, 170, 0.14);
}

.hosting-client-tag.tag-7,
.domain-linked-server-pill.tag-7 {
    border-color: rgba(170, 185, 40, 0.36);      /* olive / yellow-green */
    background: rgba(170, 185, 40, 0.15);
}

.hosting-client-tag.tag-8,
.domain-linked-server-pill.tag-8 {
    border-color: rgba(235, 90, 170, 0.36);      /* pink */
    background: rgba(235, 90, 170, 0.14);
}