/* ============================================================================
   SOLA Design System — Component Layer
   ----------------------------------------------------------------------------
   Reusable component classes built entirely on tokens.css. This is the file
   product apps (ITSM, DMS, …) import alongside Bootstrap + the bridge.
   Bootstrap covers buttons/forms/tables/modals/grid; this adds the SOLA-
   specific components and the opinionated styling on top.

   Load order: bootstrap → tokens.css → bootstrap-bridge.css → sola-components.css
   ========================================================================== */

/* ---------------------------------------------------------------------------
   App shell (supports both layouts: sidebar+topbar AND top-nav)
   ------------------------------------------------------------------------- */
.sola-app        { min-height: 100vh; background: var(--bg-color); color: var(--text-primary); }
.sola-topbar     {
  height: var(--topbar-height); display: flex; align-items: center; gap: var(--space-4);
  padding-inline: var(--space-5); color: var(--text-white);
  background: var(--gradient-primary); box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
.sola-topbar .sola-brand { font-weight: var(--fw-bold); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); }
.sola-sidebar    {
  width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-sidebar);
  border-inline-end: 1px solid var(--border-color); padding: var(--space-3);
  overflow-y: auto;
}
.sola-sidebar.is-collapsed { width: var(--sidebar-width-collapsed); }
.sola-content    { flex: 1; min-width: 0; padding: var(--content-padding); overflow: auto; }
.sola-layout     { display: flex; align-items: stretch; min-height: calc(100vh - var(--topbar-height)); }

/* Sidebar nav items */
.sola-nav-link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: var(--fs-base); font-weight: var(--fw-medium);
  text-decoration: none; transition: var(--transition-fast);
}
.sola-nav-link i { width: 20px; text-align: center; }
.sola-nav-link:hover  { background: var(--bg-sidebar-hover); color: var(--sola-primary); }
.sola-nav-link.active { background: var(--sola-primary-soft-2); color: var(--sola-primary); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------------
   Page header
   ------------------------------------------------------------------------- */
.sola-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.sola-page-header h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin: 0; }
.sola-page-header .subtitle { color: var(--text-secondary); font-size: var(--fs-base); margin-top: var(--space-1); }

/* ---------------------------------------------------------------------------
   Card
   ------------------------------------------------------------------------- */
.sola-card {
  background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}
.sola-card--hover { transition: var(--transition); }
.sola-card--hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.sola-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-color); }
.sola-card__title  { font-size: var(--fs-md); font-weight: var(--fw-bold); margin: 0; }

/* ---------------------------------------------------------------------------
   Stat / KPI tile
   ------------------------------------------------------------------------- */
.sola-stat { display: flex; align-items: center; gap: var(--space-4); }
.sola-stat__icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.4rem;
  background: var(--sola-primary-soft); color: var(--sola-primary);
}
.sola-stat__icon--success { background: var(--success-soft); color: var(--success-color); }
.sola-stat__icon--warning { background: var(--warning-soft); color: var(--warning-color); }
.sola-stat__icon--danger  { background: var(--danger-soft);  color: var(--danger-color); }
.sola-stat__icon--info    { background: var(--info-soft);    color: var(--info-color); }
.sola-stat__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.sola-stat__label { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ---------------------------------------------------------------------------
   Badges / tags / status pills (soft style)
   ------------------------------------------------------------------------- */
.sola-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.25rem 0.625rem; border-radius: var(--radius-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1;
  background: var(--grey-100); color: var(--text-secondary); border: 1px solid var(--border-color);
}
.sola-badge--primary { background: var(--primary-soft); color: var(--sola-primary); border-color: transparent; }
.sola-badge--success { background: var(--success-soft); color: var(--success-color); border-color: transparent; }
.sola-badge--warning { background: var(--warning-soft); color: #b07d12; border-color: transparent; }
.sola-badge--danger  { background: var(--danger-soft);  color: var(--danger-color); border-color: transparent; }
.sola-badge--info    { background: var(--info-soft);    color: #2089bf; border-color: transparent; }
.sola-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Ticket status / priority pills (shared lifecycle palette) */
.sola-badge--status-new       { background: var(--status-new-bg);       color: var(--status-new-fg);       border-color: transparent; }
.sola-badge--status-open      { background: var(--status-open-bg);      color: var(--status-open-fg);      border-color: transparent; }
.sola-badge--status-progress  { background: var(--status-progress-bg);  color: var(--status-progress-fg);  border-color: transparent; }
.sola-badge--status-hold      { background: var(--status-hold-bg);      color: var(--status-hold-fg);      border-color: transparent; }
.sola-badge--status-resolved  { background: var(--status-resolved-bg);  color: var(--status-resolved-fg);  border-color: transparent; }
.sola-badge--status-closed    { background: var(--status-closed-bg);    color: var(--status-closed-fg);    border-color: transparent; }
.sola-badge--status-cancelled { background: var(--status-cancelled-bg); color: var(--status-cancelled-fg); border-color: transparent; }
.sola-badge--prio-critical    { background: var(--priority-critical-bg); color: var(--priority-critical-fg); border-color: transparent; }
.sola-badge--prio-high        { background: var(--priority-high-bg);    color: var(--priority-high-fg);    border-color: transparent; }
.sola-badge--prio-medium      { background: var(--priority-medium-bg);  color: var(--priority-medium-fg);  border-color: transparent; }
.sola-badge--prio-low         { background: var(--priority-low-bg);     color: var(--priority-low-fg);     border-color: transparent; }

/* ---------------------------------------------------------------------------
   Avatar
   ------------------------------------------------------------------------- */
.sola-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-circle);
  display: grid; place-items: center; color: #fff; font-weight: var(--fw-semibold);
  background: linear-gradient(135deg, var(--sola-primary) 0%, var(--sola-primary-light) 100%);
  font-size: var(--fs-base); flex-shrink: 0;
}
.sola-avatar--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.sola-avatar--lg { width: 64px; height: 64px; font-size: var(--fs-xl); }
.sola-avatar-group { display: inline-flex; }
.sola-avatar-group .sola-avatar { border: 2px solid var(--bg-card); margin-inline-start: -10px; }
.sola-avatar-group .sola-avatar:first-child { margin-inline-start: 0; }

/* ---------------------------------------------------------------------------
   Alerts (inline messages)
   ------------------------------------------------------------------------- */
.sola-alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  border-inline-start: 4px solid var(--grey-400); background: var(--grey-100);
  color: var(--text-primary); font-size: var(--fs-base);
}
.sola-alert i { margin-top: 2px; }
.sola-alert--success { border-color: var(--success-color); background: var(--success-soft); }
.sola-alert--warning { border-color: var(--warning-color); background: var(--warning-soft); }
.sola-alert--danger  { border-color: var(--danger-color);  background: var(--danger-soft); }
.sola-alert--info    { border-color: var(--info-color);    background: var(--info-soft); }

