/* ============================================================================
   web/app.css — the Dashboard module.

   The tokens, the type, the card shape, the button shapes and the colour
   vocabulary are lifted from index.html's :root block, which is the only style
   guide there is. Nothing here invents a second visual language.
   ========================================================================== */

/* No web-font request: the build must render from a standing start with no
   network beyond its own server. The family list is index.html's, so a machine
   that has Kumbh Sans uses it and every other machine falls back the same way
   the prototype does. */

:root{
  --gray-25:#fcfcfd; --gray-50:#f9fafb; --gray-100:#f2f4f7; --gray-200:#eaecf0; --gray-300:#d0d5dd;
  --gray-400:#98a2b3; --gray-500:#667085; --gray-600:#475467; --gray-700:#344054; --gray-800:#1d2939;
  --gray-900:#101828;
  --page:var(--gray-50); --card:#fff; --sidebar:var(--gray-100);
  --ink:#23201b; --ink-strong:#100c08; --muted:#7c7264; --faint:#a39a8a;
  --border:var(--gray-200); --border-strong:var(--gray-300);
  --orange:#f89839; --orange-d:#ec832e; --orange-50:#fff5ec; --orange-100:#fde6d2; --orange-700:#ad5418;
  --red:#c2402b; --red-50:#fdeceb;
  --green:#22a35e; --green-50:#eef8f1;
  --navy:#18135c; --blue:#3f6ad6; --blue-50:#eaf2fd; --amber:#d98a07; --amber-50:#fff6e6;
  --accent:#18135c;
  --shp:0 8px 24px -6px rgba(24,19,92,.12),0 24px 60px -12px rgba(24,19,92,.22);
  --r:13px; --r-sm:10px; --r-pill:999px;
  --font:'Kumbh Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:var(--font);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--page);
  -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.45;
}
button{font-family:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font-family:inherit}
svg{display:block}
::selection{background:var(--orange-100)}

/* ------------------------------------------------------------------ shell */

.dash-root{display:flex; flex-direction:column; min-height:100vh}

.dash-topbar{
  display:flex; align-items:center; gap:10px; padding:0 14px; height:54px;
  background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:40;
}
.dash-brand{display:flex; align-items:center; gap:10px; flex:0 0 auto; padding-right:6px;
  border-right:1px solid var(--border); height:100%;}
.dash-brand-badge{
  width:30px; height:30px; border-radius:6px; display:grid; place-items:center; color:#fff;
  font-weight:800; font-size:13px; letter-spacing:.5px;
  background:linear-gradient(150deg,var(--orange),var(--orange-d));
  box-shadow:0 2px 8px -2px rgba(236,131,46,.6);
}
.dash-brand-name{font-weight:800; font-size:16px; color:var(--ink-strong); letter-spacing:-.2px}

.dash-boardpick{display:flex; align-items:center; gap:8px; min-width:0}
.dash-boardname{
  border:1px solid transparent; background:transparent; border-radius:8px; height:32px; padding:0 8px;
  font-size:15px; font-weight:800; color:var(--ink-strong); min-width:170px; max-width:340px;
}
.dash-boardname:hover{border-color:var(--border)}
.dash-boardname:focus{outline:none; border-color:var(--orange); background:var(--orange-50)}

.dash-select{
  height:32px; border:1px solid var(--border-strong); border-radius:8px; background:var(--card);
  padding:0 26px 0 10px; font-size:13px; color:var(--ink); font-weight:600; cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c7264' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 8px center;
}
.dash-select:focus{outline:none; border-color:var(--orange)}

.dash-actions{margin-left:auto; display:flex; align-items:center; gap:5px}
.dash-sep{width:1px; height:22px; background:var(--border); margin:0 4px}
.dash-btn{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 10px;
  border-radius:var(--r-pill); border:1px solid var(--border); background:var(--card);
  color:var(--ink); font-weight:700; font-size:12.5px; transition:.14s;
}
.dash-btn:hover{background:var(--orange-50); border-color:var(--border-strong)}
.dash-btn.is-labelled{padding:0 14px}
.dash-btn.is-primary{background:linear-gradient(150deg,var(--orange),var(--orange-d)); color:#fff; border-color:transparent;
  box-shadow:0 3px 10px -3px rgba(236,131,46,.6)}
