/* ══════════════════════════════════════════════
   BACK OFFICE
══════════════════════════════════════════════ */
#backoffice {
  display: none;
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--bg,#030810);
  color: var(--text,#c8e8ff);
  font-family: var(--font-body, 'Nunito', sans-serif);
  overflow-y: auto;
}

#backoffice.open { display: flex; flex-direction: column; }

.bo-hdr {
  background: var(--surf,#080d1a);
  border-bottom: 1px solid var(--brd,#0a2040);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: sticky; top: 0; z-index: 5;
}

.bo-title { font-family: var(--font-title, 'Share Tech Mono', monospace); font-size: var(--fs-lg); font-weight: 700; color: var(--warning,#ffb300); }
.bo-close { background: none; border: 1px solid var(--brd,#0a2040); color: var(--text,#c8e8ff); padding: 7px 14px; border-radius: 8px; cursor: pointer; font-family: var(--font-body, 'Nunito', sans-serif); font-weight: 700; font-size: var(--fs-base); flex-shrink: 0; }
.bo-qnav { margin-left: auto; display: none; gap: 6px; }
@media(orientation:landscape) and (min-width:700px) { .bo-qnav { display: flex; } }
.bo-qnav a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--card,#0d1422); border: 1px solid var(--brd,#0a2040); text-decoration: none; transition: border-color .2s, transform .15s; }
.bo-qnav a:hover { border-color: var(--hi,#00cfff); transform: scale(1.1); }
.bo-qnav svg { width: 16px; height: 16px; fill: var(--muted,#2a5070); transition: fill .2s; }
.bo-qnav a:hover svg { fill: var(--hi,#00cfff); }
.bo-sec { padding: 16px; }
.bo-sec-title { font-family: var(--font-title, 'Share Tech Mono', monospace); font-size: var(--fs-sm); font-weight: 700; color: var(--hi,#00cfff); letter-spacing: 1px; margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--brd,#0a2040); }
.bo-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; background: var(--card,#0d1422); border-radius: 9px; margin-bottom: 6px; border: 1px solid var(--brd,#0a2040); gap: 10px; }
.bo-lbl { font-size: var(--fs-base); font-weight: 700; flex: 1; }
.bo-sub { font-size: var(--fs-sm); color: var(--muted,#2a5070); margin-top: 1px; }
.bo-input { background: var(--surf,#080d1a); border: 1px solid var(--brd,#0a2040); color: var(--text,#c8e8ff); border-radius: 6px; padding: 6px 8px; font-family: var(--font-body, 'Nunito', sans-serif); font-size: var(--fs-base); font-weight: 700; width: 72px; text-align: center; }
.bo-input:focus { outline: none; border-color: var(--hi,#00cfff); }
.bo-toggle { width: 46px; height: 26px; background: var(--dim,#0a1828); border-radius: 13px; position: relative; cursor: pointer; border: none; flex-shrink: 0; transition: background .2s; }
.bo-toggle.on { background: var(--success,#00e676); }
.bo-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; }
.bo-toggle.on::after { transform: translateX(20px); }
.bo-btn { width: 100%; padding: 12px; border: none; border-radius: 9px; font-family: var(--font-body, 'Nunito', sans-serif); font-size: var(--fs-base); font-weight: 800; cursor: pointer; margin-bottom: 6px; transition: all .15s; }
.bo-btn:active { transform: scale(.98); }
.bo-btn-danger { background: rgba(139,0,0,.3); color: var(--danger,#ff3d7f); border: 1px solid #8b0000; }
.bo-btn-warn   { background: rgba(255,179,0,.08); color: var(--warning,#ffb300); border: 1px solid rgba(255,179,0,.3); }
.bo-mlist { max-height: 360px; overflow-y: auto; }
.bo-m-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--card,#0d1422); border-radius: 9px; margin-bottom: 4px; border: 1px solid var(--brd,#0a2040); }
.bo-m-id { font-size: var(--fs-xs); color: var(--muted,#2a5070); width: 28px; flex-shrink: 0; }
.review-day { background: var(--card,#0d1422); border: 1px solid var(--brd,#0a2040); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.review-hd { background: var(--surf,#080d1a); padding: 9px 12px; font-size: var(--fs-base); font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.review-hd:active { background: var(--dim,#0a1828); }
.review-body { /* accordion body — shown only when expanded */ }
.review-task { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--brd,#0a2040); cursor: pointer; min-height: 46px; }
.review-task input { width: 18px; height: 18px; accent-color: var(--success,#00e676); flex-shrink: 0; }
.review-task label { font-size: var(--fs-base); cursor: pointer; flex: 1; }
.review-task-pending { background: rgba(255,179,0,.06); }
.review-chevron { font-size: var(--fs-xs); color: var(--muted,#2a5070); transition: transform .2s; }
.review-chevron.open { transform: rotate(180deg); }
.btn-val-inline { padding: 4px 12px; background: var(--success,#00e676); color: #000; border: none; border-radius: 6px; font-family: var(--font-body, 'Nunito', sans-serif); font-size: var(--fs-xs); font-weight: 800; cursor: pointer; white-space: nowrap; }
.btn-val-inline:active { transform: scale(.95); }
.btn-val-inline.validated { background: transparent; color: var(--success,#00e676); cursor: default; padding: 0; }
.btn-val-day { width: 100%; padding: 11px; background: var(--success,#00e676); color: #000; border: none; border-radius: 0 0 12px 12px; font-family: var(--font-body, 'Nunito', sans-serif); font-size: var(--fs-base); font-weight: 800; cursor: pointer; }
.btn-val-day.validated { background: transparent; color: var(--success,#00e676); border-top: 1px solid var(--brd,#0a2040); cursor: default; }

/* ── BO CRUD ── */
.bo-tabs-wrap{position:relative;background:var(--bg,#030810);border-bottom:1px solid var(--brd,#0a2040)}
.bo-tabs-wrap::after{content:'';position:absolute;right:0;top:0;bottom:0;width:32px;background:linear-gradient(to right,transparent,var(--bg,#030810));pointer-events:none;opacity:0;transition:opacity .2s}
.bo-tabs-wrap.can-scroll-right::after{opacity:1}
.bo-tabs-wrap::before{content:'';position:absolute;left:0;top:0;bottom:0;width:32px;background:linear-gradient(to left,transparent,var(--bg,#030810));pointer-events:none;opacity:0;transition:opacity .2s;z-index:1}
.bo-tabs-wrap.can-scroll-left::before{opacity:1}
.bo-tabs{display:flex;gap:4px;padding:8px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bo-tabs::-webkit-scrollbar{display:none}
.bo-tab{padding:8px 12px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);font-weight:800;color:var(--muted,#2a5070);background:transparent;border:1px solid transparent;transition:all .2s;white-space:nowrap;flex-shrink:0}
.bo-tab.active{background:color-mix(in srgb,var(--hi,#00cfff) 12%,transparent);color:var(--hi,#00cfff);border-color:var(--hi,#00cfff)}
.bo-tab-content{display:none;padding:12px}.bo-tab-content.active{display:block}
.bo-form{background:var(--card,#0d1422);border:1px solid var(--brd,#0a2040);border-radius:12px;padding:14px;margin-bottom:10px}
.bo-form-title{font-family:var(--font-title, 'Share Tech Mono', monospace);font-size:var(--fs-sm);font-weight:700;color:var(--hi,#00cfff);margin-bottom:10px;letter-spacing:1px}
.bo-field{margin-bottom:8px}
.bo-field label{display:block;font-size:var(--fs-sm);color:var(--muted,#2a5070);margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px}
.bo-field input,.bo-field select,.bo-field textarea{width:100%;background:var(--surf,#080d1a);border:1px solid var(--brd2,#14305a);color:var(--text,#c8e8ff);border-radius:6px;padding:7px 10px;font-family:var(--font-body, 'Nunito', sans-serif);font-size:var(--fs-base);font-weight:700}
.bo-field input:focus,.bo-field select:focus,.bo-field textarea:focus{outline:none;border-color:var(--hi,#00cfff)}
.bo-field textarea{resize:vertical;min-height:50px}
.bo-field-row{display:flex;gap:8px}.bo-field-row .bo-field{flex:1}
.bo-field-row-eq{align-items:stretch}.bo-field-row-eq .bo-field select,.bo-field-row-eq .bo-field input{height:36px;box-sizing:border-box}
.bo-add-btn{width:100%;padding:10px;background:transparent;border:2px dashed var(--brd2,#14305a);border-radius:12px;color:var(--muted,#2a5070);font-family:var(--font-body, 'Nunito', sans-serif);font-size:var(--fs-base);font-weight:700;cursor:pointer;margin-bottom:10px;transition:all .2s}
.bo-add-btn:hover{border-color:var(--hi,#00cfff);color:var(--hi,#00cfff)}
.bo-item{background:var(--card,#0d1422);border:1px solid var(--brd,#0a2040);border-radius:8px;padding:10px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.bo-item-body{flex:1;min-width:0}
.bo-item-title{font-size:var(--fs-base);font-weight:700}.bo-item-sub{font-size:var(--fs-xs);color:var(--muted,#2a5070)}
.bo-item-tags{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}
.bo-item-actions{display:flex;gap:4px;flex-shrink:0}
.bo-icon-btn{width:30px;height:30px;border-radius:6px;border:1px solid var(--brd,#0a2040);background:var(--surf,#080d1a);color:var(--muted,#2a5070);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--fs-base);transition:all .15s}
.bo-icon-btn:hover{border-color:var(--hi,#00cfff);color:var(--hi,#00cfff)}
.bo-icon-btn.danger{border-color:var(--danger,#ff3d7f);color:var(--danger,#ff3d7f)}
.bo-icon-btn.danger:hover{background:rgba(255,61,127,.12)}
.bo-child-sel{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.bo-child-btn{padding:6px 12px;border-radius:20px;border:1px solid var(--brd,#0a2040);background:var(--card,#0d1422);color:var(--muted,#2a5070);cursor:pointer;font-size:var(--fs-sm);font-weight:700;transition:all .15s}
.bo-child-btn.active{background:color-mix(in srgb,var(--hi,#00cfff) 12%,transparent);color:var(--hi,#00cfff);border-color:var(--hi,#00cfff)}
.bo-item.has-override{border-left:3px solid var(--warning,#ffb300)}
.bo-item.is-editing{border-left:3px solid var(--hi,#00cfff)}
.bo-group-toggle{display:flex;gap:4px;margin-bottom:10px}
.bo-group-btn{padding:5px 10px;border-radius:6px;border:1px solid var(--brd,#0a2040);background:var(--surf,#080d1a);color:var(--muted,#2a5070);cursor:pointer;font-size:var(--fs-sm);font-weight:700}
.bo-group-btn.active{background:color-mix(in srgb,var(--hi,#00cfff) 12%,transparent);color:var(--hi,#00cfff);border-color:var(--hi,#00cfff)}
.bo-cycle-btn{min-width:32px;padding:4px 8px;border-radius:6px;border:1px solid var(--brd2,#14305a);background:var(--surf,#080d1a);color:var(--text,#c8e8ff);cursor:pointer;font-size:var(--fs-sm);font-weight:800;text-align:center;transition:all .15s;flex-shrink:0}
.bo-cycle-btn:active{transform:scale(.95)}
.bo-cycle-btn.excluded{color:var(--muted,#2a5070);border-style:dashed}
.bo-cycle-btn.overridden{border-color:var(--warning,#ffb300);color:var(--warning,#ffb300)}

/* ── Badge matrix ── */
.bo-badge-matrix{width:100%;border-collapse:separate;border-spacing:4px}
.bo-badge-matrix th{font-size:var(--fs-xs);color:var(--muted,#2a5070);padding:6px 4px;text-align:center;font-weight:800;letter-spacing:.5px}
.bo-badge-matrix th:first-child{text-align:left;min-width:100px}
.bo-badge-matrix td{background:var(--card,#0d1422);border:1px solid var(--brd,#0a2040);border-radius:8px;padding:8px 4px;text-align:center;cursor:pointer;min-width:65px;vertical-align:middle;transition:border-color .15s}
.bo-badge-matrix td:first-child{background:transparent;border:none;text-align:left;cursor:default;font-size:var(--fs-sm);font-weight:700;padding-left:2px}
.bo-badge-matrix td:hover:not(:first-child){border-color:var(--hi,#00cfff)}
.bo-badge-matrix td.empty{background:transparent;border-style:dashed;border-color:var(--brd2,#14305a)}
.bo-badge-matrix td.earned{border-color:var(--success,#00e676);box-shadow:0 0 6px rgba(0,230,118,.15)}
.bo-badge-cell-em{font-size:var(--fs-xl);line-height:1}
.bo-badge-cell-nm{font-size:var(--fs-xs);color:var(--text,#c8e8ff);margin-top:2px;line-height:1.2}
.bo-badge-cell-sec{font-size:9px;color:var(--acc,#ff3d7f);margin-top:2px}