/* === Open House Torino Design System === */
:root {
    --primary: #00BCD4;
    --primary-dark: #0097A7;
    --primary-light: #B2EBF2;
    --secondary: #FF9800;
    --accent-purple: #9C27B0;
    --accent-orange: #FF9800;
    --text-primary: #212121;
    --text-secondary: #757575;
    --text-on-primary: #FFFFFF;
    --background: #FAFAFA;
    --surface: #FFFFFF;
    --divider: #E0E0E0;
    --error: #F44336;
    --success: #4CAF50;
    --warning: #FF9800;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.13);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.13);
    --radius: 12px;
    --radius-sm: 8px;
    --bottom-nav-height: 64px;
    --app-bar-height: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Roboto', sans-serif;
    background: var(--background);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* === App Bar === */
.app-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--primary);
    color: var(--text-on-primary);
    box-shadow: var(--shadow-md);
    height: var(--app-bar-height);
}
.app-bar-inner {
    display: flex; align-items: center; height: 100%;
    padding: 0 8px;
}
.nav-icon {
    background: none; border: none; color: var(--text-on-primary);
    cursor: pointer; padding: 8px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.nav-icon:hover { background: rgba(255,255,255,0.1); }
.app-bar-title {
    flex: 1; display: flex; align-items: center; justify-content: center;
}
.app-logo {
    height: 21px; object-fit: contain;
}
.app-bar-actions { display: flex; align-items: center; gap: 4px; }
.lang-switch {
    color: var(--text-on-primary); text-decoration: none;
    font-weight: 500; font-size: 14px;
    padding: 6px 12px; border-radius: 16px;
    background: rgba(255,255,255,0.15);
    transition: background 0.2s;
}
.lang-switch:hover { background: rgba(255,255,255,0.25); }

/* === Side Drawer === */
.drawer-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 1100; opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }
.drawer {
    position: fixed; top: 0; left: -280px; width: 280px; height: 100%;
    background: var(--surface); z-index: 1200;
    transition: left 0.3s ease;
    box-shadow: var(--shadow-lg);
}
.drawer.open { left: 0; }
.drawer-header {
    background: var(--primary); padding: 24px 16px;
    display: flex; align-items: center;
}
.drawer-logo { height: 32px; }
.drawer-menu {
    list-style: none; padding: 8px 0;
}
.drawer-menu li a {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 24px; color: var(--text-primary);
    text-decoration: none; font-size: 14px; font-weight: 500;
    transition: background 0.2s;
}
.drawer-menu li a:hover { background: var(--primary-light); }
.drawer-menu li a .material-icons { color: var(--text-secondary); font-size: 24px; }

/* === Main Content === */
.main-content {
    margin-top: var(--app-bar-height);
    padding-bottom: calc(var(--bottom-nav-height) + 8px);
    min-height: calc(100vh - var(--app-bar-height));
}
.main-content.no-pad { padding-bottom: 0; }

/* === Bottom Navigation === */
.bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-height);
    background: var(--surface);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    display: flex; z-index: 900;
    padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-decoration: none; color: var(--text-secondary);
    font-size: 12px; gap: 2px;
    transition: color 0.2s;
}
.bottom-nav-item.active { color: var(--primary); }
.bottom-nav-item.active .material-icons { color: var(--primary); }
.bottom-nav-item .material-icons { font-size: 24px; }
.bottom-nav-item.scan-btn .material-icons {
    font-size: 28px; color: var(--primary);
    background: var(--primary-light); border-radius: 50%;
    padding: 8px; margin-top: -12px;
}

/* === Flash Messages === */
.flash-container {
    position: fixed; top: calc(var(--app-bar-height) + 8px);
    left: 50%; transform: translateX(-50%);
    z-index: 2000; width: 90%; max-width: 400px;
}
.flash {
    padding: 12px 16px; border-radius: var(--radius-sm);
    margin-bottom: 8px; display: flex; align-items: center;
    justify-content: space-between; color: #fff;
    font-size: 14px; box-shadow: var(--shadow-md);
    animation: slideDown 0.3s ease;
}
.flash-success { background: var(--success); }
.flash-error { background: var(--error); }
.flash-warning { background: var(--warning); }
.flash-info { background: var(--primary); }
.flash-close {
    background: none; border: none; color: #fff;
    font-size: 20px; cursor: pointer; padding: 0 4px;
}
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* === PWA Install Banner === */
#pwa-install-banner {
    position: fixed; bottom: calc(var(--bottom-nav-height) + 8px);
    left: 50%; transform: translateX(-50%);
    z-index: 2000; width: calc(100% - 24px); max-width: 420px;
    background: var(--primary-dark, #00838F); color: #fff;
    border-radius: var(--radius); box-shadow: var(--shadow-lg);
    padding: 14px 16px; display: flex; align-items: center; gap: 12px;
    animation: slideUp 0.4s ease;
}
@keyframes slideUp { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }

/* === Cards === */
.card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow: hidden;
    transition: box-shadow 0.2s;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-image {
    width: 100%; height: 180px; object-fit: cover;
}
.card-body { padding: 16px; }
.card-title {
    font-size: 16px; font-weight: 500; color: var(--text-primary);
    margin-bottom: 4px;
}
.card-subtitle {
    font-size: 13px; color: var(--text-secondary);
    line-height: 1.4;
}

/* === Explore Page (Airbnb-style) === */
.explore-container {
    position: fixed; top: var(--app-bar-height); left: 0; right: 0;
    bottom: var(--bottom-nav-height); display: flex; flex-direction: column;
}
.search-bar-container {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--surface);
    box-shadow: var(--shadow-sm); z-index: 10;
}
.search-input-wrapper {
    display: flex; align-items: center; flex: 1; min-width: 0;
    background: #F5F5F5; border-radius: 28px;
    padding: 0 16px; height: 44px; gap: 8px;
}
.search-input-wrapper .material-icons { color: var(--text-secondary); }
.search-input {
    flex: 1; border: none; background: none; outline: none;
    font-size: 15px; font-family: 'Roboto', sans-serif;
}
.filter-chips {
    display: flex; gap: 8px; padding: 8px 12px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface);
}
.filter-chips::-webkit-scrollbar { display: none; }
.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 14px; border-radius: 20px;
    border: 1px solid var(--divider); background: var(--surface);
    font-size: 13px; white-space: nowrap; cursor: pointer;
    transition: all 0.2s; color: var(--text-primary);
}
.chip.active {
    background: var(--primary); color: var(--text-on-primary);
    border-color: var(--primary);
}
.chip .material-icons { font-size: 16px; }

.map-container {
    flex: 1; min-height: 200px; position: relative;
}
#map { width: 100%; height: 100%; }

