/* Core styles ported from React app */

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; color: #213547; background: #fff; }
a { color: #646cff; text-decoration: none; }
a:hover { color: #535bf2; }

button { border-radius: 8px; border: 1px solid #ccc; padding: 0.6em 1.2em; font-size: 1em; font-weight: 500; background: #fff; cursor: pointer; transition: border-color .25s; }
button:hover { border-color: #646cff; }

#app-shell { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; }
header { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #eaeaea; z-index: 10; padding: 10px 16px; }
.tabs { margin-top: 8px; display: flex; gap: 8px; }
.tab { padding: 6px 12px; border: 1px solid #ddd; background: #fff; border-radius: 6px; cursor: pointer; }
.tab.active { background: #f0f6ff; border-color: #9ec1ff; }

/* Admin-specific tab tightening */
.admin-tabs { gap: 6px; flex-wrap: wrap; margin-top: 6px; margin-bottom: 8px; }
.admin-tabs .tab { padding: 4px 8px; font-size: 13px; border-radius: 4px; }
.admin-tabs .tab.active { background: #eef5ff; border-color: #8db6ff; }
.admin-tabs .tab:last-child { margin-left: auto; }

.container { display: grid; grid-template-columns: 320px 1fr 300px; gap: 12px; padding: 12px; }
.left, .right { display: flex; flex-direction: column; gap: 12px; }

.map { height: calc(100vh - 160px); width: 100%; background: #e6e6e6; }
.miniMap { height: 260px; width: 100%; border-radius: 8px; overflow: hidden; }
.cams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.video-wrap { position: relative; width: 100%; }

.card { border: 1px solid #eaeaea; border-radius: 8px; padding: 12px; background: #fff; }
.card .input, .card .textarea { width: 100%; padding: 8px; margin-top: 4px; }

.status-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; margin: 8px 0; }
.status-box { height: 20px; border-radius: 3px; background: #e6f4ea; position: relative; }
.status-box.low { background: #c8e6c9; }
.status-box.med { background: #fff59d; }
.status-box.high { background: #ef9a9a; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ad-slot { height: 250px; border: 1px dashed #bbb; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #777; background: #fafafa; }

.cookie-banner { position: fixed; bottom: 12px; left: 12px; right: 12px; background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 12px; z-index: 1000; }


/* --- Modernized theme and responsive improvements --- */
:root { --bg: #f7f8fb; --surface: #ffffff; --text: #1f2937; --muted: #6b7280; --border: #e5e7eb; --primary: #2563eb; --primary-600: #1d4ed8; --primary-50: #eef2ff; --shadow-sm: 0 1px 2px rgba(16,24,40,.06); --shadow-md: 0 1px 3px rgba(16,24,40,.08), 0 8px 24px rgba(16,24,40,.08); }
body { background: var(--bg); color: var(--text); line-height: 1.6; }

/* Header */
header { backdrop-filter: saturate(1.2) blur(6px); background: rgba(255,255,255,.85); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); padding: 12px 16px; position: sticky; top: 0; z-index: 10; }
header h2 { margin: 0; font-size: 20px; letter-spacing: .2px; }
header .tabs { margin-top: 10px; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
header .tabs::-webkit-scrollbar { display: none; }

/* Mobile nav toggle */
.nav-toggle { display: none; appearance: none; -webkit-appearance: none; border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 8px; margin-top: 10px; }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  header .tabs { display: none; flex-wrap: wrap; }
  header .tabs.open { display: flex; }
}

/* Tabs as modern pills */
.tab { padding: 8px 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 9999px; cursor: pointer; font-weight: 500; color: #111827; box-shadow: 0 0 0 rgba(0,0,0,0); transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.tab:hover { border-color: var(--primary-600); background: #fff; }
.tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.35); }
.tab.active { background: var(--primary-50); border-color: var(--primary-600); color: var(--primary-600); }

/* Admin tab row keeps a tighter look */
.admin-tabs { gap: 6px; flex-wrap: wrap; margin-top: 6px; margin-bottom: 8px; }
.admin-tabs .tab { padding: 6px 10px; font-size: 13px; border-radius: 9999px; }
.admin-tabs .tab.active { background: var(--primary-50); border-color: var(--primary-600); }
.admin-tabs .tab:last-child { margin-left: auto; }

/* Page layout container with responsive breakpoints */
.container { max-width: 1200px; margin: 0 auto; grid-template-columns: 320px 1fr 300px; gap: 16px; padding: 16px; }
@media (max-width: 1100px) { .container { grid-template-columns: 280px 1fr; } }
@media (max-width: 900px) { .container { grid-template-columns: 1fr; padding: 12px; gap: 12px; } }

.left, .right { display: flex; flex-direction: column; gap: 12px; }

/* Cards */
.card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface); box-shadow: var(--shadow-sm); }
.card h3 { margin: 0 0 8px 0; font-size: 16px; }

/* Inputs and textareas - friendlier and mobile-ready */
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], select, textarea, .card .input, .card .textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--text); font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease; }
input::placeholder, textarea::placeholder { color: #9ca3af; }
input:focus, select:focus, textarea:focus, .card .input:focus, .card .textarea:focus { outline: none; border-color: var(--primary-600); box-shadow: 0 0 0 3px rgba(37,99,235,.2); }

/* Range slider for severity */
input[type="range"] { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 9999px; background: #e5e7eb; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(16,24,40,.2); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--primary); cursor: pointer; border: 2px solid #fff; box-shadow: 0 1px 2px rgba(16,24,40,.2); }

/* Buttons */
button { border-radius: 10px; border: 1px solid var(--border); padding: 10px 14px; font-size: 15px; font-weight: 600; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .02s; box-shadow: var(--shadow-sm); }
button:hover { border-color: var(--primary-600); box-shadow: var(--shadow-md); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,.35); }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary-600); }
.btn-primary:hover { background: var(--primary-600); }

/* Language switcher (subtle inline links) */
.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.lang-switch .lang { color: inherit; border-bottom: 1px dotted transparent; padding: 2px 4px; border-radius: 6px; }
.lang-switch .lang:hover { color: #111827; border-bottom-color: #cbd5e1; }
.lang-switch .lang.active { color: #111827; font-weight: 600; background: #f3f4f6; }
.lang-switch .sep { color: #9ca3af; }

/* Maps and grids */
.map { height: calc(100vh - 160px); width: 100%; background: #e6e6e6; border-radius: 12px; overflow: hidden; }
.miniMap { height: 280px; width: 100%; border-radius: 12px; overflow: hidden; }
@media (max-width: 900px) { .map { height: 60vh; } .miniMap { height: 220px; } }

.cams-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .cams-grid { grid-template-columns: 1fr; } }
.video-wrap { position: relative; width: 100%; border-radius: 12px; overflow: hidden; }

/* Status grid tweaks */
.status-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; margin: 8px 0; }
.status-box { height: 18px; border-radius: 4px; background: #e6f4ea; position: relative; }
.status-box.low { background: #c8e6c9; }
.status-box.med { background: #fff59d; }
.status-box.high { background: #ef9a9a; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Ads */
.ad-slot { height: 250px; border: 1px dashed #cbd5e1; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #777; background: #fafafa; }

/* Cookie banner polish */
.cookie-banner { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px; box-shadow: var(--shadow-md); max-width: 720px; margin: 0 auto; left: 12px; right: 12px; }
@media (min-width: 900px) { .cookie-banner { right: 24px; left: auto; bottom: 24px; } }

/* Map page layout and mobile re-order using grid areas */
.map-page { grid-template-areas: 'left center right'; }
.map-page .left { grid-area: left; }
.map-page .center { grid-area: center; }
.map-page .right { grid-area: right; }
@media (max-width: 1100px) { .map-page { grid-template-areas: 'left center'; } }
@media (max-width: 900px) { .map-page { grid-template-areas: 'center' 'left' 'right'; } }

/* Form errors */
.form-error { display: block; color: #b91c1c; background: #fee2e2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.form-error ul { margin: 6px 0 0 16px; padding: 0; }
input.invalid, textarea.invalid, select.invalid { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239,68,68,.15) !important; }

/* Form success */
.form-success { display: block; color: #065f46; background: #d1fae5; border: 1px solid #a7f3d0; border-radius: 10px; padding: 10px 12px; font-size: 14px; }

/* Selection marker (user-dropped pin) */
.selection-marker { position: relative; }
.selection-marker .pin { width: 18px; height: 18px; border-radius: 9999px; background: var(--primary); border: 2px solid #ffffff; box-shadow: 0 2px 6px rgba(16,24,40,.25); }
.selection-marker .pulse { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin-left: -9px; margin-top: -9px; border-radius: 9999px; background: rgba(37,99,235,.25); animation: selectionPulse 1.5s ease-out infinite; }
@keyframes selectionPulse { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }