/* ============================================
   My Pawz Signals - Main Stylesheet
   A beautiful PWA for dog walk tracking
   ============================================ */

/* CSS Variables */
:root {
    /* Primary Colors - Teal */
    --primary: #06554a;
    --primary-dark: #044039;
    --primary-light: #0a7a6a;
    --primary-bg: #e6f2f0;

    /* Accent Colors - Orange */
    --accent: #f16937;
    --accent-dark: #d85525;
    --accent-light: #f58a62;

    /* Semantic Colors */
    --success: #10b981;
    --success-bg: #d1fae5;
    --warning: #f59e0b;
    --warning-bg: #fef3c7;
    --danger: #ef4444;
    --danger-bg: #fee2e2;
    --error: #ef4444;
    --error-bg: #fee2e2;
    --info: #3b82f6;
    --info-bg: #dbeafe;

    /* Rating Colors */
    --rating-5: #10b981;
    --rating-4: #84cc16;
    --rating-3: #eab308;
    --rating-2: #f97316;
    --rating-1: #ef4444;

    /* Neutral Colors */
    --white: #ffffff;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* Background */
    --bg-main: #f8fafc;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;

    /* Text */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    /* Borders */
    --border-color: #e5e7eb;
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Typography */
    --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;

    /* Layout */
    --header-height: 60px;
    --bottom-nav-height: 70px;
    --max-width: 600px;

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

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-main: #0f172a;
        --bg-card: #1e293b;
        --bg-elevated: #334155;
        --text-primary: #f8fafc;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border-color: #475569;
        --gray-100: #1e293b;
        --gray-200: #334155;
        --primary-bg: rgba(6, 85, 74, 0.3);
        --primary: #10b981;
        --primary-light: #34d399;
        --warning-bg: rgba(245, 158, 11, 0.2);
        --danger-bg: rgba(239, 68, 68, 0.2);
        --error: #f87171;
        --error-bg: rgba(239, 68, 68, 0.2);
        --success-bg: rgba(16, 185, 129, 0.2);
        --info-bg: rgba(59, 130, 246, 0.2);
    }

    /* Ensure all text is visible in dark mode */
    .form-label,
    .form-hint,
    .trigger-label,
    .chip-content,
    .chip-content span,
    .toggle-btn,
    .duration-btn,
    .mood-btn,
    .weather-btn,
    .weather-chip,
    .weather-chip .chip-content,
    .equipment-chip,
    .equipment-chip .chip-content,
    .recovery-btn,
    .rest-btn,
    .rating-btn,
    .stool-btn,
    .card-title,
    .stat-value,
    .stat-label,
    .section-title,
    .nav-label,
    .menu-item,
    .trigger-btn,
    .trigger-btn .trigger-label,
    .dog-card,
    .dog-name,
    .dog-breed,
    .lang-option,
    .lang-dropdown-btn,
    .walk-card,
    .walk-info,
    .walk-date,
    .walk-meta,
    .walk-detail-value,
    .walk-detail-section h4,
    .walk-detail-section p,
    .medication-item,
    .medication-info h4,
    .medication-info p,
    .custom-field-item,
    .custom-field-item label,
    .custom-field-toggle button,
    .custom-field-setting,
    .custom-field-setting span,
    .slider-value,
    .slider-labels span,
    .health-chip,
    .health-chip span,
    .trainer-item,
    .trainer-item-info,
    .trainer-item-name,
    .trainer-item-code,
    p,
    span,
    label,
    h1, h2, h3, h4, h5, h6 {
        color: var(--text-primary);
    }

    /* Trainer items in dark mode */
    .trainer-item {
        background: var(--bg-card);
        border-color: var(--border-color);
    }

    .trainer-item-code {
        color: var(--primary-light) !important;
        background: rgba(16, 185, 129, 0.15) !important;
    }

    /* Client detail in dark mode */
    .client-header-email {
        color: var(--text-muted);
    }

    .dog-tag {
        background: var(--primary-bg);
        color: var(--primary-light);
    }

    .form-input,
    .form-textarea,
    input[type="text"],
    input[type="date"],
    input[type="datetime-local"],
    select {
        color: var(--text-primary);
        background: var(--bg-elevated);
        border-color: var(--border-color);
    }

    /* Buttons in dark mode */
    .btn-secondary {
        color: var(--text-primary);
        background: var(--bg-elevated);
        border-color: var(--border-color);
    }

    /* Cards in dark mode */
    .card,
    .walk-card,
    .dog-card,
    .medication-item,
    .custom-field-setting {
        background: var(--bg-card);
        border-color: var(--border-color);
    }

    /* Modal in dark mode */
    .modal-content {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    .modal-header h2,
    .modal-body p,
    .modal-body label {
        color: var(--text-primary);
    }

    /* Language dropdown in dark mode */
    .lang-dropdown-menu {
        background: var(--bg-card);
        border-color: var(--border-color);
    }

    .lang-option:hover {
        background: var(--bg-elevated);
    }

    /* Side menu in dark mode */
    .side-menu .menu-content {
        background: var(--bg-card);
    }

    .menu-header,
    .menu-dog-name {
        color: var(--text-primary);
    }

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

    .menu-item:hover {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }

    .menu-item.active {
        background: var(--primary);
        color: white;
    }

    .menu-item.active svg {
        color: white;
    }

    /* Button outline in dark mode */
    .btn-outline {
        background: transparent;
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .btn-outline:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    /* All buttons in dark mode - ensure visibility */
    .btn {
        color: var(--text-primary);
    }

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

    .btn-secondary,
    .btn-outline {
        background: var(--bg-elevated);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    /* Form sections in dark mode */
    .form-section,
    .appointments-form,
    .medication-form,
    .settings-section,
    .export-section,
    .partner-section,
    .trainer-section {
        background: var(--bg-card);
        border-color: var(--border-color);
    }

    /* All card-like elements */
    .insight-card,
    .stat-card,
    .quick-stat-card,
    .appointment-item,
    .appointment-card {
        background: var(--bg-card);
        border-color: var(--border-color);
    }

    /* Selection chips and toggle buttons */
    .duration-btn,
    .mood-btn,
    .weather-btn,
    .weather-chip,
    .equipment-chip,
    .recovery-btn,
    .rest-btn,
    .rating-btn,
    .stool-btn,
    .toggle-btn,
    .coat-btn,
    .treats-btn,
    .dog-count-btn,
    [data-treats],
    [data-played],
    [data-trained],
    [data-coat],
    [data-dogcount],
    [data-ownermood] {
        background: var(--bg-elevated);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    .duration-btn.active,
    .mood-btn.active,
    .weather-btn.active,
    .weather-chip.active,
    .equipment-chip.active,
    .recovery-btn.active,
    .rest-btn.active,
    .rating-btn.active,
    .stool-btn.active,
    .toggle-btn.active,
    .coat-btn.active,
    .treats-btn.active,
    .dog-count-btn.active,
    [data-treats].active,
    [data-played].active,
    [data-trained].active,
    [data-coat].active,
    [data-dogcount].active,
    [data-ownermood].active {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* Lists and items */
    .walk-item,
    .medication-item,
    .appointment-item,
    .dog-item,
    .client-item,
    .trainer-item,
    .pattern-item {
        background: var(--bg-elevated);
        border-color: var(--border-color);
    }

    /* Type cards (medication, appointment types) */
    .med-type-card,
    .appt-type-card {
        background: var(--bg-elevated);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .med-type-card input:checked + .med-type-content,
    .appt-type-card input:checked + .appt-type-content {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    /* Trigger buttons */
    .trigger-btn {
        background: var(--bg-elevated);
        border-color: var(--border-color);
    }

    .trigger-btn.seen {
        background: var(--primary-bg);
        border-color: var(--primary);
    }

    .trigger-btn.outburst {
        background: rgba(239, 68, 68, 0.2);
        border-color: #ef4444;
    }

    /* Health chips */
    .health-chip {
        background: var(--bg-elevated);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .health-chip input:checked + span {
        background: var(--primary);
        color: white;
    }

    /* Empty states and hints */
    .empty-state,
    .no-patterns,
    .insight-hint,
    .form-hint {
        color: var(--text-muted);
    }

    /* Tables */
    table, th, td {
        border-color: var(--border-color);
    }

    th {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }

    td {
        background: var(--bg-card);
        color: var(--text-primary);
    }

    /* Slider track */
    input[type="range"] {
        background: var(--bg-elevated);
    }

    /* SVG icons in dark mode */
    svg {
        color: inherit;
    }

    /* Trainer sections in dark mode */
    .trainer-add-client-section,
    .trainer-clients-section,
    .trainer-card,
    .trainer-code-section {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    .trainer-card h3 {
        color: var(--primary-light);
    }

    .trainer-card .settings-desc,
    .trainer-add-client-section .settings-desc {
        color: var(--text-secondary);
    }

    .trainer-code-display {
        background: var(--bg-elevated) !important;
        border: 1px solid var(--border-color);
    }

    .trainer-code-value {
        color: var(--primary-light) !important;
    }

    .trainer-code-display .btn-outline {
        background: var(--bg-card);
        color: var(--text-primary);
        border-color: var(--border-color);
    }

    .trainer-code-display .btn-outline:hover {
        background: var(--primary);
        color: white;
        border-color: var(--primary);
    }

    .trainer-add-client-section h3 {
        color: var(--primary-light);
    }

    .client-card {
        background: var(--bg-elevated);
    }

    .client-card:hover {
        background: var(--primary-bg);
    }

    .client-search-result {
        background: var(--bg-elevated);
    }

    /* Admin sections in dark mode */
    .admin-stat-card {
        background: var(--bg-card);
    }

    /* Appointment cards in dark mode */
    .appointment-card {
        background: var(--bg-card);
    }

    .appointment-type-btn {
        background: var(--bg-elevated);
        border-color: var(--border-color);
        color: var(--text-primary);
    }

    .appointment-type-btn svg {
        color: var(--text-secondary);
    }

    .appointment-type-btn.active {
        background: var(--primary);
        color: white;
    }

    .appointment-type-btn.active svg {
        color: white;
    }

    /* Appointment action buttons in dark mode */
    .appointment-edit-btn {
        background: var(--primary-bg);
        color: var(--primary);
    }

    .appointment-delete-btn {
        background: var(--error-bg);
        color: var(--error);
    }

    /* Gray backgrounds need contrast */
    .gray-50,
    [class*="gray-50"] {
        background: var(--bg-elevated) !important;
    }

    /* Ensure active states have contrast */
    .toggle-btn.active,
    .duration-btn.active,
    .mood-btn.active,
    .recovery-btn.active,
    .rest-btn.active,
    .stool-btn.active {
        color: white;
    }

    .toggle-btn.active svg,
    .duration-btn.active svg,
    .mood-btn.active svg,
    .recovery-btn.active svg,
    .rest-btn.active svg,
    .stool-btn.active svg {
        color: white;
    }

    /* Rating badges need contrast */
    .walk-rating-badge {
        color: white;
    }

    /* Settings description text */
    .settings-desc {
        color: var(--text-secondary);
    }

    /* No patterns text */
    .no-patterns {
        color: var(--text-muted);
    }

    /* Toast */
    .toast {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }

    /* Trainer items in dark mode */
    .trainer-item {
        background: var(--bg-elevated) !important;
        border-color: var(--border-color) !important;
    }

    .trainer-item-name,
    .trainer-item-email,
    .trainer-item-code,
    .trainer-item-clients {
        color: var(--text-primary) !important;
    }

    .trainer-item-email,
    .trainer-item-clients {
        color: var(--text-secondary) !important;
    }

    .trainer-item:hover {
        background: var(--bg-card) !important;
        border-color: var(--primary-light) !important;
    }

    /* Admin search user section */
    .admin-search-user-section {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* Trainers management section */
    .trainers-management {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }

    /* User search result card */
    .user-search-result,
    .client-search-result {
        background: var(--bg-elevated) !important;
        border-color: var(--border-color) !important;
    }

    /* Settings sections */
    .settings-section {
        background: var(--bg-card) !important;
        border-color: var(--border-color) !important;
    }

    /* Form inputs in settings */
    .settings-section input,
    .settings-section select,
    .settings-section textarea {
        background: var(--bg-elevated) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    /* Admin warning with better contrast */
    .admin-warning {
        background: rgba(245, 158, 11, 0.15) !important;
        color: #fbbf24 !important;
        border: 1px solid rgba(245, 158, 11, 0.3) !important;
    }

    .admin-warning svg,
    .admin-warning span {
        color: #fbbf24 !important;
    }

    /* Admin stat cards */
    .admin-stat-card {
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
    }

    .admin-stat-value {
        color: var(--primary-light) !important;
    }

    .admin-stat-label {
        color: var(--text-secondary) !important;
    }

    /* Admin dashboard */
    .admin-dashboard {
        background: transparent !important;
    }

    /* Search input group */
    .search-input-group input {
        background: var(--bg-elevated) !important;
        border-color: var(--border-color) !important;
        color: var(--text-primary) !important;
    }

    /* Alert banners in dark mode - use darker text for contrast */
    .alert-banner .alert-content p {
        color: var(--text-primary) !important;
    }

    .alert-banner.alert-warning {
        background: rgba(245, 158, 11, 0.15) !important;
    }

    .alert-banner.alert-danger {
        background: rgba(239, 68, 68, 0.15) !important;
    }

    .alert-banner.alert-info {
        background: rgba(59, 130, 246, 0.15) !important;
    }

    /* Dog cards in dark mode */
    .dog-card {
        background: var(--bg-card) !important;
        border-color: var(--border-color) !important;
    }

    .dog-card.active {
        background: var(--bg-elevated) !important;
        border-color: var(--primary) !important;
    }

    .dog-card .dog-name,
    .dog-card .dog-info h4 {
        color: var(--text-primary) !important;
    }

    .dog-card .dog-breed,
    .dog-card .dog-info p {
        color: var(--text-secondary) !important;
    }

    .dog-card .dog-avatar {
        background: var(--primary-bg) !important;
    }

    .dog-card .dog-avatar svg,
    .dog-card .dog-avatar-svg {
        color: var(--primary-light) !important;
    }

    .dog-action-btn {
        background: var(--bg-elevated) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    .dog-action-btn:hover {
        background: var(--primary) !important;
        color: white !important;
    }

    .dog-action-btn svg,
    .dog-action-btn .action-icon-svg {
        color: inherit !important;
    }

    /* No dogs message */
    .no-dogs {
        color: var(--text-secondary) !important;
    }

    /* Trainer items in dark mode */
    .trainer-item {
        background: var(--bg-card) !important;
        border-color: var(--border-color) !important;
    }

    .trainer-item-name {
        color: var(--text-primary) !important;
    }

    .trainer-item-code {
        color: var(--text-secondary) !important;
    }

    .no-trainers-msg {
        color: var(--text-secondary) !important;
    }
}

/* Trainer items styling */
.my-trainers-list {
    margin-bottom: 1rem;
}

.trainer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.trainer-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

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

.trainer-item-code {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.no-trainers-msg {
    color: var(--text-secondary);
    font-style: italic;
    padding: 0.5rem 0;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-main);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Splash Screen */
.splash-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

.splash-content {
    text-align: center;
    color: white;
}

.splash-logo {
    font-size: 80px;
    margin-bottom: var(--spacing-md);
    animation: bounce 1s infinite;
}

.splash-content h1 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
}

.splash-loader {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

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

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Welcome Screen */
.welcome-screen {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.welcome-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.welcome-content {
    text-align: center;
    color: white;
    padding: var(--spacing-xl);
    max-width: 400px;
    width: 100%;
}

.welcome-logo-svg {
    width: 100px;
    height: 100px;
    margin-bottom: var(--spacing-lg);
    animation: bounce 2s ease-in-out infinite;
}

.welcome-content h1 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin-bottom: var(--spacing-sm);
}

.welcome-subtitle {
    font-size: var(--font-size-md);
    opacity: 0.9;
    margin-bottom: var(--spacing-2xl);
}

.welcome-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
    border-radius: var(--border-radius-lg);
}

/* Welcome screen buttons - light mode: white on green background */
/* Dark mode overrides are in the @media (prefers-color-scheme: dark) section above */
.welcome-screen .btn-primary {
    background: white;
    color: var(--primary);
}

.welcome-screen .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

.welcome-buttons .btn-secondary {
    background: transparent;
    border: 2px solid white;
    color: white;
}

.welcome-buttons .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Dark mode for welcome buttons - must be here to override above */
@media (prefers-color-scheme: dark) {
    .welcome-screen .btn-primary {
        background: var(--primary) !important;
        color: white !important;
    }

    .welcome-screen .btn-primary:hover {
        background: var(--primary-light) !important;
    }

    .welcome-buttons .btn-secondary {
        background: transparent !important;
        border: 2px solid var(--primary) !important;
        color: var(--primary) !important;
    }

    .welcome-buttons .btn-secondary:hover {
        background: rgba(16, 185, 129, 0.1) !important;
    }
}

.welcome-divider {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.welcome-divider::before,
.welcome-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
}

.welcome-divider span {
    padding: 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.welcome-skip {
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--font-size-sm);
}

.welcome-skip:hover {
    color: white;
    text-decoration: underline;
}

/* App Container */
.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.app.hidden {
    display: none;
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-md);
    z-index: 100;
    box-shadow: var(--shadow-sm);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo-icon {
    font-size: 24px;
}

.logo-text {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--primary);
}

/* Language Dropdown */
.lang-dropdown {
    position: relative;
}

.lang-dropdown-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.lang-dropdown-btn:hover {
    background: var(--gray-200);
}

.lang-dropdown-btn img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.dropdown-arrow {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.lang-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.lang-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-xs);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    min-width: 160px;
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
}

.lang-dropdown.open .lang-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.lang-option:hover {
    background: var(--gray-100);
}

.lang-option.active {
    background: var(--primary-bg);
    color: var(--primary);
}

.lang-option img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: var(--transition);
}

.icon-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.icon-btn svg {
    width: 24px;
    height: 24px;
}

/* Side Menu */
.side-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    transition: visibility var(--transition);
}

.side-menu.open {
    visibility: visible;
}

.menu-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--transition);
}

.side-menu.open .menu-overlay {
    opacity: 1;
}

.menu-content {
    position: absolute;
    right: 0;
    top: var(--header-height);
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    background: var(--bg-card);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}

.side-menu.open .menu-content {
    transform: translateX(0);
}

.menu-header {
    padding: var(--spacing-xl) var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.menu-user {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: white;
}

.user-avatar {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name {
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.user-email {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Dog Selector Dropdown in Menu */
.dog-selector-dropdown {
    cursor: pointer;
    position: relative;
    flex: 1;
}

.dog-dropdown-arrow {
    width: 20px;
    height: 20px;
    fill: white;
    opacity: 0.8;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.dog-selector-dropdown.open .dog-dropdown-arrow {
    transform: rotate(180deg);
}

.dog-dropdown-menu {
    display: none;
    background: white;
    border-radius: var(--border-radius-md);
    margin-top: var(--spacing-sm);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dog-selector-dropdown.open + .dog-dropdown-menu {
    display: block;
}

.dog-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-size: var(--font-size-sm);
}

.dog-dropdown-item:hover {
    background: var(--bg-secondary);
}

.dog-dropdown-item.active {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}

.dog-dropdown-item .dog-mini-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dog-dropdown-item .dog-mini-avatar svg {
    width: 16px;
    height: 16px;
    fill: white;
}

.dog-dropdown-item .dog-item-name {
    flex: 1;
}

.dog-dropdown-item .partner-badge {
    font-size: 10px;
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--border-radius-sm);
    color: var(--text-muted);
}

.dog-dropdown-item.active .partner-badge {
    background: rgba(255, 255, 255, 0.5);
    color: var(--primary-dark);
}

/* Dark mode for dog dropdown */
[data-theme="dark"] .dog-dropdown-menu {
    background: var(--bg-card);
}

[data-theme="dark"] .dog-dropdown-item:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .dog-dropdown-item.active {
    background: var(--primary);
    color: white;
}

[data-theme="dark"] .dog-dropdown-item.active .partner-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Menu Auth Section */
.menu-auth {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.user-email-text {
    font-size: var(--font-size-xs);
    color: rgba(255, 255, 255, 0.9);
    word-break: break-all;
    flex: 1;
}

.menu-content .btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: white;
}

.menu-content .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Auth Modal Styles */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.auth-error {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--danger-light);
    color: var(--danger);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.auth-success {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--success-light);
    color: var(--success);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.forgot-password-link {
    text-align: right;
    margin-top: calc(-1 * var(--spacing-sm));
    margin-bottom: var(--spacing-md);
}

.forgot-password-link .btn-link {
    font-size: var(--font-size-sm);
    margin-left: 0;
}

.forgot-password-info {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
    line-height: 1.5;
}

.back-to-login {
    text-align: center;
    margin-top: var(--spacing-md);
}

.auth-switch {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.btn-link {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: var(--spacing-xs);
}

.btn-link:hover {
    text-decoration: underline;
}

/* Email Confirmation Message */
.email-confirm-message {
    text-align: center;
    padding: var(--spacing-lg) 0;
}

.email-confirm-icon {
    margin-bottom: var(--spacing-lg);
}

.email-confirm-icon svg {
    width: 80px;
    height: 80px;
    stroke: var(--primary);
}

.email-confirm-message h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
}

.email-confirm-text {
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.email-confirm-address {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-lg);
    word-break: break-all;
}

.email-confirm-hint {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.menu-items {
    flex: 1;
    padding: var(--spacing-md) 0;
    list-style: none;
    overflow-y: auto;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
}

.menu-item:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.menu-item.active {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

.menu-item.active svg {
    color: white;
}

.menu-icon {
    font-size: 20px;
    width: 24px;
    text-align: center;
}

.menu-footer {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.language-selector {
    display: flex;
    gap: var(--spacing-sm);
}

.lang-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
}

.lang-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.lang-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Main Content */
.main-content {
    flex: 1;
    padding: calc(var(--header-height) + var(--spacing-lg)) var(--spacing-md) calc(var(--bottom-nav-height) + var(--spacing-lg));
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
}

/* Pages */
.page {
    display: none;
    animation: fadeIn 0.3s ease;
}

.page.active {
    display: block;
}

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

.page-header {
    margin-bottom: var(--spacing-xl);
}

.page-header h1 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

/* Dog Stats Container */
#dog-stats-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.dog-stats-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.dog-stats-section .quick-stats {
    margin-bottom: 0;
}

.dog-stats-section .quick-stats .stat-card {
    border-left: 3px solid var(--dog-color, var(--primary));
}

.dog-stats-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--border-color);
}

.dog-stats-name {
    font-weight: 700;
    font-size: var(--font-size-md);
}

.dog-stats-owner {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.stat-icon-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-sm);
}

.stat-icon-emoji svg {
    width: 28px;
    height: 28px;
}

/* Quick Stats */
.quick-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.stat-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.stat-icon {
    font-size: 28px;
    margin-bottom: var(--spacing-sm);
}

.stat-value {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--primary);
}

.stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Action Card */
.action-card {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    color: white;
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-md);
}

.action-icon {
    font-size: 48px;
}

.action-content {
    flex: 1;
}

.action-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.action-content p {
    font-size: var(--font-size-sm);
    opacity: 0.9;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    white-space: nowrap;
}

.btn svg {
    width: 18px;
    height: 18px;
}

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

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

.btn-secondary {
    background: var(--bg-elevated);
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-danger {
    background: var(--danger);
    color: white;
}

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

.btn-small {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-large {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.btn-full {
    width: 100%;
}

.link-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.link-btn:hover {
    text-decoration: underline;
}

/* Section Header */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.section-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

/* Recent Walks List */
.recent-walks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

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

.walk-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.walk-rating {
    width: 50px;
    height: 50px;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.walk-rating.rating-5 { background: var(--success-bg); }
.walk-rating.rating-4 { background: #ecfccb; }
.walk-rating.rating-3 { background: var(--warning-bg); }
.walk-rating.rating-2 { background: #ffedd5; }
.walk-rating.rating-1 { background: var(--danger-bg); }

/* Walk Rating Badge with Emoji */
.walk-rating-badge {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.walk-rating-badge .rating-emoji {
    font-size: 28px;
    line-height: 1;
}

.walk-rating-badge .rating-icon-svg,
.walk-rating-badge .rating-emoji svg {
    width: 32px;
    height: 32px;
    color: white !important;
}

.rating-icon-svg {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
}

.walk-rating-badge.rating-5 {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.walk-rating-badge.rating-4 {
    background: linear-gradient(135deg, #84cc16, #65a30d);
    box-shadow: 0 2px 8px rgba(132, 204, 22, 0.3);
}

.walk-rating-badge.rating-3 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.walk-rating-badge.rating-2 {
    background: linear-gradient(135deg, #f97316, #ea580c);
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}

.walk-rating-badge.rating-1 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

.walk-info {
    flex: 1;
}

.walk-date {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.walk-dog-name {
    font-weight: 500;
    color: var(--primary);
}

.walk-meta {
    display: flex;
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

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

.walk-arrow svg {
    width: 20px;
    height: 20px;
}

/* Walk Logger Badge */
.walk-logger {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--primary-bg);
    color: var(--primary);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* Alert Banners */
.alert-banner {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.alert-banner.alert-warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
}

.alert-banner.alert-danger {
    background: var(--danger-bg);
    border: 1px solid var(--danger);
}

.alert-banner.alert-info {
    background: var(--info-bg);
    border: 1px solid var(--info);
}

.alert-banner .alert-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.alert-banner.alert-warning .alert-icon {
    color: var(--warning);
}

.alert-banner.alert-danger .alert-icon {
    color: var(--danger);
}

.alert-banner.alert-info .alert-icon {
    color: var(--info);
}

.alert-banner .alert-content {
    flex: 1;
}

.alert-banner .alert-content p {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.alert-banner .btn-small {
    flex-shrink: 0;
}

.empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

.empty-icon {
    font-size: 48px;
    display: block;
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

/* Form Styles */
.walk-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.walk-form .form-section {
    background: var(--bg-card);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
}

.form-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

.form-label {
    font-weight: 700;
    color: var(--primary);
    font-size: var(--font-size-base);
}

.form-hint {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: calc(-1 * var(--spacing-xs));
}

.form-input, .form-textarea {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: var(--font-size-base);
    background: var(--bg-card);
    color: var(--text-primary);
    transition: var(--transition);
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-bg);
}

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

.password-input-wrapper .form-input {
    padding-right: 48px;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

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

.password-toggle svg {
    width: 20px;
    height: 20px;
}

.password-toggle.showing .eye-icon {
    display: none;
}

.password-toggle.showing .eye-off-icon {
    display: block !important;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

/* Add spacing before buttons that follow form sections */
.form-section + .btn,
.form-section + .btn-primary,
.form-textarea + .btn,
.form-input + .btn {
    margin-top: var(--spacing-lg);
}

/* Field Validation Error States */
.form-section.field-error {
    animation: shake 0.4s ease-in-out;
}

.form-section.field-error .form-label {
    color: var(--danger);
}

.form-section.field-error .btn-group .btn,
.form-section.field-error .mood-btn,
.form-section.field-error .duration-btn,
.form-section.field-error .weather-btn,
.form-section.field-error .recovery-btn,
.form-section.field-error .rest-btn,
.form-section.field-error .rating-btn,
.form-section.field-error .stool-btn,
.form-section.field-error .dog-selector .btn,
.appointment-type-selector.field-error .appointment-type-btn {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px var(--danger-bg);
}

.form-section.field-error .form-input,
.form-section.field-error .form-textarea,
.form-section.field-error .form-select {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px var(--danger-bg);
}

.field-error-message {
    color: var(--danger);
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.field-error-message::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--danger);
    color: white;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Dog Selector */
.dog-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.dog-selector-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-primary);
}

.dog-selector-btn:hover {
    border-color: var(--primary-light);
}

.dog-selector-btn.active {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.dog-selector-btn span {
    color: inherit;
}

.dog-selector-btn svg {
    width: 20px;
    height: 20px;
}

.dog-owner-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 400;
}

/* Number Selector (dog count) */
.number-selector {
    display: flex;
    gap: var(--spacing-sm);
}

.number-btn {
    flex: 1;
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    font-size: var(--font-size-lg);
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.number-btn:hover {
    border-color: var(--primary-light);
}

.number-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* Duration Selector */
.duration-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.duration-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
}

.duration-btn:hover {
    border-color: var(--primary-light);
}

.duration-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.duration-btn.active small {
    color: rgba(255, 255, 255, 0.8);
}

.duration-icon {
    font-size: 24px;
}

.duration-btn small {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Mood Selector */
.mood-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.mood-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-full);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.mood-btn:hover {
    border-color: var(--primary-light);
}

.mood-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.mood-icon {
    font-size: 18px;
}

/* Post-walk Mood Selector (emoji-based) */
.postwalk-mood-selector {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

.postwalk-mood-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-family: inherit;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    text-align: center;
}

.postwalk-mood-btn .mood-emoji {
    font-size: 24px;
    line-height: 1;
}

.postwalk-mood-btn:hover {
    border-color: var(--primary-light);
}

.postwalk-mood-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

/* Weather Selector */
.weather-selector {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

.weather-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-sm);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-xs);
}

.weather-btn:hover {
    border-color: var(--primary-light);
}

.weather-btn.active {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.weather-icon {
    font-size: 28px;
}

/* Toggle Group */
.toggle-group {
    display: flex;
    gap: var(--spacing-sm);
}

.toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
}

.toggle-btn:hover {
    border-color: var(--primary-light);
}

.toggle-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.toggle-icon {
    font-size: 20px;
}

/* Trigger Grid */
.trigger-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.trigger-chip {
    cursor: pointer;
}

.trigger-chip input {
    display: none;
}

.chip-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.trigger-chip input:checked + .chip-content {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.chip-icon {
    font-size: 18px;
}

/* New Trigger System - Seen vs Outburst */
.trigger-grid-new {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.trigger-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-sm);
    text-align: left;
    position: relative;
}

.trigger-btn:hover {
    border-color: var(--primary-light);
}

.trigger-btn.seen {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.trigger-btn.seen .trigger-icon-svg {
    color: #22c55e;
}

.trigger-btn.outburst {
    border-color: var(--accent);
    background: rgba(241, 105, 55, 0.1);
}

.trigger-btn.outburst .trigger-icon-svg {
    color: var(--accent);
}

.trigger-icon-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: var(--transition);
}

.trigger-label {
    flex: 1;
    color: var(--text-primary);
}

.trigger-status {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    display: none;
}

.trigger-btn.seen .trigger-status {
    display: block;
    background: #22c55e;
    color: white;
}

.trigger-btn.seen .trigger-status::after {
    content: attr(data-status);
}

.trigger-btn.outburst .trigger-status {
    display: block;
    background: var(--accent);
    color: white;
}

.trigger-btn.outburst .trigger-status::after {
    content: attr(data-status);
}

/* Trigger Legend */
.trigger-legend {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.seen {
    background: #22c55e;
}

.legend-dot.outburst {
    background: var(--accent);
}

/* New Trigger List with Counters */
.trigger-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.trigger-item {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: var(--transition);
}

.trigger-item.has-data {
    border-color: var(--primary);
}

/* Outburst level colors: 0=green, 1=yellow, 2=orange, 3=red */
.trigger-item.outburst-level-0 {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.1);
}

.trigger-item.outburst-level-1 {
    border-color: #eab308 !important;
    background: rgba(234, 179, 8, 0.1);
}

.trigger-item.outburst-level-2 {
    border-color: #f97316 !important;
    background: rgba(249, 115, 22, 0.1);
}

.trigger-item.outburst-level-3 {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1);
}

.trigger-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-md);
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-primary);
}

.trigger-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.trigger-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.trigger-summary {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.trigger-item.has-data .trigger-summary {
    color: var(--primary);
    font-weight: 600;
}

/* Summary colors matching outburst levels */
.trigger-item.outburst-level-0 .trigger-summary {
    color: #22c55e;
}

.trigger-item.outburst-level-1 .trigger-summary {
    color: #eab308;
}

.trigger-item.outburst-level-2 .trigger-summary {
    color: #f97316;
}

.trigger-item.outburst-level-3 .trigger-summary {
    color: #ef4444;
}

.trigger-item.has-outburst .trigger-summary {
    color: var(--accent);
}

.trigger-chevron {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: transform var(--transition);
}

.trigger-item.open .trigger-chevron {
    transform: rotate(180deg);
}

.trigger-details {
    display: none;
    padding: 0 var(--spacing-md) var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.trigger-item.open .trigger-details {
    display: block;
}

/* Trigger Slider Groups */
.trigger-slider-group {
    padding: var(--spacing-md) 0;
}

.trigger-slider-group:first-child {
    padding-top: var(--spacing-md);
}

.trigger-slider-group .slider-label {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.trigger-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: var(--gray-200);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.trigger-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 3px solid var(--white);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.trigger-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
    border: 3px solid var(--white);
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.trigger-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.trigger-slider.outburst-slider::-webkit-slider-thumb {
    background: var(--accent);
}

.trigger-slider.outburst-slider::-moz-range-thumb {
    background: var(--accent);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    padding: 0 2px;
}

.slider-labels span {
    text-align: center;
    width: 25%;
}

.slider-labels span:first-child {
    text-align: left;
}

.slider-labels span:last-child {
    text-align: right;
}

.outburst-group {
    border-top: 1px solid var(--border-color);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-md);
}

/* Weather Grid (Multi-select) */
.weather-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.weather-chip {
    cursor: pointer;
}

.weather-chip input {
    display: none;
}

.weather-chip .chip-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.weather-chip input:checked + .chip-content {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.weather-chip input:checked + .chip-content .chip-icon-svg {
    color: white;
}

/* Positive Grid (What went well) */
.positive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.positive-chip {
    cursor: pointer;
}

.positive-chip input {
    display: none;
}

.positive-chip .chip-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.positive-chip input:checked + .chip-content {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.positive-chip input:checked + .chip-content .chip-icon-svg {
    color: white;
}

/* Negative variant for "nothing good" option */
.positive-chip.negative .chip-content {
    border-color: var(--gray-300);
}

.positive-chip.negative input:checked + .chip-content {
    border-color: var(--danger);
    background: var(--danger);
    color: white;
}

.positive-chip.negative input:checked + .chip-content .chip-icon-svg {
    color: white;
}

/* Dogs List */
.dogs-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.dog-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.dog-card.active {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.dog-card.partner-dog {
    border-style: dashed;
}

.dog-card.partner-dog.active {
    border-style: solid;
}

.dog-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dog-avatar svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

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

.dog-name {
    font-weight: 700;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.dog-breed {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.dog-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.dog-action-btn {
    padding: var(--spacing-xs);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--border-radius-sm);
    transition: var(--transition);
}

.dog-action-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.dog-action-btn.delete:hover {
    background: var(--danger-bg);
    color: var(--danger);
}

.dog-action-btn svg {
    width: 18px;
    height: 18px;
}

.no-dogs-message {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

/* Section header with action */
.section-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-header-with-action h3 {
    margin: 0;
}

/* Equipment Grid */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.equipment-chip {
    cursor: pointer;
}

.equipment-chip input {
    display: none;
}

.equipment-chip .chip-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.equipment-chip input:checked + .chip-content {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.equipment-chip input:checked + .chip-content .chip-icon-svg {
    color: white;
}

/* Location Grid */
.location-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.location-chip {
    cursor: pointer;
}

.location-chip input {
    display: none;
}

.location-chip .chip-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.location-chip input:checked + .chip-content {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.location-chip input:checked + .chip-content .chip-icon-svg {
    color: white;
}

/* Stool Quality Selector */
.stool-selector {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-xs);
}

.stool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xs);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
    font-size: 10px;
}

.stool-btn:hover {
    border-color: var(--primary-light);
}

.stool-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.stool-icon-svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}

.stool-btn.active .stool-icon-svg {
    color: white;
}

.stool-btn[data-stool="diarrhea"].active {
    border-color: var(--danger);
    background: var(--danger-bg);
}

.stool-btn[data-stool="diarrhea"].active .stool-icon-svg {
    color: var(--danger);
}

.stool-btn[data-stool="soft"].active {
    border-color: var(--warning);
    background: var(--warning-bg);
}

.stool-btn[data-stool="soft"].active .stool-icon-svg {
    color: var(--warning);
}

/* Recovery Selector */
.recovery-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.recovery-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    text-align: center;
}

.recovery-btn:hover {
    border-color: var(--primary-light);
}

.recovery-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.recovery-icon {
    font-size: 24px;
}

.recovery-btn small {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Rating Slider */
.rating-slider {
    padding: var(--spacing-md) 0;
}

.rating-slider input[type="range"] {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--success) 0%, var(--warning) 50%, var(--danger) 100%);
    border-radius: var(--border-radius-full);
    outline: none;
}

.rating-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    background: var(--bg-card);
    border: 3px solid var(--primary);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.rating-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.rating-value {
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--primary);
    margin-top: var(--spacing-sm);
}

/* Health Checks */
.health-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.health-item {
    cursor: pointer;
}

.health-item input {
    display: none;
}

.health-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    font-size: var(--font-size-sm);
}

.health-item input:checked + .health-content {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.health-item input:checked + .health-content .health-icon-svg {
    color: white;
}

.health-icon {
    font-size: 18px;
}

/* Rest Selector */
.rest-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.rest-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.rest-btn:hover {
    border-color: var(--primary-light);
}

.rest-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.rest-icon {
    font-size: 28px;
}

/* Emoji Rating */
.emoji-rating {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-sm);
}

.rating-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-xs);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
    min-width: 0;
    text-align: center;
    flex: 1;
    min-height: 90px;
}

.rating-btn:hover {
    transform: scale(1.05);
}

.rating-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.rating-btn[data-rating="5"].active { border-color: var(--rating-5); background: var(--success-bg); }
.rating-btn[data-rating="4"].active { border-color: var(--rating-4); background: #ecfccb; }
.rating-btn[data-rating="3"].active { border-color: var(--rating-3); background: var(--warning-bg); }
.rating-btn[data-rating="2"].active { border-color: var(--rating-2); background: #ffedd5; }
.rating-btn[data-rating="1"].active { border-color: var(--rating-1); background: var(--danger-bg); }

.rating-emoji {
    font-size: 32px;
}

.rating-text {
    font-size: 10px;
    color: var(--text-muted);
    word-break: break-word;
    hyphens: auto;
    line-height: 1.2;
}

/* Custom Fields */
#custom-fields-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.custom-field-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
}

.custom-field-item label {
    flex: 1;
    cursor: pointer;
}

.custom-field-toggle {
    display: flex;
    gap: var(--spacing-sm);
}

.custom-field-toggle button {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.custom-field-toggle button.active {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

/* Form Actions */
.form-actions {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Filter Bar */
.filter-bar {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    overflow-x: auto;
    padding-bottom: var(--spacing-sm);
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.filter-btn:hover {
    border-color: var(--primary-light);
}

.filter-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* History List */
.history-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Time Selector */
/* Insights Filters Container */
.insights-filters {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
    align-items: center;
}

.time-selector {
    display: flex;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    flex: 1;
    min-width: 200px;
}

/* Dog Filter Select */
.dog-selector {
    flex-shrink: 0;
}

.dog-filter-select {
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: var(--spacing-xl);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--white);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    min-width: 140px;
}

.dog-filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

@media (prefers-color-scheme: dark) {
    .dog-filter-select {
        background-color: var(--gray-800);
        border-color: var(--gray-600);
        color: var(--text-primary);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    }
}

.time-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    color: var(--text-secondary);
}

.time-btn.active {
    background: var(--bg-card);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

/* Insights Grid */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
}

.insight-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.insight-card h3 {
    font-size: var(--font-size-base);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary);
}

.insight-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.insight-card-full {
    grid-column: 1 / -1;
}

/* Dog Compare Mode Styles */
.compare-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.compare-dog-card {
    background: var(--bg-elevated);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
}

.compare-dog-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.compare-dog-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.compare-dog-stats {
    display: flex;
    gap: var(--spacing-md);
}

.compare-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.compare-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.compare-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Client Dog Filter for Trainer View */
.client-dog-filter-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-md) 0;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius-md);
}

.client-dog-filter-section label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

.dog-filter-select {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
}

.dog-filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* Compare Dogs Container for Client View */
.compare-dogs-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.compare-dog-card .compare-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.compare-dog-name {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--spacing-sm) 0;
}

/* Compare Triggers */
.compare-triggers {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.compare-trigger-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.compare-trigger-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.compare-trigger-bars {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.compare-trigger-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.compare-dog-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    min-width: 60px;
}

.compare-bar-container {
    flex: 1;
    height: 20px;
    background: var(--bg-elevated);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
}

.compare-bar-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--spacing-xs);
    color: white;
    font-size: var(--font-size-xs);
    font-weight: 600;
    min-width: 20px;
    transition: width 0.3s ease;
}

.chart-container {
    height: 200px;
    position: relative;
}

.chart-container-large {
    height: 300px;
}

/* Correlation Stats */
.correlation-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm);
    background: var(--bg-elevated);
    border-radius: var(--border-radius-sm);
    margin-bottom: var(--spacing-sm);
}

.correlation-stat-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.correlation-stat-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.correlation-rating {
    font-weight: 700;
    color: var(--primary);
    font-size: var(--font-size-lg);
}

.correlation-count {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.correlation-bar {
    height: 8px;
    background: var(--gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-top: var(--spacing-xs);
}

.correlation-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Comparison Stats */
.comparison-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.comparison-row:last-child {
    border-bottom: none;
}

.comparison-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.comparison-values {
    display: flex;
    gap: var(--spacing-md);
}

.comparison-value {
    text-align: center;
}

.comparison-value .value {
    font-weight: 700;
    color: var(--primary);
    font-size: var(--font-size-lg);
    display: block;
}

.comparison-value .label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Trend Legend */
.trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.trend-legend-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.trend-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.trend-legend-color.rating {
    background: var(--primary);
}

.trend-legend-color.medication {
    background: var(--warning);
}

.trend-legend-color.appointment {
    background: var(--success);
}

/* Impact Indicator */
.impact-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.impact-indicator.positive {
    background: var(--success-bg);
    color: var(--success);
}

.impact-indicator.negative {
    background: var(--error-bg);
    color: var(--error);
}

.impact-indicator.neutral {
    background: var(--gray-100);
    color: var(--text-muted);
}

/* Weather Stats */
.weather-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

.weather-stat-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--bg-elevated);
    border-radius: var(--border-radius-sm);
}

.weather-stat-icon {
    font-size: 24px;
}

.weather-stat-info {
    display: flex;
    flex-direction: column;
}

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

.weather-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Coat Comparison */
.coat-comparison {
    display: flex;
    gap: var(--spacing-lg);
}

.coat-item {
    flex: 1;
    text-align: center;
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
}

.coat-icon {
    font-size: 32px;
    margin-bottom: var(--spacing-sm);
}

.coat-value {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--primary);
}

.coat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Treat Stats */
.treat-stats {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.treat-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.treat-label {
    width: 80px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.treat-progress {
    flex: 1;
    height: 24px;
    background: var(--gray-100);
    border-radius: var(--border-radius-full);
    overflow: hidden;
}

.treat-fill {
    height: 100%;
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: white;
    min-width: 40px;
}

.treat-fill.yes { background: var(--success); }
.treat-fill.sometimes { background: var(--warning); }
.treat-fill.no { background: var(--danger); }

/* Recovery Stats */
.recovery-stats {
    display: flex;
    gap: var(--spacing-md);
}

.recovery-stat-item {
    flex: 1;
    text-align: center;
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
}

.recovery-stat-icon {
    font-size: 28px;
    margin-bottom: var(--spacing-sm);
}

.recovery-stat-value {
    font-size: var(--font-size-lg);
    font-weight: 800;
    color: var(--primary);
}

.recovery-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Patterns List */
.patterns-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.pattern-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--primary);
}

.pattern-icon {
    font-size: 24px;
}

.pattern-icon-svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

.pattern-content h4 {
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: #1f2937 !important;
}

.pattern-content p {
    font-size: var(--font-size-sm);
    color: #4b5563 !important;
}

[data-theme="dark"] .pattern-content h4,
.dark .pattern-content h4 {
    color: #f8fafc !important;
}

[data-theme="dark"] .pattern-content p,
.dark .pattern-content p {
    color: #94a3b8 !important;
}

@media (prefers-color-scheme: dark) {
    .pattern-content h4 {
        color: #f8fafc !important;
    }
    .pattern-content p {
        color: #94a3b8 !important;
    }
}

.mood-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mood-chip {
    display: inline-block;
    padding: 4px 8px;
    background: var(--gray-100);
    border-radius: 12px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

[data-theme="dark"] .mood-chip {
    background: var(--gray-700);
    color: var(--gray-300);
}

.no-patterns {
    text-align: center;
    color: var(--text-muted);
    padding: var(--spacing-lg);
}

/* Medication */
.medication-form {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.medication-form .form-section:last-of-type {
    margin-bottom: var(--spacing-xl);
}

.medication-form .btn-primary {
    margin-top: var(--spacing-lg);
}

.med-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.med-type-card {
    cursor: pointer;
}

.med-type-card input {
    display: none;
}

.med-type-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    transition: var(--transition);
    text-align: center;
}

.med-type-card input:checked + .med-type-content {
    border-color: var(--primary);
    background: var(--primary-bg);
    color: var(--primary);
}

.med-type-icon {
    font-size: 32px;
}

.medication-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.medication-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
}

.medication-info h4 {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.medication-dog-badge {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

[data-theme="dark"] .medication-dog-badge {
    background: var(--primary);
    color: white;
}

.medication-info p {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.medication-status {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.medication-status.active {
    background: var(--success-bg);
    color: var(--success);
}

.medication-status.stopped {
    background: var(--gray-200);
    color: var(--text-muted);
}

.medication-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.medication-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: var(--primary);
    color: white;
    cursor: pointer;
    transition: background-color 0.2s;
}

.medication-edit-btn .action-icon-svg {
    width: 14px;
    height: 14px;
}

.medication-edit-btn:hover {
    background: var(--primary-dark);
}

.medication-stop-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: var(--error-bg);
    color: var(--error);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.medication-stop-btn .action-icon-svg {
    width: 12px;
    height: 12px;
}

.medication-stop-btn:hover {
    background: var(--error);
    color: white;
}

.medication-restart-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    border-radius: var(--border-radius-sm);
    background: var(--success-bg);
    color: var(--success);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.medication-restart-btn .action-icon-svg {
    width: 12px;
    height: 12px;
}

.medication-restart-btn:hover {
    background: var(--success);
    color: white;
}

.medication-item.stopped {
    opacity: 0.7;
}

.medication-item.stopped .medication-info h4 {
    color: var(--text-muted);
}

[data-theme="dark"] .medication-stop-btn {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

[data-theme="dark"] .medication-stop-btn:hover {
    background: var(--error);
    color: white;
}

[data-theme="dark"] .medication-restart-btn {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

[data-theme="dark"] .medication-restart-btn:hover {
    background: var(--success);
    color: white;
}

.medication-history {
    margin-top: var(--spacing-xl);
}

.medication-history h3 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
}

/* Appointments Page */
.appointments-form {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.appointments-form h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary);
}

.appointments-form .form-section:last-of-type {
    margin-bottom: var(--spacing-md);
}

.appointments-form .btn-primary {
    margin-top: var(--spacing-md);
}

.appointment-type-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.appointment-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md);
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: var(--transition);
}

.appointment-type-btn:hover {
    border-color: var(--primary);
}

.appointment-type-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: white;
}

.appointment-type-btn.active .appointment-icon-svg {
    color: white;
}

.appointment-icon-svg {
    width: 24px;
    height: 24px;
    color: var(--text-primary);
}

.appointment-type-btn span {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.appointments-upcoming,
.appointments-history {
    margin-top: var(--spacing-xl);
}

.appointments-upcoming h3,
.appointments-history h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--primary);
}

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

.appointment-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

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

.appointment-card-type {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 700;
    color: var(--primary);
}

.appointment-card-type .appointment-icon-svg {
    color: var(--primary);
}

.appointment-card-date {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.appointment-card-location {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.appointment-card-reason {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.appointment-card-notes {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.appointment-card-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.appointment-card-actions button {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.appointment-edit-btn {
    background: var(--primary);
    color: white;
}

.appointment-edit-btn:hover {
    background: var(--primary-dark);
    color: white;
}

.appointment-delete-btn {
    background: var(--error-bg);
    color: var(--error);
}

.appointment-delete-btn:hover {
    background: var(--error);
    color: white;
}

.appointment-card-actions .action-icon-svg {
    width: 16px;
    height: 16px;
}

.appointment-dog-badge {
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    margin-left: var(--spacing-xs);
}

[data-theme="dark"] .appointment-dog-badge {
    background: var(--primary);
    color: white;
}

.empty-appointments {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

/* Settings */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.settings-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.settings-section h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.settings-desc {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: calc(-1 * var(--spacing-sm));
    margin-bottom: var(--spacing-md);
}

/* Sticky Save Bar for Settings */
.sticky-save-bar {
    position: sticky;
    bottom: 70px; /* Above bottom nav */
    background: var(--bg-main);
    padding: var(--spacing-md);
    margin: 0 calc(-1 * var(--spacing-md));
    margin-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    z-index: 10;
}

@media (prefers-color-scheme: dark) {
    .sticky-save-bar {
        background: var(--bg-main);
        border-top-color: var(--border-color);
    }
}

/* Week Start Options */
.week-start-options {
    display: flex;
    gap: var(--spacing-lg);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    border: 2px solid var(--border-color);
    background: var(--white);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.radio-option span {
    color: var(--text-primary);
}

.radio-option:hover {
    border-color: var(--primary-light);
    background: var(--primary-bg);
}

.radio-option:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.radio-option input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-400);
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.radio-option input[type="radio"]:checked {
    border-color: var(--primary);
}

.radio-option input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
}

/* Dark mode for radio options */
@media (prefers-color-scheme: dark) {
    .radio-option {
        background: var(--gray-800);
        border-color: var(--gray-600);
        color: var(--text-primary);
    }

    .radio-option:hover {
        border-color: var(--primary-light);
        background: var(--gray-700);
    }

    .radio-option:has(input:checked) {
        border-color: var(--primary);
        background: var(--gray-700);
    }

    .radio-option input[type="radio"] {
        border-color: var(--gray-500);
        background: var(--gray-800);
    }
}

/* Sync Status */
.sync-status {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.sync-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

.sync-status-item:last-of-type {
    border-bottom: none;
}

.sync-label {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.sync-value {
    font-weight: 600;
    color: var(--text-primary);
}

.sync-value.online {
    color: var(--success);
}

.sync-value.offline {
    color: var(--error);
}

.sync-value.synced {
    color: var(--success);
}

.sync-error {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--error-bg);
    border-radius: var(--border-radius);
    color: var(--error);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-sm);
}

.sync-error-icon {
    font-size: 1.2em;
}

.sync-code-container {
    display: flex;
    gap: var(--spacing-sm);
}

.sync-code-container .form-input {
    flex: 1;
}

.partner-status {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.partner-status.connected {
    background: var(--success-bg);
    color: var(--text-primary);
}

.partner-status.disconnected {
    background: var(--gray-100);
    color: var(--text-muted);
}

/* Partner Info Card */
.partner-info-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.partner-info-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.partner-icon-svg {
    color: var(--success);
    flex-shrink: 0;
}

.partner-info-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.partner-info-name strong {
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.partner-email {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.partner-info-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-left: 40px;
}

.partner-info-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.partner-info-item svg {
    color: var(--primary);
    flex-shrink: 0;
}

/* Color Picker */
.color-picker-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.color-presets {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.color-preset {
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius);
    border: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.color-preset:hover {
    transform: scale(1.1);
}

.color-preset.active {
    border-color: var(--gray-800);
    box-shadow: var(--shadow-md);
}

.color-preset.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.color-custom {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.color-input {
    width: 60px;
    height: 44px;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    cursor: pointer;
    padding: 2px;
    background: var(--bg-card);
}

.color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input::-webkit-color-swatch {
    border: none;
    border-radius: 6px;
}

.color-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.custom-fields-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.custom-field-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
}

.custom-field-setting span {
    flex: 1;
}

.delete-field-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.delete-field-btn:hover {
    background: var(--danger);
    color: white;
}

.add-custom-field-form {
    display: flex;
    gap: var(--spacing-sm);
}

.add-custom-field-form .form-input {
    flex: 1;
}

.settings-buttons {
    display: flex;
    gap: var(--spacing-md);
}

.settings-buttons .btn {
    flex: 1;
}

.about-info {
    text-align: center;
    color: var(--text-secondary);
}

.about-info p {
    margin-bottom: var(--spacing-sm);
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--bottom-nav-height);
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    transition: var(--transition);
    border-radius: var(--border-radius);
}

.nav-item:hover {
    color: var(--text-secondary);
}

.nav-item.active {
    color: var(--primary);
}

.nav-item.active .nav-icon {
    transform: scale(1.1);
}

.nav-icon {
    font-size: 24px;
    transition: var(--transition);
}

.nav-label {
    font-size: var(--font-size-xs);
    font-weight: 600;
}

/* Toast */
.toast {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--spacing-md));
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--gray-800);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    opacity: 0;
    transition: var(--transition-slow);
}

.toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast.success {
    background: var(--success);
}

.toast.error {
    background: var(--danger);
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.modal.open {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: var(--transition);
}

.modal.open .modal-content {
    transform: scale(1);
}

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

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

.modal-header h2 {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gray-100);
    border-radius: var(--border-radius-sm);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: var(--transition);
}

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

.modal-body {
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.modal-body .form-section {
    background: var(--bg-elevated);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

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

/* Walk Detail Modal Content */
.walk-detail-modal-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.walk-detail-header {
    position: sticky;
    top: 0;
    background: var(--bg-card);
    z-index: 10;
    flex-shrink: 0;
}

.walk-detail-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.walk-detail-edit-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--primary);
    color: white;
    border-radius: var(--border-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.walk-detail-edit-btn:hover {
    background: var(--primary-dark);
}

.walk-detail-edit-btn .action-icon-svg {
    width: 18px;
    height: 18px;
}

.walk-detail-footer {
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    text-align: center;
    flex-shrink: 0;
}

.walk-delete-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.walk-delete-link:hover {
    color: var(--error);
    background: var(--error-bg);
}

.walk-delete-link .action-icon-svg {
    width: 16px;
    height: 16px;
}

.walk-detail-section {
    margin-bottom: var(--spacing-lg);
}

.walk-detail-section h4 {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.walk-detail-value {
    font-size: var(--font-size-lg);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.detail-icon-svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.walk-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.walk-detail-tag {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--primary-bg);
    color: var(--primary);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-sm);
}

.walk-detail-tag.seen {
    background: var(--success-bg);
    color: var(--success);
}

.walk-detail-tag.outburst {
    background: var(--danger-bg);
    color: var(--danger);
}

.walk-detail-tag.positive {
    background: var(--primary-bg);
    color: var(--primary);
}

/* Partner Activity */
.partner-activity {
    margin-bottom: var(--spacing-xl);
}

.partner-walk-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent);
}

.partner-avatar {
    width: 40px;
    height: 40px;
    background: var(--accent-light);
    border-radius: var(--border-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.partner-info {
    flex: 1;
}

.partner-name {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--accent-dark);
}

.partner-walk-time {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* Responsive */
@media (min-width: 768px) {
    .quick-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* PWA Install Banner */
.install-banner {
    position: fixed;
    bottom: calc(var(--bottom-nav-height) + var(--spacing-md));
    left: var(--spacing-md);
    right: var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    box-shadow: var(--shadow-lg);
    z-index: 150;
    transform: translateY(200%);
    transition: var(--transition-slow);
}

.install-banner.show {
    transform: translateY(0);
}

.install-banner-icon {
    font-size: 32px;
}

.install-banner-content {
    flex: 1;
}

.install-banner-content h4 {
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
}

.install-banner-content p {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.install-banner-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.install-banner-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--gray-100);
    border-radius: var(--border-radius-full);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .header, .bottom-nav, .side-menu {
        display: none;
    }

    .main-content {
        padding: 0;
    }
}

/* ============================================
   SVG Icon System
   ============================================ */

.icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon-xs {
    width: 16px;
    height: 16px;
}

.icon-sm {
    width: 20px;
    height: 20px;
}

.icon-lg {
    width: 32px;
    height: 32px;
}

.icon-xl {
    width: 48px;
    height: 48px;
}

.icon-2xl {
    width: 64px;
    height: 64px;
}

/* Icon colors */
.icon-primary {
    color: var(--primary);
}

.icon-accent {
    color: var(--accent);
}

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

.icon-warning {
    color: var(--warning);
}

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

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

.icon-white {
    color: white;
}

/* Selector buttons with SVG icons */
.selector-icon {
    width: 32px;
    height: 32px;
    margin-bottom: var(--spacing-xs);
    color: var(--text-secondary);
}

.duration-btn.active .selector-icon,
.mood-btn.active .selector-icon,
.weather-btn.active .selector-icon,
.recovery-btn.active .selector-icon,
.rest-btn.active .selector-icon,
.rating-btn.active .selector-icon {
    color: var(--primary);
}

/* Chip icons */
.chip-icon-svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.trigger-chip input:checked + .chip-content .chip-icon-svg,
.health-item input:checked + .health-content .chip-icon-svg {
    color: var(--primary);
}

/* Toggle button icons */
.toggle-icon-svg {
    width: 24px;
    height: 24px;
}

.toggle-btn.active .toggle-icon-svg {
    color: white;
}

/* Rating button icons */
.rating-icon {
    width: 40px;
    height: 40px;
    transition: var(--transition);
}

.rating-btn[data-rating="5"] .rating-icon { color: var(--rating-5); }
.rating-btn[data-rating="4"] .rating-icon { color: var(--rating-4); }
.rating-btn[data-rating="3"] .rating-icon { color: var(--rating-3); }
.rating-btn[data-rating="2"] .rating-icon { color: var(--rating-2); }
.rating-btn[data-rating="1"] .rating-icon { color: var(--rating-1); }

.rating-btn.active .rating-icon {
    transform: scale(1.2);
}

/* Nav icons */
.nav-icon-svg {
    width: 24px;
    height: 24px;
    transition: var(--transition);
}

.nav-item.active .nav-icon-svg {
    color: var(--primary);
    transform: scale(1.1);
}

/* Menu icons */
.menu-icon-svg {
    width: 22px;
    height: 22px;
}

/* Stat icons */
.stat-icon-svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

/* Action card icon */
.action-icon-svg {
    width: 56px;
    height: 56px;
    color: white;
    opacity: 0.9;
}

/* Walk card rating icon */
.walk-rating-icon {
    width: 32px;
    height: 32px;
}

/* Med type icons */
.med-type-icon-svg {
    width: 36px;
    height: 36px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.med-type-card input:checked + .med-type-content .med-type-icon-svg {
    color: var(--primary);
}

/* Pattern icons */
.pattern-icon-svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
    flex-shrink: 0;
}

/* Splash logo */
.splash-logo-svg {
    width: 100px;
    height: 100px;
    color: white;
    margin-bottom: var(--spacing-md);
    animation: bounce 1s infinite;
}

/* Header logo */
.logo-icon-svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
}

/* Empty state icon */
.empty-icon-svg {
    width: 64px;
    height: 64px;
    color: var(--gray-300);
    margin-bottom: var(--spacing-md);
}

/* Avatar icon */
.avatar-icon {
    width: 100%;
    height: 100%;
    color: var(--primary);
}

/* Duration icons */
.duration-icon-svg {
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.duration-btn.active .duration-icon-svg {
    color: white;
}

/* Mood icons */
.mood-icon-svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.mood-btn.active .mood-icon-svg {
    color: white;
}

/* Weather icons */
.weather-icon-svg {
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.weather-btn.active .weather-icon-svg {
    color: var(--primary);
}

/* Recovery icons */
.recovery-icon-svg {
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.recovery-btn.active .recovery-icon-svg {
    color: white;
}

/* Rest icons */
.rest-icon-svg {
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.rest-btn.active .rest-icon-svg {
    color: white;
}

/* Health icons */
.health-icon-svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.health-item input:checked + .health-content .health-icon-svg {
    color: var(--primary);
}

/* Rating icons (SVG version) */
.rating-icon-svg {
    width: 40px;
    height: 40px;
    transition: var(--transition);
}

.rating-btn[data-rating="5"] .rating-icon-svg { color: var(--rating-5); }
.rating-btn[data-rating="4"] .rating-icon-svg { color: var(--rating-4); }
.rating-btn[data-rating="3"] .rating-icon-svg { color: var(--rating-3); }
.rating-btn[data-rating="2"] .rating-icon-svg { color: var(--rating-2); }
.rating-btn[data-rating="1"] .rating-icon-svg { color: var(--rating-1); }

.rating-btn.active .rating-icon-svg {
    transform: scale(1.2);
}

/* SVG rating container */
.svg-rating {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Coat icon in insights */
.coat-icon-svg {
    width: 32px;
    height: 32px;
    color: var(--primary);
}

/* Partner avatar */
.partner-avatar-svg {
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
}

/* Weather mini icon */
.weather-mini-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    vertical-align: middle;
}

/* Weather stat icon */
.weather-stat-icon svg {
    width: 24px;
    height: 24px;
}

/* Recovery stat icon */
.recovery-stat-icon-svg {
    width: 28px;
    height: 28px;
    color: var(--primary);
    margin-bottom: var(--spacing-xs);
}

/* Header language selector */
.header-lang-selector {
    display: flex;
    gap: 4px;
    align-items: center;
}

.header-lang-btn {
    background: none;
    border: 2px solid transparent;
    padding: 2px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.6;
    transition: var(--transition);
}

.header-lang-btn:hover {
    opacity: 1;
}

.header-lang-btn.active {
    opacity: 1;
    border-color: var(--primary);
}

.header-lang-btn img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

/* Dog age display */
.dog-age-display {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--primary);
    font-weight: 600;
}

/* ============================================
   Trainer Admin Page
   ============================================ */

/* Trainer Mode Section */
.trainer-mode-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.trainer-mode-toggle {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Trainer Card */
.trainer-card {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.trainer-card h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

/* Trainer Code Display */
.trainer-code-section {
    margin-bottom: var(--spacing-lg);
}

.trainer-code-display {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: var(--primary-bg);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin: var(--spacing-md) 0;
}

.trainer-code-value {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--primary);
    letter-spacing: 2px;
}

/* Add Client Section */
.trainer-add-client-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.trainer-add-client-section h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

.search-input-group {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.search-input-group .form-input {
    flex: 1;
}

.client-search-result {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
}

.client-search-result.found {
    background: var(--success-bg);
    border: 2px solid var(--success);
}

.client-search-result.not-found {
    background: var(--warning-bg);
    border: 2px solid var(--warning);
}

.search-result-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.search-result-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.search-result-info .client-avatar {
    width: 40px;
    height: 40px;
}

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

.search-result-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Trainer Clients Section */
.trainer-clients-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.trainer-clients-section h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

/* Trainer Clients List */
.trainer-clients-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.client-card {
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
    transition: var(--transition);
    border: 2px solid transparent;
}

.client-card:hover {
    border-color: var(--primary);
    background: var(--primary-bg);
}

.client-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-lg);
}

.client-info {
    flex: 1;
}

.client-name {
    font-weight: 700;
    color: var(--text-primary);
}

.client-dogs {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.client-last-walk {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

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

.client-arrow svg {
    width: 20px;
    height: 20px;
}

/* Client Detail Section */
.client-detail-section {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.client-header {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.client-header-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: var(--font-size-2xl);
    margin: 0 auto var(--spacing-md);
}

.client-header-name {
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--text-primary);
}

.client-header-info {
    flex: 1;
}

.client-header-email {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.client-header-dogs {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-sm);
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    justify-content: center;
}

.dog-tag {
    background: var(--primary-bg);
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.no-dogs {
    color: var(--text-muted);
    font-style: italic;
}

/* Client Stats Grid */
.client-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.client-stat-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.client-stat-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    color: var(--primary);
}

.client-stat-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Client Walks List */
.client-walks-section,
.client-medications-section,
.client-appointments-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.client-walks-section h3,
.client-medications-section h3,
.client-appointments-section h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

.client-walks-list,
.client-medications-list,
.client-appointments-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.client-walk-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-elevated);
    border-radius: var(--border-radius-sm);
    transition: background-color 0.2s;
}

.client-walk-item.clickable {
    cursor: pointer;
}

.client-walk-item.clickable:hover {
    background: var(--bg-elevated-hover, var(--bg-hover));
}

.client-walk-item .walk-rating-badge {
    flex-shrink: 0;
}

.client-walk-item .walk-arrow {
    margin-left: auto;
    color: var(--text-muted);
}

.client-walk-item .walk-arrow svg {
    width: 20px;
    height: 20px;
}

.client-walk-rating {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: white;
}

.client-walk-rating.rating-5 { background: var(--rating-5); }
.client-walk-rating.rating-4 { background: var(--rating-4); }
.client-walk-rating.rating-3 { background: var(--rating-3); }
.client-walk-rating.rating-2 { background: var(--rating-2); }
.client-walk-rating.rating-1 { background: var(--rating-1); }

.client-walk-info {
    flex: 1;
}

.client-walk-date {
    font-weight: 600;
    color: var(--text-primary);
}

.client-walk-details {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

/* Client Detail Tabs */
.client-tabs {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-xs);
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.client-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 70px;
}

.client-tab:hover {
    color: var(--text-primary);
    background: var(--gray-200);
}

.client-tab.active {
    background: var(--white);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.client-tab .tab-icon {
    width: 20px;
    height: 20px;
}

.client-tab-content {
    display: none;
}

.client-tab-content.active {
    display: block;
}

/* Client Insights Sections */
.client-insights-section,
.client-patterns-section,
.client-correlations-section {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.client-insights-section h3,
.client-patterns-section h3,
.client-correlations-section h3 {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.client-chart-container {
    min-height: 150px;
    margin-bottom: var(--spacing-md);
}

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

.client-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--border-color);
}

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

.client-stat-name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-primary);
    font-weight: 500;
}

.client-stat-name svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}

.client-stat-value {
    font-weight: 600;
    color: var(--primary);
}

/* Trigger bar chart in client view */
.client-trigger-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.client-trigger-label {
    flex: 0 0 120px;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.client-trigger-bar-container {
    flex: 1;
    height: 24px;
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.client-trigger-bar-fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-sm);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--spacing-xs);
    min-width: 30px;
}

.client-trigger-count {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--white);
}

/* Rating trend in client view */
.rating-trend-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    height: 100px;
    padding: var(--spacing-sm) 0;
}

.rating-trend-bar {
    flex: 1;
    max-width: 30px;
    min-width: 8px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.3s ease;
}

.rating-trend-bar.rating-5 { background: var(--rating-5); }
.rating-trend-bar.rating-4 { background: var(--rating-4); }
.rating-trend-bar.rating-3 { background: var(--rating-3); }
.rating-trend-bar.rating-2 { background: var(--rating-2); }
.rating-trend-bar.rating-1 { background: var(--rating-1); }

/* Patterns list in client view */
.client-pattern-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.client-pattern-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.client-pattern-icon svg {
    width: 20px;
    height: 20px;
    color: var(--primary);
}

.client-pattern-content {
    flex: 1;
}

.client-pattern-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.client-pattern-desc {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Correlations in client view */
.client-correlation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.client-correlation-label {
    font-weight: 500;
    color: var(--text-primary);
}

.client-correlation-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
}

.client-correlation-value.positive {
    color: var(--success);
}

.client-correlation-value.negative {
    color: var(--danger);
}

.client-correlation-value.neutral {
    color: var(--text-muted);
}

/* Dark mode adjustments for client tabs */
@media (prefers-color-scheme: dark) {
    .client-tabs {
        background: var(--gray-800);
    }

    .client-tab:hover {
        background: var(--gray-700);
    }

    .client-tab.active {
        background: var(--gray-900);
    }

    .client-insights-section,
    .client-patterns-section,
    .client-correlations-section {
        background: var(--gray-800);
    }

    .client-trigger-bar-container {
        background: var(--gray-700);
    }

    .client-pattern-item,
    .client-correlation-item {
        background: var(--gray-700);
    }
}

/* Trainer Status in Settings */
.trainer-status {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.trainer-status.connected {
    background: var(--success-bg);
    color: var(--success);
}

.trainer-status.disconnected {
    background: var(--gray-100);
    color: var(--text-secondary);
}

.trainer-status.error {
    background: var(--danger-bg);
    color: var(--danger);
}

/* ============================================
   Super Admin Page
   ============================================ */

.admin-warning {
    background: var(--warning-bg);
    color: var(--warning);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.admin-warning svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--warning);
}

/* Admin Stats */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.admin-stat-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.admin-stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--primary);
}

.admin-stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* Trainers Management */
.trainers-management {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

/* Admin Search User Section */
.admin-search-user-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.admin-search-user-section h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-sm);
}

/* Badge styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-full);
    font-size: var(--font-size-xs);
    font-weight: 600;
}

.badge-success {
    background: var(--success-bg);
    color: var(--success);
}

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

.badge-warning {
    background: var(--warning-bg);
    color: var(--warning);
}

.trainers-management h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

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

.trainer-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: var(--transition);
}

.trainer-item:hover {
    border-color: var(--primary-light);
}

.trainer-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
}

.trainer-item-info {
    flex: 1;
}

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

.trainer-item-email {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.trainer-item-code {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    color: var(--primary);
    background: var(--primary-bg);
    padding: 2px 8px;
    border-radius: 4px;
}

.trainer-item-clients {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.trainer-item-actions {
    display: flex;
    gap: var(--spacing-sm);
}

/* Clickable Admin Stat Card */
.admin-stat-card.clickable {
    cursor: pointer;
    transition: var(--transition);
}

.admin-stat-card.clickable:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--primary);
}

/* Admin Users Section */
.admin-users-section {
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-sm);
}

.admin-users-section h3 {
    color: var(--primary);
    margin-bottom: var(--spacing-md);
}

.users-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-height: 400px;
    overflow-y: auto;
}