/* ---------------------------------------------------------------------------
   Toast (matches ITSM Toast.js styling)
   ------------------------------------------------------------------------- */
.sola-toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  min-width: 300px; max-width: 380px; padding: var(--space-3) var(--space-4);
  background: var(--bg-card); border-radius: var(--radius-lg);
  border-inline-start: 4px solid var(--info-color); box-shadow: var(--shadow-lg);
}
.sola-toast__icon { font-size: 1.125rem; color: var(--info-color); }
.sola-toast__title { font-weight: var(--fw-semibold); font-size: var(--fs-base); }
.sola-toast__msg   { font-size: var(--fs-sm); color: var(--text-secondary); }
.sola-toast--success { border-color: var(--success-color); } .sola-toast--success .sola-toast__icon { color: var(--success-color); }
.sola-toast--warning { border-color: var(--warning-color); } .sola-toast--warning .sola-toast__icon { color: var(--warning-color); }
.sola-toast--danger  { border-color: var(--danger-color);  } .sola-toast--danger  .sola-toast__icon { color: var(--danger-color); }

/* ---------------------------------------------------------------------------
   Tabs (underline style — ITSM pattern)
   ------------------------------------------------------------------------- */
.sola-tabs { display: flex; gap: var(--space-2); border-bottom: 2px solid var(--border-color); }
.sola-tab {
  padding: var(--space-2) var(--space-5); margin-bottom: -2px; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--text-secondary); font-size: var(--fs-base); font-weight: var(--fw-medium);
  transition: var(--transition-fast);
}
.sola-tab:hover  { color: var(--sola-primary); }
.sola-tab.active { color: var(--sola-primary); border-bottom-color: var(--sola-primary); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------------
   Empty state
   ------------------------------------------------------------------------- */
.sola-empty { text-align: center; padding: var(--space-12) var(--space-5); color: var(--text-secondary); }
.sola-empty__icon { font-size: 3rem; color: var(--text-light); margin-bottom: var(--space-4); }
.sola-empty__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }
.sola-empty__text  { font-size: var(--fs-base); max-width: 32ch; margin-inline: auto; }

/* ---------------------------------------------------------------------------
   Loaders
   ------------------------------------------------------------------------- */
.sola-spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--border-color); border-top-color: var(--sola-primary);
  animation: sola-spin 0.8s linear infinite;
}
.sola-spinner--sm { width: 20px; height: 20px; border-width: 2px; }
@keyframes sola-spin { to { transform: rotate(360deg); } }

.sola-skeleton {
  background: linear-gradient(90deg, var(--grey-100) 25%, var(--grey-200) 37%, var(--grey-100) 63%);
  background-size: 400% 100%; border-radius: var(--radius-sm);
  animation: sola-shimmer 1.4s ease infinite; height: 1rem;
}
@keyframes sola-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------------------------------------------------------------------------
   Searchable dropdown (combobox)
   Markup pattern + sola-combobox.js behavior. RTL-safe (logical properties).
   ------------------------------------------------------------------------- */
