/* server/gifts.css — the Gifts tab of the HMS panel (UI code: server/gifts.js).
 *
 * A sibling of rankings.css: the panel's own stylesheet (inline in panel.html) already styles
 * section/h2, tables, buttons, inputs, pills and the colour variables; this file only adds what
 * the gifts view needs. Every class and id is prefixed `gf-` and the few element rules are
 * scoped to #view-gifts, so nothing here can restyle the Live or Rankings tabs. */

/* Campaign gifts are the loud orange; gaming extras a quieter, distinct slate violet. */
#view-gifts{--gf-camp:#ffa657;--gf-camp-line:#d18616;--gf-extra:#b4a7d6;--gf-extra-line:#5f5687;--gf-gold:#e3b341;
            padding:16px;display:grid;gap:16px;max-width:1700px;margin:0 auto}
#view-gifts a{color:var(--accent);text-decoration:none}
#view-gifts a:hover{text-decoration:underline}
#view-gifts section > h2{flex-wrap:wrap}
#view-gifts button:disabled,#view-gifts button:disabled:hover{opacity:.55;cursor:default;border-color:var(--line);color:var(--text)}
#view-gifts button.primary:disabled,#view-gifts button.primary:disabled:hover{background:#1f6feb;border-color:#1f6feb;color:#fff}
.gf-hide{display:none !important}
.gf-h2note{text-transform:none;letter-spacing:0}

/* ---- toolbar: credential + queue pills, the global buttons ---- */
.gf-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gf-toolbar .gf-spacer{flex:1}
#gf-notices{display:grid;gap:8px}
#gf-notices:empty{display:none}
#gf-notices .gf-banner{margin-top:0}

/* ---- layout: region list on the left, the gift list on the right ---- */
.gf-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start}
#gf-main{display:grid;gap:16px;min-width:0}
#gf-global{display:grid;gap:16px;min-width:0}
/* --gf-head is the measured panel header height (gifts.js), so the list sticks just below it. */
#gf-side{position:sticky;top:calc(var(--gf-head,46px) + 16px);display:flex;flex-direction:column;
         max-height:calc(100vh - var(--gf-head,46px) - 32px)}
.gf-search{padding:8px 10px;border-bottom:1px solid var(--line)}
.gf-search input{width:100%}
#gf-region-list{position:relative;overflow-y:auto;flex:1;min-height:0}
.gf-grp{position:sticky;top:0;z-index:1;display:flex;gap:6px;padding:5px 12px;background:var(--panel2);
        border-bottom:1px solid var(--line);color:var(--dim);font-size:10px;text-transform:uppercase;letter-spacing:.5px}
