/* ibots: the old IBOTS.Net screens (same windows, same places for every box and button), drawn in a modern,
   flat style in the Flyking colours (flyking.in: dark blue #0054a3, logo blue #0093dd, logo red #da251d).
   Bootstrap 5.3 underneath; this file only adds the ibots look. See verify/look/brand-colours.md */
/* Roboto (Apache licence) is kept with the app, so every PC and phone shows the same letters */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/fonts/roboto-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/fonts/roboto-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/fonts/roboto-latin-700-normal.woff2") format("woff2"); }
:root {
  --fk-blue: #0054a3; --fk-blue-dark: #003f7d; --fk-navy: #0b2545; --fk-sky: #0093dd; --fk-red: #da251d; --fk-red-dark: #b81e17;
  --fk-blue-50: #eef5fc; --fk-blue-100: #d9e9f8; --fk-sky-200: #a8d8f3;
  --ink: #1b2533; --ink-2: #4a5768; --ink-3: #7b8796;
  --line: #d5dce6; --line-soft: #e8edf3;
  --surface: #ffffff; --surface-2: #f6f8fb; --canvas: #e9eef5;
  --win-face: var(--surface-2); --win-border: var(--line); --win-dark: #696969; --win-input: #c3ccd8;
  --win-select: var(--fk-blue); --win-hover: var(--fk-blue-50); --win-hover-border: var(--fk-sky);
  --ok: #1f7a45;
  --radius: 6px; --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(16, 33, 60, .06), 0 6px 20px rgba(16, 33, 60, .10);
  --win-font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --head-font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--win-font);
  --bs-link-color: var(--fk-blue); --bs-link-hover-color: var(--fk-blue-dark);
}
html, body { height: 100%; }
/* ---- size on bigger screens: the screens keep the old layout but are drawn larger, so the text is easier to read and the
   room is used (zoom scales the boxes, their places and the text together). A window's page shows inside the desktop's
   zoomed work area, so it is not zoomed again. ------------------------------------------------------------------------ */
:root { --ui-scale: 1; }
@media (min-width: 1440px) and (min-height: 700px) { :root { --ui-scale: 1.15; } }
@media (min-width: 1600px) and (min-height: 800px) { :root { --ui-scale: 1.25; } }
@media (min-width: 1880px) and (min-height: 900px) { :root { --ui-scale: 1.35; } }
@media (min-width: 2400px) and (min-height: 1250px) { :root { --ui-scale: 1.6; } }
html:not(.in-mdi) body.ibots { zoom: var(--ui-scale); min-height: calc(100vh / var(--ui-scale)); }
html.mdi-desk body.ibots { height: calc(100vh / var(--ui-scale)); }

