/*
 * Range Pro - SpentRounds Brand Theme
 * Design System: Tactical Precision
 *
 * Features:
 * - Olive green / tactical palette with gold accents
 * - Full dark mode support with OS detection
 * - Professional and tactical-focused
 * - Brand-aligned with SpentRounds identity
 */

/* ============================================================================
   GOOGLE FONTS IMPORT
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

/* ============================================================================
   DESIGN TOKENS - Light Mode (Default)
   ============================================================================ */

html {
    /* === Primary Colors === */
    --rp-primary-green: #6B7A3F;                      /* Olive Green - Brand Primary */
    --rp-primary-green-light: hsl(73, 32%, 45%);      /* Lighter olive */
    --rp-primary-green-dark: #3D5A3D;                 /* Dark Green - Brand Secondary */

    /* === Accent Colors === */
    --rp-accent-gold: #D4A574;                        /* Gold/Tan - Brand Accent */
    --rp-accent-gold-light: hsl(32, 54%, 75%);
    --rp-accent-gold-dark: hsl(32, 54%, 55%);

    /* === Neutral Palette === */
    --rp-neutral-50: #F5F5F5;                         /* Light Gray - Brand Background */
    --rp-neutral-100: hsl(0, 0%, 93%);
    --rp-neutral-200: hsl(0, 0%, 88%);
    --rp-neutral-300: hsl(0, 0%, 78%);
    --rp-neutral-400: #666666;                        /* Medium Gray - Brand Secondary Text */
    --rp-neutral-500: hsl(0, 0%, 50%);
    --rp-neutral-600: hsl(0, 0%, 40%);
    --rp-neutral-700: hsl(0, 0%, 30%);
    --rp-neutral-800: hsl(0, 0%, 20%);
    --rp-neutral-900: #2C2C2C;                        /* Dark Text - Brand Primary Text */

    /* === Semantic Colors === */
    --rp-success: hsl(142, 45%, 42%);                 /* Natural green */
    --rp-success-light: hsl(142, 45%, 92%);
    --rp-warning: hsl(38, 75%, 50%);                  /* Amber */
    --rp-warning-light: hsl(38, 75%, 92%);
    --rp-error: hsl(4, 60%, 48%);                     /* Natural red */
    --rp-error-light: hsl(4, 60%, 95%);
    --rp-info: hsl(207, 65%, 48%);                    /* Slate blue */
    --rp-info-light: hsl(207, 65%, 95%);

    /* === Surface Colors === */
    --rp-surface-bg: var(--rp-neutral-50);
    --rp-surface-card: #ffffff;
    --rp-surface-hover: var(--rp-neutral-100);
    --rp-surface-active: var(--rp-neutral-200);

    /* === Text Colors === */
    --rp-text-primary: var(--rp-neutral-900);
    --rp-text-secondary: var(--rp-neutral-600);
    --rp-text-disabled: var(--rp-neutral-400);
    --rp-text-inverse: var(--rp-neutral-50);

    /* === Border Colors === */
    --rp-border-light: var(--rp-neutral-200);
    --rp-border-medium: var(--rp-neutral-300);
    --rp-border-strong: var(--rp-neutral-400);

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

    /* === Spacing === */
    --rp-space-xs: 0.25rem;   /* 4px */
    --rp-space-sm: 0.5rem;    /* 8px */
    --rp-space-md: 1rem;      /* 16px */
    --rp-space-lg: 1.5rem;    /* 24px */
    --rp-space-xl: 2rem;      /* 32px */
    --rp-space-2xl: 3rem;     /* 48px */

    /* === Border Radius === */
    --rp-radius-sm: 0.25rem;  /* 4px */
    --rp-radius-md: 0.5rem;   /* 8px */
    --rp-radius-lg: 0.75rem;  /* 12px */
    --rp-radius-xl: 1rem;     /* 16px */

    /* === Typography === */
    --rp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rp-font-family-heading: 'Bebas Neue', impact, "Arial Black", sans-serif;
    --rp-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --rp-font-size-xs: 0.75rem;    /* 12px */
    --rp-font-size-sm: 0.875rem;   /* 14px */
    --rp-font-size-base: 1rem;     /* 16px */
    --rp-font-size-lg: 1.125rem;   /* 18px */
    --rp-font-size-xl: 1.25rem;    /* 20px */
    --rp-font-size-2xl: 1.5rem;    /* 24px */
    --rp-font-size-3xl: 1.875rem;  /* 30px */

    --rp-font-weight-normal: 400;
    --rp-font-weight-medium: 500;
    --rp-font-weight-semibold: 600;
    --rp-font-weight-bold: 700;

    --rp-line-height-tight: 1.25;
    --rp-line-height-normal: 1.5;
    --rp-line-height-relaxed: 1.75;

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

/* ============================================================================
   DARK MODE THEME
   ============================================================================ */

html[theme="dark"] {
    /* === Primary Colors - KEEP SAME AS LIGHT MODE for button consistency === */
    --rp-primary-green: #6B7A3F;                      /* Same olive as light mode */
    --rp-primary-green-light: hsl(73, 32%, 45%);
    --rp-primary-green-dark: #3D5A3D;                 /* Same dark green as light mode */

    /* === Override Lumo primary color to match light mode === */
    --lumo-primary-color: #6B7A3F;
    --lumo-primary-color-50pct: rgba(107, 122, 63, 0.5);
    --lumo-primary-color-10pct: rgba(107, 122, 63, 0.1);
    --lumo-primary-text-color: #3D5A3D;

    /* === Accent Colors === */
    --rp-accent-gold: hsl(32, 54%, 70%);              /* Brighter gold for dark bg */
    --rp-accent-gold-light: hsl(32, 54%, 80%);
    --rp-accent-gold-dark: hsl(32, 54%, 60%);

    /* === Neutral Palette (Inverted - Flat Dark Earth tones) === */
    --rp-neutral-50: hsl(30, 8%, 12%);                /* Dark earth base */
    --rp-neutral-100: hsl(30, 8%, 18%);
    --rp-neutral-200: hsl(30, 8%, 24%);
    --rp-neutral-300: hsl(30, 8%, 32%);
    --rp-neutral-400: hsl(30, 6%, 50%);
    --rp-neutral-500: hsl(30, 6%, 60%);
    --rp-neutral-600: hsl(30, 5%, 70%);
    --rp-neutral-700: hsl(30, 4%, 80%);
    --rp-neutral-800: hsl(30, 3%, 88%);
    --rp-neutral-900: hsl(30, 2%, 95%);               /* Light */

    /* === Semantic Colors - Keep success same as light mode for button consistency === */
    --rp-success: hsl(142, 45%, 42%);                 /* Same as light mode */
    --rp-success-light: hsl(142, 45%, 20%);

    /* === Override Lumo success color to match light mode === */
    --lumo-success-color: hsl(142, 45%, 42%);
    --lumo-success-color-50pct: hsla(142, 45%, 42%, 0.5);
    --lumo-success-color-10pct: hsla(142, 45%, 42%, 0.1);
    --lumo-success-text-color: hsl(142, 45%, 42%);
    --rp-warning: hsl(38, 75%, 55%);
    --rp-warning-light: hsl(38, 75%, 20%);
    --rp-error: hsl(4, 60%, 55%);
    --rp-error-light: hsl(4, 60%, 20%);
    --rp-info: hsl(207, 65%, 55%);
    --rp-info-light: hsl(207, 65%, 20%);

    /* === Surface Colors (Flat Dark Earth) === */
    --rp-surface-bg: hsl(30, 8%, 10%);                /* Dark earth background */
    --rp-surface-card: hsl(30, 8%, 15%);
    --rp-surface-hover: hsl(30, 8%, 20%);
    --rp-surface-active: hsl(30, 8%, 25%);

    /* === Text Colors === */
    --rp-text-primary: var(--rp-neutral-900);
    --rp-text-secondary: var(--rp-neutral-600);
    --rp-text-disabled: var(--rp-neutral-400);
    --rp-text-inverse: var(--rp-neutral-50);

    /* === Border Colors === */
    --rp-border-light: var(--rp-neutral-200);
    --rp-border-medium: var(--rp-neutral-300);
    --rp-border-strong: var(--rp-neutral-400);

    /* === Shadows (softer in dark mode) === */
    --rp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --rp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --rp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --rp-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);

    /* === CRITICAL: Override Lumo dark mode colors with Flat Dark Earth === */
    /* Background colors */
    --lumo-base-color: hsl(30, 8%, 15%);              /* Card/component background */
    --lumo-tint-5pct: hsla(30, 8%, 100%, 0.05);
    --lumo-tint-10pct: hsla(30, 8%, 100%, 0.1);
    --lumo-tint-20pct: hsla(30, 8%, 100%, 0.2);
    --lumo-tint-30pct: hsla(30, 8%, 100%, 0.3);
    --lumo-tint-40pct: hsla(30, 8%, 100%, 0.4);
    --lumo-tint-50pct: hsla(30, 8%, 100%, 0.5);
    --lumo-tint-60pct: hsla(30, 8%, 100%, 0.6);
    --lumo-tint-70pct: hsla(30, 8%, 100%, 0.7);
    --lumo-tint-80pct: hsla(30, 8%, 100%, 0.8);
    --lumo-tint-90pct: hsla(30, 8%, 100%, 0.9);
    --lumo-tint: hsl(30, 8%, 95%);

    /* Shade colors (used for shadows, borders, overlays) */
    --lumo-shade-5pct: hsla(30, 8%, 0%, 0.05);
    --lumo-shade-10pct: hsla(30, 8%, 0%, 0.1);
    --lumo-shade-20pct: hsla(30, 8%, 0%, 0.2);
    --lumo-shade-30pct: hsla(30, 8%, 0%, 0.3);
    --lumo-shade-40pct: hsla(30, 8%, 0%, 0.4);
    --lumo-shade-50pct: hsla(30, 8%, 0%, 0.5);
    --lumo-shade-60pct: hsla(30, 8%, 0%, 0.6);
    --lumo-shade-70pct: hsla(30, 8%, 0%, 0.7);
    --lumo-shade-80pct: hsla(30, 8%, 0%, 0.8);
    --lumo-shade-90pct: hsla(30, 8%, 0%, 0.9);
    --lumo-shade: hsl(30, 8%, 5%);

    /* Contrast colors (used for text, icons on backgrounds) */
    --lumo-contrast-5pct: hsla(30, 6%, 95%, 0.05);
    --lumo-contrast-10pct: hsla(30, 6%, 95%, 0.1);
    --lumo-contrast-20pct: hsla(30, 6%, 95%, 0.2);
    --lumo-contrast-30pct: hsla(30, 6%, 95%, 0.3);
    --lumo-contrast-40pct: hsla(30, 6%, 95%, 0.4);
    --lumo-contrast-50pct: hsla(30, 6%, 95%, 0.5);
    --lumo-contrast-60pct: hsla(30, 6%, 95%, 0.6);
    --lumo-contrast-70pct: hsla(30, 6%, 95%, 0.7);
    --lumo-contrast-80pct: hsla(30, 6%, 95%, 0.8);
    --lumo-contrast-90pct: hsla(30, 6%, 95%, 0.9);
    --lumo-contrast: hsl(30, 6%, 95%);

    /* Text colors - warm cream/tan instead of pure white */
    --lumo-header-text-color: hsl(35, 20%, 92%);       /* Warm cream for headers */
    --lumo-body-text-color: hsl(35, 18%, 88%);         /* Warm off-white for body */
    --lumo-secondary-text-color: hsl(32, 12%, 65%);    /* Muted tan for secondary */
    --lumo-tertiary-text-color: hsl(32, 10%, 50%);     /* Darker tan for tertiary */
    --lumo-disabled-text-color: hsl(30, 8%, 38%);      /* Dark tan for disabled */

    /* Primary text color override */
    --lumo-primary-text-color: hsl(80, 35%, 55%);      /* Lighter olive for links/primary text */
}

