/* ================================================================
   TBS DESIGN SYSTEM  —  tbs-design.css
   Prefix    : tbs-
   Foundation: Bootstrap 5 + Phosphor Icons
   Philosophy: Compact, flat, functional, developer-facing.
               No shadows. Dense information layout.
   ================================================================ */

/* ----------------------------------------------------------------
   Design tokens
   ---------------------------------------------------------------- */
:root {
    /* Border */
    --tbs-border-color:      #dee2e6;
    --tbs-border-radius-sm:  3px;
    --tbs-border-radius:     6px;

    /* Surface */
    --tbs-panel-bg:          #fafafa;
    --tbs-panel-padding:     1rem;
    --tbs-selection-bg:      #eef6ff;

    /* Text */
    --tbs-text-sm:           0.85rem;
    --tbs-text-xs:           0.82rem;
    --tbs-text-xxs:          0.72rem;
    --tbs-text-muted:        #777;
    --tbs-text-subtle:       #888;
    --tbs-text-placeholder:  #999;
    --tbs-danger-text:       #c00;

    /* ACL / permission badge */
    --tbs-badge-bg:          #e8f4fd;
    --tbs-badge-color:       #1a6fa8;
    --tbs-badge-border:      #aad4f0;

    /* Permission chip (toggle) */
    --tbs-chip-off-bg:       #e9ecef;
    --tbs-chip-off-color:    #333;
    --tbs-chip-on-bg:        #1a6fa8;
    --tbs-chip-on-color:     #fff;

    /* Label badge — semantic type tokens */
    --tbs-label-entity-bg:         #e0f2fe;
    --tbs-label-entity-color:      #0369a1;
    --tbs-label-entity-border:     #bae6fd;
    --tbs-label-attribute-bg:      #dcfce7;
    --tbs-label-attribute-color:   #15803d;
    --tbs-label-attribute-border:  #bbf7d0;
    --tbs-label-rel-bg:            #f3e8ff;
    --tbs-label-rel-color:         #6b21a8;
    --tbs-label-rel-border:        #e9d5ff;
    --tbs-label-default-bg:        #f1f5f9;
    --tbs-label-default-color:     #475569;
    --tbs-label-default-border:    #cbd5e1;

    /* Icons */
    --tbs-icon-sm:           1rem;
    --tbs-icon-md:           1.2rem;
    --tbs-icon-lg:           1.4rem;

    /* Gaps */
    --tbs-gap-xs:   0.25rem;
    --tbs-gap-sm:   0.4rem;
    --tbs-gap:      0.5rem;
    --tbs-gap-md:   0.75rem;
    --tbs-gap-lg:   1rem;
    --tbs-gap-xl:   1.5rem;
    --tbs-gap-2xl:  2rem;
}


/* ----------------------------------------------------------------
   Panel / card
   ---------------------------------------------------------------- */
.tbs-panel {
    border:        1px solid var(--tbs-border-color);
    border-radius: var(--tbs-border-radius);
    padding:       var(--tbs-panel-padding);
    background:    var(--tbs-panel-bg);
}

.tbs-panel--sticky {
    position: sticky;
    top: 1rem;
}

.tbs-panel--sidebar {
    width:       380px;
    flex-shrink: 0;
}


/* ----------------------------------------------------------------
   Layout helpers
   ---------------------------------------------------------------- */
.tbs-two-col {
    display:     flex;
    gap:         var(--tbs-gap-xl);
    align-items: flex-start;
}

.tbs-col-main {
    flex:      1;
    min-width: 0;       /* prevent flex blowout */
}

.tbs-col-sidebar {
    width:       380px;
    flex-shrink: 0;
}

.tbs-action-row {
    display:     flex;
    gap:         0.3rem;
    flex-wrap:   wrap;
    align-items: center;
}

.tbs-action-row--end {
    justify-content: flex-end;
}

.tbs-divider {
    border:    0;
    border-top: 1px solid var(--tbs-border-color);
    margin:    0.75rem 0;
}


/* ----------------------------------------------------------------
   Page header  (h3 title + right-side actions)
   ---------------------------------------------------------------- */
.tbs-page-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   1rem;
}

.tbs-page-title {
    margin: 0;
}

.tbs-page-header-actions {
    display: flex;
    gap:     var(--tbs-gap);
}


/* ----------------------------------------------------------------
   Section header  (bold 0.85 rem label + optional right actions)
   ---------------------------------------------------------------- */
