/* ==========================================================================
   components.css — Reusable UI components (cards, tables, forms, widgets)
   Naming: page-header, stat-card, status-badge, activity-item, filter-bar…
   ========================================================================== */

/* ------------------------------------------------------------ PAGE HEADER */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--app-gap-md); flex-wrap: wrap; margin-bottom: var(--app-gap-lg);
}
.page-header-title { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.page-header h1 { margin: 0; font-size: var(--app-fs-page-title); }
.page-header-desc { margin: 0; color: var(--app-text-muted); font-size: var(--app-fs-sm); max-width: 70ch; }
.page-header-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-breadcrumb { margin-bottom: .35rem; font-size: var(--app-fs-caption); }
.page-breadcrumb .breadcrumb { margin: 0; }
.page-breadcrumb .breadcrumb-item a { color: var(--app-text-muted); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .875rem; }
.section-title h2 { margin: 0; font-size: var(--app-fs-section); }
.section-title p { margin: 0; font-size: var(--app-fs-caption); color: var(--app-text-muted); }

/* ------------------------------------------------------------------ CARDS */
.card {
  background: var(--app-surface); border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-xs);
}
.card + .card, .card-stack > * + * { margin-top: var(--app-gap-md); }
.card-header {
  background: transparent; border-bottom: 1px solid var(--app-border);
  padding: var(--app-card-padding); display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.card-header h3, .card-title { margin: 0; font-size: var(--app-fs-card-title); font-weight: 600; }
.card-subtitle { margin: .1rem 0 0; font-size: var(--app-fs-caption); color: var(--app-text-muted); }
.card-header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: .375rem; }
.card-body { padding: var(--app-card-padding); }
.card-footer { background: var(--app-surface-muted); border-top: 1px solid var(--app-border); padding: .75rem 1.25rem; font-size: var(--app-fs-sm); }
.card-flush .card-body { padding: 0; }

/* ------------------------------------------------------------- STAT CARDS */
.stat-card { position: relative; height: 100%; }
.stat-card .card-body { display: flex; flex-direction: column; gap: .6rem; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stat-label { font-size: var(--app-fs-caption); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--app-text-muted); }
.stat-icon {
  width: 34px; height: 34px; border-radius: var(--app-radius-md); display: grid; place-items: center;
  font-size: 1rem; background: var(--app-surface-muted); color: var(--app-text-muted);
}
.stat-icon-primary { background: var(--app-primary-soft); color: var(--app-primary); }
.stat-icon-success { background: var(--app-success-soft); color: var(--app-success); }
.stat-icon-warning { background: var(--app-warning-soft); color: var(--app-warning); }
.stat-icon-danger { background: var(--app-danger-soft); color: var(--app-danger); }
.stat-icon-info { background: var(--app-info-soft); color: var(--app-info); }
.stat-icon-purple { background: var(--app-purple-soft); color: var(--app-purple); }
.stat-value { font-size: 1.5rem; font-weight: 650; line-height: 1.15; color: var(--app-heading); font-variant-numeric: tabular-nums; }
.stat-foot { display: flex; align-items: center; gap: .4rem; font-size: var(--app-fs-caption); color: var(--app-text-muted); }
.trend { display: inline-flex; align-items: center; gap: .15rem; font-weight: 600; }
.trend-up { color: var(--app-success); }
.trend-down { color: var(--app-danger); }
.trend-flat { color: var(--app-text-muted); }
.stat-spark { height: 34px; }

/* --------------------------------------------------------- STATUS BADGES */
.status-badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .5rem;
  border-radius: var(--app-radius-sm); font-size: var(--app-fs-caption); font-weight: 600;
  line-height: 1.4; white-space: nowrap; border: 1px solid transparent;
}
.status-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-badge.is-success, .status-badge.is-active, .status-badge.is-completed, .status-badge.is-paid,
.status-badge.is-published, .status-badge.is-approved, .status-badge.is-delivered
  { background: var(--app-success-soft); color: var(--app-success); }
