/*
 * CRUD Admin Screens Design System
 * Split-panel layout with mobile-first responsive design
 * Brand: Maroon (#8A2A2B) / Gold (#F2A900)
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    /* Primary Brand Colors */
    --crud-primary: #8A2A2B;
    --crud-primary-dark: #6F2223;
    --crud-primary-light: #A73D3E;
    --crud-primary-subtle: rgba(138, 42, 43, 0.08);
    --crud-primary-hover: rgba(138, 42, 43, 0.12);

    /* Secondary Brand Colors */
    --crud-secondary: #F2A900;
    --crud-secondary-dark: #D89000;
    --crud-secondary-light: #FFB81C;

    /* Status Colors */
    --crud-success: #10B981;
    --crud-success-light: #D1FAE5;
    --crud-danger: #EF4444;
    --crud-danger-light: #FEE2E2;
    --crud-warning: #F59E0B;
    --crud-warning-light: #FEF3C7;
    --crud-info: #3B82F6;
    --crud-info-light: #DBEAFE;

    /* Neutral Colors - Enhanced contrast for readability */
    --crud-bg-page: #F1F5F9;
    --crud-bg-card: #FFFFFF;
    --crud-bg-hover: #E2E8F0;
    --crud-border: #CBD5E1;
    --crud-border-dark: #94A3B8;
    --crud-text-primary: #1E293B;
    --crud-text-secondary: #475569;
    --crud-text-muted: #64748B;

    /* Shadows */
    --crud-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --crud-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --crud-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --crud-shadow-focus: 0 0 0 3px rgba(138, 42, 43, 0.2);

    /* Spacing */
    --crud-spacing-xs: 0.25rem;
    --crud-spacing-sm: 0.5rem;
    --crud-spacing-md: 1rem;
    --crud-spacing-lg: 1.5rem;
    --crud-spacing-xl: 2rem;

    /* Border Radius */
    --crud-radius-sm: 0.375rem;
    --crud-radius-md: 0.5rem;
    --crud-radius-lg: 0.75rem;
    --crud-radius-xl: 1rem;

    /* Transitions */
    --crud-transition-fast: 150ms ease;
    --crud-transition-normal: 200ms ease;
    --crud-transition-slow: 300ms ease;

    /* Layout */
    --crud-master-width: 40%;
    --crud-detail-width: 60%;
    --crud-panel-gap: 0;
}

/* ==========================================================================
   Base Layout - Split Panel
   ========================================================================== */

.crud-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--bottom-nav-height, 4rem));
    background: var(--crud-bg-page);
    overflow: hidden;
}

.crud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--crud-spacing-md) var(--crud-spacing-lg);
    background: var(--crud-bg-card);
    border-bottom: 1px solid var(--crud-border);
    flex-shrink: 0; /* Don't shrink */
}

.crud-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--crud-text-primary);
    letter-spacing: -0.025em;
    margin: 0;
}

.crud-header-actions {
    display: flex;
    gap: var(--crud-spacing-sm);
}

.crud-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0; /* Important for flex children to scroll */
}

/* Master Panel (List) */
.crud-master {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: var(--crud-bg-card);
    position: relative;
    z-index: 1;
    min-height: 0; /* Important for flex children to scroll */
}

.crud-master-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--crud-spacing-md);
}

/* Detail Panel (Form) */
.crud-detail {
    display: none;
    flex-direction: column;
    background: var(--crud-bg-card);
    border-left: 1px solid var(--crud-border);
    min-height: 0; /* Important for flex children to scroll */
}

.crud-detail.active {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-nav-height, 4rem) + env(safe-area-inset-bottom, 0px)); /* Account for mobile bottom nav + safe area */
    z-index: 500;
    animation: slideInRight var(--crud-transition-slow) ease;
}

.crud-detail-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--crud-spacing-md) var(--crud-spacing-sm);
    border-bottom: 1px solid var(--crud-border);
    background: var(--crud-bg-card);
    flex-shrink: 0; /* Don't shrink */
    position: relative;
}

.crud-detail-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--crud-text-primary);
    margin: 0;
    text-align: center;
}

.crud-back-btn {
    position: absolute;
    left: var(--crud-spacing-sm);
}

.crud-detail-header-actions {
    position: absolute;
    right: var(--crud-spacing-sm);
}

.crud-detail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--crud-spacing-lg);
    background: var(--crud-bg-page);
}

.crud-detail-footer {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-sm);
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    border-top: 1px solid var(--crud-border);
    background: var(--crud-bg-card);
    flex-shrink: 0; /* Don't shrink */
}

/* Footer button groups - left side for danger actions, right side for primary actions */
.crud-footer-left {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-sm);
    flex-shrink: 0;
}

.crud-footer-right {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-sm);
    margin-left: auto;
    flex: 1;
    justify-content: flex-end;
}

/* Delete button in footer - supports icon-only or icon+text */
.crud-footer-delete {
    min-width: 40px;
    height: 40px;
    padding: 0 var(--crud-spacing-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--crud-spacing-xs);
    border: 1px solid var(--crud-danger);
    background: transparent;
    color: var(--crud-danger);
    border-radius: var(--crud-radius-md);
    flex-shrink: 0;
    cursor: pointer;
    transition: all var(--crud-transition-fast);
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
}

.crud-footer-delete:hover {
    background: var(--crud-danger);
    color: white;
}

.crud-footer-delete i {
    flex-shrink: 0;
}