/* ============================================================================
   VAADIN LUMO THEME OVERRIDES
   ============================================================================ */

html {
    /* Override Lumo with our custom colors */
    --lumo-primary-color: var(--rp-primary-green);
    --lumo-primary-color-50pct: color-mix(in srgb, var(--rp-primary-green) 50%, transparent);
    --lumo-primary-color-10pct: color-mix(in srgb, var(--rp-primary-green) 10%, transparent);
    --lumo-primary-text-color: var(--rp-primary-green-dark);

    --lumo-error-color: var(--rp-error);
    --lumo-error-color-50pct: color-mix(in srgb, var(--rp-error) 50%, transparent);
    --lumo-error-color-10pct: color-mix(in srgb, var(--rp-error) 10%, transparent);
    --lumo-error-text-color: var(--rp-error);

    --lumo-success-color: var(--rp-success);
    --lumo-success-color-50pct: color-mix(in srgb, var(--rp-success) 50%, transparent);
    --lumo-success-color-10pct: color-mix(in srgb, var(--rp-success) 10%, transparent);
    --lumo-success-text-color: var(--rp-success);
    --lumo-success-contrast-color: #ffffff;

    --lumo-shade: var(--rp-neutral-900);
    --lumo-shade-5pct: color-mix(in srgb, var(--rp-neutral-900) 5%, transparent);
    --lumo-shade-10pct: color-mix(in srgb, var(--rp-neutral-900) 10%, transparent);
    --lumo-shade-20pct: color-mix(in srgb, var(--rp-neutral-900) 20%, transparent);
    --lumo-shade-30pct: color-mix(in srgb, var(--rp-neutral-900) 30%, transparent);
    --lumo-shade-40pct: color-mix(in srgb, var(--rp-neutral-900) 40%, transparent);
    --lumo-shade-50pct: color-mix(in srgb, var(--rp-neutral-900) 50%, transparent);
    --lumo-shade-60pct: color-mix(in srgb, var(--rp-neutral-900) 60%, transparent);
    --lumo-shade-70pct: color-mix(in srgb, var(--rp-neutral-900) 70%, transparent);
    --lumo-shade-80pct: color-mix(in srgb, var(--rp-neutral-900) 80%, transparent);
    --lumo-shade-90pct: color-mix(in srgb, var(--rp-neutral-900) 90%, transparent);

    --lumo-base-color: var(--rp-surface-card);
    --lumo-body-text-color: var(--rp-text-primary);
    --lumo-secondary-text-color: var(--rp-text-secondary);
    --lumo-disabled-text-color: var(--rp-text-disabled);

    --lumo-border-radius-s: var(--rp-radius-sm);
    --lumo-border-radius-m: var(--rp-radius-md);
    --lumo-border-radius-l: var(--rp-radius-lg);

    --lumo-font-family: var(--rp-font-family);
    --lumo-font-size-xs: var(--rp-font-size-xs);
    --lumo-font-size-s: var(--rp-font-size-sm);
    --lumo-font-size-m: var(--rp-font-size-base);
    --lumo-font-size-l: var(--rp-font-size-lg);
    --lumo-font-size-xl: var(--rp-font-size-xl);
    --lumo-font-size-xxl: var(--rp-font-size-2xl);
    --lumo-font-size-xxxl: var(--rp-font-size-3xl);
}