.status-badge.is-warning, .status-badge.is-pending, .status-badge.is-processing, .status-badge.is-partial,
.status-badge.is-low-stock, .status-badge.is-in-progress
  { background: var(--app-warning-soft); color: var(--app-warning); }
.status-badge.is-danger, .status-badge.is-cancelled, .status-badge.is-failed, .status-badge.is-overdue,
.status-badge.is-out-of-stock, .status-badge.is-blocked, .status-badge.is-rejected
  { background: var(--app-danger-soft); color: var(--app-danger); }
.status-badge.is-info, .status-badge.is-shipped, .status-badge.is-refunded, .status-badge.is-scheduled
  { background: var(--app-info-soft); color: var(--app-info); }
.status-badge.is-secondary, .status-badge.is-inactive, .status-badge.is-draft, .status-badge.is-archived,
.status-badge.is-closed
  { background: var(--app-surface-hover); color: var(--app-text-muted); }
.status-badge.is-purple, .status-badge.is-new { background: var(--app-purple-soft); color: var(--app-purple); }

.badge-soft { background: var(--app-surface-hover); color: var(--app-text-muted); font-weight: 500; border-radius: var(--app-radius-sm); }
.priority-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.priority-high { background: var(--app-danger); }
.priority-medium { background: var(--app-warning); }
.priority-low { background: var(--app-success); }

/* ---------------------------------------------------------------- AVATARS */
.avatar {
  display: inline-grid; place-items: center; border-radius: var(--app-radius-pill);
  background: var(--app-surface-hover); color: var(--app-text); font-weight: 600;
  width: 36px; height: 36px; font-size: .8125rem; flex: 0 0 auto; overflow: hidden;
}
.avatar-xs { width: 24px; height: 24px; font-size: .625rem; }
.avatar-sm { width: 30px; height: 30px; font-size: .6875rem; }
.avatar-md { width: 40px; height: 40px; font-size: .875rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }
.avatar-xl { width: 88px; height: 88px; font-size: 1.75rem; }
.avatar-square { border-radius: var(--app-radius-md); }
.avatar-primary { background: var(--app-primary-soft); color: var(--app-primary); }
.avatar-success { background: var(--app-success-soft); color: var(--app-success); }
.avatar-warning { background: var(--app-warning-soft); color: var(--app-warning); }
.avatar-danger { background: var(--app-danger-soft); color: var(--app-danger); }
.avatar-info { background: var(--app-info-soft); color: var(--app-info); }
.avatar-purple { background: var(--app-purple-soft); color: var(--app-purple); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--app-surface); margin-inline-start: -8px; }
.avatar-group .avatar:first-child { margin-inline-start: 0; }
.avatar-status { position: relative; }
.avatar-status::after {
  content: ""; position: absolute; bottom: 0; inset-inline-end: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--app-success); border: 2px solid var(--app-surface);
}

