.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--color-primary-500);
    color: white;
}
.btn-primary:hover {
    background: var(--color-primary-600);
    color: white;
}

.btn-warning {
    background: var(--color-warning-500, #f59e0b);
    color: white;
}
.btn-warning:hover {
    background: var(--color-warning-600, #d97706);
    color: white;
}

.btn-secondary {
    background: white;
    color: var(--color-gray-700);
    border-color: var(--color-gray-300);
}
.btn-secondary:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
    color: var(--color-gray-700);
}

.btn-ghost {
    background: transparent;
    color: var(--color-gray-600);
}
.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.btn-icon {
    padding: var(--space-2);
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    cursor: pointer;
}
.btn-icon:hover {
    background: var(--color-gray-50);
    color: var(--color-primary-600);
}

.btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-3) var(--space-8); font-size: var(--text-base); }

.input {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-gray-800);
    background: white;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.input:focus {
    outline: none;
    border-color: var(--color-primary-400);
    box-shadow: 0 0 0 3px var(--color-primary-100);
}
.input::placeholder {
    color: var(--color-gray-400);
}

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2364748b' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    padding-right: var(--space-8);
}

.card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-full);
    line-height: 1;
}
.badge-primary { background: var(--color-primary-100); color: var(--color-primary-700); }
.badge-secondary { background: var(--color-gray-100); color: var(--color-gray-600); }
.badge-success { background: #dcfce7; color: var(--color-success-600); }
.badge-warning { background: #fef3c7; color: var(--color-warning-600); }
.badge-error { background: #fee2e2; color: var(--color-error-600); }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-100);
    color: var(--color-primary-700);
    font-size: var(--text-sm);
    font-weight: 600;
    overflow: hidden;
}
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.capacity-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-gray-600);
}
.capacity-bar-track {
    flex: 1;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.capacity-bar-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}
.capacity-bar-fill[data-level="low"] { background: var(--color-success-500); }
.capacity-bar-fill[data-level="medium"] { background: var(--color-warning-500); }
.capacity-bar-fill[data-level="high"] { background: var(--color-secondary-600); }
.capacity-bar-fill[data-level="full"] { background: var(--color-error-500); }

.toast-container {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    z-index: 1000;
}
.toast {
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-gray-800);
    color: white;
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    animation: toast-in 200ms ease;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request.htmx-indicator {
    display: inline-block;
}

.spinner {
    width: 1em;
    height: 1em;
    border: 2px solid var(--color-gray-200);
    border-top-color: var(--color-primary-500);
    border-radius: 50%;
    animation: spin 600ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* T13: Mobile-friendly component adjustments */
@media (max-width: 768px) {
    /* Select/dropdown inputs full width */
    select.input { width: 100%; }

    /* Badge groups wrap on narrow screens */
    .badge { white-space: nowrap; }

    /* Card layouts: reduce padding for narrow screens */
    .card { padding: var(--space-4); }

    /* Capacity bar: ensure text doesn't shrink */
    .capacity-bar { font-size: var(--text-xs); }
}