/* =============================================================================
   In-page MDI — floating, draggable accounting windows (no popups).

   A fixed layer (#mdi-layer) sits above the app content but below the global
   modal overlay and toasts. Windows are absolutely-positioned panels inside it;
   a taskbar (#mdi-taskbar) lists them all. Tables inside a window fit their
   content (see the adaptive rules). RTL-safe via logical properties.
   ============================================================================= */

/* Layer + taskbar. The layer ignores pointer events so the app behind stays
   usable; each window re-enables them for itself. */
/* Layer establishes its own stacking context above the app (incl. the
   full-screen accounting root); windows order within it by inline z-index. */
#mdi-layer{ position:fixed; inset:0; z-index:700; pointer-events:none; }
/* The bar is dark on purpose — its labels, its item fills and its hovers are all
   light-on-dark. It used to read --acc-head, which is one of the near-WHITE
   surface tokens, so every unfocused label came out at 1.03:1 against it:
   invisible. It gets its own token now rather than borrowing a surface. */
#mdi-taskbar{
  position:fixed; inset-inline:0; bottom:0; z-index:1500;
  display:flex; align-items:center; gap:6px; padding:5px 8px;
  background:var(--acc-taskbar,#1e2a44); color:#eaf0fb;
  box-shadow:0 -2px 10px rgba(16,22,40,.18); pointer-events:auto;
  overflow-x:auto; min-height:40px;
}
#mdi-taskbar:empty{ display:none; }
.mdi-tb__label{ font:600 11px/1 system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase;
  color:#9fb0cf; padding-inline:6px 4px; flex:0 0 auto; }
/* An item wears its window's colour, so a minimised bill is still a bill. The
   slight white lift keeps the accent from going muddy on the dark bar without
   eating the contrast: white text on every one of them clears 4.5:1 (amber, the
   lightest, measures 5.0). The focused window inverts to a white pill
   and puts the colour in its icon instead. */
.mdi-tbitem{
  display:inline-flex; align-items:center; gap:7px; flex:0 0 auto; max-width:210px;
  padding:6px 10px; border-radius:7px; cursor:pointer; border:1px solid transparent;
  background:linear-gradient(rgba(255,255,255,.05),rgba(255,255,255,.05)), var(--win-accent);
  color:#fff; font:500 12.5px/1 system-ui,sans-serif;
}
.mdi-tbitem:hover{ background:linear-gradient(rgba(255,255,255,.24),rgba(255,255,255,.24)), var(--win-accent); }
.mdi-tbitem.is-active{ background:#fff; color:var(--acc-ink,#18233b); border-color:#fff; }
.mdi-tbitem.is-min{ opacity:.72; }
.mdi-tbitem__name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mdi-tbitem__dot{ width:7px; height:7px; border-radius:50%; background:#f0a83a; flex:0 0 auto; }

/* Window panel */
.mdi-win{
  position:absolute; pointer-events:auto; display:flex; flex-direction:column;
  background:var(--acc-canvas,#e8ecf3); border:1px solid var(--acc-line,#d7deea);
  border-radius:10px; box-shadow:0 10px 40px rgba(16,22,40,.28), 0 2px 8px rgba(16,22,40,.16);
  min-width:280px; min-height:160px; overflow:hidden;
}
.mdi-win.is-min{ display:none; }
.mdi-win.is-max{ border-radius:0; }

/* Title bar.
   --win-accent is the colour of the paperwork inside (mdi.js sets it from
   ACC_FACE): green for a sales invoice, amber for a purchase invoice, teal for
   a voucher — a list screen wears the same colour as one of its documents. Only
   a window with no paperwork behind it (reports) keeps the brand red. The bar
   carries it as a fill, so with three windows open you find the bill by colour
   before reading a single title. */
.mdi-win{ --win-accent:var(--acc-accent-deep,#c2151c); }   /* deep, not the brand
   shade: white 13.5px chrome sits on this, and #ed1b24 gives it only 4.0:1. */

/* The bar IS the document's colour, not a stripe above it — a bill window is an
   amber-headed window. Every accent used here clears 4.5:1 under white text,
   which is what lets the chrome go white rather than staying dark on a tint. */
.mdi-win__bar{
  display:flex; align-items:center; gap:8px; height:38px; padding-inline:10px 6px;
  background:var(--win-accent); color:#fff;
  border-bottom:1px solid rgba(16,22,40,.16);
  cursor:move; user-select:none; flex:0 0 auto;
}
/* An unfocused window keeps its hue behind a white veil and flips to dark ink,
   so the stack still says at a glance which one is live without any of them
   losing their identity. A veil rather than a lighter colour: it works on any
   accent without a second table of tints. */
.mdi-win:not(.is-active) .mdi-win__bar{
  background:linear-gradient(rgba(255,255,255,.76),rgba(255,255,255,.76)), var(--win-accent);
  color:var(--acc-ink,#101828);
}
.mdi-win__ic{ display:inline-flex; color:inherit; flex:0 0 auto; }
.mdi-win__title{
  font:600 13.5px/1 system-ui,sans-serif; color:inherit;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto;
}
.mdi-win__btns{ display:flex; gap:2px; flex:0 0 auto; }
/* The buttons ride on whatever the bar is, so they take its ink rather than a
   colour of their own. */
.mdi-win__btn{
  width:28px; height:26px; display:inline-flex; align-items:center; justify-content:center;
  border:0; background:transparent; border-radius:6px; cursor:pointer;
  color:inherit; opacity:.86;
}
.mdi-win__btn:hover{ background:rgba(255,255,255,.24); opacity:1; }
.mdi-win:not(.is-active) .mdi-win__btn:hover{ background:rgba(24,35,59,.10); }
.mdi-win__btn--close:hover{ background:#e5484d; color:#fff; opacity:1; }
.mdi-win__btn:focus-visible{ outline:2px solid currentColor; outline-offset:1px; }

/* Body */
.mdi-win__body{
  flex:1 1 auto; overflow:auto; padding:14px;
  background:var(--acc-canvas,#e8ecf3); position:relative;
}

/* Resize handles (8). The edges are thin, the corners small squares. */
.mdi-rz{ position:absolute; z-index:2; }
.mdi-rz--n{ top:-3px; inset-inline:8px; height:7px; cursor:ns-resize; }
.mdi-rz--s{ bottom:-3px; inset-inline:8px; height:7px; cursor:ns-resize; }
.mdi-rz--e{ inset-block:8px; inset-inline-end:-3px; width:7px; cursor:ew-resize; }
.mdi-rz--w{ inset-block:8px; inset-inline-start:-3px; width:7px; cursor:ew-resize; }
.mdi-rz--ne{ top:-3px; inset-inline-end:-3px; width:12px; height:12px; cursor:nesw-resize; }
.mdi-rz--nw{ top:-3px; inset-inline-start:-3px; width:12px; height:12px; cursor:nwse-resize; }
.mdi-rz--se{ bottom:-3px; inset-inline-end:-3px; width:12px; height:12px; cursor:nwse-resize; }
.mdi-rz--sw{ bottom:-3px; inset-inline-start:-3px; width:12px; height:12px; cursor:nesw-resize; }
/* While dragging/resizing, kill iframe/text selection jitter. */
body.mdi-dragging, body.mdi-dragging *{ cursor:inherit !important; user-select:none !important; }

/* Global modal + toast must stay ABOVE the windows. */
#ovl{ z-index:2000 !important; }
#toast{ z-index:2200 !important; }

/* ---------- adaptive tables inside a LIST window (fit-to-longest-cell) ------ */
/* Scoped to :not(.mdi-win--form) so a data-entry form's line-item grid keeps its
   own fixed column widths and editable cells. */
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable{ table-layout:auto; width:auto; min-width:100%; }
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable th,
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable td{ white-space:nowrap; }
/* name / description columns cap and ellipsis (full text via title, set in JS);
   numbers, codes, dates never truncate. */
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable td.t-nm,
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable td:not([class]){ max-width:340px; overflow:hidden; text-overflow:ellipsis; }
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable td.t-num,
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable th.t-num{ text-align:end; font-variant-numeric:tabular-nums; }
/* overflow fallback: scroll inside, pin the first column */
.mdi-win:not(.mdi-win--form) .mdi-win__body .acccard__scroll{ overflow-x:auto; }
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable th:first-child,
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable td:first-child{
  position:sticky; inset-inline-start:0; background:var(--acc-surface,#fff); z-index:2;
}
.mdi-win:not(.mdi-win--form) .mdi-win__body .acctable thead th:first-child{ z-index:3; }

/* ---------- data-entry FORM windows: the captured dialog fills the body ----- */
.mdi-win--form .mdi-win__body{ padding:0; }
.mdi-win--form .mdi-win__body .mdl{
  width:100% !important; max-width:none !important; height:100%;
  margin:0 !important; border-radius:0 !important; box-shadow:none !important;
  background:transparent; display:flex; flex-direction:column;
}
.mdi-win--form .mdi-win__body .mdl__b{ flex:1 1 auto; overflow:auto; }

/* ---------- data-entry paper --------------------------------------------------
   A form's fields used to vanish into their own background: the body was
   #f5f7fb (the fallback of --acc-bg, a token that was never defined anywhere)
   and the fields #f5f8fc — one point apart, with only a faint hairline between
   them. You could not see where a field began.

   So the two separate properly, and take a little colour while they are at it.
   The paper is a 9% wash of the document's own accent, which makes an invoice
   form faintly green and a bill faintly amber; every control on it is pure
   white with a firm edge. Field and ground now differ by both value and hue,
   and a dropdown reads the same as a text box because both are white boxes. */
.mdi-win--form .mdi-win__body{
  background:color-mix(in srgb, var(--win-accent) 9%, #fff);
}
.mdi-win--form .mdi-win__body .mdl__h{ padding-block:12px; background:transparent; }
.mdi-win--form .mdi-win__body .mdl input,
.mdi-win--form .mdi-win__body .mdl select,
.mdi-win--form .mdi-win__body .mdl textarea{
  background:var(--acc-surface,#fff);
  border-color:var(--acc-line-firm,#b9c4d4);
}
/* The action bar is not paper — it is chrome, so it stays white and square to
   the bottom of the window. */
.mdi-win--form .mdi-win__body .mdl__f{
  background:var(--acc-surface,#fff);
  border-top:1px solid var(--acc-line,#d9e0ea);
}
/* Older engines get the plain inset surface rather than a wash. */
@supports not (background:color-mix(in srgb, red 9%, white)){
  .mdi-win--form .mdi-win__body{ background:var(--acc-surface-2,#f5f8fc); }
}

/* ---------- record windows: a drill view captured into a frame --------------
   Same flattening as a form — the dialog stops being a card and becomes the
   window's contents — with one addition: the view's own header block is hidden.
   The frame's title bar already carries its face and title (adoptChrome moves
   them there), and the meta strip immediately below repeats every word of the
   subtitle, so keeping it would print the same line three times. */
.mdi-win--rec .mdi-win__body{ padding:0; }
.mdi-win--rec .mdi-win__body .mdl{
  width:100% !important; max-width:none !important; height:100%;
  margin:0 !important; border-radius:0 !important; box-shadow:none !important;
  border:0 !important; background:transparent; display:flex; flex-direction:column;
}
.mdi-win--rec .mdi-win__body .mdl__h{ display:none; }
.mdi-win--rec .mdi-win__body .mdl__b{ flex:1 1 auto; overflow:auto; padding-top:16px; }
.mdi-win--rec .mdi-win__body .mdl__f{ flex:0 0 auto; }

/* The window's primary action wears the document's colour rather than the brand
   red — in a bill window the button that records a payment is the bill's amber,
   so the thing you are about to act on and the button that does it agree. */
.mdi-win .mdi-win__body .mdl__f--win .ok,
.mdi-win .mdi-win__body .mdl__f .ok{
  background:var(--win-accent) !important; color:#fff !important; box-shadow:none !important;
}
.mdi-win .mdi-win__body .mdl__f .ok:hover{ filter:brightness(1.07); }
/* Same for the focus ring on inputs inside a document window. */
.mdi-win .mdi-win__body .mdl input:focus,
.mdi-win .mdi-win__body .mdl select:focus,
.mdi-win .mdi-win__body .mdl textarea:focus{
  border-color:var(--win-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--win-accent) 22%, transparent);
}

/* Taskbar entry carries the same colour, so a minimised bill is still a bill. */
.mdi-tbitem{ --win-accent:var(--acc-accent-deep,#c2151c); }
.mdi-tbitem .mdi-win__ic{ color:#fff; }
.mdi-tbitem.is-active .mdi-win__ic{ color:var(--win-accent); }

/* The "open in window" button injected into a screen's action bar. */
.mdi-openbtn svg{ vertical-align:-3px; margin-inline-end:6px; }