/* S31 — Professional UX/UI + responsive appearance settings */
.s24-appearance-section { margin-top: 22px; }
.s24-appearance-label { display:block; margin-bottom:10px; font-weight:800; letter-spacing:.01em; }
.s24-appearance-hint { display:block; margin-top:8px; font-size:.78rem; color:var(--text-muted); }
.s24-size-segmented { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:100%; }
.s24-size-segmented button { min-height:42px; }
.s24-size-xl { font-size:1.18rem !important; }
.s24-size-xxl { font-size:1.32rem !important; }
.s24-font-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.s24-font-card { min-height:86px; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.s24-font-preview { overflow-wrap:anywhere; }
.s24-font-preview-battambang { font-family:'Battambang',sans-serif; }
.s24-font-preview-noto-sans-khmer { font-family:'NotoSansKhmer',sans-serif; }
.s24-font-preview-moul { font-family:'Moul',serif; }
.s24-font-preview-system-khmer { font-family:system-ui,sans-serif; }
.s24-font-preview-barlow { font-family:'Barlow',sans-serif; }
.s24-font-preview-inter { font-family:'Inter',sans-serif; }
.s24-font-preview-arial { font-family:Arial,Helvetica,sans-serif; }
.s24-font-preview-georgia { font-family:Georgia,'Times New Roman',serif; }
.s24-font-preview-verdana { font-family:Verdana,Geneva,sans-serif; }
.s24-color-custom { background:conic-gradient(from 0deg,#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ef4444) !important; position:relative; }
.s24-color-custom::before { content:''; position:absolute; inset:5px; border-radius:50%; background:var(--swatch-color,#2563EB); }
.s24-custom-color-plus,.s24-custom-color-check { position:relative; z-index:2; color:#fff; font-size:22px; font-weight:900; line-height:1; }
.s24-custom-color-check { display:none; }
.s24-color-custom[aria-pressed="true"] .s24-custom-color-plus { display:none; }
.s24-color-custom[aria-pressed="true"] .s24-custom-color-check { display:inline-flex; }
.s24-custom-color-meta { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:.78rem; color:var(--text-muted); }
.s24-custom-color-meta #s24-custom-color-value { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:800; color:var(--text); }
.s24-visually-hidden { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; }
.s24-font-card:focus-visible,.s24-option-card:focus-visible,.s24-segmented button:focus-visible,.s24-color-swatch:focus-visible { outline:3px solid color-mix(in srgb,var(--primary) 35%,transparent); outline-offset:2px; }
@media (min-width:1200px) { .s24-font-grid-kh,.s24-font-grid-en { grid-template-columns:repeat(4,minmax(0,1fr)); } .s24-font-grid-en { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:991.98px) { .s24-size-segmented { grid-template-columns:repeat(3,minmax(0,1fr)); } .s24-font-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575.98px) { .s24-size-segmented { grid-template-columns:repeat(2,minmax(0,1fr)); } .s24-font-grid { grid-template-columns:1fr; } .s24-font-card { min-height:72px; } .s24-color-grid { gap:10px; } .s24-color-swatch { width:42px; height:42px; } .s24-appearance-save { position:sticky; bottom:0; z-index:10; padding:10px 0; background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(8px); } }
@media (prefers-reduced-motion:reduce) { body,body * { transition:none !important; scroll-behavior:auto !important; } .s24-option-card:hover,.s24-font-card:hover,.s24-color-swatch:hover { transform:none; } }
/* Keep touch targets usable across phones/tablets and avoid accidental horizontal overflow. */
button,input,select,textarea { max-width:100%; }
.card-grid { min-width:0; }
img,svg { max-width:100%; }

/* S31 V2 — Profile appearance density fix.
   The profile page places several cards side-by-side on desktop, so the
   Appearance card can be relatively narrow. Keep font choices readable
   and prevent intrinsic text from forcing grid tracks wider than the card. */
.s24-font-grid-kh,
.s24-font-grid-en {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.s24-font-card {
    min-width: 0;
}
.s24-font-preview,
.s24-font-card small {
    min-width: 0;
}
.s24-size-segmented button {
    min-width: 0;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .s24-size-segmented button {
        padding-left: 8px;
        padding-right: 8px;
        font-size: .94rem !important;
    }
    .s24-size-segmented .s24-size-xl { font-size: 1rem !important; }
    .s24-size-segmented .s24-size-xxl { font-size: 1.04rem !important; }
    .s24-size-segmented button:last-child {
        grid-column: 1 / -1;
    }
}


/* S31 V3 (superseded — see V6 below) */

/* S31 V6 — Profile page layout rebuild.
   The old approach placed all 5 profile cards as flat siblings of one
   .card-grid (a straight CSS Grid), which meant Personal Info, Change
   Password, Change Email, and Account Overview shared a grid ROW with
   the much taller Appearance card. CSS Grid rows size to their tallest
   cell, so the shorter cards' columns were left with large empty gaps
   below their content while Appearance kept going in its own column —
   exactly the broken look reported on /profile.

   Fix: the view (app/Views/profile/show.php) now groups cards into
   explicit rows instead of one flat grid:
     .profile-layout            — vertical stack of rows, in DOM order
     .profile-row               — a 2-up row (Personal Info + Account
                                   Overview, then Change Password +
                                   Change Email) — each pair is a
                                   similar height, so no dead space
     #s24-appearance-card       — sits BETWEEN the two rows as its own
                                   full-width block, giving its font/
                                   color grids real room instead of
                                   being squeezed into one column of a
                                   4-column grid. */
.profile-layout {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.profile-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}
@media (min-width: 768px) {
    .profile-row { grid-template-columns: 1fr 1fr; }
}

/* S31 V7 — Profile page professional redesign.
   Two changes on top of the V6 row layout above:

   1. Identity hero (.profile-hero) — avatar, display name, role/status
      badges and the editable name/phone/username fields now live in
      ONE card instead of two ("Personal Info" + a separate read-only
      "Account Overview" table), so the page opens with a single clear
      "this is you" header instead of two cards that only made sense
      read together.

   2. Card head pattern (.profile-card-head) — every other card
      (Appearance, Change Password, Change Email) now leads with a
      small icon chip next to its title/description instead of a bare
      <h3>, matching the icon-led headers used elsewhere in the app
      (Day/Night option cards, sidebar sections) instead of looking
      like a plain, unstyled form block. */
.profile-hero {
    position: relative;
    overflow: hidden;
}
.profile-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-radius: var(--radius, 14px) var(--radius, 14px) 0 0;
}
.profile-hero form {
    display: block;
}
.profile-hero-top {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}
.profile-hero-avatar-col {
    flex: 0 0 auto;
}
/* The shared .premium-upload rules center everything for the plain
   single-column upload use case; inside the hero it sits beside the
   identity block instead, so drop the vertical stack's own bottom
   margin — the hero's fields section supplies the spacing instead. */
.profile-hero-avatar-col .premium-upload {
    margin-bottom: 0;
}
.profile-hero-identity {
    flex: 1 1 260px;
    min-width: 0;
    padding-top: 6px;
}
.profile-hero-name-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.profile-hero-name {
    margin: 0;
    font-size: 1.5rem;
    overflow-wrap: break-word;
}
.profile-hero-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.profile-hero-badges .badge svg {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
}
.profile-hero-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.85rem;
}
.profile-hero-meta-row svg {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
}
.profile-hero-meta-sep {
    opacity: 0.5;
}
.profile-hero-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 16px;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.profile-hero-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-1);
}
@media (max-width: 767.98px) {
    .profile-hero-top {
        justify-content: center;
        text-align: center;
    }
    .profile-hero-identity {
        flex-basis: 100%;
    }
    .profile-hero-name-row,
    .profile-hero-meta-row {
        justify-content: center;
    }
}
@media (max-width: 575.98px) {
    .profile-hero-fields {
        grid-template-columns: 1fr;
    }
    .profile-hero-actions {
        justify-content: stretch;
    }
    .profile-hero-actions .btn {
        width: 100%;
    }
}

/* Icon + title/description head, reused by Appearance / Change
   Password / Change Email so every card below the hero introduces
   itself the same way. */
.profile-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: var(--space-2);
}
.profile-card-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary) 10%, var(--surface-alt));
    color: var(--primary);
}
.profile-card-icon svg {
    width: 20px;
    height: 20px;
}
.profile-card-head h3 {
    margin: 0 0 2px;
}
.profile-card-head p {
    margin: 0;
}

