/* Yuvimo — the few rules the back office needs beyond app.css.
   The first two blocks are HexaVI's own (workspace.css), carried over
   unchanged: the toast, and the grid of photograph thumbnails. */

/* ---------- toast (HexaVI workspace.css) ---------- */
.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%) translateY(8px);z-index:200;
  background:var(--ink);color:#fff;font-size:12.5px;padding:8px 14px;border-radius:var(--radius);
  box-shadow:var(--shadow-lg);opacity:0;transition:opacity .16s,transform .16s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:var(--danger)}

/* ---------- photographs (HexaVI workspace.css) ---------- */
.pn-h{margin:0 0 2px;font-size:12.5px;font-weight:600;color:var(--ink)}
.pn-shots{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.pn-shot{position:relative;margin:0}
.pn-shot img{width:100%;height:78px;object-fit:cover;border-radius:6px;border:1px solid var(--line,#e2e8f0);display:block}
.pn-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}

/* ---------- document lines editor ----------
   The table is app.css's table.data; the cells are its input.cell. Only the
   column widths are set here. */
.lines-ed .c-qty{width:84px}
.lines-ed .c-unit{width:64px}
.lines-ed .c-price{width:110px}
.lines-ed .c-vat{width:76px}
.lines-ed .c-cost{width:110px}
.lines-ed .c-disc{width:76px}
.lines-ed .c-total{width:110px}
.lines-ed .c-act{width:64px}
.lines-ed tr.is-text td input.cell{font-style:italic}
.lines-ed .dragging{opacity:.4}

/* ---------- flags and the user icon ---------- */
.flag{height:11px;width:auto;margin-right:6px;vertical-align:-1px;border-radius:1px;box-shadow:0 0 0 1px rgba(15,23,42,.12)}
.usermenu .usericon{display:inline-flex;align-items:center;gap:5px}
.usermenu .usericon svg{flex:none;color:#94a3b8}

/* ---------- planning ----------
   The toolbar is a .listsearch holding a select, a .segmented and .btn sm:
   the select as wide as its longest name, the segmented control whole. */
.listsearch > select{width:auto}
.listsearch > .segmented{flex:none}
/*
   The calendar is app.css's table.data, one column a day. An entry is a line
   on the light background of the table's header, its left edge in the colour
   of the legend's badge: accent for a survey, ok for a job. */
.cal{table-layout:fixed;min-width:760px}
.cal td{height:104px;padding:6px}
table.data.cal td{vertical-align:top}
table.data.cal.week td{height:360px}
.cal td.out{background:var(--bg-alt)}
.cal-d{font-size:11.5px;font-weight:600;color:var(--muted);margin:0 0 4px}
.cal td.out .cal-d{color:var(--faint)}
.cal-e{display:block;font-size:11.5px;line-height:1.35;padding:2px 6px;margin:0 0 3px;border-left:3px solid var(--accent);
  border-radius:3px;background:var(--bg-alt);color:var(--ink);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-e:hover{background:var(--accent-soft)}
.cal-e.job{border-left-color:var(--ok)}
.cal.week .cal-e{white-space:normal;padding:5px 7px;margin-bottom:6px}
.cal td.out .cal-e{background:var(--bg)}