.sola-combobox { position: relative; display: inline-block; min-width: 260px; }
.sola-combobox__control {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: 0.5rem 0.75rem; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--fs-base);
  cursor: pointer; text-align: start; transition: var(--transition-fast);
}
.sola-combobox__control:hover { border-color: var(--grey-300); }
.sola-combobox.is-open .sola-combobox__control { border-color: var(--sola-primary); box-shadow: var(--focus-ring); }
.sola-combobox__value.is-placeholder { color: var(--text-light); }
.sola-combobox__caret { color: var(--text-light); font-size: var(--fs-xs); transition: transform var(--transition-fast); }
.sola-combobox.is-open .sola-combobox__caret { transform: rotate(180deg); }

.sola-combobox__panel {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); overflow: hidden; display: none;
}
.sola-combobox.is-open .sola-combobox__panel { display: block; }

.sola-combobox__search {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); color: var(--text-light);
}
.sola-combobox__search input { flex: 1; border: 0; outline: none; background: transparent; font-size: var(--fs-base); color: var(--text-primary); }

.sola-combobox__list { list-style: none; margin: 0; padding: var(--space-1); max-height: 220px; overflow-y: auto; }
.sola-combobox__group { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-light); font-weight: var(--fw-semibold); }
.sola-combobox__option {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs);
  font-size: var(--fs-base); color: var(--text-primary); cursor: pointer;
}
.sola-combobox__option:hover,
.sola-combobox__option.is-active { background: var(--bg-sidebar-hover); color: var(--sola-primary); }
.sola-combobox__option.is-selected { font-weight: var(--fw-semibold); }
.sola-combobox__option.is-selected::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-inline-start: auto; color: var(--sola-primary); font-size: var(--fs-xs);
}
.sola-combobox__option.is-hidden { display: none; }
.sola-combobox__empty { padding: var(--space-4); text-align: center; color: var(--text-light); font-size: var(--fs-sm); display: none; }
.sola-combobox.is-empty .sola-combobox__empty { display: block; }
.sola-combobox.is-empty .sola-combobox__list { display: none; }

/* ---------------------------------------------------------------------------
   Table (light styling on top of Bootstrap .table)
   ------------------------------------------------------------------------- */
.sola-table { width: 100%; border-collapse: collapse; }
.sola-table th {
  background: var(--bg-muted); font-weight: var(--fw-semibold);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--text-secondary); padding: var(--space-2) var(--space-3); text-align: start;
  border-bottom: 1px solid var(--border-color); vertical-align: middle; white-space: nowrap;
}
.sola-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); font-size: var(--fs-base); vertical-align: middle; }
.sola-table tbody tr:hover { background: var(--grey-100); }
.sola-table tbody tr:last-child td { border-bottom: 0; }

/* Table modifiers */
.sola-table--striped tbody tr:nth-child(even) { background: var(--bg-muted); }
.sola-table--striped tbody tr:nth-child(even):hover { background: var(--grey-100); }
.sola-table--bordered th, .sola-table--bordered td { border-inline-end: 1px solid var(--border-color); }
.sola-table--bordered th:last-child, .sola-table--bordered td:last-child { border-inline-end: 0; }
.sola-table--dense th { padding-block: 6px; }
.sola-table--dense td { padding-block: 6px; }
.sola-table td.is-numeric, .sola-table th.is-numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* Sortable header */
.sola-table th.is-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.sola-table th.is-sortable:hover { color: var(--text-primary); }
.sola-table th.is-sortable .sola-table__sort { margin-inline-start: 6px; opacity: .4; font-size: 10px; }
.sola-table th.is-sorted-asc  .sola-table__sort, .sola-table th.is-sorted-desc .sola-table__sort { opacity: 1; color: var(--sola-primary); }

/* Sticky header (use inside a scroll container). box-shadow keeps the divider
   line visible because a real border scrolls away under border-collapse. */
.sola-table--sticky thead th { position: sticky; top: 0; z-index: var(--z-sticky); box-shadow: inset 0 -1px 0 var(--border-color); }

/* Selectable rows */
.sola-table__check { width: 36px; text-align: center; }
.sola-table tbody tr.is-selected { background: var(--sola-primary-soft); }
.sola-table tbody tr.is-selected:hover { background: var(--sola-primary-soft-2); }

/* Card wrapper: rounded, bordered container with optional toolbar + footer */
.sola-table-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
/* Horizontal-scroll wrapper so a wide table scrolls instead of being clipped by
   the card's rounded overflow. Add an inline max-height for vertical scrolling. */