/* Identity cell (avatar + name + secondary line) used across all tables */
.identity { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.identity-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.identity-title { font-weight: 600; color: var(--app-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.identity-sub { font-size: var(--app-fs-caption); color: var(--app-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.identity-title:hover { color: var(--app-primary); }

/* ----------------------------------------------------------------- TABLES */
.table-wrap { width: 100%; overflow-x: auto; }
.table { --bs-table-bg: transparent; margin: 0; color: var(--app-text); font-size: var(--app-fs-body); }
.table > thead > tr > th {
  background: var(--app-surface-muted); color: var(--app-text-muted);
  font-size: var(--app-fs-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--app-border); padding: .625rem .875rem; white-space: nowrap;
}
.table > tbody > tr > td { padding: .75rem .875rem; border-bottom: 1px solid var(--app-border); vertical-align: middle; }
[data-density="compact"] .table > tbody > tr > td { padding: .5rem .75rem; }
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr:hover > td { background: var(--app-surface-muted); }
.table tr.selected > td { background: var(--app-primary-soft) !important; }
.table-actions { display: flex; align-items: center; gap: .25rem; justify-content: flex-end; }
.table-check { width: 38px; }
.col-numeric { text-align: end; font-variant-numeric: tabular-nums; }

/* DataTables integration */
div.dt-container .dt-paging .page-link { border-radius: var(--app-radius-sm); font-size: var(--app-fs-sm); }
div.dt-container .dt-info { font-size: var(--app-fs-sm); color: var(--app-text-muted); padding-top: .25rem; }
div.dt-container { padding: 0 1rem 1rem; }
div.dt-container .dt-layout-row:first-child { display: none; }
table.dataTable thead th.dt-orderable-asc span.dt-column-order::before,
table.dataTable thead th.dt-orderable-desc span.dt-column-order::after { opacity: .5; }

/* ------------------------------------------------------------- FILTER BAR */
.filter-bar {
  display: flex; align-items: flex-end; gap: .625rem; flex-wrap: wrap;
  padding: var(--app-card-padding); border-bottom: 1px solid var(--app-border);
}
.filter-field { display: flex; flex-direction: column; gap: .25rem; min-width: 150px; }
.filter-field > label { font-size: var(--app-fs-caption); font-weight: 600; color: var(--app-text-muted); }
.filter-search { flex: 1 1 240px; min-width: 200px; }
.filter-actions { display: flex; gap: .375rem; margin-inline-start: auto; }
.bulk-bar {
  display: none; align-items: center; gap: .625rem; flex-wrap: wrap;
  padding: .625rem 1.25rem; background: var(--app-primary-soft); border-bottom: 1px solid var(--app-border);
  font-size: var(--app-fs-sm);
}
.bulk-bar.show { display: flex; }
.bulk-count { font-weight: 600; color: var(--app-primary); }

/* ------------------------------------------------------------------ FORMS */
.form-label { font-size: var(--app-fs-sm); font-weight: 600; color: var(--app-text); margin-bottom: .3rem; }
.form-label .required { color: var(--app-danger); }
.form-control, .form-select {
  font-size: var(--app-fs-body); border-color: var(--app-border-strong);
  border-radius: var(--app-radius-md); padding: .4375rem .6875rem; color: var(--app-text);
  background-color: var(--app-surface); transition: border-color var(--app-transition-fast), box-shadow var(--app-transition-fast);
}
.form-control::placeholder { color: var(--app-text-subtle); }
.form-control:focus, .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgba(47, 91, 215, .14); }
.form-control:disabled, .form-control[readonly], .form-select:disabled { background: var(--app-surface-muted); color: var(--app-text-muted); }
.form-control-sm, .form-select-sm { font-size: var(--app-fs-sm); padding: .3rem .55rem; }
.form-text { font-size: var(--app-fs-caption); color: var(--app-text-muted); }
.input-group-text { background: var(--app-surface-muted); border-color: var(--app-border-strong); font-size: var(--app-fs-sm); color: var(--app-text-muted); }
.was-validated .form-control:valid, .form-control.is-valid { border-color: var(--app-success); background-image: none; }
.was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--app-danger); background-image: none; }
.invalid-feedback, .valid-feedback { font-size: var(--app-fs-caption); font-weight: 500; }
.form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); }
.form-check-label { font-size: var(--app-fs-body); }
.form-switch .form-check-input { width: 2.15em; height: 1.15em; }

.form-section { padding: var(--app-card-padding); border-bottom: 1px solid var(--app-border); }
.form-section:last-child { border-bottom: 0; }
.form-section-head { margin-bottom: 1rem; }
.form-section-head h3 { margin: 0 0 .15rem; font-size: var(--app-fs-card-title); }
.form-section-head p { margin: 0; font-size: var(--app-fs-caption); color: var(--app-text-muted); }
.form-actions {
  display: flex; gap: .5rem; justify-content: flex-end; padding: .875rem 1.25rem;
  background: var(--app-surface-muted); border-top: 1px solid var(--app-border);
  border-radius: 0 0 var(--app-radius-lg) var(--app-radius-lg);
}
.form-sticky-actions { position: sticky; bottom: 0; z-index: 5; }