/* Compact buttons for secondary actions (PDF, View, etc.) */
.crud-footer-compact {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Primary action button - takes remaining space on mobile, fixed on desktop */
.crud-footer-primary {
    flex: 1;
    min-width: 0;
    justify-content: center;
}

/* Mobile responsive footer */
@media (max-width: 575px) {
    .crud-detail-footer {
        flex-wrap: wrap;
        gap: var(--crud-spacing-xs);
        padding: var(--crud-spacing-sm);
    }

    .crud-footer-left {
        flex-shrink: 0;
    }

    .crud-footer-right {
        flex: 1;
        min-width: 0;
        gap: var(--crud-spacing-xs);
    }

    /* On small mobile, compact buttons become icon-only */
    .crud-footer-compact .btn-text {
        display: none;
    }

    .crud-footer-compact {
        padding: 0.5rem;
        min-width: 36px;
        justify-content: center;
    }

    /* Primary button takes remaining space */
    .crud-footer-primary {
        flex: 1;
        min-width: 80px;
    }
}

/* Larger mobile and up */
@media (min-width: 576px) {
    .crud-detail-footer {
        padding: var(--crud-spacing-md) var(--crud-spacing-lg);
        gap: var(--crud-spacing-md);
    }

    .crud-footer-compact {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .crud-footer-compact .btn-text {
        display: inline;
    }

    .crud-footer-primary {
        flex: none;
        min-width: auto;
    }
}

/* Danger outline button for delete with text */
.crud-btn-danger-outline {
    background: var(--crud-bg-card);
    color: var(--crud-danger);
    border: 1px solid var(--crud-danger);
}

.crud-btn-danger-outline:hover:not(:disabled) {
    background: var(--crud-danger);
    color: white;
}

/* Mobile: tighter horizontal padding */
@media (max-width: 991px) {
    .crud-detail-scroll {
        padding: var(--crud-spacing-sm);
    }

    .crud-master-scroll {
        padding: var(--crud-spacing-sm);
    }

    .crud-header {
        padding: var(--crud-spacing-sm) var(--crud-spacing-sm);
    }
}

/* Desktop Layout */
@media (min-width: 992px) {
    .crud-layout {
        flex-direction: row;
    }

    .crud-master {
        width: var(--crud-master-width);
        flex: none;
        border-right: 1px solid var(--crud-border);
    }

    .crud-detail {
        display: flex;
        width: var(--crud-detail-width);
        flex: none;
        position: relative;
        animation: none;
        border-left: none;
        overflow: hidden;
    }

    .crud-detail.active {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: auto;
        animation: none;
    }

    .crud-back-btn {
        display: none;
    }
}

/* ==========================================================================
   Search Bar
   ========================================================================== */

.crud-search {
    padding: var(--crud-spacing-md);
    border-bottom: 1px solid var(--crud-border);
    background: var(--crud-bg-card);
    flex-shrink: 0; /* Don't shrink - stay pinned at top */
}

.crud-search-input {
    position: relative;
    display: flex;
    align-items: center;
}

.crud-search-input .search-icon {
    position: absolute;
    left: var(--crud-spacing-md);
    color: var(--crud-text-muted);
    pointer-events: none;
    width: 20px;
    height: 20px;
}

.crud-search-input input {
    width: 100%;
    height: 48px;
    padding: 0 var(--crud-spacing-xl) 0 calc(var(--crud-spacing-md) + 28px);
    font-size: 1rem;
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-lg);
    background: var(--crud-bg-card);
    color: var(--crud-text-primary);
    transition: border-color var(--crud-transition-fast), box-shadow var(--crud-transition-fast);
}

.crud-search-input input:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
    background: var(--crud-bg-card);
}

.crud-search-input input::placeholder {
    color: var(--crud-text-muted);
}

.crud-search-clear {
    position: absolute;
    right: var(--crud-spacing-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--crud-text-muted);
    cursor: pointer;
    border-radius: var(--crud-radius-sm);
    opacity: 0;
    transition: opacity var(--crud-transition-fast), background var(--crud-transition-fast);
}

.crud-search-input input:not(:placeholder-shown) + .crud-search-clear {
    opacity: 1;
}

.crud-search-clear:hover {
    background: var(--crud-bg-hover);
    color: var(--crud-text-primary);
}

/* Filters */
.crud-filters {
    display: flex;
    gap: var(--crud-spacing-sm);
    margin-top: var(--crud-spacing-sm);
    flex-wrap: wrap;
}

.crud-filter {
    height: 36px;
    padding: 0 var(--crud-spacing-md);
    font-size: 0.875rem;
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    background: var(--crud-bg-card);
    color: var(--crud-text-secondary);
    cursor: pointer;
    transition: border-color var(--crud-transition-fast), background var(--crud-transition-fast);
}

.crud-filter:hover {
    border-color: var(--crud-border-dark);
    background: var(--crud-bg-hover);
}

.crud-filter:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.crud-filter.active {
    border-color: var(--crud-primary);
    background: var(--crud-primary-subtle);
    color: var(--crud-primary);
}

/* Filter toggle (mobile collapsible) */
.ts-filter-toggle {
    display: none;
}

@media (max-width: 767px) {
    .ts-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--crud-spacing-sm) var(--crud-spacing-md);
        border: 1px solid var(--crud-border);
        border-radius: var(--crud-radius-md);
        background: var(--crud-bg-card);
        font-size: 0.875rem;
        color: var(--crud-text-secondary);
        cursor: pointer;
        margin-top: var(--crud-spacing-sm);
    }

    .ts-filter-toggle span {
        display: flex;
        align-items: center;
        gap: var(--crud-spacing-sm);
    }

    .ts-filter-collapsible {
        display: none;
        flex-direction: column;
        gap: var(--crud-spacing-sm);
        padding-top: var(--crud-spacing-sm);
    }

    .ts-filter-collapsible.expanded {
        display: flex;
    }
}

@media (min-width: 768px) {
    .ts-filter-collapsible {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--crud-spacing-sm);
        margin-top: var(--crud-spacing-sm);
    }
}

/* ==========================================================================
   List Items
   ========================================================================== */

.crud-list {
    display: flex;
    flex-direction: column;
    gap: var(--crud-spacing-sm);
}

.crud-item {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-md);
    padding: var(--crud-spacing-md);
    background: var(--crud-bg-card);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-lg);
    cursor: pointer;
    transition: border-color var(--crud-transition-fast), box-shadow var(--crud-transition-fast), background var(--crud-transition-fast);
}

.crud-item:hover {
    border-color: var(--crud-border-dark);
    box-shadow: var(--crud-shadow-sm);
}

.crud-item.selected {
    border-color: var(--crud-primary);
    background: var(--crud-primary-subtle);
}

.crud-item-main {
    flex: 1;
    min-width: 0;
}

.crud-item-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--crud-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crud-item-subtitle {
    display: block;
    font-size: 0.875rem;
    color: var(--crud-text-secondary);
    margin-top: 2px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.crud-item-description {
    display: block;
    font-size: 0.8125rem;
    color: var(--crud-text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crud-item-meta {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-sm);
    flex-shrink: 0;
}

.crud-item-actions {
    display: flex;
    gap: var(--crud-spacing-xs);
    flex-shrink: 0;
}

/* Mobile: Two-row card layout with actions always visible */
@media (max-width: 991px) {
    .crud-item {
        flex-wrap: wrap;
        padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    }

    .crud-item-main {
        flex: 1;
        min-width: 0;
        order: 1;
    }

    .crud-item-meta {
        order: 2;
        flex-shrink: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 50%;
    }

    .crud-item-actions {
        order: 3;
        width: 100%;
        margin-top: 4px;
        padding-top: 6px;
        border-top: 1px solid var(--crud-border);
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 2px;
    }

    .crud-item-actions .crud-btn-icon.small,
    .ts-card-actions .crud-btn-icon.small {
        width: auto;
        height: auto;
        min-width: 44px;
        padding: 2px 4px 1px;
        flex-direction: column;
        gap: 1px;
    }

    .crud-item-actions .crud-btn-icon.small::after,
    .ts-card-actions .crud-btn-icon.small::after {
        content: attr(data-label);
        font-size: 0.6rem;
        font-weight: 500;
        color: var(--crud-text-muted);
        white-space: nowrap;
    }
}

/* Desktop: hide inline actions, show on hover */
@media (min-width: 992px) {
    .crud-item-actions {
        opacity: 0;
        transition: opacity var(--crud-transition-fast);
    }

    .crud-item:hover .crud-item-actions {
        opacity: 1;
    }
}

/* ==========================================================================
   Status Badges
   ========================================================================== */

.crud-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--crud-radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.crud-badge-success {
    background: var(--crud-success-light);
    color: #065F46;
}

.crud-badge-danger {
    background: var(--crud-danger-light);
    color: #991B1B;
}

.crud-badge-warning {
    background: var(--crud-warning-light);
    color: #92400E;
}

.crud-badge-info {
    background: var(--crud-info-light);
    color: #1E40AF;
}

.crud-badge-neutral {
    background: var(--crud-bg-hover);
    color: var(--crud-text-secondary);
}

.crud-badge-primary {
    background: var(--crud-primary-subtle);
    color: var(--crud-primary);
}

.crud-badge-secondary {
    background: var(--crud-bg-hover);
    color: var(--crud-text-secondary);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.crud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--crud-spacing-sm);
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--crud-radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--crud-transition-fast);
    white-space: nowrap;
}