.gf-grp .gf-spacer{flex:1}
#view-gifts a.gf-rrow{display:flex;gap:9px;align-items:flex-start;padding:7px 12px;border-bottom:1px solid #21262d;color:var(--text)}
#view-gifts a.gf-rrow:hover{background:#1a2029;text-decoration:none}
#view-gifts a.gf-rrow.gf-sel{background:#1c2636;box-shadow:inset 3px 0 0 var(--accent)}
#view-gifts a.gf-rrow.gf-all{border-bottom:1px solid var(--line)}
.gf-flag{font-size:16px;line-height:1.25;width:20px;text-align:center;flex:none}
.gf-rmain{min-width:0;flex:1}
.gf-rline{display:flex;align-items:center;gap:6px;min-width:0}
.gf-rline .dot{margin-right:0;flex:none}
.gf-rline b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-rmeta{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "5 campaign": the one number the operator scans the list for, so it is highlighted;
   "2 extra" sits beside it, smaller and quieter. */
.gf-cbadge{flex:none;font-size:9px;font-weight:600;padding:0 5px;border-radius:3px;border:1px solid var(--gf-camp-line);
           color:var(--gf-camp);background:rgba(255,166,87,.1);letter-spacing:.4px;line-height:15px;text-transform:uppercase}
.gf-xbadge{flex:none;font-size:8px;font-weight:500;padding:0 4px;border-radius:3px;border:1px solid var(--gf-extra-line);
           color:var(--gf-extra);letter-spacing:.3px;line-height:13px;text-transform:uppercase}
.gf-mk{flex:none;font-size:10px}
.gf-mk.gf-run{color:var(--accent)} .gf-mk.gf-q{color:var(--warn)} .gf-mk.gf-sch{color:var(--dim)}
.gf-newtxt{color:var(--accent)}
.gf-camptxt{color:var(--gf-camp)}
.gf-extratxt{color:var(--gf-extra)}
.gf-nomatch{padding:14px 12px;color:var(--dim)}

/* ---- headers of the region / all-regions panes ---- */
/* Scrolled to after picking a region in the stacked layout: land below the sticky panel header. */
#gf-main{scroll-margin-top:calc(var(--gf-head,46px) + 8px)}
/* One line saying what CAMPAIGN and GAMING EXTRA mean, above both views. */
.gf-legend{line-height:1.7;overflow-wrap:anywhere}
.gf-legend .gf-badge{vertical-align:1px}
#view-gifts h2.gf-title{font-size:15px;text-transform:none;letter-spacing:0;color:var(--text)}
#view-gifts h2.gf-title .gf-flag{font-size:20px;width:auto}
#gf-r-title{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.gf-info{display:grid;gap:3px}
.gf-livetag{color:var(--ok);font-weight:600}
.gf-banner{margin-top:10px;border:1px solid rgba(248,81,73,.55);background:rgba(248,81,73,.08);
           border-radius:6px;padding:8px 12px;overflow-wrap:anywhere}
.gf-banner.gf-warn{border-color:rgba(210,153,34,.55);background:rgba(210,153,34,.08)}
.gf-tools{margin-top:10px}
.gf-settings{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px;margin-top:12px}
.gf-box{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:10px 12px;min-width:0}
.gf-boxh{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);margin-bottom:8px}
.gf-sub{margin-top:8px}
.gf-tchip{display:inline-flex;align-items:center;gap:2px;padding:1px 2px 1px 8px;border-radius:999px;
          background:var(--bg);border:1px solid var(--line);font-size:11px}
#view-gifts .gf-tchip button{border:none;background:none;padding:0 5px;font-size:12px;line-height:1;color:var(--dim)}
#view-gifts .gf-tchip button:hover{color:var(--bad)}

/* ---- removed list ---- */
.gf-removed{margin-top:12px;border:1px solid var(--line);border-radius:6px;padding:6px 10px;background:var(--panel2)}
.gf-removed summary{font-size:11px}

/* ---- filter bar ---- */
.gf-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 14px;
            border-top:1px solid var(--line);background:var(--panel2)}
.gf-filters input[type=search]{flex:1;min-width:140px;max-width:280px}
.gf-seg{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden;flex-wrap:wrap}
#view-gifts .gf-seg button{border:none;border-radius:0;border-right:1px solid var(--line);background:var(--bg);color:var(--dim)}
#view-gifts .gf-seg button:last-child{border-right:none}
#view-gifts .gf-seg button:hover{color:var(--text)}
#view-gifts .gf-seg button[aria-pressed="true"]{background:var(--panel);color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}

