/* ═══ MOBILE-FIRST nominations map ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* ── Header ── */
.nom-header {
    display: flex; align-items: center; gap: 0.5rem;
    height: 44px; padding: 0 0.75rem;
    background: #1e293b; color: #fff; z-index: 1000; position: relative;
}
.nom-logo { color: #94a3b8; text-decoration: none; font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.nom-home-link { text-decoration: none; font-size: 1rem; line-height: 1; opacity: 0.7; }
.nom-home-link:hover { opacity: 1; }
.nom-title { flex: 1; font-size: 0.95rem; font-weight: 700; }
.nom-auth { font-size: 0.8rem; white-space: nowrap; }
.nom-auth a { color: #93c5fd; text-decoration: none; }
.nom-auth .nom-user { color: #a5f3fc; }

/* ── Status bar ── */
.nom-status {
    display: flex; gap: 0.75rem; padding: 0.35rem 0.75rem;
    background: #f1f5f9; font-size: 0.78rem; color: #475569;
    border-bottom: 1px solid #e2e8f0; z-index: 999; position: relative;
    flex-wrap: wrap;
}
.nom-status:empty { display: none; }

/* ── Map ── */
#map {
    position: absolute;
    top: 44px; left: 0; right: 0; bottom: 0;
    z-index: 1;
}
.nom-status ~ #map { top: 72px; }

/* ── FAB ── */
.nom-fab {
    position: fixed; bottom: 1.25rem; right: 1rem;
    background: #3b82f6; color: #fff; border: none; border-radius: 28px;
    padding: 0.75rem 1.25rem; font-size: 0.95rem; font-weight: 700;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25); cursor: pointer;
    z-index: 1001; touch-action: manipulation;
}
.nom-fab:active { background: #2563eb; transform: scale(0.97); }
.nom-fab-cancel {
    background: #ef4444; right: auto; left: 1rem;
}
.nom-fab-cancel:active { background: #dc2626; }

/* ── Nomination mode banner ── */
.nom-mode-banner {
    position: fixed; top: 44px; left: 0; right: 0;
    background: #fef3c7; color: #92400e; text-align: center;
    padding: 0.5rem; font-size: 0.85rem; font-weight: 600;
    z-index: 1001; border-bottom: 2px solid #f59e0b;
}

/* ── Bottom sheet ── */
.nom-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #fff; border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    z-index: 1002; max-height: 70vh; overflow-y: auto;
    transition: transform 0.25s ease;
}
.nom-sheet-handle {
    width: 36px; height: 4px; background: #d1d5db; border-radius: 2px;
    margin: 8px auto;
}
.nom-sheet-content { padding: 0 1rem 1.5rem; }

/* Sheet elements */
.nom-sheet h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.nom-sheet .nom-meta { font-size: 0.8rem; color: #6b7280; margin-bottom: 0.75rem; }
.nom-sheet .nom-memo { font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.75rem; }
.nom-sheet .nom-votes-bar {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.85rem; margin-bottom: 0.75rem;
}
.nom-sheet .nom-votes-count { font-weight: 700; font-size: 1.1rem; }
.nom-sheet .nom-votes-label { color: #6b7280; }

/* Action buttons in sheet */
.nom-btn {
    display: block; width: 100%; padding: 0.65rem;
    border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600;
    cursor: pointer; text-align: center; margin-bottom: 0.5rem;
    touch-action: manipulation;
}
.nom-btn-vote { background: #3b82f6; color: #fff; }
.nom-btn-vote:active { background: #2563eb; }
.nom-btn-vote:disabled { background: #94a3b8; cursor: not-allowed; }
.nom-btn-share { background: #f1f5f9; color: #334155; }
.nom-btn-share:active { background: #e2e8f0; }
.nom-btn-submit { background: #10b981; color: #fff; }
.nom-btn-submit:active { background: #059669; }
.nom-btn-submit:disabled { background: #94a3b8; cursor: not-allowed; }

/* Create form */
.nom-form-field { margin-bottom: 0.75rem; }
.nom-form-field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.25rem; }
.nom-form-field textarea {
    width: 100%; min-height: 100px; padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db; border-radius: 10px; font-size: 0.9rem;
    font-family: inherit; resize: vertical;
}
.nom-form-field textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.nom-char-count { font-size: 0.75rem; color: #9ca3af; text-align: right; }
.nom-char-count.nom-char-warn { color: #ef4444; }

/* Proximity warnings */
.nom-proximity { margin-bottom: 0.75rem; }
.nom-proximity-hard { background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 0.5rem 0.75rem; color: #dc2626; font-size: 0.85rem; }
.nom-proximity-soft { background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 0.5rem 0.75rem; color: #92400e; font-size: 0.85rem; }
.nom-proximity-ok { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 0.5rem 0.75rem; color: #166534; font-size: 0.85rem; }

/* ── Share modal ── */
.nom-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 2000; display: flex; align-items: flex-end; justify-content: center;
}
.nom-modal {
    background: #fff; border-radius: 16px 16px 0 0; padding: 1.5rem;
    width: 100%; max-width: 420px;
}
.nom-modal h3 { font-size: 1.1rem; margin-bottom: 1rem; }
.nom-share-link {
    display: flex; gap: 0.5rem; margin-bottom: 1rem;
}
.nom-share-link input {
    flex: 1; padding: 0.5rem; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 0.85rem; background: #f9fafb;
}
.nom-share-link button {
    padding: 0.5rem 1rem; background: #3b82f6; color: #fff;
    border: none; border-radius: 8px; font-weight: 600; cursor: pointer;
}
.nom-share-buttons { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.nom-share-btn {
    flex: 1; padding: 0.5rem; border-radius: 8px; text-align: center;
    text-decoration: none; font-size: 0.85rem; font-weight: 600; color: #fff;
}
.nom-share-wa { background: #25d366; }
.nom-share-fb { background: #1877f2; }
.nom-share-tw { background: #1da1f2; }
.nom-modal-close {
    width: 100%; padding: 0.65rem; background: #f1f5f9; color: #334155;
    border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600;
    cursor: pointer;
}

/* ── Marker styles ── */
.nom-marker {
    border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.7rem;
}
.nom-marker-new    { background: #95a5a6; width: 24px; height: 24px; }
.nom-marker-rising { background: #2e86c1; width: 30px; height: 30px; }
.nom-marker-popular{ background: #e67e22; width: 36px; height: 36px; }
.nom-marker-hot    { background: #e74c3c; width: 42px; height: 42px; animation: pulse 1.5s infinite; }

/* Cluster glow ring */
.nom-cluster.nom-marker-new     { box-shadow: 0 0 0 3px #95a5a6, 0 2px 6px rgba(0,0,0,0.3); }
.nom-cluster.nom-marker-rising  { box-shadow: 0 0 0 3px #2e86c1, 0 2px 6px rgba(0,0,0,0.3); }
.nom-cluster.nom-marker-popular { box-shadow: 0 0 0 3px #e67e22, 0 2px 6px rgba(0,0,0,0.3); }
.nom-cluster.nom-marker-hot     { box-shadow: 0 0 0 3px #e74c3c, 0 2px 6px rgba(0,0,0,0.3); animation: none; }

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); }
}

.station-marker {
    background: #3b82f6; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    opacity: 0.7;
}

/* Implemented nomination marker (green ✓) */
.nom-marker-implemented {
    background: #10b981; width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid #fff; box-shadow: 0 2px 8px rgba(16,185,129,0.4);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 0.9rem;
}

/* Nomination pin (placed during nomination mode) */
.nom-pin {
    width: 32px; height: 32px; background: #f59e0b; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg); border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

/* Admin section in bottom sheet */
.nom-admin-section {
    margin-top: 0.75rem; padding-top: 0.75rem;
    border-top: 2px solid #fde68a;
}
.nom-admin-label {
    font-size: 0.75rem; font-weight: 700; color: #92400e;
    text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.5rem;
}
.nom-btn-admin { background: #7c3aed; color: #fff; }
.nom-btn-admin:active { background: #6d28d9; }
.nom-admin-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.nom-btn-implement { background: #10b981; color: #fff; }
.nom-btn-implement:active { background: #059669; }
.nom-btn-reject { background: #ef4444; color: #fff; }
.nom-btn-reject:active { background: #dc2626; }

/* ── Toast notifications ── */
#toastContainer {
    position: fixed; top: 52px; left: 50%; transform: translateX(-50%);
    z-index: 3000; display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
    pointer-events: none; width: 90%; max-width: 400px;
}
.nom-toast {
    padding: 0.6rem 1rem; border-radius: 10px; font-size: 0.9rem; font-weight: 600;
    color: #fff; opacity: 0; transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto; text-align: center; width: 100%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.nom-toast-show { opacity: 1; transform: translateY(0); }
.nom-toast-error { background: #ef4444; }
.nom-toast-success { background: #10b981; }
.nom-toast-info { background: #3b82f6; }

/* ── Desktop ── */
@media (min-width: 768px) {
    .nom-fab { bottom: 2rem; right: 2rem; padding: 0.85rem 1.5rem; font-size: 1rem; }
    .nom-fab-cancel { left: 2rem; }
    .nom-sheet { max-width: 400px; left: auto; right: 1rem; bottom: 1rem; border-radius: 16px; max-height: 80vh; }
    .nom-modal-overlay { align-items: center; }
    .nom-modal { border-radius: 16px; }
    .nom-mode-banner { max-width: 400px; left: 50%; transform: translateX(-50%); border-radius: 0 0 12px 12px; }
}