/* ==========================================================================
   Camp Admin — Component Styles
   Cards, buttons, badges, tables, forms, toasts, empty states.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════════════════════════════ */

.ca-card {
    background: var(--ca-neutral-0);
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-xs);
    transition: box-shadow var(--ca-duration-normal) var(--ca-ease-default),
                border-color var(--ca-duration-normal) var(--ca-ease-default),
                transform var(--ca-duration-normal) var(--ca-ease-default);
}

.ca-card-body {
    padding: var(--ca-space-5);
}

.ca-card-header {
    padding: var(--ca-space-4) var(--ca-space-5);
    border-bottom: 1px solid var(--ca-neutral-100);
    background: var(--ca-neutral-25);
}

.ca-card-footer {
    padding: var(--ca-space-3) var(--ca-space-5);
    border-top: 1px solid var(--ca-neutral-100);
    background: var(--ca-neutral-25);
}

/* Interactive card (clickable / hoverable) */
.ca-card-interactive {
    cursor: pointer;
}

.ca-card-interactive:hover {
    box-shadow: var(--ca-shadow-md);
    border-color: var(--ca-neutral-300);
    transform: translateY(-2px);
}

.ca-card-interactive:active {
    transform: scale(0.98);
}

/* Stat card */
.ca-stat-card {
    text-align: center;
    padding: var(--ca-space-5);
}

.ca-stat-card .ca-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ca-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ca-text-xl);
    margin-bottom: var(--ca-space-3);
}

.ca-stat-card .ca-stat-icon.primary   { background: var(--ca-primary-50); color: var(--ca-primary-600); }
.ca-stat-card .ca-stat-icon.success   { background: var(--ca-success-50); color: var(--ca-success-600); }
.ca-stat-card .ca-stat-icon.warning   { background: var(--ca-warning-50); color: var(--ca-warning-600); }
.ca-stat-card .ca-stat-icon.info      { background: var(--ca-info-50);    color: var(--ca-info-600); }
.ca-stat-card .ca-stat-icon.danger    { background: var(--ca-danger-50);  color: var(--ca-danger-600); }

.ca-stat-card .ca-stat-value {
    font-size: var(--ca-text-2xl);
    font-weight: 700;
    color: var(--ca-neutral-900);
    line-height: 1;
    margin-bottom: var(--ca-space-1);
}

.ca-stat-card .ca-stat-label {
    font-size: var(--ca-text-sm);
    color: var(--ca-neutral-500);
    font-weight: 500;
    margin: 0;
}

/* Event card — colored left border by status */
.ca-event-card {
    border-left: 4px solid var(--ca-neutral-300);
}

.ca-event-card[data-status="PLANNING"]   { border-left-color: var(--ca-neutral-400); }
.ca-event-card[data-status="ACTIVE"]     { border-left-color: var(--ca-success-500); }
.ca-event-card[data-status="COMPLETED"]  { border-left-color: var(--ca-primary-500); }
.ca-event-card[data-status="ARCHIVED"]   { border-left-color: var(--ca-neutral-300); }
.ca-event-card[data-status="CANCELLED"]  { border-left-color: var(--ca-danger-400); }

/* Quick action card */
.ca-action-card {
    display: flex;
    align-items: center;
    gap: var(--ca-space-4);
    padding: var(--ca-space-4) var(--ca-space-5);
    text-decoration: none;
    color: var(--ca-neutral-800);
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-lg);
    background: var(--ca-neutral-0);
    transition: all var(--ca-duration-normal) var(--ca-ease-default);
}

.ca-action-card:hover {
    border-color: var(--ca-primary-200);
    background: var(--ca-primary-50);
    color: var(--ca-primary-700);
    box-shadow: var(--ca-shadow-sm);
    transform: translateY(-1px);
}

.ca-action-card .ca-action-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ca-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ca-text-lg);
    background: var(--ca-primary-50);
    color: var(--ca-primary-600);
    flex-shrink: 0;
}

.ca-action-card:hover .ca-action-icon {
    background: var(--ca-primary-100);
}

.ca-action-card .ca-action-text strong {
    display: block;
    font-size: var(--ca-text-sm);
    font-weight: 600;
}

.ca-action-card .ca-action-text p {
    font-size: var(--ca-text-xs);
    color: var(--ca-neutral-500);
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════════ */

.btn {
    font-weight: 500;
    border-radius: var(--ca-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ca-space-2);
    transition: all var(--ca-duration-fast) var(--ca-ease-default);
    font-size: var(--ca-text-sm);
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    line-height: 1.5;
}

.btn:focus-visible {
    outline: 2px solid var(--ca-primary-500);
    outline-offset: 2px;
    box-shadow: none;
}

/* Primary */
.btn-primary {
    background-color: var(--ca-primary-600);
    border-color: var(--ca-primary-600);
    color: white;
}

.btn-primary:hover {
    background-color: var(--ca-primary-700);
    border-color: var(--ca-primary-700);
    transform: translateY(-1px);
    box-shadow: var(--ca-shadow-primary-md);
    color: white;
}

.btn-primary:active {
    background-color: var(--ca-primary-800);
    transform: translateY(0);
    box-shadow: none;
}

/* Outline Primary */
.btn-outline-primary {
    color: var(--ca-primary-600);
    border-color: var(--ca-primary-200);
    background: transparent;
}

.btn-outline-primary:hover {
    background-color: var(--ca-primary-50);
    border-color: var(--ca-primary-300);
    color: var(--ca-primary-700);
}

/* Secondary */
.btn-secondary {
    background-color: var(--ca-neutral-100);
    border-color: var(--ca-neutral-200);
    color: var(--ca-neutral-700);
}

.btn-secondary:hover {
    background-color: var(--ca-neutral-200);
    border-color: var(--ca-neutral-300);
    color: var(--ca-neutral-800);
}

/* Outline Secondary */
.btn-outline-secondary {
    color: var(--ca-neutral-600);
    border-color: var(--ca-neutral-200);
}

.btn-outline-secondary:hover {
    background-color: var(--ca-neutral-50);
    border-color: var(--ca-neutral-300);
    color: var(--ca-neutral-700);
}

/* Danger */
.btn-danger {
    background-color: var(--ca-danger-600);
    border-color: var(--ca-danger-600);
    color: white;
}

.btn-danger:hover {
    background-color: var(--ca-danger-700);
    border-color: var(--ca-danger-700);
    box-shadow: var(--ca-shadow-danger-sm);
    color: white;
}

/* Outline Danger */
.btn-outline-danger {
    color: var(--ca-danger-600);
    border-color: var(--ca-danger-200);
}

.btn-outline-danger:hover {
    background-color: var(--ca-danger-50);
    border-color: var(--ca-danger-300);
    color: var(--ca-danger-700);
}

/* Success */
.btn-success {
    background-color: var(--ca-success-600);
    border-color: var(--ca-success-600);
    color: white;
}

.btn-success:hover {
    background-color: var(--ca-success-700);
    border-color: var(--ca-success-700);
    color: white;
}

/* Ghost button (tertiary) */
.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--ca-neutral-600);
}

.btn-ghost:hover {
    background-color: var(--ca-neutral-100);
    color: var(--ca-neutral-800);
}

/* Icon-only button */
.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ca-radius-md);
}

.btn-icon.btn-sm {
    width: 32px;
    height: 32px;
}

/* Button loading state */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn.is-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: caSpinnerRotate 0.6s linear infinite;
    color: white;
}

.btn-outline-primary.is-loading::after,
.btn-secondary.is-loading::after,
.btn-ghost.is-loading::after {
    color: var(--ca-neutral-500);
}

@keyframes caSpinnerRotate {
    to { transform: rotate(360deg); }
}

/* Outline Light (for dark backgrounds) */
.btn-outline-light {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════════════ */

.ca-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--ca-radius-full);
    font-size: var(--ca-text-xs);
    font-weight: 500;
    line-height: 1.6;
}

.ca-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ca-badge-planning   { background: var(--ca-neutral-100); color: var(--ca-neutral-700); }
.ca-badge-planning::before { background: var(--ca-neutral-400); }

.ca-badge-active     { background: var(--ca-success-50); color: var(--ca-success-700); }
.ca-badge-active::before { background: var(--ca-success-500); }

.ca-badge-completed  { background: var(--ca-primary-50); color: var(--ca-primary-700); }
.ca-badge-completed::before { background: var(--ca-primary-500); }

