/**
 * Wellness PWA - Complete Styles
 * Version 2.5.0 - Dark Elegance Theme (Navy + Pink)
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Ensure dark background on html element to prevent white flash */
html {
    background: #041b35;
    overflow-x: hidden;
}

/* Prevent body scroll when mobile menu is open */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    /* Maintain background when fixed positioning kicks in */
    background: var(--background);
    background-color: #041b35;
}

/* Prevent body scroll when modal is open */
body.modal-open {
    overflow: hidden;
}

html.modal-open {
    overflow: hidden;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--navy-light);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 10px;
    border: 2px solid var(--navy-light);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--navy-light);
}

:root {
    /* Dark Theme - Navy & Pink Color Palette */
    --navy-deep: #041b35;
    --navy-medium: #0e345e;
    --navy-light: #112842;
    --navy-dark: #030506;
    --blue-bright: #005ff2;
    --blue-accent: #006cff;
    --blue-dark: #0053e6;
    --teal-accent: #0cb4ce;
    --teal-light: #00a7c1;
    --pink-soft: #ff9b9b;
    --pink-medium: #ff8686;
    --pink-coral: #f27979;
    --pink-salmon: #f28e8e;
    --gold-accent: #ffc42e;
    --green-accent: #28de72;

    /* Primary Colors - Bright Blue & Soft Pink */
    --primary: #005ff2;           /* Bright blue - main action color */
    --primary-dark: #0053e6;
    --primary-light: rgba(0, 95, 242, 0.15);
    --secondary: #ff9b9b;          /* Soft pink - accents */
    --secondary-dark: #f27979;     /* Coral pink */
    --secondary-light: rgba(255, 155, 155, 0.15);
    --accent: #0cb4ce;             /* Teal accent */

    /* Functional Colors */
    --success: #28de72;
    --danger: #f25959;
    --warning: #ffc42e;
    --info: #006cff;

    /* Dark Theme Neutrals */
    --text-primary: #f2f2f2;       /* Light text on dark */
    --text-secondary: #cccccc;     /* Secondary light text */
    --text-muted: #909090;         /* Muted text */
    --charcoal: #f2f2f2;           /* Inverted for dark theme */
    --slate: #cccccc;
    --gray-500: #6a6a6a;
    --gray-600: #777777;
    --gray-200: rgba(255, 255, 255, 0.1);
    --gray-50: rgba(255, 255, 255, 0.05);
    --gray-900: #f2f2f2;
    --gray-700: #cccccc;
    --white: #FFFFFF;

    /* Dark Backgrounds */
    --background: linear-gradient(135deg,
        #041b35 0%,
        #0e345e 50%,
        #112842 100%
    );
    --background-dark: #030506;
    --background-card: rgba(14, 52, 94, 0.6);
    --background-overlay: rgba(3, 5, 6, 0.85);

    /* Typography System - Modern Plus Jakarta Sans */
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, sans-serif;
    --font-accent: 'Handlee', cursive;
    --font-mono: 'Courier New', monospace;

    /* Spacing Scale */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 2.5rem;   /* 40px */
    --space-8: 3rem;     /* 48px */
    --space-10: 4rem;    /* 64px */

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows - Navy Tinted for Dark Theme */
    --shadow-sm: 0 2px 8px rgba(0, 95, 242, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 95, 242, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 95, 242, 0.25);
    --shadow-xl: 0 12px 32px rgba(0, 95, 242, 0.3);
    --shadow-2xl: 0 20px 48px rgba(0, 95, 242, 0.35);
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    background-color: #041b35;
    background: var(--background);
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    color: var(--charcoal);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header - Dark Glass Morphism */
.header {
    background: rgba(4, 27, 53, 0.85);
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--space-4) var(--space-5);
    padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(16px) saturate(180%);
    border-bottom: 2px solid rgba(0, 95, 246, 0.3);
    transition: background 0.3s ease;
}

.header.scrolled {
    background: rgba(4, 27, 53, 0.95);
    box-shadow: none;
    border-bottom-color: rgba(0, 95, 242, 0.5);
}

.logo {
    font-size: 1.5rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--secondary);
    margin-left: auto;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    outline: none;
}

/* Hamburger bar styles - iOS compatible */
.hamburger-bar {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--secondary);
    border-radius: 2px;
    position: absolute;
    left: 50%;
    margin-left: -12px; /* Half of width for centering - avoids transform for position */
    -webkit-transition: top 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
    transition: top 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    will-change: transform, top, opacity;
}

.hamburger-bar:nth-child(1) { top: 10px; -webkit-transform: rotate(0deg); transform: rotate(0deg); }
.hamburger-bar:nth-child(2) { top: 18px; opacity: 1; }
.hamburger-bar:nth-child(3) { top: 26px; -webkit-transform: rotate(0deg); transform: rotate(0deg); }

/* Open state - X animation (iOS compatible) */
.mobile-menu-toggle.menu-open .hamburger-bar:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mobile-menu-toggle.menu-open .hamburger-bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.menu-open .hamburger-bar:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* Desktop - hide mobile-only links, show desktop-only links */
.nav-links a.mobile-only {
    display: none;
}
.nav-links a.desktop-only {
    display: inline-flex;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: color 0.3s ease, transform 0.2s ease;
    position: relative;
    cursor: pointer;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-links a:hover {
    color: var(--text-primary);
}

.nav-links a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.nav-links a:not(:hover)::after {
    transform: scaleX(0);
    transform-origin: right;
}
/* Container */
.container {
    flex: 1;
    max-width: 1800px;
    margin: 2rem auto;
    padding: 0 2rem;
    width: 100%;
}

/* Welcome Box - Dark Elegant Card */
.welcome-box {
    background: rgba(14, 52, 94, 0.7);
    border-radius: 20px;
    padding: var(--space-8) var(--space-6);
    box-shadow: none;
    text-align: center;
    border: 2px solid rgba(0, 95, 242, 0.4);
    backdrop-filter: blur(10px);
}

h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: var(--space-4);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

h2 {
    font-size: clamp(1.375rem, 3vw, 1.875rem);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: var(--space-5);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--primary);
    letter-spacing: -0.01em;
}

p {
    color: var(--slate);
    line-height: 1.7;
    margin-bottom: var(--space-4);
    font-size: 1rem;
}

/* Buttons - Dark Theme with Blue/Pink Styling */
.button {
    display: inline-block;
    padding: 0.875rem 2rem;
    background: var(--primary);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    font-family: var(--font-body);
    margin: var(--space-2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    letter-spacing: 0.01em;
    position: relative;
    overflow: hidden;
    box-shadow: none;
}

.button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.button:hover::before {
    left: 100%;
}

.button:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: none;
}

.button:active {
    transform: translateY(0);
    box-shadow: none;
}

.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.button-large {
    width: 100%;
    padding: 1.125rem 2rem;
    font-size: 1.125rem;
    border-radius: 14px;
    display: block;
    margin: 0 auto;
}

.button-small {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    margin: var(--space-1);
    border-radius: 10px;
}

/* Add Person button - show full text on desktop, + only on mobile */
.button-small .add-person-text {
    display: inline;
}
.button-small .add-person-plus {
    display: none;
}

.button-secondary {
    background: var(--secondary);
    box-shadow: none;
}

.button-secondary:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: none;
}

.button-danger {
    background: var(--danger);
    box-shadow: none;
}

.button-danger:hover {
    background: #DC2626;
    box-shadow: none;
}

/* Features Grid */
.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature {
    text-align: center;
    padding: 1.5rem;
}

.feature-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.feature h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.feature p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Cards Grid - Wellness Card Design */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    justify-content: center;
}

.punch-card {
    background: rgba(14, 52, 94, 0.6);
    border-radius: 16px;
    padding: var(--space-5);
    box-shadow: none;
    border: 2px solid rgba(0, 95, 242, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.punch-card:hover {
    border-color: var(--secondary);
}

.punch-card.archived {
    opacity: 0.7;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 1rem;
}

.card-header h3 {
    font-size: 1.125rem;
    margin: 0;
    flex: 1;
}

.badge {
    background: var(--primary);
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: var(--space-2);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(45, 95, 93, 0.15);
}

.badge-shared {
    background: var(--secondary);
    box-shadow: 0 2px 4px rgba(139, 157, 131, 0.15);
}

.badge-staff {
    background: #e065ed;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: 0 2px 4px rgba(224, 101, 237, 0.25);
}

.badge-staff i {
    font-size: 0.7rem;
}

.badge-small {
    padding: 0.25rem 0.625rem;
    font-size: 0.7rem;
    margin-left: var(--space-2);
}

.sessions-count {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 0.5rem;
}

.sessions-count .remaining {
    color: var(--primary);
}

.progress-bar {
    height: 10px;
    background: rgba(139, 157, 131, 0.15);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: var(--space-3);
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    border-radius: 10px;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--secondary);
}

.status-expired {
    color: var(--danger);
    font-weight: 600;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(14, 52, 94, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(0, 95, 242, 0.3);
    backdrop-filter: blur(10px);
}

.empty-state h3 {
    color: var(--secondary);
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.empty-state p {
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    color: var(--primary);
}

.empty-icon i {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Templates Grid - Wellness Template Cards */
.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}

.template-card {
    background: rgba(14, 52, 94, 0.6);
    border-radius: 16px;
    padding: var(--space-6);
    box-shadow: none;
    border: 2px solid rgba(0, 95, 242, 0.4);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.template-card:hover {
    border-color: var(--secondary);
}

.template-description {
    margin: 1rem 0;
    min-height: 3rem;
}

.template-pricing {
    margin: 1.5rem 0;
}

.price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
}

.per-session {
    font-size: 0.875rem;
    color: var(--secondary);
    margin-top: 0.25rem;
}

.template-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Modal - Dark Theme with Blue/Pink Accents */
#modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(3, 5, 6, 0.9);
    backdrop-filter: blur(12px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10001;
    padding: var(--space-4);
    overflow: hidden;
    animation: modalFadeIn 0.3s ease;
}

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

.modal-content {
    background: var(--navy-medium);
    border-radius: 20px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: none;
    border: 2px solid rgba(0, 95, 242, 0.5);
    animation: modalSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-large {
    max-width: 700px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    border-bottom: 1px solid rgba(0, 95, 242, 0.2);
}

.modal-header h2 {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--text-primary);
}

.close-btn {
    background: rgba(0, 95, 242, 0.1);
    border: none;
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn i {
    display: block;
    line-height: 1px;
    margin-right: 0 !important;
}

.close-btn:hover {
    background: var(--secondary);
    color: var(--navy-deep);
    transform: rotate(90deg);
}

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

.modal-footer-text {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
}

.modal-footer-text a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

/* Forms - Wellness Form Design */
.form-group {
    margin-bottom: var(--space-5);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-family: var(--font-body);
    color: var(--charcoal);
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    font-size: 1rem;
    font-family: var(--font-body);
    background: rgba(4, 27, 53, 0.5);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.form-group input::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: none;
    background: rgba(4, 27, 53, 0.8);
    transform: translateY(-1px);
}

/* Floating Label Forms */
.float-group {
    position: relative;
    margin-bottom: var(--space-4);
}

.float-group .float-input {
    width: 100%;
    padding: 1.6rem 1rem 0.6rem;
    background: rgba(4, 27, 53, 0.5);
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: all 0.3s ease;
}

.float-group .float-input:focus {
    outline: none;
    border-color: var(--primary);
    background: rgba(4, 27, 53, 0.8);
    transform: translateY(-1px);
}

.float-group .float-input[readonly] {
    background: var(--navy-deep);
    color: var(--text-muted);
}

/* Override browser autofill styles to match dark theme */
.float-group .float-input:-webkit-autofill,
.float-group .float-input:-webkit-autofill:hover,
.float-group .float-input:-webkit-autofill:focus,
.float-group .float-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(4, 27, 53, 0.95) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    border-color: rgba(0, 95, 242, 0.5) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.float-group .float-label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.2s ease;
    background: transparent;
}

/* Float up when focused or has value */
.float-group .float-input:focus ~ .float-label,
.float-group .float-input:not(:placeholder-shown) ~ .float-label,
.float-group .float-label.float-label-active {
    top: 0.45rem;
    transform: translateY(0);
    font-size: 0.65rem;
    color: var(--primary);
    font-weight: 600;
}

/* Select dropdown - always show label floated */
.float-group select.float-input {
    /* iOS Safari needs explicit height and appearance reset to respect padding */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 56px;
    min-height: 56px;
    padding-top: 1.2rem;
    padding-bottom: 0.6rem;
    padding-right: 2.5rem;
    /* Custom dropdown arrow */
    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 fill='%23005ff2' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    cursor: pointer;
}

.float-group select.float-input ~ .float-label {
    top: 0.45rem;
    transform: translateY(0);
    font-size: 0.65rem;
    color: var(--primary);
    font-weight: 600;
}

/* Readonly fields - always floated */
.float-group .float-input[readonly] ~ .float-label {
    top: 0.45rem;
    transform: translateY(0);
    font-size: 0.65rem;
    color: var(--text-muted);
}

/* Textarea variant */
.float-group textarea.float-input {
    min-height: 80px;
    resize: vertical;
    padding-top: 1.8rem;
}

.float-group textarea.float-input ~ .float-label {
    top: 1rem;
    transform: translateY(0);
}

.float-group textarea.float-input:focus ~ .float-label,
.float-group textarea.float-input:not(:placeholder-shown) ~ .float-label {
    top: 0.35rem;
}

/* Password visibility toggle adjustment */
.float-group .password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.float-group .password-toggle:hover {
    color: var(--primary);
}

/* Two-column form row */
.float-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 480px) {
    .float-row {
        grid-template-columns: 1fr;
    }
}

.coupon-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.coupon-input-row .float-group {
    flex: 1;
}

.coupon-input-row .button-small {
    align-self: stretch;
    height: auto;
}

#coupon-message {
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

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

.error {
    color: var(--danger);
}

.validating {
    color: #3B82F6;
}

.typing {
    color: #6B7280;
    font-size: 0.875rem;
}

.help-text {
    font-size: 0.875rem;
    color: var(--secondary);
}

/* Password Input with Toggle */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    width: 100%;
    padding-right: 3rem; /* Make room for icon */
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--gray-600);
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s;
    min-width: 44px; /* Touch-friendly target */
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: var(--primary);
}