.sola-table-scroll { overflow: auto; }
.sola-table-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color); }
.sola-table-toolbar__title { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
.sola-table-toolbar__spacer { flex: 1; }
.sola-table-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-color); background: var(--bg-muted); }
.sola-table-footer__info { font-size: var(--fs-sm); color: var(--text-secondary); }
.sola-table-footer__spacer { flex: 1; }
.sola-table__rowactions { display: inline-flex; gap: var(--space-1); }
.sola-table__rowaction {
  width: 28px; height: 28px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-light); display: inline-grid; place-items: center;
  cursor: pointer; transition: var(--transition-fast); font-size: var(--fs-sm);
}
.sola-table__rowaction:hover { background: var(--sola-primary-soft); color: var(--sola-primary); }
.sola-table__rowaction--danger:hover { background: var(--danger-soft); color: var(--danger-color); }

/* --- ITSM table: compact, uppercase header, clickable rows, inline actions --- */
.sola-table--itsm th { background: var(--bg-color); color: var(--text-secondary); font-size: 11px; padding: 8px 10px; }
.sola-table--itsm td { font-size: 12.5px; padding: 8px 10px; }
.sola-table--itsm tbody tr { cursor: pointer; }
.sola-table--itsm tbody tr:hover { background: var(--bg-color); }
.sola-table--itsm .sola-table__rowactions { gap: var(--space-1); white-space: nowrap; }

/* --- DMS table: striped file list (white header, file icons, selectable) --- */
.sola-table--dms thead th { background: var(--bg-card); color: var(--text-primary); text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); border-bottom: 2px solid var(--border-color); }
.sola-table--dms tbody tr:nth-child(even) { background: var(--bg-muted); }
.sola-table--dms tbody tr:hover { background: var(--grey-100); }
.sola-table--dms tbody tr.sola-tr--folder { cursor: pointer; }
.sola-table--dms tbody tr.sola-tr--folder:hover { background: var(--sola-primary-soft); }
.sola-table--dms tbody tr.is-selected, .sola-table--dms tbody tr:has(.row-checkbox:checked) { background: var(--sola-primary-soft-2); }
.sola-file-icon { font-size: 1.2rem; width: 28px; text-align: center; flex-shrink: 0; }
.sola-file-name { font-weight: var(--fw-semibold); max-width: min(360px, 42vw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sola-tr--folder .sola-file-name { color: var(--sola-primary); }
.sola-file-badge { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); background: var(--bg-muted); border: 1px solid var(--border-color); border-radius: var(--radius-xs); padding: 1px 8px; }

/* Floating context menu header (used by sola-contextmenu.js) */
.sola-context-menu { position: relative; z-index: var(--z-dropdown); }
.sola-context-menu__title { padding: var(--space-1) var(--space-3) var(--space-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--sola-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.sola-context-menu--floating { position: fixed; z-index: var(--z-popover); animation: sola-menu-in 0.12s var(--ease-out); }

/* ===========================================================================
   EXPANDED COMPONENTS
   ========================================================================= */

/* ----- File upload (drag-drop) ------------------------------------------- */
.sola-upload {
  border: 2px dashed var(--grey-300); border-radius: var(--radius-lg);
  background: var(--grey-50); padding: var(--space-8); text-align: center;
  cursor: pointer; transition: var(--transition);
}
.sola-upload:hover, .sola-upload.is-dragover { border-color: var(--sola-primary); background: var(--sola-primary-soft); }
.sola-upload__icon  { font-size: 2.5rem; color: var(--sola-primary); margin-bottom: var(--space-3); }
.sola-upload__title { font-weight: var(--fw-semibold); }
.sola-upload__hint  { font-size: var(--fs-sm); color: var(--text-secondary); }
.sola-upload-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
}
.sola-upload-item__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--sola-primary-soft); color: var(--sola-primary); flex-shrink: 0; }
.sola-upload-item__name { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.sola-upload-item__meta { font-size: var(--fs-xs); color: var(--text-secondary); }

/* ----- Tag / token input ------------------------------------------------- */
.sola-tags {
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
  padding: var(--space-2); border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-card);
}
.sola-tags:focus-within { border-color: var(--sola-primary); box-shadow: var(--focus-ring); }
.sola-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.2rem 0.5rem; background: var(--sola-primary-soft); color: var(--sola-primary); border-radius: var(--radius-xs); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.sola-tag__remove { cursor: pointer; opacity: 0.7; } .sola-tag__remove:hover { opacity: 1; }
.sola-tags__input { flex: 1; min-width: 120px; border: 0; outline: none; background: transparent; font-size: var(--fs-base); }

/* ----- Progress ---------------------------------------------------------- */
.sola-progress { height: 8px; background: var(--grey-200); border-radius: var(--radius-pill); overflow: hidden; }
.sola-progress__bar { height: 100%; background: var(--sola-primary); border-radius: var(--radius-pill); transition: width var(--transition-slow); }
.sola-progress__bar--success { background: var(--success-color); }
.sola-progress__bar--warning { background: var(--warning-color); }
.sola-progress__bar--danger  { background: var(--danger-color); }

