/* ============================================================
   Tag Modal – compact chip-based design
   ============================================================ */

/* ---------- overlay ---------- */
.tag-modal-overlay{display:none;position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.3);align-items:center;justify-content:center;}
.tag-modal-overlay.open{display:flex;}

/* ---------- modal shell ---------- */
.tag-modal{background:#fff;border-radius:14px;width:360px;max-width:90vw;box-shadow:0 16px 48px rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.04);animation:tmIn .2s ease;overflow:hidden;}
@keyframes tmIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- header ---------- */
.tag-modal .tm-header{display:flex;align-items:center;gap:.5rem;padding:.85rem 1rem .5rem;}
.tag-modal .tm-icon{width:20px;height:20px;color:#d97706;flex-shrink:0;}
.tag-modal .tm-title{font-size:.92rem;font-weight:700;color:var(--neutral-900,#111);flex:1;letter-spacing:-.01em;}
.tag-modal .tm-close{background:none;border:none;cursor:pointer;padding:.2rem;color:var(--neutral-400,#9ca3af);display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .15s;}
.tag-modal .tm-close:hover{background:var(--neutral-100,#f3f4f6);color:var(--neutral-700,#374151);}
.tag-modal .tm-close svg{width:18px;height:18px;}

/* ---------- chip area ---------- */
.tag-modal .tm-chips{display:flex;flex-wrap:wrap;gap:6px;padding:.5rem 1rem;min-height:36px;max-height:180px;overflow-y:auto;}
.tag-modal .tm-chips::-webkit-scrollbar{width:4px;}
.tag-modal .tm-chips::-webkit-scrollbar-thumb{background:var(--neutral-200,#e5e7eb);border-radius:4px;}

/* single chip */
.tag-modal .tm-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;font-size:.78rem;font-weight:500;border-radius:20px;cursor:pointer;border:1.5px solid var(--neutral-200,#e5e7eb);background:var(--neutral-50,#f9fafb);color:var(--neutral-600,#4b5563);transition:all .15s;user-select:none;white-space:nowrap;}
.tag-modal .tm-chip:hover{border-color:var(--neutral-300,#d1d5db);background:#fff;}
.tag-modal .tm-chip.active{background:var(--primary-50,#f0fdfa);border-color:var(--primary-400,#2dd4bf);color:var(--primary-700,#0f766e);font-weight:600;}
.tag-modal .tm-chip.active:hover{background:var(--primary-100,#ccfbf1);}
.tag-modal .tm-chip .tm-chip-x{display:none;margin-left:2px;font-size:.7rem;line-height:1;opacity:.5;padding:1px 2px;border-radius:3px;}
.tag-modal .tm-chip .tm-chip-x:hover{opacity:1;background:rgba(220,38,38,.12);color:#dc2626;}
.tag-modal.tm-deleting .tm-chip{cursor:default;padding-right:8px;}
.tag-modal.tm-deleting .tm-chip .tm-chip-x{display:inline-flex;cursor:pointer;}

/* empty / loading states */
.tag-modal .tm-empty{font-size:.8rem;color:var(--neutral-400,#9ca3af);padding:.25rem 0;}
.tag-modal .tm-loading{font-size:.8rem;color:var(--primary-500,#14b8a6);padding:.25rem 0;}

/* ---------- create row ---------- */
.tag-modal .tm-create{display:flex;align-items:center;gap:.4rem;padding:.6rem 1rem;border-top:1px solid var(--neutral-100,#f3f4f6);}
.tag-modal .tm-create input{flex:1;padding:.45rem .7rem;font-size:.82rem;border:1px solid var(--neutral-200,#e5e7eb);border-radius:20px;outline:none;background:#fff;color:var(--neutral-800,#1f2937);transition:border-color .15s;}
.tag-modal .tm-create input::placeholder{color:var(--neutral-400,#9ca3af);}
.tag-modal .tm-create input:focus{border-color:var(--primary-400,#2dd4bf);}
.tag-modal .tm-create .tm-add-btn{width:30px;height:30px;border-radius:50%;background:var(--primary-600,#0d9488);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.15rem;font-weight:600;line-height:1;transition:background .15s;}
.tag-modal .tm-create .tm-add-btn:hover{background:var(--primary-700,#0f766e);}

/* ---------- footer ---------- */
.tag-modal .tm-footer{display:flex;align-items:center;justify-content:space-between;padding:.55rem 1rem;border-top:1px solid var(--neutral-100,#f3f4f6);}
.tag-modal .tm-footer .tm-del-toggle{background:none;border:none;cursor:pointer;font-size:.76rem;color:var(--neutral-400,#9ca3af);padding:0;transition:color .15s;}
.tag-modal .tm-footer .tm-del-toggle:hover{color:#dc2626;}
.tag-modal .tm-footer .tm-done{padding:.35rem 1.1rem;font-size:.8rem;font-weight:500;color:#fff;background:var(--primary-600,#0d9488);border:none;border-radius:6px;cursor:pointer;transition:background .15s;}
.tag-modal .tm-footer .tm-done:hover{background:var(--primary-700,#0f766e);}

/* ============================================================
   DxDialog – custom confirm / alert replacement
   ============================================================ */
.dx-dialog-overlay{display:none;position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,0.35);align-items:center;justify-content:center;}
.dx-dialog-overlay.open{display:flex;}
.dx-dialog{background:#fff;border-radius:14px;width:360px;max-width:90vw;padding:1.35rem;box-shadow:0 16px 48px rgba(0,0,0,0.18);animation:dxIn .18s ease;}
@keyframes dxIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.dx-dialog-message{font-size:.88rem;color:var(--neutral-800,#1f2937);line-height:1.55;margin-bottom:1.15rem;word-break:break-word;}
.dx-dialog-actions{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;}
.dx-dialog-actions button{padding:.42rem 1rem;font-size:.82rem;font-weight:500;border-radius:6px;cursor:pointer;border:1px solid transparent;transition:all .15s;}
.dx-dialog-actions .dx-btn-cancel{color:var(--neutral-600,#4b5563);background:var(--neutral-100,#f3f4f6);border-color:var(--neutral-200,#e5e7eb);}
.dx-dialog-actions .dx-btn-cancel:hover{background:var(--neutral-200,#e5e7eb);}
.dx-dialog-actions .dx-btn-ok{color:#fff;background:var(--primary-600,#0d9488);border-color:var(--primary-600,#0d9488);}
.dx-dialog-actions .dx-btn-ok:hover{background:var(--primary-700,#0f766e);}
.dx-dialog-actions .dx-btn-danger{color:#fff;background:#dc2626;border-color:#dc2626;}
.dx-dialog-actions .dx-btn-danger:hover{background:#b91c1c;}