/* -----------------------------------------------------------------------------
   knowledge-base.css

   Styles for the Knowledge Base module pages. Covers the master-detail
   explorer layout (collections rail + selected-collection main panel), the
   inline icon set, rail search and collapsible filters, the collection hero
   with badges/stats/detail grid, the libraries panel and library cards,
   empty/placeholder states, the quick-create bar, and create/edit dialog
   forms.

   Project : AspireAIApp.Web
   Author  : Theodor Harmse (Teddy)
   Created : 2026-03-26
----------------------------------------------------------------------------- */

/* --- Inline icon set (CSS masks, Lucide-style strokes) --------------------- */

.kb-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--kb-icon-url) center / contain no-repeat;
    mask: var(--kb-icon-url) center / contain no-repeat;
}

.kb-icon--collection { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5Z'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3C/svg%3E"); }
.kb-icon--library { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.kb-icon--search { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); }
.kb-icon--funnel { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54Z'/%3E%3C/svg%3E"); }
.kb-icon--chevron-right { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.kb-icon--chevron-down { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.kb-icon--star { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01Z'/%3E%3C/svg%3E"); }
.kb-icon--archive { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='5' rx='1'/%3E%3Cpath d='M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E"); }
.kb-icon--plus { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E"); }
.kb-icon--file { --kb-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }

.knowledge-base-page .btn .kb-icon {
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.35rem;
    vertical-align: -0.1em;
}

/* --- Page layout and header ------------------------------------------------ */

.knowledge-base-page {
    display: grid;
    gap: 1rem;
}

.knowledge-base-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.knowledge-base-header h2 {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 600;
}

.knowledge-base-header p {
    margin: 0.35rem 0 0;
    color: var(--text-secondary);
    max-width: 62rem;
}

.knowledge-base-header__eyebrow {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-secondary);
}

.knowledge-base-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* --- Quick-create bar (feature-flagged) ------------------------------------ */

.knowledge-quickcreate {
    display: grid;
    grid-template-columns: 11rem repeat(4, minmax(10rem, 1fr)) auto auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--glass-aura-cyan) 7%, transparent), transparent 54%),
        color-mix(in srgb, var(--glass-surface-muted) 78%, transparent);
    box-shadow: 0 14px 30px color-mix(in srgb, var(--glass-shadow) 60%, transparent);
    backdrop-filter: blur(16px) saturate(1.08);
}

.knowledge-quickcreate__label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-secondary);
}

/* --- Master-detail shell --------------------------------------------------- */

.knowledge-base-shell {
    display: grid;
    grid-template-columns: minmax(16.5rem, 21rem) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.knowledge-base-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

/* --- Collections rail ------------------------------------------------------ */

.kb-rail {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem;
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background-image: var(--surface-aurora);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 16px 34px var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(1.1);
}

.kb-rail__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.kb-rail__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.kb-rail__title .kb-icon {
    color: var(--color-primary);
    width: 1.1rem;
    height: 1.1rem;
}

.kb-rail__spinner {
    color: var(--color-primary);
}

.kb-rail__hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.kb-rail__search {
    display: flex;
    gap: 0.45rem;
    align-items: center;
}

.kb-rail__search .form-control {
    min-width: 0;
}

.kb-rail__search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.55rem;
}

.knowledge-base-page .kb-rail__search-btn .kb-icon {
    margin-right: 0;
}

.kb-rail__list {
    overflow-y: auto;
    margin: 0 -0.4rem 0 -0.25rem;
    padding: 0.1rem 0.4rem 0.1rem 0.25rem;
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.kb-rail-item-list {
    display: grid;
    gap: 0.35rem;
}

/* --- Rail collection rows -------------------------------------------------- */

.kb-rail-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.6rem;
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.kb-rail-item:hover {
    background: color-mix(in srgb, var(--glass-surface) 72%, transparent);
    border-color: var(--glass-line-soft);
    border-left-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
}

.kb-rail-item.is-selected {
    background:
        radial-gradient(ellipse at 0% 50%, color-mix(in srgb, var(--glass-aura-cyan) 14%, transparent), transparent 62%),
        color-mix(in srgb, var(--glass-surface) 85%, transparent);
    border-color: color-mix(in srgb, var(--glass-aura-cyan) 40%, var(--glass-line));
    border-left-color: var(--color-primary);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--glass-shadow) 55%, transparent);
}

.kb-rail-item__icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 8px;
    border: 1px solid var(--glass-line-soft);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.kb-rail-item__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 0.12rem;
}

