/* Vizum Glass starter — drop-in look & feel for .vapp apps.
 * The SDK keeps --vizum-accent and .vizum-dark in sync with the desktop theme. */
:root {
    --vizum-accent: #6c5bd8;
    --vz-bg: #f7f6fb;
    --vz-ink: #1c1530;
    --vz-muted: #6b6486;
    --vz-card: #ffffff;
    --vz-border: rgba(120, 110, 160, 0.22);
}
.vizum-dark {
    --vz-bg: #17142a;
    --vz-ink: #eceaf6;
    --vz-muted: #a59fc4;
    --vz-card: #221d3e;
    --vz-border: rgba(180, 170, 220, 0.18);
}
html, body { margin: 0; height: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--vz-bg);
    color: var(--vz-ink);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
.vz-card {
    background: var(--vz-card);
    border: 1px solid var(--vz-border);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 6px 22px rgba(40, 25, 90, 0.10);
}
.vz-btn {
    background: var(--vizum-accent);
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 7px 14px;
    font-weight: 600;
    cursor: pointer;
}
.vz-btn:hover { filter: brightness(1.07); }
.vz-input {
    border: 1px solid var(--vz-border);
    border-radius: 9px;
    padding: 7px 10px;
    background: var(--vz-card);
    color: var(--vz-ink);
    width: 100%;
    box-sizing: border-box;
}
.vz-muted { color: var(--vz-muted); }