.user-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.user-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

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

.user-item-name {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.user-item-email {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

.user-item-meta {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

/* Add Trainer Form */
.add-trainer-form {
    background: var(--bg-elevated);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    margin-top: var(--spacing-md);
}

.add-trainer-form h4 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
}

/* Admin Login */
.admin-login-section {
    max-width: 400px;
    margin: var(--spacing-2xl) auto;
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.admin-login-section h2 {
    color: var(--primary);
    margin-bottom: var(--spacing-lg);
}

.admin-login-section .form-section {
    text-align: left;
}

/* ============================================
   Cookie Consent Banner
   ============================================ */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    padding: var(--spacing-lg);
    animation: slideUp 0.4s ease-out;
}

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

.cookie-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.cookie-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    color: var(--primary);
}

.cookie-icon svg {
    width: 100%;
    height: 100%;
}

.cookie-text {
    flex: 1;
    min-width: 200px;
}

.cookie-text h3 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

.cookie-text p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.cookie-actions {
    display: flex;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Dark mode for cookie banner */
@media (prefers-color-scheme: dark) {
    .cookie-banner {
        background: var(--bg-card);
        border-top-color: var(--border-color);
    }
}

/* Mobile responsive */
@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

    .cookie-actions {
        width: 100%;
        flex-direction: column;
    }

    .cookie-actions .btn {
        width: 100%;
    }
}

/* ============================================
   Custom Date/Time Picker
   ============================================ */

.date-picker-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.date-picker-input {
    flex: 1;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.date-picker-trigger {
    display: none;
}

.date-picker-input:hover {
    border-color: var(--primary);
}

/* Calendar Popup */
.date-picker-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    background: var(--bg-card);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    padding: var(--spacing-lg);
    min-width: 320px;
    max-width: 360px;
    width: calc(100% - 40px);
    animation: fadeIn 0.2s ease-out;
}

.date-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    animation: fadeIn 0.2s ease-out;
}

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