.kb-rail-item__name {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-rail-item__star {
    width: 0.8rem;
    height: 0.8rem;
    color: var(--bs-warning, #dda63a);
}

.kb-rail-item__meta {
    font-size: 0.875rem;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-rail-item__chevron {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.kb-rail-item:hover .kb-rail-item__chevron,
.kb-rail-item.is-selected .kb-rail-item__chevron {
    opacity: 1;
}

/* --- Rail filter toggle and panel ------------------------------------------ */

.kb-filter-toggle {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--glass-line-soft);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.kb-filter-toggle:hover {
    color: var(--text-primary);
    border-color: var(--glass-line);
}

.kb-filter-toggle__chevron {
    margin-left: auto;
    width: 0.85rem;
    height: 0.85rem;
}

.kb-locked-note {
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--glass-line-soft);
    border-left: 3px solid var(--color-primary);
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.kb-locked-note strong {
    color: var(--text-primary);
}

.kb-filters {
    display: grid;
    gap: 0.6rem;
    padding: 0.75rem;
    border: 1px solid var(--glass-line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--glass-surface-muted) 62%, transparent);
}

.kb-filters__field {
    display: grid;
    gap: 0.25rem;
    margin: 0;
}

.kb-filters__field > span {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--text-secondary);
}

.kb-filters__check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0.1rem 0 0;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.kb-filters__check input {
    margin: 0;
}

.kb-filters__actions {
    display: flex;
    gap: 0.45rem;
    padding-top: 0.2rem;
}

/* --- Shared badges, chips, counts ------------------------------------------ */

.kb-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.45rem;
    height: 1.45rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 700;
}

.kb-count--accent {
    background: var(--color-primary);
    color: #ffffff;
}

.kb-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--glass-mix-base));
    background: color-mix(in srgb, var(--bg-primary) 92%, var(--glass-mix-base));
    color: var(--text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-chip .kb-icon {
    width: 0.78rem;
    height: 0.78rem;
}

.kb-chip--code {
    color: var(--color-primary);
    font-weight: 700;
}

.kb-chip--accent {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--border-color));
    background: color-mix(in srgb, var(--color-primary) 11%, transparent);
    color: var(--color-primary);
}

.kb-chip--warning {
    border-color: color-mix(in srgb, var(--bs-warning, #dda63a) 55%, var(--border-color));
    background: color-mix(in srgb, var(--bs-warning, #dda63a) 13%, transparent);
    color: var(--text-primary);
}

.kb-chip--type {
    color: var(--color-primary);
    text-transform: capitalize;
}

.kb-flag {
    display: inline-flex;
    align-items: center;
    padding: 0.14rem 0.45rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kb-flag--archived {
    border: 1px solid color-mix(in srgb, var(--bs-warning, #dda63a) 55%, var(--border-color));
    background: color-mix(in srgb, var(--bs-warning, #dda63a) 13%, transparent);
    color: var(--text-secondary);
}

/* --- Main panel: placeholder state ----------------------------------------- */

.kb-placeholder {
    min-height: 22rem;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 0.7rem;
    padding: 2rem;
    text-align: center;
    color: var(--text-secondary);
    border: 1px dashed color-mix(in srgb, var(--border-color) 75%, var(--glass-mix-base));
    border-radius: 14px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--glass-mix-base));
}

.kb-placeholder__icon {
    width: 2.6rem;
    height: 2.6rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.kb-placeholder h4 {
    margin: 0;
    color: var(--text-primary);
}

.kb-placeholder p {
    margin: 0;
    max-width: 36rem;
}

/* --- Main panel: collection hero ------------------------------------------- */

.kb-hero,
.kb-panel {
    border: 1px solid var(--glass-line);
    border-radius: 14px;
    background-image: var(--surface-aurora);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 16px 34px var(--glass-shadow);
    backdrop-filter: blur(18px) saturate(1.1);
}

.kb-hero {
    padding: 1.15rem 1.25rem;
    display: grid;
    gap: 0.9rem;
}

.kb-hero__head {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.kb-hero__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    border-radius: 10px;
    border: 1px solid var(--glass-line-soft);
    background:
        radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--glass-aura-cyan) 22%, transparent), transparent 70%),
        color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.kb-hero__icon .kb-icon {
    width: 1.4rem;
    height: 1.4rem;
}

.kb-hero__title {
    flex: 1;
    min-width: 0;
}

.kb-hero__eyebrow {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-secondary);
}

.kb-hero__title h3 {
    margin: 0.1rem 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.kb-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.kb-hero__description {
    margin: 0;
    color: var(--text-secondary);
    max-width: 62rem;
}

.kb-hero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kb-stat {
    min-width: 7.25rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--glass-line-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
    display: grid;
    gap: 0.1rem;
    align-content: start;
}

.kb-stat__value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-stat--text .kb-stat__value {
    font-size: 0.96rem;
    font-weight: 600;
    padding-top: 0.2rem;
}

.kb-stat__label {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--text-secondary);
}

.kb-details-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.kb-details-toggle:hover {
    text-decoration: underline;
}

.kb-details-toggle .kb-icon {
    width: 0.8rem;
    height: 0.8rem;
}

.kb-detail-grid {
    margin: 0;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--glass-line-soft);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    gap: 0.75rem 1.1rem;
}

.kb-detail-grid__item dt {
    margin: 0 0 0.12rem;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-weight: 700;
    color: var(--text-secondary);
}

.kb-detail-grid__item dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.93rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- Main panel: libraries ------------------------------------------------- */

.kb-panel {
    padding: 1.15rem 1.25rem;
    display: grid;
    gap: 1rem;
}

.kb-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.kb-panel__titles {
    min-width: 0;
}

.kb-panel__titles h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--text-primary);
}

.kb-panel__titles h4 .kb-icon {
    color: var(--color-primary);
    width: 1.05rem;
    height: 1.05rem;
}

.kb-panel__titles p {
    margin: 0.3rem 0 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
    max-width: 48rem;
}

.kb-lib-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0.9rem;
}

/* --- Library cards --------------------------------------------------------- */

.kb-lib-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--glass-line-soft);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 50% 112%, color-mix(in srgb, var(--glass-aura-cyan) 8%, transparent), transparent 54%),
        color-mix(in srgb, var(--glass-surface) 82%, transparent);
    transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.kb-lib-card:hover {
    border-color: color-mix(in srgb, var(--glass-aura-cyan) 38%, var(--glass-line));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--glass-shadow) 70%, transparent), 0 0 18px var(--glass-glow);
    transform: translateY(-1px);
}