.crud-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Primary Button */
.crud-btn-primary {
    background: var(--crud-primary);
    color: white;
    box-shadow: var(--crud-shadow-sm);
}

.crud-btn-primary:hover:not(:disabled) {
    background: var(--crud-primary-dark);
    box-shadow: var(--crud-shadow-md);
}

.crud-btn-primary:active:not(:disabled) {
    transform: translateY(1px);
}

/* Secondary Button */
.crud-btn-secondary {
    background: var(--crud-secondary);
    color: var(--crud-text-primary);
    box-shadow: var(--crud-shadow-sm);
}

.crud-btn-secondary:hover:not(:disabled) {
    background: var(--crud-secondary-dark);
}

/* Outline Button */
.crud-btn-outline {
    background: var(--crud-bg-card);
    color: var(--crud-text-primary);
    border: 1px solid var(--crud-border);
}

.crud-btn-outline:hover:not(:disabled) {
    background: var(--crud-bg-hover);
    border-color: var(--crud-border-dark);
}

/* Ghost Button */
.crud-btn-ghost {
    background: transparent;
    color: var(--crud-text-secondary);
    padding: 0.5rem;
}

.crud-btn-ghost:hover:not(:disabled) {
    background: var(--crud-bg-hover);
    color: var(--crud-text-primary);
}

/* Danger Button */
.crud-btn-danger {
    background: var(--crud-danger);
    color: white;
}

.crud-btn-danger:hover:not(:disabled) {
    background: #DC2626;
}

/* Loading State for CRUD Buttons */
.crud-btn.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.crud-btn.btn-loading > * {
    visibility: hidden;
}

.crud-btn.btn-loading::after {
    content: '';
    position: absolute;
    left: calc(50% - 0.5rem);
    top: calc(50% - 0.5rem);
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.crud-btn-danger.btn-loading::after,
.crud-btn-primary.btn-loading::after {
    border-color: #fff;
    border-right-color: transparent;
}

.crud-btn-outline.btn-loading::after,
.crud-btn-danger-outline.btn-loading::after,
.crud-btn-secondary.btn-loading::after {
    border-color: var(--crud-text-primary);
    border-right-color: transparent;
}

.crud-btn-danger-outline.btn-loading::after {
    border-color: #EF4444;
    border-right-color: transparent;
}

/* Generic .btn loading state (Bootstrap buttons outside CRUD) */
.btn.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn.btn-loading > * {
    visibility: hidden;
}

.btn.btn-loading::after {
    content: '';
    position: absolute;
    left: calc(50% - 0.5rem);
    top: calc(50% - 0.5rem);
    width: 1rem;
    height: 1rem;
    border: 2px solid #fff;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
}

.btn-outline-secondary.btn-loading::after {
    border-color: var(--crud-text-primary, #333);
    border-right-color: transparent;
}

/* Icon Button */
.crud-btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: var(--crud-radius-md);
}

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

/* Link Button */
.crud-btn-link {
    background: transparent;
    color: var(--crud-primary);
    padding: 0.5rem;
    text-decoration: none;
}

.crud-btn-link:hover:not(:disabled) {
    text-decoration: underline;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.crud-form {
    display: flex;
    flex-direction: column;
    gap: var(--crud-spacing-lg);
}

.crud-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--crud-spacing-xs);
}

.crud-form-row {
    display: grid;
    gap: var(--crud-spacing-md);
    grid-template-columns: 1fr;
}

@media (min-width: 576px) {
    .crud-form-row.cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .crud-form-row.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .crud-form-row.cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

.crud-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--crud-text-primary);
}

.crud-label-hint {
    font-weight: 400;
    color: var(--crud-text-muted);
    margin-left: var(--crud-spacing-xs);
}

.crud-input {
    height: 44px;
    padding: 0 var(--crud-spacing-md);
    font-size: 1rem;
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    background: var(--crud-bg-card);
    color: var(--crud-text-primary);
    transition: border-color var(--crud-transition-fast), box-shadow var(--crud-transition-fast);
}

.crud-input:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.crud-input::placeholder {
    color: var(--crud-text-muted);
}

.crud-input.is-invalid {
    border-color: var(--crud-danger);
}

.crud-input.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}

.crud-select {
    height: 44px;
    padding: 0 var(--crud-spacing-xl) 0 var(--crud-spacing-md);
    font-size: 1rem;
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    background: var(--crud-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--crud-text-primary);
    cursor: pointer;
    appearance: none;
    transition: border-color var(--crud-transition-fast), box-shadow var(--crud-transition-fast);
    width: 100%;
    min-width: 0;
}

/* Placeholder style for selects - show grey text when placeholder is selected */
.crud-select.placeholder-selected {
    color: var(--crud-text-muted);
}

.crud-select option {
    color: var(--crud-text-primary);
}

.crud-select option[value=""] {
    color: var(--crud-text-muted);
}

.crud-select:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.crud-select[multiple] {
    height: auto;
    min-height: 100px;
    padding: var(--crud-spacing-sm);
    background-image: none;
}

.crud-textarea {
    min-height: 100px;
    padding: var(--crud-spacing-md);
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    background: var(--crud-bg-card);
    color: var(--crud-text-primary);
    resize: vertical;
    transition: border-color var(--crud-transition-fast), box-shadow var(--crud-transition-fast);
}

.crud-textarea:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.crud-error {
    font-size: 0.8125rem;
    color: var(--crud-danger);
    margin-top: var(--crud-spacing-xs);
}

.crud-hint {
    font-size: 0.8125rem;
    color: var(--crud-text-muted);
    margin-top: var(--crud-spacing-xs);
}

/* Input Group (input with attached button) */
.crud-input-group {
    display: flex;
    align-items: stretch;
    gap: var(--crud-spacing-sm);
}

.crud-input-group .crud-input {
    flex: 1;
    min-width: 0;
}

.crud-input-group .crud-btn {
    flex-shrink: 0;
}

/* Autocomplete Wrapper */
.crud-autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.crud-autocomplete-wrapper .crud-input {
    width: 100%;
    padding-right: 2.5rem; /* Space for clear button */
}

.crud-autocomplete-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--crud-text-muted);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    z-index: 2;
}

.crud-autocomplete-clear:hover {
    color: var(--crud-danger);
}

.crud-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--crud-bg-card);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    box-shadow: var(--crud-shadow-lg);
    max-height: 280px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    margin-top: 4px;
}

.crud-autocomplete-dropdown.active {
    display: block;
}

.crud-autocomplete-item {
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    cursor: pointer;
    border-bottom: 1px solid var(--crud-border);
    transition: background var(--crud-transition-fast);
}

.crud-autocomplete-item:last-child {
    border-bottom: none;
}