.tbs-section-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-weight:     600;
    font-size:       var(--tbs-text-sm);
    margin-bottom:   0.5rem;
}

.tbs-section-header-actions {
    display:     flex;
    gap:         var(--tbs-gap-sm);
    align-items: center;
    margin-right: 12px;
}


/* ----------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------- */

/* Icon-only square button */
.tbs-icon-btn {
    aspect-ratio:   1 / 1;
    height:         31px;
    padding-left:   0.35rem !important;
    padding-right:  0.35rem !important;
    line-height:    1 !important;
    display:        inline-flex;
    align-items:    center;
    justify-content: center;
}

/* Icon + text inline button */
.tbs-icon-text-btn {
    display:     inline-flex;
    align-items: center;
    gap:         0.4rem;
}


/* ----------------------------------------------------------------
   Icon sizes  (applied to <span class="ph ph-*">)
   ---------------------------------------------------------------- */
.tbs-icon-sm { font-size: var(--tbs-icon-sm); }
.tbs-icon-md { font-size: var(--tbs-icon-md); }
.tbs-icon-lg { font-size: var(--tbs-icon-lg); }


/* ----------------------------------------------------------------
   Table helpers
   ---------------------------------------------------------------- */
.tbs-table-sm {
    font-size: var(--tbs-text-xs);
}

/* Monospace ID cell */
.tbs-cell-id {
    font-size:   var(--tbs-text-xxs);
    color:       var(--tbs-text-subtle);
    word-break:  break-all;
    font-family: monospace;
}

.tbs-cell-muted {
    color: var(--tbs-text-muted);
}

/* Row selected */
tr.tbs-row--selected > td {
    background: var(--tbs-selection-bg) !important;
}


/* ----------------------------------------------------------------
   Tree row  (dossier tree / navigation tree)
   ---------------------------------------------------------------- */
.tbs-tree-row {
    display:     flex;
    align-items: center;
    gap:         4px;
    border-radius: var(--tbs-border-radius-sm);
    cursor:      pointer;
    padding:     1px 4px;
    line-height: 1.8;
    -webkit-user-select: none;
    user-select: none;
}

.tbs-tree-row:hover {
    background: #f0f6ff;
}

.tbs-tree-row--selected {
    background: var(--tbs-selection-bg);
}

.tbs-tree-toggle {
    -webkit-user-select: none;
    user-select: none;
    width:       16px;
    font-size:   0.65rem;
    flex-shrink: 0;
    text-align:  center;
}


/* ----------------------------------------------------------------
   ACL permission badge  (read-only, in table cells)
   ---------------------------------------------------------------- */
.tbs-acl-badge {
    display:      inline-block;
    background:   var(--tbs-badge-bg);
    color:        var(--tbs-badge-color);
    border:       1px solid var(--tbs-badge-border);
    border-radius: var(--tbs-border-radius-sm);
    padding:      0 3px;
    margin-right: 2px;
    font-size:    0.7rem;
}


/* ----------------------------------------------------------------
   Label badge  (semantic pill with icon — read-only)
   Usage: <TbsLabelBadge Label="Entity" Icon="ph-cube" Variant="entity" />
   ---------------------------------------------------------------- */
.tbs-label-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           0.3rem;
    border:        1.5px solid var(--tbs-label-default-border);
    border-radius: 12px;
    padding:       2px 9px;
    font-size:     0.76rem;
    font-weight:   600;
    line-height:   1.4;
    background:    var(--tbs-label-default-bg);
    color:         var(--tbs-label-default-color);
    white-space:   nowrap;
}

.tbs-label-badge--entity {
    background: var(--tbs-label-entity-bg);
    color:      var(--tbs-label-entity-color);
    border-color: var(--tbs-label-entity-border);
}

.tbs-label-badge--attribute {
    background: var(--tbs-label-attribute-bg);
    color:      var(--tbs-label-attribute-color);
    border-color: var(--tbs-label-attribute-border);
}

.tbs-label-badge--relationship {
    background: var(--tbs-label-rel-bg);
    color:      var(--tbs-label-rel-color);
    border-color: var(--tbs-label-rel-border);
}

/* Filter chip variant — clickable, toggleable */
.tbs-label-badge--chip {
    cursor:     pointer;
    opacity:    0.65;
    transition: opacity 0.1s, box-shadow 0.1s;
    background: rgba(255, 255, 255, 0.38);
}