/* Buttons */
.btn { font-size: var(--app-fs-body); font-weight: 500; border-radius: var(--app-radius-md); padding: .4375rem .875rem; }
.btn-sm { font-size: var(--app-fs-sm); padding: .3125rem .625rem; }
.btn-lg { font-size: .9375rem; padding: .625rem 1.125rem; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-hover); }
.btn-outline-secondary { --bs-btn-color: var(--app-text); --bs-btn-border-color: var(--app-border-strong); --bs-btn-hover-bg: var(--app-surface-hover); --bs-btn-hover-color: var(--app-text); --bs-btn-hover-border-color: var(--app-border-strong); }
.btn-soft { background: var(--app-surface-hover); color: var(--app-text); border: 1px solid transparent; }
.btn-soft:hover { background: var(--app-border); color: var(--app-text); }
.btn-soft-primary { background: var(--app-primary-soft); color: var(--app-primary); }
.btn-soft-danger { background: var(--app-danger-soft); color: var(--app-danger); }
.btn i { vertical-align: -1px; }

/* Segmented control (chart range filters, view switchers) */
.segmented { display: inline-flex; background: var(--app-surface-muted); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); padding: 2px; gap: 2px; }
.segmented button {
  border: 0; background: transparent; color: var(--app-text-muted); font-size: var(--app-fs-caption);
  font-weight: 500; padding: .25rem .625rem; border-radius: calc(var(--app-radius-md) - 2px);
}
.segmented button.active { background: var(--app-surface); color: var(--app-text); box-shadow: var(--app-shadow-xs); font-weight: 600; }

/* --------------------------------------------------------------- UPLOADER */
.dropzone {
  border: 1.5px dashed var(--app-border-strong); border-radius: var(--app-radius-lg);
  background: var(--app-surface-muted); padding: 1.75rem 1rem; text-align: center;
  transition: border-color var(--app-transition-fast), background var(--app-transition-fast);
}
.dropzone.dragover { border-color: var(--app-primary); background: var(--app-primary-soft); }
.dropzone i { font-size: 1.6rem; color: var(--app-text-muted); }
.upload-item { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--app-border); }
.upload-item:last-child { border-bottom: 0; }
.file-icon { width: 34px; height: 34px; border-radius: var(--app-radius-sm); display: grid; place-items: center; background: var(--app-surface-hover); color: var(--app-text-muted); }

/* --------------------------------------------------------------- WIDGETS */
.activity-item { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--app-border); }
.activity-item:last-child { border-bottom: 0; }
.activity-body { min-width: 0; flex: 1 1 auto; }
.activity-text { margin: 0; font-size: var(--app-fs-body); }
.activity-text strong { font-weight: 600; }
.activity-meta { font-size: var(--app-fs-caption); color: var(--app-text-muted); display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .1rem; }

.notification-item { display: flex; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); transition: background var(--app-transition-fast); }
.notification-item:hover { background: var(--app-surface-muted); }
.notification-item.unread { background: var(--app-primary-soft); }
.notification-item.unread:hover { background: #e2eaff; }
.notification-icon { width: 34px; height: 34px; border-radius: var(--app-radius-md); display: grid; place-items: center; }
.notification-title { font-size: var(--app-fs-body); font-weight: 600; margin: 0; }
.notification-text { font-size: var(--app-fs-sm); color: var(--app-text-muted); margin: 0; }
.notification-time { font-size: var(--app-fs-caption); color: var(--app-text-subtle); }

.timeline { position: relative; padding-inline-start: 1.5rem; }
.timeline::before { content: ""; position: absolute; inset-block: .35rem; inset-inline-start: 6px; width: 2px; background: var(--app-border); }
.timeline-item { position: relative; padding-bottom: 1.1rem; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute; inset-inline-start: -1.5rem; top: .2rem; width: 14px; height: 14px;
  border-radius: 50%; background: var(--app-surface); border: 3px solid var(--app-primary);
}
.timeline-dot.is-success { border-color: var(--app-success); }
.timeline-dot.is-warning { border-color: var(--app-warning); }
.timeline-dot.is-danger { border-color: var(--app-danger); }
.timeline-dot.is-muted { border-color: var(--app-border-strong); }
.timeline-title { font-size: var(--app-fs-body); font-weight: 600; margin: 0; }
.timeline-meta { font-size: var(--app-fs-caption); color: var(--app-text-muted); }

.quick-action {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
  padding: .9rem .5rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-md);
  background: var(--app-surface); color: var(--app-text); text-align: center; height: 100%;
  transition: all var(--app-transition-fast); font-size: var(--app-fs-caption); font-weight: 500;
}
.quick-action:hover { border-color: var(--app-primary); color: var(--app-primary); background: var(--app-primary-soft); }
.quick-action i { font-size: 1.15rem; }