/* Calendar Header */
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.calendar-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.calendar-title:hover {
    color: var(--primary);
}

.calendar-nav {
    display: flex;
    gap: var(--spacing-xs);
}

.calendar-nav-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-elevated);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

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

.calendar-nav-btn svg {
    width: 20px;
    height: 20px;
}

/* Calendar Grid */
.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: var(--spacing-sm);
}

.calendar-weekday {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    padding: var(--spacing-xs);
}

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

.calendar-day {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day:hover:not(.disabled):not(.selected) {
    background: var(--bg-elevated);
}

.calendar-day.other-month {
    color: var(--text-muted);
    opacity: 0.5;
}

.calendar-day.today {
    background: var(--primary-bg);
    color: var(--primary);
    font-weight: 600;
}

.calendar-day.selected {
    background: var(--primary);
    color: white;
    font-weight: 600;
}

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

/* Month/Year Selector */
.calendar-months,
.calendar-years {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
}

.calendar-month-btn,
.calendar-year-btn {
    padding: var(--spacing-md);
    border: none;
    background: var(--bg-elevated);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition);
}

.calendar-month-btn:hover,
.calendar-year-btn:hover {
    background: var(--primary);
    color: white;
}

.calendar-month-btn.selected,
.calendar-year-btn.selected {
    background: var(--primary);
    color: white;
}