.ca-badge-archived   { background: var(--ca-neutral-100); color: var(--ca-neutral-500); }
.ca-badge-archived::before { background: var(--ca-neutral-400); }

.ca-badge-cancelled  { background: var(--ca-danger-50);  color: var(--ca-danger-700); }
.ca-badge-cancelled::before { background: var(--ca-danger-400); }

/* Simple badges without dot */
.ca-badge-simple {
    padding: 2px 8px;
    border-radius: var(--ca-radius-full);
    font-size: var(--ca-text-xs);
    font-weight: 500;
}

.ca-badge-simple::before { display: none; }

.ca-badge-primary   { background: var(--ca-primary-50); color: var(--ca-primary-700); }
.ca-badge-success   { background: var(--ca-success-50); color: var(--ca-success-700); }
.ca-badge-warning   { background: var(--ca-warning-50); color: var(--ca-warning-700); }
.ca-badge-danger    { background: var(--ca-danger-50);  color: var(--ca-danger-700); }
.ca-badge-info      { background: var(--ca-info-50);    color: var(--ca-info-700); }
.ca-badge-neutral   { background: var(--ca-neutral-100); color: var(--ca-neutral-600); }

/* ══════════════════════════════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════════════════════════════ */

.ca-table-container {
    background: var(--ca-neutral-0);
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-xs);
    overflow: hidden;
}

.ca-table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.ca-table thead th {
    background: var(--ca-neutral-50);
    border-bottom: 1px solid var(--ca-neutral-200);
    padding: var(--ca-space-3) var(--ca-space-4);
    font-size: var(--ca-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ca-tracking-wider);
    color: var(--ca-neutral-500);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.ca-table tbody td {
    padding: var(--ca-space-3) var(--ca-space-4);
    border-bottom: 1px solid var(--ca-neutral-100);
    font-size: var(--ca-text-sm);
    color: var(--ca-neutral-700);
    vertical-align: middle;
}

.ca-table tbody tr:last-child td {
    border-bottom: none;
}

.ca-table tbody tr:hover {
    background-color: var(--ca-neutral-50);
}

.ca-table tbody tr.active {
    background-color: var(--ca-primary-50);
    border-left: 3px solid var(--ca-primary-500);
}

/* Sortable headers */
.ca-table th[data-sort] {
    cursor: pointer;
    user-select: none;
}

.ca-table th[data-sort]:hover {
    background: var(--ca-neutral-100);
}

.ca-table th[data-sort]::after {
    content: '\F282'; /* bi-chevron-expand */
    font-family: 'bootstrap-icons';
    margin-left: var(--ca-space-1);
    font-size: 0.7em;
    opacity: 0.4;
}

.ca-table th[data-sort="asc"]::after {
    content: '\F286'; /* bi-chevron-up */
    opacity: 1;
    color: var(--ca-primary-600);
}

.ca-table th[data-sort="desc"]::after {
    content: '\F282'; /* bi-chevron-down */
    opacity: 1;
    color: var(--ca-primary-600);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════════════════════ */

.form-control,
.form-select {
    border-radius: var(--ca-radius-md);
    border-color: var(--ca-neutral-300);
    padding: 0.5rem 0.875rem;
    font-size: var(--ca-text-sm);
    transition: border-color var(--ca-duration-fast) var(--ca-ease-default),
                box-shadow var(--ca-duration-fast) var(--ca-ease-default);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ca-primary-400);
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
}

.form-control::placeholder {
    color: var(--ca-neutral-400);
}

.form-label {
    font-size: var(--ca-text-sm);
    font-weight: 500;
    color: var(--ca-neutral-700);
    margin-bottom: var(--ca-space-1);
}

.form-label .required {
    color: var(--ca-danger-500);
    margin-left: 2px;
}

.form-text {
    font-size: var(--ca-text-xs);
    color: var(--ca-neutral-500);
}

/* Validation */
.form-control.is-invalid {
    border-color: var(--ca-danger-400);
}

.form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgb(244 63 94 / 0.15);
}

.invalid-feedback {
    font-size: var(--ca-text-xs);
    color: var(--ca-danger-600);
}

/* Input groups */
.input-group .form-control {
    border-radius: var(--ca-radius-md);
}

