/**
 * Lifa Learning Platform - Shared Styles
 *
 * Include in HTML with:
 *   <link rel="stylesheet" href="assets/css/shared.css">
 *
 * Also requires:
 *   <script src="https://cdn.tailwindcss.com"></script>
 *   <script src="https://unpkg.com/lucide@latest"></script>
 */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&family=Inter:wght@400;600&display=swap');

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f9ff;
    /* Prevent pull-to-refresh on mobile */
    overscroll-behavior-y: none;
}

.handwritten {
    font-family: 'Comic Neue', cursive;
}

/* Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

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

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

/* Marker Styles (for Sachaufgaben word marking) */
.word-span {
    cursor: pointer;
    padding: 2px 1px;
    border-radius: 4px;
    margin: 0 1px;
    border-bottom: 2px solid transparent;
    transition: background-color 0.1s;
    /* Critical for tablet: prevent native text selection */
    user-select: none;
    -webkit-user-select: none;
    display: inline-block;
}

.marker-green {
    background-color: #bbf7d0;
    border-bottom-color: #22c55e;
}

.marker-blue {
    background-color: #bfdbfe;
    border-bottom-color: #3b82f6;
}

/* Tool Button Styles */
.tool-btn {
    transition: all 0.2s;
    border: 2px solid transparent;
}

.tool-btn.active {
    transform: scale(1.05);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tool-btn.active.btn-green {
    border-color: #22c55e;
    background-color: #dcfce7;
}

.tool-btn.active.btn-blue {
    border-color: #3b82f6;
    background-color: #dbeafe;
}

.tool-btn.active.btn-eraser {
    border-color: #9ca3af;
    background-color: #f3f4f6;
}

/* Prevent scrolling while painting on touch devices */
#problem-text {
    touch-action: none;
}

/* Calculation Input Styles */
.calc-step {
    font-family: 'Comic Neue', cursive;
    font-size: 1.5rem;
}

.calc-input {
    font-family: 'Comic Neue', cursive;
    font-size: 1.75rem;
    text-align: center;
    width: 120px;
    padding: 8px 12px;
    border: 3px solid #d1d5db;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s;
}

.calc-input:focus {
    border-color: #6366f1;
}

.calc-input.correct {
    border-color: #22c55e;
    background-color: #dcfce7;
}

.calc-input.incorrect {
    border-color: #ef4444;
    background-color: #fee2e2;
}

/* Hide number input spinners */
.calc-input::-webkit-outer-spin-button,
.calc-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.calc-input {
    -moz-appearance: textfield;
}

/* Navigation Tabs */
.nav-tab {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 10px 10px 0 0;
    transition: all 0.2s;
    border: 2px solid transparent;
    border-bottom: none;
    white-space: nowrap;
}

.nav-tab.active {
    background-color: white;
    border-color: #e0e7ff;
    color: #4f46e5;
}

.nav-tab:not(.active) {
    background-color: #e0e7ff;
    color: #6366f1;
}

.nav-tab:not(.active):hover {
    background-color: #c7d2fe;
}