/* --- Top Bar --- */
.topbar {
    position: sticky; top: 0; z-index: 10;
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 1rem; align-items: center; padding: 0.8rem 1rem;
    background: rgba(0,0,0,0.72); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--muted2);
}
.logo { font-weight: 800; letter-spacing: 0.2px; }
.logo b { color: var(--accent); }
.actions { display: flex; gap: 0.6rem; align-items: center; }

/* ✅ FIXED: Dashboard Dropdown Styling */
#dashboardSwitch {
    background-color: #000;      /* Solid black background */
    color: #fff;                 /* White text */
    min-width: 220px;            /* Wider for long names */
    text-align: left;
    border: 1px solid var(--tileBorder);
    padding-right: 2rem;         /* Space for the arrow */
}

#dashboardSwitch:focus {
    border-color: var(--accent);
    outline: none;
}

/* Style the dropdown menu items */
#dashboardSwitch option {
    background-color: #000;
    color: #fff;
    padding: 12px;
}

/* --- Main Grid Canvas --- */
.canvas-wrap {
    flex: 1; padding: 1rem 0;
    display: flex; flex-direction: column; min-height: 0;
}

.grid {
    flex: 1; display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(0, 1fr); /* Equal distribution */
    padding: 0 1rem;
    height: calc(100vh - 80px);
}

/* --- Slots & Base Modules --- */
.slot {
    border: 1px dashed var(--tileBorder);
    border-radius: 14px;
    background: var(--tile);
    display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    z-index: 1;
}
.slot:hover {
    border-color: rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.05);
}
.slot.drag-over {
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.08);
}

.mod {
    border: 1px solid var(--tileBorder);
    background: var(--tile);
    border-radius: 14px;
    position: relative;
    display: flex; flex-direction: column;
    overflow: hidden;
    z-index: 5;
    transition: all 0.2s ease;
    animation: moduleEntry 0.4s ease-out;
}
.mod:hover {
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
}
.mod.dragging {
    opacity: 0.5; border-color: rgba(255,255,255,0.5);
    cursor: grabbing;
}

/* --- Resize Handles --- */
.resize-handle {
    position: absolute; opacity: 0; z-index: 10;
    transition: opacity 0.2s ease;
}
.resize-handle:hover, .resize-handle.dragging { opacity: 1 !important; background: rgba(0,255,198,0.5); }
.mod:hover .resize-handle { opacity: 0.6; }

.resize-handle.left, .resize-handle.right { top: 0; bottom: 0; width: 12px; cursor: ew-resize; }
.resize-handle.top, .resize-handle.bottom { left: 0; right: 0; height: 12px; cursor: ns-resize; }
.resize-handle.right { right: -6px; }
.resize-handle.bottom { bottom: -6px; }

/* --- Drop Zones --- */
.drop-zone {
    position: absolute; z-index: 999;
    border: 2px dashed rgba(0,255,198,0.6);
    background: rgba(0,255,198,0.08);
    opacity: 0; transition: opacity .12s ease;
    pointer-events: none;
}
.drop-zone.active { opacity: 1; }

/* --- Mirror Mode (Hide UI) --- */
body.mirror .topbar, 
body.mirror .slot, 
body.mirror .resize-handle,
body.mirror .tools { display: none !important; }

body.mirror .mod { border-color: transparent; background: transparent; }
body.mirror .grid { padding: 2rem; }

@keyframes moduleEntry {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .grid { grid-template-columns: repeat(4, 1fr); }
    .topbar { grid-template-columns: 1fr; text-align: center; }
    .tagline { display: none; }
}