/* ============================================================================
   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;
}
.sola-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border-color); font-size: var(--fs-base); }
.sola-table tbody tr:hover { background: var(--grey-100); }

/* ===========================================================================
   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; }