/* TiviDeck web panel: the Categories page (the TV's category manager from a computer). Its own file, every class "cm-",
   so it never restyles the panel's shared components; it uses app.css's tokens (--line, --muted, --green...). */
.cm-head .seg{margin-top:4px}
.cm{padding-top:20px}
.cm-providers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.cm-providers .chip{display:inline-flex;align-items:center;gap:8px}
.cm-n{font-size:11.5px;font-weight:700;color:var(--muted);background:#ffffff0d;border-radius:999px;padding:1px 8px}
.cm-providers .chip.on .cm-n{color:#dbe6ff;background:#ffffff1a}
input.txt.cm-search{width:100%;min-width:0}
.cm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.cm-order{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.cm-stats{margin:14px 0 2px;font-size:13px;font-weight:600;color:#c8d6ea}
.cm-tip{margin:0 0 6px}

.cm-new{margin:14px 0 6px;padding:14px;border-radius:14px;border:1px solid #f5b34255;background:linear-gradient(150deg,#2a221066,#0d1626)}
.cm-new-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.cm-new-head b{color:var(--gold)}
.cm-new .cm-rows{margin-top:10px}

.cm-list{margin-top:8px}
.cm-provider{margin:22px 0 4px;font:700 12px/1.2 Sora,Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8fb0ff}
.cm-region{display:flex;align-items:center;gap:8px;margin-top:14px;padding:6px 6px 6px 4px;border-radius:12px;border:1px solid transparent}
.cm-region:hover{background:#ffffff06}
.cm-fold{flex:1;min-width:0;display:flex;align-items:center;gap:10px;border:0;background:transparent;padding:6px 6px;border-radius:10px;text-align:left}
.cm-fold:focus-visible,.cm-ico:focus-visible,.cm-tick:focus-visible{outline:2px solid #5b85ff;outline-offset:2px}
.cm-chev{width:16px;color:var(--muted);font-size:17px;line-height:1;flex:none;text-align:center}
.cm-flag{font-size:20px;line-height:1;flex:none}
.cm-rname{min-width:0;overflow-wrap:anywhere;font:700 14.5px/1.25 Sora,Inter,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.cm-count{flex:none;font-size:12px;font-weight:700;color:var(--muted);background:#16243a;border:1px solid var(--line);border-radius:999px;padding:1px 9px}
.cm-region.folded .cm-rname{color:#c3d0e2}
.cm-rtools,.cm-tools{display:flex;align-items:center;gap:6px;flex:none}
.cm-tick{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);background:#24324a;padding:0;position:relative;flex:none}
.cm-tick.all{background:var(--green);border-color:var(--green)}
.cm-tick.all::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#062317;font-size:14px;font-weight:800}
.cm-tick.some{background:#0de59355;border-color:#0de59388}
.cm-tick.some::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--green)}
.btn.cm-ico{min-width:34px;height:34px;padding:0 9px;border-radius:9px;font-size:13px;font-weight:700;line-height:1}
.btn.cm-ico:disabled{opacity:.28}

.cm-rows{display:flex;flex-direction:column;gap:6px;margin:6px 0 0 4px}
.cm-row{display:flex;align-items:center;gap:12px;padding:9px 10px;border:1px solid #1d2a3f;border-radius:12px;background:#0a1220a0;transition:opacity .15s,box-shadow .15s}
.cm-row.off{background:#0a122060}
.cm-row.off .cm-name{color:var(--faint)}
.cm-row[draggable=true]{cursor:grab}
.cm-handle{flex:none;width:16px;text-align:center;color:var(--faint);font-size:16px;line-height:1;user-select:none}
.cm-region[draggable=true]{cursor:grab}
.cm-handle.none{visibility:hidden}
.cm-text{flex:1;min-width:0}
.cm-name{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.cm-sub{color:var(--muted);font-size:12.5px;margin-top:1px;overflow-wrap:anywhere}
.cm-badge{display:inline-block;margin-left:8px;font-size:12px;vertical-align:middle}
.cm-badge.adult{padding:1px 6px;border-radius:5px;background:#ff6b81cc;color:#fff;font-size:10.5px;font-weight:800}
.cm-more{padding:7px 12px;font-size:13px}
.cm-more.on{border-color:#5b85ff}
.cm-lifted{opacity:.4}
.cm-over-before{box-shadow:inset 0 3px 0 var(--green)}
.cm-over-after{box-shadow:inset 0 -3px 0 var(--green)}
.cm-rowwrap{display:flex;flex-direction:column}
.cm-rowwrap .cm-row{border-bottom-left-radius:0;border-bottom-right-radius:0;border-color:#3d6bff66}
.cm-editor{display:flex;flex-direction:column;gap:10px;padding:12px 14px 14px;border:1px solid #3d6bff66;border-top:0;border-radius:0 0 12px 12px;background:#0d1830}
.cm-editor label{display:block}
.cm-editor .chips > input.txt{flex:1 1 220px}
input.txt.cm-pin{min-width:0;width:140px}
.cm-foot{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}

@media(max-width:900px){
  .cm-order{margin-left:0;width:100%;flex-wrap:wrap}
  .cm-order .seg{max-width:100%}
  .cm-row{flex-wrap:wrap;gap:8px 10px}
  .cm-text{flex:1 1 calc(100% - 100px)}
  .cm-tools{width:100%;justify-content:flex-end}
  .cm-region{flex-wrap:wrap}
  .cm-fold{flex:1 1 calc(100% - 40px)}
  .cm-rtools{width:100%;justify-content:flex-end}
  .cm-rows{margin-left:0}
}