/**
 * Manic Pixels Web OS — Gerenciador de Categorias (admin)
 * Layout: lista de categorias (esquerda) + formulário / detalhe (direita).
 *
 * Sprint 14+: drag-and-drop para reordenar + seletor visual de ícone.
 */

/* ── Layout principal ────────────────────────────────────────────────────── */

#mp-catmgr-root {
  display:        flex;
  height:         100%;
  overflow:       hidden;
  background:     var(--mp-bg-primary);
  color:          var(--mp-text-primary);
  font-size:      13px;
}

/* ── Painel esquerdo: lista ──────────────────────────────────────────────── */

#mp-catmgr-list-panel {
  width:           220px;
  min-width:       180px;
  flex-shrink:     0;
  display:         flex;
  flex-direction:  column;
  border-right:    1px solid var(--mp-border);
  background:      var(--mp-bg-secondary);
}

#mp-catmgr-list-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         10px 12px;
  border-bottom:   1px solid var(--mp-border);
  gap:             6px;
}

#mp-catmgr-list-header span {
  font-weight:     600;
  font-size:       12px;
  color:           var(--mp-text-secondary);
  letter-spacing:  .4px;
  text-transform:  uppercase;
}

.mp-catmgr-btn-new {
  display:         flex;
  align-items:     center;
  gap:             4px;
  padding:         4px 8px;
  border:          none;
  border-radius:   5px;
  background:      var(--mp-accent, #3daee9);
  color:           #fff;
  font-size:       12px;
  cursor:          pointer;
  white-space:     nowrap;
}
.mp-catmgr-btn-new:hover { filter: brightness(1.1); }

#mp-catmgr-list {
  flex:            1;
  overflow-y:      auto;
  padding:         6px 0;
}

/* ── Item de categoria ───────────────────────────────────────────────────── */

