/* ============================================================
   QUALIMS — Modal / Dialog system (стандарт)
   Заменяет браузерные alert/confirm/prompt на единые диалоги.
   Depends on tokens.css + shell.css. Sizes: sm/md/lg.
   Reuses .btn, .toast pattern.
   ============================================================ */

/* ── scrim + base dialog ─────────────────────────────────── */
/* z-index 1090 — выше Bootstrap-модалок (1055) и их backdrop (1050): чтобы
   appConfirm/appPrompt, вызванные из открытой bootstrap-модалки (напр. привязка
   сертификата в карточке реактива), были поверх неё, а не «за» ней. */
.mdl-scrim { position: fixed; inset: 0; z-index: 1090; background: rgba(15,23,42,.42); backdrop-filter: blur(2px);
    display: grid; place-items: center; padding: 28px; opacity: 0; visibility: hidden; transition: opacity var(--m-base), visibility var(--m-base); }
.mdl-scrim.open { opacity: 1; visibility: visible; }

.mdl { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
    box-shadow: var(--shadow-pop); display: flex; flex-direction: column; max-height: calc(100vh - 56px);
    transform: translateY(8px) scale(.985); opacity: 0; transition: transform var(--m-base) var(--ease), opacity var(--m-base); }
.mdl-scrim.open .mdl { transform: translateY(0) scale(1); opacity: 1; }
.mdl-sm { max-width: 420px; }
.mdl-md { max-width: 560px; }
.mdl-lg { max-width: 720px; }

/* ── header ──────────────────────────────────────────────── */
.mdl-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.mdl-head .ttl { min-width: 0; }
.mdl-head h2 { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdl-head .sub { font-size: var(--text-xs); color: var(--ink-3); margin-top: 2px; font-family: var(--font-mono); }
.mdl-head .sp { flex: 1; }
/* header nav chips (История / Файлы / QR) */
.mdl-nav { display: flex; align-items: center; gap: 4px; }
.mdl-nav .chip { display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: var(--text-sm); font-weight: 500;
    color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 11px; cursor: pointer; transition: border-color var(--m-fast), color var(--m-fast), background var(--m-fast); }
.mdl-nav .chip:hover { border-color: var(--accent-line); color: var(--accent-strong); background: var(--accent-soft); }
.mdl-nav .chip i { font-size: .9rem; }
.mdl-head .x { width: 34px; height: 34px; flex-shrink: 0; border: none; background: none; cursor: pointer; color: var(--ink-3);
    border-radius: var(--r-sm); display: grid; place-items: center; font-size: 1.1rem; transition: background var(--m-fast), color var(--m-fast); }
.mdl-head .x:hover { background: var(--surface-2); color: var(--ink); }

/* ── body (scrolls) ──────────────────────────────────────── */
.mdl-body { flex: 1; overflow-y: auto; padding: 20px 22px 24px; }

/* form sections */
.fsec + .fsec { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.fsec > .sh { display: flex; align-items: center; gap: 9px; font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3); margin-bottom: 15px; }
.fsec > .sh i { font-size: .95rem; color: var(--accent-strong); }
.fsec > .sh .opt { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink-3); }
/* collapsible optional section */
.fsec.collapsible > .sh { cursor: pointer; }
.fsec.collapsible > .sh .chev { margin-left: auto; font-size: .75rem; transition: transform var(--m-base); color: var(--ink-3); }
.fsec.collapsible.closed > .sh .chev { transform: rotate(-90deg); }
.fsec.collapsible.closed > .grid,
.fsec.collapsible.closed > .fgrid { display: none; }

/* field grid */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fgrid .col-3 { grid-template-columns: repeat(3, 1fr); }
.f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.f.span2 { grid-column: 1 / -1; }
.fgrid.col-3 .f.span2 { grid-column: auto; }
.f > label { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.f > label .req { color: var(--accent-strong); }
.f > label .hint { font-weight: 400; color: var(--ink-3); font-size: var(--text-xs); }
.f input[type=text], .f input[type=number], .f input[type=date], .f select, .f textarea {
    width: 100%; font-family: inherit; font-size: var(--text-base); color: var(--ink); background: var(--surface);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 11px; transition: border-color var(--m-fast), box-shadow var(--m-fast); }
.f input::placeholder, .f textarea::placeholder { color: var(--ink-3); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.f textarea { resize: vertical; min-height: 64px; line-height: 1.5; }
.f .unit-wrap { position: relative; display: flex; align-items: center; }
.f .unit-wrap input { padding-right: 42px; }
.f .unit-wrap .u { position: absolute; right: 11px; font-size: var(--text-sm); color: var(--ink-3); pointer-events: none; }
.f select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 32px; }

/* styled date input: keep native picker but normalize chrome */
.f input[type=date] { font-family: var(--font-mono); }
.f input[type=date]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.f input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* file row */
.filebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface-2);
    border: 1px dashed var(--line-strong); border-radius: var(--r-md); padding: 13px 15px; }
