/**
 * File Path: assets/css/admin/appearance/appearance-tab-layout.css
 * Appearance tab layout — Phase 4a (PLG-041 + PLG-037)
 * Component of mbs-admin-settings-appearance.css — extracted Session 100.
 * Enqueued by MBS_Tab_Appearance with dep: mbs-admin-settings-appearance.
 */

/* =================================================== */
/* APPEARANCE TAB LAYOUT (Phase 4a — PLG-041 + PLG-037) */
/* Revised 2026-04-19 per client "4 columns" feedback   */
/* =================================================== */

/* Tab wrapper — wide canvas with generous top spacing. */
.mbs-tab-appearance {
    max-width: 1680px;
    padding-top: 12px;
}

.mbs-tab-appearance > h2 {
    margin-bottom: 24px;
}

/* Two-column grid: controls on the left, sticky preview on the right.
   Stacks to a single column below 1500px — the 4-column color grid needs
   ~1100px in the controls area, which leaves only ~300px for the preview.
   Rather than squeeze both, we stack on common admin widths. */
.mbs-appearance-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
    gap: 32px;
    align-items: start;
}

@media (max-width: 1499px) {
    .mbs-appearance-layout {
        grid-template-columns: 1fr;
    }
}

.mbs-appearance-controls {
    min-width: 0; /* prevents grid column from overflowing on narrow viewports */
}

/* 4-column color grid — the client-requested layout. Cells stack
   (label on top, picker below) and drop to 2 / 1 column(s) at
   narrow widths to remain legible. */
.mbs-color-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0 0 4px 0;
}

@media (max-width: 1100px) {
    .mbs-color-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .mbs-color-grid {
        grid-template-columns: 1fr;
    }
}

.mbs-color-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mbs-color-cell > label {
    font-size: 12px;
    font-weight: 500;
    color: #2c3338;
    line-height: 1.3;
    /* Clamp to two lines so wide labels ("Lavender Pale", "FREE Badge Bg")
       don't push the grid rows to unequal heights. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em; /* reserve two lines' worth for visual alignment */
}

/* wpColorPicker wraps each input in .wp-picker-container — give it room. */
.mbs-color-cell .wp-picker-container {
    margin: 0;
    max-width: 100%;
}

.mbs-color-cell .wp-picker-container .wp-color-result.button {
    min-height: 30px;
}

/* PRO-section semantic group labels (Structural Palette / Badges / Card & Accessories). */
.mbs-color-group-label {
    margin: 18px 0 10px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #646970;
}

.mbs-color-group-label:first-of-type {
    margin-top: 4px;
}

/* PRO "not-a-PRO-user" notice paragraph inside the section card. */
.mbs-appearance-section > p {
    margin: 4px 0 0 0;
}

/* Disabled / pending-feature inline helper text (Dark Mode, Open Full Preview). */
.mbs-appearance-section .mbs-appearance-notice {
    margin: 6px 0 0 0;
    color: #646970;
    font-size: 12px;
    font-style: italic;
}

/* Dark Mode section still uses .form-table (single-row). Restore basic padding. */
.mbs-appearance-section .form-table {
    margin-top: 0;
}

.mbs-appearance-section .form-table th {
    padding: 4px 10px 4px 0;
    vertical-align: top;
}

.mbs-appearance-section .form-table td {
    padding: 4px 0;
}

/* Custom CSS textarea — slightly taller, monospace. */
.mbs-appearance-section textarea.large-text.code {
    min-height: 160px;
    font-family: Consolas, Monaco, "Andale Mono", monospace;
}

/* Action row: Reset + (disabled) Open Full Preview + helper text. */
.mbs-appearance-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0 0 0;
}

.mbs-appearance-actions .description {
    color: #646970;
    font-style: italic;
    font-size: 12px;
}

/* Structural palette token usage hints — shown below the swatch label,
   above the color picker. Keeps the admin oriented without color names alone. */
.mbs-token-hint {
    font-size: 11px;
    color: #646970;
    line-height: 1.3;
    margin: 0;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