.task-item { display: flex; align-items: flex-start; gap: .625rem; padding: .625rem 0; border-bottom: 1px solid var(--app-border); }
.task-item:last-child { border-bottom: 0; }
.task-title { font-size: var(--app-fs-body); font-weight: 500; margin: 0; }
.task-item.done .task-title { text-decoration: line-through; color: var(--app-text-muted); }
.task-meta { display: flex; gap: .625rem; align-items: center; font-size: var(--app-fs-caption); color: var(--app-text-muted); margin-top: .1rem; }

/* Charts */
.chart-box { position: relative; width: 100%; }
.chart-sm { height: 180px; }
.chart-md { height: 260px; }
.chart-lg { height: 320px; }
.legend-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.legend-list li { display: flex; align-items: center; gap: .5rem; font-size: var(--app-fs-sm); }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; }
.legend-value { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Geo / progress list widget */
.meter-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.meter-label { width: 130px; font-size: var(--app-fs-sm); display: flex; align-items: center; gap: .4rem; }
.meter-track { flex: 1 1 auto; height: 6px; background: var(--app-surface-hover); border-radius: var(--app-radius-pill); overflow: hidden; }
.meter-fill { height: 100%; background: var(--app-primary); border-radius: inherit; }
.meter-value { width: 68px; text-align: end; font-size: var(--app-fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ STATES (empty…) */
.empty-state { text-align: center; padding: 2.5rem 1.25rem; }
.empty-state-icon {
  width: 56px; height: 56px; border-radius: var(--app-radius-lg); margin: 0 auto .875rem;
  display: grid; place-items: center; background: var(--app-surface-muted); color: var(--app-text-subtle); font-size: 1.5rem;
}
.empty-state h3 { font-size: var(--app-fs-card-title); margin: 0 0 .3rem; }
.empty-state p { color: var(--app-text-muted); font-size: var(--app-fs-sm); max-width: 44ch; margin: 0 auto 1rem; }

.skeleton { background: linear-gradient(90deg, var(--app-surface-hover) 25%, var(--app-surface-muted) 37%, var(--app-surface-hover) 63%); background-size: 400% 100%; animation: skeleton 1.3s ease-in-out infinite; border-radius: var(--app-radius-sm); }
.skeleton-line { height: 10px; margin-bottom: .6rem; }
.skeleton-title { height: 15px; width: 45%; margin-bottom: .9rem; }
.skeleton-circle { border-radius: 50%; width: 36px; height: 36px; }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } * { transition: none !important; } }

.loading-overlay { position: absolute; inset: 0; background: rgba(255,255,255,.65); display: grid; place-items: center; border-radius: inherit; z-index: 3; }

/* --------------------------------------------------------------- MISC UI */
.dropdown-menu {
  border: 1px solid var(--app-border); border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-md); padding: .375rem; font-size: var(--app-fs-body);
  background: var(--app-surface);
}
.dropdown-menu-wide { min-width: 232px; }
.dropdown-item { border-radius: var(--app-radius-sm); padding: .4375rem .625rem; display: flex; align-items: center; gap: .55rem; color: var(--app-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--app-surface-hover); color: var(--app-text); }
.dropdown-item.active { background: var(--app-primary-soft); color: var(--app-primary); }
.dropdown-item i { width: 16px; font-size: .95rem; opacity: .85; }
.dropdown-header { font-size: var(--app-fs-caption); text-transform: uppercase; letter-spacing: .05em; color: var(--app-text-subtle); font-weight: 600; }
.dropdown-user { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; }
.dropdown-user strong { display: block; font-size: var(--app-fs-body); }
.dropdown-user small { color: var(--app-text-muted); font-size: var(--app-fs-caption); }

