/* Envision Board CRM shell - layout-only helpers on top of the design system.
   Every colour/token comes from /Envision-Board/design/envision-board-ui.css;
   nothing here introduces a new colour or component style. */

.side-nav a { cursor: pointer; }
.side-nav a.sub { margin-left: 20px; font-size: 12.5px; }
.side-nav a.sub .ic { width: 15px; }

/* collapsible sidebar groups (click Dashboard / Tools to drop down) */
.navparent { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 11px; border-radius: var(--radius-sm); font: 13px var(--font); color: var(--ink-2); background: none; border: none; cursor: pointer; text-align: left; }
.navparent .ic { width: 18px; display: flex; justify-content: center; color: var(--ink-3); flex-shrink: 0; }
.navparent:hover { background: rgba(255,255,255,.7); color: var(--ink); }
.navparent .caret { margin-left: auto; display: flex; color: var(--ink-3); transition: transform .18s ease; }
.navgroup.open > .navparent { color: var(--ink); font-weight: 600; }
.navgroup.open > .navparent .caret { transform: rotate(90deg); }
.navgroup .subnav { overflow: hidden; max-height: 0; transition: max-height .22s ease; }
.navgroup.open .subnav { max-height: 360px; }

.topbar .who .btn { padding: 6px 12px; }

/* launcher tiles use a bigger icon */
.tile .icon svg { width: 20px; height: 20px; }

/* ---- Roles & Permission module (layout only, tokens only) ---- */
.topbar .who .badge { margin: 0 4px; }

.tabpanel { display: none; }
.tabpanel.on { display: block; }

.rowactions { display: flex; gap: 8px; justify-content: flex-end; }

.cell-select { padding: 6px 10px; font: 13px var(--font); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); }
.cell-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180,83,9,.12); }

.perm-count { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* right-side editor drawer */
.scrim { position: fixed; inset: 0; background: rgba(40,36,31,.32); z-index: 70; opacity: 0; pointer-events: none; transition: .2s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 96vw); background: var(--page); border-left: 1px solid var(--rail-border); z-index: 80; transform: translateX(102%); transition: transform .28s ease; display: flex; flex-direction: column; box-shadow: var(--shadow-lift); }
.drawer.on { transform: none; }
.drawer .dhead { padding: 16px 22px; border-bottom: 1px solid var(--rail-border); display: flex; align-items: flex-start; gap: 10px; flex-shrink: 0; }
.drawer .dbody { flex: 1; overflow-y: auto; padding: 20px 22px 28px; }
.drawer .dfoot { padding: 14px 22px; border-top: 1px solid var(--rail-border); display: flex; gap: 10px; flex-shrink: 0; }

/* permission checklist */
.perm-group { margin-bottom: 18px; }
.perm-group > h4 { font-size: 11px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.perm { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); margin-bottom: 8px; cursor: pointer; }
.perm:hover { border-color: var(--accent-line); background: var(--accent-tint); }
.perm input { margin-top: 2px; width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; }
.perm .pl { font-size: 13px; color: var(--ink); }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%,80px); background: var(--ink); color: #fff; border-radius: 9px; padding: 10px 16px; font-size: 13px; z-index: 300; transition: .25s; opacity: 0; box-shadow: 0 6px 20px rgba(40,36,31,.22); }
.toast.on { transform: translate(-50%,0); opacity: 1; }