/* ============================================================================
   GLOBAL STYLES
   ============================================================================ */

body {
    background-color: var(--rp-surface-bg);
    color: var(--rp-text-primary);
    font-family: var(--rp-font-family);
    font-size: var(--rp-font-size-base);
    line-height: var(--rp-line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings use Bebas Neue font */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--rp-font-family-heading);
    letter-spacing: 0.02em;
    font-weight: 400; /* Bebas Neue is always bold-looking */
}

/* Logo filter for dark mode */
html {
    --logo-filter: none;
}

html[theme="dark"] {
    /* Invert and adjust logo colors for dark mode readability */
    --logo-filter: brightness(0) invert(1);
}

/* Force button visibility in dark mode */
vaadin-button[theme~="tertiary"] vaadin-icon {
    color: var(--lumo-body-text-color) !important;
}

/* ============================================================================
   INVENTORY LOCATION STYLING (if still needed)
   ============================================================================ */

.room {
    border: 2px dashed var(--rp-border-medium);
    padding: var(--rp-space-lg);
    margin: var(--rp-space-md);
    min-height: 200px;
    border-radius: var(--rp-radius-lg);
    background-color: var(--rp-surface-card);
    transition: border-color var(--rp-transition-base);
}

.room:hover {
    border-color: var(--rp-primary-green);
}