.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Checkbox / Radio */
.form-check-input:checked {
    background-color: var(--ca-primary-600);
    border-color: var(--ca-primary-600);
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgb(99 102 241 / 0.15);
    border-color: var(--ca-primary-400);
}

/* Prevent iOS zoom on focus */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    textarea.form-control {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════════════════════ */

.ca-toast-container {
    position: fixed;
    top: calc(var(--ca-navbar-height) + var(--ca-space-4));
    right: var(--ca-space-4);
    z-index: var(--ca-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-2);
    max-width: 400px;
    width: 100%;
    pointer-events: none;
}

.ca-toast {
    background: var(--ca-neutral-0);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-xl);
    border: 1px solid var(--ca-neutral-200);
    display: flex;
    align-items: flex-start;
    gap: var(--ca-space-3);
    padding: var(--ca-space-4);
    pointer-events: auto;
    animation: caToastSlideIn var(--ca-duration-slow) var(--ca-ease-spring) both;
    position: relative;
    overflow: hidden;
}

.ca-toast.hiding {
    animation: caToastSlideOut var(--ca-duration-normal) var(--ca-ease-in) both;
}

.ca-toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ca-toast-success .ca-toast-icon { color: var(--ca-success-500); }
.ca-toast-error   .ca-toast-icon { color: var(--ca-danger-500); }
.ca-toast-warning .ca-toast-icon { color: var(--ca-warning-500); }
.ca-toast-info    .ca-toast-icon { color: var(--ca-info-500); }

.ca-toast-content {
    flex: 1;
    min-width: 0;
}

.ca-toast-title {
    font-size: var(--ca-text-sm);
    font-weight: 600;
    color: var(--ca-neutral-900);
    margin-bottom: 2px;
}

.ca-toast-message {
    font-size: var(--ca-text-sm);
    color: var(--ca-neutral-600);
    margin: 0;
}

.ca-toast-close {
    background: none;
    border: none;
    color: var(--ca-neutral-400);
    cursor: pointer;
    padding: var(--ca-space-1);
    border-radius: var(--ca-radius-sm);
    line-height: 1;
    flex-shrink: 0;
}

.ca-toast-close:hover {
    color: var(--ca-neutral-600);
    background: var(--ca-neutral-100);
}

/* Auto-hide progress bar */
.ca-toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    border-radius: 0 0 var(--ca-radius-lg) var(--ca-radius-lg);
    animation: caToastProgress linear both;
}

.ca-toast-success .ca-toast-progress { background: var(--ca-success-400); }
.ca-toast-error   .ca-toast-progress { background: var(--ca-danger-400); }
.ca-toast-warning .ca-toast-progress { background: var(--ca-warning-400); }
.ca-toast-info    .ca-toast-progress { background: var(--ca-info-400); }

@keyframes caToastSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes caToastSlideOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes caToastProgress {
    from { width: 100%; }
    to { width: 0%; }
}

@media (prefers-reduced-motion: reduce) {
    .ca-toast {
        animation: none;
    }
    .ca-toast.hiding {
        animation: none;
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   EMPTY STATES
   ══════════════════════════════════════════════════════════════════════════ */

.ca-empty-state {
    text-align: center;
    padding: var(--ca-space-12) var(--ca-space-6);
}

.ca-empty-state svg,
.ca-empty-state img {
    width: 160px;
    height: auto;
    margin-bottom: var(--ca-space-6);
    opacity: 0.8;
}

.ca-empty-state h3 {
    font-size: var(--ca-text-lg);
    color: var(--ca-neutral-800);
    margin-bottom: var(--ca-space-2);
}

.ca-empty-state p {
    font-size: var(--ca-text-sm);
    color: var(--ca-neutral-500);
    max-width: 360px;
    margin: 0 auto var(--ca-space-6);
}

/* ══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ══════════════════════════════════════════════════════════════════════════ */

.ca-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ca-space-1);
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ca-space-4) 0;
    font-size: var(--ca-text-sm);
}

.ca-breadcrumb li {
    display: flex;
    align-items: center;
    gap: var(--ca-space-1);
}

.ca-breadcrumb li + li::before {
    content: '\F285'; /* bi-chevron-right */
    font-family: 'bootstrap-icons';
    font-size: 0.65em;
    color: var(--ca-neutral-400);
    margin-right: var(--ca-space-1);
}