/* Venue Drawer — left slide panel */
.venue-drawer-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1050;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
.venue-drawer-overlay.open {
    opacity: 1; pointer-events: all;
}
.venue-drawer {
    position: fixed;
    top: var(--app-bar-height); right: 0;
    bottom: var(--bottom-nav-height);
    width: 340px; max-width: 85vw;
    background: var(--surface);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.venue-drawer.open {
    transform: translateX(0);
}
.venue-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}
.venue-drawer-header h3 {
    font-size: 18px; font-weight: 500; color: var(--text-primary);
}
.venue-drawer-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); padding: 4px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.venue-drawer-close:hover { background: #F5F5F5; }
.venue-drawer-count {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid var(--divider);
    flex-shrink: 0;
}
.venue-drawer-count .venue-count {
    font-size: 13px; color: var(--text-secondary);
}

/* Drawer toggle button in search bar */
.drawer-toggle-btn {
    background: none; border: none; cursor: pointer;
    color: var(--primary); padding: 8px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.drawer-toggle-btn:hover { background: var(--primary-light); }

/* Search inside drawer */
.venue-drawer-search {
    padding: 10px 12px 0; flex-shrink: 0;
}

/* Filter chips inside drawer */
.venue-drawer .filter-chips {
    flex-shrink: 0; padding: 8px 12px;
    border-bottom: 1px solid var(--divider);
}

/* Venue list inside drawer */
.venue-drawer .venue-list {
    flex: 1; min-height: 0;
}
.sheet-sort {
    display: flex; align-items: center; gap: 4px;
    font-size: 13px; color: var(--primary); cursor: pointer;
}
.venue-list {
    overflow-y: auto; flex: 1; min-height: 0;
    padding: 0 12px 12px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.venue-list-item {
    display: flex; gap: 12px; padding: 12px 0;
    border-bottom: 1px solid var(--divider);
    cursor: pointer; text-decoration: none; color: inherit;
}
.venue-list-item:last-child { border-bottom: none; }
.venue-list-item.selected {
    background: var(--primary-light);
    border-radius: var(--radius-sm);
}
.venue-list-item.blink {
    animation: venueBlink 0.4s ease 3;
}
@keyframes venueBlink {
    0%, 100% { background: transparent; }
    50% { background: var(--primary-light); }
}
.venue-thumb {
    width: 80px; height: 80px; border-radius: var(--radius-sm);
    object-fit: cover; flex-shrink: 0;
    background: #EEE;
}
.venue-list-info { flex: 1; min-width: 0; }
.venue-list-info .venue-numero {
    display: inline-block; background: var(--primary);
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; margin-bottom: 4px;
}
.venue-list-info h4 {
    font-size: 15px; font-weight: 500; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.venue-list-info p {
    font-size: 13px; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.4;
}
.venue-fav-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); padding: 4px;
    flex-shrink: 0; align-self: center;
}
.venue-fav-btn.active { color: #E91E63; }
.venue-list-item .venue-fav-btn {
    margin-left: auto;
}

/* === Venue Detail Panel (slide-in from right) === */
.venue-detail-panel {
    position: fixed;
    top: var(--app-bar-height); right: 0;
    bottom: var(--bottom-nav-height);
    width: 420px; max-width: 100vw;
    background: var(--surface);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.venue-detail-panel.open {
    transform: translateX(0);
}
.venue-detail-panel-content {
    height: 100%; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
@media (max-width: 768px) {
    .venue-detail-panel { width: 100%; }
}

/* === Venue Detail === */
.detail-back-btn {
    position: absolute; top: 12px; left: 12px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(0,0,0,0.45); border: none;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background 0.2s;
    z-index: 5;
}
.detail-back-btn:hover { background: rgba(0,0,0,0.65); }
.venue-detail-hero {
    width: 100%; height: 250px; object-fit: cover;
    background: var(--primary-light);
}
.venue-detail-body { padding: 20px 16px calc(var(--bottom-nav-height) + 24px) 16px; }
.venue-detail-body .venue-numero-badge {
    display: inline-block; background: var(--primary);
    color: #fff; font-size: 14px; font-weight: 700;
    padding: 4px 14px; border-radius: 16px; margin-bottom: 8px;
}
.venue-detail-body h1 {
    font-size: 22px; font-weight: 500; margin-bottom: 12px;
}
.venue-detail-body .venue-excerpt {
    font-size: 15px; color: var(--text-secondary);
    line-height: 1.6; margin-bottom: 16px;
}
.venue-detail-body .venue-content {
    font-size: 14px; line-height: 1.7; margin-bottom: 20px;
}
.venue-info-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 20px;
}
.venue-info-item {
    display: flex; align-items: flex-start; gap: 8px;
}
.venue-info-item .material-icons {
    font-size: 20px; color: var(--primary); flex-shrink: 0; margin-top: 1px;
}
.venue-info-item .info-label {
    font-size: 11px; color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: 0.5px;
}
.venue-info-item .info-value {
    font-size: 14px; color: var(--text-primary);
}
.venue-actions {
    display: flex; gap: 12px; padding: 16px;
    position: sticky; bottom: var(--bottom-nav-height);
    background: var(--surface);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}
.detail-mini-map {
    width: 100%; height: 200px; border-radius: var(--radius);
    overflow: hidden; margin-bottom: 16px;
}

/* === Buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 24px; border-radius: 24px;
    font-size: 14px; font-weight: 500; text-decoration: none;
    border: none; cursor: pointer; transition: all 0.2s;
    font-family: 'Roboto', sans-serif;
}
.btn-primary {
    background: var(--primary); color: var(--text-on-primary);
}
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary {
    background: transparent; color: var(--primary);
    border: 1px solid var(--primary);
}
.btn-secondary:hover { background: var(--primary-light); }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #D32F2F; }
.btn-icon {
    width: 44px; height: 44px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.btn-full { width: 100%; }
.btn-fab {
    position: fixed; bottom: calc(var(--bottom-nav-height) + 16px);
    right: 16px; width: 56px; height: 56px;
    border-radius: 28px; box-shadow: var(--shadow-lg);
}

/* === Forms === */
.form-group {
    margin-bottom: 20px;
}
.form-group label {
    display: block; font-size: 12px; font-weight: 500;
    color: var(--text-secondary); margin-bottom: 6px;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.form-control {
    width: 100%; padding: 12px 16px; border: 1px solid var(--divider);
    border-radius: var(--radius-sm); font-size: 15px;
    font-family: 'Roboto', sans-serif;
    transition: border-color 0.2s;
    background: var(--surface);
}
.form-control:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}
textarea.form-control { min-height: 100px; resize: vertical; }
select.form-control { appearance: auto; }
.radio-group {
    display: flex; gap: 16px; padding: 8px 0;
}
.radio-group label {
    display: flex; align-items: center; gap: 6px;
    font-size: 14px; text-transform: none; cursor: pointer;
}
.form-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* === Auth Pages === */
.auth-container {
    max-width: 440px; margin: 24px auto; padding: 0 16px;
}
.auth-card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-md); padding: 32px 24px;
}
.auth-card h2 {
    font-size: 24px; font-weight: 500; margin-bottom: 24px;
    color: var(--primary); text-align: center;
}
.auth-footer {
    text-align: center; margin-top: 16px;
    font-size: 14px; color: var(--text-secondary);
}
.auth-footer a { color: var(--primary); text-decoration: none; font-weight: 500; }

/* === Profile === */
.profile-header {
    background: var(--primary); color: var(--text-on-primary);
    padding: 24px 16px; text-align: center;
}
.profile-qr { margin: 0 auto 12px; }
.profile-qr img { border-radius: var(--radius-sm); background: #fff; padding: 8px; }
.profile-name { font-size: 20px; font-weight: 500; }
.profile-vip {
    display: inline-block; background: var(--secondary);
    color: #fff; font-size: 12px; font-weight: 700;
    padding: 2px 12px; border-radius: 12px; margin-top: 4px;
}
.profile-body { padding: 16px; }
.profile-info-row {
    display: flex; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid var(--divider);
}
.profile-info-label { font-size: 13px; color: var(--text-secondary); }
.profile-info-value { font-size: 14px; font-weight: 500; }

/* === Family Members === */
.family-card {
    background: var(--primary-light); border-radius: var(--radius-sm);
    padding: 12px 16px; margin-bottom: 8px;
}
.family-card h5 { font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.family-card p { font-size: 13px; color: var(--text-secondary); }

/* === Check-in / Scan === */
.scan-container { text-align: center; padding: 24px 16px; }
.scan-viewfinder {
    width: 100%; max-width: 400px; height: 300px;
    margin: 16px auto; border-radius: var(--radius);
    overflow: hidden; background: #000;
}
.scan-result {
    margin-top: 24px; padding: 20px;
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.scan-success .material-icons { font-size: 64px; color: var(--success); }
.scan-error .material-icons { font-size: 64px; color: var(--error); }

/* === Checkin History === */
.checkin-item {
    display: flex; gap: 12px; align-items: center;
    padding: 12px 16px; border-bottom: 1px solid var(--divider);
}
.checkin-item img {
    width: 56px; height: 56px; border-radius: var(--radius-sm);
    object-fit: cover;
}
.checkin-info h4 { font-size: 15px; font-weight: 500; }
.checkin-info p { font-size: 13px; color: var(--text-secondary); }

/* === Reservations === */
.reservation-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--divider);
}
.reservation-status {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 12px; font-weight: 500;
}
.status-confirmed { background: #E8F5E9; color: var(--success); }
.status-waitlist { background: #FFF3E0; color: var(--warning); }
.status-cancelled { background: #FFEBEE; color: var(--error); }

/* === Sponsors === */
.sponsors-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px; padding: 16px;
}
.sponsor-card {
    background: var(--surface); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow: hidden; text-align: center;
    text-decoration: none; color: inherit;
}
.sponsor-card img {
    width: 100%; height: 100px; object-fit: contain; padding: 12px;
}
.sponsor-card h4 { font-size: 14px; padding: 0 8px 8px; }

/* === About === */
.about-container { padding: 24px 16px; max-width: 600px; margin: 0 auto; }
.about-container h2 { font-size: 22px; margin-bottom: 16px; color: var(--primary); }
.about-container p { font-size: 15px; line-height: 1.7; color: var(--text-primary); margin-bottom: 16px; }

/* === Admin === */
.admin-layout {
    display: flex; min-height: calc(100vh - var(--app-bar-height));
}
.admin-sidebar {
    width: 250px; background: #263238; color: #fff;
    padding-top: 16px; flex-shrink: 0;
}
.admin-sidebar a {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; color: #B0BEC5;
    text-decoration: none; font-size: 14px;
    transition: all 0.2s;
}
.admin-sidebar a:hover, .admin-sidebar a.active {
    background: rgba(255,255,255,0.08); color: #fff;
}
.admin-sidebar .material-icons { font-size: 20px; }
.admin-content { flex: 1; padding: 24px; overflow-x: auto; }
.admin-content h2 {
    font-size: 24px; font-weight: 400; margin-bottom: 24px;
    color: var(--text-primary);
}

/* Admin Table */
.data-table {
    width: 100%; border-collapse: collapse;
    background: var(--surface); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.data-table th {
    background: #ECEFF1; padding: 12px 16px;
    text-align: left; font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--text-secondary); font-weight: 500;
}
.data-table td {
    padding: 12px 16px; border-bottom: 1px solid var(--divider);
    font-size: 14px;
}
.data-table tr:hover { background: #F5F5F5; }
.table-actions { display: flex; gap: 8px; }
.table-actions a, .table-actions button {
    padding: 4px 12px; border-radius: 4px; font-size: 12px;
    text-decoration: none; border: none; cursor: pointer;
    font-weight: 500;
}
.table-actions .edit-btn { background: var(--primary-light); color: var(--primary-dark); }
.table-actions .delete-btn { background: #FFEBEE; color: var(--error); }
.table-actions .toggle-btn { background: #FFF3E0; color: var(--warning); }

/* Admin Stats */
.stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px; margin-bottom: 32px;
}
.stat-card {
    background: var(--surface); border-radius: var(--radius);
    padding: 20px; box-shadow: var(--shadow-sm);
}
.stat-card .stat-value {
    font-size: 36px; font-weight: 300; color: var(--primary);
}
.stat-card .stat-label {
    font-size: 13px; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* Badge */
.badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 500;
}
.badge-published { background: #E8F5E9; color: var(--success); }
.badge-draft { background: #FFF3E0; color: var(--warning); }
.badge-vip { background: var(--secondary); color: #fff; }
.badge-suspended { background: #FFEBEE; color: var(--error); }

/* === Responsive === */
@media (max-width: 768px) {
    .admin-sidebar { display: none; }
    .admin-content { padding: 16px; }
    .form-row { grid-template-columns: 1fr; }
    .venue-info-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .venue-drawer { width: 100%; max-width: 100vw; }
}
@media (min-width: 769px) {
    .explore-container { bottom: var(--bottom-nav-height); }
    .venue-drawer { bottom: var(--bottom-nav-height); }
}

/* === Empty States === */
.empty-state {
    text-align: center; padding: 48px 24px;
    color: var(--text-secondary);
}
.empty-state .material-icons { font-size: 64px; color: var(--divider); margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; margin-bottom: 8px; color: var(--text-primary); }
.empty-state p { font-size: 14px; }

/* === Map Pins === */
.venue-pin {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    color: #fff; font-size: 12px; font-weight: 700;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    border: 2px solid #fff;
}
.pin-both { background: var(--primary); }
.pin-saturday { background: var(--accent-orange); }
.pin-sunday { background: var(--accent-purple); }

/* User location dot */
.user-location-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: #4285F4; border: 3px solid #fff;
    box-shadow: 0 0 0 2px rgba(66,133,244,0.3);
}

/* === Rich Venue Popup (Leaflet) === */
.venue-popup .leaflet-popup-content-wrapper {
    border-radius: var(--radius); padding: 0;
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.venue-popup .leaflet-popup-content {
    margin: 0; width: auto !important;
}
.venue-popup .leaflet-popup-tip {
    background: var(--surface);
}
.venue-popup-card {
    width: 260px; cursor: pointer;
    background: var(--surface);
}
.venue-popup-card .popup-card-img {
    width: 100%; height: 130px; object-fit: cover;
    display: block; background: var(--primary-light);
}
.venue-popup-card .popup-card-body {
    padding: 10px 12px;
}
.venue-popup-card .venue-numero {
    display: inline-block; background: var(--primary);
    color: #fff; font-size: 11px; font-weight: 700;
    padding: 2px 8px; border-radius: 10px; margin-bottom: 4px;
}
.venue-popup-card h4 {
    font-size: 14px; font-weight: 500; margin-bottom: 2px;
    color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.venue-popup-card p {
    font-size: 12px; color: var(--text-secondary);
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    line-height: 1.4; margin: 0;
}

/* === Utilities === */
.text-center { text-align: center; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.p-16 { padding: 16px; }
.hidden { display: none; }