.filebar .info { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--ink-2); }
.filebar .info i { font-size: 1.1rem; color: var(--ink-3); }
.filebar .info .none { color: var(--ink-3); }

/* tags */
.tagbox { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.tagchip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-full); padding: 4px 6px 4px 11px; }
.tagchip .sw { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tagchip .rm { width: 17px; height: 17px; border: none; background: none; cursor: pointer; color: var(--ink-3); border-radius: 50%; display: grid; place-items: center; font-size: .7rem; }
.tagchip .rm:hover { background: var(--bad-soft); color: var(--bad); }
.tag-add { display: inline-flex; align-items: center; gap: 4px; }
.tag-add select { font-family: inherit; font-size: var(--text-sm); color: var(--ink-2); background: var(--surface); border: 1px dashed var(--line-strong);
    border-radius: var(--r-full); padding: 5px 10px; cursor: pointer; appearance: none; padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
.tag-add .addbtn { width: 28px; height: 28px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-strong);
    border-radius: var(--r-sm); cursor: pointer; display: grid; place-items: center; font-size: .9rem; }
.tag-add .addbtn:hover { background: var(--accent); color: var(--on-accent); }

/* consumable toggle bar */
.tgl-bar { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 13px 15px; }
.tgl { position: relative; width: 40px; height: 23px; flex-shrink: 0; cursor: pointer; }
.tgl input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tgl .track { position: absolute; inset: 0; background: var(--surface-3); border: 1px solid var(--line-strong); border-radius: 99px; transition: background var(--m-base), border-color var(--m-base); }
.tgl .knob { position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform var(--m-base); }
.tgl input:checked ~ .track { background: var(--accent); border-color: var(--accent); }
.tgl input:checked ~ .knob { transform: translateX(17px); }
.tgl-bar .lbl { min-width: 0; }
.tgl-bar .lbl .t { font-size: var(--text-base); font-weight: 600; color: var(--ink); }
.tgl-bar .lbl .d { font-size: var(--text-xs); color: var(--ink-3); margin-top: 1px; }

/* status segmented (consumable mode) */
.stseg { display: flex; gap: 7px; }
.stseg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: inherit;
    font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line-strong);
    border-radius: var(--r-sm); padding: 10px; cursor: pointer; transition: all var(--m-fast); }
.stseg button .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.stseg button:hover { border-color: var(--ink-3); }
.stseg button.on { color: #fff; border-color: transparent; }
.stseg button.on .dot { opacity: 1; background: #fff; }
.stseg button.on.s-ok   { background: var(--ok); }
.stseg button.on.s-low  { background: var(--warn); }
.stseg button.on.s-out  { background: var(--bad); }

/* mode visibility */
.mode-qty.hide, .mode-consum.hide { display: none; }

/* ── footer ──────────────────────────────────────────────── */
.mdl-foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.mdl-foot .sp { flex: 1; }
.mdl-foot .hintmsg { font-size: var(--text-xs); color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.mdl-foot .hintmsg i { color: var(--accent-strong); }

/* ── confirm dialog (sm) ─────────────────────────────────── */
.cfm { text-align: center; padding: 26px 24px 22px; }
.cfm .ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; margin: 0 auto 15px; }
.cfm .ic.warn { background: var(--warn-soft); color: var(--warn); }
.cfm .ic.bad  { background: var(--bad-soft); color: var(--bad); }
.cfm .ic.ok   { background: var(--accent-soft); color: var(--accent-strong); }
.cfm h3 { margin: 0 0 8px; font-size: var(--text-lg); font-weight: 700; color: var(--ink); }
.cfm p { margin: 0 0 22px; font-size: var(--text-base); color: var(--ink-2); line-height: 1.5; }
.cfm .row { display: flex; gap: 9px; justify-content: center; }

/* ── toast ───────────────────────────────────────────────── */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(14px); z-index: 1100;
    background: var(--ink); color: var(--surface); font-size: var(--text-sm); font-weight: 500; padding: 11px 17px; border-radius: var(--r-full);
    box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 9px; opacity: 0; visibility: hidden; transition: opacity var(--m-base), transform var(--m-base), visibility var(--m-base); max-width: 90vw; }
.toast.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.toast i { color: var(--accent-strong); font-size: 1rem; }
.toast.bad i { color: var(--bad); }

/* demo launcher backdrop */
.demo-pad { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

@media (max-width: 640px) {
    .fgrid, .fgrid.col-3 { grid-template-columns: 1fr; }
    .mdl-nav .chip span { display: none; }
}