.ca-breadcrumb a {
    color: var(--ca-neutral-500);
    text-decoration: none;
}

.ca-breadcrumb a:hover {
    color: var(--ca-primary-600);
}

.ca-breadcrumb .active {
    color: var(--ca-neutral-800);
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODAL / CONFIRM DIALOG
   ══════════════════════════════════════════════════════════════════════════ */

.modal-content {
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-xl);
    box-shadow: var(--ca-shadow-xl);
}

.modal-header {
    border-bottom-color: var(--ca-neutral-100);
    padding: var(--ca-space-5) var(--ca-space-5) var(--ca-space-4);
}

.modal-body {
    padding: var(--ca-space-4) var(--ca-space-5);
}

.modal-footer {
    border-top-color: var(--ca-neutral-100);
    padding: var(--ca-space-4) var(--ca-space-5);
    gap: var(--ca-space-2);
}

.modal-title {
    font-size: var(--ca-text-lg);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   DROPDOWNS
   ══════════════════════════════════════════════════════════════════════════ */

.dropdown-menu {
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-lg);
    padding: var(--ca-space-1);
    min-width: 180px;
}

.dropdown-item {
    border-radius: var(--ca-radius-sm);
    padding: var(--ca-space-2) var(--ca-space-3);
    font-size: var(--ca-text-sm);
    color: var(--ca-neutral-700);
    display: flex;
    align-items: center;
    gap: var(--ca-space-2);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--ca-neutral-50);
    color: var(--ca-neutral-900);
}

.dropdown-item.text-danger:hover {
    background-color: var(--ca-danger-50);
    color: var(--ca-danger-700);
}

.dropdown-divider {
    border-color: var(--ca-neutral-100);
    margin: var(--ca-space-1) 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   LOADING SKELETONS
   ══════════════════════════════════════════════════════════════════════════ */

.ca-skeleton {
    background: linear-gradient(90deg,
        var(--ca-neutral-100) 25%,
        var(--ca-neutral-50) 50%,
        var(--ca-neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: caSkeletonShimmer 1.5s infinite;
    border-radius: var(--ca-radius-sm);
}

.ca-skeleton-text {
    height: 14px;
    margin-bottom: var(--ca-space-2);
    width: 100%;
}

.ca-skeleton-text:last-child {
    width: 60%;
}

.ca-skeleton-heading {
    height: 24px;
    width: 40%;
    margin-bottom: var(--ca-space-3);
}

.ca-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.ca-skeleton-card {
    height: 120px;
}

@keyframes caSkeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ca-skeleton {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   USER AVATAR (Initials)
   ══════════════════════════════════════════════════════════════════════════ */

.ca-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ca-text-xs);
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    flex-shrink: 0;
}

.ca-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.ca-avatar-lg { width: 40px; height: 40px; font-size: var(--ca-text-sm); }
.ca-avatar-xl { width: 56px; height: 56px; font-size: var(--ca-text-lg); }

/* Pagination */
.page-link {
    color: var(--ca-neutral-700);
    border-color: var(--ca-neutral-200);
    font-size: var(--ca-text-sm);
    border-radius: var(--ca-radius-md);
}

.page-link:hover {
    background-color: var(--ca-neutral-50);
    border-color: var(--ca-neutral-300);
    color: var(--ca-primary-600);
}

.page-item.active .page-link {
    background-color: var(--ca-primary-600);
    border-color: var(--ca-primary-600);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIST GROUP OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */

.list-group {
    border-radius: var(--ca-radius-lg);
    overflow: hidden;
    border: 1px solid var(--ca-neutral-200);
}

.list-group-item {
    border-color: var(--ca-neutral-100);
    padding: var(--ca-space-4);
}

.list-group-item-action:hover {
    background-color: var(--ca-neutral-50);
}

/* ══════════════════════════════════════════════════════════════════════════
   NAV TABS / PILLS
   ══════════════════════════════════════════════════════════════════════════ */

.nav-tabs {
    border-bottom-color: var(--ca-neutral-200);
}

.nav-tabs .nav-link {
    color: var(--ca-neutral-600);
    font-weight: 500;
    font-size: var(--ca-text-sm);
    border-radius: var(--ca-radius-md) var(--ca-radius-md) 0 0;
}

.nav-tabs .nav-link.active {
    color: var(--ca-primary-600);
    border-color: var(--ca-neutral-200) var(--ca-neutral-200) white;
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent;
    color: var(--ca-neutral-800);
}

/* ══════════════════════════════════════════════════════════════════════════
   COMMAND PALETTE
   ══════════════════════════════════════════════════════════════════════════ */

.ca-palette-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--ca-z-modal) + 10);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    padding-top: 15vh;
    align-items: flex-start;
}