.password-toggle:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Purchase Summary - Enhanced Design */
.purchase-summary {
    background: rgba(14, 52, 94, 0.6);
    padding: var(--space-5);
    border-radius: 12px;
    margin-bottom: var(--space-5);
    border: 1px solid rgba(0, 95, 242, 0.3);
}

.purchase-summary h3 {
    color: var(--text-primary);
}

.purchase-summary p {
    color: var(--text-secondary);
}

.price-breakdown {
    margin-top: var(--space-4);
}

.line-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.line-item.total {
    border-top: 2px solid rgba(0, 95, 242, 0.25);
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    font-weight: 700;
    font-size: 1.375rem;
    font-family: var(--font-heading);
    color: var(--primary);
}

.discount {
    color: var(--success);
    font-weight: 600;
}

/* QR Code Section */
.qr-section {
    text-align: center;
    margin-bottom: 2rem;
}

.qr-code-display {
    display: inline-block;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    margin: 1rem 0;
}

.qr-placeholder {
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-100);
    color: var(--secondary);
    font-size: 0.875rem;
    text-align: center;
    padding: 1rem;
}

.qr-token {
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--secondary);
}

.qr-token code {
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

/* QR Code transparent background */
.qr-code-display,
.qr-code-display canvas,
.qr-code-display img {
    background: transparent !important;
}

/* Card Stats */
.card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0;
}

.stat {
    text-align: center;
    padding: 1rem;
    background: var(--gray-50);
    border-radius: 8px;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--secondary);
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Holders Section */
/* Collapsible sections */
.collapsible-section {
    margin-top: 1.5rem;
}

.collapsible-header {
    cursor: pointer;
    padding: 1rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    transition: background 0.2s ease;
    user-select: none;
}

.collapsible-header:hover {
    background: rgba(59, 130, 246, 0.15);
}

.section-toggle {
    margin-right: 10px;
    color: var(--primary);
    transition: transform 0.2s ease;
    font-size: 0.875rem;
}

.collapsible-content {
    margin-top: 1rem;
    padding: 0 1rem;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.section-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    color: var(--text-primary);
}

.holders-list,
.history-list {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.2);
}

.holder-item,
.history-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 0.75rem;
    background: transparent !important;
    color: var(--text-primary);
    flex-wrap: nowrap;
    overflow-x: auto;
}

.holder-item:last-child,
.history-item:last-child {
    border-bottom: none;
}

.holder-name {
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.holder-badges {
    display: inline-flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.holder-actions {
    display: inline-flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
}

.holder-item .button-small,
.holder-item .badge-small {
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Holder action buttons - compact with site colors */
.holder-actions .button-small {
    padding: 0.35rem 0.65rem;
    font-size: 0.75rem;
    margin: 0;
    border-radius: 6px;
    font-weight: 500;
    border: 1px solid transparent;
}

/* Resume button - teal/accent */
.holder-actions .button-small[onclick*="unpause"] {
    background: rgba(12, 180, 206, 0.15);
    color: var(--accent);
    border-color: var(--accent);
}
.holder-actions .button-small[onclick*="unpause"]:hover {
    background: var(--accent);
    color: var(--navy-dark);
}

/* Pause button - warning/amber */
.holder-actions .button-small[onclick*="pauseHolder"] {
    background: rgba(255, 196, 46, 0.15);
    color: var(--warning);
    border-color: var(--warning);
}
.holder-actions .button-small[onclick*="pauseHolder"]:hover {
    background: var(--warning);
    color: var(--navy-dark);
}

/* Toggle access type button - pink/secondary */
.holder-actions .button-small[onclick*="toggleUsageType"] {
    background: rgba(255, 155, 155, 0.15);
    color: var(--secondary);
    border-color: var(--secondary);
}
.holder-actions .button-small[onclick*="toggleUsageType"]:hover {
    background: var(--secondary);
    color: var(--navy-dark);
}

/* View QR button - primary blue */
.holder-actions .button-small[onclick*="viewHolderQR"] {
    background: rgba(0, 95, 242, 0.15);
    color: var(--primary);
    border-color: var(--primary);
}
.holder-actions .button-small[onclick*="viewHolderQR"]:hover {
    background: var(--primary);
    color: white;
}

/* Send Email button - success green */
.holder-actions .button-small[onclick*="sendHolderNotification"] {
    background: rgba(40, 222, 114, 0.15);
    color: var(--success);
    border-color: var(--success);
}
.holder-actions .button-small[onclick*="sendHolderNotification"]:hover {
    background: var(--success);
    color: var(--navy-dark);
}

/* Icon-only buttons */
.icon-button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary);
    transition: color 0.2s ease, transform 0.2s ease;
}

.icon-button:hover {
    transform: scale(1.1);
}

.icon-button.icon-danger {
    color: #EF4444;
}

.icon-button.icon-danger:hover {
    color: #DC2626;
}

.icon-button.icon-primary {
    color: var(--primary);
}

.icon-button.icon-primary:hover {
    color: var(--secondary);
}

.activity-date {
    font-size: 0.875rem;
    color: #9CA3AF;
    white-space: nowrap;
}

.activity-description {
    font-size: 0.875rem;
    color: #6B7280;
    font-style: italic;
}

.date {
    font-size: 0.875rem;
    color: #9CA3AF;
    margin-left: 1rem;
}

.badge-undo {
    background: var(--warning);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
}

/* Button styling for dark theme */
.section-header .button-small {
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.section-header .button-small:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    transform: translateY(-2px);
}

/* Payment Placeholder */
.payment-placeholder {
    background: var(--gray-50);
    border: 2px dashed var(--gray-300);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    margin: 1rem 0;
}

/* Toast Notifications - Premium Design */
.toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: var(--charcoal);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    box-shadow: none;
    z-index: 2000;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(0, 95, 242, 0.5);
    max-width: 350px;
}

.toast.show {
    transform: translateY(0);
    opacity: 1;
}

.toast-success {
    background: var(--success);
    border-color: rgba(255, 255, 255, 0.2);
}

.toast-error {
    background: var(--danger);
    border-color: rgba(255, 255, 255, 0.2);
}

.toast-warning {
    background: var(--warning);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Form Error Message */
.form-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    text-align: center;
}

/* Form Success Message */
.form-success {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    text-align: center;
}

/* Shake Animation for Form Errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease-in-out;
}

/* Test user toggle pill */
.test-toggle-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}
.test-toggle-pill:hover {
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12);
}
.test-toggle-pill.active {
    color: #fbbf24;
    background: rgba(251,191,36,0.1);
    border-color: rgba(251,191,36,0.3);
}
.test-toggle-pill i { font-size: 0.75rem; }

/* Test user badge and row styling */
.test-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.25);
    vertical-align: middle;
    margin-left: 6px;
}
.test-user-row {
    opacity: 0.6;
    border-left: 3px solid rgba(251, 191, 36, 0.4);
}

/* Footer */
.footer {
    background: var(--navy-deep);
    padding: 0.875rem;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    box-shadow: none;
    border-top: 1px solid rgba(0, 95, 242, 0.2);
}

.footer a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer a:hover {
    color: var(--secondary);
}

/* Admin Bottom Nav — mobile only */
.admin-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    display: none;
    justify-content: space-around;
    padding: 8px 0 max(8px, env(safe-area-inset-bottom));
    background: rgba(4,27,53,0.95);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255,255,255,0.06);
}
.admin-bottom-nav .abn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: rgba(255,255,255,0.35);
    font-size: 0.6rem; font-weight: 500; letter-spacing: 0.5px;
    padding: 4px 0; flex: 1; transition: color .2s;
}
.admin-bottom-nav .abn-item i[class*="fa-"] { font-size: 1.1rem; display: block; text-align: center; width: 100%; margin-right: 0; }
.admin-bottom-nav .abn-item:hover { color: rgba(255,255,255,0.6); }
.admin-bottom-nav .abn-item.active { color: #D4908F; }

@media (max-width: 768px) {
    .admin-bottom-nav:not(.hidden) { display: flex; }
    /* Add margin so footer/content scrolls above the fixed bottom nav */
    body.has-bottom-nav .footer { margin-bottom: 64px; }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

/* Responsive */
/* Mobile Menu Styles */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    color: var(--secondary);
}

@media (max-width: 768px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }

    /* Hide admin tabs on mobile - use hamburger menu instead */
    .admin-tabs {
        display: none !important;
    }

    .header {
        padding: 1rem;
        padding-top: calc(1rem + env(safe-area-inset-top, 0px));
    }

    .logo {
        font-size: clamp(1.1rem, 5vw, 1.4rem);
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-menu-toggle {
        display: block;
        position: relative;
        z-index: 10000;
    }

    .nav-links {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(4, 27, 53, 0.98);
        /* Backdrop filter without transition - prevents white flash on some browsers */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 80px;
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
        gap: 0.25rem;
        z-index: 9999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Animation setup - start hidden but pointer-events none */
        display: flex !important;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.3s ease-out,
                    visibility 0.3s ease-out,
                    transform 0.3s ease-out;
        /* Prevent white flash during backdrop-filter */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        will-change: opacity, transform;
    }

    .nav-links.mobile-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .nav-links a {
        font-size: 1.4rem;
        padding: 0.6rem 0;
        margin: 0.1rem 0;
        border-radius: 0;
        border: none;
        background: transparent;
        color: var(--text-light);
        /* Center menu items including icon */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.6rem;
        white-space: nowrap;
        /* Animation - start hidden, slide up into view */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s ease;
        /* Prevent tap flash on mobile */
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        outline: none;
    }

    .nav-links.mobile-open a {
        opacity: 1;
        transform: translateY(0);
    }

    /* Staggered delays for each menu item */
    .nav-links.mobile-open a:nth-child(1) { transition-delay: 0.02s; }
    .nav-links.mobile-open a:nth-child(2) { transition-delay: 0.04s; }
    .nav-links.mobile-open a:nth-child(3) { transition-delay: 0.06s; }
    .nav-links.mobile-open a:nth-child(4) { transition-delay: 0.08s; }
    .nav-links.mobile-open a:nth-child(5) { transition-delay: 0.10s; }
    .nav-links.mobile-open a:nth-child(6) { transition-delay: 0.12s; }
    .nav-links.mobile-open a:nth-child(7) { transition-delay: 0.14s; }
    .nav-links.mobile-open a:nth-child(8) { transition-delay: 0.16s; }
    .nav-links.mobile-open a:nth-child(9) { transition-delay: 0.18s; }
    .nav-links.mobile-open a:nth-child(10) { transition-delay: 0.20s; }
    .nav-links.mobile-open a:nth-child(11) { transition-delay: 0.22s; }

    .nav-links a i {
        width: 28px;
        text-align: center;
        color: var(--secondary);
    }

    .nav-links a:hover {
        background: transparent;
        transform: none;
        color: var(--secondary);
    }

    /* Remove animated underline on mobile */
    .nav-links a::after {
        display: none;
    }

    .nav-links a.mobile-only {
        display: inline-flex;
    }

    .nav-links a.desktop-only {
        display: none;
    }

    .welcome-box {
        padding: 2rem 1.5rem;
    }

    .container {
        margin: 1rem auto;
        padding: 0 1rem;
    }

    .features {
        grid-template-columns: 1fr;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .templates-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .card-stats {
        grid-template-columns: 1fr;
    }

    /* Modal full screen on mobile - iOS Safari safe area support */
    #modal {
        padding: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start;
        /* Use dynamic viewport height with fallback for iOS Safari */
        height: 100vh;
        height: 100dvh;
        /* Prevent scroll from triggering iOS browser chrome */
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .modal-content {
        margin: 0;
        border-radius: 0;
        max-width: 100%;
        /* Use dynamic viewport height for iOS Safari */
        min-height: 100vh;
        min-height: 100dvh;
        max-height: none;
        border: none;
        overflow-y: visible;
        /* Add bottom padding to clear iOS Safari browser controls */
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 20px));
        overscroll-behavior: contain;
    }

    .modal-header {
        /* Add top padding for iOS PWA status bar */
        padding-top: calc(var(--space-5) + env(safe-area-inset-top, 0px));
    }

    .modal-header h2 {
        font-size: 1.5rem;
    }

    /* Hide full text, show + only on mobile for Add Person button */
    .button-small .add-person-text {
        display: none;
    }
    .button-small .add-person-plus {
        display: inline;
    }

    .toast {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .price {
        font-size: 2rem;
    }
}

/* ===== ADMIN PANEL STYLES - WELLNESS REDESIGN ===== */

/* Admin view needs full width for all tabs */
#admin-view {
    max-width: 100%;
    width: 100%;
    padding: 0 var(--space-4);
}