/* ----- List view --------------------------------------------------------- */
.sola-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); }
.sola-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color); }
.sola-list__item:last-child { border-bottom: 0; }
.sola-list__item:hover { background: var(--grey-100); }
.sola-list__body { flex: 1; min-width: 0; }
.sola-list__title { font-weight: var(--fw-medium); }
.sola-list__sub { font-size: var(--fs-sm); color: var(--text-secondary); }

/* ----- Description / key-value list -------------------------------------- */
.sola-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.sola-dl dt { color: var(--text-secondary); font-size: var(--fs-sm); }
.sola-dl dd { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-medium); }

/* ----- Timeline / activity feed ------------------------------------------ */
.sola-timeline { list-style: none; margin: 0; padding: 0; }
.sola-timeline__item { position: relative; padding-inline-start: var(--space-6); padding-bottom: var(--space-5); }
.sola-timeline__item::before { content: ""; position: absolute; inset-inline-start: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--border-color); }
.sola-timeline__item:last-child::before { display: none; }
.sola-timeline__dot { position: absolute; inset-inline-start: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-card); border: 3px solid var(--sola-primary); }
.sola-timeline__dot--success { border-color: var(--success-color); }
.sola-timeline__dot--danger  { border-color: var(--danger-color); }
.sola-timeline__title { font-weight: var(--fw-medium); font-size: var(--fs-base); }
.sola-timeline__time  { font-size: var(--fs-xs); color: var(--text-light); }

/* ----- Kanban ------------------------------------------------------------ */
.sola-kanban { display: flex; gap: var(--space-4); align-items: flex-start; }
.sola-kanban__col { flex: 1; min-width: 0; background: var(--grey-100); border-radius: var(--radius-lg); padding: var(--space-3); }
.sola-kanban__col-head { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); margin-bottom: var(--space-3); padding-inline: var(--space-1); }
.sola-kanban__card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: var(--shadow-xs); margin-bottom: var(--space-2); cursor: grab; }
.sola-kanban__card:hover { box-shadow: var(--shadow-sm); }
.sola-kanban__card-title { font-size: var(--fs-base); font-weight: var(--fw-medium); margin-bottom: var(--space-2); }

/* ----- Drawer / side panel ----------------------------------------------- */
.sola-drawer-backdrop { position: fixed; inset: 0; background: rgba(12, 34, 68, 0.4); z-index: var(--z-modal-backdrop); opacity: 0; visibility: hidden; transition: var(--transition); }
.sola-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.sola-drawer {
  position: fixed; top: 0; bottom: 0; inset-inline-end: 0; width: 420px; max-width: 90vw;
  background: var(--bg-card); box-shadow: var(--shadow-xl); z-index: var(--z-modal);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--transition-slow);
}
[dir="rtl"] .sola-drawer { transform: translateX(-100%); }
.sola-drawer.is-open { transform: translateX(0); }
.sola-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); }
.sola-drawer__title  { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.sola-drawer__body   { flex: 1; overflow: auto; padding: var(--space-5); }
.sola-drawer__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ----- Banner ------------------------------------------------------------ */
.sola-banner { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--gradient-primary); color: #fff; font-size: var(--fs-base); }
.sola-banner--warning { background: var(--warning-color); color: var(--grey-900); }
.sola-banner--danger  { background: var(--danger-color); color: #fff; }
.sola-banner__close { margin-inline-start: auto; cursor: pointer; opacity: 0.85; } .sola-banner__close:hover { opacity: 1; }

/* ----- Notification item ------------------------------------------------- */
.sola-notif { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color); }
.sola-notif:last-child { border-bottom: 0; }
.sola-notif.is-unread { background: var(--sola-primary-soft); }
.sola-notif__icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grey-100); color: var(--text-secondary); flex-shrink: 0; }
.sola-notif__title { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.sola-notif__time  { font-size: var(--fs-xs); color: var(--text-light); }

/* ----- Stepper / wizard -------------------------------------------------- */
.sola-steps { display: flex; align-items: flex-start; gap: var(--space-2); }
.sola-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.sola-step::before { content: ""; position: absolute; top: 16px; inset-inline-start: -50%; width: 100%; height: 2px; background: var(--border-color); z-index: 0; }
.sola-step:first-child::before { display: none; }
.sola-step__num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-card); border: 2px solid var(--border-color); color: var(--text-secondary); font-weight: var(--fw-semibold); position: relative; z-index: 1; }
.sola-step__label { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-2); }
.sola-step.is-active .sola-step__num { border-color: var(--sola-primary); color: var(--sola-primary); }
.sola-step.is-done   .sola-step__num { background: var(--sola-primary); border-color: var(--sola-primary); color: #fff; }
.sola-step.is-done::before, .sola-step.is-active::before { background: var(--sola-primary); }
.sola-step.is-active .sola-step__label, .sola-step.is-done .sola-step__label { color: var(--text-primary); font-weight: var(--fw-medium); }

/* ----- Context menu ------------------------------------------------------ */
.sola-context-menu { min-width: 200px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--space-1); }
.sola-context-menu__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); font-size: var(--fs-base); cursor: pointer; color: var(--text-primary); }
.sola-context-menu__item i { width: 18px; text-align: center; color: var(--text-light); }
.sola-context-menu__item:hover { background: var(--bg-sidebar-hover); color: var(--sola-primary); }
.sola-context-menu__item:hover i { color: var(--sola-primary); }
.sola-context-menu__item--danger:hover { background: var(--danger-soft); color: var(--danger-color); }
.sola-context-menu__item--danger:hover i { color: var(--danger-color); }
.sola-context-menu__sep { height: 1px; background: var(--border-color); margin: var(--space-1) 0; }

