/* Collections widget styles. Class prefix `cx-`. The host links this once:
   <link rel="stylesheet"
         href="_content/PSC.Blazor.Components.Dashboards.Collections/css/collections.css" />
   Colours fall back to Bootstrap CSS variables so it blends with the host theme. */

.cx-collection {
    --cx-accent: #6366f1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .75rem;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--bs-body-color, #0f172a);
}

.cx-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid color-mix(in srgb, var(--cx-accent) 18%, transparent);
}
.cx-title {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-secondary-color, #64748b);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.cx-title::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cx-accent);
    flex-shrink: 0;
}
.cx-count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--cx-accent);
    background: color-mix(in srgb, var(--cx-accent) 12%, transparent);
    border-radius: 999px;
    padding: .05rem .45rem;
    flex-shrink: 0;
}

/* Scroll area for the items. */
.cx-items {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-right: .15rem;
}
.cx-grid .cx-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
}

/* Base card. */
.cx-card {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    padding: .5rem .6rem;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .6rem;
    background: var(--bs-body-bg, #fff);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
a.cx-card:hover {
    border-color: color-mix(in srgb, var(--cx-accent) 45%, var(--bs-border-color, #e5e7eb));
    box-shadow: 0 1px 6px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}
a.cx-card:active { transform: scale(.99); }

/* Link card. */
.cx-favicon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: .4rem;
    background: var(--bs-tertiary-bg, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.cx-favicon img { width: 18px; height: 18px; }
.cx-favicon i { color: var(--cx-accent); font-size: 1rem; }
.cx-link-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .05rem; }
.cx-link-title {
    font-size: .85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cx-link-host { font-size: .7rem; color: var(--bs-secondary-color, #94a3b8); }
.cx-link-note {
    font-size: .75rem;
    color: var(--bs-secondary-color, #64748b);
    margin-top: .15rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cx-link-go { color: var(--bs-secondary-color, #cbd5e1); font-size: .8rem; align-self: center; flex-shrink: 0; }
a.cx-card:hover .cx-link-go { color: var(--cx-accent); }

/* Note card — a soft sticky-note tint of the accent. */
.cx-note {
    background: color-mix(in srgb, var(--cx-accent) 8%, var(--bs-body-bg, #fff));
    border-color: color-mix(in srgb, var(--cx-accent) 22%, transparent);
}
.cx-note-text { font-size: .82rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }

/* Image card. */
.cx-image { flex-direction: column; gap: .35rem; padding: .4rem; overflow: hidden; }
.cx-image-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: .4rem;
    display: block;
    background: var(--bs-tertiary-bg, #f1f5f9);
}
.cx-image-caption { font-size: .75rem; color: var(--bs-secondary-color, #64748b); }

/* Empty state. */
.cx-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    text-align: center;
    color: var(--bs-secondary-color, #94a3b8);
}
.cx-empty .bi { font-size: 1.5rem; opacity: .6; }
.cx-empty span { font-size: .82rem; }
.cx-empty-hint { font-size: .72rem; opacity: .8; }

/* ---- Editor (settings panel) ---- */
.cx-ed-count {
    font-size: .7rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #94a3b8);
    margin-left: .25rem;
}
.cx-ed-item {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .5rem;
    padding: .5rem;
    margin-bottom: .45rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    background: var(--bs-tertiary-bg, #f8fafc);
}
.cx-ed-item-head { display: flex; align-items: center; justify-content: space-between; }
.cx-ed-kind { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color, #64748b); display: inline-flex; align-items: center; gap: .3rem; }
.cx-ed-tools { display: inline-flex; gap: .15rem; }
.cx-ed-tools button,
.cx-ed-add button {
    appearance: none;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #64748b);
    border-radius: .35rem;
    width: 26px;
    height: 26px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
}
.cx-ed-tools button:disabled { opacity: .4; cursor: default; }
.cx-ed-tools button:not(:disabled):hover { color: var(--bs-primary, #6366f1); border-color: var(--bs-primary, #6366f1); }
.cx-ed-del:hover { color: var(--bs-danger, #dc2626) !important; border-color: var(--bs-danger, #dc2626) !important; }

.cx-ed-add {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .25rem;
}
.cx-ed-add button {
    width: auto;
    height: auto;
    padding: .3rem .55rem;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 500;
}
.cx-ed-add button:hover { color: var(--bs-primary, #6366f1); border-color: var(--bs-primary, #6366f1); }

/* ---- Overview: the list of collections (groups) ---- */
.cx-groups {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-right: .15rem;
}
.cx-group-card {
    appearance: none;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .55rem;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .6rem;
    background: var(--bs-body-bg, #fff);
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}
.cx-group-card:hover {
    border-color: color-mix(in srgb, var(--cx-accent) 45%, var(--bs-border-color, #e5e7eb));
    box-shadow: 0 1px 6px color-mix(in srgb, var(--cx-accent) 18%, transparent);
}
.cx-group-card:active { transform: scale(.99); }
.cx-group-card:focus-visible { outline: 2px solid var(--cx-accent); outline-offset: 1px; }

.cx-cover {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--bs-tertiary-bg, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cx-cover img { width: 100%; height: 100%; object-fit: cover; }
.cx-cover img.cx-cover-fav { width: 22px; height: 22px; object-fit: contain; }
.cx-cover-letter {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cx-accent),
        color-mix(in srgb, var(--cx-accent) 55%, #000));
}
.cx-group-body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .1rem; }
.cx-group-name {
    font-size: .9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cx-group-count { font-size: .72rem; color: var(--bs-secondary-color, #94a3b8); }
.cx-group-go { color: var(--bs-secondary-color, #cbd5e1); font-size: .85rem; flex-shrink: 0; }
.cx-group-card:hover .cx-group-go { color: var(--cx-accent); }

/* Detail header with a back button. */
.cx-detail-header { gap: .4rem; }
.cx-back {
    appearance: none;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    background: var(--bs-body-bg, #fff);
    color: var(--bs-secondary-color, #64748b);
    border-radius: .4rem;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.cx-back:hover { color: var(--cx-accent); border-color: var(--cx-accent); }

/* ---- Editor: group blocks ---- */
.cx-ed-group {
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .5rem;
    margin-bottom: .45rem;
    background: var(--bs-body-bg, #fff);
    overflow: hidden;
}
.cx-ed-group-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem;
    background: var(--bs-tertiary-bg, #f8fafc);
}
.cx-ed-expand {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--bs-secondary-color, #64748b);
    cursor: pointer;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cx-ed-group-name { flex: 1; min-width: 0; font-weight: 600; }
.cx-ed-group-body { padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.cx-ed-group-body .cx-ed-item { background: var(--bs-tertiary-bg, #f8fafc); margin-bottom: 0; }
.cx-ed-add-group { margin-top: .25rem; }
.cx-ed-add-group button { font-weight: 600; }