/* ============================================
   CUSTOMER THEME - QrBiteHub
   Extended design tokens, responsive system,
   dark mode, and utility classes
   ============================================ */

/* ============================================
   DARK MODE TOKENS
   ============================================ */

/* Dark mode via system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Surface Colors - Dark Theme */
        --bg: #0a0a0a;
        --bg-page: #000000;
        --bg-secondary: #141414;
        --bg-tertiary: #1a1a1a;
        --bg-elevated: #1f1f1f;
        --bg-glass: rgba(20, 20, 20, 0.85);
        --bg-glass-heavy: rgba(20, 20, 20, 0.95);
        --bg-frosted: rgba(10, 10, 10, 0.8);
        --bg-overlay: rgba(0, 0, 0, 0.7);
        --bg-overlay-heavy: rgba(0, 0, 0, 0.85);

        /* Text Colors - Dark Theme */
        --text-primary: #f5f5f5;
        --text-secondary: #a0a0a0;
        --text-muted: #6b6b6b;
        --text-inverse: #0a0a0a;

        /* Border Colors - Dark Theme */
        --border: #2a2a2a;
        --border-light: #1f1f1f;
        --border-glass: rgba(255, 255, 255, 0.08);

        /* Shadows - Dark Theme */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
        --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.35);

        /* Primary adjustments for dark */
        --primary-light: rgba(245, 133, 36, 0.15);
        --primary-ghost: rgba(245, 133, 36, 0.1);
    }
}

/* Dark mode via explicit toggle */
[data-theme="dark"] {
    --bg: #0a0a0a;
    --bg-page: #000000;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --bg-elevated: #1f1f1f;
    --bg-glass: rgba(20, 20, 20, 0.85);
    --bg-glass-heavy: rgba(20, 20, 20, 0.95);
    --bg-frosted: rgba(10, 10, 10, 0.8);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-overlay-heavy: rgba(0, 0, 0, 0.85);
    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-muted: #6b6b6b;
    --text-inverse: #0a0a0a;
    --border: #2a2a2a;
    --border-light: #1f1f1f;
    --border-glass: rgba(255, 255, 255, 0.08);
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5), 0 8px 16px rgba(0, 0, 0, 0.35);
    --primary-light: rgba(245, 133, 36, 0.15);
    --primary-ghost: rgba(245, 133, 36, 0.1);
}

/* ============================================
   CUSTOMER PRIMARY COLOR OVERRIDE
   Ensures customer pages use orange, not staff dark blue
   ============================================ */

.customer-app,
.customer-app *,
#customer-app,
#customer-app * {
    --primary: #f58524;
    --primary-hover: #e6751a;
    --primary-dark: #cc6515;
}

/* ============================================
   RESPONSIVE BREAKPOINT TOKENS
   ============================================ */

:root {
    /* Breakpoint values for reference */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1440px;

    /* Container max-widths */
    --container-sm: 100%;
    --container-md: 600px;
    --container-lg: 800px;
    --container-xl: 1200px;

    /* Grid columns */
    --grid-cols: 1;
    --grid-gap: var(--space-4);

    /* Touch target minimum */
    --touch-target: 44px;
    --touch-target-sm: 36px;
}

/* ============================================
   FOCUS STATE UTILITIES
   ============================================ */

/* Default focus-visible outline */
.customer-app :focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Focus ring utility class */
.focus-ring:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--primary-ghost);
}

/* Focus ring inset (for buttons with rounded corners) */
.focus-ring-inset:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--primary), 0 0 0 4px var(--primary-ghost);
}

/* Remove focus styles for mouse users */
.customer-app :focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   SAFE AREA UTILITIES
   ============================================ */

.safe-top { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }
.safe-left { padding-left: var(--safe-left); }
.safe-right { padding-right: var(--safe-right); }
.safe-x { padding-left: var(--safe-left); padding-right: var(--safe-right); }
.safe-y { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.safe-all { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }

/* Margin versions */
.m-safe-top { margin-top: var(--safe-top); }
.m-safe-bottom { margin-bottom: var(--safe-bottom); }

/* Min-height with safe area */
.min-h-safe { min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); }

/* ============================================
   SKELETON & SHIMMER BASE CLASSES
   ============================================ */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 0%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 1em;
    border-radius: var(--radius-xs);
}