/* ----- Accordion --------------------------------------------------------- */
.sola-accordion { border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.sola-accordion__item + .sola-accordion__item { border-top: 1px solid var(--border-color); }
.sola-accordion__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; font-weight: var(--fw-medium); background: var(--bg-card); }
.sola-accordion__header:hover { background: var(--grey-100); }
.sola-accordion__icon { transition: transform var(--transition-fast); color: var(--text-light); }
.sola-accordion__item.is-open .sola-accordion__icon { transform: rotate(180deg); }
.sola-accordion__body { padding: 0 var(--space-5) var(--space-5); color: var(--text-secondary); font-size: var(--fs-base); display: none; }
.sola-accordion__item.is-open .sola-accordion__body { display: block; }

/* ----- Divider ----------------------------------------------------------- */
.sola-divider { height: 1px; background: var(--border-color); border: 0; margin: var(--space-5) 0; }
.sola-divider--text { display: flex; align-items: center; gap: var(--space-3); color: var(--text-light); font-size: var(--fs-sm); background: transparent; height: auto; }
.sola-divider--text::before, .sola-divider--text::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }

/* ----- Star rating ------------------------------------------------------- */
.sola-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 1.25rem; color: var(--grey-300); line-height: 1; }
.sola-rating__star { cursor: pointer; transition: color var(--transition-fast), transform var(--transition-fast); }
.sola-rating__star.is-filled { color: var(--warning-color); }
.sola-rating__star:hover { transform: scale(1.12); }
.sola-rating.is-readonly .sola-rating__star { cursor: default; }
.sola-rating.is-readonly .sola-rating__star:hover { transform: none; }
.sola-rating--sm { font-size: var(--fs-base); }
.sola-rating--lg { font-size: 1.75rem; }
.sola-rating__count { margin-inline-start: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-medium); }

/* ----- Ticket board (detailed kanban) ------------------------------------ */
.sola-board { display: flex; gap: var(--space-4); align-items: flex-start; }
.sola-board__col { flex: 1; min-width: 0; }
.sola-board__col-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
}
.sola-board__col-title { font-weight: var(--fw-bold); font-size: var(--fs-md); }
.sola-board__count {
  min-width: 26px; height: 26px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--sola-primary); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  display: inline-grid; place-items: center;
}
.sola-board__empty { text-align: center; color: var(--text-light); font-style: italic; font-size: var(--fs-base); padding: var(--space-10) var(--space-4); }

.sola-ticket {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-4); margin-bottom: var(--space-4); transition: var(--transition-fast);
}
.sola-ticket:hover { box-shadow: var(--shadow-md); }
.sola-ticket__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.sola-ticket__id { color: var(--sola-primary); font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-decoration: none; }
.sola-ticket__id:hover { text-decoration: underline; }
.sola-ticket__title { font-weight: var(--fw-bold); font-size: var(--fs-md); margin-bottom: var(--space-2); color: var(--text-primary); }
.sola-ticket__cat { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.sola-ticket__row { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.sola-ticket__row i { color: var(--text-light); width: 16px; text-align: center; }
.sola-ticket__footer { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.sola-ticket__footer .spacer { flex: 1; }
.sola-ticket__escalate { color: var(--warning-color); }
.sola-ticket__assign-btn {
  width: 30px; height: 30px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary); display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.sola-ticket__assign-btn:hover { border-color: var(--sola-primary); color: var(--sola-primary); }
.sola-sla-breached {
  background: var(--danger-soft); color: var(--danger-color); font-size: 10px; font-weight: var(--fw-bold);
  letter-spacing: 0.5px; padding: 0.25rem 0.5rem; border-radius: var(--radius-xs); text-transform: uppercase; white-space: nowrap;
}

/* ----- Todo / task list -------------------------------------------------- */
.sola-todo { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); }
.sola-todo__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-color); transition: var(--transition-fast); }
.sola-todo__item:last-child { border-bottom: 0; }
.sola-todo__item:hover { background: var(--grey-100); }
.sola-todo__check {
  width: 20px; height: 20px; border-radius: var(--radius-xs); border: 2px solid var(--grey-300);
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0; color: #fff; font-size: 11px;
  transition: var(--transition-fast);
}
.sola-todo__check > i { opacity: 0; }
.sola-todo__check:hover { border-color: var(--sola-primary); }
.sola-todo__body  { flex: 1; min-width: 0; }
.sola-todo__title { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.sola-todo__meta  { display: flex; align-items: center; gap: var(--space-2); margin-top: 2px; font-size: var(--fs-xs); color: var(--text-secondary); }
.sola-todo__item.is-done .sola-todo__check { background: var(--success-color); border-color: var(--success-color); }
.sola-todo__item.is-done .sola-todo__check > i { opacity: 1; }
.sola-todo__item.is-done .sola-todo__title { text-decoration: line-through; color: var(--text-light); }
.sola-todo__item--high   { border-inline-start: 3px solid var(--danger-color); }
.sola-todo__item--medium { border-inline-start: 3px solid var(--warning-color); }
.sola-todo__item--low    { border-inline-start: 3px solid var(--success-color); }
.sola-todo__add { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-muted); }
.sola-todo__add input { flex: 1; border: 0; outline: none; background: transparent; font-size: var(--fs-base); }

