/* ITSWEBER CMS – Lucide Icon Picker */

/* === Modal Overlay === */
.icon-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9999;display:none;align-items:center;justify-content:center}
.icon-picker-overlay.active{display:flex}
.icon-picker-modal{background:var(--color-surface,#fff);border-radius:var(--radius-lg,12px);box-shadow:0 20px 60px rgba(0,0,0,.3);width:680px;max-width:92vw;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.icon-picker-header{padding:16px 20px;border-bottom:1px solid var(--color-border,#e2e8f0);display:flex;align-items:center;gap:12px}
.icon-picker-header h3{margin:0;font-size:1rem;font-weight:600;white-space:nowrap}
.icon-picker-search{flex:1;padding:8px 12px;border:1px solid var(--color-border,#e2e8f0);border-radius:var(--radius-md,8px);font-size:.875rem;outline:none;background:var(--color-bg,#f8fafc)}
.icon-picker-search:focus{border-color:var(--color-primary,#2563eb);box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.icon-picker-close{background:none;border:none;cursor:pointer;padding:4px;color:var(--color-text-muted,#64748b);font-size:1.25rem;line-height:1}
.icon-picker-close:hover{color:var(--color-text,#1e293b)}

/* === Modal Body === */
.icon-picker-body{overflow-y:auto;padding:16px 20px;flex:1}
.icon-picker-category{margin-bottom:16px}
.icon-picker-category-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted,#64748b);margin-bottom:8px;font-weight:600}
.icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:4px}
.icon-picker-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border-radius:var(--radius-md,8px);border:1px solid transparent;cursor:pointer;transition:all .15s}
.icon-picker-item:hover{background:var(--color-bg,#f1f5f9);border-color:var(--color-border,#e2e8f0)}
.icon-picker-item.selected{background:rgba(37,99,235,.1);border-color:var(--color-primary,#2563eb)}
.icon-picker-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-picker-item-name{font-size:.575rem;color:var(--color-text-muted,#64748b);text-align:center;line-height:1.15;word-break:break-all;max-width:100%}
.icon-picker-empty{text-align:center;padding:32px;color:var(--color-text-muted,#64748b);font-size:.875rem}

/* === Modal Footer === */
.icon-picker-footer{padding:12px 20px;border-top:1px solid var(--color-border,#e2e8f0);display:flex;align-items:center;justify-content:space-between;gap:12px}
.icon-picker-footer .selected-info{font-size:.8rem;color:var(--color-text-muted,#64748b);display:flex;align-items:center;gap:6px}
.icon-picker-footer .selected-info svg{width:20px;height:20px}
.icon-picker-footer .selected-info strong{color:var(--color-text,#1e293b)}

/* === Icon Input Wrapper === */
.icon-input-wrapper{display:flex;align-items:center;gap:3px;min-width:0}
.icon-input-wrapper>input,
.icon-input-wrapper>textarea{min-width:0;flex:1 1 0;width:auto !important}

/* Preview thumbnail */
.icon-input-preview{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;background:var(--color-bg,#f1f5f9);flex-shrink:0}
.icon-input-preview:empty{display:none}
.icon-input-preview svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Pick button (search icon) */
.icon-pick-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--color-border,#e2e8f0);border-radius:4px;background:var(--color-surface,#fff);cursor:pointer;color:var(--color-text-muted,#64748b);transition:all .15s;flex-shrink:0;padding:0}
.icon-pick-btn:hover{border-color:var(--color-primary,#2563eb);color:var(--color-primary,#2563eb);background:rgba(37,99,235,.05)}
.icon-pick-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
