/* ============================================================================
   RP2 REPORT — OPS LAYER (ops.css) · rank-tracking, kho tài nguyên, giao việc,
   mẫu đề xuất, admin all-in-one. Dùng chung cho index.html + leader.html.
   SKIN = CaMell v6.3 "macOS Liquid Glass" — đồng bộ token/recipe với
   liquidglass.css (palette #60AFFF/#00E8FF, neon status, frosted glass,
   white-alpha borders, iOS spring motion).
   ============================================================================ */

/* ---------- rank tracking ---------- */
.rank-legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rank-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 3px 10px; border-radius: var(--r-pill, 20px);
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  border: 1px solid var(--glass-border, rgba(255,255,255,.22));
  background: var(--glass-bg-2, rgba(255,255,255,.09));
}
.rank--top { background: var(--success-soft, rgba(0,255,128,.14)); color: var(--success, #00FF80); border-color: rgba(0,255,128,.45); }
.rank--mid { background: var(--warn-soft, rgba(254,240,112,.13)); color: var(--warn, #FEF070); border-color: rgba(254,240,112,.45); }
.rank--low { background: var(--danger-soft, rgba(255,96,96,.16)); color: #FF9C9C; border-color: rgba(255,96,96,.45); }
.rank--none { color: var(--text-3, #CCD0E8); }
.rank-input {
  width: 64px; text-align: center; font-variant-numeric: tabular-nums;
  padding: 5px 6px; border-radius: var(--r-md, 10px);
  background: var(--lg-input-bg, rgba(13,16,32,.88));
  border: 1.5px solid rgba(255,255,255,.33);
  color: var(--text, #FAFAFF); font: inherit; font-size: 13px;
  caret-color: var(--lg-cyan, #00E8FF);
}
.rank-input:focus {
  outline: none;
  border-color: var(--accent, #60AFFF);
  background: rgba(13, 16, 32, .92);
  box-shadow: 0 0 0 .5px var(--accent, #60AFFF), 0 0 0 4px var(--accent-soft, rgba(96,175,255,.18)); /* reads as 2px blue ring */
}
.rank-brand-head {
  display: flex; align-items: center; gap: 8px; margin-top: var(--s4, 16px);
  font-weight: 800; font-size: 13px; letter-spacing: .4px; text-transform: uppercase;
  color: var(--text-2, #E8E8F8);
}
/* #rank-board has class .stack, whose generic `.stack > * + *{margin-top}` (cards.css, loads
   later, equal specificity) flattens the group rhythm below. Re-assert it id-scoped (higher
   specificity) so a brand heading breathes MORE above it and its rows sit tighter under it. */
#rank-board.stack > .rank-brand-head { margin-top: var(--s5, 20px); }
#rank-board.stack > .rank-row { margin-top: 6px; }
.rank-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-top: 8px; border-radius: var(--r-md, 10px);
  background: var(--glass-bg, rgba(16,24,38,.48));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border, rgba(255,255,255,.22));
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(0,0,0,.35));
}
.rank-row__site { font-weight: 700; font-size: 13.5px; word-break: break-all; min-width: 0; }
.rank-row__kw { font-size: 12px; color: var(--text-2, #E8E8F8); }
.rank-row__by { font-size: 11px; color: var(--text-3, #CCD0E8); }

/* ---------- kho tài nguyên ---------- */
.res-table-wrap { overflow-x: auto; border-radius: var(--r-lg, 14px); }
table.res-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; min-width: 680px;
}
table.res-table thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .3px;
  text-transform: uppercase; color: var(--text-3, #CCD0E8);
  padding: 10px 12px; border-bottom: 1px solid var(--glass-border, rgba(255,255,255,.22));
  white-space: nowrap;
}
table.res-table tbody td {
  padding: 10px 12px; border-bottom: 1px solid var(--lg-border-subtle, rgba(255,255,255,.19));
  vertical-align: top;
}
.res-status {
  display: inline-flex; padding: 2px 9px; border-radius: var(--r-pill, 20px);
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--glass-border, rgba(255,255,255,.22));
}
.res-status--active  { background: var(--success-soft, rgba(0,255,128,.14)); color: var(--success, #00FF80); border-color: rgba(0,255,128,.4); }
.res-status--pending { background: var(--warn-soft, rgba(254,240,112,.13)); color: var(--warn, #FEF070); border-color: rgba(254,240,112,.4); }
.res-status--expired { background: var(--danger-soft, rgba(255,96,96,.16)); color: #FF9C9C; border-color: rgba(255,96,96,.42); }
.ops-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; align-items: end;
}
.ops-form .field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ops-form .field > .label { font-size: 11px; color: var(--text-3, #CCD0E8); font-weight: 600; }

/* ---------- giao việc / thư ký ---------- */
.task-item {
  display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--r-md, 10px); margin-top: 8px;
  background: var(--glass-bg, rgba(16,24,38,.48));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border, rgba(255,255,255,.22));
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(0,0,0,.35));
}
.task-item--done { border-color: rgba(0,255,128,.35); }
.task-item--verified { border-color: rgba(96,175,255,.4); }
.task-item__title { font-weight: 700; font-size: 13.5px; }
.task-item__result { font-size: 12.5px; color: var(--text-2, #E8E8F8); white-space: pre-wrap; margin-top: 4px; }
.task-status {
  display: inline-flex; padding: 2px 9px; border-radius: var(--r-pill, 20px);
  font-size: 11px; font-weight: 700;
  border: 1px solid var(--glass-border, rgba(255,255,255,.22));
  background: var(--glass-bg-2, rgba(255,255,255,.09));
}
.task-status--open     { background: var(--warn-soft, rgba(254,240,112,.13)); color: var(--warn, #FEF070); border-color: rgba(254,240,112,.4); }
.task-status--done     { background: var(--success-soft, rgba(0,255,128,.14)); color: var(--success, #00FF80); border-color: rgba(0,255,128,.4); }
.task-status--verified { background: var(--accent-soft, rgba(96,175,255,.18)); color: var(--accent-2, #7DB5FF); border-color: rgba(96,175,255,.42); }

/* ---------- mẫu đề xuất ---------- */
.tpl-pick { display: flex; gap: 8px; flex-wrap: wrap; }
.tpl-pick .tpl-btn {
  padding: 10px 16px; border-radius: var(--r-md, 10px); cursor: pointer;
  background: var(--glass-bg-2, rgba(255,255,255,.09));
  border: 1px solid var(--glass-border, rgba(255,255,255,.22));
  color: var(--text, #FAFAFF); font: inherit; font-weight: 700; font-size: 13px;
}
.tpl-pick .tpl-btn:hover { background: rgba(255,255,255,.14); border-color: var(--accent, #60AFFF); }
.tpl-pick .tpl-btn.is-active {
  background: var(--accent-soft, rgba(96,175,255,.18));
  border-color: rgba(96,175,255,.5);
  color: var(--accent-2, #7DB5FF);
}
.proposal-out {
  width: 100%; min-height: 220px; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px;
}

/* ---------- admin all-in-one ---------- */
.admin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3, 12px); align-items: stretch;
}
.admin-card {
  display: flex; flex-direction: column; gap: 8px; min-height: 132px;
  padding: var(--s4, 16px) var(--s5, 20px); border-radius: var(--r-lg, 14px);
  background: var(--lg-card-bg, rgba(21,27,46,.72));
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-border, rgba(255,255,255,.22));
  box-shadow: var(--shadow-soft, 0 6px 18px rgba(0,0,0,.35));
}
.admin-card:hover { border-color: rgba(255,255,255,.33); }
.admin-card__num { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.admin-card__sub { font-size: 12px; color: var(--text-2, #E8E8F8); }
.admin-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- motion — iOS spring (v6.3), guarded ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* ops cards: hover spring-scale 1.045 (250ms overshoot), leave 380ms settle */
  .admin-card, .task-item, .rank-row {
    transition:
      transform 380ms cubic-bezier(.22,.61,.36,1),
      box-shadow 250ms var(--ease, cubic-bezier(.22,.61,.36,1)),
      border-color 250ms var(--ease, cubic-bezier(.22,.61,.36,1)),
      background 250ms var(--ease, cubic-bezier(.22,.61,.36,1));
    will-change: transform;
  }
  .admin-card:hover, .task-item:hover, .rank-row:hover {
    transform: scale(1.045);
    transition: transform 250ms cubic-bezier(.34,1.56,.64,1),
                box-shadow 250ms var(--ease, cubic-bezier(.22,.61,.36,1)),
                border-color 250ms var(--ease, cubic-bezier(.22,.61,.36,1));
  }

  /* template picker buttons: subtle lift */
  .tpl-pick .tpl-btn {
    transition: transform 250ms cubic-bezier(.34,1.56,.64,1),
                background 250ms cubic-bezier(.22,.61,.36,1),
                border-color 250ms cubic-bezier(.22,.61,.36,1),
                color 250ms cubic-bezier(.22,.61,.36,1);
  }
  .tpl-pick .tpl-btn:hover { transform: translateY(-1px); }
  .tpl-pick .tpl-btn:active { transform: scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .admin-card:hover, .task-item:hover, .rank-row:hover,
  .tpl-pick .tpl-btn:hover, .tpl-pick .tpl-btn:active { transform: none; }
}

/* nhỏ dùng chung */
.ops-offline { opacity: .85; }