.crud-autocomplete-item:hover,
.crud-autocomplete-item.selected {
    background: var(--crud-primary-subtle);
}

.crud-autocomplete-title {
    font-weight: 600;
    color: var(--crud-text-primary);
    font-size: 0.875rem;
}

.crud-autocomplete-subtitle {
    color: var(--crud-text-secondary);
    font-size: 0.8125rem;
}

.crud-autocomplete-meta {
    color: var(--crud-text-muted);
    font-size: 0.75rem;
    margin-top: 2px;
}

.crud-autocomplete-empty {
    padding: var(--crud-spacing-md);
    color: var(--crud-text-muted);
    text-align: center;
    font-style: italic;
}

/* Textarea with centered placeholder */
textarea.crud-input {
    height: auto;
    min-height: 80px;
    padding: var(--crud-spacing-md);
    line-height: 1.5;
    resize: vertical;
}

textarea.crud-input::placeholder {
    line-height: 2.5;
}

/* ==========================================================================
   Empty State
   ========================================================================== */

.crud-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--crud-spacing-xl);
    text-align: center;
    min-height: 300px;
}

.crud-empty-icon {
    width: 64px;
    height: 64px;
    color: var(--crud-text-muted);
    margin-bottom: var(--crud-spacing-md);
    opacity: 0.5;
}

.crud-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--crud-text-primary);
    margin-bottom: var(--crud-spacing-xs);
}

.crud-empty-text {
    font-size: 0.875rem;
    color: var(--crud-text-secondary);
    max-width: 300px;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

.crud-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--crud-spacing-lg);
    gap: var(--crud-spacing-sm);
    min-height: 60px; /* Prevent layout shift when toggling visibility */
}

.crud-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--crud-border);
    border-top-color: var(--crud-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.crud-loading-text {
    font-size: 0.875rem;
    color: var(--crud-text-muted);
}

/* Skeleton Loading */
.crud-skeleton {
    background: linear-gradient(90deg, var(--crud-bg-hover) 25%, var(--crud-bg-page) 50%, var(--crud-bg-hover) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--crud-radius-sm);
}

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

.crud-skeleton-item {
    height: 72px;
    border-radius: var(--crud-radius-lg);
    margin-bottom: var(--crud-spacing-sm);
}

/* ==========================================================================
   Modal Styles
   ========================================================================== */

.crud-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--crud-transition-normal);
}

.crud-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.crud-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: calc(100% - 2rem);
    max-width: 500px;
    max-height: calc(100vh - 4rem);
    background: var(--crud-bg-card);
    border-radius: var(--crud-radius-xl);
    box-shadow: var(--crud-shadow-lg);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--crud-transition-normal), transform var(--crud-transition-normal);
    display: flex;
    flex-direction: column;
}

.crud-modal.active {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.crud-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--crud-spacing-lg);
    border-bottom: 1px solid var(--crud-border);
}

.crud-modal-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--crud-text-primary);
    margin: 0;
}

.crud-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--crud-text-muted);
    cursor: pointer;
    border-radius: var(--crud-radius-sm);
    font-size: 1.5rem;
    line-height: 1;
}

.crud-modal-close:hover {
    background: var(--crud-bg-hover);
    color: var(--crud-text-primary);
}

.crud-modal-body {
    padding: var(--crud-spacing-lg);
    overflow-y: auto;
    flex: 1;
}

.crud-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--crud-spacing-sm);
    padding: var(--crud-spacing-md) var(--crud-spacing-lg);
    border-top: 1px solid var(--crud-border);
}

/* ==========================================================================
   CSV Import Modal
   ========================================================================== */

.crud-upload-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--crud-spacing-xl);
    border: 2px dashed var(--crud-border);
    border-radius: var(--crud-radius-lg);
    background: var(--crud-bg-page);
    cursor: pointer;
    transition: border-color var(--crud-transition-fast), background var(--crud-transition-fast);
}

.crud-upload-zone:hover {
    border-color: var(--crud-primary);
    background: var(--crud-primary-subtle);
}

.crud-upload-zone.dragover {
    border-color: var(--crud-primary);
    background: var(--crud-primary-subtle);
}

.crud-upload-zone-icon {
    width: 48px;
    height: 48px;
    color: var(--crud-text-muted);
    margin-bottom: var(--crud-spacing-md);
}

.crud-upload-zone-text {
    font-size: 0.875rem;
    color: var(--crud-text-secondary);
    text-align: center;
}

.crud-upload-zone-text strong {
    color: var(--crud-primary);
}

.crud-import-results {
    margin-top: var(--crud-spacing-md);
    padding: var(--crud-spacing-md);
    background: var(--crud-bg-page);
    border-radius: var(--crud-radius-md);
}

.crud-import-stat {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-sm);
    padding: var(--crud-spacing-xs) 0;
    font-size: 0.875rem;
}

.crud-import-stat.success {
    color: #065F46;
}

.crud-import-stat.warning {
    color: #92400E;
}

.crud-import-stat.error {
    color: #991B1B;
}

/* ==========================================================================
   Tree View (Cost Codes)
   ========================================================================== */

.crud-tree {
    display: flex;
    flex-direction: column;
}

.crud-tree-item {
    border-bottom: 1px solid var(--crud-border);
}

.crud-tree-parent {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-md);
    padding: var(--crud-spacing-md);
    background: var(--crud-bg-page);
    cursor: pointer;
    transition: background var(--crud-transition-fast);
}

.crud-tree-parent:hover {
    background: var(--crud-bg-hover);
}

.crud-tree-parent.selected {
    background: var(--crud-primary-subtle);
}

.crud-tree-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--crud-text-muted);
    transition: transform var(--crud-transition-fast);
}

.crud-tree-toggle.expanded {
    transform: rotate(90deg);
}

.crud-tree-children {
    display: none;
    padding-left: var(--crud-spacing-xl);
}

.crud-tree-children.expanded {
    display: block;
}

.crud-tree-child {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-md);
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    border-left: 2px solid var(--crud-border);
    margin-left: var(--crud-spacing-md);
    cursor: pointer;
    transition: background var(--crud-transition-fast), border-color var(--crud-transition-fast);
}

.crud-tree-child:hover {
    background: var(--crud-bg-hover);
}

.crud-tree-child.selected {
    background: var(--crud-primary-subtle);
    border-color: var(--crud-primary);
}

.crud-tree-connector {
    color: var(--crud-text-muted);
    font-size: 0.75rem;
}

/* ==========================================================================
   FAB (Floating Action Button) - Mobile
   ========================================================================== */

.crud-fab {
    position: fixed;
    bottom: calc(var(--bottom-nav-height, 4rem) + var(--crud-spacing-md));
    right: var(--crud-spacing-md);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--crud-primary);
    color: white;
    border: none;
    box-shadow: var(--crud-shadow-lg);
    cursor: pointer;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--crud-transition-fast), box-shadow var(--crud-transition-fast);
}

.crud-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(138, 42, 43, 0.3);
}

.crud-fab:active {
    transform: scale(0.95);
}

@media (min-width: 992px) {
    .crud-fab {
        display: none;
    }
}