body.ibots { margin: 0; display: flex; flex-direction: column; min-height: 100vh; background: var(--canvas);
  font: 12px/1.3 var(--win-font); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---- menu bar (frmMain.MenuStrip) ---------------------------------------------------------- */
.menubar { display: flex; align-items: stretch; background: var(--fk-blue); color: #fff;
  box-shadow: inset 0 -3px 0 var(--fk-sky), 0 1px 4px rgba(11, 37, 69, .25);
  font: 500 13px var(--win-font); position: relative; z-index: 1000; user-select: none; }
.menubar .brand { display: flex; align-items: center; gap: 8px; padding: 4px 14px 7px 8px; color: #fff; text-decoration: none; font: 500 14px var(--head-font); letter-spacing: .01em; }
.menubar .brand img { height: 24px; background: #fff; border-radius: var(--radius-sm); padding: 2px 4px; }
.menubar .tag { background: var(--fk-red); color: #fff; font: 500 9.5px var(--win-font); padding: 2px 6px; border-radius: 999px; letter-spacing: .06em; }
.menubar > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.menubar li { position: relative; }
.menubar .top { display: block; padding: 8px 11px 10px; color: rgba(255,255,255,.92); cursor: default; text-decoration: none; white-space: nowrap; }
.menubar li.open > .top, .menubar .top:hover, .menubar .top:focus { background: rgba(255,255,255,.14); color: #fff; outline: none; }
.menubar li.open > .top { box-shadow: inset 0 -3px 0 #fff; }
.menubar ul ul { display: none; position: absolute; left: 0; top: 100%; min-width: 240px; background: var(--surface); color: var(--ink); list-style: none;
  margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 10px 28px rgba(16, 33, 60, .18);
  font-weight: 400; }
.menubar ul ul ul { left: 100%; top: -6px; border-radius: var(--radius); }
.menubar li.open > ul { display: block; }
.menubar ul ul a, .menubar ul ul span.item { display: block; padding: 6px 30px 6px 12px; color: var(--ink); text-decoration: none; white-space: nowrap; border-radius: var(--radius-sm); }
.menubar ul ul a:hover, .menubar ul ul a:focus, .menubar ul ul li.open > span.item { background: var(--fk-blue-50); color: var(--fk-blue); outline: none; }
.menubar ul ul span.item.off { color: #a6afbb; }
.menubar ul ul span.item.off:hover { background: transparent; color: #a6afbb; }
.menubar ul ul li.sub > span.item::after { content: "\203A"; position: absolute; right: 12px; font-size: 15px; top: 3px; color: var(--ink-3); }
.menubar ul ul li.sep { height: 1px; margin: 4px 6px; background: var(--line-soft); }
.menubar .exit { margin-left: auto; }
.menubar .exit button { background: none; border: 0; color: rgba(255,255,255,.92); padding: 8px 16px 10px; font: inherit; }
.menubar .exit button:hover { background: var(--fk-red); color: #fff; }
.menu-toggle { display: none; }

/* ---- work area and status bar (MDI client, StatusStrip) ------------------------------------ */
.workspace { flex: 1 1 auto; padding: 18px; overflow: auto; }
.statusbar { display: flex; background: var(--surface); border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink-2); padding: 4px 6px; gap: 4px; flex-wrap: wrap; }
.statusbar span { padding: 1px 12px; border-right: 1px solid var(--line); }
.statusbar span:last-child { border-right: 0; margin-left: auto; }
.statusbar .notice a { color: var(--fk-red-dark); font-weight: 500; }

/* ---- a window (an MDI child form) --------------------------------------------------------- */
.win { display: inline-block; vertical-align: top; background: var(--win-face); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 0 14px 16px 0; max-width: 100%; overflow: hidden; }
.win-title { display: flex; align-items: center; height: 32px; padding: 0 0 0 12px; color: #fff; font: 500 13px var(--head-font); letter-spacing: .01em;
  background: var(--fk-blue); box-shadow: inset 0 -2px 0 var(--fk-sky); }
.win-title .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-title a.x { color: rgba(255,255,255,.9); text-decoration: none; width: 42px; height: 32px; display: flex; align-items: center; justify-content: center; font: 14px var(--win-font); }
.win-title a.x:hover { background: var(--fk-red); color: #fff; }
.win-client { padding: 0; overflow: auto; }
.workspace.has-max { padding: 0; }
.workspace { position: relative; }
.win.moved { position: absolute; margin: 0; z-index: 5; }
.win:not(.max):not(.fixed) .win-title { cursor: move; touch-action: none; }
.win-title.dragging { opacity: .92; }
.win.sizable:not(.max) { resize: both; overflow: hidden; min-width: 220px; min-height: 80px; }
.win.sizable:not(.max) .win-client { overflow: auto; }
@media (max-width: 760px) { html:not(.in-mdi-wide) .win.moved { position: static; } html:not(.in-mdi-wide) .win .win-title { cursor: default; } }
.win.max { display: block; margin: 0 0 14px; box-shadow: none; border-left: 0; border-right: 0; border-top: 0; border-radius: 0; }
.win-title a.mx { font-size: 14px; }
.win-title a.mx:hover { background: rgba(255,255,255,.18); }
.win.max .w-host, .w-host { transition: none; }

/* ---- controls placed where the old form had them (winform.py) ----------------------------- */
.w-body { position: relative; font: 11.5px var(--win-font); }
.w-body > *, .w-group > * { position: absolute; }
.w-group { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.55); }
.w-group .w-caption { position: absolute; left: 8px; top: -8px; background: var(--win-face); padding: 0 4px; color: var(--fk-blue); white-space: nowrap;
  font: 500 11px var(--win-font); letter-spacing: .02em; border-radius: 3px; }
.w-rule { border-top: 1px solid var(--line); height: 0 !important; margin-top: 6px; }
.w-label { white-space: nowrap; line-height: 14px; color: var(--ink-2); }
.w-input, .w-body select, .w-body textarea { font: 11.5px var(--win-font); color: var(--ink); background: #fff; border: 1px solid var(--win-input);
  border-radius: var(--radius-sm); padding: 1px 3px; margin: 0; box-sizing: border-box; transition: border-color .12s, box-shadow .12s; }
.w-body select { padding: 0 0 0 2px; }
.w-input:hover:not([readonly]):not(:disabled), .w-body select:hover:not(:disabled) { border-color: #9fb0c4; }
.w-input:focus, .w-body select:focus, .w-body textarea:focus { outline: none; border-color: var(--fk-sky); box-shadow: 0 0 0 3px rgba(0, 147, 221, .18); }
.w-input[readonly], .w-input:disabled, .w-body select:disabled { background: #eef1f5; color: #3d4756; border-color: #d4dbe4; }
.w-input.w-error, .w-check.w-error { border-color: var(--fk-red); box-shadow: 0 0 0 3px rgba(218, 37, 29, .15); background: #fff6f5; }
.w-multi { resize: none; }
.w-checklist { height: 100%; box-sizing: border-box; overflow-y: auto; background: #fff; border: 1px solid var(--win-input); border-radius: var(--radius-sm); padding: 2px 4px; }
.w-checklist label { display: flex; align-items: center; gap: 5px; white-space: nowrap; line-height: 18px; }
.w-checklist input { margin: 0; width: 13px; height: 13px; accent-color: var(--fk-blue); }
.w-check { display: flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--ink); }
.w-check input { margin: 0; width: 13px; height: 13px; accent-color: var(--fk-blue); }
.w-body input[type=radio], .w-body input[type=checkbox] { accent-color: var(--fk-blue); }
.w-button { display: inline-block; align-content: center; vertical-align: middle; text-align: center; overflow: hidden; font: 500 11px/1.15 var(--win-font); color: var(--fk-blue); text-decoration: none;
  background: #fff; border: 1px solid #b9c7d8; border-radius: var(--radius-sm); padding: 0 3px; box-sizing: border-box; cursor: pointer;
  box-shadow: 0 1px 1px rgba(16, 33, 60, .05); transition: background .12s, border-color .12s, color .12s; }
.w-button:hover, .w-button:focus { background: var(--fk-blue-50); border-color: var(--fk-blue); color: var(--fk-blue-dark); outline: none; }
.w-button:focus-visible { box-shadow: 0 0 0 3px rgba(0, 147, 221, .25); }
.w-button:active { background: var(--fk-blue-100); }
.w-button:disabled { color: #a6afbb; background: #f1f3f6; border-color: #dde2e9; box-shadow: none; cursor: default; }
.w-button.default, button.w-button[value="save"], button.w-button[value="ok"] { background: var(--fk-blue); border-color: var(--fk-blue); color: #fff; }
.w-button.default:hover, button.w-button[value="save"]:hover, button.w-button[value="ok"]:hover,
.w-button.default:focus, button.w-button[value="save"]:focus, button.w-button[value="ok"]:focus { background: var(--fk-blue-dark); border-color: var(--fk-blue-dark); color: #fff; }
button.w-button[value="save"]:disabled, button.w-button[value="ok"]:disabled { color: #a6afbb; background: #f1f3f6; border-color: #dde2e9; }
.w-host { overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.w-raw { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.w-raw > select, .w-raw > input:not([type=radio]):not([type=checkbox]) { width: 100%; height: 100%; }
.w-raw > textarea, .w-raw > .w-checklist { width: 100%; height: 100%; align-self: stretch; resize: none; box-sizing: border-box; }
.w-raw > .w-checklist label { display: flex; }
.w-raw label { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.w-raw input[type=radio] { margin: 0; }
.w-host.w-button { background: none; border: 0; overflow: visible; box-shadow: none; }
.w-plain { position: absolute; overflow: visible; white-space: nowrap; }  /* a label or button the screen's script fills */
.w-heading { color: var(--fk-blue); font: 500 13px var(--head-font); white-space: nowrap; }

/* ---- tabs (TabControl / TabPage) ----------------------------------------------------------- */
.w-tabs > .w-tabhead { position: absolute; left: 2px; top: 0; height: 22px; display: flex; align-items: flex-end; gap: 2px; }
.w-tab { font: 500 12px var(--win-font); color: var(--ink-2); background: transparent; border: 1px solid transparent; border-bottom: 0; padding: 2px 10px;
  height: 21px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; }
.w-tab:hover { color: var(--fk-blue); background: var(--fk-blue-50); }
.w-tab.on { background: #fff; color: var(--fk-blue); height: 23px; position: relative; z-index: 2; border-color: var(--line); box-shadow: inset 0 2px 0 var(--fk-blue); margin-bottom: -1px; }
.w-tab:focus-visible { outline: 2px solid var(--fk-sky); outline-offset: -2px; }
.w-tabpage { position: absolute; background: #fff; border: 1px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) var(--radius-sm); }
.w-tabpage > * { position: absolute; }
.w-tabpage[hidden] { display: none; }

/* ---- grids and lists (DataGridView, ListView "Details") ------------------------------------ */
table.w-grid { width: 100%; border-collapse: collapse; font: 11.5px var(--win-font); background: #fff; color: var(--ink); }
.w-grid th { position: sticky; top: 0; z-index: 1; background: #f1f5fa; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line-soft);
  font-weight: 500; font-size: 11.5px; color: var(--ink-2); padding: 5px 7px; text-align: left; white-space: nowrap; }
.w-grid td { border-bottom: 1px solid var(--line-soft); padding: 3px 7px; white-space: nowrap; }
.w-grid tbody tr:nth-child(even) td { background: #fafbfd; }
.w-grid tbody tr:hover td { background: var(--fk-blue-50); cursor: default; }
.w-grid tbody tr.sel td { background: var(--win-select); color: #fff; }
.w-grid tbody tr.sel td a { color: #fff; }
.w-grid td a { color: inherit; text-decoration: none; display: block; }
.w-grid .w-tickcol { width: 46px; text-align: center; }
.w-grid .num { text-align: right; font-variant-numeric: tabular-nums; }
.w-grid .w-empty { color: var(--ink-3); padding: 10px; }
.w-grid tr.hidden { display: none; }
.w-editgrid td { padding: 1px 2px; }
.w-red { color: var(--fk-red-dark); }
.w-grid tbody tr.red td { background: var(--fk-red); color: #fff; }
.help-panel { position: fixed; left: 50%; top: 90px; transform: translateX(-50%); width: min(760px, 96vw); max-height: 70vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(16, 33, 60, .25); z-index: 30; }
.help-panel .help-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; color: #fff; font: 500 13px var(--head-font);
  background: var(--fk-blue); position: sticky; top: 0; z-index: 2; }
.help-panel .help-head button { background: none; border: 0; color: #fff; font-size: 14px; cursor: pointer; }
.help-panel tbody tr { cursor: pointer; }
.scan-msg { font-weight: 500; color: var(--fk-blue); white-space: nowrap; }
.scan-msg.bad { color: var(--fk-red-dark); }
.print-status { position: fixed; right: 16px; bottom: 38px; max-width: 520px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--fk-sky); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(16, 33, 60, .18); font: 12.5px var(--win-font); z-index: 20; }
.print-status.ok { border-left-color: var(--ok); color: var(--ok); } .print-status.bad { border-left-color: var(--fk-red); color: var(--fk-red-dark); }
.w-cell { width: 100%; min-width: 90px; font: 12px var(--win-font); border: 1px solid transparent; border-radius: 3px; padding: 1px 4px; background: transparent; color: inherit; }
.w-cell:focus { border-color: var(--fk-sky); background: #fff; color: var(--ink); outline: none; }
.w-cell.up { text-transform: uppercase; }
.w-grid tbody tr.sel td .w-cell { color: #fff; }
.w-grid tbody tr.sel td .w-cell:focus { color: var(--ink); }

/* ---- tree (TreeView) ----------------------------------------------------------------------- */
.w-tree { list-style: none; margin: 0; padding: 4px 0 4px 4px; font: 12px var(--win-font); }
.w-tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px solid var(--line); margin-left: 6px; }
.w-tree li { white-space: nowrap; line-height: 20px; }
.w-tree .pm { display: inline-block; width: 11px; height: 11px; border: 1px solid #9fb0c4; border-radius: 2px; font: 10px/9px var(--win-font); text-align: center;
  margin-right: 5px; color: var(--fk-blue); background: #fff; vertical-align: -1px; text-decoration: none; }
.w-tree .pm.none { border-color: transparent; background: transparent; }
.w-tree a.n { color: var(--ink); text-decoration: none; padding: 1px 4px; border-radius: 3px; }
.w-tree a.n:hover { background: var(--fk-blue-50); }
.w-tree a.n.sel { background: var(--win-select); color: #fff; }

/* ---- message box (MsgBox) ------------------------------------------------------------------ */
.msgbox .modal-content { border-radius: var(--radius); border: 1px solid var(--line); font: 13px var(--win-font); overflow: hidden; box-shadow: 0 20px 50px rgba(16, 33, 60, .3); }
.msgbox .modal-header { padding: 7px 12px; background: var(--fk-blue); color: #fff; border-radius: 0; box-shadow: inset 0 -2px 0 var(--fk-sky); }
.msgbox .modal-title { font: 500 13px var(--head-font); }
.msgbox .modal-body { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; background: #fff; color: var(--ink); }
.msgbox .icon { font: 700 18px var(--head-font); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.msgbox .icon.info { background: var(--fk-sky); }
.msgbox .icon.error { background: var(--fk-red); }
.msgbox .modal-footer { background: var(--surface-2); padding: 8px 12px; border-top: 1px solid var(--line-soft); }
.msgbox .w-button { position: static; width: 80px; height: 28px; }

/* ---- empty work area and the log-in window ---------------------------------------------------- */
.home-mark { text-align: center; color: var(--ink-2); margin-top: 12vh; font-size: 14px; }
.home-mark img { width: 220px; background: #fff; padding: 14px 20px; border-radius: 10px; box-shadow: var(--shadow); }
.home-mark p { margin-top: 16px; }
.login-banner { display: flex; align-items: center; justify-content: center; gap: 18px; height: 100%; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--radius); color: var(--fk-blue); font: 500 26px var(--head-font); }
.login-banner img { height: 90px; }
.w-raw > .login-banner { flex: 1 1 auto; align-self: stretch; }
.win.fixed .win-client { overflow: hidden; }
.login-banner small { display: block; font: 500 11px var(--win-font); color: var(--fk-red); letter-spacing: .1em; text-transform: uppercase; }
body.ibots:not(:has(.menubar)) { background: linear-gradient(160deg, var(--fk-navy) 0%, var(--fk-blue) 55%, var(--fk-sky) 130%); }
body.ibots:not(:has(.menubar)) .workspace { display: flex; align-items: center; justify-content: center; }
body.ibots:not(:has(.menubar)) .win { box-shadow: 0 24px 60px rgba(0, 0, 0, .35); border: 0; }

/* ---- old print pages and simple pages inside a window ---------------------------------------- */
.win .page { padding: 14px 16px; font-size: 13px; font-family: var(--win-font); }
.win .page h1 { font: 500 17px var(--head-font); color: var(--fk-blue); }
.win .page .card { border-radius: var(--radius); margin-bottom: 12px; }
.win .page .card { padding: 12px 14px; background: #fff; border: 1px solid var(--line); }
.win .page form.pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.win .page label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--ink-2); }
.win .page label.radio { flex-direction: row; align-items: center; gap: 4px; }
.win .page input:not([type=radio]), .win .page select { font: 13px var(--win-font); border: 1px solid var(--win-input); border-radius: var(--radius-sm); padding: 3px 6px; min-height: 28px; background: #fff; color: var(--ink); }
.win .page input:focus, .win .page select:focus { outline: none; border-color: var(--fk-sky); box-shadow: 0 0 0 3px rgba(0, 147, 221, .18); }
.win .page .btn { font: 500 13px var(--win-font); color: #fff; background: var(--fk-blue); border: 1px solid var(--fk-blue); border-radius: var(--radius-sm); padding: 4px 16px; }
.win .page .btn:hover { background: var(--fk-blue-dark); border-color: var(--fk-blue-dark); }
.win .page .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.win .page .status { font-size: 12px; color: var(--ink-2); }
.win .page .status.ok { color: var(--ok); } .win .page .status.bad { color: var(--fk-red-dark); }
.win .page .error { color: var(--fk-red-dark); font-weight: 500; }
.win .page dl.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0 0 10px; }
.win .page dl.facts dt { font-size: 11px; color: var(--ink-3); font-weight: normal; }
.win .page dl.facts dd { margin: 0; font-weight: 500; }
.win .page .table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.win .page table { width: 100%; border-collapse: collapse; font-size: 12px; }
.win .page th { background: #f1f5fa; border-bottom: 1px solid var(--line); font-weight: 500; color: var(--ink-2); padding: 5px 7px; text-align: left; }
.win .page td { border-bottom: 1px solid var(--line-soft); padding: 3px 7px; }
.report { background: #fff; padding: 12px 16px; font: 12px var(--win-font); color: var(--ink); }
.report h2 { font: 500 15px var(--head-font); color: var(--fk-blue); text-align: center; margin: 4px 0 12px; }
.report table { width: 100%; border-collapse: collapse; }
.report th { border-bottom: 1px solid var(--ink); text-align: left; padding: 3px 4px; }
.report td { border-bottom: 1px dotted #bbb; padding: 3px 4px; vertical-align: top; }
@media print { .menubar, .statusbar, .noprint { display: none !important; } body.ibots { background: #fff; } .win { box-shadow: none; border: 0; } }

/* ---- phones: the same controls, one under the other ----------------------------------------- */
@media (max-width: 760px) {
  html:not(.in-mdi-wide) body.ibots { font-size: 14px; }
  html:not(.in-mdi-wide) .menu-toggle { display: block; background: none; border: 0; color: #fff; font-size: 22px; padding: 2px 14px; margin-left: auto; }
  html:not(.in-mdi-wide) .menubar { flex-wrap: wrap; box-shadow: inset 0 -3px 0 var(--fk-sky); }
  html:not(.in-mdi-wide) .menubar .brand { padding: 8px 10px 10px; }
  html:not(.in-mdi-wide) .menubar > ul { display: none; width: 100%; flex-direction: column; background: var(--fk-blue-dark); padding-bottom: 3px; max-height: calc(100vh - 48px); overflow-y: auto; }
  html:not(.in-mdi-wide) .menubar.show > ul { display: flex; }
  html:not(.in-mdi-wide) .menubar ul ul, html:not(.in-mdi-wide) .menubar ul ul ul { position: static; box-shadow: none; border: 0; border-radius: 0; background: #fff; min-width: 0; padding: 4px 4px 4px 10px; }
  html:not(.in-mdi-wide) .menubar ul ul a, html:not(.in-mdi-wide) .menubar ul ul span.item { padding: 10px 12px; font-size: 15px; }
  html:not(.in-mdi-wide) .menubar .top { padding: 12px 14px; font-size: 15px; border-top: 1px solid rgba(255,255,255,.08); }
  html:not(.in-mdi-wide) .menubar li.open > .top { box-shadow: none; background: rgba(255,255,255,.12); }
  html:not(.in-mdi-wide) .menubar .exit { margin-left: 0; }
  html:not(.in-mdi-wide) .menubar .exit button { width: 100%; text-align: left; padding: 12px 14px; font-size: 15px; }
  html:not(.in-mdi-wide) .workspace { padding: 8px; }
  html:not(.in-mdi-wide) .win { display: block; margin: 0 0 12px; width: auto !important; border-radius: var(--radius); }
  html:not(.in-mdi-wide) .win.max { border-radius: 0; }
  html:not(.in-mdi-wide) .win-title { height: 40px; font-size: 15px; }
  html:not(.in-mdi-wide) .win-title a.x { height: 40px; width: 46px; font-size: 16px; }
  html:not(.in-mdi-wide) .win-title a.mx { display: none; }
  html:not(.in-mdi-wide) .w-body { width: auto !important; height: auto !important; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
  html:not(.in-mdi-wide) .w-body > *, html:not(.in-mdi-wide) .w-group > * { position: static !important; width: auto !important; height: auto !important; }
  html:not(.in-mdi-wide) .w-group { display: flex; flex-direction: column; gap: 6px; padding: 16px 10px 10px; margin-top: 10px; position: relative !important; }
  html:not(.in-mdi-wide) .w-group .w-caption { position: absolute !important; font-size: 12px; }
  html:not(.in-mdi-wide) .w-tabs { position: static !important; width: auto !important; height: auto !important; }
  html:not(.in-mdi-wide) .w-tabs > .w-tabhead { position: static; height: auto; flex-wrap: nowrap; overflow-x: auto; gap: 2px; border-bottom: 1px solid var(--line); }
  html:not(.in-mdi-wide) .w-tab, html:not(.in-mdi-wide) .w-tab.on { height: auto; padding: 10px 12px; font-size: 14px; white-space: nowrap; margin-bottom: 0; }
  html:not(.in-mdi-wide) .w-tabpage { position: static !important; width: auto !important; height: auto !important; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  html:not(.in-mdi-wide) .w-tabpage[hidden] { display: none; }
  html:not(.in-mdi-wide) .w-tabpage > * { position: static !important; width: auto !important; height: auto !important; }
  html:not(.in-mdi-wide) .w-input, html:not(.in-mdi-wide) .w-body select { font-size: 16px; min-height: 42px; width: 100% !important; border-radius: var(--radius); padding: 6px 10px; }
  html:not(.in-mdi-wide) .w-body textarea { font-size: 16px; min-height: 80px; }
  html:not(.in-mdi-wide) .w-label { white-space: normal; margin-top: 6px; font-size: 13px; font-weight: 500; }
  html:not(.in-mdi-wide) .w-button { min-height: 44px; font-size: 15px; border-radius: var(--radius); }
  html:not(.in-mdi-wide) .w-host { max-height: 60vh; min-height: 120px; -webkit-overflow-scrolling: touch; }
  html:not(.in-mdi-wide) .w-host.w-button { min-height: 0; }
  html:not(.in-mdi-wide) .w-raw { flex-wrap: wrap; white-space: normal; }
  html:not(.in-mdi-wide) .w-raw > select, html:not(.in-mdi-wide) .w-raw > input:not([type=radio]):not([type=checkbox]) { min-height: 42px; height: auto; }
  html:not(.in-mdi-wide) .w-check { font-size: 15px; min-height: 34px; }
  html:not(.in-mdi-wide) .w-check input, html:not(.in-mdi-wide) .w-body input[type=radio], html:not(.in-mdi-wide) .w-body input[type=checkbox] { width: 20px; height: 20px; }
  html:not(.in-mdi-wide) .w-grid { font-size: 13px; }
  html:not(.in-mdi-wide) .w-grid td, html:not(.in-mdi-wide) .w-grid th { padding: 8px 8px; }
  html:not(.in-mdi-wide) .w-cell { font-size: 15px; min-height: 34px; }
  html:not(.in-mdi-wide) .scan-msg { white-space: normal; font-size: 15px; }
  html:not(.in-mdi-wide) .print-status { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  html:not(.in-mdi-wide) .statusbar { font-size: 12px; }
  html:not(.in-mdi-wide) .statusbar span { padding: 1px 8px; }
}

/* POD Update: list date and the POD image upload, below the list */
.pod-up { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; }
.pod-up .w-input { position: static; width: auto; height: 22px; font-size: 12px; }
.pod-up input[type=file] { font-size: 12px; max-width: 210px; }
.pod-up .pod-sep { margin-left: 10px; }
.pod-up #pod-current, .pod-up #pod-msg { flex-basis: 100%; }

/* pick lists that open a document (tracking: Manifest / Delivery) */
.help-panel tr.pick { cursor: pointer; }
.help-panel tr.pick:hover td { background: var(--win-select); color: #fff; }
.help-note { font-size: 12px; padding: 6px 8px; color: var(--ink-2); }
.w-greyed { background: #eef1f5; color: #6d7887; }

/* phones: the log-in window fills the width, and buttons inside a group come after its boxes */
@media (max-width: 760px) {
  html:not(.in-mdi-wide) body.ibots:not(:has(.menubar)) .workspace { align-items: center; justify-content: stretch; padding: 16px; }
  html:not(.in-mdi-wide) body.ibots:not(:has(.menubar)) .workspace > .win { flex: 1 1 auto; min-width: 0; }
  html:not(.in-mdi-wide) .w-group > .w-button { order: 10; }
  html:not(.in-mdi-wide) .w-raw > .login-banner { flex-direction: column; gap: 6px; padding: 14px; font-size: 22px; text-align: center; }
  html:not(.in-mdi-wide) .login-banner img { height: 64px; }
}

/* ---- phones: a form in two columns (label | box), and the scan screens (Manifest, DRS, Inbound) in working order:
   the boxes, Add / Remove right under them, the list, the totals, then New / Save / Print ... two buttons a row ---------- */
@media (max-width: 760px) {
  html:not(.in-mdi-wide) .w-body, html:not(.in-mdi-wide) .w-group, html:not(.in-mdi-wide) .w-tabpage { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 10px; row-gap: 8px; align-items: center; }
  html:not(.in-mdi-wide) .w-body > *, html:not(.in-mdi-wide) .w-group > *, html:not(.in-mdi-wide) .w-tabpage > * { grid-column: 1 / -1; min-width: 0; left: auto !important; top: auto !important; }
  html:not(.in-mdi-wide) .w-group > .w-group { margin-top: 12px; }
  html:not(.in-mdi-wide) :is(.w-body, .w-group, .w-tabpage) > .w-label:has(+ :is(.w-input, select, textarea, .w-raw)) { grid-column: span 2; margin-top: 0; }
  html:not(.in-mdi-wide) :is(.w-body, .w-group, .w-tabpage) > .w-label + :is(.w-input, select, textarea, .w-raw) { grid-column: span 4; }
  html:not(.in-mdi-wide) :is(.w-body, .w-group, .w-tabpage) > .w-button { grid-column: span 3; }
  html:not(.in-mdi-wide) .w-group > .w-caption { left: 8px !important; top: -9px !important; }
  html:not(.in-mdi-wide) .w-body > .w-button[id$="-add"] { order: 1 !important; }
  html:not(.in-mdi-wide) .w-body > .w-host { order: 3; }
  html:not(.in-mdi-wide) .w-body > .w-button { order: 5; }
  html:not(.in-mdi-wide) .w-body > .w-button:is([id$="-add"], [id$="-remove"], #in-delete, #scan-recompute) { order: 2; }
  html:not(.in-mdi-wide) .w-body > .w-raw:has([id^="tot-"], #in-total), html:not(.in-mdi-wide) .w-body > .w-label:has(+ .w-raw [id^="tot-"], + .w-raw #in-total) { order: 4; }
  html:not(.in-mdi-wide) .w-body > .w-raw:has([id^="tot-"], #in-total) input { background: transparent; border-color: transparent; font-weight: 500; min-height: 30px; padding: 0; }
  html:not(.in-mdi-wide) .w-raw:has(#scan-cnote, #l-cnote, #in-cnote) input { border-color: var(--fk-sky); box-shadow: 0 0 0 3px rgba(0, 147, 221, .15); font-weight: 500; }
}

/* the scan outbox: "3 waiting", offline, scans to do again */
.outbox-status { margin: 4px 6px 6px; padding: 5px 10px; border: 1px solid #e3cf7a; border-left: 4px solid #d4a514; border-radius: var(--radius-sm);
  background: #fff9e0; color: #4a3d00; font-size: 12px; }
.outbox-status.bad { border-color: #f0b8b3; border-left-color: var(--fk-red); background: #fdeeec; color: #8a1c12; font-weight: 500; }
.outbox-status .w-button { margin-left: 8px; padding: 0 8px; font-size: 11px; }
/* Tracking: lines taken back (archive), shown apart below the window */
.corrections { height: 100%; overflow: auto; border: 1px solid #e3a7a2; border-radius: var(--radius-sm); background: #fff; }
.corrections .corr-head { padding: 4px 8px; background: var(--fk-red-dark); color: #fff; font: 500 11.5px var(--win-font); }
.refused { margin: 6px 0; }
.refused .grid-wrap { max-height: 220px; overflow: auto; }
.pod-opts { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; margin: 0; padding: 2px 0 0; border: 0; font-size: 12px; }
.pod-opts .pod-legend { font-weight: 500; }
.pod-opts label { display: inline-flex; align-items: center; gap: 3px; }

/* ---- the desktop (mdi.js): screens in windows on the home page, a window bar above the status bar ------------- */
html.in-mdi .menubar, html.in-mdi .statusbar { display: none; }
html.in-mdi body.ibots { min-height: 0; height: 100vh; }
html.in-mdi .workspace { padding: 0; }
html.in-mdi .workspace > .win { border: 0; border-radius: 0; box-shadow: none; margin: 0; }
html.in-mdi .workspace > .win > .win-title { display: none; }
html.mdi-desk .workspace { position: relative; overflow: hidden; padding: 0; }
html.mdi-desk .home-mark { margin: 0; position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.mdi-win { position: absolute; display: flex; flex-direction: column; background: var(--win-face); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); min-width: 260px; min-height: 120px; }
.mdi-win.active { box-shadow: 0 2px 4px rgba(16, 33, 60, .08), 0 14px 36px rgba(16, 33, 60, .22); }
.mdi-win.max { inset: 0; box-shadow: none; border: 0; border-radius: 0; }
.mdi-win[hidden] { display: none; }
.mdi-title { display: flex; align-items: center; height: 32px; flex: 0 0 32px; padding-left: 12px; color: #fff; background: #8aa3c2;
  font: 500 13px var(--head-font); cursor: move; touch-action: none; user-select: none; }
.mdi-win.active .mdi-title { background: var(--fk-blue); box-shadow: inset 0 -2px 0 var(--fk-sky); }
.mdi-win.max .mdi-title { cursor: default; }
.mdi-title .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdi-title button { width: 42px; height: 32px; border: 0; background: none; color: rgba(255,255,255,.92); font: 14px var(--win-font); cursor: pointer; }
.mdi-title button:hover { background: rgba(255,255,255,.18); color: #fff; }
.mdi-title button.cl:hover { background: var(--fk-red); }
.mdi-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--win-face); }
.mdi-grip { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 50%, #9fb0c4 50%, #9fb0c4 60%, transparent 60%, transparent 75%, #9fb0c4 75%, #9fb0c4 85%, transparent 85%); }
.mdi-win.max .mdi-grip { display: none; }
html.mdi-dragging .mdi-frame { pointer-events: none; }
html.mdi-dragging { cursor: move; }
.mdi-bar { display: flex; gap: 4px; padding: 4px 6px; background: var(--surface); border-top: 1px solid var(--line); overflow-x: auto; flex: 0 0 auto; }
.mdi-bar[hidden] { display: none; }
.mdi-task { flex: 0 1 190px; min-width: 90px; height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2);
  color: var(--ink-2); font: 12px var(--win-font); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mdi-task:hover { border-color: var(--fk-sky); color: var(--fk-blue); }
.mdi-task.on { background: var(--fk-blue-50); border-color: var(--fk-blue); color: var(--fk-blue); box-shadow: inset 0 -2px 0 var(--fk-blue); font-weight: 500; }
.mdi-task.min { color: var(--ink-3); font-style: italic; }
@media (max-width: 760px) { html:not(.in-mdi-wide) .mdi-win:not(.max) { inset: 0 !important; width: auto !important; height: auto !important; border-radius: 0; } html:not(.in-mdi-wide) .mdi-grip { display: none; } }
.mdi-lost { position: absolute; left: 0; right: 0; top: 32px; bottom: 0; padding: 18px; background: #fff9e0; border-top: 3px solid var(--fk-red);
  font: 13px var(--win-font); color: var(--ink); overflow: auto; }
.mdi-lost .w-button { position: static; height: 28px; padding: 0 12px; margin: 4px 4px 4px 0; }

/* ---- searchable drop-downs (combo.js): a box to type in, the list narrowed to what is typed ------------------- */
select.combo-native { display: none !important; }
input.combo-box { padding-right: 18px; cursor: text;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M1 1l3.5 3.5L8 1' fill='none' stroke='%234a5768' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 6px center; }
input.combo-box:disabled { background-color: #eef1f5; }
.combo-list { position: fixed; z-index: 3000; margin: 0; padding: 3px; list-style: none; overflow-y: auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(16, 33, 60, .18); font: 12px var(--win-font); color: var(--ink); }
.combo-list li { padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; border-radius: 3px; }
.combo-list li.on { background: var(--win-select); color: #fff; }
.combo-list li.none { color: var(--ink-3); font-style: italic; }
@media (max-width: 760px) { html:not(.in-mdi-wide) .combo-list { font-size: 15px; } html:not(.in-mdi-wide) .combo-list li { padding: 8px 10px; } }

/* ---- home page: the launchpad (SAP Fiori style tiles), drawn from the menu --------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.launchpad { padding: 22px 28px 40px; max-width: 1480px; margin: 0 auto; }
html.mdi-desk .launchpad { position: absolute; inset: 0; overflow: auto; max-width: none; }
.lp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.lp-hello { font: 500 22px var(--head-font); color: var(--ink); margin: 0 0 2px; letter-spacing: -.01em; }
.lp-sub { margin: 0; color: var(--ink-2); font-size: 13px; }
.lp-search { display: flex; align-items: center; gap: 8px; width: min(340px, 100%); height: 36px; padding: 0 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(16, 33, 60, .05); }
.lp-search:focus-within { border-color: var(--fk-sky); box-shadow: 0 0 0 3px rgba(0, 147, 221, .18); }
.lp-search svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; flex: none; }
.lp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 13px var(--win-font); color: var(--ink); }
.lp-tabs { display: flex; gap: 2px; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--line); margin-bottom: 18px;
  scrollbar-width: none; }  /* (no scroll arrows: on a narrow screen the tabs still slide sideways) */
.lp-tabs::-webkit-scrollbar { display: none; }
.lp-tabs button { flex: none; border: 0; background: none; padding: 10px 14px 9px; font: 500 13px var(--win-font); color: var(--ink-2); cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0; }
.lp-tabs button:hover { color: var(--fk-blue); background: var(--fk-blue-50); }
.lp-tabs button.on { color: var(--fk-blue); border-bottom-color: var(--fk-blue); font-weight: 500; }
.lp-group { margin-bottom: 22px; }
.lp-group h2 { font: 500 14px var(--head-font); color: var(--ink); margin: 0 0 10px; }
.lp-tiles { display: grid; grid-template-columns: repeat(auto-fill, 176px); gap: 12px; }
/* a tile: half the old height, the same width, the icon left of the name (Siddharth, 27 Oct 2026) */
.lp-tile { position: relative; display: flex; flex-direction: row; align-items: center; gap: 12px; height: 88px; padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 33, 60, .06), 0 2px 8px rgba(16, 33, 60, .06);
  color: var(--ink); text-decoration: none; transition: box-shadow .15s, transform .15s, border-color .15s; }
.lp-tile:hover, .lp-tile:focus-visible { border-color: var(--fk-sky-200); box-shadow: 0 2px 4px rgba(16, 33, 60, .08), 0 10px 24px rgba(16, 33, 60, .14);
  transform: translateY(-2px); color: var(--ink); outline: none; }
.lp-tile:focus-visible { box-shadow: 0 0 0 3px rgba(0, 147, 221, .35); }
.lp-tile:active { transform: none; }
.lp-text { display: flex; flex-direction: column; min-width: 0; }
.lp-title { font: 500 14px/1.3 var(--head-font); color: var(--ink); hyphens: auto; overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-tsub { margin-top: 2px; font-size: 12px; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lp-icon { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--fk-blue-50); display: flex; align-items: center; justify-content: center; }
.lp-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--fk-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lp-empty { color: var(--ink-3); margin: 4px 0 20px; }
@media (max-width: 760px) {
  html:not(.in-mdi-wide) .launchpad { padding: 14px 12px 30px; }
  html:not(.in-mdi-wide) .lp-hello { font-size: 19px; }
  html:not(.in-mdi-wide) .lp-search { width: 100%; height: 42px; }
  html:not(.in-mdi-wide) .lp-search input { font-size: 16px; }
  html:not(.in-mdi-wide) .lp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html:not(.in-mdi-wide) .lp-tile { height: 66px; padding: 8px 10px; gap: 8px; }
  html:not(.in-mdi-wide) .lp-title { font-size: 13px; -webkit-line-clamp: 2; }
  html:not(.in-mdi-wide) .lp-tsub { font-size: 11px; }
  html:not(.in-mdi-wide) .lp-icon { width: 34px; height: 34px; border-radius: 8px; }
  html:not(.in-mdi-wide) .lp-icon svg { width: 20px; height: 20px; }
  html:not(.in-mdi-wide) .lp-space .lp-icon { width: 38px; height: 38px; }
  html:not(.in-mdi-wide) .lp-space .lp-title { font-size: 14px; }
}

/* ---- the top bar in the Fiori shell-bar style: white, the logo and name on the left, the menus beside them ----------- */
.menubar { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 2px 6px rgba(16, 33, 60, .06); }
.menubar .brand { color: var(--fk-blue); padding: 6px 18px 6px 12px; border-right: 1px solid var(--line-soft); margin-right: 6px; }
.menubar .brand img { height: 26px; padding: 0; background: none; }
.menubar .top { color: var(--ink-2); padding: 11px 12px 10px; }
.menubar li.open > .top, .menubar .top:hover, .menubar .top:focus { background: var(--fk-blue-50); color: var(--fk-blue); }
.menubar li.open > .top { box-shadow: inset 0 -3px 0 var(--fk-blue); }
.menubar .exit button { color: var(--ink-2); padding: 11px 16px 10px; }
.menubar .exit button:hover { background: var(--fk-red); color: #fff; }
.menubar ul ul { border-top: 0; }
@media (max-width: 760px) {
  html:not(.in-mdi-wide) .menu-toggle { color: var(--fk-blue); }
  html:not(.in-mdi-wide) .menubar { box-shadow: 0 1px 0 var(--line); }
  html:not(.in-mdi-wide) .menubar > ul { background: var(--surface); border-top: 1px solid var(--line-soft); }
  html:not(.in-mdi-wide) .menubar .top { border-top: 1px solid var(--line-soft); }
  html:not(.in-mdi-wide) .menubar .exit button { color: var(--fk-red-dark); }
}
/* the Home tab: one tile per menu */
.lp-space { font: inherit; text-align: left; cursor: pointer; }
.lp-space .lp-title { font-size: 16px; }
.lp-space .lp-icon { width: 48px; height: 48px; background: var(--fk-blue); }
.lp-space .lp-icon svg { width: 26px; height: 26px; stroke: #fff; }
.lp-space:hover .lp-icon { background: var(--fk-blue-dark); }

/* ---- the home page's bar (Fiori shell bar): no menus, the tiles are the menu; Home and Exit stay ------------------ */
html.lp-shell .menubar > ul > li.topitem, html.lp-shell .menu-toggle { display: none; }
html.lp-shell .menubar > ul { display: flex !important; margin-left: auto; width: auto; flex-direction: row; background: none; border: 0; }
html.lp-shell .menubar .exit .top { border-top: 0; }
.lp-homebtn { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--ink-2); font: 500 13px var(--win-font);
  padding: 0 14px; cursor: pointer; }
.lp-homebtn:hover, .lp-homebtn:focus-visible { background: var(--fk-blue-50); color: var(--fk-blue); outline: none; }
.lp-homebtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* C'Note Tracking: the photos taken on a phone */
.cnote-photos { margin: 8px 10px; }
.cnote-photos-head { font: 500 13px var(--head-font); margin-bottom: 4px; }
.cnote-photos-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cnote-photos-row img { height: 90px; width: auto; border: 1px solid #999; border-radius: 3px; background: #fff; display: block; }
.cnote-photos-note { margin: 4px 0; }

/* Despatch Out / In: the Documents button and its list of photos and scans */
.despatch-docs summary { display: inline-block; padding: 4px 12px; cursor: pointer; list-style: none; }
.despatch-docs summary::-webkit-details-marker { display: none; }
.despatch-docs ul { margin: 6px 0 0; padding-left: 18px; }
.despatch-docs-none { margin: 6px 0 0; }