/* /home/rich/oxxoox/static/css/grid.css */

/* ============================================
   MODULE GRID SYSTEM
   ============================================ */

.module-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-size, 3), 1fr);
    gap: var(--grid-gap, 2px);
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* Grid size variants */
.grid-3x3 {
    --grid-size: 3;
}

/* ============================================
   MANAGE PAGE GRID CONTAINER
   ============================================ */

.module-grid-editor {
    margin-bottom: 48px;
}

.grid-container {
    display: grid;
    gap: 2px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Grid definitions with aspect ratios 
.grid-3x3 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    /*aspect-ratio: 3/3; /* Square grid
}

.grid-3x6 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(6, 1fr);
    /*aspect-ratio: 3/6; /* 2:1 rectangle 
}

.grid-3x9 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(9, 1fr);
    /*aspect-ratio: 3/9; /* 3:1 rectangle */
}


/* ============================================
   MODULE SLOTS
   ============================================ */

.module-slot {
    position: relative;
    border: 1px solid var(--border);
    background: var(--smoke);
    transition: all 0.2s ease;
}

/* Empty slots */
.module-slot.empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-slot.empty a {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.2s ease;
}

.module-slot.empty:hover {
    background: var(--ash);
    border-color: var(--toxic);
}

.module-slot.empty:hover a {
    color: var(--toxic);
}

.add-module-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--muted);
    transition: all 0.2s ease;
}

.add-module-btn:hover {
    color: var(--ghost);
    background: var(--ash);
}

.add-icon {
    font-size: 32px;
    line-height: 1;
}

.add-text {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Filled slots */
.module-slot.filled {
    background: transparent;
    padding: 0;
    overflow: hidden;
}

/* Occupied slots (hidden, part of multi-cell module) */
.module-slot.occupied {
    display: none;
}

/* ============================================
   MODULE PREVIEW WRAPPER
   ============================================ */

.module-preview {
    position: relative;
    width: 100%;
    height: 100%;
}

.module-slot.filled .module-preview {
    width: 100%;
    height: 100%;
    display: flex;
}

.module-slot.filled .module-preview > * {
    width: 100%;
    height: 100%;
    flex: 1;
}

/* ============================================
   MODULE CONTROLS (EDIT/DELETE/DRAG)
   ============================================ */

.module-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 10;
}

.module-slot:hover .module-controls {
    opacity: 1;
}

.control-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--border);
    color: var(--ghost);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.control-btn:hover {
    background: var(--ghost);
    color: var(--void);
    border-color: var(--ghost);
}

.delete-form {
    display: inline;
}

.drag-handle {
    cursor: grab;
}

.drag-handle:active {
    cursor: grabbing;
}

/* ============================================
   DRAG & DROP STATES
   ============================================ */

.module-slot.dragging {
    opacity: 0.4;
    border-color: var(--toxic);
}

.module-slot.valid-drop-zone {
    border-color: var(--toxic);
    background: rgba(0, 255, 204, 0.05);
}

.module-slot.invalid-drop-zone {
    opacity: 0.3;
}

.module-slot.drag-over {
    background: rgba(0, 255, 204, 0.15);
    border-color: var(--toxic);
    box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
}

/* ============================================
   MODULE SIZE BADGE
   ============================================ */

.module-size-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 9px;
    color: var(--ghost);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.module-slot:hover .module-size-badge {
    opacity: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .module-grid {
        max-width: 100%;
        gap: 1px;
    }
    
    /* Force 3x3 on mobile */
    .grid-6x6 {
        --grid-size: 3;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
        aspect-ratio: 3/3;
    }
}