/* Admin Tabs - Refined Wellness Aesthetic */
.admin-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1);
    border-bottom: none;
    margin-bottom: var(--space-6);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0;
    backdrop-filter: blur(8px);
    width: 100%;
    padding: var(--space-2);
}

.admin-tabs .tab-btn {
    background: none;
    border: none;
    padding: var(--space-4) var(--space-5);
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--font-body);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.admin-tabs .tab-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--sage-green), var(--warm-terracotta));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.admin-tabs .tab-btn:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.08);
}

.admin-tabs .tab-btn.active {
    color: #ffffff;
    background: linear-gradient(to bottom, transparent, rgba(139, 157, 131, 0.15));
}

.admin-tabs .tab-btn.active::before {
    transform: scaleX(1);
}

/* Customer List View */
.admin-customers-view {
    max-width: 1200px;
    margin: 0 auto;
}

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-family: var(--font-body);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;
    color: var(--charcoal);
}

.search-bar input::placeholder {
    color: var(--slate);
    opacity: 0.7;
}

.search-bar input:focus {
    outline: none;
    border-color: var(--sage-green);
    background: white;
    box-shadow: 0 0 0 4px rgba(139, 157, 131, 0.15);
    transform: translateY(-1px);
}

.customer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    margin-bottom: var(--space-4);
    box-shadow: none;
    border: 2px solid rgba(0, 95, 242, 0.3);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.customer-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--sage-green), var(--deep-ocean));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.customer-row:hover::before {
    opacity: 1;
}

.customer-row:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 95, 242, 0.2);
    border-color: #005FF2;
}

.customer-info {
    flex: 1;
}

.customer-name {
    font-size: 1.125rem;
    font-weight: 600;
    font-family: var(--font-heading);
    color: #FFFFFF;
    margin-bottom: var(--space-1);
}

.customer-email {
    font-size: 0.875rem;
    color: #9CA3AF;
    margin-bottom: var(--space-1);
}

.customer-phone {
    font-size: 0.875rem;
    color: #9CA3AF;
}

.customer-stats {
    display: flex;
    gap: var(--space-7);
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-heading);
    color: #60A5FA;
}

.stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--slate);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Customer Detail View */
.customer-detail-view {
    max-width: 1000px;
    margin: 0 auto;
}

.btn-back {
    background: rgba(0, 95, 242, 0.15);
    color: #60A5FA;
    border: 1px solid rgba(0, 95, 242, 0.3);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s;
}

.btn-back:hover {
    background: rgba(0, 95, 242, 0.25);
    border-color: #005FF2;
}

.customer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.customer-header h3 {
    font-size: 28px;
    color: #FFFFFF;
    font-family: var(--font-heading);
    margin: 0;
}

.btn-small {
    background: #005FF2;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-small:hover {
    background: #0053e6;
    transform: translateY(-1px);
}

.btn-small.btn-danger {
    background: #ef4444;
}

.btn-small.btn-danger:hover {
    background: #dc2626;
}

/* Owned Punch Cards List in Manage User Modal */
.owned-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.owned-card-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(14, 52, 94, 0.5);
    border: 1px solid rgba(0, 95, 242, 0.25);
    border-radius: 10px;
    padding: 14px 16px;
    transition: all 0.3s ease;
}

.owned-card-item:hover {
    background: rgba(14, 52, 94, 0.7);
    border-color: rgba(0, 95, 242, 0.4);
}

.owned-card-item.expired {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

.owned-card-item.archived {
    opacity: 0.5;
    border-color: rgba(107, 114, 128, 0.3);
}

.owned-card-info {
    flex: 1;
    min-width: 0;
}

.owned-card-title {
    font-weight: 600;
    color: #E5E7EB;
    font-size: 15px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owned-card-sessions {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #9CA3AF;
}

.owned-card-sessions .sessions-count {
    font-weight: 700;
    color: #60A5FA;
    font-size: 16px;
}

.owned-card-sessions .sessions-divider {
    color: #6B7280;
}

.owned-card-sessions .sessions-total {
    color: #9CA3AF;
}

.owned-card-sessions .sessions-label {
    margin-left: 4px;
    color: #6B7280;
}

.card-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

.card-status-badge.expired {
    background: rgba(239, 68, 68, 0.2);
    color: #F87171;
}

.card-status-badge.archived {
    background: rgba(107, 114, 128, 0.2);
    color: #9CA3AF;
}

.btn-view-card {
    flex-shrink: 0;
    padding: 8px 14px !important;
    font-size: 13px !important;
}

.btn-view-card i {
    margin-right: 4px !important;
}

.no-cards-message {
    color: #6B7280;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Responsive adjustments for owned cards */
@media (max-width: 480px) {
    .owned-card-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .btn-view-card {
        width: 100%;
        text-align: center;
    }
}

/* Admin card view (when admin views a customer's card without holder access) */
.admin-card-view {
    margin-bottom: 20px;
}

.card-owner-info {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(14, 52, 94, 0.5);
    border: 1px solid rgba(0, 95, 242, 0.25);
    border-radius: 10px;
    padding: 16px 20px;
    color: #E5E7EB;
    font-size: 15px;
}

.card-owner-info i {
    color: #60A5FA;
    font-size: 18px;
}

.card-owner-info strong {
    color: #60A5FA;
}

.admin-manage-card-btn {
    margin-top: 12px;
    width: 100%;
}

/* Highlight animation for scrolling to specific card */
.highlight-card {
    animation: highlightPulse 2s ease-out;
}

@keyframes highlightPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(96, 165, 250, 0);
    }
    20% {
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.6);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(96, 165, 250, 0.3);
    }
}

.customer-info-box {
    background: rgba(14, 52, 94, 0.6);
    border: 1px solid rgba(0, 95, 242, 0.2);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 30px;
    display: grid;
    gap: 10px;
}

.customer-info-box div {
    font-size: 15px;
    color: #E5E7EB;
}

.customer-info-box strong {
    color: #60A5FA;
}

.cards-section {
    margin-top: 30px;
}

.cards-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cards-section-header h4 {
    margin: 0;
}

.cards-section h4 {
    font-size: 20px;
    color: #FFFFFF;
    font-family: var(--font-heading);
}

.card-detail {
    background: rgba(14, 52, 94, 0.6);
    border: 1px solid rgba(0, 95, 242, 0.2);
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg,
        var(--sage-green) 0%,
        var(--deep-ocean) 100%
    );
    padding: var(--space-4) var(--space-5);
    color: white;
}

.card-header h4 {
    margin: 0;
    font-size: 1.125rem;
    font-family: var(--font-heading);
    font-weight: 600;
}

.card-status {
    background: rgba(255,255,255,0.2);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
}

.card-status.status-active {
    background: #10b981;
}

.card-status.status-completed {
    background: #6b7280;
}

.card-status.status-expired {
    background: #ef4444;
}

.card-body {
    padding: 20px;
    background: rgba(4, 27, 53, 0.4);
}

.card-stat {
    margin-bottom: 12px;
    font-size: 15px;
    color: #E5E7EB;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-stat strong {
    color: #60A5FA;
}

.card-holders {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 95, 242, 0.2);
}

.card-holders h5 {
    font-size: 14px;
    color: #9CA3AF;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.holder-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    background: rgba(4, 27, 53, 0.6);
    border: 1px solid rgba(0, 95, 242, 0.15);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: #E5E7EB;
    gap: 10px;
}

.holder-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.holder-item .revoked {
    color: #ef4444;
    font-weight: 600;
    margin-left: 10px;
}

.holder-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    width: 100%;
}

.badge-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.badge-info {
    background: #dbeafe !important;
    color: #1e40af !important;
}

.badge-success {
    background: #d1fae5 !important;
    color: #065f46 !important;
}

/* Card Redemptions Section */
.card-redemptions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 95, 242, 0.2);
}