.dropdown-panel { width: 360px; max-width: calc(100vw - 2rem); padding: 0; overflow: hidden; }
.dropdown-panel-head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); }
.dropdown-panel-head h6 { margin: 0; font-size: var(--app-fs-card-title); }
.dropdown-panel-body { max-height: 340px; overflow-y: auto; }
.dropdown-panel-foot { padding: .625rem 1rem; border-top: 1px solid var(--app-border); text-align: center; background: var(--app-surface-muted); font-size: var(--app-fs-sm); }

.modal-content { border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); box-shadow: var(--app-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--app-border); padding: .875rem 1.25rem; }
.modal-title { font-size: var(--app-fs-section); }
.modal-body { padding: 1.25rem; }
.offcanvas { border-color: var(--app-border) !important; }
.offcanvas-header { border-bottom: 1px solid var(--app-border); }
.offcanvas-footer { padding: 1rem; border-top: 1px solid var(--app-border); }

.nav-tabs { border-bottom: 1px solid var(--app-border); gap: .25rem; }
.nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; color: var(--app-text-muted);
  font-size: var(--app-fs-body); font-weight: 500; padding: .625rem .875rem; border-radius: 0;
}
.nav-tabs .nav-link:hover { color: var(--app-text); border-bottom-color: var(--app-border-strong); }
.nav-tabs .nav-link.active { color: var(--app-primary); border-bottom-color: var(--app-primary); background: transparent; font-weight: 600; }
.nav-pills .nav-link { color: var(--app-text-muted); font-size: var(--app-fs-body); border-radius: var(--app-radius-md); padding: .4375rem .75rem; }
.nav-pills .nav-link.active { background: var(--app-primary-soft); color: var(--app-primary); font-weight: 600; }

.accordion-button { font-size: var(--app-fs-body); font-weight: 600; padding: .875rem 1rem; background: var(--app-surface); color: var(--app-text); }
.accordion-button:not(.collapsed) { background: var(--app-primary-soft); color: var(--app-primary); box-shadow: none; }
.accordion-item { border-color: var(--app-border); }
.alert { border-radius: var(--app-radius-md); font-size: var(--app-fs-body); border-width: 1px; padding: .75rem 1rem; }
.progress { background: var(--app-surface-hover); border-radius: var(--app-radius-pill); }
.list-group-item { border-color: var(--app-border); background: var(--app-surface); color: var(--app-text); font-size: var(--app-fs-body); }
.page-link { color: var(--app-text); border-color: var(--app-border); }
.page-item.active .page-link { background: var(--app-primary); border-color: var(--app-primary); }
.toast { border: 1px solid var(--app-border); border-radius: var(--app-radius-md); box-shadow: var(--app-shadow-md); background: var(--app-surface); }
.toast-icon { width: 28px; height: 28px; border-radius: var(--app-radius-sm); display: grid; place-items: center; flex: 0 0 28px; }