/* ==========================================================================
   Animations
   ========================================================================== */

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

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.crud-fade-in {
    animation: fadeIn var(--crud-transition-normal);
}

.crud-slide-in {
    animation: slideInRight var(--crud-transition-slow);
}

.crud-slide-out {
    animation: slideOutRight var(--crud-transition-slow);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.crud-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.crud-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.crud-text-secondary {
    color: var(--crud-text-secondary);
}

.crud-text-success {
    color: var(--crud-success);
}

.crud-text-danger {
    color: var(--crud-danger);
}

.crud-mt-0 { margin-top: 0; }
.crud-mt-sm { margin-top: var(--crud-spacing-sm); }
.crud-mt-md { margin-top: var(--crud-spacing-md); }
.crud-mt-lg { margin-top: var(--crud-spacing-lg); }

.crud-mb-0 { margin-bottom: 0; }
.crud-mb-sm { margin-bottom: var(--crud-spacing-sm); }
.crud-mb-md { margin-bottom: var(--crud-spacing-md); }
.crud-mb-lg { margin-bottom: var(--crud-spacing-lg); }

.crud-gap-sm { gap: var(--crud-spacing-sm); }
.crud-gap-md { gap: var(--crud-spacing-md); }
.crud-gap-lg { gap: var(--crud-spacing-lg); }

/* ==========================================================================
   Date Input Placeholder
   ========================================================================== */

.date-input-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

.date-input-wrapper::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--crud-text-muted, #94A3B8);
    font-size: 0.875rem;
    pointer-events: none;
    z-index: 1;
}

.date-input-wrapper.has-value::before {
    display: none;
}

.date-input-wrapper input[type="date"] {
    width: 100%;
}

/* Hide the native placeholder text when showing our custom placeholder */
.date-input-wrapper:not(.has-value) input[type="date"]::-webkit-datetime-edit {
    color: transparent;
}

.date-input-wrapper:not(.has-value) input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    color: transparent;
}

/* Show native controls when focused or has value */
.date-input-wrapper.has-value input[type="date"]::-webkit-datetime-edit,
.date-input-wrapper input[type="date"]:focus::-webkit-datetime-edit {
    color: var(--crud-text-primary, #1E293B);
}

.date-input-wrapper.has-value input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.date-input-wrapper input[type="date"]:focus::-webkit-datetime-edit-fields-wrapper {
    color: var(--crud-text-primary, #1E293B);
}

/* Hide placeholder when input is focused */
.date-input-wrapper:focus-within::before {
    display: none;
}

/* ==========================================================================
   Multi-Select Picker (Mobile-friendly)
   ========================================================================== */

.multiselect-picker {
    position: relative;
    width: 100%;
}

.multiselect-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    background: var(--crud-bg-card);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    cursor: pointer;
    transition: border-color var(--crud-transition-fast), box-shadow var(--crud-transition-fast);
    gap: var(--crud-spacing-sm);
}

.multiselect-picker-trigger:hover {
    border-color: var(--crud-border-dark);
}

.multiselect-picker-trigger:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.multiselect-picker.is-open .multiselect-picker-trigger {
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.multiselect-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.multiselect-picker-placeholder {
    color: var(--crud-text-muted);
    font-size: 1rem;
}

.multiselect-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--crud-primary-subtle);
    color: var(--crud-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--crud-radius-sm);
    max-width: 140px;
    animation: chipFadeIn 0.15s ease;
}

@keyframes chipFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.multiselect-picker-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.multiselect-picker-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--crud-primary);
    cursor: pointer;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background var(--crud-transition-fast), color var(--crud-transition-fast);
}

.multiselect-picker-chip-remove:hover {
    background: var(--crud-primary);
    color: white;
}

.multiselect-picker-chip-more {
    background: var(--crud-bg-hover);
    color: var(--crud-text-secondary);
    padding: 4px 10px;
    cursor: default;
}

.multiselect-picker-actions {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-sm);
    flex-shrink: 0;
}

.multiselect-picker-count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--crud-text-secondary);
    padding: 2px 8px;
    background: var(--crud-bg-hover);
    border-radius: var(--crud-radius-sm);
    display: none;
}

.multiselect-picker-count.visible {
    display: block;
}

.multiselect-picker-chevron {
    color: var(--crud-text-muted);
    flex-shrink: 0;
    transition: transform var(--crud-transition-fast);
}

.multiselect-picker.is-open .multiselect-picker-chevron {
    transform: rotate(180deg);
}

/* Dropdown Panel */
.multiselect-picker-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--crud-bg-card);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-lg);
    box-shadow: var(--crud-shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--crud-transition-fast), transform var(--crud-transition-fast), visibility var(--crud-transition-fast);
    display: flex;
    flex-direction: column;
    max-height: 340px;
}

.multiselect-picker.is-open .multiselect-picker-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Search */
.multiselect-picker-search {
    position: relative;
    padding: var(--crud-spacing-md);
    border-bottom: 1px solid var(--crud-border);
    flex-shrink: 0;
}

.multiselect-picker-search-icon {
    position: absolute;
    left: calc(var(--crud-spacing-md) + 10px);
    top: 50%;
    transform: translateY(-50%);
    color: var(--crud-text-muted);
    pointer-events: none;
}

.multiselect-picker-search-input {
    width: 100%;
    height: 40px;
    padding: 0 36px;
    font-size: 0.9375rem;
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    background: var(--crud-bg-page);
    color: var(--crud-text-primary);
    transition: border-color var(--crud-transition-fast), box-shadow var(--crud-transition-fast);
}

.multiselect-picker-search-input:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.multiselect-picker-search-input::placeholder {
    color: var(--crud-text-muted);
}

.multiselect-picker-search-clear {
    position: absolute;
    right: calc(var(--crud-spacing-md) + 8px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--crud-text-muted);
    cursor: pointer;
    border-radius: var(--crud-radius-sm);
    opacity: 0;
    transition: opacity var(--crud-transition-fast), background var(--crud-transition-fast);
}

.multiselect-picker-search-input:not(:placeholder-shown) ~ .multiselect-picker-search-clear {
    opacity: 1;
}

.multiselect-picker-search-clear:hover {
    background: var(--crud-bg-hover);
    color: var(--crud-text-primary);
}

/* Toolbar */
.multiselect-picker-toolbar {
    display: flex;
    gap: var(--crud-spacing-sm);
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    border-bottom: 1px solid var(--crud-border);
    background: var(--crud-bg-page);
    flex-shrink: 0;
}

.multiselect-picker-btn-select-all,
.multiselect-picker-btn-clear {
    flex: 1;
    height: 32px;
    padding: 0 var(--crud-spacing-md);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--crud-bg-card);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-sm);
    color: var(--crud-text-secondary);
    cursor: pointer;
    transition: all var(--crud-transition-fast);
}

.multiselect-picker-btn-select-all:hover,
.multiselect-picker-btn-clear:hover {
    background: var(--crud-bg-hover);
    border-color: var(--crud-border-dark);
    color: var(--crud-text-primary);
}

/* Options List */
.multiselect-picker-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.multiselect-picker-option {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-md);
    padding: var(--crud-spacing-md);
    cursor: pointer;
    border-bottom: 1px solid var(--crud-border);
    transition: background var(--crud-transition-fast);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.multiselect-picker-option:last-child {
    border-bottom: none;
}