.redemption-header-section h5 {
    font-size: 14px;
    color: #9CA3AF;
    text-transform: uppercase;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.redemption-search-input {
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(0, 95, 242, 0.3);
    background: rgba(4, 27, 53, 0.6);
    color: #FFFFFF;
    border-radius: 6px;
    width: 100%;
    max-width: 400px;
    margin-top: 0.5rem;
    font-size: 14px;
}

.redemption-search-input::placeholder {
    color: #9CA3AF;
}

.redemption-search-input:focus {
    outline: none;
    border-color: #005FF2;
    box-shadow: 0 0 0 2px rgba(0, 95, 242, 0.2);
}

.redemptions-list {
    max-height: 600px;
    overflow-y: auto;
    margin-top: 1rem;
}

.no-redemptions,
.no-cards {
    color: #9CA3AF;
    font-style: italic;
}

.btn-load-more {
    margin-top: 1rem;
    width: 100%;
}

/* Redemption Items */
.redemption-item {
    border-bottom: 1px solid rgba(0, 95, 242, 0.15);
    padding: 1rem 0;
}

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

.redemption-item.undone {
    opacity: 0.6;
}

.redemption-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.redemption-date {
    font-weight: 600;
    color: #FFFFFF;
}

.redemption-sessions {
    color: #60A5FA;
    font-weight: 500;
}

.badge-undo {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

.redemption-details {
    color: #9CA3AF;
    font-size: 0.9rem;
}

.redemption-details strong {
    color: #E5E7EB;
}

.redemption-details .staff-notes {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: rgba(4, 27, 53, 0.6);
    border: 1px solid rgba(0, 95, 242, 0.15);
    border-radius: 4px;
}

.redemption-details .undo-reason {
    margin-top: 0.5rem;
    color: #ef4444;
}

/* Clickable Redemption Header Section */
.redemption-header-section.clickable {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0, 95, 242, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.redemption-header-section.clickable:hover {
    background: rgba(0, 95, 242, 0.15);
}

.redemption-header-section.clickable h5 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.redemption-header-section.clickable h5 i {
    color: #60A5FA;
}

.redemption-count {
    color: #9CA3AF;
    font-size: 0.9rem;
}

.redemption-header-section.clickable > i:last-child {
    color: #60A5FA;
    font-size: 0.8rem;
}

/* Redemption History Modal */
.redemption-history-modal {
    max-height: 70vh;
    overflow-y: auto;
}

.redemption-history-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.redemption-history-stats .stat-box {
    flex: 1;
    padding: 16px;
    background: rgba(0, 95, 242, 0.1);
    border-radius: 8px;
    text-align: center;
}

.redemption-history-stats .stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #60A5FA;
}

.redemption-history-stats .stat-label {
    display: block;
    font-size: 12px;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.redemption-history-search {
    margin-bottom: 20px;
}

.redemption-history-search .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.redemption-history-search .search-input-wrapper > i:first-child {
    position: absolute;
    left: 12px;
    color: #9CA3AF;
}

.redemption-history-search input {
    width: 100%;
    padding: 12px 40px;
    background: rgba(4, 27, 53, 0.6);
    border: 1px solid rgba(0, 95, 242, 0.3);
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
}

.redemption-history-search input::placeholder {
    color: #9CA3AF;
}

.redemption-history-search input:focus {
    outline: none;
    border-color: #005FF2;
    box-shadow: 0 0 0 2px rgba(0, 95, 242, 0.2);
}

.redemption-history-search .search-clear {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: #9CA3AF;
    cursor: pointer;
    padding: 8px;
}

.redemption-history-search .search-clear:hover {
    color: #FFFFFF;
}

.redemption-history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.redemption-history-item {
    background: rgba(4, 27, 53, 0.5);
    border: 1px solid rgba(0, 95, 242, 0.2);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s ease;
}

.redemption-history-item:hover {
    border-color: rgba(0, 95, 242, 0.4);
}

.redemption-history-item.undone {
    opacity: 0.6;
    border-color: rgba(239, 68, 68, 0.3);
}

.redemption-history-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.redemption-history-left {
    flex: 1;
}

.redemption-history-date {
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 6px;
}

.redemption-history-customer,
.redemption-history-staff {
    font-size: 0.9rem;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.redemption-history-customer i,
.redemption-history-staff i {
    width: 14px;
    color: #60A5FA;
}

.redemption-history-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.redemption-history-time {
    font-size: 1.1rem;
    font-weight: 600;
    color: #60A5FA;
}

.redemption-history-notes {
    margin-top: 12px;
    padding: 10px;
    background: rgba(0, 95, 242, 0.08);
    border-radius: 6px;
    font-size: 0.9rem;
    color: #E5E7EB;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.redemption-history-notes i {
    color: #60A5FA;
    margin-top: 2px;
}

.redemption-history-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.redemption-history-undo-info {
    margin-top: 12px;
    text-align: right;
    color: #ef4444;
}

.no-redemptions-message {
    text-align: center;
    padding: 40px 20px;
    color: #9CA3AF;
    font-style: italic;
}

.badge-warning {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ===== Phone Actions (Customer Detail) ===== */
.phone-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.phone-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 95, 242, 0.3);
    background: rgba(0, 95, 242, 0.1);
    color: #005FF2;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: rgba(0, 95, 242, 0.2);
    border-color: #005FF2;
    transform: scale(1.1);
}

.btn-icon i {
    font-size: 14px;
    margin-right: 0 !important;
}

/* Danger variant for icon buttons */
.btn-icon.btn-icon-danger {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.btn-icon.btn-icon-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* Small variant for inline phone buttons */
.btn-icon.btn-icon-small {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

/* Action buttons container */
.action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Mobile labels for users table - hidden on desktop */
.admin-table.users-table .mobile-label {
    display: none;
}

/* Mobile contact actions (call/text buttons) - hidden on desktop */
.admin-table.users-table .mobile-contact-actions {
    display: none;
}

/* Phone with actions container (for call/SMS icons before phone number) */
.admin-table.users-table .phone-with-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Admin Call Settings ===== */
.admin-call-settings {
    margin-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
}

.admin-call-settings h3 {
    color: #10B981;
}

.admin-call-settings h3 i {
    margin-right: 8px;
}

.field-hint {
    color: #9CA3AF;
    font-size: 0.85rem;
    margin: -8px 0 16px 0;
}

.checkbox-row {
    margin: 20px 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 500;
    color: #f2f2f2;
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: #005FF2;
    border-color: #005FF2;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-description {
    color: #9CA3AF;
    font-size: 0.85rem;
    margin: 8px 0 0 32px;
}

.modal-note {
    color: #9CA3AF;
    font-size: 0.9rem;
    margin-top: 12px;
}

/* ===== Customers Header ===== */
.customers-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.customers-header .search-bar {
    flex: 1;
    margin-bottom: 0;
}

/* ===== Archived Users ===== */
.archived-user-row {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.archived-user-row:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
}

.archived-user-info {
    flex: 1;
}

.archived-user-name {
    font-weight: 600;
    font-size: 1rem;
    color: #f2f2f2;
    margin-bottom: 4px;
}

.archived-user-email {
    color: #9CA3AF;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.archived-user-meta {
    color: #6B7280;
    font-size: 0.8rem;
}

.archived-user-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.btn-success {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.btn-success:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: #10B981;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: #ef4444;
}

.badge-admin {
    background: rgba(139, 92, 246, 0.2);
    color: #8B5CF6;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

@media (max-width: 600px) {
    .customers-header {
        flex-direction: column;
        align-items: stretch;
    }

    .archived-user-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .archived-user-actions {
        width: 100%;
        margin-top: 12px;
    }

    .archived-user-actions button {
        flex: 1;
    }
}

/* Back to Top Button */
.btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #005FF2;
    color: white;
    border: none;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 95, 242, 0.4);
    transition: all 0.3s ease;
    z-index: 1000;
}

.btn-back-to-top:hover {
    background: #0053e6;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 95, 242, 0.5);
}

.btn-back-to-top.visible {
    display: flex;
}

.btn-back-to-top i {
    font-size: 18px;
    margin-right: 0 !important;
}

/* QR Scanner View */
.scanner-view {
    max-width: 800px;
    margin: 0 auto;
}

/* QR Scanner - old html5-qrcode styles (legacy) */
#qr-reader {
    border: 2px solid rgba(0, 95, 242, 0.3);
    border-radius: 12px;
    overflow: hidden;
}

#qr-reader video {
    border-radius: 10px;
}

/* QR Scanner - nimiq/qr-scanner video styles */
.qr-video-container,
#qr-video-container,
#staff-qr-video-container {
    position: relative;
    border: 2px dashed var(--primary);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(4, 27, 53, 0.5);
    min-height: 300px;
}

#qr-video,
#staff-qr-video {
    width: 100%;
    display: block;
    border-radius: 10px;
}

/* QR Scanner overlay styling (nimiq/qr-scanner) */
.qr-video-container .scan-region-highlight,
#qr-video-container .scan-region-highlight,
#staff-qr-video-container .scan-region-highlight {
    border-radius: 8px;
}

.qr-video-container .scan-region-highlight-svg,
#qr-video-container .scan-region-highlight-svg,
#staff-qr-video-container .scan-region-highlight-svg {
    stroke: var(--accent) !important;
}

.qr-video-container .code-outline-highlight,
#qr-video-container .code-outline-highlight,
#staff-qr-video-container .code-outline-highlight {
    stroke: var(--success) !important;
}

.scanned-card-details {
    background: rgba(14, 52, 94, 0.8);
    border: 1px solid rgba(0, 95, 242, 0.2);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    margin-top: 20px;
}

.scanned-card-details h3 {
    font-size: 24px;
    color: #28de72;
    margin-bottom: 20px;
    text-align: center;
}

.card-info {
    background: rgba(4, 27, 53, 0.6);
    border: 1px solid rgba(0, 95, 242, 0.15);
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.card-info div {
    margin-bottom: 10px;
    font-size: 15px;
    color: #E5E7EB;
}

.sessions-display {
    font-size: 18px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 2px solid rgba(0, 95, 242, 0.2);
    color: #E5E7EB;
}

.sessions-big {
    font-size: 36px;
    font-weight: 700;
    color: #60A5FA;
    margin: 0 10px;
}

.redeem-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.redeem-form label {
    font-weight: 600;
    color: #E5E7EB;
    margin-bottom: -10px;
}

.redeem-form select,
.redeem-form textarea {
    padding: 12px;
    border: 1px solid rgba(0, 95, 242, 0.3);
    background: rgba(4, 27, 53, 0.6);
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 15px;
}

.redeem-form select:focus,
.redeem-form textarea:focus {
    outline: none;
    border-color: #667eea;
}

.btn-redeem {
    background: #10b981 !important;
    font-size: 18px;
    padding: 15px;
}

.btn-redeem:hover {
    background: #059669 !important;
}

.btn-secondary {
    background: #6b7280;
}

.btn-secondary:hover {
    background: #4b5563;
}

/* Scanner Redemption UI */
.redeem-section {
    margin-bottom: 16px;
}

.redeem-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #E5E7EB;
}

.session-buttons,
.extra-time-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.session-btn,
.extra-time-btn {
    padding: 12px 20px;
    border: 2px solid rgba(0, 95, 242, 0.3);
    background: rgba(4, 27, 53, 0.6);
    color: #E5E7EB;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 50px;
    text-align: center;
}

.session-btn:hover,
.extra-time-btn:hover {
    background: rgba(0, 95, 242, 0.2);
    border-color: rgba(0, 95, 242, 0.5);
}

.session-btn.selected,
.extra-time-btn.selected {
    background: rgba(16, 185, 129, 0.3);
    border-color: #10b981;
    color: #10b981;
}

.redeem-summary {
    background: rgba(4, 27, 53, 0.6);
    border: 1px solid rgba(0, 95, 242, 0.2);
    padding: 12px 16px;
    border-radius: 8px;
    color: #E5E7EB;
    font-size: 15px;
}

.minutes-detail {
    font-size: 14px;
    color: #9CA3AF;
    margin-left: 8px;
}

.success-state {
    text-align: center;
    padding: 40px;
}

.success-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.success-state h3 {
    color: #10b981;
    font-size: 28px;
    margin-bottom: 15px;
}

.success-state p {
    font-size: 18px;
    color: #4b5563;
    margin: 10px 0;
}

.error-state {
    text-align: center;
    padding: 40px;
    color: #ef4444;
}

.error-state p {
    font-size: 16px;
    margin: 10px 0;
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
    font-size: 18px;
}

.spinner {
    border: 4px solid #f3f4f6;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Settings View */
.settings-view {
    max-width: 600px;
    margin: 0 auto;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .admin-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-1);
        padding: var(--space-2);
    }

    .admin-tabs .tab-btn {
        padding: 10px 14px;
        font-size: 13px;
        white-space: nowrap;
        flex: 0 0 auto;
    }

    .customer-row {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 12px;
    }

    .customer-info {
        flex: 1;
        min-width: 0;
    }

    .customer-stats {
        flex-shrink: 0;
        gap: var(--space-3);
    }

    .customer-name {
        font-size: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .customer-email,
    .customer-phone {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .stat-value {
        font-size: 18px;
    }

    .stat-label {
        font-size: 0.65rem;
    }

    .customer-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .customer-header h3 {
        font-size: 22px;
    }

    .card-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .card-stat {
        flex-wrap: wrap;
    }

    .holder-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .scanned-card-details {
        padding: 20px;
    }

    .sessions-big {
        font-size: 28px;
    }

    .redeem-form select,
    .redeem-form textarea,
    .btn-redeem {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .admin-tabs .tab-btn {
        padding: 8px 10px;
        font-size: 12px;
    }

    .customer-row {
        padding: 10px;
        gap: 8px;
    }

    .customer-stats {
        gap: var(--space-2);
    }

    .customer-name {
        font-size: 14px;
    }

    .customer-email,
    .customer-phone {
        font-size: 11px;
    }

    .stat-value {
        font-size: 16px;
    }

    .stat-label {
        font-size: 0.6rem;
    }

    .customer-header h3 {
        font-size: 20px;
    }

    .sessions-big {
        font-size: 24px;
    }
}

/* Date Input Styling */
input[type="date"] {
    position: relative;
    color: var(--text-primary);
    background: rgba(4, 27, 53, 0.5);
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    letter-spacing: 0.02em;
}

input[type="date"]:hover {
    border-color: var(--primary);
    background: rgba(4, 27, 53, 0.65);
}

input[type="date"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 95, 242, 0.1);
    background: rgba(4, 27, 53, 0.7);
}

/* Calendar icon styling */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(0.7) sepia(1) saturate(5) hue-rotate(195deg) brightness(1.1);
    opacity: 0.9;
    transition: all 0.2s;
    width: 20px;
    height: 20px;
    margin-left: 8px;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(0.5) sepia(1) saturate(5) hue-rotate(310deg) brightness(1.3);
    opacity: 1;
    transform: scale(1.1);
}

