/**
 * File: tp-icon-picker.css * Location: /trusspress/assets/css/tp-icon-picker.css * Purpose: Styles for the tpIconPicker modal and the global .tp-icon-mask utility.
 *          Full-screen overlay with dark aesthetic, category tab bar,
 *          search bar, scrollable icon grid, footer preview, and size selector.
 *          Zero external dependencies.
 *
 *          v1.2 -- Icon size modifier classes added.
 *                  .tp-icon-mask--{size} classes replace all inline width/height.
 * Each class consumes a --tp-icon-size-* CSS custom property
 *                  from the design token engine.
 * Changing --tp-icon-size-sm in admin updates every sm icon
 *                  across the entire site with zero code changes.
 * Only --tp-icon-src stays inline (it is per-icon dynamic data).
 *
 *          v1.3 -- Added size selector bar in the modal footer.
 *
 *          v1.4 -- Two-step selection flow:
 *                  - .tp-ip-item--pending: orange highlight for selected-not-committed icon.
 *                  - .tp-ip-footer-actions: flex wrapper for Insert Icon + Clear buttons.
 *                  - .tp-ip-insert-btn: primary action button (disabled until pending icon).
 *                  - .tp-ip-insert-btn--ready: active/enabled state.
 *
 *          v1.5 -- Size selector moved to its own row above the preview/actions row.
 *                  Fixes large size buttons being hidden behind Insert Icon button.
 *                  Footer is now two rows when size UI is shown:
 *                  Row 1: SIZE label + size buttons (full width)
 *                  Row 2: Icon preview (left) + Insert/Clear buttons (right)
 *
 * Encoding:         UTF-8 without BOM.
 * Special chars:    None -- all Unicode via escape sequences in content: values.
 * Motion: Only @keyframes tp-spin (functional spinner, not decorative).
 */

/* Overlay */
#tp-ip-wrap {
    position:        fixed;
    inset:           0;
    z-index:         999999;
    background:      rgba(0, 0, 0, 0.75);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         20px;
    box-sizing:      border-box;
    backdrop-filter: blur(2px);
}

/* Modal panel */
#tp-ip-modal {
    width:            720px;
    max-width:        100%;
    max-height:       90vh;
    background:       #1a2130;
    border:           1px solid #2e3a4e;
    border-radius:    14px;
    box-shadow:       0 24px 80px rgba(0,0,0,0.6);
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
    font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Top bar */
.tp-ip-topbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 16px 12px;
    background:      #151c28;
    border-bottom:   1px solid #2e3a4e;
    flex-shrink:     0;
}
.tp-ip-topbar-title {
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   14px;
    font-weight: 600;
    color:       #e2e8f0;
}
.tp-ip-close-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           30px;
    height:          30px;
    background:      none;
    border:          1px solid #2e3a4e;
    border-radius:   6px;
    color:           #64748b;
    cursor:          pointer;
    padding:         0;
    font-size:       14px;
    line-height:     1;
}
.tp-ip-close-btn:hover { color: #e2e8f0; background: #2e3a4e; border-color: #3d4f66; }

/* Category tab bar */
.tp-ip-cat-bar {
    background:    #151c28;
    border-bottom: 1px solid #2e3a4e;
    flex-shrink:   0;
}
.tp-ip-cat-tabs {
    display:         flex;
    padding:         8px 12px 0;
    overflow-x:      auto;
    scrollbar-width: none;
}
.tp-ip-cat-tabs::-webkit-scrollbar { display: none; }

.tp-ip-ctab {
    background:     none;
    border:         none;
    border-bottom:  2px solid transparent;
    color:          #4a5568;
    cursor:         pointer;
    font-size:      12px;
    font-weight:    600;
    padding:        6px 12px 8px;
    white-space:    nowrap;
    letter-spacing: 0.02em;
    text-transform: capitalize;
    border-radius:  4px 4px 0 0;
    margin-right:   2px;
}
.tp-ip-ctab:hover { color: #94a3b8; background: rgba(255,255,255,0.04); }
.tp-ip-ctab--on {
    color:               #ff6b35 !important;
    border-bottom-color: #ff6b35;
    background:          rgba(255,107,53,0.08);
}

/* Search row */
.tp-ip-search-row {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 14px;
    background:    #1a2130;
    border-bottom: 1px solid #2e3a4e;
    flex-shrink:   0;
}
.tp-ip-search-box {
    flex:        1;
    position:    relative;
    display:     flex;
    align-items: center;
}
.tp-ip-search-svg {
    position:       absolute;
    left:           10px;
    color:          #4a5568;
    pointer-events: none;
}
#tp-ip-search {
    width:         100%;
    background:    #1e2a3a;
    border:        1px solid #2e3a4e;
    border-radius: 7px;
    padding:       8px 12px 8px 34px;
    color:         #e2e8f0;
    font-size:     13px;
    outline:       none;
}
#tp-ip-search::placeholder {
    color: #4a5568;
}