.locker {
    border: 2px solid var(--rp-border-strong);
    background-color: var(--rp-surface-hover);
    padding: var(--rp-space-md);
    margin: var(--rp-space-sm);
    border-radius: var(--rp-radius-md);
    box-shadow: var(--rp-shadow-sm);
}

.box {
    background-color: color-mix(in srgb, var(--rp-primary-green) 15%, var(--rp-surface-card));
    border: 1px solid var(--rp-primary-green);
    padding: var(--rp-space-sm);
    margin: var(--rp-space-sm);
    cursor: grab;
    border-radius: var(--rp-radius-sm);
    transition: transform var(--rp-transition-fast), box-shadow var(--rp-transition-fast);
}

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

.box:active {
    cursor: grabbing;
}

/* Dragged items */
.v-dragged {
    opacity: 0.5;
    transform: scale(0.95);
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.text-primary { color: var(--rp-text-primary); }
.text-secondary { color: var(--rp-text-secondary); }
.text-success { color: var(--rp-success); }
.text-error { color: var(--rp-error); }
.text-warning { color: var(--rp-warning); }

.bg-surface { background-color: var(--rp-surface-card); }
.bg-hover { background-color: var(--rp-surface-hover); }

.shadow-sm { box-shadow: var(--rp-shadow-sm); }
.shadow-md { box-shadow: var(--rp-shadow-md); }
.shadow-lg { box-shadow: var(--rp-shadow-lg); }

.rounded-sm { border-radius: var(--rp-radius-sm); }
.rounded-md { border-radius: var(--rp-radius-md); }
.rounded-lg { border-radius: var(--rp-radius-lg); }

/* ============================================================================
   VIEW-SPECIFIC STYLES
   ============================================================================ */

/* Dashboard View */
.dashboard-view vaadin-board-row > * {
    border-bottom: 1px solid var(--lumo-contrast-10pct);
    border-right: 1px solid var(--lumo-contrast-10pct);
}

.dashboard-view vaadin-board-row.small > * {
    border-right: none;
}

.dashboard-view vaadin-board-row.medium > *:nth-child(even),
.dashboard-view vaadin-board-row.medium > *:only-child {
    border-right: none;
}

.dashboard-view vaadin-board-row.large > *:last-child {
    border-right: none;
}

/* Master-Detail View */
.master-detail-view {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.master-detail-view vaadin-split-layout {
    width: 100%;
    height: 100%;
}

.master-detail-view vaadin-grid {
    height: 100%;
}

.master-detail-view .editor-layout {
    display: flex;
    flex-direction: column;
    width: 400px;
}

.master-detail-view .editor {
    flex-grow: 1;
    padding: var(--lumo-space-l);
}

.master-detail-view .editor vaadin-checkbox {
    padding-top: var(--lumo-space-m);
}

.master-detail-view .button-layout {
    width: 100%;
    flex-wrap: wrap;
    background-color: var(--lumo-contrast-5pct);
    padding-bottom: var(--lumo-space-s);
    padding-top: var(--lumo-space-s);
    padding-left: var(--lumo-space-l);
    padding-right: var(--lumo-space-l);
    gap: var(--lumo-space-m);
}

.master-detail-view .grid-wrapper {
    width: 100%;
}

/* ============================================================================
   TREEGRID DRAG AND DROP STYLES
   Uses ::part() selectors to style shadow DOM elements from outside
   Part names come from setPartNameGenerator() on the TreeGrid
   ============================================================================ */

/* When a drag is in progress - cursor on the grid element */
vaadin-grid.dragging {
    cursor: grabbing;
}

/* Row being dragged - reduced opacity */
vaadin-grid.dragging::part(cell dragging-source) {
    opacity: 0.5;
    background-color: var(--lumo-contrast-10pct);
}

/* Valid drop target - green highlight */
vaadin-grid.dragging::part(cell drop-target-valid) {
    background-color: var(--rp-success-light);
    box-shadow: inset 0 0 0 2px var(--rp-success);
}

/* Invalid drop target - red highlight */
vaadin-grid.dragging::part(cell drop-target-invalid) {
    background-color: var(--rp-error-light);
    box-shadow: inset 0 0 0 2px var(--rp-error);
    cursor: not-allowed;
}

/* ============================================================================
   TOUR OVERLAY AND TOOLTIP STYLES
   ============================================================================ */

/* Tour backdrop overlay - semi-transparent with pointer events passthrough */
.tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9998;
    pointer-events: none;
}

/* Spotlight container - positioned around the target element */
.tour-spotlight {
    position: absolute;
    z-index: 9999;
    pointer-events: none;
    border-radius: var(--rp-radius-md);
    /* Box shadow creates the darkened overlay effect around the spotlight */
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

/* Target element highlight pulse animation */
.tour-spotlight::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border: 2px solid var(--rp-primary-green);
    border-radius: calc(var(--rp-radius-md) + 4px);
    animation: tour-pulse 2s ease-in-out infinite;
}

@keyframes tour-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.02);
    }
}

/* Tour tooltip container */
.tour-tooltip {
    position: absolute;
    z-index: 10000;
    background-color: var(--rp-surface-card);
    border-radius: var(--rp-radius-lg);
    box-shadow: var(--rp-shadow-xl);
    padding: var(--rp-space-lg);
    max-width: 320px;
    min-width: 260px;
    pointer-events: auto;
}

/* Dark mode tooltip adjustments */
html[theme="dark"] .tour-tooltip {
    background-color: hsl(30, 8%, 18%);
    border: 1px solid var(--rp-border-light);
}

/* Tooltip arrow - positioned via JS */
.tour-tooltip::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--rp-surface-card);
    transform: rotate(45deg);
    box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05);
}

html[theme="dark"] .tour-tooltip::before {
    background-color: hsl(30, 8%, 18%);
    border-left: 1px solid var(--rp-border-light);
    border-top: 1px solid var(--rp-border-light);
}

/* Arrow positions */
.tour-tooltip[data-placement="bottom"]::before {
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.tour-tooltip[data-placement="top"]::before {
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(225deg);
}

.tour-tooltip[data-placement="left"]::before {
    right: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(315deg);
}

.tour-tooltip[data-placement="right"]::before {
    left: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(135deg);
}

/* Tooltip header */
.tour-tooltip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--rp-space-sm);
}

