/* assets/css/admin.css */
body {
    font-family: 'Inter', sans-serif;
    background: #0f172a; /* Dark theme to match the main app */
    margin: 0;
    padding: 0;
    color: #f8fafc;
    overflow: hidden;
}

.admin-wrapper {
    display: flex;
    height: 100vh;
    width: 100vw;
}

.sidebar {
    width: 350px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(10px);
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 20px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
}

.map-container {
    flex-grow: 1;
    position: relative;
}

#admin-map {
    width: 100%;
    height: 100%;
}

h1 {
    margin-top: 0;
    font-size: 1.3rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
    color: #f8fafc;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.setting-info strong {
    display: block;
    font-size: 1rem;
    color: #e2e8f0;
}

.setting-info span {
    display: block;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 4px;
    line-height: 1.3;
}

/* Toggle Switch CSS */
.switch { position: relative; display: inline-block; width: 50px; height: 28px; flex-shrink: 0;}
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #475569; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #3b82f6; }
input:checked + .slider:before { transform: translateX(22px); }

/* Make standard OSM map dark */
.leaflet-layer,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out,
.leaflet-control-attribution {
  filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: rgba(30, 41, 59, 0.95);
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
}

.factory-marker {
    font-size: 30px;
    line-height: 1;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    animation: bounce 1s infinite alternate;
}

@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-10px); }
}