.mp-catmgr-item {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         7px 12px;
  cursor:          pointer;
  border-radius:   0;
  transition:      background .12s;
  user-select:     none;
  position:        relative;
}
.mp-catmgr-item:hover     { background: var(--mp-bg-tertiary); }
.mp-catmgr-item.active    { background: rgba(var(--mp-accent-rgb,61,174,233),.18); color: var(--mp-accent,#3daee9); }

/* Drag-and-drop feedback */
.mp-catmgr-item.is-dragging {
  opacity:         .4;
}
.mp-catmgr-item.drag-over {
  background:      rgba(var(--mp-accent-rgb,61,174,233),.22);
  border-top:      2px solid var(--mp-accent, #3daee9);
}

/* ── Handle de arraste ───────────────────────────────────────────────────── */

.mp-catmgr-drag-handle {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           16px;
  height:          20px;
  flex-shrink:     0;
  opacity:         .3;
  cursor:          grab;
  color:           var(--mp-text-primary);
  transition:      opacity .12s;
}
.mp-catmgr-item:hover .mp-catmgr-drag-handle { opacity: .6; }
.mp-catmgr-drag-handle:active                 { cursor: grabbing; }

/* ── Ícone e label do item ───────────────────────────────────────────────── */

.mp-catmgr-item-icon {
  width:           22px;
  height:          22px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.mp-catmgr-item-icon img { width: 18px; height: 18px; object-fit: contain; }

.mp-catmgr-item-label {
  flex:            1;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
  font-size:       13px;
}

/* ── Painel direito: detalhe / formulário ────────────────────────────────── */

#mp-catmgr-detail-panel {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
}

#mp-catmgr-content {
  flex:            1;
  overflow-y:      auto;
  padding:         20px;
  position:        relative; /* âncora para o modal de ícone */
}

/* ── Placeholder ─────────────────────────────────────────────────────────── */

.mp-catmgr-placeholder {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  gap:             10px;
  color:           var(--mp-text-secondary);
  font-size:       13px;
}

/* ── Formulário ──────────────────────────────────────────────────────────── */

.mp-catmgr-form-wrap  { max-width: 460px; }

.mp-catmgr-form-title {
  display:         flex;
  align-items:     center;
  gap:             8px;
  font-size:       15px;
  font-weight:     600;
  margin-bottom:   18px;
  color:           var(--mp-text-primary);
}

.mp-catmgr-form  { display: flex; flex-direction: column; gap: 14px; }

.mp-catmgr-field { display: flex; flex-direction: column; gap: 5px; }

.mp-catmgr-label {
  font-size:       11px;
  font-weight:     500;
  color:           var(--mp-text-secondary);
  text-transform:  uppercase;
  letter-spacing:  .4px;
}

.mp-catmgr-input,
.mp-catmgr-select {
  padding:         7px 10px;
  border:          1px solid var(--mp-border);
  border-radius:   6px;
  background:      var(--mp-bg-secondary);
  color:           var(--mp-text-primary);
  font-size:       13px;
  font-family:     inherit;
  outline:         none;
  transition:      border-color .12s;
  box-sizing:      border-box;
  width:           100%;
}
.mp-catmgr-input:focus,
.mp-catmgr-select:focus { border-color: var(--mp-accent, #3daee9); }

.mp-catmgr-hint {
  font-size:       11px;
  color:           var(--mp-text-secondary);
  line-height:     1.4;
}

.mp-catmgr-form-row {
  display:         flex;
  gap:             12px;
}
.mp-catmgr-form-row .mp-catmgr-field { flex: 1; }
.mp-catmgr-form-row .mp-catmgr-field--sm { flex: 0 0 110px; }

.mp-catmgr-msg {
  padding:         8px 12px;
  border-radius:   6px;
  font-size:       12px;
}
.mp-catmgr-msg--ok  { background: rgba(39,174,96,.18);  color: #27ae60; }
.mp-catmgr-msg--err { background: rgba(218,68,83,.18);  color: #da4453; }

.mp-catmgr-form-actions {
  display:         flex;
  align-items:     center;
  gap:             8px;
  margin-top:      4px;
}
.mp-catmgr-actions-spacer { flex: 1; }

/* ── Botões ──────────────────────────────────────────────────────────────── */

.mp-catmgr-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  padding:         6px 16px;
  border:          none;
  border-radius:   6px;
  font-size:       13px;
  font-weight:     500;
  font-family:     inherit;
  cursor:          pointer;
  transition:      background .12s, opacity .12s;
}
.mp-catmgr-btn:disabled { opacity: .5; cursor: not-allowed; }
.mp-catmgr-btn--cancel  { background: var(--mp-bg-tertiary); color: var(--mp-text-primary); }
.mp-catmgr-btn--cancel:hover:not(:disabled) { background: var(--mp-border); }
.mp-catmgr-btn--save    { background: var(--mp-accent,#3daee9); color: #fff; }
.mp-catmgr-btn--save:hover:not(:disabled)   { filter: brightness(1.1); }
.mp-catmgr-btn--danger  { background: rgba(218,68,83,.18); color: #da4453; }
.mp-catmgr-btn--danger:hover:not(:disabled) { background: rgba(218,68,83,.30); }

/* ── Detalhe de categoria ────────────────────────────────────────────────── */

.mp-catmgr-detail-header {
  display:         flex;
  align-items:     center;
  gap:             10px;
  margin-bottom:   16px;
}
.mp-catmgr-detail-icon {
  width:           36px;
  height:          36px;
}
.mp-catmgr-detail-icon img { width: 100%; height: 100%; object-fit: contain; }

.mp-catmgr-detail-title {
  font-size:       17px;
  font-weight:     600;
}

.mp-catmgr-detail-actions {
  display:         flex;
  gap:             8px;
  margin-top:      6px;
}

.mp-catmgr-dl {
  display:         grid;
  grid-template-columns: 110px 1fr;
  gap:             6px 12px;
  font-size:       12.5px;
  margin-top:      16px;
}
.mp-catmgr-dl dt { color: var(--mp-text-secondary); }
.mp-catmgr-dl dd { margin: 0; color: var(--mp-text-primary); }

/* ── Botão seletor de ícone ──────────────────────────────────────────────── */

.mp-catmgr-icon-btn {
  display:         flex;
  align-items:     center;
  gap:             8px;
  width:           100%;
  padding:         6px 10px;
  background:      var(--mp-bg-secondary);
  border:          1px solid var(--mp-border);
  border-radius:   6px;
  color:           var(--mp-text-primary);
  font-size:       13px;
  font-family:     inherit;
  text-align:      left;
  cursor:          pointer;
  transition:      border-color .12s;
  box-sizing:      border-box;
  min-height:      36px;
}
.mp-catmgr-icon-btn:hover  { border-color: rgba(255,255,255,.2); }
.mp-catmgr-icon-btn:focus  { outline: none; border-color: var(--mp-accent, #3daee9); box-shadow: 0 0 0 2px rgba(61,174,233,.2); }

.mp-catmgr-icon-btn-img {
  width:           20px;
  height:          20px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.mp-catmgr-icon-btn-label {
  flex:            1;
  min-width:       0;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
}

/* ── Modal de seleção de ícone ───────────────────────────────────────────── */

.mp-catmgr-icon-modal {
  position:        absolute;
  inset:           0;
  background:      rgba(10,10,20,.72);
  backdrop-filter: blur(2px);
  display:         flex;
  align-items:     flex-start;
  justify-content: center;
  padding:         20px 16px;
  z-index:         100;
  box-sizing:      border-box;
}

.mp-catmgr-icon-modal-inner {
  background:      var(--mp-bg-primary, #1a1a2e);
  border:          1px solid var(--mp-border);
  border-radius:   10px;
  width:           100%;
  max-width:       500px;
  max-height:      calc(100% - 0px);
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  box-shadow:      0 12px 40px rgba(0,0,0,.5);
}

.mp-catmgr-icon-modal-hd {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 12px 8px;
  border-bottom:   1px solid var(--mp-border);
  flex-shrink:     0;
}

.mp-catmgr-icon-modal-title {
  font-size:       11px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  .05em;
  color:           var(--mp-text-secondary);
  white-space:     nowrap;
  flex-shrink:     0;
}

.mp-catmgr-icon-search {
  flex:            1;
  min-width:       0;
  padding:         5px 9px;
  font-size:       12.5px;
  height:          30px;
}

.mp-catmgr-icon-modal-close {
  flex-shrink:     0;
  width:           26px;
  height:          26px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(255,255,255,.06);
  border:          1px solid var(--mp-border);
  border-radius:   6px;
  color:           var(--mp-text-secondary);
  cursor:          pointer;
  transition:      background .12s;
}
.mp-catmgr-icon-modal-close:hover { background: rgba(255,255,255,.12); }

.mp-catmgr-icon-modal-count {
  padding:         6px 14px 4px;
  font-size:       11px;
  color:           var(--mp-text-secondary);
  flex-shrink:     0;
}

.mp-catmgr-icon-grid {
  flex:            1;
  overflow-y:      auto;
  display:         grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap:             6px;
  padding:         8px 10px 14px;
  align-content:   start;
}

.mp-catmgr-icon-cell {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-start;
  gap:             4px;
  padding:         8px 4px 6px;
  background:      transparent;
  border:          1px solid transparent;
  border-radius:   7px;
  color:           var(--mp-text-secondary);
  font-size:       9.5px;
  font-family:     inherit;
  cursor:          pointer;
  transition:      background .1s, border-color .1s, color .1s;
  min-height:      72px;
  line-height:     1.3;
  text-align:      center;
}
.mp-catmgr-icon-cell:hover {
  background:      rgba(255,255,255,.07);
  border-color:    var(--mp-border);
  color:           var(--mp-text-primary);
}
.mp-catmgr-icon-cell.is-active {
  background:      rgba(var(--mp-accent-rgb,61,174,233),.18);
  border-color:    var(--mp-accent, #3daee9);
  color:           var(--mp-accent, #3daee9);
}
.mp-catmgr-icon-cell img {
  display:         block;
  width:           36px;
  height:          36px;
  object-fit:      contain;
  flex-shrink:     0;
}
.mp-catmgr-icon-cell span {
  display:         block;
  overflow:        hidden;
  text-overflow:   ellipsis;
  white-space:     nowrap;
  max-width:       100%;
  width:           100%;
}

.mp-catmgr-icon-modal-empty {
  padding:         20px;
  text-align:      center;
  font-size:       12px;
  color:           var(--mp-text-secondary);
  flex-shrink:     0;
}