/* Farooq Music 2.0 — Watch Room (Day 17 part 3, WBS D17-3). Added ON TOP of fm2-admin.css, which is
   not touched. Same control-room look, fonts already loaded there. No inline styles anywhere (CSP). */

.view-watch{display:grid;grid-template-columns:minmax(0,1fr) 30rem;gap:1.5rem;padding:1.5rem 2rem;align-items:start}
.ur .view-watch{direction:rtl}
@media (max-width:1400px){.view-watch{grid-template-columns:minmax(0,1fr)}}

/* the six counters across the top */
.counters{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem}
.counter{border:1px solid var(--line);background:var(--panel);padding:.9rem 1rem;cursor:pointer;text-align:start;font:inherit;color:inherit}
.counter:hover{border-color:var(--phos)}
.counter[aria-pressed="true"]{border-color:var(--phos);background:var(--sel)}
.counter .n{display:block;font-family:var(--display);font-weight:var(--num-w);font-size:2.1rem;line-height:1.1;color:var(--ink-hi)}
.counter .k{display:block;font-size:.72rem;font-weight:600;letter-spacing:var(--label-ls);color:var(--dim);margin-top:.3rem}
.ur .counter .k{letter-spacing:0;font-size:.85rem}
.counter.red .n{color:var(--red)} .counter.amber .n{color:var(--amber)} .counter.blue .n{color:var(--blue)}

/* the list of events */
.watch-list{border:1px solid var(--line);background:var(--panel)}
.watch-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid var(--line-2);flex-wrap:wrap}
.watch-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.watch-tools select,.watch-tools input{min-height:2.5rem;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:.8rem;padding:0 .6rem}
.evt{display:grid;grid-template-columns:7.5rem 1fr 11rem 8rem;gap:.75rem;align-items:center;width:100%;padding:.65rem 1rem;border:0;border-top:1px solid var(--line-2);background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointer}
.ur .evt{grid-template-columns:8rem 1fr 11rem 9rem}
.evt:hover{background:var(--panel-2)}
.evt[aria-current="true"]{background:var(--sel);box-shadow:inset 3px 0 0 var(--phos)}
.ur .evt[aria-current="true"]{box-shadow:inset -3px 0 0 var(--phos)}
.evt .t{color:var(--dim);font-size:.78rem}
.evt .w{color:var(--ink-hi)}
.evt .who{color:var(--soft);font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evt .fp{font-size:.75rem;color:var(--dim)}
.lvl{display:inline-block;width:.55rem;height:.55rem;border-radius:50%;margin-inline-end:.5rem;background:var(--dim)}
.lvl.red{background:var(--red)} .lvl.amber{background:var(--amber)} .lvl.blue{background:var(--blue)} .lvl.grey{background:var(--line-3)}

/* the panel on the right */
.watch-panel{border:1px solid var(--line);background:var(--panel);padding:1.1rem;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto}
.watch-panel h2{margin:0 0 .2rem;font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:.02em;color:var(--ink-hi)}
.ur .watch-panel h2{letter-spacing:0;font-family:"Nastaliq",serif}
.kv{display:grid;grid-template-columns:9rem 1fr;gap:.35rem .75rem;margin:.6rem 0;font-size:.8rem}
.ur .kv{grid-template-columns:9.5rem 1fr;font-size:.9rem}
.kv dt{color:var(--dim);margin:0} .kv dd{margin:0;color:var(--ink-hi);word-break:break-word}
.sesh{border:1px solid var(--line-2);padding:.6rem;margin:.5rem 0;background:var(--panel-2)}
.sesh .sm{font-size:.75rem;color:var(--dim)}
.story{list-style:none;margin:.4rem 0 0;padding:0;font-size:.78rem}
.story li{display:flex;gap:.5rem;padding:.3rem 0;border-top:1px solid var(--line-2);color:var(--soft)}

/* the action block — only ever inside the panel */
.acts{margin-top:1rem;border-top:1px solid var(--line-3);padding-top:.9rem}
.acts .btn{display:block;width:100%;min-height:2.75rem;margin-bottom:.5rem;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font:inherit;font-size:.8rem;font-weight:600;letter-spacing:.03em;cursor:pointer;text-align:start;padding:0 .9rem;border-radius:var(--radius-sm)}
.ur .acts .btn{letter-spacing:0;font-size:.9rem}
.acts .btn:hover{border-color:var(--phos);color:var(--ink-hi)}
.acts .btn.danger:hover{border-color:var(--red);color:var(--red)}
.acts .btn[disabled]{opacity:.4;cursor:not-allowed}
.vault{border:1px dashed var(--line-3);padding:.7rem;margin-top:.8rem;background:var(--panel-2)}
.vault .ip{font-family:var(--mono);font-size:1.15rem;color:var(--phos);letter-spacing:.02em}
.warnline{color:var(--amber);font-size:.78rem;margin:.4rem 0 0}
.okline{color:var(--good);font-size:.78rem;margin:.4rem 0 0}
.errline{color:var(--red);font-size:.78rem;margin:.4rem 0 0}

/* the "who is shut out" tab */
.blocks-table{border:1px solid var(--line);background:var(--panel);margin-top:1rem}
.blocks-table .r{display:grid;grid-template-columns:1fr 10rem 10rem 7rem;gap:.75rem;padding:.6rem 1rem;border-top:1px solid var(--line-2);align-items:center;font-size:.8rem}
.blocks-table .r.h{border-top:0;color:var(--dim);font-weight:600;letter-spacing:var(--label-ls);font-size:.72rem}
.ur .blocks-table .r.h{letter-spacing:0;font-size:.85rem}
.dialog textarea{width:100%;min-height:4.5rem;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font:inherit;padding:.5rem}
.dialog select{min-height:2.5rem;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);font:inherit;padding:0 .5rem;margin-top:.4rem}
/* 071: find an account by e-mail */
.find-row{display:flex;gap:.5rem;margin:.6rem 0;flex-wrap:wrap}
.find-row input{flex:1;min-width:14rem;padding:.55rem .7rem;background:var(--panel-2);color:inherit;border:1px solid var(--line-2);font:inherit}
.sesh.acct .acts{margin-top:.6rem}
.sesh.acct .acts .btn{margin:.25rem .35rem .25rem 0}