.multiselect-picker-option:hover {
    background: var(--crud-bg-hover);
}

.multiselect-picker-option:active {
    background: var(--crud-primary-subtle);
}

.multiselect-picker-option.hidden {
    display: none;
}

.multiselect-picker-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.multiselect-picker-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--crud-bg-card);
    border: 2px solid var(--crud-border-dark);
    border-radius: var(--crud-radius-sm);
    flex-shrink: 0;
    transition: all var(--crud-transition-fast);
}

.multiselect-picker-checkbox svg {
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--crud-transition-fast);
    color: white;
}

.multiselect-picker-option input[type="checkbox"]:checked ~ .multiselect-picker-checkbox {
    background: var(--crud-primary);
    border-color: var(--crud-primary);
}

.multiselect-picker-option input[type="checkbox"]:checked ~ .multiselect-picker-checkbox svg {
    opacity: 1;
    transform: scale(1);
}

.multiselect-picker-option input[type="checkbox"]:focus ~ .multiselect-picker-checkbox {
    box-shadow: var(--crud-shadow-focus);
}

.multiselect-picker-option-text {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--crud-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Empty State */
.multiselect-picker-empty {
    display: none;
    padding: var(--crud-spacing-xl);
    text-align: center;
    color: var(--crud-text-muted);
    font-size: 0.875rem;
}

.multiselect-picker-empty.visible {
    display: block;
}

/* Footer */
.multiselect-picker-footer {
    padding: var(--crud-spacing-md);
    border-top: 1px solid var(--crud-border);
    background: var(--crud-bg-page);
    flex-shrink: 0;
}

.multiselect-picker-done {
    width: 100%;
}

/* Mobile: Full-screen dropdown */
@media (max-width: 767px) {
    .multiselect-picker.is-open .multiselect-picker-dropdown {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--bottom-nav-height, 4rem); /* Account for mobile bottom nav */
        max-height: none;
        border-radius: 0;
        border: none;
        z-index: 1000;
        animation: slideUpModal 0.25s ease;
    }

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

    .multiselect-picker-list {
        max-height: none;
    }

    .multiselect-picker-option {
        padding: var(--crud-spacing-md) var(--crud-spacing-lg);
    }

    .multiselect-picker-checkbox {
        width: 26px;
        height: 26px;
    }

    .multiselect-picker-option-text {
        font-size: 1rem;
    }

    .multiselect-picker-footer {
        padding: var(--crud-spacing-md) var(--crud-spacing-lg);
        padding-bottom: calc(var(--crud-spacing-lg) + env(safe-area-inset-bottom, 0px));
    }

    .multiselect-picker-done {
        height: 48px;
        font-size: 1rem;
    }
}

/* Desktop: Max 3 chips visible */
@media (min-width: 768px) {
    .multiselect-picker-dropdown {
        max-height: 380px;
    }

    .multiselect-picker-chip:nth-child(n+4):not(.multiselect-picker-chip-more) {
        display: none;
    }
}


/* ==========================================================================
   Crew Builder - 3 Column Layout (15% / 15% / 70%)
   ========================================================================== */

/* Main Container */
.crew-builder {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--bottom-nav-height, 4rem));
    background: var(--crud-bg-page);
    overflow: hidden;
}

/* Header */
.crew-builder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--crud-spacing-md) var(--crud-spacing-lg);
    background: var(--crud-bg-card);
    border-bottom: 1px solid var(--crud-border);
    flex-shrink: 0;
}

.crew-builder-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--crud-text-primary);
    margin: 0;
}

.crew-builder-header-actions {
    display: flex;
    gap: var(--crud-spacing-sm);
    align-items: center;
}

/* 3-Column Layout */
.crew-builder-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Shared Column Styles */
.crew-builder-employees,
.crew-builder-crews {
    width: 15%;
    min-width: 160px;
    max-width: 220px;
    display: flex;
    flex-direction: column;
    background: var(--crud-bg-card);
    border-right: 1px solid var(--crud-border);
}

.crew-builder-column-header {
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    background: var(--crud-bg-page);
    border-bottom: 1px solid var(--crud-border);
}

.crew-builder-column-header h4 {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--crud-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crew-builder-column-filters {
    padding: var(--crud-spacing-sm);
    border-bottom: 1px solid var(--crud-border);
    display: flex;
    flex-direction: column;
    gap: var(--crud-spacing-xs);
}

/* Search input with clear button */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-wrapper .crud-input {
    width: 100%;
    padding-right: 2rem;
}

.search-clear-btn {
    position: absolute;
    right: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    background: var(--crud-bg-muted);
    border-radius: 50%;
    color: var(--crud-text-muted);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s, background-color 0.15s;
    line-height: 1;
}

.search-input-wrapper .crud-input:not(:placeholder-shown) ~ .search-clear-btn,
.search-clear-btn.visible {
    opacity: 1;
    visibility: visible;
}

.search-clear-btn:hover {
    background: var(--crud-border);
    color: var(--crud-text);
}

.search-clear-btn:focus {
    outline: none;
    box-shadow: none;
}

.search-clear-btn svg,
.search-clear-btn .icon-small {
    width: 0.625rem;
    height: 0.625rem;
    display: block;
    flex-shrink: 0;
}

.crew-builder-column-actions {
    padding: var(--crud-spacing-sm);
    border-bottom: 1px solid var(--crud-border);
}

.crew-builder-column-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--crud-spacing-xs);
}

/* Employee List Items */
.crew-builder-employee-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--crud-spacing-sm);
    row-gap: 1px;
    padding: var(--crud-spacing-xs) var(--crud-spacing-sm);
    cursor: pointer;
    border-radius: var(--crud-radius-sm);
    transition: all var(--crud-transition-fast);
    font-size: 0.8125rem;
}

.crew-builder-employee-item:hover {
    background: var(--crud-primary-subtle);
}

.crew-builder-employee-item.in-crew {
    opacity: 0.4;
    pointer-events: none;
}

