/* ============================================================
   Fundraise Tap v2 — desktop admin shell, modal, annotations
   (loaded after hifi.css)
   ============================================================ */

/* sticky-note annotation (now brand-tinted, info colour) */
.note {
  position: relative; background: var(--info-soft); border: 1px solid #cfe0f1;
  border-left: 3px solid var(--info); color: #1f4a78; border-radius: var(--r-sm);
  padding: 12px 14px; font-size: 13px; line-height: 1.5; max-width: 260px;
}
.note b { color: var(--info); }
.note .note-k { display: inline-block; font-family: var(--mono); font-size: 10px; color: var(--info); border: 1px solid #cfe0f1; border-radius: 4px; padding: 1px 6px; margin-bottom: 6px; letter-spacing: .04em; text-transform: uppercase; }

/* ---------------- admin shell ---------------- */
.admin { width: 1440px; height: 900px; flex: none; background: var(--bg); display: grid; grid-template-columns: 240px 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "brand topbar" "nav main"; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.admin-brand { grid-area: brand; background: var(--primary); color: #fff; display: flex; align-items: center; gap: 12px; padding: 0 22px; font-weight: 600; font-size: 16px; }
.admin-brand .logo-sq { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,.16); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.admin-nav { grid-area: nav; background: var(--primary); padding: 14px 12px; overflow-y: auto; }
.admin-nav a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); text-decoration: none; margin-bottom: 2px; cursor: pointer; transition: .12s; }
.admin-nav a svg { width: 19px; height: 19px; opacity: .9; }
.admin-nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.admin-nav a.on { background: #fff; color: var(--primary); font-weight: 600; }
.admin-top { grid-area: topbar; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; }
.admin-main { grid-area: main; overflow-y: auto; background: var(--bg); }
.admin-main-inner { max-width: 1200px; margin: 0 auto; padding: 32px; }
.admin-main::-webkit-scrollbar { width: 10px; }
.admin-main::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 3px solid #fff; }

/* KPI */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { padding: 20px; }
.kpi .l { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.kpi .v { font-size: 30px; font-weight: 600; margin-top: 10px; letter-spacing: -.01em; }
.kpi .s { font-size: 12px; margin-top: 8px; display: flex; align-items: center; gap: 4px; }
.kpi .s.up { color: var(--success); }
.kpi .s.down { color: var(--error); }

/* table */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead th { position: sticky; top: 0; background: #fff; text-align: left; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 600; }
.tbl td { padding: 0 16px; height: 56px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:nth-child(even) td { background: var(--surface); }
.tbl tr.click { cursor: pointer; }
.tbl tr.click:hover td { background: var(--primary-soft); }

/* tabs */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); }
.tabs .tab { padding: 12px 16px; font-size: 14px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.tabs .tab.on { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.tabs .tab:hover { color: var(--primary); }

/* filter bar */
.filter-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); background: #fff; border-radius: var(--r-sm); padding: 9px 13px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; }
.filter:hover { border-color: var(--primary); color: var(--primary); }
.search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 9px 13px; background: #fff; min-width: 240px; }
.search input { border: 0; outline: 0; font-family: var(--font); font-size: 14px; flex: 1; color: var(--text); background: transparent; }

/* connection card */
.conn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.conn { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.conn .top { display: flex; align-items: center; gap: 12px; }
.conn .logo { width: 40px; height: 40px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; color: var(--text-subtle); }

/* read-only field */
.ro { display: flex; flex-direction: column; gap: 4px; }
.ro .k { font-size: 12px; color: var(--text-subtle); font-weight: 500; }
.ro .v { font-size: 15px; }

/* pagination */
.pager { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.pager .pg-btns { display: flex; gap: 6px; }
.pg-num { width: 34px; height: 34px; border: 1px solid var(--border); background: #fff; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; cursor: pointer; color: var(--text-muted); }
.pg-num.on { background: var(--primary); color: #fff; border-color: var(--primary); }

/* progress chart (CSS bars) */
.chart { padding: 22px; }
.chart-bars { display: flex; align-items: flex-end; gap: 10px; height: 200px; }
.chart-bars .bar { flex: 1; background: var(--primary-soft); border-radius: 4px 4px 0 0; position: relative; transition: .2s; }
.chart-bars .bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; background: var(--primary); border-radius: 0 0 0 0; opacity: .9; }
.chart-line { width: 100%; height: 200px; }

/* ---------------- modal ---------------- */
.modal-backdrop { position: absolute; inset: 0; background: rgba(20,59,99,.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: var(--r-modal); box-shadow: var(--el-modal); width: 480px; max-width: calc(100% - 48px); overflow: hidden; }
.modal.md { width: 720px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 24px 0; }
.modal-body { padding: 20px 24px; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; padding: 0 24px 24px; }
.modal .x { cursor: pointer; color: var(--text-subtle); border: 0; background: transparent; padding: 4px; }
.modal .x:hover { color: var(--text); }

/* side panel (add user) */
.sidepanel-backdrop { position: absolute; inset: 0; background: rgba(20,59,99,.45); z-index: 100; }
.sidepanel { position: absolute; top: 0; right: 0; bottom: 0; width: 460px; background: #fff; box-shadow: var(--el-modal); z-index: 101; display: flex; flex-direction: column; }
.sidepanel-head { padding: 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.sidepanel-body { padding: 24px; overflow-y: auto; flex: 1; }
.sidepanel-foot { padding: 20px 24px; border-top: 1px solid var(--border); display: flex; gap: 12px; }

/* check option row */
.opt-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; cursor: pointer; }
.opt-row .tickbox { width: 20px; height: 20px; }
.opt-row .tickbox svg { width: 13px; height: 13px; }

/* status dot inline */
.s-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.s-dot.green { background: var(--success); }
.s-dot.amber { background: var(--warning); }
.s-dot.red { background: var(--error); }
.s-dot.grey { background: var(--text-subtle); }