/* FullPass - Main stylesheet
 * Version: 1.1.0
 * Minimal custom components not directly available in Tailwind
 * Following best practices from tailwind-guide.txt
 */

/* Base styles and theme variables */
:root {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-secondary: #f59e0b;
    --color-secondary-dark: #d97706;
    --color-success: #10b981;
    --color-error: #ef4444;
    --color-warning: #f59e0b;
}

/* 
 * Special components that can't be easily created with Tailwind classes alone
 * These are kept to a minimum following our tailwind-guide.txt best practices 
 */

/* Availability indicators - special interactive component */
.availability-indicator {
    transition: width 1s ease-in-out;
    background-color: var(--color-success);
}

.availability-indicator.low {
    background-color: var(--color-error);
}

.availability-indicator.medium {
    background-color: var(--color-warning);
}

/* Line clamp for text truncation (not in Tailwind 2.x) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Aspect ratio utilities (not in Tailwind 2.x) */
.aspect-w-16 {
    position: relative;
    padding-bottom: calc(var(--tw-aspect-h) / var(--tw-aspect-w) * 100%);
    --tw-aspect-w: 16;
}

.aspect-h-9 {
    --tw-aspect-h: 9;
}

.aspect-w-16 > * {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Helper for sticky sidebar that works with header */
.sticky-sidebar {
    position: sticky;
    top: 5rem; /* Accounts for header height plus some spacing */
}