.crew-builder-employee-item .emp-name {
    /* Reserve at least 60% so the name doesn't ellipsis itself out of
       existence — forces a long craft to wrap to the next line instead. */
    flex: 1 1 60%;
    min-width: 60%;
    font-weight: 500;
    color: var(--crud-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crew-builder-employee-item .emp-craft {
    /* Natural width when short (stays inline, e.g. "CJ"); wraps to its own
       line when too long to fit alongside the name. */
    flex: 0 1 auto;
    max-width: 100%;
    font-size: 0.6875rem;
    color: var(--crud-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crew-builder-employee-item .emp-check {
    color: var(--crud-success);
    flex-shrink: 0;
}

/* Crew List Items */
.crew-list-item {
    display: flex;
    align-items: center;
    padding: var(--crud-spacing-xs) var(--crud-spacing-sm);
    cursor: pointer;
    border-radius: var(--crud-radius-sm);
    transition: all var(--crud-transition-fast);
    gap: var(--crud-spacing-xs);
}

.crew-list-item:hover {
    background: var(--crud-bg-hover);
}

.crew-list-item.selected {
    background: var(--crud-primary-subtle);
    border-left: 3px solid var(--crud-primary);
}

.crew-list-item-readonly {
    cursor: default;
}

.crew-list-item-readonly:hover {
    background: transparent;
}

.crew-list-item-drag {
    color: var(--crud-text-muted);
    cursor: grab;
    opacity: 0.3;
    flex-shrink: 0;
}

.crew-list-item:hover .crew-list-item-drag {
    opacity: 0.7;
}

/* Container that stacks the crew name and (optional) branch subtitle so the
   name keeps its full row width in the narrow Crews column. */
.crew-list-item-title {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.crew-list-item-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--crud-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crew-list-item-count {
    font-size: 0.6875rem;
    font-weight: 600;
    color: white;
    background: var(--crud-primary);
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

.crew-list-item-shift {
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--crud-text-muted);
    background: var(--crud-bg-hover);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.crew-list-item-branch {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--crud-text-muted);
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Top-of-page branch filter (header) */
.crew-builder-branch-filter {
    max-width: 180px;
}

.crew-preview-header-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.crew-preview-shift {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--crud-text-secondary);
    background: var(--crud-bg-hover);
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.crew-list-empty {
    padding: var(--crud-spacing-md);
    text-align: center;
    color: var(--crud-text-muted);
    font-size: 0.8125rem;
}

/* Detail Panel (70%) */
.crew-builder-detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--crud-bg-page);
    min-width: 0;
    min-height: 0; /* Required for nested flex scrolling */
    overflow: hidden;
}

/* Empty State */
.crew-builder-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--crud-spacing-xl);
    text-align: center;
    color: var(--crud-text-muted);
    min-height: 0; /* Required for nested flex scrolling */
}

.crew-builder-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--crud-spacing-lg);
    opacity: 0.5;
}

.crew-builder-empty h3 {
    margin: 0 0 var(--crud-spacing-sm) 0;
    color: var(--crud-text-primary);
}

.crew-builder-empty p {
    margin: 0 0 var(--crud-spacing-lg) 0;
}

/* Crew Editor */
.crew-builder-editor {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--crud-spacing-lg);
    overflow: hidden;
}

.crew-builder-editor form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Name Bar */
.crew-builder-name-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--crud-spacing-md);
    align-items: center;
    margin-bottom: var(--crud-spacing-lg);
    background: var(--crud-bg-card);
    padding: var(--crud-spacing-md);
    border-radius: var(--crud-radius-lg);
    border: 1px solid var(--crud-border);
}

.crew-builder-name-input {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 1.25rem;
    font-weight: 600;
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    background: var(--crud-bg-page);
}

/* On narrow screens, stack the name input and let the shift/actions wrap. */
@media (max-width: 480px) {
    .crew-builder-name-bar {
        gap: var(--crud-spacing-sm);
    }
    .crew-builder-name-input {
        flex-basis: 100%;
    }
    .crew-builder-name-bar #crewShiftSelect {
        max-width: 100%;
        flex: 1 1 auto;
    }
}

.crew-builder-name-input:focus {
    outline: none;
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-focus);
}

.crew-builder-name-actions {
    display: flex;
    gap: var(--crud-spacing-xs);
}

/* Members Header */
.crew-builder-members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--crud-spacing-md);
}

.crew-builder-members-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--crud-text-secondary);
}

.crew-builder-members-count {
    color: var(--crud-text-muted);
    font-weight: 400;
}

/* Member Cards Grid */
.crew-builder-cards-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--crud-spacing-md);
    align-content: start;
    overflow-y: auto;
    padding: var(--crud-spacing-sm);
    background: var(--crud-bg-card);
    border-radius: var(--crud-radius-lg);
    border: 1px solid var(--crud-border);
}

/* Member Card */
.crew-member-card {
    background: var(--crud-bg-page);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-md);
    padding: var(--crud-spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--crud-spacing-sm);
    transition: all var(--crud-transition-fast);
    position: relative;
}

.crew-member-card:hover {
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-md);
}

.crew-member-card.just-added {
    animation: cardAdded 0.3s ease;
}

@keyframes cardAdded {
    from {
        opacity: 0;
        transform: scale(0.9);
        background-color: var(--crud-success-light);
    }
    to {
        opacity: 1;
        transform: scale(1);
        background-color: var(--crud-bg-page);
    }
}

.crew-member-card .card-name-row {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    padding-right: 1.5rem; /* Space for remove button */
}

.crew-member-card .card-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--crud-text-primary);
    word-break: break-word;
}

.crew-member-card .card-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.craft-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 0.25rem;
    border-radius: 50%;
    font-size: 0.625rem;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
    color: white;
}

.crew-member-card .card-craft {
    flex: 1;
}

.crew-member-card .card-craft select {
    width: 100%;
    font-size: 0.8125rem;
    padding: var(--crud-spacing-xs) var(--crud-spacing-sm);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-sm);
    background: var(--crud-bg-card);
}

.crew-member-card .card-remove {
    position: absolute;
    top: var(--crud-spacing-xs);
    right: var(--crud-spacing-xs);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--crud-text-muted);
    cursor: pointer;
    border-radius: var(--crud-radius-sm);
    opacity: 0;
    transition: all var(--crud-transition-fast);
}

.crew-member-card:hover .card-remove {
    opacity: 1;
}

.crew-member-card .card-remove:hover {
    color: var(--crud-danger);
    background: var(--crud-danger-light);
}

/* Empty Cards State */
.crew-builder-cards-empty {
    grid-column: 1 / -1;
    padding: var(--crud-spacing-xl);
    text-align: center;
    color: var(--crud-text-muted);
    border: 2px dashed var(--crud-border);
    border-radius: var(--crud-radius-lg);
}

.crew-builder-cards-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* Footer */
.crew-builder-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--crud-spacing-md);
    padding-top: var(--crud-spacing-lg);
    margin-top: auto;
    border-top: 1px solid var(--crud-border);
}

/* Sortable States */
.sortable-ghost {
    opacity: 0.4;
}

.sortable-chosen {
    background: var(--crud-primary-subtle) !important;
}

/* Mobile Employee Picker Modal */
.employee-picker-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.5);
}

.employee-picker-modal.active {
    display: flex;
    flex-direction: column;
}

.employee-picker-modal-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: var(--crud-bg-card);
    border-radius: var(--crud-radius-lg) var(--crud-radius-lg) 0 0;
    display: flex;
    flex-direction: column;
    animation: slideUpModal 0.25s ease;
}

.employee-picker-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--crud-spacing-md) var(--crud-spacing-lg);
    border-bottom: 1px solid var(--crud-border);
}

.employee-picker-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
}

.employee-picker-modal-search {
    padding: var(--crud-spacing-md) var(--crud-spacing-lg);
    border-bottom: 1px solid var(--crud-border);
}

.employee-picker-modal-search .crud-input {
    width: 100%;
}

.employee-picker-modal-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--crud-spacing-sm);
}

.modal-employee-item {
    display: flex;
    align-items: center;
    gap: var(--crud-spacing-md);
    padding: var(--crud-spacing-md);
    cursor: pointer;
    border-radius: var(--crud-radius-md);
    transition: background var(--crud-transition-fast);
}

.modal-employee-item:hover,
.modal-employee-item.selected {
    background: var(--crud-primary-subtle);
}

