/* --- ОБЩИЕ СТИЛИ --- */
body { background-color: #f3f4f6 !important; }
.bashkiria-redesign, .city-modern { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important; max-width: 1200px; margin: 0 auto; padding: 20px; }

/* --- БЕЙДЖИ --- */
.badge-status { display: inline-flex; align-items: center; padding: 3px 10px; font-size: 12px; font-weight: 600; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; vertical-align: middle; cursor: pointer; text-decoration: none; border: none; }
.badge-status .dot { width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; display: inline-block; }
.badge-status.used { background-color: #e8f5e9; color: #2e7d32; } .badge-status.used .dot { background-color: #2e7d32; }
.badge-status.construction { background-color: #fff3e0; color: #e65100; } .badge-status.construction .dot { background-color: #e65100; }
.badge-status.ruins { background-color: #fffde7; color: #f57f17; } .badge-status.ruins .dot { background-color: #f57f17; }
.badge-status.destroyed { background-color: #ffebee; color: #c62828; } .badge-status.destroyed .dot { background-color: #c62828; }
.badge-status.unknown { background-color: #f5f5f5; color: #757575; } .badge-status.unknown .dot { background-color: #757575; }

/* --- ЗДАНИЯ --- */
#top-table { display: flex !important; flex-direction: row !important; gap: 30px !important; width: 100% !important; align-items: flex-start !important; }
#top-image { flex: 1 1 60% !important; min-width: 0 !important; }
#map-container { flex: 0 0 400px !important; width: 400px !important; height: 400px !important; position: relative !important; }
#map_canvas { width: 100% !important; height: 100% !important; border-radius: 16px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; border: none !important; overflow: hidden !important; }
.leaflet-control-zoom { border: none !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; border-radius: 8px !important; overflow: hidden; }
.leaflet-control-zoom a { background-color: #fff !important; color: #333 !important; width: 34px !important; height: 34px !important; line-height: 34px !important; font-size: 18px !important; border-bottom: 1px solid #f0f0f0 !important; text-decoration: none !important; }
.leaflet-control-zoom a:last-child { border-bottom: none !important; }
.leaflet-control-layers-toggle { background-image: none !important; background-color: #fff !important; border-radius: 8px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; width: 34px !important; height: 34px !important; position: relative !important; }
.leaflet-control-layers-toggle::after { content: "☰"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 20px; font-weight: bold; color: #333; line-height: 1; }

table.horlines { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; background: #fff !important; border-radius: 16px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important; border: none !important; overflow: hidden !important; }
table.horlines tr.h21 td { padding: 16px 24px !important; border-bottom: 1px solid #f3f4f6 !important; font-size: 14px !important; line-height: 1.5 !important; }
table.horlines tr.h21:last-child td { border-bottom: none !important; }
table.horlines tr.h21 td.ds { color: #6b7280 !important; width: 180px !important; font-weight: 500 !important; background: #fafafa !important; border-right: 1px solid #f3f4f6 !important; white-space: nowrap !important; }
table.horlines tr.h21 td.d { color: #111827 !important; font-weight: 500 !important; }
table.horlines tr.h21:hover td { background: #f8fafc !important; }

.bashkiria-redesign a, .city-modern a { color: #7c8a00 !important; text-decoration: none !important; border-bottom: 1px dashed #aab300 !important; transition: all 0.2s; font-weight: 600 !important; }
.bashkiria-redesign a:hover, .city-modern a:hover { color: #5a6600 !important; border-bottom-style: solid !important; }

.action-bar { display: flex !important; flex-wrap: wrap !important; gap: 15px !important; padding: 15px 20px !important; background: #fff !important; border-radius: 16px !important; margin-bottom: 24px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important; align-items: center !important; margin-top: 20px !important; }
.action-bar a { color: #7c8a00 !important; text-decoration: none !important; font-weight: 500 !important; font-size: 14px !important; padding: 8px 16px !important; border-radius: 8px !important; background: #f9fafb !important; border: none !important; }
.action-bar a:hover { background: #e5e7eb !important; color: #5a6600 !important; }

.years-block { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin-bottom: 20px !important; background: #fff !important; padding: 12px 20px !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important; width: fit-content !important; }
.years-label { font-size: 13px !important; font-weight: 600 !important; color: #6b7280 !important; margin-right: 5px !important; }
.year-chip { display: inline-block !important; background: #f3f4f6 !important; color: #374151 !important; padding: 6px 12px !important; border-radius: 20px !important; text-decoration: none !important; font-size: 13px !important; font-weight: 500 !important; transition: all 0.2s !important; border: none !important; }
.year-chip:hover { background: #7c8a00 !important; color: #fff !important; }

.p20p { background: #fff !important; border-radius: 16px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.06) !important; border: none !important; padding: 15px !important; margin-bottom: 24px !important; }

/* --- ГОРОД --- */
.city-modern h1 { font-size: 32px !important; font-weight: 700 !important; color: #111 !important; margin-bottom: 5px !important; }
.city-modern h4 { font-size: 18px !important; color: #222 !important; margin-top: 0 !important; margin-bottom: 15px !important; }
.city-modern table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important; }
.city-modern td { vertical-align: top !important; }

.city-modern .p20 { background: #fff !important; border-radius: 16px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important; padding: 20px !important; margin-bottom: 20px !important; border: none !important; }
.city-modern .city-info { background: #fff !important; border-radius: 12px !important; padding: 15px 20px !important; margin-bottom: 20px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; font-size: 14px; }
.city-modern .city-editors { background: #fff !important; border-radius: 12px !important; padding: 15px 20px !important; margin-bottom: 20px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; font-size: 14px; }

.city-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.city-links a { display: inline-block; background: #fff !important; padding: 10px 18px !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; color: #7c8a00 !important; font-weight: 600 !important; text-decoration: none !important; font-size: 14px !important; border: none !important; transition: all 0.2s; }
.city-links a:hover { background: #f9fafb !important; box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }

.city-modern form { display: flex; gap: 10px; flex-wrap: wrap; background: #fff; padding: 20px; border-radius: 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.city-modern input[type="text"] { flex: 1; min-width: 200px; padding: 10px 15px !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; font-size: 15px !important; }
.city-modern input[type="submit"] { background: #7c8a00 !important; color: #fff !important; border: none !important; border-radius: 8px !important; padding: 10px 20px !important; font-weight: 600 !important; cursor: pointer !important; }

/* --- МОДАЛКА --- */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; z-index: 9999; align-items: center; justify-content: center; }
.modal-content { background: #fff; width: 90%; max-width: 400px; border-radius: 16px; padding: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); transform: translateY(20px); opacity: 0; transition: all 0.3s ease; }
.modal-overlay.active { display: flex; }
.modal-overlay.active .modal-content { transform: translateY(0); opacity: 1; }
.modal-btn { display: block; width: 100%; padding: 12px; text-align: center; background: #7c8a00; color: #fff; border-radius: 8px; text-decoration: none !important; font-weight: 600; font-size: 14px; transition: background 0.2s; box-sizing: border-box; }
.modal-btn:hover { background: #5a6600; }
.modal-close { display: block; text-align: center; margin-top: 15px; color: #888; font-size: 13px; cursor: pointer; text-decoration: none !important; }
.modal-close:hover { color: #333; }

/* Адаптив */
@media (max-width: 900px) {
    #top-table { flex-direction: column !important; }
    #map-container { flex: 1 1 auto !important; width: 100% !important; height: 300px !important; }
}