/* Time Picker */
.time-picker-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.time-picker-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-sm);
}

.time-picker-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.time-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
}

.time-spinner-btn {
    width: 40px;
    height: 32px;
    border: none;
    background: var(--bg-elevated);
    border-radius: var(--border-radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

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

.time-spinner-btn svg {
    width: 16px;
    height: 16px;
}

.time-value {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 50px;
    text-align: center;
    padding: var(--spacing-sm);
    background: var(--bg-elevated);
    border-radius: var(--border-radius-md);
}

.time-separator {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-muted);
}

/* Calendar Actions */
.calendar-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.calendar-actions .btn {
    flex: 1;
}

/* Quick Select Buttons */
.calendar-quick-select {
    display: flex;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.quick-select-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--border-color);
    background: transparent;
    border-radius: var(--border-radius-full);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition);
}

.quick-select-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-select-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .date-picker-popup {
        background: var(--bg-card);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    }

    .calendar-day:hover:not(.disabled):not(.selected) {
        background: var(--bg-elevated);
    }

    .calendar-nav-btn,
    .time-spinner-btn,
    .calendar-month-btn,
    .calendar-year-btn,
    .time-value {
        background: var(--bg-elevated);
        color: var(--text-primary);
    }
}

/* ============================================
   MOBILE RESPONSIVE STYLES
   ============================================ */

