* { margin: 0; padding: 0; box-sizing: border-box; } /* Show only the active language, driven by the attribute that assets/app.js maintains. Visible elements keep their natural display, so .gallery-link stays inline-block instead of being forced to inline (which makes its vertical padding overlap the text above it). */ html[lang="fr"] [data-lang="en"], html[lang="en"] [data-lang="fr"] { display: none; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f5f5f5; color: #333; min-height: 100vh; } .lang-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 100; } .lang-toggle button { background: #333; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; font-weight: 600; } .lang-toggle button:hover { background: #555; } .container { max-width: 600px; margin: 4rem auto; padding: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } h1 { text-align: center; margin-bottom: 2rem; color: #222; font-size: 1.5rem; } form { display: flex; flex-direction: column; gap: 1rem; } label { font-weight: 600; font-size: 0.9rem; } input[type="text"], input[type="password"], input[type="date"], select, textarea { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; } input[type="file"] { width: 100%; padding: 0.4rem; font-size: 0.9rem; } button[type="submit"], .btn { background: #2563eb; color: #fff; border: none; padding: 0.7rem 1.5rem; border-radius: 4px; cursor: pointer; font-size: 1rem; font-weight: 600; } button[type="submit"]:hover, .btn:hover { background: #1d4ed8; } .btn-danger { background: #dc2626; } .btn-danger:hover { background: #b91c1c; } .btn-sm { padding: 0.3rem 0.7rem; font-size: 0.85rem; } .message { margin-top: 1.5rem; padding: 1rem; border-radius: 4px; text-align: center; } .message.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; } .message.info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; } .message.success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; } .results { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .result-card { padding: 1rem; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 6px; } .result-card h3 { margin-bottom: 0.5rem; font-size: 1.1rem; } .gallery-link { display: inline-block; background: #2563eb; color: #fff; padding: 0.4rem 1rem; border-radius: 4px; text-decoration: none; font-weight: 600; } .gallery-link:hover { background: #1d4ed8; } .retention { margin-top: 0.5rem; font-size: 0.85rem; color: #6b7280; } /* Public form: keep the school / student-id wrapper groups on the same 1rem rhythm as the rest of the form's flex children, so spacing stays uniform. */ #schoolGroup, #studentIdGroup { display: flex; flex-direction: column; gap: 1rem; } #galleryGroup { margin-top: 0; } /* Admin styles */ .admin-container { max-width: 900px; margin: 2rem auto; padding: 2rem; } .admin-nav { display: flex; gap: 1rem; margin-bottom: 2rem; } .admin-nav a { padding: 0.5rem 1rem; background: #e5e7eb; border-radius: 4px; text-decoration: none; color: #333; font-weight: 600; } .admin-nav a.active { background: #2563eb; color: #fff; } table { width: 100%; border-collapse: collapse; margin-top: 1rem; } th, td { padding: 0.6rem 0.8rem; border: 1px solid #e5e7eb; text-align: left; font-size: 0.9rem; } th { background: #f3f4f6; font-weight: 600; } tr.expired { opacity: 0.5; } .admin-form { background: #f9fafb; padding: 1.5rem; border-radius: 6px; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; } .admin-form h3 { margin-bottom: 0.5rem; } .form-row { display: flex; gap: 0.8rem; align-items: end; } .form-row > * { flex: 1; } .login-container { max-width: 400px; margin: 6rem auto; padding: 2rem; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .actions { display: flex; gap: 0.4rem; } /* Spreadsheet entries */ .entries-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .entries-toolbar .search-box { flex: 1; max-width: 300px; padding: 0.4rem 0.7rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; } .entries-toolbar .btn-toggle-add { margin-left: auto; } .add-form-collapsible { display: none; } .add-form-collapsible.open { display: flex; } table.spreadsheet { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 0.82rem; } table.spreadsheet th, table.spreadsheet td { padding: 0.3rem 0.5rem; border: 1px solid #e5e7eb; white-space: nowrap; } table.spreadsheet th { background: #f3f4f6; font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; } table.spreadsheet tr.filter-row th { padding: 0.25rem 0.3rem; background: #f9fafb; } table.spreadsheet tr.filter-row select, table.spreadsheet tr.filter-row input { width: 100%; padding: 0.2rem 0.3rem; border: 1px solid #d1d5db; border-radius: 3px; font-size: 0.78rem; } table.spreadsheet td.editable { cursor: pointer; } table.spreadsheet td.editable:hover { background: #eef2ff; } table.spreadsheet td.editing { padding: 0.15rem 0.25rem; background: #fff; } table.spreadsheet td.editing input, table.spreadsheet td.editing select { width: 100%; padding: 0.2rem 0.3rem; border: 1px solid #2563eb; border-radius: 3px; font-size: 0.82rem; outline: none; } .cell-actions { display: inline-flex; gap: 0.2rem; margin-left: 0.3rem; } .cell-actions button { background: none; border: none; cursor: pointer; font-size: 0.85rem; padding: 0.1rem 0.2rem; line-height: 1; } .cell-actions .save-cell { color: #16a34a; } .cell-actions .cancel-cell { color: #dc2626; } table.spreadsheet .actions { white-space: nowrap; }