/* ============================================================
   TTSFFL — assets/css/theme.css
   Theme grid, admin theme column, theme square buttons.
   ============================================================ */

/* ── Theme preference grid ───────────────────────────────────
   ---------------------------------------------------------- */
.theme-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    gap:                   var(--space-2);
    padding:               var(--space-4);
    background:            var(--color-bg-row-alt);
    border-radius:         var(--radius-md);
    border:                1px solid var(--color-border);
    max-width:             600px;
}

/* ── Theme square button ─────────────────────────────────────
   NOTE: background is set via inline style by PHP render.
   Do NOT set background here — it will override the inline style.
   ---------------------------------------------------------- */
.theme-square {
    aspect-ratio:  1;
    border-radius: var(--radius-sm);
    border:        3px solid transparent;
    cursor:        pointer;
    position:      relative;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    transform var(--transition-fast),
                   border-color var(--transition-fast),
                   box-shadow var(--transition-fast);
    overflow:      hidden;
    padding:       0;
}

.theme-square:hover {
    transform:  scale(1.08);
    box-shadow: var(--shadow-md);
}

.theme-square--selected {
    border-color: #FFFFFF;
    box-shadow:   0 0 0 2px rgba(255,255,255,0.5),
                  0 0 12px rgba(255,255,255,0.3);
    transform:    scale(1.05);
}

.theme-square__abbrev {
    font-size:      0.6rem;
    font-weight:    var(--fw-bold);
    color:          #FFFFFF;
    text-shadow:    0 1px 3px rgba(0,0,0,0.8);
    letter-spacing: 0.02em;
    line-height:    1;
    text-align:     center;
}

.theme-square__check {
    position:    absolute;
    top:         2px;
    right:       3px;
    font-size:   0.6rem;
    color:       #FFFFFF;
    font-weight: var(--fw-bold);
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
}

/* ── Admin theme column ──────────────────────────────────────
   ---------------------------------------------------------- */
.admin-theme-cell {
    min-width: 220px;
}

.admin-theme-swatch {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           36px;
    height:          36px;
    border-radius:   var(--radius-sm);
    font-size:       0.55rem;
    font-weight:     var(--fw-bold);
    color:           #FFFFFF;
    text-shadow:     0 1px 2px rgba(0,0,0,0.8);
    flex-shrink:     0;
    letter-spacing:  0.03em;
}

.admin-theme-select {
    font-size:     var(--fs-xs);
    padding:       2px 4px;
    border:        1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background:    var(--color-bg-card);
    color:         var(--color-text-primary);
    cursor:        pointer;
    flex:          1;
    min-width:     0;
}

.admin-theme-status {
    font-size:  var(--fs-xs);
    min-width:  20px;
    text-align: center;
}

/* ── Theme save status ───────────────────────────────────────
   ---------------------------------------------------------- */
.theme-save-status {
    font-size:  var(--fs-sm);
    min-height: 1.5rem;
    color:      var(--color-win);
    transition: opacity 0.3s;
}