/* --- LAYOUT --- */
body { margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; overflow: hidden; background: #222; touch-action: none; }

#map-wrapper {
    position: absolute; width: 100vw; height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
#map { 
    height: 100vh; width: 100vw; 
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
    z-index: 1; touch-action: none; cursor: crosshair;
}

/* Selected Item Styles */
.leaflet-image-layer.selected-img { 
    outline: 2px dashed #4caf50; 
    z-index: 1000 !important; 
}
.custom-text-label { 
    white-space: nowrap; 
    pointer-events: auto; 
    cursor: pointer; 
    transition: all 0.2s; 
    line-height: 1;
    padding: 5px;
}
.custom-text-label.selected-text { text-shadow: 0 0 5px #4caf50; border: 1px dashed #4caf50; padding: 4px; z-index: 1000 !important; }

/* File/Media Icons */
.custom-file-icon {
    background: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center; font-size: 24px; color: #555;
    border: 2px solid white; transition: all 0.2s;
}
.custom-file-icon.selected-text { border-color: #4caf50; box-shadow: 0 0 10px #4caf50; z-index: 1000 !important; }

/* Ruler Tool Styles */
.ruler-label {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #333;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
    pointer-events: none;
}

/* --- TRANSFORMER --- */
#transformer {
    position: absolute; pointer-events: auto; display: none; z-index: 3000;
    border: 1px solid #4caf50; 
    box-shadow: 0 0 0 1px rgba(255,255,255,0.5), 0 0 10px rgba(0,0,0,0.2);
    transform-origin: center center;
    pointer-events: none; 
}

/* Center Crosshair */
.tr-center-crosshair {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; cursor: move; z-index: 3002; pointer-events: auto;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}
.tr-center-crosshair::before, .tr-center-crosshair::after {
    content: ''; position: absolute; background: #4caf50; border: 1px solid white;
}
.tr-center-crosshair::before { width: 4px; height: 24px; } 
.tr-center-crosshair::after { width: 24px; height: 4px; }

/* Handles */
.tr-handle {
    width: 12px; height: 12px; background: #4caf50; border: 1px solid white;
    position: absolute; z-index: 3003; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    pointer-events: auto;
}
.tr-handle.tl { top: -6px; left: -6px; cursor: nwse-resize; }
.tr-handle.tr { top: -6px; right: -6px; cursor: nesw-resize; }
.tr-handle.br { bottom: -6px; right: -6px; cursor: nwse-resize; }
.tr-handle.bl { bottom: -6px; left: -6px; cursor: nesw-resize; }

/* Side Handles */
.tr-handle.tm { top: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.tr-handle.bm { bottom: -6px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.tr-handle.ml { top: 50%; left: -6px; transform: translateY(-50%); cursor: ew-resize; }
.tr-handle.mr { top: 50%; right: -6px; transform: translateY(-50%); cursor: ew-resize; }

.tr-rotate {
    width: 16px; height: 16px; background: #4caf50; border: 1px solid white;
    position: absolute; top: -30px; left: 50%; transform: translateX(-50%) rotate(45deg);
    cursor: grab; z-index: 3003; pointer-events: auto;
}
.tr-rotate:active { cursor: grabbing; }
.tr-line { position: absolute; top: -20px; left: 50%; height: 20px; width: 1px; background: #4caf50; transform: translateX(-50%); }

/* --- COMPASS --- */
.compass-container {
    position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; z-index: 1002;
    background: rgba(255, 255, 255, 0.9); border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center; pointer-events: none; border: 2px solid white;
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.compass-needle {
    width: 30px; height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,0 65,50 50,100 35,50' fill='%23333'/%3E%3Cpolygon points='50,0 65,50 50,50 35,50' fill='%23FF3B30'/%3E%3Ctext x='42' y='20' font-family='Arial' font-size='14' fill='white' font-weight='bold'%3EN%3C/text%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat;
}

/* --- NAV CONTROLS --- */
.nav-controls { position: absolute; top: 20px; left: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.search-row { display: flex; gap: 10px; align-items: center; }
.search-box { background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: flex; align-items: center; padding: 0 15px; width: 200px; height: 44px; }
.search-box input { border: none; outline: none; width: 100%; font-size: 14px; background: transparent; }

.login-btn { height: 44px; padding: 0 15px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer; border: none; display: flex; align-items: center; gap: 8px; font-weight: bold; color: #444; }
.user-profile { height: 44px; padding: 0 10px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); display: none; align-items: center; gap: 10px; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.control-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: fit-content; }
.control-btn { width: 44px; height: 44px; background: white; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #444; border: none; }
.control-btn:hover { color: #2196f3; background: #f9f9f9; }

/* --- SHARED FLOATING STYLES --- */
.floating-panel {
    position: absolute;
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.6);
    z-index: 2000;
    touch-action: none;
    transform-origin: top left;
    transition: height 0.3s ease, width 0.3s ease;
}
.drag-grip { cursor: grab; color: #aaa; padding: 5px; display: flex; align-items: center; justify-content: center; }
.resize-grip { position: absolute; bottom: 2px; right: 2px; width: 15px; height: 15px; cursor: nwse-resize; color: #999; display: flex; justify-content: flex-end; align-items: flex-end; font-size: 10px; }

/* Collapsed State for Main Panel */
#full-art-panel.collapsed {
    height: 50px !important;
    overflow: hidden;
    width: 200px !important;
}
#full-art-panel.collapsed .art-section, 
#full-art-panel.collapsed #img-settings, 
#full-art-panel.collapsed .resize-grip { 
    display: none !important; 
}

/* --- 1. FLOATING QUICK TOOLBAR --- */
#quick-toolbar {
    top: 85%; left: 50%; transform: translate(-50%, -50%);
    display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 50px;
}
#quick-toolbar.vertical { flex-direction: column; border-radius: 25px; }

/* TOOL WRAPPER FOR SETTINGS */
.tool-wrapper { position: relative; }

.q-tool {
    width: 45px; height: 45px; border-radius: 50%; border: none;
    background: #f0f0f0; cursor: pointer; color: #555; font-size: 20px;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.2s; position: relative; flex-shrink: 0;
}
.q-tool:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.q-tool.active { background: #2196f3; color: white; box-shadow: 0 5px 15px rgba(33,150,243,0.4); }

.q-settings {
    position: absolute; bottom: 65px; left: 50%; transform: translateX(-50%);
    background: white; padding: 15px; border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15); width: 180px;
    display: none; flex-direction: column; gap: 10px; pointer-events: auto;
    z-index: 9999 !important; /* 🟢 FIX: सेटिंग्स बॉक्स को मैप की सभी परतों के ऊपर रखने के लिए */
}
#quick-toolbar.vertical .q-settings { bottom: auto; left: 65px; top: 50%; transform: translateY(-50%); }

/* Show Settings when .settings-open class is added to wrapper */
.tool-wrapper.settings-open .q-settings { display: flex !important; }

/* Sticker Grid */
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sticker-btn {
    font-size: 20px; border: 1px solid #eee; background: white; border-radius: 4px; cursor: pointer; padding: 5px; transition: 0.2s;
}
.sticker-btn:hover { background: #f0f8ff; transform: scale(1.1); }

/* --- 2. FLOATING FULL ART PANEL --- */
#full-art-panel {
    top: 150px; left: 20px; width: 300px;
    padding: 15px; display: flex; flex-direction: column; gap: 15px; max-height: 80vh; overflow-y: auto;
}

.art-section { display: flex; flex-direction: column; gap: 8px; background: #f8f9fa; padding: 10px; border-radius: 8px; }
.art-header { font-size: 11px; text-transform: uppercase; color: #666; font-weight: 800; letter-spacing: 0.5px; }

/* Detailed Row for Specific Controls */
.detail-row { display: flex; justify-content: space-between; align-items: center; background: white; padding: 8px 10px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.detail-label { font-size: 12px; font-weight: 600; color: #444; display: flex; align-items: center; gap: 6px; }
.detail-actions { display: flex; gap: 4px; }
.mini-btn { width: 26px; height: 26px; border-radius: 4px; border: none; cursor: pointer; display: flex; justify-content: center; align-items: center; color: #555; background: #f0f0f0; transition: 0.2s; font-size: 12px; }
.mini-btn:hover { background: #e0e0e0; color: #000; }
.mini-btn.add { color: #2196f3; background: #e3f2fd; }
.mini-btn.del { color: #d32f2f; background: #ffebee; }
.mini-btn.undo { color: #666; background: #f5f5f5; }
.mini-btn.redo { color: #666; background: #f5f5f5; }
.mini-btn.add:hover { background: #2196f3; color: white; }
.mini-btn.del:hover { background: #d32f2f; color: white; }

.ok-btn { padding: 5px 15px; background: #4caf50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 12px; display: flex; align-items: center; gap: 5px; }
.ok-btn:hover { background: #388e3c; }

.art-btn {
    width: 100%; padding: 10px; border: none; background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    cursor: pointer; color: #555; font-size: 14px; display: flex; align-items: center; justify-content: center; gap:8px; font-weight: 600;
}
.art-btn:hover { background: #f0f8ff; color: #2196f3; }
.art-btn.active { background: #2196f3; color: white; }

/* Shared Style Elements */
.slider-label { font-size: 10px; color: #666; display:flex; justify-content:space-between; margin-bottom: 2px; margin-top:4px;}
input[type=range] { width: 100%; height: 4px; accent-color: #2196f3; }

.color-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.color-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 0 1px #ddd; cursor: pointer; position: relative; flex-shrink:0; }
.color-dot.active { transform: scale(1.2); box-shadow: 0 0 0 2px #333; }
.rainbow-bg { background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); }
input[type="color"] { position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; cursor:pointer; }

/* Image/Item Settings */
#img-settings { display:none; background: #fff3e0; padding: 12px; border-radius: 12px; flex-direction: column; gap: 8px; border: 1px solid #ffe0b2; margin-top:10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.active-img-msg { font-size: 12px; font-weight: bold; color: #e65100; display:flex; justify-content: space-between; align-items: center; padding-bottom: 5px; border-bottom: 1px solid #ffe0b2; }

/* Minimized State CSS */
#img-settings.minimized { width: auto; min-width: 200px; }
#img-settings.minimized > *:not(.active-img-msg) { display: none !important; }
#img-settings.minimized .active-img-msg { border-bottom: none; padding-bottom: 0; }

.settings-group-header { font-size:10px; font-weight:bold; color:#888; margin-top:8px; border-bottom: 1px dashed #ccc; padding-bottom:2px; margin-bottom:4px; }

/* Coordinate Inputs */
.coord-input { width: 100%; padding: 4px; border: 1px solid #ddd; border-radius: 4px; font-size: 11px; font-family: monospace; }
.coord-row { display: flex; gap: 5px; align-items: center; }
.coord-label { font-size: 10px; font-weight: bold; width: 15px; }

@keyframes rainbow { 0%{filter: hue-rotate(0deg);} 100%{filter: hue-rotate(360deg);} }
.rainbow-mode { animation: rainbow 2s linear infinite; border: 2px solid gold; }

/* MODALS & CURSORS */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2001; justify-content: center; align-items: center; }
.modal-content { background: #fff; width: 90%; max-width: 400px; padding: 25px; border-radius: 16px; max-height: 90vh; overflow: auto; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.close-modal { position: absolute; top: 10px; right: 10px; background: #eee; border: none; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; }
.eraser-cursor { width: 20px; height: 20px; border: 2px solid red; border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; display: none; transform: translate(-50%, -50%); }
.ai-panel { position: absolute; top: 20px; right: 20px; width: 320px; max-height: 85vh; background: white; border-radius: 16px; display:none; flex-direction: column; z-index: 1000; box-shadow: 0 10px 40px rgba(0,0,0,0.2); }
.pdf-pin-btn { position: absolute; top: 10px; right: 10px; background: #2196f3; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }

.leaflet-control-layers { border: none !important; border-radius: 12px !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; font-family: 'Segoe UI', sans-serif !important; font-weight: 600 !important; }
.leaflet-control-layers-toggle { width: 44px !important; height: 44px !important; }

/* Leaflet Popup customization */
.leaflet-popup-content-wrapper { border-radius: 12px; padding: 0; overflow: hidden; }
.leaflet-popup-content { margin: 0; width: auto !important; }
/* File/Media Popup Styles */
.file-popup-content { padding: 15px; text-align: center; min-width: 220px; background: #f9f9f9; border-radius: 12px; }
.file-popup-title { font-weight: bold; color: #333; margin-bottom: 10px; font-size: 14px; word-break: break-all; }
.file-popup-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.file-btn { flex: 1; padding: 8px 12px; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 5px; text-decoration: none; }
.file-btn.download { background: #4caf50; color: white; }
.file-btn.download:hover { background: #388e3c; }
.file-btn.open { background: #2196f3; color: white; }
.file-btn.open:hover { background: #1976d2; }

/* Viewer Modal Specifics */
.viewer-container { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.viewer-container img, .viewer-container video { max-width: 100%; max-height: 85vh; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.viewer-container audio { width: 100%; max-width: 400px; }
.viewer-msg { color: #666; font-size: 14px; text-align: center; background: #eee; padding: 20px; border-radius: 8px; }

@media print {
    @page { size: landscape; margin: 0; }
    .nav-controls, .ai-panel, .modal-overlay, #eraser-cursor, .leaflet-control, #transformer, .floating-panel { display: none !important; }
    #map-wrapper, #map { width: 100vw !important; height: 100vh !important; position: fixed; top: 0; left: 0; margin: 0; padding: 0; }
    body { background: white; overflow: hidden; }
}