/* Classic Ski School Scheduler - Company Theme */
/* Optimized for portrait orientation, readable from 3m distance */

/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Company Colors - Classic Ski School Yellow & Black */
    --color-primary: #ffed00;        /* Bright yellow (logo color) */
    --color-secondary: #1a1a1a;      /* Dark black/gray */
    --color-accent: #ffed00;         /* Yellow for accents */

    /* Background Colors */
    --color-background: #1a1a1a;     /* Dark background */
    --color-card: #2a2a2a;           /* Slightly lighter for cards */
    --color-card-content: #ffffff;   /* White cards for lesson content */

    /* Text Colors */
    --color-text: #ffffff;           /* White text on dark */
    --color-text-dark: #1a1a1a;      /* Dark text on light */
    --color-text-light: #cccccc;     /* Light gray */
    --color-text-muted: #999999;     /* Muted gray */

    /* Border */
    --color-border: #333333;
    --color-border-light: #e5e7eb;

    /* Time slot colors - adjusted for visibility */
    --color-slot-1: #e3f2fd;  /* 08:00-09:59 - light blue */
    --color-slot-2: #e8f5e9;  /* 10:00-11:59 - light green */
    --color-slot-3: #fff8e1;  /* 12:00-13:59 - light yellow */
    --color-slot-4: #fce4ec;  /* 14:00-15:59 - light pink */
    --color-slot-5: #f3e5f5;  /* 16:00+ - light purple */

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-base: 16px;
    --font-size-large: 21px;
    --font-size-xlarge: 26px;
    --font-size-small: 13px;

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

    /* Card */
    --card-radius: 6px;
    --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Reset and base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    background: var(--color-background);
    color: var(--color-text);
}

/* Container - full height layout with background image */
.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
    background-image: url('vyuka-bg-4.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Header - datetime display */
.header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(26, 26, 26, 0.85);
    color: var(--color-text);
    border-radius: var(--card-radius);
    margin-bottom: var(--spacing-lg);
    border-bottom: 3px solid var(--color-primary);
}

/* Date/time display */
.datetime-display {
    font-size: var(--font-size-xlarge);
    font-weight: 700;
    color: var(--color-primary);
    font-family: 'Courier New', Consolas, monospace;
}

/* Main content */
.content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    overflow-y: auto;
}

/* Sections */
.lessons-section {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--card-radius);
    padding: var(--spacing-lg);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(4px);
}

.section-title {
    font-size: var(--font-size-large);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-dark);
}

/* Lessons container - flow left to right, top to bottom */
.lessons-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

/* Lesson card - wraps on narrow displays */
.lesson-card {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1px var(--spacing-xs);
    padding: 2px var(--spacing-xs);
    background: #f5f5f5;
    border-radius: var(--card-radius);
    font-size: var(--font-size-base);
    max-width: 100%;
    color: var(--color-text-dark);
}

/* Time group separator - forces new line */
.time-break {
    flex-basis: 100%;
    height: 0;
}

/* Time slot colors */
/* Main page cards: inverse colors (dark bg, yellow text) */
.main-page .lesson-card {
    background: var(--color-secondary);
    color: var(--color-primary);
}

/* Plain text - no labels */
.lesson-time {
    font-weight: 700;
}

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

.lesson-group-type {
}

.lesson-level {
}

.lesson-location {
}

.participant-list {
}

.instructor-name {
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: var(--spacing-xl);
    font-size: var(--font-size-large);
    color: var(--color-text-muted);
}

/* Loading state */
.loading {
    text-align: center;
    padding: var(--spacing-xl);
    font-size: var(--font-size-large);
    color: var(--color-text-muted);
    animation: pulse 1.5s ease-in-out infinite;
}

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

/* Error state */
.error {
    text-align: center;
    padding: var(--spacing-xl);
    font-size: var(--font-size-large);
    color: #ef4444;
}

/* Page indicator for rotation */
.page-indicator {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xl);
    padding: var(--spacing-md) var(--spacing-xl);
    background: rgba(0, 0, 0, 0.8);
    border-radius: var(--card-radius);
    z-index: 100;
}

.page-indicator:empty {
    display: none;
}

.page-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: default;
}

.page-dot-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-text-muted);
    transition: all 0.3s ease;
}

/* Active page (currently displayed) - white filled */
.page-dot.active .page-dot-circle {
    background: #ffffff;
    transform: scale(1.3);
}

/* Main slot (current time window) - yellow border */
.page-dot.main .page-dot-circle {
    border: 3px solid var(--color-primary);
}

.page-dot-label {
    font-size: 18px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Active page label - white */
.page-dot.active .page-dot-label {
    color: #ffffff;
    font-weight: 600;
}

/* Main slot label - yellow */
.page-dot.main .page-dot-label {
    color: var(--color-primary);
}

/* Footer */
.footer {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-card);
    border-radius: var(--card-radius);
    text-align: center;
    font-size: var(--font-size-small);
    color: var(--color-text-light);
}

.status {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
}

/* No scrolling - fit everything on page */
html, body {
    overflow: hidden;
}

.content {
    overflow: hidden;
}

/* Twemoji flag sizing */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
}