/* Stepper / wizard */
.stepper { display: flex; gap: .5rem; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: .55rem; padding: .5rem .75rem; border: 1px solid var(--app-border); border-radius: var(--app-radius-md); flex: 1 1 150px; background: var(--app-surface); }
.step-index { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--app-surface-hover); color: var(--app-text-muted); font-size: var(--app-fs-caption); font-weight: 700; flex: 0 0 24px; }
.step.active { border-color: var(--app-primary); background: var(--app-primary-soft); }
.step.active .step-index { background: var(--app-primary); color: #fff; }
.step.done .step-index { background: var(--app-success); color: #fff; }
.step-label { font-size: var(--app-fs-caption); font-weight: 600; }
.step-sub { font-size: .6875rem; color: var(--app-text-muted); }

/* Command palette */
.command-palette .modal-content { overflow: hidden; }
.command-input { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-bottom: 1px solid var(--app-border); }
.command-input .form-control { border: 0; padding: 0; box-shadow: none !important; font-size: .9375rem; background: transparent; }
.command-results { max-height: 58vh; overflow-y: auto; padding: .5rem; }
.command-group-title { font-size: var(--app-fs-caption); text-transform: uppercase; letter-spacing: .05em; color: var(--app-text-subtle); font-weight: 600; padding: .5rem .625rem .25rem; }
.command-item { display: flex; align-items: center; gap: .625rem; width: 100%; text-align: start; padding: .5rem .625rem; border: 0; background: transparent; border-radius: var(--app-radius-md); color: var(--app-text); }
.command-item:hover, .command-item.is-active { background: var(--app-surface-hover); }
.command-item .ci-icon { width: 30px; height: 30px; border-radius: var(--app-radius-sm); display: grid; place-items: center; background: var(--app-surface-muted); color: var(--app-text-muted); flex: 0 0 30px; }
.command-item .ci-title { font-size: var(--app-fs-body); font-weight: 500; }
.command-item .ci-sub { font-size: var(--app-fs-caption); color: var(--app-text-muted); }
.command-item .ci-meta { margin-inline-start: auto; font-size: var(--app-fs-caption); color: var(--app-text-subtle); }
.command-foot { display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--app-border); background: var(--app-surface-muted); font-size: var(--app-fs-caption); color: var(--app-text-muted); }

/* Settings panel */
.setting-group { padding-bottom: 1.1rem; margin-bottom: 1.1rem; border-bottom: 1px solid var(--app-border); }
.setting-group:last-child { border-bottom: 0; }
.setting-group h6 { font-size: var(--app-fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--app-text-muted); margin-bottom: .625rem; }
.option-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.option-tile { border: 1px solid var(--app-border); border-radius: var(--app-radius-md); padding: .5rem; text-align: center; background: var(--app-surface); font-size: var(--app-fs-caption); color: var(--app-text); }
.option-tile.active { border-color: var(--app-primary); background: var(--app-primary-soft); color: var(--app-primary); font-weight: 600; }
.swatch-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.swatch { width: 28px; height: 28px; border-radius: var(--app-radius-sm); border: 2px solid transparent; }
.swatch.active { border-color: var(--app-text); }

/* Invoice sheet + print */
.invoice-sheet { background: var(--app-surface); padding: 2rem; }
.invoice-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.25rem; border-bottom: 1px solid var(--app-border); }
.invoice-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.25rem; padding: 1.25rem 0; }
.invoice-party h4 { font-size: var(--app-fs-caption); text-transform: uppercase; letter-spacing: .05em; color: var(--app-text-muted); margin-bottom: .35rem; }
.invoice-totals { margin-inline-start: auto; width: min(320px, 100%); }
.invoice-totals dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem .75rem; margin: 0; font-size: var(--app-fs-body); }
.invoice-totals dt { color: var(--app-text-muted); font-weight: 500; }
.invoice-totals dd { margin: 0; text-align: end; font-variant-numeric: tabular-nums; }
.invoice-totals .grand { font-size: 1.05rem; font-weight: 700; color: var(--app-heading); border-top: 1px solid var(--app-border); padding-top: .5rem; }
.doc-stamp { border: 2px solid var(--app-success); color: var(--app-success); border-radius: var(--app-radius-md); padding: .25rem .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; }