/* ---- gift tables ---- */
.gf-tablewrap{overflow-x:auto;border-top:1px solid var(--line)}
#view-gifts .gf-tablewrap td{padding:4px 8px}
td.gf-icc{width:44px}
td.gf-num,th.gf-num{text-align:right;font-variant-numeric:tabular-nums}
.gf-coin{color:var(--gf-gold);font-size:10px}
/* Campaign rows carry a stripe, so a scroll through 700 gifts still finds them; gaming extras a fainter one. */
tr.gf-rcamp td:first-child{box-shadow:inset 3px 0 0 var(--gf-camp-line)}
tr.gf-rextra td:first-child{box-shadow:inset 2px 0 0 var(--gf-extra-line)}
.gf-ic{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;
       width:32px;height:32px;border-radius:6px;overflow:hidden;font-size:10px;font-weight:600;color:#e6edf3}
.gf-ic img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* gifts.js adds gf-loaded once the image is in: until then (or if it fails) the text shows. */
.gf-ic.gf-loaded > span,.gf-lb.gf-loaded > span{visibility:hidden}
/* The gift cell wraps (badges, "campaign in" flags) so the table fits a phone without scrolling;
   only the name itself stays on one line, cut with an ellipsis. */
td.gf-gc{white-space:normal;min-width:140px}
.gf-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.gf-nm{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-badge{flex:none;font-size:9px;font-weight:700;padding:0 5px;border-radius:3px;border:1px solid var(--line);
          letter-spacing:.5px;line-height:15px}
.gf-badge.gf-camp{display:inline-flex;align-items:center;gap:3px;color:var(--gf-camp);border-color:var(--gf-camp-line);background:rgba(255,166,87,.12)}
/* TikTok's own event badge inside CAMPAIGN (removed by gifts.js if it fails to load). */
.gf-badge img.gf-bicon{height:11px;width:auto;max-width:28px;object-fit:contain;margin-left:-2px}
.gf-badge.gf-extra{color:var(--gf-extra);border-color:var(--gf-extra-line);background:rgba(180,167,214,.06);font-weight:600}
.gf-badge.gf-new{color:var(--accent);border-color:#1f6feb;background:rgba(56,139,253,.12)}
.gf-lb{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;height:16px;min-width:34px;
       padding:0 3px;border-radius:3px;border:1px dashed var(--line);font-size:8px;letter-spacing:.4px;color:var(--dim);overflow:hidden}
.gf-lb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gf-lb.gf-loaded{border-style:solid;border-color:transparent}
td.gf-empty{padding:34px 12px;text-align:center;color:var(--dim);white-space:normal}
td.gf-avc{white-space:nowrap}
#view-gifts button.gf-avbtn{padding:1px 7px;font-size:11px;background:var(--bg)}
#view-gifts button.gf-avbtn.gf-partial{border-color:rgba(210,153,34,.55)}
#view-gifts a.gf-fl{font-size:14px;margin-left:2px}
#view-gifts a.gf-fl:hover{text-decoration:none;filter:brightness(1.2)}
/* The opened region list of a global row: full width, indented past the icon column. */
#view-gifts tr.gf-exp td{white-space:normal;background:var(--panel2);padding:6px 8px 8px 52px}
tr.gf-exp .gf-gchip{white-space:normal}
tr.gf-exp:hover td{background:var(--panel2)}

/* ---- chips (removed gifts, region lists, campaign gifts by region) ---- */
.gf-chips{display:flex;flex-wrap:wrap;gap:4px;min-width:0}
.gf-gchip{display:inline-flex;gap:4px;align-items:center;padding:1px 8px;border-radius:999px;border:1px solid var(--line);
          background:var(--bg);font-size:11px;color:var(--text);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-gifts a.gf-gchip{color:var(--text)}
#view-gifts a.gf-gchip:hover{border-color:var(--accent);text-decoration:none}
.gf-gchip.gf-camp{border-color:var(--gf-camp-line);background:rgba(255,166,87,.07)}
.gf-gchip.gf-extra{border-color:var(--gf-extra-line);background:rgba(180,167,214,.05)}
/* The folding "Gaming extras by region" card: its title is the toggle. */
#view-gifts button.gf-fold{border:none;background:none;padding:0;font:inherit;color:inherit;
                           text-transform:inherit;letter-spacing:inherit;display:inline-flex;gap:6px;align-items:center}
#view-gifts button.gf-fold:hover{color:var(--text)}
#view-gifts button.gf-fold[aria-expanded="true"] .gf-caret{transform:rotate(90deg)}
.gf-caret{display:inline-block;transition:transform .12s}
#gf-xbr.gf-folded > h2{border-bottom:none}
.gf-cbr-row{display:grid;grid-template-columns:240px minmax(0,1fr);gap:10px;align-items:start;padding:6px 0;border-bottom:1px solid #21262d}
.gf-cbr-row:last-child{border-bottom:none}
#view-gifts a.gf-cbr-reg{display:flex;gap:6px;align-items:center;color:var(--text);min-width:0}
.gf-cbr-reg span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- combined gifts in the lists: one row, "3 IDs" opens the members ---- */
#view-gifts .gf-idchip{flex:none;font-size:9px;font-weight:600;padding:0 6px;line-height:15px;border-radius:999px;
                       border:1px solid #1f6feb;background:rgba(56,139,253,.1);color:var(--accent);letter-spacing:.3px}
#view-gifts button.gf-idchip:hover{background:rgba(56,139,253,.2);color:var(--text)}
.gf-idchip.gf-static{display:inline-block}
.gf-mixed{font-size:10px;color:var(--warn);white-space:nowrap}
#view-gifts tr.gf-mem td{background:var(--panel2);border-bottom-color:var(--line)}
#view-gifts tr.gf-mem td.gf-icc{box-shadow:inset 3px 0 0 #1f6feb;text-align:right}
tr.gf-mem .gf-ic{width:24px;height:24px;font-size:9px}
tr.gf-mem .gf-nm{color:var(--dim)}
.gf-badge.gf-absent{color:var(--dim);font-weight:500}
.gf-newest{flex:none;font-size:10px;color:var(--gf-gold);white-space:nowrap}
.gf-heldban .gf-chips{max-height:120px;overflow-y:auto}

/* ---- the Duplicates view ---- */
.gf-dupsrow .gf-rline b{font-weight:600}
.gf-dbadge{flex:none;font-size:9px;font-weight:700;padding:0 5px;border-radius:3px;border:1px solid rgba(210,153,34,.7);
           color:var(--warn);background:rgba(210,153,34,.12);letter-spacing:.4px;line-height:15px;text-transform:uppercase}
.gf-dlist{display:grid;gap:12px;padding:12px 14px;border-top:1px solid var(--line)}
div.gf-empty{padding:28px 12px;text-align:center;color:var(--dim)}
.gf-card{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;display:grid;gap:8px;min-width:0;
         scroll-margin-top:calc(var(--gf-head,46px) + 12px)}
.gf-card.gf-editcard{border-color:#1f6feb}
.gf-card.gf-flash{animation:gf-flash 1.6s ease-out}
.gf-csave{row-gap:4px}
@keyframes gf-flash{0%,30%{box-shadow:0 0 0 2px var(--accent)}100%{box-shadow:0 0 0 2px transparent}}
.gf-chead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.gf-chead .gf-spacer{flex:1}
.gf-ctitle{min-width:0;overflow-wrap:anywhere}
.gf-ctitle b{font-size:13px}
.gf-rchip{font-size:10px;padding:0 7px;line-height:17px;border-radius:999px;border:1px solid var(--line);color:var(--text);background:var(--bg)}
.gf-rchip.gf-rok{color:var(--ok);border-color:rgba(63,185,80,.5)}
.gf-rchip.gf-rwarn{color:var(--warn);border-color:rgba(210,153,34,.6)}
.gf-cflags{font-size:14px;white-space:nowrap}
.gf-cnote{overflow-wrap:anywhere}
#view-gifts .gf-mwrap{border:1px solid var(--line);border-radius:6px;background:var(--panel)}
#view-gifts .gf-mtable th{padding:4px 8px}
td.gf-tk,th.gf-tk{width:44px;text-align:center}
td.gf-tk input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--accent)}
td.gf-dcell{width:56px;text-align:center}
td.gf-num.gf-cdiff{color:var(--warn)}
/* The group being edited is the ticked rows; every combined group carries its letter's stripe. */
#view-gifts tr.gf-ticked td{background:rgba(56,139,253,.07)}
.gf-lchip{display:inline-block;min-width:18px;padding:0 4px;border-radius:4px;font-size:10px;font-weight:700;line-height:16px;
          text-align:center;color:#0d1117;background:var(--gf-lc,#58a6ff)}
.gf-L0{--gf-lc:#58a6ff} .gf-L1{--gf-lc:#3fb950} .gf-L2{--gf-lc:#d2a8ff} .gf-L3{--gf-lc:#f778ba} .gf-L4{--gf-lc:#e3b341} .gf-L5{--gf-lc:#39c5cf}
tr.gf-inL td:first-child{box-shadow:inset 3px 0 0 var(--gf-lc)}
.gf-pic{flex:none;font-size:10px;color:var(--dim);white-space:nowrap}
.gf-was{color:var(--gf-extra)}
.gf-cact{display:grid;gap:6px}
.gf-gsels{gap:6px}
#view-gifts button.gf-gsel{padding:1px 8px;background:var(--bg);display:inline-flex;gap:4px;align-items:center}
#view-gifts button.gf-gsel[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent);color:var(--text)}
.gf-preview{border:1px dashed var(--line);border-radius:6px;padding:6px 10px;background:var(--bg);display:grid;gap:2px;overflow-wrap:anywhere}
.gf-preview b{font-weight:500}
.gf-conflict{margin-top:0}
.gf-conflict ul{margin:4px 0 6px;padding-left:18px}
#view-gifts button.gf-armed{border-color:var(--bad);color:var(--bad)}

/* Combined groups: one row per saved group, its Edit card opens right below it. */
.gf-grprow{display:grid;grid-template-columns:32px minmax(0,1fr) auto minmax(80px,auto) auto;gap:10px;align-items:center;
           padding:7px 14px;border-bottom:1px solid #21262d}
.gf-grprow.gf-editing{background:#1c2636}
.gf-grpmain{min-width:0}
.gf-grpcoins{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.gf-grpregs{white-space:nowrap}
.gf-grpbtns{flex-wrap:nowrap}
#gf-dg-list > .gf-card{margin:8px 14px 12px}
.gf-more{padding:10px 14px}
.gf-hist{display:grid}
.gf-hrow{display:grid;grid-template-columns:150px minmax(120px,220px) minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:4px 0;border-bottom:1px solid #21262d}
.gf-hrow:last-child{border-bottom:none}
.gf-hname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gf-hparts{overflow-wrap:anywhere;line-height:1.9}
.gf-part{display:inline-block;padding:0 6px;border-radius:4px;border:1px solid var(--line);background:var(--bg);font-size:10px;line-height:16px}
.gf-part.gf-pjoin{border-color:#1f6feb;color:var(--accent)}
#gf-dh.gf-folded > h2{border-bottom:none}
/* History's "Review again" (any gift id) and the card it, or a row's Reopen, opens. */
.gf-reopen{margin-bottom:8px}
#view-gifts #gf-dh-id{width:150px}
#gf-dh-card > .gf-card{margin-bottom:10px}
#view-gifts .gf-hbtn button{padding:1px 8px;font-size:11px}

/* Stacked at 900px and below: the region list first (scrollable), then the gift list. */
@media (max-width:900px){
  #view-gifts{padding:12px;gap:12px}
  .gf-layout{grid-template-columns:minmax(0,1fr)}
  #gf-side{position:static;max-height:46vh}
  .gf-settings{grid-template-columns:minmax(0,1fr)}
  .gf-cbr-row{grid-template-columns:minmax(0,1fr);gap:4px}
  .gf-nm{max-width:220px}
  .gf-hrow{grid-template-columns:minmax(0,1fr);gap:0}
  .gf-hbtn{padding-top:2px}
}
/* Phones: icon, name, coins and availability fit without sideways scrolling. */
@media (max-width:600px){
  .gf-wide{display:none}
  #view-gifts .gf-tablewrap td,.gf-tablewrap th{padding-left:5px;padding-right:5px}
  .gf-nm{max-width:130px}
  .gf-avinline{display:none} /* the count button opens the same list */
  td.gf-icc{width:36px}
  .gf-ic{width:28px;height:28px}
  td.gf-gc{min-width:110px}
  #view-gifts tr.gf-exp td{padding-left:8px}
  .gf-filters{padding:8px 10px}
  .gf-filters input[type=search]{max-width:none}
  /* The filter buttons wrap onto two rows here: let each row fill the width, ruled like a grid. */
  .gf-seg{width:100%}
  #view-gifts .gf-seg button{flex:1 1 auto;border-bottom:1px solid var(--line);margin-bottom:-1px}
  /* Duplicates: the card fills the width; a combined-group row puts coins, flags and buttons on a second line. */
  .gf-dlist{padding:10px}
  .gf-card{padding:8px}
  td.gf-tk,th.gf-tk{width:30px}
  td.gf-dcell{width:40px}
  #view-gifts .gf-mtable th:nth-child(5){font-size:0} /* "Draft": the letter chips say it */
  .gf-grprow{grid-template-columns:32px minmax(0,1fr) auto;padding:7px 10px;row-gap:4px}
  .gf-grpregs{grid-column:2}
  .gf-grpbtns{grid-column:3;justify-content:flex-end}
  #gf-dg-list > .gf-card{margin:8px 6px 12px}
}