.modal-employee-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--crud-primary);
}

.modal-employee-item .employee-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.modal-employee-item .name {
    font-weight: 500;
}

.modal-employee-item .craft {
    font-size: 0.8125rem;
    color: var(--crud-text-muted);
}

.employee-picker-modal-footer {
    padding: var(--crud-spacing-md) var(--crud-spacing-lg);
    padding-bottom: calc(var(--crud-spacing-lg) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--crud-border);
}

/* Small input/select variants */
.crud-input-sm {
    padding: var(--crud-spacing-xs) var(--crud-spacing-sm);
    font-size: 0.8125rem;
}

.crud-select-sm {
    /* Keep right padding wide enough to clear the chevron icon (positioned
       at right: 12px in .crud-select); otherwise long option text overlaps
       the arrow. */
    padding: var(--crud-spacing-xs) var(--crud-spacing-xl) var(--crud-spacing-xs) var(--crud-spacing-sm);
    font-size: 0.8125rem;
}

/* Responsive: Mobile (< 992px) */
@media (max-width: 991px) {
    /* Hide side columns on mobile */
    .crew-builder-employees,
    .crew-builder-crews {
        display: none;
    }

    /* Detail takes full width */
    .crew-builder-detail {
        width: 100%;
    }

    /* Show FAB on mobile */
    .crew-builder .crud-fab {
        display: flex;
    }

    /* Hide FAB when editing a crew (detail panel is open) */
    body.detail-open .crud-fab {
        display: none;
    }

    /* Adjust card grid for mobile - single column */
    .crew-builder-cards-grid {
        grid-template-columns: 1fr;
    }

    /* Member card: horizontal layout on mobile, with wrap so a long craft
       (e.g. "Carpenter - Carpenter A") drops to its own line instead of
       blowing out the row or clipping the name. */
    .crew-member-card {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        column-gap: var(--crud-spacing-md);
        row-gap: var(--crud-spacing-xs);
        padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    }

    .crew-member-card .card-name-row {
        /* Reserve at least 60% so a long craft is forced to wrap rather than
           ellipsising the name down to "Kalili," / "Dustin". */
        flex: 1 1 60%;
        min-width: 60%;
        padding-right: 0;
    }

    .crew-member-card .card-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .crew-member-card .card-craft {
        /* Natural width when short stays inline; wraps below when long. */
        flex: 0 1 auto;
        max-width: 100%;
        min-width: 0;
    }

    .crew-member-card .card-craft select {
        max-width: 100%;
    }

    .crew-member-card .card-remove {
        position: static;
        opacity: 1;
        flex-shrink: 0;
    }
}

/* Desktop (>= 992px) */
@media (min-width: 992px) {
    /* Hide FAB on desktop */
    .crew-builder .crud-fab {
        display: none;
    }

    /* Hide modal on desktop */
    .employee-picker-modal {
        display: none !important;
    }

    /* 4 cards per row on large screens */
    .crew-builder-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Extra large screens */
@media (min-width: 1400px) {
    .crew-builder-cards-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* ==========================================================================
   Crew Dashboard (All Crews View)
   ========================================================================== */

.crew-dashboard {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--crud-spacing-sm) var(--crud-spacing-md);
    overflow: hidden;
    min-height: 0; /* Required for nested flex scrolling */
    width: 100%;
    align-items: stretch;
    text-align: left;
}

/* Override centering from crew-builder-empty when showing dashboard */
.crew-builder-empty:has(.crew-dashboard) {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    overflow: hidden;
}

.crew-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--crud-spacing-sm);
}

.crew-dashboard-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--crud-text-primary);
}

.crew-dashboard-count {
    font-size: 0.875rem;
    color: var(--crud-text-muted);
}

.crew-dashboard-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--crud-spacing-md);
    align-content: start;
    justify-items: stretch;
    overflow-y: auto;
    min-height: 0; /* Required for flex child to scroll */
    padding: 4px;
    margin: -4px;
}

/* Crew Preview Card */
.crew-preview-card {
    background: var(--crud-bg-card);
    border: 1px solid var(--crud-border);
    border-radius: var(--crud-radius-lg);
    padding: var(--crud-spacing-md);
    cursor: pointer;
    transition: all var(--crud-transition-fast);
    display: flex;
    flex-direction: column;
    height: 240px;
}

.crew-preview-card.expanded {
    height: auto;
    max-height: none;
}

.crew-preview-card.expanded .crew-preview-members {
    overflow-y: visible;
}

.crew-preview-card:hover {
    border-color: var(--crud-primary);
    box-shadow: var(--crud-shadow-md);
    transform: translateY(-2px);
}

.crew-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--crud-spacing-sm);
    padding-bottom: var(--crud-spacing-sm);
    border-bottom: 1px solid var(--crud-border);
}

.crew-preview-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--crud-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.crew-preview-name:hover {
    color: var(--crud-primary);
}

.crew-preview-name .expand-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.crew-preview-card.expanded .crew-preview-name .expand-icon {
    transform: rotate(180deg);
}

.crew-preview-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: var(--crud-primary);
    padding: 2px 8px;
    border-radius: 10px;
    flex-shrink: 0;
}

.crew-preview-members {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.crew-preview-member-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--crud-spacing-sm);
    row-gap: 2px;
    font-size: 0.8125rem;
    padding: 4px 0;
    border-bottom: 1px solid var(--crud-border-light, rgba(0,0,0,0.05));
}

.crew-preview-member-row:last-child {
    border-bottom: none;
}

.crew-preview-member-name {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--crud-text-secondary);
    /* Reserve 60% so a long craft pill wraps below instead of ellipsising
       the name down to "Kalili," / "Dustin". */
    flex: 1 1 60%;
    min-width: 60%;
    text-align: left;
}

.crew-preview-member-name .craft-badge {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    min-width: 1.125rem;
    font-size: 0.5625rem;
}

.crew-preview-member-craft {
    display: flex;
    align-items: center;
    gap: 3px;
    /* Take natural width when short (stays inline on the right thanks to
       the row's justify-content: space-between); wraps to a second line
       when too long. No margin-left: auto so that on wrap the badge sits
       at the row's start (left-aligned under the name) instead of being
       pushed to the right edge. */
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}

.crew-preview-member-craft .craft-code {
    font-size: 0.625rem;
    color: white;
    background: var(--crud-text-muted);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 500;
    /* Truncate within the pill if the craft itself is absurdly long, but
       only after wrapping has already given it its own row. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.crew-preview-more {
    font-size: 0.75rem;
    color: var(--crud-text-muted);
    font-style: italic;
    text-align: center;
    padding-top: var(--crud-spacing-xs);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .crew-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 577px) and (max-width: 991px) {
    .crew-dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1400px) {
    .crew-dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ==========================================================================
   Dark Mode Support (Optional)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .crud-dark-mode {
        --crud-bg-page: #0F172A;
        --crud-bg-card: #1E293B;
        --crud-bg-hover: #334155;
        --crud-border: #334155;
        --crud-border-dark: #475569;
        --crud-text-primary: #F1F5F9;
        --crud-text-secondary: #94A3B8;
        --crud-text-muted: #64748B;
    }
}