/* ══════════════════════════════════════════════════════════════
   ELLY OS — SHARED THEME (design tokens + Notion-style table look)
   Include with: <link rel="stylesheet" href="theme.css">
   Load AFTER nav.css. Any page using --bg/--text/--accent/etc.
   or the .grid-tbl / .cell / .pill / .status-pill table classes
   should pull from here instead of redefining its own copy, so a
   palette change (like this pastel pass) only has to happen once.
   ══════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* white, no grey — soft lavender/pastel tint instead of grey for
     borders and secondary text */
  --bg:#ffffff;--card:#ffffff;--border:#f0eaff;--border2:#e4d9ff;
  --text:#191919;--text2:#8a7fa8;--text3:#b3a6d1;
  --radius:6px;--radius-lg:10px;
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',system-ui,sans-serif;
  --serif:'Lora',Georgia,serif;
  --accent:#a78bfa;--nav-h:62px;
  --row-h:34px;
  --hover-tint:#faf9ff;
  --pastel-bg:#f3f0ff;--pastel-fg:#6d28d9;
}

html,body{background:var(--bg);color:var(--text);font-family:var(--serif);font-size:14px;-webkit-font-smoothing:antialiased;min-height:100vh}
button,input,select,textarea{font-family:var(--serif)}

/* ── Page chrome — full width, no 1600px cap ── */
.hd{padding:26px 32px 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:none;margin:0 auto}
.hd-title{font-family:var(--serif);font-style:italic;font-size:24px;font-weight:700;flex:1}
.bb{padding:10px 32px;max-width:none;margin:0 auto;display:flex;align-items:center;gap:6px;overflow-x:auto;border-bottom:1px solid var(--border)}
.bb::-webkit-scrollbar{display:none}
.bc{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:4px 12px;border-radius:99px;border:1.5px solid var(--border);background:var(--card);color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .12s}
.bc.active,.bc:hover{background:var(--text);color:#fff;border-color:var(--text)}
.bd{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.main{padding:0 32px 100px;max-width:none;margin:0 auto}
.vt{display:flex;align-items:center;gap:4px;padding:10px 32px 0;max-width:none;margin:0 auto}
.vt-tab{font-size:12.5px;font-weight:500;color:var(--text3);padding:7px 12px;border-bottom:2px solid transparent;cursor:pointer;border:none;background:none;transition:all .12s;margin-bottom:-1px;display:flex;align-items:center;gap:5px}
.vt-tab:hover{color:var(--text2)}
.vt-tab.active{color:var(--text);border-bottom:2px solid var(--text)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:7px;border:1.5px solid var(--border2);background:var(--card);color:var(--text2);cursor:pointer;transition:all .12s;white-space:nowrap}
.btn:hover{background:var(--hover-tint);color:var(--text)}
.btn.primary{background:var(--text);color:#fff;border-color:var(--text)}
.btn.primary:hover{opacity:.85}
.btn.sm{font-size:11.5px;padding:5px 11px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--hover-tint)}

/* ── Notion-style table: full-width, wraps instead of truncating,
   rows grow to fit content instead of a fixed height ── */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--card);overflow:auto;max-width:100%;max-height:calc(100vh - 260px)}
table.grid-tbl{border-collapse:collapse;table-layout:fixed;width:100%}
.grid-tbl th{position:sticky;top:0;background:#fff;z-index:5;text-align:left;font-size:11px;font-weight:600;color:var(--text2);border-bottom:1.5px solid var(--border);border-right:1px solid var(--border);padding:0;height:34px;white-space:nowrap}
.th-inner{display:flex;align-items:center;gap:5px;padding:0 10px;height:100%;cursor:pointer;position:relative}
.th-inner:hover{background:var(--hover-tint)}
.th-icon{opacity:.55;font-size:11px;flex-shrink:0}
.th-label{overflow:hidden;text-overflow:ellipsis;flex:1}
.grid-tbl td{border-bottom:1px solid var(--border);border-right:1px solid var(--border);padding:0;height:var(--row-h);max-height:var(--row-h);vertical-align:middle;overflow:hidden}
.grid-tbl tr:hover td{background:var(--hover-tint)}
.row-num-col{width:32px;text-align:center;color:var(--text3);font-size:11px;background:var(--bg)}
.cell{display:flex;align-items:center;height:var(--row-h);max-height:var(--row-h);padding:0 10px;font-size:12.5px;cursor:pointer;overflow:hidden;white-space:nowrap;color:var(--text);line-height:1.5}
.cell.editing{cursor:text;overflow:visible;white-space:normal;height:auto;max-height:none;z-index:10;position:relative;background:var(--card)}
.cell.title-cell{font-weight:600;gap:6px}
.cell.title-cell .open-btn{opacity:0;font-size:10.5px;color:var(--accent);font-weight:600;padding:1px 6px;border:1px solid var(--accent);border-radius:5px;flex-shrink:0;background:var(--pastel-bg)}
.cell-empty{color:var(--text3)}
.cell input.cell-edit{width:100%;height:100%;border:none;outline:2px solid var(--accent);outline-offset:-2px;background:var(--card);font-size:12.5px;padding:0 10px;font-family:var(--serif);color:var(--text)}
.pill{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:5px;white-space:nowrap;flex-shrink:0}
.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:99px;white-space:nowrap}
.add-row{display:flex;align-items:center;gap:6px;padding:8px 12px;color:var(--text3);font-size:12.5px;cursor:pointer;border-top:1px solid var(--border)}
.add-row:hover{color:var(--accent);background:var(--hover-tint)}

/* ── Cell-editor popup shared look ── */
.cpop-check{width:14px;flex-shrink:0;color:var(--accent);font-weight:700;font-size:12px}
.pmenu-rename:focus{border-color:var(--accent)}
.finput:focus,.fsel:focus{border-color:var(--accent)}
.type-opt.selected{border-color:var(--accent);background:var(--pastel-bg)}
.sc-inspo-row input:focus{border-color:var(--accent)}
.sc-inspo-link{font-size:12px;color:var(--accent);text-decoration:none;word-break:break-all}