.dash-btn.is-primary:hover{filter:brightness(1.05)}
.dash-btn.is-on{background:var(--navy); color:#fff; border-color:transparent; box-shadow:none}

/* ------------------------------------------------------------- filter strip */

.dash-strip{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 16px; background:var(--card); border-bottom:1px solid var(--border);
  position:sticky; top:54px; z-index:35;
}
.dash-strip-tag{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; color:var(--faint)}
.dash-strip-tag svg{color:var(--muted)}
.dash-field{display:flex; align-items:center; gap:7px}
.dash-field-label{font-size:11.5px; font-weight:700; color:var(--muted); white-space:nowrap}
.dash-strip-reset{height:30px; padding:0 12px; border-radius:var(--r-pill); border:1px solid var(--border);
  background:var(--card); font-size:12px; font-weight:700; color:var(--muted)}
.dash-strip-reset:hover{background:var(--orange-50); color:var(--orange-700)}
.dash-strip-note{margin-left:auto; font-size:11.5px; color:var(--faint)}

/* --------------------------------------------------------------------- tabs */

.dash-tabs{display:flex; align-items:center; gap:4px; padding:8px 16px 0; background:var(--card);
  border-bottom:1px solid var(--border); position:sticky; top:105px; z-index:30}
.dash-tab{
  height:34px; padding:0 14px; border-radius:8px 8px 0 0; border:1px solid transparent; border-bottom:0;
  background:transparent; color:var(--muted); font-size:13px; font-weight:700; position:relative; top:1px;
}
.dash-tab:hover{background:var(--page); color:var(--ink)}
.dash-tab[data-tab-active="1"]{
  background:var(--page); border-color:var(--border); color:var(--orange-700);
  box-shadow:inset 0 2px 0 var(--orange);
}
.dash-tab-add{width:32px; padding:0; display:inline-grid; place-items:center; color:var(--faint)}

/* ----------------------------------------------------------------- edit bar */

[hidden]{display:none !important}

.dash-editbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 16px;
  background:var(--navy); color:#fff;
}
.dash-edithint{font-size:12px; font-weight:600; opacity:.8}
.dash-palette{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto}
.dash-pal{
  display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.10); color:#fff; font-size:12px; font-weight:700; border:1px solid rgba(255,255,255,.18);
}
.dash-pal:hover{background:var(--orange); border-color:transparent}

/* ------------------------------------------------------------------- panels */

.dash-panels{flex:1; padding:14px 16px 60px}
.dash-panel{min-height:200px}

/* ------------------------------------------------------------------ gridstack */

.grid-stack-item-content{
  inset:0; display:flex; overflow:visible;
}
.grid-stack > .grid-stack-item > .grid-stack-item-content{overflow:visible}
.grid-stack.is-editable .grid-stack-item-content{cursor:grab}
.grid-stack.is-editable .grid-stack-item-content:active{cursor:grabbing}
.grid-stack-item.ui-draggable-dragging .db-block{box-shadow:var(--shp); border-color:var(--orange)}
.grid-stack .ui-resizable-se{
  width:16px; height:16px; right:2px; bottom:2px; opacity:0; transition:.15s;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ec832e' stroke-width='2.6' stroke-linecap='round'><path d='M20 20 L20 12 M20 20 L12 20 M20 20 L14 14'/></svg>");
  background-size:contain; background-repeat:no-repeat;
}
body[data-edit-mode="1"] .grid-stack .ui-resizable-se{opacity:1}

/* ------------------------------------------------------------------- blocks */