@media (max-width: 480px) {
    /* Postwalk mood selector - 2 rows on mobile */
    .postwalk-mood-selector {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Base adjustments */
    :root {
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
        --font-size-base: 0.9375rem;
        --font-size-lg: 1rem;
        --font-size-xl: 1.125rem;
        --font-size-2xl: 1.25rem;
    }

    /* App container */
    .app-container {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }

    /* Section cards */
    .section-card {
        padding: var(--spacing-md);
        border-radius: var(--border-radius);
    }

    /* Insights grid - single column on mobile */
    .insights-grid,
    .client-insights-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    /* Insight cards */
    .insight-card {
        padding: var(--spacing-md);
    }

    .insight-card h3 {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-sm);
    }

    .insight-hint {
        font-size: var(--font-size-xs);
        margin-bottom: var(--spacing-sm);
    }

    /* Chart containers - smaller on mobile */
    .chart-container {
        height: 180px;
    }

    .chart-container-large {
        height: 220px;
    }

    /* Time selector */
    .time-selector,
    .client-time-selector {
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-md);
        flex-wrap: wrap;
    }

    .time-btn {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
        flex: 1;
        min-width: 70px;
    }

    /* Dog filter dropdown */
    .dog-filter-dropdown {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* Stats grid */
    .stats-grid,
    .client-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .stat-card,
    .client-stat-card {
        padding: var(--spacing-sm);
    }

    .stat-value,
    .client-stat-value {
        font-size: var(--font-size-xl);
    }

    .stat-label,
    .client-stat-label {
        font-size: var(--font-size-xs);
    }

    /* Dog stats section */
    .dog-stats-section {
        padding: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
    }

    .dog-stats-header {
        margin-bottom: var(--spacing-xs);
    }

    .dog-stats-name {
        font-size: var(--font-size-sm);
    }

    /* Dog stats cards - vertical layout on mobile */
    .dog-stats-section .quick-stats {
        gap: var(--spacing-xs);
    }

    .dog-stats-section .quick-stats .stat-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var(--spacing-sm);
        border-left: none !important;
        border-top: 3px solid var(--dog-color, var(--primary));
    }

    .dog-stats-section .quick-stats .stat-card .stat-icon-svg,
    .dog-stats-section .quick-stats .stat-card .stat-icon-emoji {
        margin-bottom: var(--spacing-xs);
        font-size: 20px;
    }

    .dog-stats-section .quick-stats .stat-card .stat-icon-svg {
        width: 20px;
        height: 20px;
    }

    .dog-stats-section .quick-stats .stat-card .stat-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dog-stats-section .quick-stats .stat-card .stat-value {
        font-size: var(--font-size-lg);
        font-weight: 800;
        line-height: 1.2;
    }

    .dog-stats-section .quick-stats .stat-card .stat-label {
        font-size: var(--font-size-xs);
        color: var(--text-muted);
        margin-top: 2px;
    }

    /* Walk items */
    .walk-item,
    .client-walk-item {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .walk-rating-badge {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
    }

    .rating-emoji {
        font-size: 1rem;
    }

    .walk-info h3 {
        font-size: var(--font-size-sm);
    }

    .walk-meta {
        font-size: var(--font-size-xs);
    }

    /* Client tabs */
    .client-tabs {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .client-tab {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-xs);
        min-width: max-content;
    }

    .client-tab .tab-icon {
        width: 16px;
        height: 16px;
    }

    .client-tab span {
        display: none;
    }

    /* Show only icons on very small screens */
    .client-tab.active span {
        display: inline;
    }

    /* Client header */
    .client-header {
        padding: var(--spacing-md);
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }

    .client-header-avatar {
        width: 50px;
        height: 50px;
        font-size: var(--font-size-lg);
    }

    .client-header-name {
        font-size: var(--font-size-lg);
    }

    .client-header-dogs {
        flex-wrap: wrap;
        justify-content: center;
    }

    .dog-tag {
        font-size: var(--font-size-xs);
        padding: 2px 8px;
    }

    /* Correlation stats */
    .correlation-stat-item {
        padding: var(--spacing-xs) 0;
    }

    .correlation-stat-label {
        font-size: var(--font-size-sm);
    }

    .correlation-bar {
        height: 6px;
    }

    /* Weather stats */
    .weather-stat-item {
        padding: var(--spacing-xs);
        font-size: var(--font-size-sm);
    }

    /* Pattern cards */
    .pattern-card {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .pattern-icon {
        width: 36px;
        height: 36px;
    }

    .pattern-icon .icon {
        width: 18px;
        height: 18px;
    }

    .pattern-title {
        font-size: var(--font-size-sm);
    }

    .pattern-description {
        font-size: var(--font-size-xs);
    }

    /* Modals */
    .modal-content {
        width: calc(100% - 20px);
        max-height: 90vh;
        margin: 10px;
        padding: var(--spacing-md);
    }

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

    .modal-title {
        font-size: var(--font-size-lg);
    }

    /* Form elements */
    .form-group label {
        font-size: var(--font-size-sm);
    }

    .form-input,
    .form-select,
    .form-textarea {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    /* Option buttons */
    .option-btn {
        padding: var(--spacing-sm);
        font-size: var(--font-size-sm);
    }

    .option-btn .option-icon {
        width: 20px;
        height: 20px;
    }

    /* Trainer section */
    .trainer-mode-section,
    .trainer-code-section,
    .trainer-clients-section {
        padding: var(--spacing-md);
    }

    .trainer-code-display {
        font-size: var(--font-size-xl);
        letter-spacing: 2px;
    }

    /* Bottom navigation */
    .bottom-nav {
        height: 60px;
    }

    .nav-item {
        padding: var(--spacing-xs);
    }

    .nav-icon {
        width: 22px;
        height: 22px;
    }

    .nav-label {
        font-size: 10px;
    }

    /* FAB button */
    .fab-button {
        width: 52px;
        height: 52px;
        bottom: 70px;
        right: var(--spacing-md);
    }

    /* Toast messages */
    .toast {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        bottom: 80px;
        font-size: var(--font-size-sm);
    }

    /* Settings page */
    .settings-section {
        padding: var(--spacing-md);
    }

    .settings-item {
        padding: var(--spacing-sm) 0;
    }

    .settings-label {
        font-size: var(--font-size-sm);
    }

    /* Dog profile cards */
    .dog-profile-card {
        padding: var(--spacing-md);
    }

    .dog-avatar {
        width: 50px;
        height: 50px;
    }

    .dog-name {
        font-size: var(--font-size-lg);
    }

    .dog-breed {
        font-size: var(--font-size-xs);
    }

    /* Full width insight cards on mobile */
    .insight-card-full {
        grid-column: 1;
    }
}

/* Extra small screens (below 360px) */
@media (max-width: 360px) {
    :root {
        --spacing-sm: 6px;
        --spacing-md: 10px;
        --font-size-base: 0.875rem;
    }

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

    .stat-value,
    .client-stat-value {
        font-size: var(--font-size-lg);
    }

    .time-btn {
        padding: var(--spacing-xs);
        font-size: var(--font-size-xs);
    }

    .client-tab span {
        display: none;
    }

    .walk-rating-badge {
        width: 32px;
        height: 32px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .modal-content {
        max-height: 85vh;
    }

    .chart-container {
        height: 150px;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn,
    .option-btn,
    .time-btn,
    .client-tab {
        min-height: 44px;
    }

    /* Remove hover effects on touch devices */
    .walk-item:hover,
    .client-walk-item:hover,
    .option-btn:hover:not(.selected),
    .pattern-card:hover {
        transform: none;
        box-shadow: var(--shadow-sm);
    }

    /* Better scroll behavior */
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }

    .client-tabs {
        scroll-snap-type: x mandatory;
    }

    .client-tab {
        scroll-snap-align: start;
    }
}