/* admin_editor.css — Shared styles for item + faction editors */

body { font-family: 'Inter', sans-serif; }
input, textarea, select, button, td, th, label, span, div, p, h1, h2, h3, h4, h5, h6, a, li { font-family: 'Inter', sans-serif; }
body, html { height: 100%; overflow: hidden; background: var(--color-bg); }

/* ── Field input ── */
.fi { background: #000; border: 1px solid var(--color-border); border-radius: 3px;
      color: var(--color-text-primary); padding: 5px 8px; font-size: 0.75rem; width: 100%;
      transition: border-color 0.15s; }
.fi:focus { outline: none; border-color: var(--color-amber); }
.fi.chg   { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.05); }
.fi:disabled { opacity: 0.4; cursor: not-allowed; }
.fi-num   { text-align: center; }

/* ── Inline cell inputs (table) ── */
.ic { background: transparent; border: none; width: 100%; height: 100%;
      padding: 3px 6px; font-size: 0.72rem; color: var(--color-text-primary); }
.ic:focus { background: #000; box-shadow: inset 0 0 0 1px var(--color-amber); outline: none; }
.ic.chg   { background: rgba(239,68,68,0.1); }
.ic.num   { text-align: center; }

/* ── Tables ── */
.th { position: sticky; top: 0; z-index: 20; background: #000; border-bottom: 1px solid var(--color-border); }
.tr { border-bottom: 1px solid rgba(55,65,81,0.35); background: #000; }
.tr:hover { background: #0a0a0a; }
.tc { border-right: 1px solid rgba(55,65,81,0.35); height: 34px; }
.tc:last-child { border-right: none; }

/* ── Checkbox ── */
.ck { appearance: none; -webkit-appearance: none; width: 13px; height: 13px;
      background: #000; border: 1px solid #555; border-radius: 2px; cursor: pointer;
      position: relative; flex-shrink: 0; }
.ck:checked { background: #EAB308; border-color: #EAB308; }
.ck:checked::after { content: ''; position: absolute; left: 3px; top: 0;
      width: 5px; height: 8px; border: 2px solid #000; border-top: none; border-left: none;
      transform: rotate(45deg); }
.ck:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Section tabs ── */
.stab { padding: 8px 14px; font-size: 11px; font-weight: 500; text-transform: uppercase;
        letter-spacing: 0.08em; cursor: pointer; color: var(--color-text-secondary);
        border-bottom: 2px solid transparent; transition: all 0.15s; }
.stab:hover { color: #fff; }
.stab.on { color: #fff; border-bottom-color: var(--color-amber); }

/* ── Faction block switcher — item editor (pill style with sliding highlight) ── */
.fsw { display: inline-flex; position: relative; align-items: center;
       background: rgba(0,0,0,1); border: 1px solid var(--color-border);
       padding: 2px; border-radius: 4px; overflow: hidden; }
.fsw-hl { position: absolute; top: 2px; left: 2px; height: calc(100% - 4px);
          background: #EAB308; border-radius: 1px; z-index: 0; pointer-events: none;
          transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), width 0.4s cubic-bezier(0.34,1.56,0.64,1); }

/* ── Faction buttons — shared base ── */
.fbtn { display: flex; align-items: center; gap: 6px; padding: 6px 14px;
        font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
        cursor: pointer; position: relative; z-index: 1; color: var(--color-text-secondary);
        transition: color 0.2s, border-color 0.2s; white-space: nowrap;
        background: transparent; border: none; border-bottom: 2px solid transparent; }
.fbtn:not(.on):hover { color: #fff; }

/* Item editor faction buttons (inside .fsw — yellow highlight behind) */
.fsw .fbtn { border-bottom: none; }
.fsw .fbtn.on { color: #000; }
.fsw .fbtn.on img { filter: brightness(0); }

/* Faction editor faction buttons (tab-style — coloured underlines) */
.fbtn.bugs.on   { color: var(--color-emerald); border-bottom-color: var(--color-emerald); }
.fbtn.bots.on   { color: var(--color-red);     border-bottom-color: var(--color-red); }
.fbtn.squids.on { color: var(--color-blue);    border-bottom-color: var(--color-blue); }

/* ── Case switcher pills ── */
.cpill { display: flex; align-items: center; gap: 5px;
         padding: 4px 10px; font-size: 10px; font-weight: 600;
         border: 1px solid var(--color-border); border-radius: 4px;
         cursor: pointer; transition: all 0.15s; color: var(--color-text-secondary);
         background: #000; white-space: nowrap; }
.cpill:hover { border-color: var(--color-amber); color: #fff; }
.cpill.on { border-color: var(--color-amber); color: var(--color-amber); background: rgba(234,179,8,0.08); }

/* ── Row disabled state (weights) ── */
.row-off { opacity: 0.3; filter: grayscale(1); }

/* ── Type badge ── */
.tbadge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
          padding: 1px 5px; border-radius: 2px; background: rgba(255,255,255,0.08);
          color: var(--color-text-secondary); }

/* ── Item sidebar ── */
.item-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
            cursor: pointer; border-radius: 3px; transition: background 0.1s; border: 1px solid transparent; }
.item-row:hover { background: rgba(255,255,255,0.04); }
.item-row.sel { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.25); }

/* ── Score group sections ── */
.sg { margin-bottom: 16px; }
.sg-title { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em;
            color: var(--color-amber); padding: 4px 0 6px;
            border-bottom: 1px solid rgba(234,179,8,0.2); margin-bottom: 8px; }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.sf label { font-size: 9px; color: var(--color-text-secondary); font-weight: 500;
            display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.sf label img { width: 14px; height: 14px; object-fit: contain; opacity: 0.7; flex-shrink: 0; }

/* ── Factor display ── */
.fv { background: #000; border: 1px solid var(--color-border); border-radius: 3px;
      padding: 5px 10px; font-size: 0.8rem; color: var(--color-emerald); text-align: center; }

/* ── Action button groups ── */
.act-group { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.act-btn { padding: 6px 10px; font-size: 10px; cursor: pointer; transition: all 0.15s;
           display: flex; align-items: center; gap: 5px; border-right: 1px solid var(--color-border); }
.act-btn:last-child { border-right: none; }
.act-rename { background: rgba(59,130,246,0.1); color: #60a5fa; }
.act-rename:hover { background: rgba(59,130,246,0.25); color: #93c5fd; }
.act-copy   { background: rgba(234,179,8,0.1);  color: var(--color-amber); }
.act-copy:hover   { background: rgba(234,179,8,0.25); }
.act-move   { background: rgba(156,163,175,0.1); color: #9ca3af; }
.act-move:hover   { background: rgba(156,163,175,0.2); color: #d1d5db; }
.act-delete { background: rgba(239,68,68,0.1); color: #f87171; }
.act-delete:hover { background: rgba(239,68,68,0.25); color: #fca5a5; }

/* ── Misc ── */
.dpulse { animation: dp 1.5s ease-in-out infinite; }
@keyframes dp { 0%,100%{box-shadow:0 0 0 0 rgba(234,179,8,0)} 50%{box-shadow:0 0 8px 2px rgba(234,179,8,0.4)} }
.sa { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--color-amber) rgba(0,0,0,0.2); }
.sa::-webkit-scrollbar { width: 3px; }
.sa::-webkit-scrollbar-thumb { background: var(--color-amber); }
.sx { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-amber) rgba(0,0,0,0.2); }
.sx::-webkit-scrollbar { height: 3px; }
.sx::-webkit-scrollbar-thumb { background: var(--color-amber); }

/* ── Modal ── */
.modal-bg { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.85);
            display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-box { background: #000; border: 1px solid var(--color-border); border-radius: 6px;
             padding: 24px; width: 95vw; max-width: 420px; }