`public/admin/pr-intelligence/pr-shared.css`

187 lines
/* CRE PR Intelligence — shared workspace styles (matches the RENTV internal-shell language) */
:root { --ink:#0d1b2a; --muted:#5b6b7b; --line:#e4e9ef; --bg:#f6f8fb; --accent:#0a6cff; --ok:#0f8a4d; --warn:#b7791f; --bad:#c0392b; --purple:#6b46c1; }
* { box-sizing:border-box; }
body { margin:0; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }

/* Frame: top bar + left nav + content */
.pr-top { display:flex; align-items:center; gap:14px; padding:14px 22px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.pr-top h1 { margin:0; font-size:17px; } .pr-top h1 a { color:inherit; }
.pr-top .tag { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:#fff; background:var(--ink); padding:3px 8px; border-radius:999px; }
.pr-top .gsearch { margin-left:auto; position:relative; }
.pr-top .gsearch input { width:340px; padding:8px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.gsearch .results { position:absolute; right:0; top:40px; width:420px; max-height:60vh; overflow:auto; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 12px 32px rgba(13,27,42,.14); display:none; }
.gsearch .results.open { display:block; }
.gsearch .results .g { padding:8px 12px 2px; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.gsearch .results a { display:block; padding:8px 12px; color:inherit; border-bottom:1px solid var(--bg); }
.gsearch .results a:hover { background:var(--bg); text-decoration:none; }
.pr-wrap { display:flex; min-height:calc(100vh - 57px); }
.pr-nav { width:198px; flex:0 0 198px; background:#fff; border-right:1px solid var(--line); padding:14px 0; }
.pr-nav a { display:flex; gap:9px; align-items:center; padding:8px 18px; color:var(--ink); font-size:13.5px; }
.pr-nav a:hover { background:var(--bg); text-decoration:none; }
.pr-nav a.on { background:#eaf2ff; color:var(--accent); font-weight:600; border-right:2px solid var(--accent); }
.pr-nav .sep { margin:10px 18px 6px; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.pr-main { flex:1; padding:22px 26px; min-width:0; }
.pr-main h2 { margin:0 0 4px; font-size:19px; }
.pr-main .lede { color:var(--muted); font-size:13px; margin:0 0 18px; }

/* KPI cards */
.kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; margin:0 0 20px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.kpi b { display:block; font-size:22px; } .kpi span { color:var(--muted); font-size:12px; }
.kpi.ok b { color:var(--ok); } .kpi.warn b { color:var(--warn); } .kpi.bad b { color:var(--bad); }

/* Panels */
.panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin:0 0 16px; }
.panel h3 { margin:0 0 10px; font-size:14px; }
.cols2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .cols3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
@media(max-width:1100px){ .cols2,.cols3 { grid-template-columns:1fr; } }

/* Filter bar */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; align-items:center; }
.filters input, .filters select { padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:#fff; }
.filters input[type=search] { min-width:240px; }
.btn { display:inline-block; padding:7px 14px; border-radius:8px; border:1px solid var(--line); background:#fff; font-size:13px; cursor:pointer; color:var(--ink); }
.btn:hover { border-color:var(--accent); color:var(--accent); text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; } .btn.primary:hover { opacity:.92; color:#fff; }
.btn.danger { color:var(--bad); } .btn.danger:hover { border-color:var(--bad); }
.btn.sm { padding:4px 9px; font-size:12px; border-radius:6px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; }

/* Tables */
table.grid { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
table.grid th, table.grid td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--bg); font-size:13px; vertical-align:top; }
table.grid th { background:#fbfcfe; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); cursor:pointer; white-space:nowrap; user-select:none; }
table.grid tr:hover td { background:#f7faff; }
table.grid tr.sel td { background:#eaf2ff; }
.pager { display:flex; gap:8px; align-items:center; margin:12px 0; color:var(--muted); font-size:13px; }

/* Badges */
.b { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.b.gray { background:#eef1f5; color:var(--muted); } .b.blue { background:#eaf2ff; color:var(--accent); }
.b.green { background:#e7f6ee; color:var(--ok); } .b.amber { background:#fdf3e2; color:var(--warn); }
.b.red { background:#fdeeec; color:var(--bad); } .b.purple { background:#f1ebfb; color:var(--purple); }
.score { display:inline-flex; align-items:center; gap:6px; }
.score .bar { width:52px; height:6px; border-radius:3px; background:#eef1f5; overflow:hidden; }
.score .bar i { display:block; height:100%; background:var(--accent); }
.score.low .bar i { background:var(--bad); } .score.mid .bar i { background:var(--warn); } .score.high .bar i { background:var(--ok); }

/* Drawer (detail) */
.drawer { position:fixed; top:0; right:-720px; width:700px; max-width:92vw; height:100vh; background:#fff; border-left:1px solid var(--line); box-shadow:-16px 0 48px rgba(13,27,42,.12); transition:right .2s; z-index:60; display:flex; flex-direction:column; }
.drawer.open { right:0; }
.drawer .dhead { padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.drawer .dhead h3 { margin:0; font-size:16px; flex:1; }
.drawer .dbody { padding:16px 20px; overflow:auto; flex:1; }
.drawer .close { cursor:pointer; font-size:20px; color:var(--muted); background:none; border:none; }
.kv { display:grid; grid-template-columns:150px 1fr; gap:4px 12px; font-size:13px; margin:0 0 14px; }
.kv dt { color:var(--muted); } .kv dd { margin:0; word-break:break-word; }
.evi { border-left:3px solid var(--line); padding:8px 12px; margin:0 0 10px; background:#fbfcfe; border-radius:0 8px 8px 0; font-size:12.5px; }
.evi .f { font-weight:600; } .evi .x { color:var(--muted); font-style:italic; margin:4px 0; }
.evi a { word-break:break-all; }

/* Review 3-col */
.review3 { display:grid; grid-template-columns:290px minmax(0,1fr) 360px; gap:14px; align-items:start; }
@media(max-width:1200px){ .review3 { grid-template-columns:1fr; } }
.rlist { background:#fff; border:1px solid var(--line); border-radius:12px; max-height:76vh; overflow:auto; }
.rlist .it { padding:10px 14px; border-bottom:1px solid var(--bg); cursor:pointer; }
.rlist .it:hover { background:#f7faff; } .rlist .it.on { background:#eaf2ff; border-right:3px solid var(--accent); }
.rlist .it b { display:block; font-size:13px; } .rlist .it span { font-size:11.5px; color:var(--muted); }

/* Letter builder */
.blocks .blk { border:1px solid var(--line); border-radius:10px; margin:0 0 10px; background:#fff; }
.blocks .blk .bh { display:flex; align-items:center; gap:8px; padding:8px 12px; border-bottom:1px solid var(--bg); font-size:12px; color:var(--muted); }
.blocks .blk .bh b { color:var(--ink); }
.blocks .blk textarea { width:100%; border:none; padding:10px 12px; font:13px/1.5 inherit; min-height:64px; resize:vertical; background:transparent; }
.blocks .blk.locked { background:#fbfcfe; } .blocks .blk.locked textarea { color:var(--muted); }
.letter-preview { border:1px solid var(--line); border-radius:10px; background:#fff; padding:22px 26px; font-size:14px; line-height:1.65; white-space:pre-wrap; }
.mobile-frame { width:390px; margin:0 auto; border:10px solid #1a2733; border-radius:26px; overflow:hidden; }
.missing { background:#fdf3e2; color:var(--warn); padding:1px 5px; border-radius:4px; font-weight:600; }

/* Inbox */
.thread .msg { border:1px solid var(--line); border-radius:10px; margin:0 0 10px; padding:12px 16px; background:#fff; }
.thread .msg.in { border-left:3px solid var(--purple); } .thread .msg.out { border-left:3px solid var(--accent); }
.thread .msg .mh { font-size:12px; color:var(--muted); margin:0 0 6px; display:flex; gap:10px; }
.thread .msg pre { white-space:pre-wrap; font:13px/1.55 inherit; margin:0; }

/* Forms */
.form { display:grid; gap:10px; }
.form label { font-size:12px; color:var(--muted); display:block; margin:0 0 3px; }
.form input, .form select, .form textarea { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:8px; font:13px inherit; background:#fff; }
.form textarea { min-height:80px; }
.frow { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* Toast */
#toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s; z-index:99; max-width:70vw; }
#toast.show { opacity:1; }
#toast.err { background:var(--bad); }

/* Loading / empty */
.empty { color:var(--muted); text-align:center; padding:34px 0; font-size:13px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sp 1s linear infinite; vertical-align:-2px; }
@keyframes sp { to { transform:rotate(360deg); } }
.gatechk { display:flex; gap:8px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--bg); font-size:13px; }
.gatechk .s { font-size:15px; }
kbd { background:#eef1f5; border-radius:4px; padding:1px 6px; font-size:11px; border:1px solid var(--line); }

/* ── Additive: sort indicators on table headers (used by organizations + future pages) ── */
table.grid th.pr-sort-asc::after  { content:' ▲'; color:var(--accent); font-size:10px; }
table.grid th.pr-sort-desc::after { content:' ▼'; color:var(--accent); font-size:10px; }

/* ── Additive: expandable rows (expand option in PR.table) ── */
.pr-caret-col { width:28px; text-align:center; padding:6px 4px !important; }
.pr-caret-btn { background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; padding:2px 4px; line-height:1; border-radius:4px; }
.pr-caret-btn:hover { color:var(--accent); background:var(--bg); }
.pr-expand-row { display:none; }
.pr-expand-row.open { display:table-row; }
.pr-expand-cell { background:#f7faff; border-bottom:2px solid var(--line); padding:12px 16px !important; font-size:12.5px; }
.pr-expand-cell .xstrip { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px 18px; }
.pr-expand-cell .xrow { display:flex; flex-direction:column; gap:2px; }
.pr-expand-cell .xk { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.pr-expand-cell .xv { font-size:12.5px; word-break:break-word; }
.pr-expand-cell .xv a { color:var(--accent); }
.pr-expand-cell .badges { display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }

/* ── Additive: org page layout — left category rail + main body ── */
.org-shell { display:grid; grid-template-columns:220px 1fr; gap:0; align-items:start; }
.org-rail { background:#fff; border-right:1px solid var(--line); border-top:1px solid var(--line); border-radius:12px 0 0 12px; min-height:400px; padding:0 0 20px; position:sticky; top:57px; max-height:calc(100vh - 57px); overflow-y:auto; flex-shrink:0; }
.org-rail-inner { padding:0; }
.org-rail h4 { margin:0; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:12px 14px 6px; }
.org-rail-item { display:block; padding:7px 14px; font-size:13px; color:var(--ink); cursor:pointer; border:none; background:none; width:100%; text-align:left; border-left:3px solid transparent; line-height:1.3; }
.org-rail-item:hover { background:var(--bg); color:var(--accent); }
.org-rail-item.active { background:#eaf2ff; color:var(--accent); font-weight:600; border-left-color:var(--accent); }
.org-rail-item .rct { float:right; font-size:10px; color:var(--muted); margin-top:2px; }
.org-rail-sep { height:1px; background:var(--line); margin:6px 0; }
.org-rail-group-toggle { display:flex; align-items:center; justify-content:space-between; padding:7px 14px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); cursor:pointer; border:none; background:none; width:100%; }
.org-rail-group-toggle::after { content:'▾'; font-size:10px; transition:transform .15s; }
.org-rail-group-toggle.collapsed::after { transform:rotate(-90deg); }
.org-all-cats { overflow:hidden; transition:max-height .2s; }
.org-all-cats.collapsed { max-height:0; }
.org-main { min-width:0; }

/* ── Additive: org page toolbar (density slider + view toggle) ── */
.org-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0 0 10px; }
.org-view-toggle { display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.org-view-toggle button { background:#fff; border:none; padding:6px 12px; font-size:13px; cursor:pointer; color:var(--muted); }
.org-view-toggle button.on { background:var(--accent); color:#fff; }
.org-density-wrap { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.org-density-wrap input[type=range] { width:80px; accent-color:var(--accent); }
.org-row-count { margin-left:auto; font-size:12px; color:var(--muted); }

/* ── Additive: org density CSS vars (applied via JS to the table wrapper) ── */
:root { --org-row-pad:9px; --org-font:13px; }
.org-main table.grid td { padding:var(--org-row-pad) 12px; font-size:var(--org-font); }
.org-main table.grid th { font-size:11px; }

/* ── Additive: org card grid view ── */
.org-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--org-card-min,280px),1fr)); gap:14px; }
.org-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 18px; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.org-card:hover { border-color:var(--accent); box-shadow:0 4px 16px rgba(10,108,255,.09); }
.org-card .oc-name { font-weight:700; font-size:14px; margin:0 0 2px; }
.org-card .oc-domain { font-size:11.5px; color:var(--muted); margin:0 0 8px; }
.org-card .oc-badges { display:flex; flex-wrap:wrap; gap:4px; margin:0 0 8px; }
.org-card .oc-metros { font-size:11.5px; color:var(--muted); margin:0 0 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.org-card .oc-scores { display:flex; gap:12px; align-items:center; font-size:11.5px; color:var(--muted); }
.org-card .oc-when { font-size:10.5px; color:var(--muted); margin-top:8px; border-top:1px solid var(--bg); padding-top:7px; }

@media(max-width:900px){ .org-shell { grid-template-columns:1fr; } .org-rail { display:none; } }