/* Inbox / messages */
.inbox { display: grid; grid-template-columns: 280px 1fr; min-height: 560px; }
.inbox-list { border-inline-end: 1px solid var(--app-border); overflow-y: auto; max-height: 620px; }
.inbox-item { display: flex; gap: .625rem; padding: .75rem 1rem; border-bottom: 1px solid var(--app-border); width: 100%; text-align: start; background: transparent; border-inline: 0; border-top: 0; }
.inbox-item.active { background: var(--app-primary-soft); }
.inbox-item.unread .inbox-name { font-weight: 700; }
.inbox-thread { display: flex; flex-direction: column; }
.message-bubble { max-width: 76%; padding: .625rem .875rem; border-radius: var(--app-radius-lg); background: var(--app-surface-muted); font-size: var(--app-fs-body); }
.message-row { display: flex; gap: .625rem; margin-bottom: 1rem; }
.message-row.out { flex-direction: row-reverse; }
.message-row.out .message-bubble { background: var(--app-primary); color: #fff; }
@media (max-width: 767.98px) { .inbox { grid-template-columns: 1fr; } .inbox-list { max-height: 260px; border-inline-end: 0; border-bottom: 1px solid var(--app-border); } }

/* Media library */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: .875rem; }
.media-tile { border: 1px solid var(--app-border); border-radius: var(--app-radius-md); overflow: hidden; background: var(--app-surface); }
.media-thumb { height: 96px; display: grid; place-items: center; font-size: 1.5rem; background: var(--app-surface-muted); color: var(--app-text-muted); }
.media-info { padding: .5rem .625rem; border-top: 1px solid var(--app-border); }
.media-name { font-size: var(--app-fs-caption); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta { font-size: .6875rem; color: var(--app-text-muted); }

/* Kanban-ish task board + POS */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--app-gap-md); }
.board-col { background: var(--app-surface-muted); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); padding: .75rem; }
.board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .625rem; font-size: var(--app-fs-sm); font-weight: 600; }
.board-card { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); padding: .625rem .75rem; margin-bottom: .5rem; box-shadow: var(--app-shadow-xs); }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.pos-tile { border: 1px solid var(--app-border); border-radius: var(--app-radius-md); padding: .75rem; background: var(--app-surface); text-align: start; }
.pos-tile:hover { border-color: var(--app-primary); }

/* JSON diff viewer (audit log) */
.json-view { background: var(--app-surface-muted); border: 1px solid var(--app-border); border-radius: var(--app-radius-md); padding: .875rem; font-family: var(--app-font-mono); font-size: var(--app-fs-caption); overflow-x: auto; margin: 0; }
.json-view .added { background: var(--app-success-soft); color: var(--app-success); display: block; }
.json-view .removed { background: var(--app-danger-soft); color: var(--app-danger); display: block; }

/* Auth + error pages */
.auth-layout { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.auth-aside { display: none; padding: 3rem; background: #16223a; color: #e6ebf5; flex-direction: column; justify-content: space-between; }
.auth-aside-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: .875rem; }
.auth-aside-list li { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--app-fs-body); color: #b9c4d8; }
.auth-aside-list i { color: #7aa2ff; }
.auth-main { display: grid; place-items: center; padding: 2rem 1.25rem; }
.auth-card { width: min(420px, 100%); }
.auth-brand { display: inline-flex; align-items: center; gap: .625rem; margin-bottom: 1.5rem; }
.auth-divider { display: flex; align-items: center; gap: .75rem; color: var(--app-text-subtle); font-size: var(--app-fs-caption); margin: 1rem 0; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--app-border); }
.otp-inputs { display: flex; gap: .5rem; justify-content: center; }
.otp-inputs .form-control { width: 48px; height: 52px; text-align: center; font-size: 1.15rem; font-weight: 600; }
@media (min-width: 992px) { .auth-layout { grid-template-columns: 46% 54%; } .auth-aside { display: flex; } }

.error-page { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 2rem 1.25rem; }
.error-code { font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700; line-height: 1; color: var(--app-primary); letter-spacing: -.03em; }

/* Help center */
.help-hero { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--app-radius-lg); padding: 2rem; text-align: center; }
.help-card { height: 100%; }
.help-card i { font-size: 1.4rem; color: var(--app-primary); }

/* Responsive table → card fallback for key list screens */
@media (max-width: 575.98px) {
  .table-stack thead { display: none; }
  .table-stack tbody tr { display: block; border: 1px solid var(--app-border); border-radius: var(--app-radius-md); margin-bottom: .625rem; padding: .25rem .5rem; }
  .table-stack tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .375rem .25rem; }
  .table-stack tbody td::before { content: attr(data-label); font-size: var(--app-fs-caption); font-weight: 600; color: var(--app-text-muted); text-transform: uppercase; }
}