/* ============================================================
   "Termine verwalten" (v0.1.81) — name-chip menu, open-request alert, the
   management page, its dialogs. Spec: approved drafts
   ui-review/Draft-New/pages/09a–09d + 09*-option2 + 09e (2026-10-06).
   Loaded after style.css. Every class is vm-prefixed; buttons and inputs
   override the global `button` pill and `input{width:100%}` rules explicitly —
   the global `button:hover:not(:disabled)` (0,2,1) must lose to these.
   ============================================================ */

/* ---------- name chip with menu (dashboard + Termine verwalten) ---------- */
.vm-chip-wrap{position:relative}
button.vm-chip-toggle,button.vm-chip-toggle:hover:not(:disabled),button.vm-chip-toggle:focus{
  display:flex;align-items:center;gap:12px;background:transparent;border:none;box-shadow:none;
  padding:0;margin:0;color:inherit;font:inherit;text-align:start;border-radius:999px;cursor:pointer}
.vm-chip-toggle .vm-caret{width:16px;height:16px;color:var(--muted);flex-shrink:0;transition:transform .15s}
.vm-chip-wrap.open .vm-caret{transform:rotate(180deg)}
.vm-chip-wrap.open .user-chip{border-color:#b9cde0;box-shadow:0 0 0 3px rgba(0,45,80,.08),0 4px 14px rgba(0,45,80,.06)}
.avatar{position:relative}
.vm-count{position:absolute;top:-4px;inset-inline-end:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--red);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid #fff;letter-spacing:0}
.vm-count[hidden]{display:none}
.vm-menu{position:absolute;inset-inline-end:0;top:calc(100% + 8px);min-width:300px;z-index:30;background:#fff;
  border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 40px rgba(0,45,80,.16);padding:8px}
.vm-menu[hidden]{display:none}
a.vm-menu-item{display:flex;align-items:flex-start;gap:12px;padding:11px 12px;border-radius:12px;
  text-decoration:none;color:var(--navy);font-weight:400}
a.vm-menu-item:hover,a.vm-menu-item:focus{background:#f3f8fc;outline:none}
.vm-menu-item .vm-mi-ico{width:34px;height:34px;border-radius:11px;background:var(--blue-bg);color:var(--navy);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vm-menu-item .vm-mi-ico svg{width:17px;height:17px}
.vm-menu-item b{display:block;font-size:14px;font-weight:700}
.vm-menu-item small{display:block;font-size:12px;color:var(--muted);line-height:1.4;margin-top:1px}
.vm-mi-count{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;font-weight:700;
  color:var(--red);background:rgba(145,24,24,.08);border-radius:999px;padding:2px 9px}
.vm-mi-count svg{width:13px;height:13px;flex-shrink:0}
.vm-mi-count[hidden]{display:none}

/* ---------- dashboard alert (delete-role holders only) ---------- */
.vm-alert{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:14px 18px;border-radius:16px;
  background:#fff;border:1px solid rgba(145,24,24,.25);box-shadow:0 6px 18px rgba(145,24,24,.08)}
.vm-alert[hidden]{display:none}
.vm-alert .vm-a-ico{width:40px;height:40px;border-radius:13px;background:rgba(145,24,24,.1);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vm-alert .vm-a-ico svg{width:20px;height:20px}
.vm-alert .vm-a-txt{flex:1;min-width:0;font-size:13.5px;color:var(--navy);line-height:1.45}
.vm-alert .vm-a-txt b{display:block;font-size:15px}
.vm-alert .vm-urg{color:var(--red);font-weight:700}
a.vm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;
  background:var(--red);color:#fff;font-size:14px;font-weight:600;text-decoration:none;flex-shrink:0;white-space:nowrap}
a.vm-btn:hover{background:var(--navy);color:#fff}
.vm-showall{display:block;padding:12px 22px 2px;text-align:center;font-size:13px;font-weight:600;color:var(--navy);text-decoration:none}
.vm-showall:hover{text-decoration:underline}

/* status words beyond the approved .tag set */
.tag.vm-plan{color:#51708c}
.tag.vm-open{color:#8a5a00}
.tag.vm-open::before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid #c08a1a;display:inline-block}

/* ---------- the page ---------- */
.wrap.vm-wrap{max-width:1340px}
a.vm-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--navy);
  text-decoration:none;margin-bottom:10px}
.vm-back svg{width:15px;height:15px}
[dir="rtl"] .vm-back svg{transform:scaleX(-1)}
.vm-note{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:14px;
  font-size:13px;line-height:1.5;background:#f3f8fc;border:1px solid var(--divider);color:var(--navy)}
.vm-note svg{width:18px;height:18px;flex-shrink:0;margin-top:1px}
.vm-note b{display:block;font-size:13.5px;margin-bottom:2px}
.vm-msg{margin:0 0 14px}
.vm-card{background:var(--panel);border:1px solid var(--border);border-radius:18px;box-shadow:0 6px 18px rgba(0,45,80,.06);
  overflow:hidden;margin-bottom:18px}
.vm-card-head{display:flex;align-items:center;gap:11px;padding:16px 22px;border-bottom:1px solid var(--divider)}
.vm-card-head .vm-c-ico{width:36px;height:36px;border-radius:12px;background:rgba(145,24,24,.1);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vm-card-head .vm-c-ico svg{width:18px;height:18px}
.vm-card-head h2{font-size:16px;font-weight:700;color:var(--navy);margin:0}
.vm-card-head .vm-c-sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.vm-card-head .vm-c-right{margin-inline-start:auto;font-size:11.5px;font-weight:700;color:var(--muted)}
.vm-req-card{border-color:rgba(145,24,24,.25)}

/* open-requests list */
.vm-rq{display:grid;grid-template-columns:1.3fr 1fr 1.7fr 1fr auto;gap:14px;align-items:center;
  padding:12px 22px;border-bottom:1px solid var(--divider);font-size:13px;color:var(--navy)}
.vm-rq:last-child{border-bottom:none}
.vm-rq small{display:block;color:var(--muted);font-size:12px}
.vm-rq .vm-age{font-weight:700}
.vm-rq .vm-age.urgent{color:var(--red)}

/* filters */
.vm-toggles{display:flex;gap:8px;flex-wrap:wrap;padding:12px 22px 0}
button.vm-ftog,button.vm-ftog:hover:not(:disabled){display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  margin:0;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;background:#fff;color:var(--navy);
  border:1.5px solid #c3d4e3;box-shadow:none}
button.vm-ftog.on,button.vm-ftog.on:hover:not(:disabled){background:var(--red);border-color:var(--red);color:#fff}
.vm-ftog svg{width:15px;height:15px;flex-shrink:0}
.vm-filters{display:grid;grid-template-columns:1.6fr 1fr 1fr .9fr 1fr auto;gap:12px;align-items:end;
  padding:14px 22px 16px;border-bottom:1px solid var(--divider);background:#fbfdff}
.vm-filters label{font-size:11px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 4px}
.vm-filters input,.vm-filters select{width:100%;height:40px;padding:0 12px;font-size:13.5px;border-radius:11px;
  background:#fff;border:1px solid #c3d4e3;color:var(--text);font-family:inherit}
.vm-filters select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,45,80,.14)}
button.vm-ghost,button.vm-ghost:hover:not(:disabled){background:transparent;color:var(--muted);border:none;box-shadow:none;
  height:40px;padding:0 12px;margin:0;font-size:13px;font-weight:600}
button.vm-ghost:hover:not(:disabled){color:var(--red)}

/* table */
.vm-tbl .vm-thead,.vm-tbl .vm-row{display:grid;
  grid-template-columns:84px 1.3fr 1fr 140px 1fr .8fr 80px 186px 206px;
  gap:12px;align-items:center;padding:11px 22px}
/* ONE grid for the header and every row (2026-10-07, same fix as the dashboard). As separate grids,
   the flexible columns sized themselves from each row's own text, so on 1280 px screens the headings
   drifted up to 17 px from their values. With subgrid the designed widths are measured once for the
   whole table. The first and last track carry the rows' 22 px side padding (subgrid adds it to the
   edge tracks), so their content keeps exactly 84 px / 206px. Desktop only; phones keep the card
   layout below. */
@media (min-width:721px){
  .vm-tbl{display:grid;grid-template-columns:calc(84px + 22px) 1.3fr 1fr 140px 1fr .8fr 80px 186px calc(206px + 22px);
    column-gap:12px}
  .vm-tbl .vm-thead,.vm-tbl #rows,.vm-tbl .vm-row{grid-column:1 / -1;display:grid;grid-template-columns:subgrid}
  .vm-tbl .vm-empty{grid-column:1 / -1}
}
.vm-tbl .vm-thead{font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);background:#f7fafd;border-bottom:1px solid var(--divider)}
.vm-tbl .vm-thead span:last-child{text-align:end}
.vm-tbl .vm-row{border-bottom:1px solid var(--divider);font-size:13px;color:var(--navy)}
.vm-tbl .vm-row:last-child{border-bottom:none}
.vm-row.is-live{background:linear-gradient(90deg,rgba(30,94,58,.06),transparent 40%)}
.vm-row.has-req{background:linear-gradient(90deg,rgba(192,138,26,.07),transparent 45%)}
.vm-row.has-req.urgent{background:linear-gradient(90deg,rgba(145,24,24,.07),transparent 45%)}
.vm-when{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1.35}
.vm-when b{display:block;font-weight:600;font-size:12.5px;color:var(--navy)}
.vm-name{font-weight:600;color:var(--navy);line-height:1.3;overflow-wrap:anywhere}
.vm-name.none{color:#93a9bd;font-style:italic;font-weight:400}
.vm-doc{font-size:12.5px;line-height:1.35}
.vm-mine{display:inline-block;margin-top:3px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--navy);background:var(--blue-bg);border-radius:6px;padding:1px 6px}
.vm-st{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.vm-st small{font-size:11px;color:var(--muted)}
.vm-consent{font-size:12px;color:var(--muted);line-height:1.35;white-space:nowrap}
.vm-consent b{display:block;color:var(--navy);font-weight:600}
.vm-del{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.vm-mid{display:flex;align-items:center;gap:6px;min-width:0}
.vm-mid code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;color:var(--navy);
  background:#f3f8fc;border:1px solid var(--divider);border-radius:7px;padding:3px 6px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
button.vm-icon,button.vm-icon:hover:not(:disabled){width:26px;height:26px;border-radius:8px;border:none;background:transparent;
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;box-shadow:none;flex-shrink:0}
button.vm-icon:hover:not(:disabled){background:#eef4fa;color:var(--navy)}
.vm-icon svg{width:14px;height:14px}
.vm-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.vm-tbl.staff .vm-actions{flex-direction:column;align-items:flex-end;gap:6px}
button.vm-act,button.vm-act:hover:not(:disabled){font-family:inherit;font-size:12px;font-weight:600;height:32px;padding:0 12px;
  margin:0;border-radius:999px;display:inline-flex;align-items:center;gap:6px;background:#fff;white-space:nowrap;box-shadow:none}
.vm-act svg{width:14px;height:14px;flex-shrink:0}
button.vm-act.end{color:var(--navy);border:1.5px solid #b9cde0}
button.vm-act.end:hover:not(:disabled){border-color:var(--navy);background:#fff;color:var(--navy)}
button.vm-act.del{color:var(--red);border:1.5px solid rgba(145,24,24,.35)}
button.vm-act.del:hover:not(:disabled){background:var(--red);color:#fff;border-color:var(--red)}
button.vm-act.ask{color:var(--navy);border:1.5px solid var(--navy)}
button.vm-act.ask:hover:not(:disabled){background:var(--navy);color:#fff}
.vm-reqtag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.03em;
  color:#8a5a00;background:rgba(192,138,26,.12);border-radius:999px;padding:3px 9px;white-space:normal;max-width:100%}
.vm-reqtag.urgent{color:var(--red);background:rgba(145,24,24,.1)}
.vm-reqtag.rejected{color:var(--muted);background:#eef2f6}
.vm-reqtag svg{width:12px;height:12px;flex-shrink:0}
.vm-st .vm-reqtag{margin-top:4px}
.vm-reqstate{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.vm-reqstate small{font-size:11px;color:var(--muted)}
.vm-empty{padding:26px 22px;text-align:center;color:var(--muted);font-size:13.5px}
.vm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 22px;
  border-top:1px solid var(--divider);font-size:12.5px;color:var(--muted)}
.vm-pager{display:flex;gap:6px}

/* ---------- dialogs ---------- */
.vm-scrim{position:fixed;inset:0;background:rgba(0,30,55,.42);backdrop-filter:blur(2px);z-index:60;
  display:flex;align-items:center;justify-content:center;padding:20px}
.vm-scrim[hidden]{display:none}
.vm-dialog{width:100%;max-width:560px;background:#fff;border-radius:20px;box-shadow:0 24px 60px rgba(0,30,55,.35);
  overflow:auto;max-height:calc(100vh - 40px)}
.vm-dialog.wide{max-width:640px}
.vm-dlg-head{display:flex;gap:12px;align-items:center;padding:20px 24px 14px}
.vm-dlg-head .vm-d-ico{width:40px;height:40px;border-radius:13px;background:rgba(145,24,24,.1);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vm-dlg-head .vm-d-ico.navy{background:var(--blue-bg);color:var(--navy)}
.vm-dlg-head .vm-d-ico svg{width:20px;height:20px}
.vm-dlg-head h2{font-size:18px;font-weight:700;color:var(--navy);margin:0}
.vm-dlg-body{padding:0 24px 8px}
.vm-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:13px;background:#f7fafd;
  border:1px solid var(--divider);border-radius:12px;padding:12px 14px;margin:0 0 16px}
.vm-facts dt{color:var(--muted)}
.vm-facts dd{color:var(--navy);font-weight:600;margin:0;overflow-wrap:anywhere}
.vm-facts code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.vm-reqfacts{background:#fffaf0;border:1px solid rgba(192,138,26,.3);border-radius:12px;padding:12px 14px;margin:0 0 16px;
  font-size:13px;color:#5a3d00}
.vm-reqfacts .vm-rf-h{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;color:#8a5a00}
.vm-q{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:4px 0 8px}
label.vm-radio{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:12px;
  margin:0 0 8px;font-size:13.5px;color:var(--navy);cursor:pointer;font-weight:500}
label.vm-radio:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,45,80,.08)}
label.vm-radio input,label.vm-pill input{width:auto;margin:3px 0 0;accent-color:var(--navy);flex-shrink:0}
label.vm-radio small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.vm-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
label.vm-pill{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border-radius:999px;margin:0;
  border:1.5px solid #c3d4e3;font-size:13px;color:var(--navy);cursor:pointer;background:#fff;font-weight:500}
label.vm-pill input{margin:0}
label.vm-pill:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,45,80,.08);font-weight:600}
.vm-dlg-body .vm-note{margin:12px 0 0}
.vm-cons{font-size:12.5px;color:var(--muted);margin:12px 0 0;padding-inline-start:18px}
.vm-cons li{margin-bottom:3px}
.vm-dlg-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 24px 20px;margin-top:10px;border-top:1px solid var(--divider);
  flex-wrap:wrap}
.vm-dlg-foot.split{justify-content:space-between}
.vm-dlg-foot .vm-grp{display:flex;gap:10px}
.vm-dlg-foot button{margin:0;white-space:nowrap}
button.vm-reject,button.vm-reject:hover:not(:disabled){background:#fff;color:var(--red);border:1.5px solid rgba(145,24,24,.4);box-shadow:none}
button.vm-reject:hover:not(:disabled){background:rgba(145,24,24,.06)}
.vm-foot-hint{font-size:12px;color:var(--muted);padding:0 24px 18px;margin-top:-6px}
.vm-dlg-err{margin:12px 0 0}

/* ---------- narrower screens ---------- */
@media (max-width:1100px){
  .vm-filters{grid-template-columns:1fr 1fr 1fr}
  .vm-filters .vm-search{grid-column:1 / -1}
  .vm-rq{grid-template-columns:1fr 1fr;row-gap:8px}
}
@media (max-width:720px){
  .vm-chip-wrap{width:100%}
  button.vm-chip-toggle,button.vm-chip-toggle:hover:not(:disabled){flex:1;min-width:0;gap:10px}
  .vm-chip-toggle .u-meta{min-width:0;overflow:hidden}
  .vm-chip-toggle .u-name{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
  .vm-menu{inset-inline:0;min-width:0}
  .vm-alert{flex-wrap:wrap}
  .vm-alert a.vm-btn{width:100%}
  .vm-rq{grid-template-columns:1fr;padding:14px}
  .vm-toggles{padding:12px 14px 0}
  .vm-filters{grid-template-columns:1fr 1fr;padding:14px}
  .vm-tbl .vm-thead{display:none}
  .vm-tbl .vm-row{grid-template-columns:1fr auto;row-gap:6px;padding:14px}
  .vm-tbl .vm-row > *{grid-column:1 / -1}
  .vm-tbl .vm-row .vm-name{grid-column:1;order:-2;font-size:14px}
  .vm-tbl .vm-row .vm-st{grid-column:2;order:-1;justify-self:end;align-items:flex-end}
  .vm-tbl .vm-row [data-label]::before{content:attr(data-label);display:block;font-size:10px;font-weight:800;
    letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:1px}
  .vm-tbl .vm-row .vm-actions,.vm-tbl.staff .vm-row .vm-actions{justify-content:flex-start;align-items:flex-start;
    flex-direction:row;margin-top:4px}
  .vm-foot{flex-direction:column;align-items:flex-start}
  .vm-dlg-foot,.vm-dlg-foot.split{flex-direction:column-reverse}
  .vm-dlg-foot .vm-grp{flex-direction:column-reverse}
  .vm-dlg-foot button{width:100%}
}

/* author display rules must never defeat the hidden attribute */
.vm-wrap[hidden],.vm-card[hidden],.vm-toggles[hidden],.vm-note[hidden]{display:none}

/* plain pill buttons in the request list and the dialogs carry an icon: the global
   `button` rule gives them no layout for it, and an unsized SVG blew them up into
   circles (found on the first real render, 2026-10-06) */
.vm-rq button,.vm-dlg-foot button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;margin:0;white-space:nowrap}
.vm-rq button svg,.vm-dlg-foot button svg{width:16px;height:16px;flex-shrink:0}
.vm-dlg-foot button.sec{height:42px}