/* AI CONTEXT: Common Styles
   PURPOSE: Shared base styles across all pages
   DEPENDENCIES: —
   PATTERNS: CSS reset + utility classes */

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f2f5;
    color: #333;
    min-height: 100vh;
    box-sizing: border-box;
}

/* ── Modal overlay ──────────────────────────────────────────────────── */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex; align-items: center; justify-content: center;
}
.modal-content {
    background: #fff; padding: 25px; border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; gap: 15px; min-width: 300px;
}
.modal-content h3 { margin-top: 0; text-align: center; color: #1a237e; }
.modal-field { display: flex; gap: 10px; align-items: center; }
.modal-field label { width: 80px; flex-shrink: 0; }
.modal-field input[type="number"] {
    width: 70px; padding: 8px; border-radius: 4px;
    border: 1px solid #ccc; font-size: 1em; text-align: right;
}
.modal-buttons { display: flex; justify-content: space-around; margin-top: 10px; }
.modal-buttons button {
    padding: 10px 20px; color: #fff; border: none;
    border-radius: 5px; cursor: pointer; font-size: 0.9em;
}

/* ── Error banner (error_boundary.js) ───────────────────────────────── */
#offline-banner {
    display: none;
    position: fixed; top: 0; left: 0; width: 100%; z-index: 3000;
    background: #f44336; color: #fff; text-align: center;
    padding: 8px 16px; font-weight: bold; font-size: 0.95em;
}
#offline-banner.visible { display: block; }

/* ── Shake animation ────────────────────────────────────────────────── */
@keyframes shake {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(-5px); }
    50%  { transform: translateX(5px); }
    75%  { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}