.db-block{
  display:flex; flex-direction:column; width:100%; height:100%; min-height:0;
  background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden;
  transition:box-shadow .16s, border-color .16s;
}
.db-block:hover{box-shadow:0 4px 14px -6px rgba(24,19,92,.16)}
.db-block.is-error{border-color:var(--red); background:#fffbfb}
.db-block.is-loading{opacity:.72}

.db-block-head{
  display:flex; align-items:center; gap:8px; padding:9px 12px 7px; flex:0 0 auto;
  border-bottom:1px solid var(--border);
}
.db-block-title{min-width:0; flex:1; display:flex; align-items:baseline; gap:8px}
.db-block-name{font-size:13px; font-weight:800; color:var(--ink-strong); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.db-block-tools{display:flex; align-items:center; gap:2px; flex:0 0 auto; opacity:0; transition:.14s}
body[data-edit-mode="1"] .db-block-tools{opacity:1}
.db-tool{width:24px; height:24px; border-radius:6px; display:grid; place-items:center; color:var(--muted)}
.db-tool:hover{background:var(--orange-50); color:var(--orange-700)}
.db-grip{display:none; color:var(--faint); padding-left:2px}
body[data-edit-mode="1"] .db-grip{display:block}

.db-block-body{flex:1; min-height:0; position:relative; overflow:auto; padding:10px 12px}
.db-block-body.blk-table,
.db-block-body.blk-gantt,
.db-block-body.blk-timeline,
.db-block-body.blk-savedlist,
.db-block-body.blk-kanban{padding:0; overflow:hidden; display:flex; flex-direction:column}
.db-block-body.blk-calendar{padding:6px 8px; overflow:hidden; display:flex}
.db-block-body.blk-gauge{padding:8px 12px; overflow:hidden; display:flex; flex-direction:column}
.gauge-dial{flex:1; min-height:0; display:flex}
.gauge-meter{flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; gap:9px}
.gm-top{flex:0 0 auto; display:flex; align-items:baseline; gap:10px; min-width:0}
.gm-top b{font-size:26px; font-weight:800; color:var(--ink-strong); letter-spacing:-1px; line-height:1; white-space:nowrap}
.gm-top span{font-size:11.5px; color:var(--muted); font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gm-track{flex:0 0 10px; position:relative; height:10px; border-radius:99px; background:var(--gray-200)}
.gm-track span{display:block; height:100%; border-radius:99px; background:var(--green); transition:width .25s}
.gm-track i{position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--navy); border-radius:2px}

.db-block-body.blk-chart,
.db-block-body.blk-heatmap,
.db-block-body.blk-funnel{padding:4px 6px; overflow:hidden; display:flex}
.chart-canvas{flex:1; width:100%; height:100%; min-height:60px}

.db-block-footer{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; flex-wrap:nowrap;
  padding:5px 11px; border-top:1px solid var(--border); background:var(--gray-25);
  font-size:10px; color:var(--faint); overflow:hidden; white-space:nowrap;
}
.db-foot-part{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.db-foot-part b{font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--gray-400); font-size:9.5px}
.db-foot-part span{color:var(--muted); font-weight:600}
.db-foot-warn{color:var(--orange-700); font-weight:700}

.db-block-errorcard{display:flex; gap:10px; align-items:flex-start; padding:12px; border-radius:8px;
  background:var(--red-50); border:1px solid #f2c8c2; color:var(--red)}
.db-block-errorcard .db-ic{flex:0 0 auto; color:var(--red)}
.db-error-msg{font-weight:800; font-size:12.5px; color:#8f2b1c}
.db-error-detail{font-size:11.5px; color:#a5584a; margin-top:3px}

.blk-empty{display:grid; place-items:center; width:100%; min-height:60px; padding:16px;
  font-size:12.5px; color:var(--faint); text-align:center}

/* ---------------------------------------------------------------- kpi tile */

.blk-kpi .kpi-wrap{display:flex; flex-direction:column; justify-content:center; height:100%; gap:3px}
.kpi-value{font-size:27px; font-weight:800; color:var(--ink-strong); letter-spacing:-1.2px; line-height:1}
.kpi-sub{font-size:12px; color:var(--muted); font-weight:600}
.kpi-target{align-self:flex-start; margin-top:4px; font-size:11px; font-weight:800; padding:2px 9px; border-radius:99px}
.kpi-target.is-under{color:var(--green); background:var(--green-50)}
.kpi-target.is-over{color:var(--red); background:var(--red-50)}

/* -------------------------------------------------------------- card lists */

/* A card list uses the width it is given: one column in a narrow tile, as many
   as fit when the block is made wider. This is AC5's second clause in CSS —
   make the block bigger and its contents re-lay-out to use the room. */
.card-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; align-content:start}
.rec-card{border:1px solid var(--border); border-radius:8px; padding:9px 11px; background:var(--card)}
.rec-card:hover{border-color:var(--orange-100); background:#fffaf4}
.rec-head{display:flex; align-items:center; gap:8px; justify-content:space-between}
.rec-head b{font-size:12.5px; color:var(--ink-strong); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rec-sub{font-size:11.5px; color:var(--muted); margin-top:1px}
.rec-bar{height:5px; border-radius:99px; background:var(--gray-100); margin-top:8px; overflow:hidden}
.rec-bar span{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--orange),var(--orange-d))}
.rec-foot{font-size:11px; color:var(--faint); margin-top:5px}
.rec-more{font-size:11.5px; color:var(--muted); text-align:center; padding:6px}

.tone{font-size:10.5px; font-weight:800; padding:2px 8px; border-radius:99px; white-space:nowrap; flex:0 0 auto}
.tone-grey{background:var(--gray-100); color:var(--gray-600)}
.tone-blue{background:var(--blue-50); color:var(--blue)}
.tone-amber{background:var(--amber-50); color:var(--amber)}
.tone-red{background:var(--red-50); color:var(--red)}
.tone-green{background:var(--green-50); color:var(--green)}

/* ------------------------------------------------------------------- text */

.text-body{font-size:13px; color:var(--ink); line-height:1.55}
.text-body p{margin:0 0 9px}
.text-body code{background:var(--gray-100); border-radius:4px; padding:1px 5px; font-size:12px}

/* ------------------------------------------------------------------- grid */

.dash-grid{flex:1; width:100%; min-height:120px;
  --ag-font-family:var(--font); --ag-font-size:12px;
  --ag-border-color:var(--border); --ag-header-background-color:var(--gray-25);
  --ag-header-foreground-color:var(--muted); --ag-odd-row-background-color:#fff;
  --ag-row-hover-color:var(--orange-50); --ag-selected-row-background-color:var(--orange-50);
  --ag-wrapper-border-radius:0; --ag-borders:none; --ag-row-border-color:var(--border);
  --ag-header-column-resize-handle-color:var(--border-strong);
}
.dash-grid .ag-header-cell-text{font-weight:800; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em}
.dash-grid .dash-num{font-variant-numeric:tabular-nums}
.dash-grid-empty{color:var(--faint); font-size:12.5px}

/* ----------------------------------------------------------------- kanban */

.blk-kanban .kanban{display:flex; gap:10px; padding:10px; overflow:auto; flex:1; align-items:flex-start}
.kanban.is-saving{opacity:.7}
.kb-col{flex:1 1 0; min-width:172px; border:1px solid var(--border); border-radius:10px; background:var(--gray-25);
  display:flex; flex-direction:column; max-height:100%}
.kb-col-head{display:flex; align-items:center; gap:7px; padding:8px 10px; border-bottom:1px solid var(--border);
  background:var(--card); border-radius:10px 10px 0 0}
.kb-col-head b{font-size:11.5px; color:var(--ink-strong); text-transform:capitalize; flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kb-count{font-size:10.5px; font-weight:800; color:var(--muted); background:var(--gray-100); border-radius:99px; padding:1px 7px}
.kb-dot{width:8px; height:8px; border-radius:99px; flex:0 0 auto}
.kb-dot.tone-grey{background:var(--gray-400)} .kb-dot.tone-blue{background:var(--blue)}
.kb-dot.tone-amber{background:var(--amber)} .kb-dot.tone-red{background:var(--red)} .kb-dot.tone-green{background:var(--green)}
.kb-col-body{padding:8px; display:flex; flex-direction:column; gap:7px; overflow:auto; min-height:56px; flex:1}
.kb-card{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:8px 9px; cursor:grab;
  box-shadow:0 1px 2px rgba(24,19,92,.04)}
.kb-card:hover{border-color:var(--orange-100)}
.kb-card:active{cursor:grabbing}
.kb-card-top b{font-size:12px; color:var(--ink-strong); display:block; line-height:1.3}
.kb-card-meta{display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap}
.kb-who,.kb-id{font-size:10px; color:var(--faint); font-weight:700}
.kb-bar{height:4px; border-radius:99px; background:var(--gray-100); margin-top:7px; overflow:hidden}
.kb-bar span{display:block; height:100%; background:var(--blue)}
.kb-ghost{opacity:.35}

/* ------------------------------------------------------- gantt / timeline */

.barview{display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden}
.bv-head{display:flex; flex:0 0 auto; border-bottom:1px solid var(--border); background:var(--gray-25)}
.bv-head-label{width:var(--bv-label-w,190px); flex:0 0 auto; border-right:1px solid var(--border)}
.bv-head-track{flex:1; overflow:hidden; position:relative; height:38px}
.bv-months{position:relative; height:18px}
.bv-month{position:absolute; top:0; font-size:10px; font-weight:800; color:var(--muted); letter-spacing:.03em;
  padding-left:5px; border-left:1px solid var(--border); height:18px; line-height:18px; overflow:hidden; white-space:nowrap}
.bv-ticks{position:relative; height:20px}
.bv-tick{position:absolute; top:0; font-size:9.5px; color:var(--faint); padding-left:2px; height:20px; line-height:20px;
  white-space:nowrap}
.bv-tick.is-major{color:var(--muted); font-weight:800}

.bv-body{flex:1; overflow:auto; position:relative}
.bv-grid{position:relative}
.bv-lane{position:absolute; left:0; right:0; border-bottom:1px solid var(--border)}
.bv-lane-label{position:absolute; left:0; top:0; bottom:0; padding:7px 10px; border-right:1px solid var(--border);
  background:var(--card); z-index:2; display:flex; flex-direction:column; justify-content:center; gap:1px}
.bv-lane-label b{font-size:11.5px; color:var(--ink-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bv-lane-label span{font-size:10px; color:var(--faint)}
.bv-lane-track{position:absolute; top:0; bottom:0}
.bv-lane:nth-child(odd) .bv-lane-track{background:var(--gray-25)}

.bv-bar{position:absolute; border-radius:5px; overflow:hidden; cursor:grab; display:flex; align-items:center;
  background:var(--blue); box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); user-select:none}
.bv-bar:active{cursor:grabbing}
.bv-bar.is-dragging{opacity:.85; box-shadow:0 4px 12px -3px rgba(24,19,92,.4); z-index:6}
.bv-bar.tone-grey{background:var(--gray-400)} .bv-bar.tone-blue{background:var(--blue)}
.bv-bar.tone-amber{background:var(--amber)} .bv-bar.tone-red{background:var(--red)} .bv-bar.tone-green{background:var(--green)}
.bv-bar-fill{position:absolute; left:0; top:0; bottom:0; background:rgba(255,255,255,.34)}
.bv-bar-text{position:relative; font-size:10.5px; font-weight:700; color:#fff; padding:0 6px; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; pointer-events:none}
.barview.is-saving{opacity:.75}

.bv-today{position:absolute; top:0; width:2px; background:var(--orange); z-index:4; pointer-events:none}
.bv-today.is-outside{opacity:.35}
.bv-today-flag{position:absolute; top:0; left:3px; font-size:9px; font-weight:800; color:#fff; background:var(--orange-d);
  border-radius:0 4px 4px 0; padding:1px 5px; white-space:nowrap}
.bv-deps{position:absolute; left:0; top:0; pointer-events:none; z-index:5; overflow:visible}
.bv-dep{fill:none; stroke:var(--navy); stroke-width:1.3; opacity:.55; stroke-dasharray:3 2}
.bv-dep-head{fill:var(--navy); opacity:.7}

/* -------------------------------------------------------------- saved list */

.saved-list{display:flex; flex-direction:column; flex:1; min-height:0}
.sl-bar{display:flex; align-items:center; gap:3px; padding:7px 10px; border-bottom:1px solid var(--border);
  background:var(--gray-25); flex:0 0 auto}
.sl-view{display:inline-flex; align-items:center; gap:6px; height:27px; padding:0 10px; border-radius:7px;
  background:transparent; color:var(--muted); font-size:11.5px; font-weight:700; border:1px solid transparent}
.sl-view:hover{background:var(--card); color:var(--ink)}
.sl-view.on{background:var(--card); color:var(--orange-700); border-color:var(--orange-100);
  box-shadow:0 1px 2px rgba(24,19,92,.08)}
.sl-key{margin-left:auto; font-size:10.5px; font-weight:700; color:var(--faint)}
.sl-content{flex:1; min-height:0; display:flex; flex-direction:column}

/* ---------------------------------------------------------------- calendar */

.dash-calendar{flex:1; display:flex; min-height:0; width:100%}
.dash-calendar-mount{flex:1; min-height:0; width:100%}
.dash-calendar .fc{font-family:var(--font); font-size:12px}
.dash-calendar .fc .fc-toolbar-title{font-size:14px; font-weight:800; color:var(--ink-strong)}
.dash-calendar .fc .fc-button{background:var(--card); border:1px solid var(--border); color:var(--muted);
  border-radius:7px; padding:2px 8px; font-size:11px; font-weight:700; box-shadow:none}
.dash-calendar .fc .fc-button:hover{background:var(--orange-50); color:var(--orange-700)}
.dash-calendar .fc .fc-button-primary:not(:disabled):active{background:var(--orange); border-color:var(--orange)}
.dash-calendar .fc-theme-standard td,.dash-calendar .fc-theme-standard th{border-color:var(--border)}
.dash-calendar .fc .fc-col-header-cell-cushion{font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--faint); padding:5px}
.dash-calendar .fc .fc-daygrid-day-number{font-size:11px; font-weight:700; color:var(--muted); padding:3px 5px}
.dash-calendar .fc .fc-day-today{background:var(--orange-50)}
.dash-calendar .fc-event{border-radius:4px; font-size:10.5px; font-weight:700; padding:0 3px; border:none}
.dash-calendar .fc-daygrid-more-link{font-size:10px; font-weight:800; color:var(--orange-700)}
.dash-calendar .fc-toolbar.fc-header-toolbar{margin-bottom:6px}

/* ------------------------------------------------------------- text panel */

.dash-textpanel{
  /* Starts BELOW the top bar so the button that opened it — and every other
     control up there — stays reachable while it is open. */
  position:fixed; right:0; top:54px; bottom:0; width:min(560px,46vw); z-index:70;
  background:var(--card); border-left:1px solid var(--border); box-shadow:var(--shp);
  display:flex; flex-direction:column; padding:14px 16px; gap:10px;
}
.dash-textpanel header{display:flex; align-items:center; justify-content:space-between}
.dash-textpanel header b{font-size:15px; color:var(--ink-strong)}
.dash-textnote{margin:0; font-size:12px; color:var(--muted)}
.dash-textarea{
  flex:1; min-height:200px; resize:none; border:1px solid var(--border-strong); border-radius:8px; padding:10px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px; line-height:1.5; color:var(--ink);
  background:var(--gray-25);
}
.dash-textarea:focus{outline:none; border-color:var(--orange); background:#fff}
.dash-sentence{display:flex; gap:8px}
.dash-sentence input{flex:1; height:36px; border:1px solid var(--border-strong); border-radius:var(--r-pill);
  padding:0 14px; font-size:13px; color:var(--ink)}
.dash-sentence input:focus{outline:none; border-color:var(--orange)}
.dash-textmsg{white-space:pre-wrap; font-size:12px; color:var(--muted); min-height:20px; max-height:170px; overflow:auto;
  border-radius:8px}
.dash-textmsg.is-error{color:#8f2b1c; background:var(--red-50); padding:9px 11px; font-weight:600}
.dash-textmsg.is-ok{color:#14663a; background:var(--green-50); padding:9px 11px; font-weight:600}
.dash-texthelp{font-size:11.5px; color:var(--muted)}
.dash-texthelp code{background:var(--gray-100); border-radius:4px; padding:1px 5px}
.dash-texthelp ul{margin:6px 0 0; padding-left:18px}
/* The board makes room for the panel rather than being covered by it: a block
   you cannot reach is worse than a board that is temporarily narrower. Because
   that DOES change every block's width in pixels, the panel remembers whether
   it was open (see freetext.js) — so a reload comes back to the same board at
   the same size, and the width you edited in the text is the width you get. */
body.has-textpanel .dash-panels,
body.has-textpanel .dash-strip,
body.has-textpanel .dash-tabs,
body.has-textpanel .dash-editbar{padding-right:calc(min(560px,46vw) + 16px)}

/* ------------------------------------------------------------------ modal */

.dash-modal-scrim{position:fixed; inset:0; background:rgba(24,19,92,.32); z-index:80; display:grid; place-items:center}
.dash-modal{background:var(--card); border-radius:var(--r); width:min(520px,92vw); max-height:86vh; display:flex;
  flex-direction:column; box-shadow:var(--shp); overflow:hidden}
.dash-modal header{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border)}
.dash-modal header b{font-size:15px; color:var(--ink-strong)}
.dash-modal header span{font-size:11.5px; color:var(--faint)}
.dash-modal header .dash-btn{margin-left:auto}
.dash-modal-body{padding:14px 16px; overflow:auto; display:flex; flex-direction:column; gap:10px}
.dash-modal-row{display:grid; grid-template-columns:130px 1fr; align-items:center; gap:12px; font-size:12.5px;
  font-weight:700; color:var(--muted)}
.dash-modal-row input[type=text],.dash-modal-row select,.dash-modal-row textarea{
  border:1px solid var(--border-strong); border-radius:8px; height:34px; padding:0 10px; font-size:13px; color:var(--ink);
  background:var(--card); width:100%}
.dash-modal-row textarea{height:auto; padding:8px 10px; font-family:inherit}
.dash-modal footer{padding:12px 16px; border-top:1px solid var(--border); display:flex; justify-content:flex-end}
.dash-roles{display:flex; flex-wrap:wrap; gap:10px; font-weight:600; color:var(--ink); font-size:12.5px}
.dash-roles label{display:inline-flex; align-items:center; gap:5px}

/* ------------------------------------------------------------------ toast */

.dash-toast{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:8px}
.dash-toast-item{background:var(--navy); color:#fff; padding:9px 14px; border-radius:var(--r-pill); font-size:12.5px;
  font-weight:700; box-shadow:var(--shp); transition:.4s}
.dash-toast-item.is-error{background:var(--red)}
.dash-toast-item.is-out{opacity:0; transform:translateY(6px)}

/* ------------------------------------------------------------------ fatal */

.dash-fatal{max-width:760px; margin:60px auto; padding:24px 28px; background:var(--card);
  border:1px solid var(--red); border-radius:var(--r)}
.dash-fatal h1{margin:0 0 10px; font-size:20px; color:var(--red)}
.dash-fatal pre{background:var(--gray-50); padding:12px; border-radius:8px; overflow:auto; font-size:11.5px}