/* S31 V4 — keep the sticky Appearance save action above the fixed
   mobile bottom navigation, including devices with a safe-area inset. */
@media (max-width: 767.98px) {
    .s24-appearance-save {
        bottom: calc(62px + env(safe-area-inset-bottom) + 8px);
    }
}

/* S31 V5 — Mobile filter actions: keep Filter + Reset together on one
   compact action line. Earlier mobile rules treated the two icon buttons
   as separate grid columns, which could place them far apart or make the
   action row appear broken on narrow screens. The wrapper is now shared
   by the icon-pair filters so the two controls behave as one UI unit. */
.filter-panel-actions-icons {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
}
.filter-panel-actions-icons .filter-action-icon,
.filter-panel-actions-icons .filter-action-icon.btn {
    flex: 0 0 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.filter-panel-actions-icons .filter-action-icon + .filter-action-icon {
    margin-left: 0 !important;
}

@media (max-width: 767.98px) {
    /* The action wrapper is one grid item spanning the complete filter row,
       but its two controls remain tightly grouped instead of stretching
       across separate grid columns. */
    .filter-bar:not(.filter-form-compact) > .filter-form > .filter-panel-actions-icons {
        grid-column: 1 / -1 !important;
        justify-self: start !important;
        align-self: center !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    /* Give the pair a little more breathing room on very small phones,
       while keeping both controls on the same line. */
    .filter-panel-actions-icons {
        gap: 8px !important;
    }
}

@media (max-width: 359.98px) {
    .filter-panel-actions-icons {
        gap: 6px !important;
    }
    .filter-panel-actions-icons .filter-action-icon,
    .filter-panel-actions-icons .filter-action-icon.btn {
        width: 36px !important;
        min-width: 36px !important;
        max-width: 36px !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        flex-basis: 36px !important;
    }
}

/* Compact desktop/tablet filters (Notification Delivery Log): keep the
   icon pair adjacent when the surrounding fields wrap at intermediate
   widths. */
.filter-form-compact.filter-form > .filter-panel-actions-icons {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    margin-left: 0 !important;
    align-items: flex-end !important;
    gap: 8px !important;
}