.ca-palette {
    width: 100%;
    max-width: 580px;
    background: var(--ca-neutral-0);
    border-radius: var(--ca-radius-xl);
    box-shadow: var(--ca-shadow-2xl);
    overflow: hidden;
    animation: caPaletteIn var(--ca-duration-normal) var(--ca-ease-spring) both;
    margin: 0 var(--ca-space-4);
}

@keyframes caPaletteIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ca-palette-input-wrapper {
    display: flex;
    align-items: center;
    padding: var(--ca-space-3) var(--ca-space-4);
    border-bottom: 1px solid var(--ca-neutral-200);
    gap: var(--ca-space-3);
}

.ca-palette-search-icon {
    color: var(--ca-neutral-400);
    font-size: var(--ca-text-lg);
    flex-shrink: 0;
}

.ca-palette-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ca-text-base);
    font-family: var(--ca-font-family);
    color: var(--ca-neutral-900);
    background: transparent;
}

.ca-palette-input::placeholder {
    color: var(--ca-neutral-400);
}

.ca-palette-kbd {
    background: var(--ca-neutral-100);
    border: 1px solid var(--ca-neutral-200);
    border-radius: var(--ca-radius-sm);
    padding: 2px 6px;
    font-size: var(--ca-text-xs);
    color: var(--ca-neutral-500);
    font-family: var(--ca-font-family);
    flex-shrink: 0;
}

.ca-palette-results {
    max-height: 360px;
    overflow-y: auto;
    padding: var(--ca-space-2);
}

.ca-palette-empty,
.ca-palette-no-results {
    text-align: center;
    padding: var(--ca-space-8) var(--ca-space-4);
    color: var(--ca-neutral-400);
}

.ca-palette-empty p,
.ca-palette-no-results p {
    font-size: var(--ca-text-sm);
    margin: var(--ca-space-2) 0 0;
}

.ca-palette-group-label {
    font-size: var(--ca-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ca-tracking-wider);
    color: var(--ca-neutral-500);
    padding: var(--ca-space-2) var(--ca-space-3);
}

.ca-palette-item {
    display: flex;
    align-items: center;
    gap: var(--ca-space-3);
    padding: var(--ca-space-2) var(--ca-space-3);
    border-radius: var(--ca-radius-md);
    text-decoration: none;
    color: var(--ca-neutral-800);
    cursor: pointer;
    transition: background var(--ca-duration-fast) var(--ca-ease-default);
}

.ca-palette-item:hover,
.ca-palette-item.active {
    background: var(--ca-primary-50);
    color: var(--ca-primary-700);
}

.ca-palette-item-icon {
    font-size: var(--ca-text-lg);
    color: var(--ca-neutral-400);
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

.ca-palette-item:hover .ca-palette-item-icon,
.ca-palette-item.active .ca-palette-item-icon {
    color: var(--ca-primary-500);
}

.ca-palette-item-content {
    flex: 1;
    min-width: 0;
}

.ca-palette-item-title {
    display: block;
    font-size: var(--ca-text-sm);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ca-palette-item-subtitle {
    display: block;
    font-size: var(--ca-text-xs);
    color: var(--ca-neutral-500);
}

.ca-palette-footer {
    display: flex;
    gap: var(--ca-space-4);
    padding: var(--ca-space-2) var(--ca-space-4);
    border-top: 1px solid var(--ca-neutral-100);
    background: var(--ca-neutral-25);
    font-size: var(--ca-text-xs);
    color: var(--ca-neutral-400);
}

.ca-palette-footer kbd {
    background: var(--ca-neutral-100);
    border: 1px solid var(--ca-neutral-200);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 11px;
    font-family: -apple-system, system-ui, var(--ca-font-family);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
    .ca-palette {
        animation: none;
    }
}