/* public/assets/css/s24-appearance.css
   KHMER HRMS — S24: UI Themes, Fonts, Responsive, Day/Night, Size
   Reference: Master Reference §6.1–6.4, Master List §3 (Premium UI)

   Styles the self-service "Appearance" card on /profile — Day/Night,
   text size, Khmer font style, and accent color — plus the compact
   swatch/segmented-control pattern it introduces. All colors are
   CSS variables so the picker itself re-themes correctly no matter
   which theme is currently active (Rule: never hardcode a color).
*/

.s24-appearance-section {
    margin-bottom: var(--space-3, 24px);
}

.s24-appearance-section:last-of-type {
    margin-bottom: var(--space-2, 16px);
}

.s24-appearance-label {
    display: block;
    margin-bottom: 10px;
    font-weight: 700;
    color: var(--text);
}

.s24-appearance-hint {
    display: block;
    margin: -6px 0 10px;
    color: var(--text-muted);
    font-size: .82rem;
}

/* ── Day / Night — two big cards ─────────────────────────────── */
.s24-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.s24-option-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
    background: var(--surface-alt);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    box-shadow: var(--shadow-ambient);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.s24-option-card:hover {
    transform: translateY(-1px);
}

.s24-option-card[aria-pressed="true"] {
    border-color: var(--primary);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 18%, transparent);
    background: color-mix(in srgb, var(--primary) 8%, var(--surface-alt));
}

.s24-option-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--surface);
    color: var(--primary);
}

.s24-option-icon svg { width: 20px; height: 20px; }

.s24-option-title { font-weight: 700; }
.s24-option-desc { display: block; margin-top: 2px; color: var(--text-muted); font-size: .78rem; }

/* ── Text size — segmented control ───────────────────────────── */
.s24-segmented {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-alt);
    gap: 4px;
    flex-wrap: wrap;
}

.s24-segmented button {
    border: 0;
    padding: 8px 16px;
    border-radius: 9px;
    background: transparent;
    color: var(--text-muted);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.s24-segmented button[aria-pressed="true"] {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-contact);
}

.s24-size-sm { font-size: .78rem; }
.s24-size-md { font-size: .92rem; }
.s24-size-lg { font-size: 1.06rem; }

/* ── Khmer font style — two preview cards ────────────────────── */
.s24-font-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.s24-font-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 14px);
    background: var(--surface-alt);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.s24-font-card:hover { transform: translateY(-1px); }

.s24-font-card[aria-pressed="true"] {
    border-color: var(--primary);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 18%, transparent);
}

.s24-font-preview {
    display: block;
    margin-bottom: 4px;
    font-size: 1.15rem;
    line-height: 1.3;
}

.s24-font-preview.is-engraved { font-family: var(--font-kh-engraved); }
.s24-font-preview.is-normal   { font-family: var(--font-kh); }

.s24-font-card small { color: var(--text-muted); }

/* ── Color theme — 5 swatches ────────────────────────────────── */
.s24-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.s24-color-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-ambient);
    transition: transform .15s ease, border-color .15s ease;
}

.s24-color-swatch:hover { transform: scale(1.06); }

.s24-color-swatch[aria-pressed="true"] {
    border-color: var(--text);
}

.s24-color-swatch[aria-pressed="true"] svg { display: inline-flex; }

.s24-color-swatch svg {
    display: none;
    width: 18px;
    height: 18px;
    color: #fff;
}

.s24-appearance-save {
    display: flex;
    align-items: center;
    gap: 10px;
}

.s24-appearance-saved-note {
    color: var(--text-muted);
    font-size: .8rem;
}

@media (max-width: 575.98px) {
    .s24-mode-grid,
    .s24-font-grid {
        grid-template-columns: 1fr;
    }

    .s24-segmented {
        width: 100%;
        justify-content: space-between;
    }

    .s24-segmented button {
        flex: 1;
        text-align: center;
    }
}

/* S31 V6 — now that #s24-appearance-card is a full-width row (see
   s31-professional-responsive.css), pair its two most compact
   sections — Day/Night Mode and Text Size — side by side instead of
   stacking them, so the extra width is put to use rather than left
   looking sparse. The remaining sections (Khmer font, English font,
   Color theme) already fill the row nicely with their own internal
   multi-column grids, so they stay full-width, one below the other. */
@media (min-width: 992px) {
    #s24-appearance-card {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 32px;
    }
    #s24-appearance-card > .profile-card-head,
    #s24-appearance-card > .s24-appearance-save {
        grid-column: 1 / -1;
    }
    #s24-appearance-card > .s24-appearance-section:nth-of-type(3),
    #s24-appearance-card > .s24-appearance-section:nth-of-type(4),
    #s24-appearance-card > .s24-appearance-section:nth-of-type(5) {
        grid-column: 1 / -1;
    }
}