/* ----- Split pane (static) ----------------------------------------------- */
.sola-split { display: flex; border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden; }
.sola-split__pane { padding: var(--space-5); }
.sola-split__divider { width: 1px; background: var(--border-color); flex-shrink: 0; }

/* ----- Calendar (month grid with events; needs sola-calendar.js) --------- */
.sola-calendar { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.sola-calendar__header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-color); }
.sola-calendar__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); flex: 1; }
.sola-calendar__nav { display: flex; align-items: center; gap: var(--space-1); }
.sola-calendar__btn {
  width: 32px; height: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary); display: grid; place-items: center;
  cursor: pointer; transition: var(--transition-fast); font-size: var(--fs-sm);
}
.sola-calendar__btn:hover { border-color: var(--sola-primary); color: var(--sola-primary); background: var(--sola-primary-soft); }
.sola-calendar__today-btn {
  height: 32px; padding: 0 var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer; font-size: var(--fs-sm);
  font-weight: var(--fw-medium); font-family: inherit; transition: var(--transition-fast);
}
.sola-calendar__today-btn:hover { border-color: var(--sola-primary); color: var(--sola-primary); }

.sola-calendar__dow { display: grid; grid-template-columns: repeat(7, 1fr); padding: var(--space-2) 0; border-bottom: 1px solid var(--border-color); background: var(--bg-muted); }
.sola-calendar__dow > span { text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-light); }

.sola-calendar__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.sola-calendar__day {
  min-height: 96px; padding: var(--space-2); border-inline-end: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 4px;
  cursor: pointer; transition: background var(--transition-fast); position: relative;
}
.sola-calendar__grid > .sola-calendar__day:nth-child(7n) { border-inline-end: 0; }
.sola-calendar__day:hover { background: var(--grey-100); }
.sola-calendar__daynum {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--radius-circle);
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-primary); margin-inline-start: auto;
}
.sola-calendar__day--muted { background: var(--bg-muted); }
.sola-calendar__day--muted .sola-calendar__daynum { color: var(--text-light); font-weight: var(--fw-regular); }
.sola-calendar__day.is-today .sola-calendar__daynum { background: var(--sola-primary-soft-2); color: var(--sola-primary); font-weight: var(--fw-bold); }
.sola-calendar__day.is-selected { background: var(--sola-primary-soft); }
.sola-calendar__day.is-selected .sola-calendar__daynum { background: var(--sola-primary); color: #fff; }

.sola-calendar__events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.sola-calendar__event {
  font-size: 11px; font-weight: var(--fw-medium); line-height: 1.3; padding: 2px 6px; border-radius: var(--radius-xs);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--sola-primary-soft); color: var(--sola-primary-dark);
  border-inline-start: 3px solid var(--sola-primary);
}
.sola-calendar__event--success { background: var(--success-soft); color: var(--success-color); border-inline-start-color: var(--success-color); }
.sola-calendar__event--warning { background: var(--warning-soft); color: var(--warning-color); border-inline-start-color: var(--warning-color); }
.sola-calendar__event--danger  { background: var(--danger-soft);  color: var(--danger-color);  border-inline-start-color: var(--danger-color); }
.sola-calendar__event--info    { background: var(--info-soft);    color: var(--info-color);    border-inline-start-color: var(--info-color); }
.sola-calendar__more { font-size: var(--fs-xs); color: var(--text-secondary); padding-inline-start: 6px; }