.kb-lib-card__button {
    flex: 1;
    width: 100%;
    padding: 1rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 0.7rem;
    align-content: start;
    min-width: 0;
}

.kb-lib-card__head {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.kb-lib-card__icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    flex: 0 0 2.15rem;
    border-radius: 8px;
    border: 1px solid var(--glass-line-soft);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
}

.kb-lib-card__icon .kb-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.kb-lib-card__titles {
    flex: 1;
    min-width: 0;
}

.kb-lib-card__titles h5 {
    margin: 0;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-lib-card__sub {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.3rem;
    min-width: 0;
}

.kb-lib-card__code {
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-lib-card__open {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0.75;
    transition: opacity 0.16s ease;
}

.kb-lib-card:hover .kb-lib-card__open,
.kb-lib-card__button:focus-visible .kb-lib-card__open {
    opacity: 1;
}

.kb-lib-card__open .kb-icon {
    width: 0.78rem;
    height: 0.78rem;
}

.kb-lib-card__description {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-lib-card__capabilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.kb-cap {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, var(--glass-mix-base));
    background: color-mix(in srgb, var(--bg-primary) 92%, var(--glass-mix-base));
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.kb-cap::before {
    content: "✓";
    margin-right: 0.28rem;
    color: var(--color-primary);
    font-weight: 700;
}

.kb-lib-card__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding-top: 0.65rem;
    border-top: 1px dashed var(--glass-line-soft);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.kb-lib-card__stats > span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.kb-lib-card__stats .kb-icon {
    width: 0.82rem;
    height: 0.82rem;
    color: var(--text-muted);
}

.kb-lib-card__types {
    color: var(--text-muted);
}

.kb-lib-card__admin {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    padding: 0.55rem 1rem;
    border-top: 1px solid var(--glass-line-soft);
    background: color-mix(in srgb, var(--bg-primary) 45%, transparent);
}

.kb-lib-card__admin-note {
    margin-right: auto;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

/* --- Focus visibility for custom interactive elements ---------------------- */

.kb-rail-item:focus-visible,
.kb-filter-toggle:focus-visible,
.kb-details-toggle:focus-visible,
.kb-lib-card__button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
    outline-offset: 2px;
}

/* --- Empty states and dialog forms ---------------------------------------- */

.knowledge-empty-state {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-secondary);
    border: 1px dashed color-mix(in srgb, var(--border-color) 75%, var(--glass-mix-base));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--glass-mix-base));
}

.knowledge-empty-state h5 {
    color: var(--text-primary);
}

.knowledge-empty-state p {
    margin: 0;
}

.knowledge-empty-state--compact {
    padding: 1.25rem 0.85rem;
    font-size: 0.9rem;
}

.knowledge-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.knowledge-dialog-grid label,
.knowledge-toggle-grid label {
    display: grid;
    gap: 0.4rem;
    color: var(--text-primary);
}

.knowledge-dialog-grid__full {
    grid-column: 1 / -1;
}

.knowledge-dialog-context {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, var(--glass-mix-base));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-secondary) 96%, var(--glass-mix-base));
}

.knowledge-dialog-context__eyebrow {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--text-secondary);
}

.knowledge-dialog-context__title {
    margin-top: 0.2rem;
    color: var(--text-primary);
    font-weight: 600;
}

.knowledge-dialog-context__meta {
    margin-top: 0.15rem;
    color: var(--color-primary);
    font-size: 0.92rem;
}

.knowledge-toggle-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.knowledge-library-page .workspace-library-sidebar__value {
    word-break: break-word;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1100px) {
    .knowledge-base-shell,
    .knowledge-quickcreate {
        grid-template-columns: 1fr;
    }

    .kb-rail {
        position: static;
        max-height: none;
    }

    .kb-rail__list {
        max-height: 24rem;
    }
}

@media (max-width: 720px) {
    .knowledge-base-header {
        flex-direction: column;
    }

    .kb-hero__head {
        flex-wrap: wrap;
    }

    .kb-hero__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .knowledge-toggle-grid,
    .knowledge-dialog-grid {
        grid-template-columns: 1fr;
    }
}