.skeleton-text-sm { height: 0.875em; width: 60%; }
.skeleton-text-md { height: 1em; width: 80%; }
.skeleton-text-lg { height: 1.25em; width: 100%; }

.skeleton-circle {
    border-radius: var(--radius-full);
    aspect-ratio: 1;
}

.skeleton-card {
    background: var(--bg);
    border-radius: var(--radius);
    padding: var(--space-4);
    border: 1px solid var(--border-light);
}

.skeleton-image {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    aspect-ratio: 16/9;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
}

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

/* Pulse variant */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   TOUCH TARGET UTILITIES
   ============================================ */

.touch-target {
    min-width: var(--touch-target);
    min-height: var(--touch-target);
}

.touch-target-sm {
    min-width: var(--touch-target-sm);
    min-height: var(--touch-target-sm);
}

/* Expand clickable area without changing visual size */
.touch-expand {
    position: relative;
}

.touch-expand::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    width: 100%;
    height: 100%;
}

/* ============================================
   INTERACTIVE FEEDBACK
   ============================================ */

/* Press feedback */
.press-scale {
    transition: transform var(--duration-fast) var(--ease-out);
}

.press-scale:active {
    transform: scale(0.96);
}

.press-scale-sm:active {
    transform: scale(0.98);
}

/* Tap feedback */
.tap-highlight {
    position: relative;
    overflow: hidden;
}

.tap-highlight::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--text-primary);
    opacity: 0;
    transition: opacity var(--duration-fast);
    pointer-events: none;
}

.tap-highlight:active::after {
    opacity: 0.08;
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

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

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

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

.text-balance {
    text-wrap: balance;
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* Flex shortcuts */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col {
    display: flex;
    flex-direction: column;
}

/* Grid shortcuts */
.grid-menu {
    display: grid;
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    gap: var(--grid-gap);
}

/* Scrollable containers */
.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scroll-x::-webkit-scrollbar { display: none; }

.scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

/* Hide scrollbar but keep functionality */
.scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ============================================
   SPACING UTILITIES
   ============================================ */

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

.p-0 { padding: 0; }
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5 { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5 { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }

/* ============================================
   VISIBILITY & ACCESSIBILITY
   ============================================ */

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: var(--text-on-primary);
    padding: var(--space-2) var(--space-4);
    z-index: var(--z-max);
    transition: top var(--duration-fast);
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   RESPONSIVE CONTAINER
   ============================================ */

.customer-container {
    width: 100%;
    max-width: var(--container-sm);
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Large Mobile: 480px+ */
@media (min-width: 480px) {
    :root {
        --grid-cols: 2;
        --grid-gap: var(--space-4);
    }

    .customer-container {
        padding-left: var(--space-5);
        padding-right: var(--space-5);
    }

    /* Hide on mobile only */
    .hide-mobile { display: none; }

    /* Show on mobile up */
    .show-sm { display: block; }
    .show-sm-flex { display: flex; }
    .show-sm-grid { display: grid; }
}

/* Tablet: 768px+ */
@media (min-width: 768px) {
    :root {
        --grid-cols: 2;
        --grid-gap: var(--space-5);
    }

    .customer-container {
        max-width: var(--container-md);
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    /* Tablet-specific layout */
    .customer-app {
        background: var(--bg-page);
    }

    /* Center content card on tablet */
    .tablet-card {
        background: var(--bg);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        max-width: var(--container-md);
        margin: var(--space-6) auto;
    }

    .hide-tablet { display: none; }
    .show-md { display: block; }
    .show-md-flex { display: flex; }
}

/* Desktop: 1024px+ */
@media (min-width: 1024px) {
    :root {
        --grid-cols: 3;
        --grid-gap: var(--space-6);
    }

    .customer-container {
        max-width: var(--container-lg);
    }

    /* Desktop-specific layout */
    .tablet-card {
        max-width: var(--container-lg);
    }

    .hide-desktop { display: none; }
    .show-lg { display: block; }
    .show-lg-flex { display: flex; }
}

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) {
    :root {
        --grid-cols: 4;
    }

    .customer-container {
        max-width: var(--container-xl);
    }

    .show-xl { display: block; }
    .show-xl-flex { display: flex; }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--bg-secondary);
    }

    .skeleton-pulse {
        animation: none;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .customer-app {
        background: white;
        color: black;
    }

    .no-print { display: none !important; }
}