/* AIRadar Cihaz Laboratuvarı — design layer 4 (user request 2026-10-01: device screens, scenes, menus and text boxes
   "estetik ve kullanışlı"). Loaded after v3.css; only presentation: the brand font served from here (Turkish letters
   included), one look for every form control, segmented tabs, a device icon in each screen's title, readable locked
   scenarios, a compact top bar. Simulator screens (waveforms, numerics, alarm colours and rates) are not touched.
   CSP: no inline styles; images only as data: URIs. */

/* ---------- brand font (Plus Jakarta Sans, OFL; fonts/OFL.txt) — before: not loaded, so every OS drew its own and
   ğ ş İ came from a fallback font */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
body, button, input, select, textarea { font-family: "Plus Jakarta Sans", system-ui, "Segoe UI", Roboto, sans-serif; }
body { -webkit-font-smoothing: antialiased; color: var(--v3-ink); word-spacing: .05em; }
.mono, .vmodes button, .num b, canvas { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

:root { --ux-field: #ffffff; --ux-field-line: #d5dde9; --ux-field-bg: #f7f9fc; --ux-radius: 12px; --ux-h: 42px;
  --ux-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* ---------- top bar: compact; the defibrillator profile and the guideline only where they apply (monitor lab) */
.top { padding: 8px 20px; gap: 10px; }
.top-r { gap: 8px; }
.top-r label { font-size: 0; gap: 0; }                                   /* the select itself says what it is */
.top-r select { font-size: 13px; height: 34px; padding: 0 30px 0 12px; appearance: none; -webkit-appearance: none;
  background: rgba(255, 255, 255, .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23cbd5e1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center / 14px no-repeat; }
body:not([data-screen=lab]) .top-r label:has(#profileSel), body:not([data-screen=lab]):not([data-screen=home]) .top-r label:has(#protocolSel) { display: none; }
.who:empty { display: none; }
.disclaimer { font-weight: 600; font-size: 12px; padding: 6px 20px; }
.langnote { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.langnote .ux-x { flex: none; border: 0; background: transparent; color: inherit; min-height: 0; padding: 2px 6px; font-size: 16px; line-height: 1; cursor: pointer; opacity: .7; }
.langnote .ux-x:hover { opacity: 1; box-shadow: none; }

/* ---------- device screens: title with the device's own icon, back as a pill */
.vhome > .row.between:first-child { align-items: center; margin: 0 0 4px; flex-wrap: nowrap; }
.vhome > .row.between:first-child h1 { margin: 0; min-width: 0; }
.vhome h1::before { background-size: 24px; }
.vhome > .row.between:first-child > button:last-child { flex: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 0 16px 0 12px;
  height: 38px; background: #fff; border: 1px solid var(--v3-line); font-weight: 700; color: var(--v3-ink); }
.vhome > .row.between:first-child > button:last-child::before { content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5L7 10l5.5 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5L7 10l5.5 5.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.vhome > .lead, .vhome > p.lead { margin: 10px 0 18px; line-height: 1.65; }

/* ---------- tabs: one segmented control instead of three loose buttons */
.vhome .modes { display: flex; gap: 4px; padding: 4px; margin: 14px 0; background: #e9eef6; border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.vhome .modes::-webkit-scrollbar { display: none; }
main.vhome .modes button { flex: 1 0 auto; min-height: 40px; border: 0; background: transparent; color: #475569; font-weight: 700; border-radius: 11px; padding: 0 16px; white-space: nowrap; box-shadow: none; }
main.vhome .modes button:hover:enabled { background: rgba(255, 255, 255, .6); box-shadow: none; }
main.vhome .modes button.on { background: #fff; color: var(--hc, var(--v3-acc)); box-shadow: 0 1px 3px rgba(11, 19, 36, .12), 0 4px 12px rgba(11, 19, 36, .06); }

/* ---------- the working panel */
.vhome .panel { padding: 18px 20px; border-radius: 18px; }
.vhome .panel > .row:first-child { gap: 10px; padding-bottom: 14px; margin: 0 0 14px; border-bottom: 1px solid #edf1f7; }
.vhome .panel > .row:first-child label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: #475569; }
.porder { position: relative; background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 12px 14px 12px 44px; margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: #3f2d06; }
.porder::before { content: ""; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; background: #b45309;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.pcsgrid { gap: 18px; }
.pcsimg canvas { border-radius: 14px; box-shadow: 0 10px 28px rgba(2, 6, 23, .22); }
.pcsimg .small { color: var(--v3-muted); }

/* ---------- form controls: one look everywhere (selects, numbers, text, ranges, checkboxes) */
.vhome select, .vhome input[type=number], .vhome input[type=text], .vhome input:not([type]), .vlab select, .vlab input[type=number], .vlab input[type=text], .home select, .home input[type=text], .home input:not([type]), .modal select, .lab select, .lab input[type=number] {
  height: var(--ux-h); min-width: 0; max-width: 100%; border: 1px solid var(--ux-field-line); border-radius: 10px; background-color: var(--ux-field);
  padding: 0 12px; font-size: 14px; color: var(--v3-ink); box-shadow: inset 0 1px 1px rgba(11, 19, 36, .03); transition: border-color .15s, box-shadow .15s; }
.vhome select, .vlab select, .home select, .modal select, .lab select { appearance: none; -webkit-appearance: none; padding-right: 34px; background: var(--ux-field) var(--ux-chev) right 10px center / 16px no-repeat; cursor: pointer; }
.vhome select:hover, .vhome input:hover, .lab select:hover { border-color: #aebbd0; }
.vhome select:focus, .vhome input:focus, .vlab select:focus, .vlab input:focus, .home select:focus, .home input:focus, .lab select:focus, .lab input:focus { outline: none; border-color: var(--hc, var(--v3-acc)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hc, var(--v3-acc)) 22%, transparent); }
.vhome input[type=checkbox], .vhome input[type=radio], .modal input[type=checkbox], .lab input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--hc, var(--v3-acc)); cursor: pointer; flex: none; margin: 0; }
.vhome input[type=range], .lab input[type=range] { width: 100%; height: 26px; accent-color: var(--hc, var(--v3-acc)); cursor: pointer; margin: 0; }
.vhome .panel > .row:first-child select { height: 38px; min-width: 64px; }

/* field groups (.vset / .e12form): a labelled card per control; a range shows its value next to the label */
.vset { gap: 10px; margin: 10px 0; }
.vset label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 12px; background: var(--ux-field-bg);
  border: 1px solid #edf1f7; border-radius: var(--ux-radius); font-size: 13px; }
.vset label > span:first-child { grid-column: 1; grid-row: 1; font-weight: 700; color: #475569; font-size: 12.5px; letter-spacing: .01em; }
.vset label > i { grid-column: 2; grid-row: 1; justify-self: end; font-style: normal; font-weight: 800; font-size: 12.5px; color: var(--hc, var(--v3-acc));
  background: #fff; border: 1px solid #e3e9f3; border-radius: 999px; padding: 1px 9px; font-variant-numeric: tabular-nums; }
.vset label > i:empty { display: none; }
.vset label > select, .vset label > input:not([type=checkbox]), .vset label > em { grid-column: 1 / -1; grid-row: 2; width: 100%; }
.vset label > input[type=checkbox] { grid-column: 2; grid-row: 1; justify-self: end; }
.vset label:focus-within { border-color: color-mix(in srgb, var(--hc, var(--v3-acc)) 45%, #edf1f7); background: #fff; }
.vset label.chg { outline: 2px solid var(--warn); outline-offset: 1px; }

/* ---------- buttons: one primary action per panel ("Kontrol et"), quiet secondary ones, chips for presets / windows */
.vhome button:not(.card), .home .panel button:not(.card), .modal .box button { min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--v3-line); background: #fff; color: var(--v3-ink); font-weight: 700; font-size: 14px; }
.vhome button:not(.card):hover:enabled { border-color: #bfd0ea; box-shadow: 0 3px 10px rgba(11, 19, 36, .07); }
.vhome button.warn, .modal .box button.warn, .vhome #vScEnd { background: var(--hc, var(--v3-acc)); border-color: transparent; color: #fff; padding: 0 22px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--hc, var(--v3-acc)) 32%, transparent); }
/* entry buttons to the scored tasks (cases.js, rad.js): tinted with the device colour */
.vhome button.primary { background: color-mix(in srgb, var(--hc, var(--v3-acc)) 9%, #fff); color: color-mix(in srgb, var(--hc, var(--v3-acc)) 85%, #000);
  border-color: color-mix(in srgb, var(--hc, var(--v3-acc)) 28%, #fff); }
.vhome button.primary:hover:enabled { background: color-mix(in srgb, var(--hc, var(--v3-acc)) 15%, #fff); }
.vhome button.warn:hover:enabled { filter: brightness(1.06); box-shadow: 0 8px 20px color-mix(in srgb, var(--hc, var(--v3-acc)) 40%, transparent); }
.vhome .row.ctwide button, #pcsWins button, .vhome [id$=Presets] button, .vhome [id$=Wins] button { min-height: 34px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px; background: #f3f6fb; border-color: #e3e9f3; }
.vhome .row.ctwide button.on, #pcsWins button.on, .vhome [id$=Presets] button.on, .vhome [id$=Wins] button.on, .vhome .row button.on:not(.modes button) { background: var(--v3-ink); border-color: var(--v3-ink); color: #fff; }
.modal .box button:not(:disabled):last-child { background: var(--v3-acc); border-color: var(--v3-acc); color: #fff; }
.modal .box button:disabled { background: #e8edf5; color: #94a3b8; border-color: #e8edf5; }

/* ---------- scenario cards: readable when locked, quieter review badges */
.vhome .card:not(.devcard) { padding: 16px 18px; }
.card:disabled { background: #fbfcfe; border-style: dashed; }
.card:disabled b { color: #64748b; padding-right: 22px; }
.card:disabled::after { top: 16px; right: 16px; background: #a3b1c6; }
.card .badge.auto { background: #eef3fb; color: #3b5b8c; font-weight: 700; }
.card > span { line-height: 1.55; }

/* value tables (blood gas, results): scroll inside their card on a phone instead of widening the page */
.vhome .panel table { display: block; max-width: 100%; overflow-x: auto; }
.vhome .panel table th, .vlab table th { text-transform: none; letter-spacing: 0; }   /* pH, PaCO2, SaO2: clinical abbreviations keep their case */

/* feedback after "Kontrol et" */
[id$=Fb]:not(:empty) { margin-top: 14px; border-radius: 12px; }
.vhome .muted.small, .vhome > p.small { line-height: 1.6; }
.refs summary { padding: 6px 0; }

/* ---------- care: inspection cards and their decision select */
.cdev { border-radius: 14px; padding: 14px 16px; gap: 8px; background: #fff; border-color: #e6ebf3; }
.cdev > b { font-size: 15px; margin-bottom: 2px; }
.citem { min-width: 0; line-height: 1.4; }
.citem > select { flex: 1 1 0; min-width: 0; width: 100%; }
.citem > span { flex: none; font-weight: 700; color: #475569; }

/* ---------- phones */
@media (max-width: 720px) {
  .top { padding: 8px 14px; } .top-r { width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .top-r::-webkit-scrollbar { display: none; }
  .top-r select { max-width: 200px; flex: none; }
  .disclaimer, .langnote { padding-left: 14px; padding-right: 14px; }
  .vhome { padding: 16px 14px 32px; }
  .vhome > .row.between:first-child > button:last-child { height: 34px; padding: 0 12px 0 8px; font-size: 13px; }
  .vhome .panel { padding: 14px; border-radius: 16px; }
  .vhome .modes button { padding: 0 12px; font-size: 13.5px; }
  .vset { grid-template-columns: 1fr !important; }
  .pcsimg canvas { max-height: 62vh; object-fit: contain; }
  .vhome button.warn { width: 100%; }
}
#vHome h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3v7c0 1-1 2-2 2H8c-3 0-5 3-5 6v2c0 1 1 1 2 1 3 0 6-2 6-6zm2 0v7c0 1 1 2 2 2h1c3 0 5 3 5 6v2c0 1-1 1-2 1-3 0-6-2-6-6z'/%3E%3C/svg%3E"); }
#vAbgScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2s7 7.6 7 13a7 7 0 01-14 0c0-5.4 7-13 7-13z'/%3E%3C/svg%3E"); }
#pHome h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 2h8v2h-1v3h2v11a3 3 0 01-3 3h-4a3 3 0 01-3-3V7h2V4H8zm3 2v3h2V4zm-2 6v2h6v-2z'/%3E%3C/svg%3E"); }
#cScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9.4-8 11-4.6-1.6-8-6-8-11V5zm-1 13l6-6-1.4-1.4L11 12.2 8.4 9.6 7 11z'/%3E%3C/svg%3E"); }
#e12Scr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 13h3l1.5-3 2 7 3-13 2.5 12 1.5-3h6.5' fill='none' stroke='white' stroke-width='2' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E"); }
#eegScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12c1.5-3 3-3 4.5 0s3 3 4.5 0 3-3 4.5 0 3 3 4.5 0 1.5-1.5 2 0' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); }
#pcsScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2h6v5l-1 2h-4L9 7zm-5 10a8 8 0 0116 0l-8 10z'/%3E%3C/svg%3E"); }
#navScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 2h2v4.1A6 6 0 0117.9 11H22v2h-4.1A6 6 0 0113 17.9V22h-2v-4.1A6 6 0 016.1 13H2v-2h4.1A6 6 0 0111 6.1zm1 6a4 4 0 100 8 4 4 0 000-8zm0 3a1 1 0 110 2 1 1 0 010-2z'/%3E%3C/svg%3E"); }
#ctScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 5a5 5 0 100 10 5 5 0 000-10z'/%3E%3C/svg%3E"); }
#mrScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h5v9a3 3 0 006 0V3h5v9a8 8 0 01-16 0zm2 2v2h1V5zm11 0v2h1V5z'/%3E%3C/svg%3E"); }
#usScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8a10 10 0 0114 0M7.5 11a6.5 6.5 0 019 0M10 14a3 3 0 014 0' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='18' r='2'/%3E%3C/svg%3E"); }
#petScr h1::before { background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' fill='none' stroke='white' stroke-width='1.8'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' fill='none' stroke='white' stroke-width='1.8' transform='rotate(60 12 12)'/%3E%3Cellipse cx='12' cy='12' rx='10' ry='4' fill='none' stroke='white' stroke-width='1.8' transform='rotate(120 12 12)'/%3E%3C/svg%3E"); }