#tp-ip-search:focus {
    border-color: #ff6b35;
    box-shadow: 0 0 0 2px rgba(255, 107, 53, 0.15);
}
.tp-ip-count {
    font-size:   12px;
    color:       #4a5568;
    white-space: nowrap;
    min-width:   60px;
    text-align:  right;
}

/* Grid area */
.tp-ip-grid-area {
    flex:            1;
    overflow-y:      auto;
    min-height:      0;
    padding:         10px;
    background:      #1a2130;
    scrollbar-width: thin;
    scrollbar-color: #2e3a4e #1a2130;
}
.tp-ip-grid-area::-webkit-scrollbar       { width: 5px; }
.tp-ip-grid-area::-webkit-scrollbar-track { background: #1a2130; }
.tp-ip-grid-area::-webkit-scrollbar-thumb { background: #2e3a4e; border-radius: 3px; }

/* Loading state */
.tp-ip-loading-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         50px 20px;
    color:           #4a5568;
    font-size:       13px;
}
.tp-ip-spinner {
    width:            28px;
    height:           28px;
    border:           3px solid #2e3a4e;
    border-top-color: #ff6b35;
    border-radius:    50%;
    animation: tp-spin 0.7s linear infinite;
}
@keyframes tp-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty / error state */
.tp-ip-empty-state {
    text-align: center;
    padding:    50px 20px;
    color:      #4a5568;
    font-size:  13px;
}

/* Icon grid */
.tp-ip-grid {
    display:               grid;
    grid-template-columns: repeat( auto-fill, minmax(46px, 1fr) );
    gap:                   4px;
}

/* Icon item */
.tp-ip-item {
    display:         flex;
    align-items:     center;
    justify-content: center;
    aspect-ratio:    1;
    background:      #1e2a3a;
    border:          1px solid transparent;
    border-radius:   7px;
    color:           #64748b;
    cursor:          pointer;
    padding:         0;
    position:        relative;
}
.tp-ip-item:hover { background: #263347; color: #e2e8f0; border-color: #3d4f66; }

/* Committed icon (already saved to block) -- white border */
.tp-ip-item--on {
    background:   rgba(255, 107, 53, 0.15) !important;
    border-color: #ff6b35 !important;
    color:        #ff6b35 !important;
}

/* Pending icon (clicked but not yet inserted) -- brighter orange, pulsing border */
.tp-ip-item--pending {
    background:   rgba(255, 107, 53, 0.28) !important;
    border-color: #ff6b35 !important;
    color:        #ff6b35 !important;
    box-shadow:   0 0 0 2px rgba(255, 107, 53, 0.4) !important;
}

/* Tooltip */
.tp-ip-item:hover::after {
    content:        attr(title);
    position:       absolute;
    top:            calc(100% + 5px);
    left:           50%;
    transform:      translateX(-50%);
    background:     #0f1520;
    border:         1px solid #2e3a4e;
    color:          #e2e8f0;
    font-size:      10px;
    line-height:    1.2;
    padding:        3px 7px;
    border-radius:  4px;
    white-space:    nowrap;
    pointer-events: none;
    z-index:        10;
    max-width:      180px;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
/*
 * The footer is now a flex COLUMN so the size selector row sits above
 * the preview + actions row.  When no size UI is needed the column collapses
 * to a single row (same visual result as before).
 */
.tp-ip-footer {
    display:        flex;
    flex-direction: column;
    padding:        0;
    background:     #151c28;
    border-top:     1px solid #2e3a4e;
    flex-shrink:    0;
}

/* ── Row 1: Size selector (only rendered when showSizeUi is true) ─────────── */
.tp-ip-size-row {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       8px 14px;
    border-bottom: 1px solid #2e3a4e;
    background:    #131a26;
}
.tp-ip-size-label {
    font-size:      10px;
    font-weight:    700;
    color:          #4a5568;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink:    0;
}
.tp-ip-size-btns {
    display:         flex;
    gap:             4px;
    flex-wrap:       wrap;   /* allow wrap so all buttons stay visible */
    flex:            1;
    min-width:       0;
}
.tp-ip-size-btn {
    background:    none;
    border:        1px solid #2e3a4e;
    border-radius: 5px;
    color:         #64748b;
    cursor:        pointer;
    font-size:     10px;
    font-weight:   600;
    padding:       4px 8px;
    white-space:   nowrap;
    flex-shrink:   0;
    line-height:   1;
}
.tp-ip-size-btn:hover { color: #e2e8f0; border-color: #3d4f66; background: #263347; }
.tp-ip-size-btn--on {
    background:   rgba(255, 107, 53, 0.18) !important;
    border-color: #ff6b35 !important;
    color:        #ff6b35 !important;
}
.tp-ip-size-px {
    font-size:   10px;
    color:       #ff6b35;
    font-family: monospace;
    font-weight: 700;
    flex-shrink: 0;
    min-width:   30px;
    text-align:  right;
}

/* ── Row 2: Icon preview (left) + Insert / Clear buttons (right) ──────────── */
.tp-ip-footer-main {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 14px;
    gap:             10px;
}

.tp-ip-footer-left {
    display:     flex;
    align-items: center;
    gap:         10px;
    min-width:   0;
    flex-shrink: 1;
}
.tp-ip-footer-thumb {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           38px;
    height:          38px;
    background:      #1e2a3a;
    border:          1px solid #2e3a4e;
    border-radius:   8px;
    flex-shrink:     0;
}
.tp-ip-footer-name {
    font-size:     13px;
    font-weight:   500;
    color:         #e2e8f0;
    font-family:   monospace;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    max-width:     180px;
}
.tp-ip-footer-hint {
    font-size:  11px;
    color:      #4a5568;
    margin-top: 1px;
}

/* ── Footer actions (right side): Insert Icon + Clear ────────────────────── */
.tp-ip-footer-actions {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-shrink: 0;
}

/* Insert Icon button -- disabled by default, enabled when pending icon exists */
.tp-ip-insert-btn {
    display:       inline-flex;
    align-items:   center;
    background:    #1e2a3a;
    border:        1px solid #2e3a4e;
    border-radius: 6px;
    color:         #4a5568;
    cursor:        default;
    font-size:     12px;
    font-weight:   600;
    padding:       7px 14px;
    white-space:   nowrap;
    opacity:       0.5;
}
/* Enabled/ready state -- user has clicked an icon */
.tp-ip-insert-btn--ready {
    background:   #ff6b35;
    border-color: #e85a22;
    color:        #ffffff;
    cursor:       pointer;
    opacity:      1;
}
.tp-ip-insert-btn--ready:hover {
    background:   #e85a22;
    border-color: #cc4d1a;
}
.tp-ip-insert-btn--ready:focus-visible {
    outline:        2px solid #ff6b35;
    outline-offset: 2px;
}

/* Clear button */
.tp-ip-clear-btn {
    background:    none;
    border:        1px solid #2e3a4e;
    border-radius: 6px;
    color:         #64748b;
    cursor:        pointer;
    font-size:     12px;
    padding:       6px 12px;
    white-space:   nowrap;
    flex-shrink:   0;
}
.tp-ip-clear-btn:hover { color: #e2e8f0; border-color: #3d4f66; background: #2e3a4e; }

/* ── Trigger button (inline inspector panel) ─────────────────────────────── */
.tp-ip-trigger {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       7px 10px;
    background:    #1e2a3a;
    border:        1px solid #2e3a4e;
    border-radius: 7px;
    color:         #94a3b8;
    cursor:        pointer;
    font-size:     12px;
    min-width:     150px;
    max-width:     100%;
    user-select:   none;
}
.tp-ip-trigger:hover { border-color: #ff6b35; background: #263347; }
.tp-ip-trigger-icon {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    background:      #ff6b35;
    border-radius:   5px;
    flex-shrink:     0;
}
.tp-ip-trigger-label {
    flex:          1;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-family:   monospace;
}

/* WP admin resets */
#tp-ip-modal *,
#tp-ip-modal *::before,
#tp-ip-modal *::after {
    box-sizing: border-box;
}

#tp-ip-modal button:focus-visible {
    outline: 2px solid #ff6b35;
    outline-offset: 2px;
}

#tp-ip-modal p {
    margin: 0;
}

/* ══════════════════════════════════════════════════════════════════════════════
   GLOBAL UTILITY -- .tp-icon-mask
   CSS mask-image for color-controllable SVG icons.
   Loaded on the PUBLIC FRONTEND and in the editor.
   Without the frontend enqueue, icons are invisible in rendered block output.

   GOVERNANCE:
   The base class handles mask rendering only. No width or height here.
   Width and height are set exclusively by the --{size} modifier classes below.
   --tp-icon-src is the only inline style permitted on the element.
   It carries the per-icon SVG URL which cannot be expressed as a class.

   CORRECT USAGE in PHP render.php:
     <span
                 class="tp-icon-mask tp-icon-mask--md"
         role="img"
         aria-hidden="true"
                 style="--tp-icon-src: url(<?php echo esc_url( $icon_url ); ?>);">
     </span>

   CORRECT USAGE in JS (tpIconEl): window.tpIconEl(attributes.iconId, attributes.iconSize)
     -- iconSize is a string like "md", not a px number.
*/
.tp-icon-mask {
    display:               inline-block;
    flex-shrink:           0;
    vertical-align:        middle;
    background-color:      currentColor;
    -webkit-mask-image: var(--tp-icon-src);
        mask-image: var(--tp-icon-src);
    -webkit-mask-size:     contain;
    mask-size:             contain;
    -webkit-mask-repeat:   no-repeat;
    mask-repeat:           no-repeat;
    -webkit-mask-position: center;
    mask-position:         center;
}

/* ── Icon size modifier classes ───────────────────────────────────────────────
   Each class reads its dimension from a CSS custom property that is part of
   the TrussPress design token engine (:root block generated by
   TrussPress_Design_Tokens::generate_css()).

   Changing --tp-icon-size-sm in the Brand Settings admin panel updates every
   icon using .tp-icon-mask--sm across the entire site instantly.
   No block code, no template, no re-deployment required.

   Fallback values are included so the icon is never invisible if the token
   engine CSS has not yet loaded (cold cache, first paint race condition).
*/
.tp-icon-mask--xs {
    width: var(--tp-icon-size-xs, 16px);
    height: var(--tp-icon-size-xs, 16px);
}

.tp-icon-mask--sm {
    width: var(--tp-icon-size-sm, 20px);
    height: var(--tp-icon-size-sm, 20px);
}

.tp-icon-mask--md {
    width: var(--tp-icon-size-md, 24px);
    height: var(--tp-icon-size-md, 24px);
}

.tp-icon-mask--lg {
    width: var(--tp-icon-size-lg, 28px);
    height: var(--tp-icon-size-lg, 28px);
}

.tp-icon-mask--xl {
    width: var(--tp-icon-size-xl, 32px);
    height: var(--tp-icon-size-xl, 32px);
}

.tp-icon-mask--2xl {
    width: var(--tp-icon-size-2xl, 40px);
    height: var(--tp-icon-size-2xl, 40px);
}

.tp-icon-mask--3xl {
    width: var(--tp-icon-size-3xl, 48px);
    height: var(--tp-icon-size-3xl, 48px);
}

.tp-icon-mask--4xl {
    width: var(--tp-icon-size-4xl, 56px);
    height: var(--tp-icon-size-4xl, 56px);
}

.tp-icon-mask--5xl {
    width: var(--tp-icon-size-5xl, 64px);
    height: var(--tp-icon-size-5xl, 64px);
}

/* Tab bar dimmed during search */
.tp-ip-cat-bar--searching .tp-ip-ctab {
    opacity:        0.35;
    cursor:         default;
    pointer-events: none;
}

/* Clear X inside search input */
.tp-ip-search-clear {
    position:    absolute;
    right:       8px;
    background:  none;
    border:      none;
    color:       #4a5568;
    cursor:      pointer;
    font-size:   12px;
    line-height: 1;
    padding:     2px 4px;
}
.tp-ip-search-clear:hover { color: #e2e8f0; }

/* Search mode grid */
.tp-ip-grid--search {
    grid-template-columns: repeat( auto-fill, minmax(52px, 1fr) );
    gap: 4px;
}
.tp-ip-item--search {
    flex-direction: column;
    gap:            2px;
    aspect-ratio:   unset;
    padding:        6px 2px 4px;
    height:         60px;
}
.tp-ip-item-cat {
    display:       block;
    font-size:     8px;
    line-height:   1.1;
    color:         #4a5568;
    text-align:    center;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    width:         100%;
    padding:       0 2px;
}
.tp-ip-item--search:hover .tp-ip-item-cat { color: #94a3b8; }
.tp-ip-item--on .tp-ip-item-cat           { color: #ff6b35 !important; }
.tp-ip-item--pending .tp-ip-item-cat      { color: #ff6b35 !important; }