/* Style the date placeholder text */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--text-primary);
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

/* Font Awesome Icon Spacing — targeted, not global */
/* Only add margin where icons appear inline next to text */
.nav-links a i[class*="fa-"] { margin-right: 0.25rem; }
button:not(.close-btn):not(.btn-back-to-top):not(.btn-icon) i[class*="fa-"],
.button:not(.btn-icon) i[class*="fa-"] { margin-right: 0.5rem; }
h1 i[class*="fa-"], h2 i[class*="fa-"], h3 i[class*="fa-"],
h4 i[class*="fa-"], h5 i[class*="fa-"], h6 i[class*="fa-"] { margin-right: 0.5rem; }
label i[class*="fa-"], span i[class*="fa-"] { margin-right: 0.5rem; }
small i[class*="fa-"] { margin-right: 0.4rem; }

/* Coupon Apply Button Styling */
.coupon-input-row button,
.coupon-input-row .button-small {
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.coupon-input button:hover,
.coupon-input .button-small:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    transform: translateY(-2px);
    box-shadow: none;
}

.coupon-input button:active,
.coupon-input .button-small:active {
    transform: translateY(0);
}

/* Custom Date Picker Styling */
.custom-date-picker-wrapper {
    position: relative;
}

.custom-date-picker-wrapper input {
    padding-right: 45px;
}

.custom-date-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
    font-size: 18px;
    pointer-events: none;
    transition: color 0.2s;
}

.custom-date-picker-wrapper:hover .custom-date-icon {
    color: var(--secondary);
}

.custom-datepicker {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    width: 280px;
    background: var(--navy-light);
    border: 2px solid var(--primary);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.datepicker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 95, 242, 0.2);
}

.datepicker-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.datepicker-nav {
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s;
}

.datepicker-nav:hover {
    background: rgba(0, 95, 242, 0.1);
    color: var(--secondary);
}

.datepicker-days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.datepicker-days-header div {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 8px 0;
}

.datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.datepicker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    transition: all 0.2s;
    background: rgba(4, 27, 53, 0.3);
    border: 1px solid transparent;
}

.datepicker-day:hover:not(.disabled) {
    background: var(--secondary);
    color: white;
    transform: scale(1.05);
    border-color: var(--secondary);
}

.datepicker-day.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.3;
}

.datepicker-day.today {
    border-color: var(--primary);
    font-weight: 700;
}

.datepicker-day.selected {
    background: var(--primary);
    color: white;
    font-weight: 700;
    border-color: var(--primary);
}

.datepicker-day.selected:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .custom-datepicker {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 340px;
    }

    .datepicker-day {
        font-size: 1rem;
        min-height: 44px;
    }

    .datepicker-nav {
        padding: 12px 16px;
        font-size: 20px;
    }
}

/* Square Payment Form Styling */
#square-payment-container {
    background: #1e3a5f !important;
    border: 2px solid #4a90e2 !important;
    border-radius: 8px !important;
    padding: 1rem !important;
    min-height: 200px !important;
}

/* Try to style Square iframe content (limited by iframe restrictions) */
#square-payment-container iframe {
    background: transparent !important;
}

/* Style any text elements that might be outside the iframe */
#square-payment-container .sq-error-message,
#square-payment-container .sq-validation-error,
#square-payment-container [class*="error"],
#square-payment-container [class*="message"] {
    color: #e5e7eb !important;
    font-size: 14px !important;
}

/* ============================================ */
/* Quantity Selector & Price Breakdown Styles */
/* ============================================ */

/* Quantity Selector */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.qty-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--primary);
    background: transparent;
    color: var(--primary);
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.qty-btn:active {
    transform: scale(0.95);
}

#purchase-quantity,
#add-sessions-qty-input {
    width: 80px;
    height: 40px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    background: var(--navy-light);
    color: var(--text-primary);
    -moz-appearance: textfield;
}

/* Hide native number input spinners */
#purchase-quantity::-webkit-outer-spin-button,
#purchase-quantity::-webkit-inner-spin-button,
#add-sessions-qty-input::-webkit-outer-spin-button,
#add-sessions-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Price Breakdown */
.price-breakdown {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--background-card);
    border-radius: 10px;
    border: 1px solid var(--gray-200);
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 1rem;
    color: var(--text-primary);
}

.price-row.subtotal {
    border-top: 1px solid var(--gray-200);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.price-row.discount {
    color: var(--success);
}

.price-row.total {
    border-top: 2px solid var(--primary);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-size: 1.25rem;
    font-weight: bold;
}

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

/* Coupon Explanation */
.coupon-note {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(0, 108, 255, 0.1);
    border-left: 4px solid var(--info);
    border-radius: 4px;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.coupon-note i {
    margin-right: 0.5rem;
    color: var(--info);
}

/* Checkbox Label */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.help-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Mobile Responsive for Quantity Selector */
@media (max-width: 768px) {
    .quantity-selector {
        justify-content: center;
    }

    .qty-btn {
        width: 48px;
        height: 48px;
        font-size: 1.75rem;
    }

    #purchase-quantity {
        width: 90px;
        font-size: 1.5rem;
    }

    .price-breakdown {
        padding: 0.875rem;
    }

    .price-row {
        font-size: 0.95rem;
    }

    .price-row.total {
        font-size: 1.125rem;
    }
}

/* ============================================
   Settings Page - Notification Preferences
   ============================================ */

.notification-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (max-width: 480px) {
    .notification-options {
        grid-template-columns: 1fr;
    }
}

.radio-card {
    display: block;
    cursor: pointer;
    background: rgba(4, 27, 53, 0.5);
    border: 2px solid rgba(0, 95, 242, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    transition: all 0.2s ease;
}

.radio-card:hover {
    border-color: var(--primary);
    background: rgba(0, 95, 242, 0.1);
}

.radio-card.selected {
    border-color: var(--primary);
    background: rgba(0, 95, 242, 0.15);
}

.radio-card input {
    display: none;
}

.radio-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--text-secondary);
}

.radio-card.selected .radio-content {
    color: var(--text-primary);
}

.radio-content i {
    font-size: 1.25rem;
    color: var(--primary);
}

.radio-card.selected .radio-content i {
    color: var(--secondary);
}

.radio-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.radio-content small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.settings-section {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.settings-section h3 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--card-border);
}

.settings-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
    line-height: 1.5;
}

.form-label {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-1);
}

.form-value {
    color: var(--text-primary);
    font-size: 1rem;
    padding: var(--space-2) 0;
}

.sms-note {
    color: var(--info);
    font-size: 0.85rem;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: rgba(0, 108, 255, 0.1);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--info);
}

.sms-note i {
    margin-right: var(--space-2);
}

.settings-actions {
    margin-top: var(--space-5);
    text-align: center;
}

.settings-actions .button {
    min-width: 200px;
}

.settings-input {
    width: 100%;
    background: rgba(4, 27, 53, 0.5);
    border: 1px solid rgba(0, 95, 242, 0.3);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s ease;
}

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

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 480px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

/* SMS Consent Modal */
.sms-consent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sms-consent-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.sms-consent-list li i {
    color: var(--primary);
    width: 20px;
    text-align: center;
}

.sms-consent-buttons {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.sms-consent-buttons .button {
    flex: 1;
}

.button-success {
    background: var(--success);
    color: white;
}

.button-success:hover {
    background: #22c55e;
}

/* ===================================
   TWILIO ADMIN PANEL
   =================================== */

/* Twilio Sub-menu */
.twilio-submenu {
    display: flex;
    gap: 4px;
    padding: 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}
.twilio-submenu::-webkit-scrollbar { display: none; }

.submenu-btn {
    padding: 6px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
}
.submenu-btn i { margin: 0 !important; font-size: 0.7rem !important; }

.submenu-btn.active {
    background: var(--secondary);
    color: #fff;
}

/* ===== Updates Tab — Daily Schedule (class names match mockup exactly) ===== */

#twilio-content .updates-container {
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* Date nav row */
#twilio-content .date-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 16px 0 6px !important;
}

#twilio-content .date-nav h2 {
    font-family: var(--font-heading) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 !important;
    text-align: center !important;
}
#twilio-content .date-nav h2 i {
    margin: 0 4px 0 0 !important;
    font-size: 0.85rem !important;
    opacity: 0.5;
}

#twilio-content .nav-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    font-size: 11px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
#twilio-content .nav-btn i { margin: 0 !important; }

#twilio-content .today-btn {
    background: var(--secondary) !important;
    color: #fff !important;
    border: none !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    cursor: pointer;
    flex-shrink: 0 !important;
}

/* Summary pills row */
#twilio-content .summary-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 0 16px !important;
}

#twilio-content .pill {
    padding: 4px 12px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}
#twilio-content .pill i { margin: 0 3px 0 0 !important; font-size: 10px !important; }
#twilio-content .pill-count { background: rgba(45, 95, 93, 0.25) !important; color: var(--secondary) !important; }
#twilio-content .pill-punch { background: rgba(212, 165, 154, 0.2) !important; color: var(--warm-terracotta) !important; }

/* ===== Appointment Cards — exact mockup styles ===== */

#twilio-content .appointments {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#twilio-content .appt-card {
    background: rgba(14, 52, 94, 0.6) !important;
    border: 1px solid rgba(0, 95, 242, 0.3) !important;
    border-left: 3px solid #005FF2 !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
    transition: all 0.2s ease;
}
#twilio-content .appt-card:hover { border-color: rgba(0, 95, 242, 0.5) !important; }
#twilio-content .appt-card.punch { border-left-color: #D4A59A !important; }

#twilio-content .appt-card-header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 4px !important; }
#twilio-content .appt-card-name { font-size: 1.05rem !important; font-weight: 700 !important; color: #0cb4ce !important; cursor: pointer; letter-spacing: 0.3px; }
#twilio-content .appt-card-time { font-family: 'JetBrains Mono', monospace !important; font-size: 0.85rem !important; font-weight: 600 !important; color: #E5E7EB !important; }

#twilio-content .appt-card-desc { color: #9ca3af !important; font-size: 0.85rem !important; margin-bottom: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }

#twilio-content .appt-card-body { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-bottom: 12px !important; }
#twilio-content .appt-card-row { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.9rem !important; }
#twilio-content .appt-card-label { color: #9ca3af !important; display: flex !important; align-items: center !important; gap: 6px !important; }
#twilio-content .appt-card-label i { width: 16px !important; text-align: center !important; color: #6b7280 !important; margin: 0 !important; }
#twilio-content .appt-card-value { color: #e5e7eb !important; text-align: right !important; }
#twilio-content .appt-card-value .punch-highlight { color: #D4A59A !important; font-weight: 600 !important; }

#twilio-content .appt-card-actions { display: flex !important; gap: 8px !important; padding-top: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }
#twilio-content .appt-card-actions a,
#twilio-content .appt-card-actions button { flex: 1 !important; padding: 10px 12px !important; font-size: 0.85rem !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; border-radius: 8px !important; cursor: pointer; text-decoration: none !important; border: none; }
#twilio-content .appt-card-actions a i,
#twilio-content .appt-card-actions button i { margin: 0 !important; font-size: 14px !important; }
#twilio-content .btn-call-action { background: rgba(0, 95, 242, 0.15) !important; color: #005FF2 !important; border: 1px solid rgba(0, 95, 242, 0.3) !important; }
#twilio-content .btn-text-action { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }

/* ===== CONTACT MODAL — exact copy from mockup, scoped under #modal ===== */

#modal .modal-service { color: #9ca3af !important; font-size: 0.82rem !important; margin-bottom: 16px !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; }