.tbs-label-badge--chip:hover {
    opacity: 0.85;
}

.tbs-label-badge--chip.tbs-label-badge--active {
    opacity:    1;
    box-shadow: 0 0 0 2px currentColor;
    font-weight: 700;
}


/* ----------------------------------------------------------------
   Permission chip  (toggleable, in ACL grant editor)
   ---------------------------------------------------------------- */
.tbs-perm-chip {
    display:      inline-block;
    font-size:    0.78rem;
    cursor:       pointer;
    -webkit-user-select: none;
    user-select:  none;
    background:   var(--tbs-chip-off-bg);
    color:        var(--tbs-chip-off-color);
    border-radius: var(--tbs-border-radius-sm);
    padding:      2px 7px;
    margin:       0;
    transition:   background 0.12s, color 0.12s;
}

.tbs-perm-chip--active {
    background: var(--tbs-chip-on-bg);
    color:      var(--tbs-chip-on-color);
}

.tbs-perm-chip:hover:not(.tbs-perm-chip--active) {
    background: #d3d8de;
}


/* ----------------------------------------------------------------
   Inline confirm  (label + Yes / No pattern)
   ---------------------------------------------------------------- */
.tbs-confirm-label {
    font-size: var(--tbs-text-xs);
    color:     var(--tbs-danger-text);
}


/* ----------------------------------------------------------------
   Feedback / alert  (compact Bootstrap alerts)
   ---------------------------------------------------------------- */
.tbs-feedback {
    font-size: 0.8rem;
    padding:   0.25rem 0.5rem;
    margin:    0;
}


/* ----------------------------------------------------------------
   Empty state  (table cell or standalone block)
   ---------------------------------------------------------------- */
.tbs-empty-cell {
    text-align:      center;
    vertical-align:  middle;
    padding:         2.5rem 1rem !important;
    color:           var(--tbs-text-placeholder);
    font-style:      italic;
}

.tbs-empty-block {
    text-align:  center;
    padding:     2.5rem 1rem;
    color:       var(--tbs-text-placeholder);
    font-style:  italic;
}


/* ----------------------------------------------------------------
   Loading placeholder
   ---------------------------------------------------------------- */
.tbs-loading {
    color:      var(--tbs-text-muted);
    font-style: italic;
    font-size:  var(--tbs-text-sm);
    margin:     0;
}


/* ----------------------------------------------------------------
   Typography utilities
   ---------------------------------------------------------------- */
.tbs-text-sm     { font-size: var(--tbs-text-sm); }
.tbs-text-xs     { font-size: var(--tbs-text-xs); }
.tbs-text-xxs    { font-size: var(--tbs-text-xxs); }
.tbs-text-muted  { color: var(--tbs-text-muted); }
.tbs-text-subtle { color: var(--tbs-text-subtle); }
.tbs-font-mono   { font-family: monospace; }
.tbs-bold        { font-weight: 600; }

/* Form label (0.8 rem, matches Bootstrap sm label convention) */
.tbs-form-label {
    font-size:     0.8rem;
    margin-bottom: 0.25rem;
    display:       block;
}

/* ----------------------------------------------------------------
   Chat Source Pills
   ---------------------------------------------------------------- */
.tbs-chat-sources {
    display: inline-block;
    position: relative;
    cursor: pointer;
    margin: 0 0.1rem;
    vertical-align: baseline;
}

.tbs-chat-source-summary {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.45rem;
    background: var(--source-background);
    border: none;
    border-radius: 6px;
    font-size: var(--tbs-text-xxs);
    font-weight: 500;
    color: var(--tbs-text-subtle);
    box-shadow: var(--source-shadow);
    transition: background 0.2s ease, color 0.2s ease;
    overflow: hidden;
}

.tbs-chat-source-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

@keyframes tbs-slide-from-right {
    from { transform: translateX(80%); opacity: 0; }
    to   { transform: translateX(0);  opacity: 1; }
}
@keyframes tbs-slide-from-left {
    from { transform: translateX(-80%); opacity: 0; }
    to   { transform: translateX(0);   opacity: 1; }
}
.tbs-slide-from-right { animation: tbs-slide-from-right 0.18s ease forwards; }
.tbs-slide-from-left  { animation: tbs-slide-from-left  0.18s ease forwards; }

.tbs-chat-source-summary:hover {
    background: var(--source-background);
    color: var(--tbs-badge-color);
    box-shadow: var(--source-shadow);
}