/* Compact variant — date picker (dots instead of event chips, smaller cells) */
.sola-calendar--compact { max-width: 320px; }
.sola-calendar--compact .sola-calendar__day { min-height: 0; aspect-ratio: 1; align-items: center; justify-content: center; padding: 4px; gap: 3px; }
.sola-calendar--compact .sola-calendar__daynum { margin: 0; }
.sola-calendar--compact .sola-calendar__events { flex-direction: row; gap: 3px; }
.sola-calendar--compact .sola-calendar__event { width: 5px; height: 5px; padding: 0; border: 0; border-radius: var(--radius-circle); background: var(--sola-primary); font-size: 0; }
.sola-calendar--compact .sola-calendar__event--success { background: var(--success-color); }
.sola-calendar--compact .sola-calendar__event--warning { background: var(--warning-color); }
.sola-calendar--compact .sola-calendar__event--danger  { background: var(--danger-color); }
.sola-calendar--compact .sola-calendar__event--info    { background: var(--info-color); }

/* ----- Dropdown content menu (kebab; needs sola-menu.js) ----------------- */
.sola-menu { position: relative; display: inline-block; }
.sola-menu__trigger {
  width: 30px; height: 30px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-light); display: inline-grid; place-items: center;
  cursor: pointer; transition: var(--transition-fast); font-size: var(--fs-sm);
}
.sola-menu__trigger:hover, .sola-menu.is-open .sola-menu__trigger { background: var(--sola-primary-soft); color: var(--sola-primary); }
.sola-menu__panel {
  position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: var(--z-dropdown);
  min-width: 190px; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: var(--space-1);
  display: none; animation: sola-menu-in 0.12s var(--ease-out);
}
.sola-menu--start .sola-menu__panel { inset-inline-end: auto; inset-inline-start: 0; }
.sola-menu--up .sola-menu__panel { top: auto; bottom: calc(100% + 4px); }
.sola-menu.is-open .sola-menu__panel { display: block; }
@keyframes sola-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sola-menu__item {
  display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-xs); font-size: var(--fs-base); cursor: pointer; color: var(--text-primary);
  white-space: nowrap; border: 0; background: none; width: 100%; text-align: start; font-family: inherit;
}
.sola-menu__item i { width: 18px; text-align: center; color: var(--text-light); }
.sola-menu__item:hover { background: var(--bg-sidebar-hover); color: var(--sola-primary); }
.sola-menu__item:hover i { color: var(--sola-primary); }
.sola-menu__item--danger:hover { background: var(--danger-soft); color: var(--danger-color); }
.sola-menu__item--danger:hover i { color: var(--danger-color); }
.sola-menu__sep { height: 1px; background: var(--border-color); margin: var(--space-1) 0; }
.sola-menu__label { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-light); }

/* ----- Tree view (DMS folder tree, vanilla; needs sola-tree.js) ---------- */
.sola-tree-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; max-width: 360px; }
.sola-tree-toolbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); }
.sola-tree-toolbar__title { font-weight: var(--fw-semibold); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-secondary); }
.sola-tree-toolbar .spacer { flex: 1; }
.sola-tree-toolbar button {
  width: 28px; height: 28px; border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary); display: grid; place-items: center;
  cursor: pointer; transition: var(--transition-fast); font-size: var(--fs-xs);
}
.sola-tree-toolbar button:hover { border-color: var(--sola-primary); color: var(--sola-primary); background: var(--sola-primary-soft); }
.sola-tree-search { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); color: var(--text-light); }
.sola-tree-search input { border: 0; outline: none; background: transparent; flex: 1; font-size: var(--fs-sm); color: var(--text-primary); font-family: inherit; }

.sola-tree, .sola-tree ul { list-style: none; margin: 0; padding: 0; }
.sola-tree { padding: var(--space-2); max-height: 340px; overflow: auto; user-select: none; }
.sola-tree__children { display: none; }
.sola-tree__node.is-open > .sola-tree__children { display: block; }
.sola-tree__node.is-hidden { display: none; }
.sola-tree__row {
  display: flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-sm); cursor: pointer;
  padding: 6px var(--space-2); padding-inline-start: calc(var(--space-2) + var(--tree-depth, 0) * 18px);
  color: var(--text-primary); transition: background var(--transition-fast); white-space: nowrap;
}
.sola-tree__row:hover { background: var(--grey-100); }
.sola-tree__node.is-selected > .sola-tree__row { background: var(--sola-primary-soft); color: var(--sola-primary-dark); font-weight: var(--fw-medium); }
.sola-tree__toggle { width: 16px; height: 16px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-light); font-size: 11px; transition: transform 0.15s ease; }
.sola-tree__node.is-open > .sola-tree__row .sola-tree__toggle { transform: rotate(90deg); }
.sola-tree__toggle.is-leaf { visibility: hidden; }
.sola-tree__icon { width: 18px; text-align: center; flex-shrink: 0; }
.sola-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sola-tree__count { font-size: var(--fs-xs); color: var(--text-light); font-variant-numeric: tabular-nums; }
[dir="rtl"] .sola-tree__toggle { transform: rotate(180deg); }
[dir="rtl"] .sola-tree__node.is-open > .sola-tree__row .sola-tree__toggle { transform: rotate(90deg); }