#modal .modal-body-rows { display: flex !important; flex-direction: column !important; gap: 10px !important; margin-bottom: 16px !important; }
#modal .modal-row { display: flex !important; justify-content: space-between !important; align-items: center !important; font-size: 0.9rem !important; }
#modal .modal-row-label { color: #9ca3af !important; display: flex !important; align-items: center !important; gap: 6px !important; }
#modal .modal-row-label i { width: 16px !important; text-align: center !important; color: #6b7280 !important; margin: 0 !important; }
#modal .modal-row-value { color: #e5e7eb !important; font-weight: 500 !important; }

#modal .modal-punch-card { background: rgba(212, 165, 154, 0.08) !important; border: 1px solid rgba(212, 165, 154, 0.2) !important; border-radius: 12px !important; padding: 14px !important; margin-bottom: 16px !important; }
#modal .modal-punch-header { color: #D4A59A !important; font-weight: 700 !important; font-size: 0.82rem !important; margin-bottom: 10px !important; display: flex !important; align-items: center !important; gap: 6px !important; }
#modal .modal-punch-header i { margin: 0 !important; }

#modal .sessions-bar { height: 5px !important; background: rgba(255, 255, 255, 0.08) !important; border-radius: 3px !important; overflow: hidden !important; margin-bottom: 6px !important; }
#modal .sessions-fill { height: 100% !important; background: #D4A59A !important; border-radius: 3px !important; }
#modal .sessions-text { display: flex !important; justify-content: space-between !important; font-size: 0.75rem !important; color: #9ca3af !important; }
#modal .sessions-text strong { color: #fff !important; }

#modal .modal-actions { display: flex !important; gap: 8px !important; padding-top: 14px !important; border-top: 1px solid rgba(255, 255, 255, 0.1) !important; }
#modal .modal-actions a,
#modal .modal-actions button { flex: 1 !important; padding: 12px !important; font-size: 0.9rem !important; font-weight: 600 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; border-radius: 8px !important; cursor: pointer; text-decoration: none !important; border: none; color: #fff; }
#modal .modal-actions a i,
#modal .modal-actions button i { margin: 0 !important; }
#modal .modal-btn-call { background: rgba(0, 95, 242, 0.15) !important; color: #005FF2 !important; border: 1px solid rgba(0, 95, 242, 0.3) !important; }
#modal .modal-btn-text { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }

/* Active nav link styling */
.nav-links a.active {
    color: var(--secondary);
}

.nav-links a.active::after {
    transform: scaleX(1);
    background: var(--secondary);
}

/* SMS Inbox Layout */
.sms-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
    gap: var(--space-3);
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.sms-header h3 {
    margin: 0;
    color: var(--text-primary);
}

.sms-inbox h3 {
    margin-bottom: var(--space-4);
    color: var(--text-primary);
}

.inbox-search {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    align-items: flex-end;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.inbox-search .float-group {
    flex: 1;
    margin-bottom: 0;
}

.inbox-search .button {
    height: 48px;
    padding: 0 var(--space-4);
}

.inbox-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--space-4);
    height: calc(100vh - 420px);
    min-height: 400px;
    max-height: calc(100vh - 420px);
    max-width: 1000px;
    margin: 0 auto;
}