/* ---- Vizum.help — standard in-app documentation overlay ---- */
.vz-help-overlay {
    position: fixed; inset: 0; z-index: 999;
    background: rgba(12, 9, 28, 0.5);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(3px);
}
.vz-help {
    background: var(--vz-bg); color: var(--vz-ink);
    border: 1px solid var(--vz-border); border-radius: 16px;
    width: min(560px, 92vw); max-height: 84vh; overflow: auto;
    padding: 18px 22px 20px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.4);
    font-size: 13px; line-height: 1.45;
}
.vz-help__head { display: flex; align-items: center; justify-content: space-between; }
.vz-help h2 { margin: 0; font-size: 17px; letter-spacing: -0.3px; }
.vz-help h3 {
    margin: 16px 0 6px; font-size: 11px; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--vizum-accent); font-weight: 800;
}
.vz-help p { margin: 0 0 6px; color: var(--vz-muted); }
.vz-help__row {
    display: flex; gap: 10px; align-items: baseline;
    padding: 4px 0; border-bottom: 1px dashed var(--vz-border);
}
.vz-help__row:last-child { border-bottom: 0; }
.vz-help__row code {
    flex: none; max-width: 46%; font-size: 11.5px;
    background: var(--vz-card); border: 1px solid var(--vz-border);
    border-radius: 6px; padding: 1px 7px; white-space: pre-wrap;
}
.vz-help__row span { color: var(--vz-muted); font-size: 12px; }
.vz-help__close {
    border: 1px solid var(--vz-border); background: var(--vz-card); color: var(--vz-ink);
    border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: 13px;
}
.vz-help-btn {
    position: fixed; right: 12px; bottom: 12px; z-index: 998;
    width: 30px; height: 30px; border-radius: 50%;
    border: 1px solid var(--vz-border); background: var(--vz-card); color: var(--vz-muted);
    font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.vz-help-btn:hover { color: var(--vizum-accent); border-color: var(--vizum-accent); }

/* ---- Vizum UI Kit (SDK v2) ---- */
.vui-overlay {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(12, 9, 28, 0.5); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center;
}
.vui-dialog {
    background: var(--vz-bg); color: var(--vz-ink);
    border: 1px solid var(--vz-border); border-radius: 16px;
    width: min(420px, 92vw); max-height: 86vh; overflow: auto;
    padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.4); font-size: 13px;
}
.vui-dialog__title { margin: 0; font-size: 15px; }
.vui-dialog__body { margin: 0; color: var(--vz-muted); }
.vui-dialog__acts { display: flex; gap: 8px; justify-content: flex-end; }
.vui-btn {
    border: 1px solid var(--vz-border); background: var(--vz-card); color: var(--vz-ink);
    border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.vui-btn--primary { background: var(--vizum-accent); color: #fff; border-color: transparent; }
.vui-input {
    border: 1px solid var(--vz-border); border-radius: 9px; padding: 8px 11px;
    background: var(--vz-card); color: var(--vz-ink); font-size: 13px;
    width: 100%; box-sizing: border-box;
}
.vui-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vui-table th {
    font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px;
    color: var(--vz-muted); text-align: left; padding: 6px 8px;
    border-bottom: 1px solid var(--vz-border); cursor: pointer; user-select: none;
}
.vui-table td { padding: 7px 8px; border-bottom: 1px solid var(--vz-border); }
.vui-table__row--link { cursor: pointer; }
.vui-table__row--link:hover td { background: rgba(125, 110, 224, 0.07); }
.vui-chart { width: 100%; height: 120px; display: block; }
.vui-chartwrap { display: flex; flex-direction: column; gap: 6px; }
.vui-chartwrap svg { width: 100%; height: auto; display: block; }
.vui-donut { display: flex; gap: 12px; align-items: center; }
.vui-donut svg { width: 96px; height: 96px; flex: none; }
.vui-donut__legend { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--vz-muted); }
.vui-donut__legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.vui-picker { display: flex; flex-direction: column; gap: 6px; }
.vui-picker__list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.vui-picker__item {
    border: 1px solid var(--vz-border); border-radius: 9px; padding: 7px 10px;
    cursor: pointer; background: var(--vz-card); font-size: 12.5px;
}
.vui-picker__item:hover { border-color: var(--vizum-accent); }
.vui-picker__item small { display: block; color: var(--vz-muted); font-size: 10.5px; }
.vui-picker__none { color: var(--vz-muted); font-size: 12px; padding: 6px 2px; }
.vui-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.vui-tab {
    border: 1px solid var(--vz-border); background: var(--vz-card); color: var(--vz-ink);
    border-radius: 999px; padding: 4px 13px; font-size: 12px; cursor: pointer;
}
.vui-tab--on { background: var(--vizum-accent); border-color: transparent; color: #fff; font-weight: 700; }
.vui-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: var(--vz-muted); gap: 6px; font-size: 12.5px; text-align: center; padding: 36px 12px;
}
.vui-empty__icon { font-size: 34px; }
.vui-empty b { color: var(--vz-ink); }

/* ============ VUI.dataGrid (SDK v3) ============ */
.vui-grid{display:flex;flex-direction:column;gap:8px;min-height:0}
.vui-grid__bar{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.vui-grid__search{flex:1;min-width:140px;border:1px solid var(--vz-border);border-radius:9px;
  padding:7px 11px;background:var(--vz-card);color:var(--vz-ink);font-size:12.5px}
.vui-grid__spacer{flex:1}
.vui-grid__tool,.vui-grid__act,.vui-grid__chip{border:1px solid var(--vz-border);
  background:var(--vz-card);color:var(--vz-ink);border-radius:8px;padding:6px 11px;
  font-size:12px;cursor:pointer}
.vui-grid__tool:hover,.vui-grid__act:hover{border-color:var(--vizum-accent)}
.vui-grid__act:disabled{opacity:.45;cursor:default}
.vui-grid__chip{background:rgba(108,91,216,.14);border-color:var(--vizum-accent)}
.vui-grid__wrap{overflow:auto;border:1px solid var(--vz-border);border-radius:12px;min-height:0}
.vui-grid__table{width:100%;border-collapse:collapse;font-size:12.5px}
.vui-grid__table th,.vui-grid__table td{padding:7px 10px;text-align:left;
  border-bottom:1px solid var(--vz-border);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:260px}
.vui-grid__table thead th{position:sticky;top:0;background:var(--vz-card);
  cursor:pointer;font-size:11px;text-transform:uppercase;letter-spacing:.4px;
  user-select:none;z-index:1}
.vui-grid__filters th{position:sticky;top:30px;background:var(--vz-card);padding:3px 6px}
.vui-grid__filters input{width:100%;box-sizing:border-box;border:1px solid var(--vz-border);
  border-radius:6px;padding:3px 7px;font-size:11px;background:var(--vz-bg);color:var(--vz-ink)}
.vui-grid__table tbody tr:hover{background:rgba(108,91,216,.06)}
.vui-grid__chk{width:28px}
.vui-grid__num{text-align:right;font-variant-numeric:tabular-nums}
.vui-grid__editable{cursor:cell}
.vui-grid__edit{width:100%;box-sizing:border-box;border:1px solid var(--vizum-accent);
  border-radius:5px;padding:3px 6px;font-size:12.5px;background:var(--vz-bg);color:var(--vz-ink)}
.vui-grid__table tfoot td{font-weight:800;border-top:2px solid var(--vz-border);background:var(--vz-card)}
.vui-grid__foot{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.vui-grid__count{font-size:11.5px;color:var(--vz-muted);margin-right:auto}
.vui-grid__group{display:flex;align-items:center;gap:14px;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--vz-border);font-size:13px}
.vui-grid__group:hover{background:rgba(108,91,216,.07)}
.vui-grid__group span{color:var(--vz-muted);font-size:11.5px}
.vui-grid__colmenu{display:flex;flex-direction:column;gap:7px;font-size:13px}

/* ============ VUI.importMapper (SDK v3) ============ */
.vui-mapper{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow-y:auto;min-width:380px}
.vui-mapper__meta{font-size:12px;color:var(--vz-muted)}
.vui-mapper__grid{display:flex;flex-direction:column;gap:7px}
.vui-mapper__row{display:flex;align-items:center;gap:10px;justify-content:space-between}
.vui-mapper__row b{font-size:12.5px}
.vui-mapper__row small{color:var(--vz-muted);font-size:10.5px;display:block}
.vui-mapper__row select{border:1px solid var(--vz-border);border-radius:8px;padding:6px 9px;
  background:var(--vz-card);color:var(--vz-ink);font-size:12px;max-width:230px}
.vui-mapper__status{font-size:12px;color:var(--vizum-accent);font-weight:700;min-height:16px}

/* ---- declarative form (SDK v4) ---- */
.vui-form{display:grid;gap:14px 16px}
.vui-form--cols1{grid-template-columns:1fr}
.vui-form--cols2{grid-template-columns:1fr 1fr}
.vui-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.vui-field--full{grid-column:1/-1}
.vui-field__label{font-size:11px;font-weight:700;color:var(--vz-muted);
  text-transform:uppercase;letter-spacing:.5px}
.vui-field__req{color:#e0564f}
.vui-field__help{font-size:11px;color:var(--vz-muted);line-height:1.35}
.vui-field__err{font-size:11px;color:#e0564f;font-weight:600;min-height:0;line-height:1.3}
.vui-field--error .vui-input,.vui-field--error .vui-m2o{border-color:#e0564f}
.vui-textarea{resize:vertical;min-height:64px;font-family:inherit;line-height:1.4}
.vui-select{appearance:none;cursor:pointer}
.vui-field__cbx{display:flex;align-items:center;gap:9px;font-size:13px;cursor:pointer;
  color:var(--vz-ink);padding-top:2px}
.vui-check{width:16px;height:16px;accent-color:var(--vizum-accent);cursor:pointer;flex:none}
.vui-m2o{text-align:left;cursor:pointer;display:flex;align-items:center;min-height:35px}
.vui-m2o--empty{color:var(--vz-muted)}
.vui-form__acts{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:2px}
.vui-btn--busy{opacity:.6;cursor:progress;position:relative}
.vui-btn--busy::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;
  margin-top:-6px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;
  animation:vui-spin .7s linear infinite}
@keyframes vui-spin{to{transform:rotate(360deg)}}

/* ---- pipeline / kanban board (SDK v4) ---- */
.vui-pipe{display:flex;flex-direction:column;gap:10px;min-height:0}
.vui-pipe__bar{display:flex;gap:8px;align-items:center}
.vui-pipe__board{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;align-items:flex-start}
.vui-pipe__col{flex:0 0 248px;background:var(--vz-soft,rgba(125,110,224,.05));
  border:1px solid var(--vz-border);border-radius:12px;display:flex;flex-direction:column;
  max-height:100%;transition:background .12s,border-color .12s}
.vui-pipe__col--over{border-color:var(--vizum-accent);background:rgba(108,91,216,.1)}
.vui-pipe__col-h{display:flex;align-items:center;gap:7px;padding:10px 12px;
  border-bottom:1px solid var(--vz-border);flex-wrap:wrap}
.vui-pipe__col-n{font-size:12px;font-weight:800;color:var(--vz-ink);
  text-transform:uppercase;letter-spacing:.4px}
.vui-pipe__col-c{font-size:11px;font-weight:700;color:#fff;background:var(--vizum-accent);
  border-radius:20px;padding:1px 8px;min-width:14px;text-align:center}
.vui-pipe__col-s{font-size:11px;font-weight:700;color:var(--vizum-accent);margin-left:auto}
.vui-pipe__col-b{display:flex;flex-direction:column;gap:8px;padding:10px;overflow-y:auto;min-height:54px}
.vui-pipe__col-e{color:var(--vz-muted);font-size:18px;text-align:center;padding:6px 0;opacity:.5}
.vui-pipe__card-w{cursor:grab;user-select:none}
.vui-pipe__card-w:active{cursor:grabbing}
.vui-pipe__card{background:var(--vz-card);border:1px solid var(--vz-border);border-radius:10px;
  padding:10px 12px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:box-shadow .12s,transform .08s}
.vui-pipe__card-w:hover .vui-pipe__card{box-shadow:0 4px 14px rgba(60,50,120,.14);transform:translateY(-1px)}
.vui-pipe__card--drag{opacity:.45}
.vui-pipe__card-t{font-size:13px;font-weight:600;color:var(--vz-ink);line-height:1.3}
.vui-pipe__card-m{font-size:12px;font-weight:700;color:var(--vizum-accent);margin-top:4px}

/* ---- signature pad (SDK v4) ---- */
.vui-sig{display:inline-flex;flex-direction:column;gap:6px}
.vui-sig__c{border:1.5px dashed var(--vz-border);border-radius:10px;background:#fff;
  touch-action:none;cursor:crosshair;transition:border-color .12s}
.vui-sig--inked .vui-sig__c{border-style:solid;border-color:var(--vizum-accent)}
.vui-sig__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vui-sig__hint{font-size:11px;color:var(--vz-muted);text-transform:uppercase;letter-spacing:.5px}
.vui-sig__clear{border:1px solid var(--vz-border);background:var(--vz-card);color:var(--vz-ink);
  border-radius:8px;padding:4px 12px;font-size:12px;font-weight:600;cursor:pointer}
.vui-sig__clear:hover{border-color:var(--vizum-accent);color:var(--vizum-accent)}

/* ---- multi-step wizard (SDK v4) ---- */
.vui-wiz{display:flex;flex-direction:column;gap:18px}
.vui-wiz__rail{display:flex;align-items:center;gap:6px}
.vui-wiz__step{display:flex;align-items:center;gap:8px;white-space:nowrap}
.vui-wiz__step--done{cursor:pointer}
.vui-wiz__dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;flex:none;
  border:1.5px solid var(--vz-border);color:var(--vz-muted);background:var(--vz-card)}
.vui-wiz__dot--on{background:var(--vizum-accent);border-color:transparent;color:#fff}
.vui-wiz__dot--done{background:rgba(108,91,216,.15);border-color:var(--vizum-accent);color:var(--vizum-accent)}
.vui-wiz__t{font-size:12.5px;font-weight:600;color:var(--vz-muted)}
.vui-wiz__step--on .vui-wiz__t{color:var(--vz-ink)}
.vui-wiz__bar{flex:1;height:2px;background:var(--vz-border);min-width:18px;border-radius:2px}
.vui-wiz__body{min-height:40px}
.vui-wiz__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--vz-border);padding-top:14px}
.vui-wiz__acts{display:flex;gap:8px;margin-left:auto}