.tour-tooltip-title {
    font-family: var(--rp-font-family-heading);
    font-size: var(--rp-font-size-xl);
    color: var(--rp-text-primary);
    margin: 0;
    letter-spacing: 0.02em;
}

.tour-tooltip-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--rp-space-xs);
    color: var(--rp-text-secondary);
    border-radius: var(--rp-radius-sm);
    transition: all var(--rp-transition-fast);
}

.tour-tooltip-close:hover {
    background-color: var(--rp-surface-hover);
    color: var(--rp-text-primary);
}

/* Tooltip content */
.tour-tooltip-content {
    color: var(--rp-text-secondary);
    font-size: var(--rp-font-size-sm);
    line-height: var(--rp-line-height-normal);
    margin-bottom: var(--rp-space-md);
}

/* Tooltip footer with navigation */
.tour-tooltip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rp-space-sm);
}

.tour-tooltip-progress {
    font-size: var(--rp-font-size-xs);
    color: var(--rp-text-disabled);
}

.tour-tooltip-actions {
    display: flex;
    gap: var(--rp-space-sm);
}

/* Navigation buttons */
.tour-btn {
    padding: var(--rp-space-xs) var(--rp-space-md);
    border-radius: var(--rp-radius-md);
    font-size: var(--rp-font-size-sm);
    font-weight: var(--rp-font-weight-medium);
    cursor: pointer;
    transition: all var(--rp-transition-fast);
    border: none;
}

.tour-btn-prev {
    background-color: transparent;
    color: var(--rp-text-secondary);
    border: 1px solid var(--rp-border-medium);
}

.tour-btn-prev:hover {
    background-color: var(--rp-surface-hover);
    color: var(--rp-text-primary);
}

.tour-btn-next {
    background-color: var(--rp-primary-green);
    color: white;
}

.tour-btn-next:hover {
    background-color: var(--rp-primary-green-dark);
}

.tour-btn-skip {
    background: none;
    border: none;
    color: var(--rp-text-disabled);
    font-size: var(--rp-font-size-xs);
    cursor: pointer;
    padding: var(--rp-space-xs);
}

.tour-btn-skip:hover {
    color: var(--rp-text-secondary);
    text-decoration: underline;
}

/* Entry animation */
.tour-tooltip-enter {
    animation: tour-tooltip-in 0.3s ease forwards;
}

@keyframes tour-tooltip-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}