.conversations-list {
    background: rgba(14, 52, 94, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 95, 242, 0.3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.conversations-container {
    flex: 1;
    overflow-y: auto;
}

.conversation-item {
    padding: var(--space-4);
    border-bottom: 1px solid rgba(0, 95, 242, 0.2);
    cursor: pointer;
    transition: background 0.2s ease;
}

.conversation-item:hover {
    background: rgba(0, 95, 242, 0.1);
}

.conversation-item.active {
    background: rgba(0, 95, 242, 0.2);
    border-left: 3px solid var(--primary);
}

.conversation-item.unread {
    background: rgba(0, 95, 242, 0.15);
}

.conversation-item.unread .conversation-phone {
    font-weight: 700;
}

.conversation-phone {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.conversation-phone .unread-badge {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
}

.conversation-name {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-1);
}

.conversation-name-inline {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.conversation-preview {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

.load-more-section {
    padding: var(--space-3);
    text-align: center;
    border-top: 1px solid rgba(0, 95, 242, 0.2);
    box-sizing: border-box;
    max-width: 100%;
}

.load-more-section .button {
    display: block;
    width: auto;
    margin: var(--space-2) 0;
}

/* Chat Panel */
.chat-panel {
    background: rgba(14, 52, 94, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 95, 242, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.chat-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

.chat-placeholder i {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.chat-header {
    padding: var(--space-4);
    border-bottom: 1px solid rgba(0, 95, 242, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 95, 242, 0.1);
    border-radius: 12px 12px 0 0;
}

.chat-header-info h4 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1rem;
}

.chat-header-info span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: 0;
}

.message-bubble {
    max-width: 70%;
    padding: var(--space-3) var(--space-4);
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.4;
    /* Handle long URLs and unbroken strings */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.message-bubble.inbound {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    border-bottom-left-radius: 4px;
}

.message-bubble.outbound {
    align-self: flex-end;
    background: var(--primary);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}

.message-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Links in message bubbles */
.message-link {
    color: #90d5ff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.message-link:hover {
    color: #b8e4ff;
}

/* Links in outbound (blue) bubbles need different color */
.message-bubble.outbound .message-link {
    color: #ffffff;
    text-decoration: underline;
    opacity: 0.9;
}

.message-bubble.outbound .message-link:hover {
    opacity: 1;
}

.message-bubble.outbound .message-time {
    color: rgba(255, 255, 255, 0.7);
    text-align: right;
}

.chat-input {
    padding: var(--space-4);
    border-top: 1px solid rgba(0, 95, 242, 0.2);
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
}

.chat-input .float-group {
    flex: 1;
    margin-bottom: 0;
}

.chat-input .button {
    height: 48px;
    padding: 0 var(--space-4);
}

/* Communication Section */
.communication-section {
    max-width: 800px;
    margin: 0 auto;
}

.communication-section h3 {
    margin-bottom: var(--space-2);
    color: var(--text-primary);
}

.section-description {
    color: var(--text-muted);
    margin-bottom: var(--space-6);
}

.communication-form {
    background: rgba(14, 52, 94, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 95, 242, 0.3);
    padding: var(--space-5);
}

.recipient-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.recipient-count {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.char-counter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.segment-info {
    color: var(--primary);
}

.char-counter.warning {
    color: var(--warning);
}

.char-counter.warning .segment-info {
    color: var(--warning);
}

.form-actions {
    margin-top: var(--space-4);
    text-align: right;
}

.campaign-history {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(0, 95, 242, 0.2);
}

.campaign-history h4 {
    margin-bottom: var(--space-4);
    color: var(--text-secondary);
}

.campaign-item {
    background: rgba(4, 27, 53, 0.5);
    border: 1px solid rgba(0, 95, 242, 0.2);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.campaign-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.campaign-item-name {
    font-weight: 600;
    color: var(--text-primary);
}

.campaign-item-status {
    font-size: 0.8rem;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font-weight: 600;
}

.campaign-item-status.completed {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.campaign-item-status.sending {
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary);
}

.campaign-item-status.failed {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.campaign-item-stats {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.campaign-item-preview {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty states */
.empty-conversations,
.empty-campaigns {
    text-align: center;
    padding: var(--space-8);
    color: var(--text-muted);
}

.empty-conversations i,
.empty-campaigns i {
    font-size: 2.5rem;
    margin-bottom: var(--space-3);
    opacity: 0.5;
}

/* Mobile responsive */
@media (max-width: 768px) {
    /* SMS Inbox - full width on mobile */
    .sms-inbox {
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        display: block !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .sms-header {
        max-width: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: var(--space-3) !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Hide SMS subtitle on mobile */
    .sms-header h3 {
        display: none !important;
    }

    /* Make New Conversation button full width on mobile */
    .sms-header .button {
        width: 100% !important;
        margin: 0 0 var(--space-3) 0 !important;
    }

    .inbox-layout {
        display: block !important;
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }

    .conversations-list {
        height: auto !important;
        max-height: none !important;
        min-height: auto !important;
        overflow: visible !important;
        overflow-y: visible !important;
        width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        border-radius: 0 !important;
        border: none !important;
        flex: none !important;
        background: transparent !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .conversations-container {
        overflow: visible !important;
        overflow-y: visible !important;
        height: auto !important;
        flex: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Conversation items - full width with subtle dividers */
    .conversation-item {
        width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: var(--space-3) var(--space-4) !important;
        background: rgba(14, 52, 94, 0.4);
        border: none !important;
        border-bottom: 1px solid rgba(0, 95, 242, 0.15) !important;
        box-sizing: border-box !important;
    }

    .conversation-item:first-child {
        border-top: 1px solid rgba(0, 95, 242, 0.15) !important;
    }

    .conversation-item:hover,
    .conversation-item.active {
        background: rgba(0, 95, 242, 0.15);
    }

    /* Hide inline chat-panel on mobile - conversations open in modal */
    .chat-panel {
        display: none !important;
    }

    /* Twilio submenu - already horizontal, just ensure no wrapping */
    .twilio-submenu {
        flex-wrap: nowrap;
    }

    .submenu-btn {
        flex-shrink: 0;
    }

    /* Search bar - full width */
    .inbox-search {
        flex-direction: column;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: var(--space-3) var(--space-4) !important;
        gap: var(--space-2);
        box-sizing: border-box !important;
    }

    .inbox-search .button {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .inbox-search .float-group {
        width: 100%;
        min-width: 0;
    }

    .inbox-search .float-input {
        width: 100%;
        min-width: 0;
    }

    .recipient-actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Remove horizontal margins from all buttons in SMS inbox on mobile */
    .sms-inbox .button {
        margin-left: 0;
        margin-right: 0;
    }

    /* Hide Load More button on mobile - use infinite scroll instead */
    .load-more-section {
        display: none !important;
    }

    /* Infinite scroll loading indicator */
    .infinite-scroll-loader {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-4);
        color: var(--text-muted);
        font-size: 0.9rem;
    }

    .infinite-scroll-loader i {
        animation: spin 1s linear infinite;
    }

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

    /* End of conversations indicator */
    .conversations-end {
        text-align: center;
        padding: var(--space-4);
        color: var(--text-muted);
        font-size: 0.85rem;
        opacity: 0.7;
    }

    /* All Users mobile responsive fix - same approach as SMS inbox */
    .all-users-view {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    .all-users-view .search-bar {
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: var(--space-3) var(--space-4) !important;
    }

    .all-users-view .search-bar input,
    .all-users-view .search-bar button {
        width: 100% !important;
        margin: 0 !important;
    }

    .all-users-view .admin-table {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* SMS Conversation Modal - Dark themed for mobile */
.sms-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sms-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll when SMS modal is open */
body.sms-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
}

body.sms-modal-open .main-content {
    overflow: hidden !important;
}

.sms-modal-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 100%;
    margin: 0;
    width: 100%;
    background: var(--card-bg);
    border: none;
}

.sms-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(139, 157, 131, 0.2);
    flex-shrink: 0;
    padding-top: calc(var(--space-4) + env(safe-area-inset-top, 0px));
}

.sms-modal-header-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sms-modal-header-info h4 {
    color: var(--text-light);
    margin: 0;
    font-size: 1rem;
}

.sms-modal-header-info span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.sms-modal-close {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--space-2);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.sms-modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sms-modal-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    -webkit-overflow-scrolling: touch;
}

.sms-modal-input {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(139, 157, 131, 0.2);
    flex-shrink: 0;
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}

.sms-modal-input .float-group {
    flex: 1;
}

.sms-modal-input textarea {
    resize: none;
    max-height: 100px;
}

.sms-modal-input .button {
    align-self: flex-end;
    padding: var(--space-3) var(--space-4);
}

/* SMS Modal Mobile Enhancements */
@media (max-width: 768px) {
    .sms-modal-overlay {
        background: rgba(5, 15, 30, 0.96);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .sms-modal-header {
        padding: var(--space-3) var(--space-4);
        padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
        background: rgba(0, 0, 0, 0.5);
    }

    .sms-modal-messages {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .sms-modal-messages .message-bubble {
        max-width: 85%;
    }

    .sms-modal-input {
        padding: var(--space-3);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        gap: var(--space-2);
    }

    .sms-modal-input .float-group {
        flex: 1;
        margin-bottom: 0;
    }

    .sms-modal-input textarea {
        min-height: 44px;
        padding: var(--space-3);
    }

    .sms-modal-input .button {
        min-width: 44px;
        height: 44px;
        padding: 0 var(--space-3);
    }
}

/* ===== ADMIN TABLES - Dark Theme Styling ===== */
.admin-table {
    width: 100%;
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 95, 242, 0.2);
    border-collapse: collapse;
}

.admin-table thead {
    background: rgba(0, 95, 242, 0.15);
}

.admin-table th {
    color: var(--text-light);
    padding: 14px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid rgba(0, 95, 242, 0.3);
}

.admin-table td {
    padding: 14px 12px;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.9rem;
}

.admin-table tbody tr {
    transition: background 0.15s ease;
}

.admin-table tbody tr:hover {
    background: rgba(0, 95, 242, 0.08);
}

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

/* Admin table status badges */
.admin-table .status-badge {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.admin-table .status-active,
.admin-table .status-claimed {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.admin-table .status-inactive,
.admin-table .status-expired {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.admin-table .status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

/* Admin table text styles */
.admin-table .text-primary {
    color: var(--text-light);
    font-weight: 600;
}

.admin-table .text-secondary {
    color: var(--text-muted);
    font-size: 0.85rem;
}

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

/* Coupon code badge */
.admin-table .coupon-code {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    font-size: 14px;
    color: var(--primary);
    background: rgba(0, 95, 242, 0.15);
    padding: 5px 10px;
    border-radius: 6px;
}

/* Discount badge */
.admin-table .discount-badge {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
}

/* Date range styles */
.admin-table .date-range {
    font-size: 13px;
}

.admin-table .date-expired {
    color: #f87171;
}

.admin-table .date-future {
    color: #fbbf24;
}

.admin-table .date-valid {
    color: #34d399;
}

/* User type badges */
.admin-table .user-type-admin {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.admin-table .user-type-customer {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.admin-table .user-type-staff {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

/* User Display ID in admin table */
.admin-table .user-display-id {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Card Display ID styles for admin customer detail view */
.card-detail .card-title-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-detail .card-title-row h4 {
    margin: 0;
}

.card-detail .card-display-id {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 14px;
    color: var(--primary);
    letter-spacing: 0.5px;
}

/* Card search filter in customer detail view */
.card-search-filter {
    margin: 15px 0;
    max-width: 280px;
}

.card-search-filter .float-group {
    margin-bottom: 0;
}

/* Card number display in customer wallet view */
.punch-card .card-number {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-block;
}

/* Admin button styles */
.btn-primary {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}

.btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-light);
    border: 1px solid rgba(107, 114, 128, 0.3);
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.btn-secondary:hover {
    background: rgba(107, 114, 128, 0.35);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
    padding: 8px 14px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.25);
}

/* Admin view containers */
.templates-view,
.coupons-view,
.all-users-view,
.gifted-cards-view,
.logs-view,
.settings-admin-view {
    color: var(--text-secondary);
}

.templates-view h3,
.coupons-view h3,
.all-users-view h3,
.gifted-cards-view h3,
.logs-view h3,
.settings-admin-view h3 {
    color: var(--text-light);
    margin-bottom: var(--space-4);
}

/* Admin search bar */
.all-users-view .search-bar {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.all-users-view .search-bar input {
    flex: 1;
    background: rgba(4, 27, 53, 0.5);
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.all-users-view .search-bar input::placeholder {
    color: var(--text-muted);
}

.all-users-view .search-bar input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Card owners info */
.admin-table .card-owners-info {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}

/* Empty and error states */
.empty-state,
.error-state,
.no-data {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 1rem;
}

.error-state {
    color: #f87171;
}

/* Admin table mobile responsive - Hide non-essential columns */
@media (max-width: 768px) {
    .admin-table {
        font-size: 0.85rem;
    }

    .admin-table th,
    .admin-table td {
        padding: 10px 8px;
    }

    /* Templates table: Hide Sessions (#2), Duration (#4), Order (#6) */
    .templates-view .admin-table th:nth-child(2),
    .templates-view .admin-table td:nth-child(2),
    .templates-view .admin-table th:nth-child(4),
    .templates-view .admin-table td:nth-child(4),
    .templates-view .admin-table th:nth-child(6),
    .templates-view .admin-table td:nth-child(6) {
        display: none;
    }

    /* Coupons table: Hide Usage (#4) */
    .coupons-view .admin-table th:nth-child(4),
    .coupons-view .admin-table td:nth-child(4) {
        display: none;
    }

    /* All Users table: Card-based layout on mobile */
    .admin-table.users-table {
        border: none;
        background: transparent;
    }

    .admin-table.users-table thead {
        display: none;
    }

    .admin-table.users-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .admin-table.users-table tbody tr {
        display: flex;
        flex-direction: column;
        background: var(--card-bg);
        border: 1px solid rgba(0, 95, 242, 0.2);
        border-radius: 12px;
        padding: 16px;
    }

    .admin-table.users-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .admin-table.users-table td:last-child {
        border-bottom: none;
        padding-top: 12px;
        justify-content: flex-end;
    }

    .admin-table.users-table td::before {
        display: none;
    }

    /* Mobile card labels with icons */
    .admin-table.users-table td .mobile-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 600;
        color: var(--text-light);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        flex-shrink: 0;
    }

    .admin-table.users-table td .mobile-label i {
        font-size: 0.85rem;
        width: 16px;
        text-align: center;
        color: var(--primary);
    }

    .admin-table.users-table td[data-label="Actions"] .mobile-label {
        display: none;
    }

    /* Show contact actions (call/text) on mobile in Phone field */
    .admin-table.users-table .mobile-contact-actions {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
    }

    /* Phone with actions - icons before number on mobile */
    .admin-table.users-table .phone-with-actions {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Hide less important fields on mobile */
    .admin-table.users-table td[data-label="User ID"],
    .admin-table.users-table td[data-label="Owned"],
    .admin-table.users-table td[data-label="Member Of"] {
        display: none;
    }

    /* SMS inbox: Stack panels vertically */
    .inbox-layout {
        grid-template-columns: 1fr !important;
    }

    .conversations-list {
        max-height: 250px;
    }

    /* Make buttons smaller on mobile */
    .admin-table .btn-secondary,
    .admin-table .btn-danger {
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    /* Header/button rows stack vertically */
    .templates-view > div:first-child,
    .coupons-view > div:first-child,
    .all-users-view > div:first-child {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch !important;
    }

    .templates-view .btn-primary,
    .coupons-view .btn-primary {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .admin-table th,
    .admin-table td {
        padding: 8px 6px;
        font-size: 0.8rem;
    }

    /* Hide Joined on very small screens (keep Phone visible with call/text buttons) */
    .admin-table.users-table td[data-label="Joined"] {
        display: none;
    }

    /* Smaller card padding on mobile */
    .admin-table.users-table tbody tr {
        padding: 12px;
    }

    .admin-table.users-table td {
        padding: 6px 0;
    }
}

/* ===== ACTIVITY LOG ITEMS ===== */
.logs-view .search-bar {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.logs-view .search-bar input {
    flex: 1;
    background: rgba(4, 27, 53, 0.5);
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.logs-view .search-bar input::placeholder {
    color: var(--text-muted);
}

.logs-view .search-bar input:focus {
    outline: none;
    border-color: var(--primary);
}

.log-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 95, 242, 0.15);
    border-radius: 10px;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.log-action {
    font-weight: 600;
    color: var(--primary);
    font-size: 0.95rem;
}

.log-date {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.log-body {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.log-body strong {
    color: var(--text-light);
}

.log-details {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    font-size: 0.85rem;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

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

/* ===== ADMIN SETTINGS VIEW ===== */
.settings-view {
    max-width: 600px;
    margin: 0 auto;
}

.settings-view .card {
    background: var(--card-bg);
    border: 1px solid rgba(0, 95, 242, 0.15);
    border-radius: 12px;
    padding: var(--space-5);
}

.settings-view .card h3 {
    color: var(--text-light);
    margin-bottom: var(--space-4);
}

.settings-view .card p {
    color: var(--text-muted);
}

.settings-view .form-group {
    margin-bottom: var(--space-4);
}

.settings-view .form-group label {
    display: block;
    color: var(--text-light);
    margin-bottom: var(--space-2);
    font-weight: 500;
}

.settings-view select,
.settings-view input[type="password"],
.settings-view input[type="text"] {
    width: 100%;
    background: rgba(4, 27, 53, 0.5);
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-light);
    font-size: 0.95rem;
}

.settings-view select:focus,
.settings-view input:focus {
    outline: none;
    border-color: var(--primary);
}

.settings-view small {
    color: var(--text-muted);
}

/* ===== GIFTED CARDS VIEW ===== */
.gifted-cards-view .search-bar {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gifted-cards-view .search-bar input {
    flex: 1;
    background: rgba(4, 27, 53, 0.5);
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.gifted-cards-view .search-bar input::placeholder {
    color: var(--text-muted);
}

/* ===== ADMIN CUSTOMERS VIEW ===== */
.admin-customers-view .search-bar {
    margin-bottom: var(--space-4);
}

.admin-customers-view .search-bar input {
    width: 100%;
    background: rgba(4, 27, 53, 0.5);
    border: 1.5px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--text-light);
    font-size: 0.9rem;
}

.admin-customers-view .search-bar input::placeholder {
    color: var(--text-muted);
}

.admin-customers-view .search-bar input:focus {
    outline: none;
    border-color: var(--primary);
}

/* Customer Row Styling (dark theme) */
.customer-row {
    background: var(--card-bg);
    border: 1px solid rgba(0, 95, 242, 0.15);
    border-radius: 12px;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    transition: background 0.15s ease;
}

.customer-row:hover {
    background: rgba(0, 95, 242, 0.08);
}

.customer-info .customer-name {
    color: var(--text-light);
    font-weight: 600;
}

.customer-info .customer-email,
.customer-info .customer-phone {
    color: var(--text-muted);
}

.customer-stats .stat-value {
    color: var(--text-light);
}

.customer-stats .stat-label {
    color: var(--text-muted);
}

/* Gifted card item */
.gifted-card-item {
    background: var(--card-bg);
    border: 1px solid rgba(0, 95, 242, 0.15);
    border-radius: 12px;
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.gifted-card-item .card-info {
    color: var(--text-secondary);
}

.gifted-card-item .card-info strong {
    color: var(--text-light);
}

.gifted-card-item .status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.gifted-card-item .status-pending {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}

.gifted-card-item .status-claimed {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.gifted-card-item .status-expired {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

/* ===== COUPON MANAGEMENT - MOBILE CARD LAYOUT ===== */
/* Default: hide mobile cards, show desktop table */
.coupon-cards-mobile {
    display: none;
}

.coupon-table-desktop {
    display: table;
}

/* Mobile: show cards, hide table */
@media (max-width: 768px) {
    .coupon-table-desktop {
        display: none !important;
    }

    .coupon-cards-mobile {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .coupon-card {
        background: rgba(14, 52, 94, 0.6);
        border: 1px solid rgba(0, 95, 242, 0.3);
        border-radius: 12px;
        padding: 16px;
        transition: all 0.2s ease;
    }

    .coupon-card:hover {
        border-color: rgba(0, 95, 242, 0.5);
    }

    /* Status-based left border accent */
    .coupon-card.date-valid {
        border-left: 3px solid #10b981;
    }

    .coupon-card.date-future {
        border-left: 3px solid #fbbf24;
    }

    .coupon-card.date-expired {
        border-left: 3px solid #ef4444;
    }

    .coupon-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }

    .coupon-card-code {
        font-family: monospace;
        font-size: 1.1rem;
        font-weight: 700;
        color: #0cb4ce;
        letter-spacing: 0.5px;
    }

    .coupon-card-desc {
        color: #9ca3af;
        font-size: 0.85rem;
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .coupon-card-body {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 12px;
    }

    .coupon-card-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
    }

    .coupon-card-label {
        color: #9ca3af;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .coupon-card-label i {
        width: 16px;
        text-align: center;
        color: #6b7280;
    }

    .coupon-card-value {
        color: #e5e7eb;
        text-align: right;
    }

    .coupon-card-value small {
        color: #6b7280;
    }

    .coupon-card-actions {
        display: flex;
        gap: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .coupon-card-actions button {
        flex: 1;
        padding: 10px 12px;
        font-size: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    /* Coupon date status colors in card */
    .coupon-card .date-valid {
        color: #34d399;
    }

    .coupon-card .date-future {
        color: #fbbf24;
    }

    .coupon-card .date-expired {
        color: #f87171;
    }
}

/* ================================================
   Edit Session Balance Modal Styles
   ================================================ */

/* Minutes context text in admin view */
.minutes-context {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: normal;
    margin-left: 0.5rem;
}

/* Edit Balance Display */
.edit-balance-display {
    background: rgba(0, 95, 242, 0.1);
    border: 1px solid rgba(0, 95, 242, 0.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.balance-header {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.balance-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.balance-minutes {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.balance-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.balance-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Time Adjustment Section */
.time-adjustment-section {
    margin-bottom: 20px;
}

.adjustment-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    text-align: center;
}

.time-adjust-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.time-adjust-btn {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.time-adjust-btn.minus {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

.time-adjust-btn.minus:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
}

.time-adjust-btn.plus {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

.time-adjust-btn.plus:hover {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.5);
}

.time-adjust-buttons .current-value {
    padding: 10px 20px;
    background: var(--navy-medium);
    border: 2px solid rgba(0, 95, 242, 0.3);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 100px;
    text-align: center;
}

/* Mobile responsive for time buttons */
@media (max-width: 480px) {
    .time-adjust-buttons {
        gap: 6px;
    }

    .time-adjust-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .time-adjust-buttons .current-value {
        order: -1;
        width: 100%;
        margin-bottom: 10px;
    }

    .balance-value {
        font-size: 1.5rem;
    }
}

/* ========================================
   Tip Selection Styles
   ======================================== */

.tip-section {
    margin: 20px 0;
    padding: 16px;
    background: rgba(0, 95, 242, 0.08);
    border: 1px solid rgba(0, 95, 242, 0.2);
    border-radius: 12px;
}

.tip-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.tip-section-header i {
    color: var(--secondary);
}

.tip-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.tip-btn {
    flex: 1;
    min-width: 60px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.tip-btn:hover {
    background: rgba(0, 95, 242, 0.15);
    border-color: rgba(0, 95, 242, 0.4);
}

.tip-btn.active {
    background: rgba(0, 95, 242, 0.25);
    border-color: var(--primary);
    color: #fff;
}

.tip-btn.no-tip {
    flex: 0 0 auto;
    min-width: 70px;
}

.tip-custom-wrapper {
    margin-top: 12px;
    display: none;
}

.tip-custom-wrapper .float-group {
    margin-bottom: 8px;
}

.tip-custom-wrapper .tip-custom-input {
    width: 100%;
}

/* Remove spinner arrows from number input */
.tip-custom-input::-webkit-outer-spin-button,
.tip-custom-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tip-custom-input[type=number] {
    -moz-appearance: textfield;
}

.tip-custom-percent {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.tip-summary {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: none;
    justify-content: space-between;
    align-items: center;
}

.tip-summary-label {
    color: var(--text-secondary);
}

.tip-summary-amount {
    color: #4ade80;
    font-weight: 600;
}

/* Tip row in price breakdown */
#tip-row {
    display: none;
}

#tip-row.visible {
    display: flex;
}

#tip-row .price-value {
    color: #4ade80;
}

@media (max-width: 480px) {
    .tip-buttons {
        gap: 6px;
    }

    .tip-btn {
        min-width: 50px;
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    .tip-custom-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .tip-percentage-hint {
        text-align: center;
    }
}

/* ===== ADD CARD FOR CUSTOMER MODAL ===== */
.add-card-modal {
    padding: 0;
}

.template-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 200px;
    overflow-y: auto;
}

.template-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(14, 52, 94, 0.5);
    border: 2px solid rgba(0, 95, 242, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-option:hover {
    border-color: rgba(0, 95, 242, 0.5);
    background: rgba(14, 52, 94, 0.7);
}

.template-option.selected {
    border-color: var(--primary);
    background: rgba(0, 95, 242, 0.15);
}

.template-name {
    font-weight: 500;
    color: var(--text-primary);
}

.template-price {
    color: #4ade80;
    font-weight: 600;
}

.payment-method-toggle {
    display: flex;
    gap: 10px;
}

.payment-method-toggle .toggle-btn {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid rgba(0, 95, 242, 0.2);
    border-radius: 10px;
    background: rgba(14, 52, 94, 0.5);
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.payment-method-toggle .toggle-btn:hover {
    border-color: rgba(0, 95, 242, 0.5);
}

.payment-method-toggle .toggle-btn.active {
    border-color: var(--primary);
    background: rgba(0, 95, 242, 0.15);
    color: #fff;
}

.payment-method-toggle .toggle-btn i {
    font-size: 1rem;
}

.cash-amount-group .float-label-input {
    display: flex;
    align-items: center;
    background: rgba(14, 52, 94, 0.5);
    border: 1px solid rgba(0, 95, 242, 0.3);
    border-radius: 10px;
    overflow: hidden;
}

.cash-amount-group .currency-prefix {
    padding: 12px 0 12px 16px;
    color: var(--text-secondary);
    font-weight: 500;
}

.cash-amount-group input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 16px 12px 4px;
    color: #fff;
    font-size: 1rem;
    outline: none;
}

.cash-amount-group input::-webkit-outer-spin-button,
.cash-amount-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cash-amount-group input[type=number] {
    -moz-appearance: textfield;
}

.form-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 6px;
}

/* ===== PUSH NOTIFICATION SETTINGS ===== */
.push-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.push-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6b7280;
    flex-shrink: 0;
}

.push-status-indicator.active {
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
}

.push-enabled, .push-disabled, .push-denied, .push-unsupported {
    padding: 0;
}

.push-denied p, .push-unsupported p {
    color: #fbbf24;
    margin: 0;
}

.push-denied i, .push-unsupported i {
    margin-right: 8px;
}

/* ===== CHANGELOG SYSTEM ===== */
.changelog-view {
    padding: 0;
}

.changelog-entry {
    margin-bottom: var(--space-4);
}

.changelog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--card-border);
}

.changelog-version {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.version-badge {
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
}

.changelog-header .release-date {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.changelog-actions {
    display: flex;
    gap: var(--space-2);
}

.changelog-section {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
}

.changelog-section:last-child {
    margin-bottom: 0;
}

.changelog-section.internal {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
}

.changelog-section.customer {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
}

.changelog-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.changelog-section.internal h4 {
    color: #f59e0b;
}

.changelog-section.customer h4 {
    color: #10b981;
}

.changelog-content {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* What's New Modal (Customer View) */
.whats-new-modal {
    max-height: 60vh;
    overflow-y: auto;
}

.whats-new-entry {
    background: var(--card-background);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

.whats-new-entry:last-child {
    margin-bottom: 0;
}

.whats-new-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.whats-new-header .release-date {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.whats-new-content {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
}

/* What's New Section in Settings */
.whats-new-section {
    text-align: center;
}

.whats-new-section h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.whats-new-section h3 i {
    color: #f59e0b;
}

/* Redemption Modal Subtitle */
.redemption-modal-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--card-border);
}

/* ===== STAFF SCANNER VIEW ===== */
.staff-scanner-container {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-4);
}

.staff-scanner-container .card {
    margin-bottom: var(--space-4);
}

.staff-scanner-container .scanner-header {
    text-align: center;
    margin-bottom: var(--space-5);
}

.staff-scanner-container .scanner-header h2 {
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

/* Legacy staff-qr-reader styles (now using #staff-qr-video-container) */
.staff-scanner-container #staff-qr-reader,
.staff-scanner-container #staff-qr-video-container {
    border: 2px dashed var(--primary);
    border-radius: 8px;
    overflow: hidden;
    max-width: 100%;
    min-height: 250px;
}

.staff-scanner-container .scanner-controls {
    display: flex;
    gap: 10px;
    margin-top: var(--space-4);
    justify-content: center;
}

.staff-scanner-container .manual-entry {
    margin-top: var(--space-5);
}

.staff-scanner-container .divider-text {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: var(--space-3);
    position: relative;
}

.staff-scanner-container .divider-text::before,
.staff-scanner-container .divider-text::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--card-border);
}

.staff-scanner-container .divider-text::before {
    left: 0;
}

.staff-scanner-container .divider-text::after {
    right: 0;
}

/* Staff Card Info Display */
#staff-card-info .info-grid {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

#staff-card-info .info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#staff-card-info .info-row:last-child {
    border-bottom: none;
}

#staff-card-info .info-label {
    font-weight: 600;
    color: var(--text-muted);
}

#staff-card-info .info-value {
    color: var(--text-primary);
}

/* Sessions Display */
.sessions-display {
    text-align: center;
    padding: var(--space-5);
    margin: var(--space-4) 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-radius: 12px;
}

.sessions-display .sessions-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: #10b981;
    line-height: 1;
}

.sessions-display .sessions-label {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-top: var(--space-2);
}

.sessions-display.low .sessions-number {
    color: #f59e0b;
}

.sessions-display.empty .sessions-number {
    color: #ef4444;
}

/* Redeem Controls */
.redeem-controls {
    margin: var(--space-4) 0;
}

.redeem-controls .float-group {
    margin-bottom: var(--space-3);
}

/* Admin Scanner Redeem Modal */
.admin-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: var(--space-4);
}

.admin-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.admin-modal-content {
    background: var(--card-bg);
    border: 1px solid rgba(139, 157, 131, 0.2);
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s ease;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.admin-modal-overlay.active .admin-modal-content {
    transform: scale(1) translateY(0);
}

.admin-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-light);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    z-index: 10;
    transition: background 0.2s ease;
}

.admin-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Scanned card details styling inside modal */
.admin-modal-content .scanned-card-details {
    padding: var(--space-5);
}

.admin-modal-content .scanned-card-details h3 {
    text-align: center;
    color: #10b981;
    margin-bottom: var(--space-4);
    font-size: 1.4rem;
}

.admin-modal-content .card-info {
    background: rgba(0, 0, 0, 0.3);
    padding: var(--space-4);
    border-radius: 12px;
    margin-bottom: var(--space-4);
}

.admin-modal-content .card-info > div {
    padding: var(--space-2) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-modal-content .card-info > div:last-child {
    border-bottom: none;
}

.admin-modal-content .sessions-display {
    margin-top: var(--space-2);
}

.admin-modal-content .sessions-big {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
}

.admin-modal-content .minutes-detail {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 4px;
}

.admin-modal-content .redeem-form {
    margin-top: var(--space-4);
}

.admin-modal-content .redeem-section {
    margin-bottom: var(--space-4);
}

.admin-modal-content .redeem-section label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-light);
    font-weight: 500;
}

.admin-modal-content .session-buttons,
.admin-modal-content .extra-time-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.admin-modal-content .session-btn,
.admin-modal-content .extra-time-btn {
    flex: 1;
    min-width: 60px;
    padding: var(--space-3);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-light);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-modal-content .session-btn:hover,
.admin-modal-content .extra-time-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.admin-modal-content .session-btn.selected,
.admin-modal-content .extra-time-btn.selected {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--button-text);
}

/* Use All Remaining button */
.admin-modal-content .use-remaining-btn {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
    color: #fbbf24;
}

.admin-modal-content .use-remaining-btn:hover {
    background: rgba(245, 158, 11, 0.25);
}

.admin-modal-content .use-remaining-btn.selected {
    background: #f59e0b;
    border-color: #f59e0b;
    color: #000;
}

.admin-modal-content .redeem-summary {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: var(--space-3);
    border-radius: 8px;
    text-align: center;
    margin-bottom: var(--space-4);
}

.admin-modal-content .form-group {
    margin-bottom: var(--space-4);
}

.admin-modal-content .form-group label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--text-light);
}

.admin-modal-content .form-group textarea {
    width: 100%;
    padding: var(--space-3);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-light);
    resize: vertical;
}

.admin-modal-content .btn-redeem {
    width: 100%;
    margin-bottom: var(--space-2);
}

.admin-modal-content .btn-secondary {
    width: 100%;
}

/* Mobile adjustments for admin modal */
@media (max-width: 768px) {
    .admin-modal-overlay {
        padding: var(--space-3);
    }

    .admin-modal-content {
        max-height: 95vh;
    }

    .admin-modal-content .scanned-card-details {
        padding: var(--space-4);
    }

    .admin-modal-close {
        top: 8px;
        right: 8px;
    }
}