.tbs-icon-doc { color: #2563eb; } /* Blue */
.tbs-icon-kg { color: #ea580c; } /* Orange */
.tbs-icon-link { color: #16a34a; } /* Green */
.tbs-icon-law { color: #6b21a8; } /* Purple */

.tbs-chat-source-title {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tbs-chat-source-count {
    color: var(--tbs-badge-color);
    background: var(--tbs-badge-bg);
    padding: 0.1rem 0.35rem;
    border-radius: 10px;
    font-size: var(--tbs-text-xxs);
    font-weight: 700;
}

/* Inline skill:// value highlight */
.tbs-skill-value {
    color: var(--tbs-badge-color);
    font-weight: 600;
    cursor: pointer;
    border-bottom: 1px dotted var(--tbs-badge-color);
    margin: 0 0.2em;
}
.tbs-skill-value:hover {
    text-decoration: underline;
}

/* Modal Popup */
.tbs-chat-sources-dropdown {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    transform: none;
    width: 280px;
    background: #ffffff;
    border: 1px solid var(--tbs-border-color);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 10000;
    padding: 0.5rem;
    cursor: default;
}

.tbs-chat-sources-dropdown.is-floating {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tbs-chat-sources:focus .tbs-chat-sources-dropdown,
.tbs-chat-sources:focus-within .tbs-chat-sources-dropdown {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tbs-chat-sources:focus,
.tbs-chat-sources:focus-within {
    z-index: 10001;
}

.tbs-chat-sources-header {
    font-size: var(--tbs-text-xs);
    font-weight: 600;
    color: var(--tbs-text-muted);
    padding: 0.25rem 0.5rem 0.5rem;
    border-bottom: 1px solid var(--tbs-border-color);
    margin-bottom: 0.25rem;
    text-align: center;
}

/* Paginated dropdown styles */
.tbs-paginated-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.5rem 0.5rem;
    border-bottom: 1px solid var(--tbs-border-color);
    margin-bottom: 0.25rem;
}

.tbs-paginated-header-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--tbs-text-sm);
    font-weight: 600;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    margin-right: 0.5rem;
}

.tbs-paginated-controls {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.tbs-paginated-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--tbs-text-muted);
    padding: 0.1rem 0.3rem;
    border-radius: var(--tbs-border-radius-sm);
}

.tbs-paginated-btn:hover:not(:disabled) {
    background: var(--tbs-panel-bg);
    color: #333;
}

.tbs-paginated-btn:disabled {
    color: #b8c0c7 !important;
    opacity: 1;
    pointer-events: none;
}

.tbs-paginated-counter {
    font-size: var(--tbs-text-xs);
    font-weight: 600;
    color: var(--tbs-text-muted);
}


.tbs-chat-source-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--tbs-border-radius-sm);
    font-size: var(--tbs-text-xs);
    color: #333;
}

.tbs-chat-source-item:hover {
    background: var(--tbs-panel-bg);
}

/* Suppress block hover on outer item when it contains independent fragment rows */
.tbs-chat-source-item:has(.tbs-source-fragment):hover {
    background: transparent;
    cursor: default;
}

.tbs-source-fragment>span>span:hover {
    background: var(--tbs-panel-bg);
    cursor: pointer;
}

.tbs-chat-source-item span[class^="ph-"] {
    color: var(--tbs-badge-color);
    font-size: var(--tbs-icon-md);
    flex-shrink: 0;
}

.tbs-chat-source-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kg-popup-entity .kg-raw-attribute-row,
.kg-popup-entity .kg-relationship-row,
.kg-popup-entity .kg-entity-sources-column {
    display: none;
}

.kg-popup-entity .kg-entity-attributes-table,
.kg-popup-entity table {
    border-collapse: collapse;
    border: 0;
    box-shadow: none;
    margin-top: 0.5rem;
    background-color: transparent;
}

.kg-popup-entity .kg-entity-attributes-table th,
.kg-popup-entity .kg-entity-attributes-table td,
.kg-popup-entity table th,
.kg-popup-entity table td {
    border: 0;
    box-shadow: none;
    padding: 0.25rem 0.5rem;
    text-align: left;
    vertical-align: top;
}

.kg-popup-entity .kg-entity-attribute-column {
    width: 40%;
}

.kg-popup-entity .kg-entity-value-column {
    width: 60%;
}