/* MK & CO brand palette: navy #072C3D  coral #EF444E */
:root {
    --mk-navy: #072C3D;
    --mk-coral: #EF444E;
}

@keyframes ats-spin { to { transform: rotate(360deg); } }

.ats-spinner {
    width: 40px; height: 40px;
    border: 3px solid #dde4f0;
    border-top-color: #4472c4;
    border-radius: 50%;
    animation: ats-spin 0.75s linear infinite;
}

/* Shared incorporation-module pieces (used by the case editor, Smart Import panel and the Superior page — defined
   globally so a page that renders the panel before the editor still gets them). */
.inc-row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.inc-row > * { flex:0 0 auto; }
.inc-sub { border:1px solid #d5dbe4; border-radius:6px; padding:10px 12px; margin-top:10px; background:#fafbfd; }
.inc-sub h4 { margin:0 0 8px 0; font-size:12.5px; color:#072C3D; }
.inc-btn { padding:3px 10px; border:1px solid #c2c8d0; border-radius:4px; background:#eef1f5; font-size:12px; cursor:pointer; font-weight:600; color:#1a2a4a; }
.inc-btn:hover { background:#dde6f2; } .inc-btn:disabled { opacity:.5; cursor:default; }
.inc-btn.danger { background:#f8d7da; border-color:#d9534f; color:#842029; }
.inc-chip { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; background:#eef1f5; color:#2b3a55; }
.inc-chip.ok { background:#d4edda; color:#1d6b2f; } .inc-chip.warn { background:#fff3cd; color:#7a5a00; } .inc-chip.bad { background:#f8d7da; color:#842029; }

.inc-tabs { display:flex; border-bottom:1px solid #cfd6de; background:#eef1f5; flex-shrink:0; padding:0 8px; }
.inc-tabs button { padding:6px 14px; border:1px solid transparent; border-bottom:none; background:transparent; cursor:pointer; font-size:12px; margin:5px 2px 0; border-radius:5px 5px 0 0; white-space:nowrap; color:#41506a; }
.inc-tabs button:hover { background:#e2e8f0; }
.inc-tabs button.active { background:#fff; font-weight:bold; color:#072C3D; border-color:#cfd6de; border-bottom-color:#fff; }
.inc-legend { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:5px 10px; background:#f7f9fc; border-bottom:1px solid #e3e8ee; font-size:11.5px; }
.inc-legend .sw { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:3px; vertical-align:middle; }
.inc-fg { display:grid; grid-template-columns:170px 1fr; gap:8px 12px; align-items:center; align-content:start; }   /* align-content:start — never stretch rows to fill a tall flex parent (address boxes grew to the screen height, 2026-10-23) */
.inc-fg .span3, .inc-fg textarea.ats-remark, .inc-fg > * { grid-column:auto; }
.inc-fg textarea.ats-remark { width:100%; }
.inc-fg label { font-weight:600; color:#2b3a55; }
table.inc-list { border-collapse:collapse; width:100%; font-size:12px; }
table.inc-list th, table.inc-list td { border:1px solid #d5dbe4; padding:3px 6px; text-align:left; vertical-align:top; }
table.inc-list th { background:#eef1f5; }
table.inc-list tr.sel td { background:#dbe9ff; }
table.inc-list tbody tr:hover td { background:#f1f5fb; cursor:pointer; }
.addr-choice { margin:2px 0 10px; }
.addr-choice .ac-title { font-weight:600; font-size:12px; margin-bottom:2px; }
.addr-choice td.ac-addr { white-space:pre-line; min-width:220px; }
.addr-choice .inc-chip { white-space:nowrap; }
.fs-verified { border-left:3px solid #28a745 !important; }
.fs-review { border-left:3px solid #f0ad4e !important; background-color:#fffbe6 !important; }
.fs-missing { border-left:3px solid #d9534f !important; background-color:#fff5f5 !important; }
.fs-conflict { border-left:3px solid #d9534f !important; background-color:#fde2e4 !important; }
div.fs-verified, div.fs-review, div.fs-missing, div.fs-conflict { padding-left:4px; border-radius:3px; }

/* STANDARD inline busy overlay for an upload box / panel (same look as the tab loading overlay):
   [data-upload-box] is position:relative; .ats-inline-busy covers it with spinner + message + optional per-file list. */
[data-upload-box] { position: relative; }
.ats-inline-busy { position:absolute; inset:0; z-index:5; background:rgba(255,255,255,0.9); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-radius:6px; }
.ats-inline-busy .msg { font-size:13px; font-weight:600; color:#072C3D; text-align:center; }
.ats-inline-busy .sub { font-size:12px; color:#41506a; text-align:center; }
.ats-inline-busy .bar { width:60%; max-width:320px; height:6px; background:#e3e8ee; border-radius:3px; overflow:hidden; }
.ats-inline-busy .bar > div { height:100%; background:#4472c4; transition:width .2s; }
.ats-inline-busy ul.files { list-style:none; margin:0; padding:0; font-size:12px; color:#2b3a55; max-height:120px; overflow:auto; width:80%; }
.ats-inline-busy ul.files li { display:flex; gap:8px; align-items:center; padding:1px 0; }
.ats-inline-busy ul.files li .n { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ats-inline-busy ul.files li .st { color:#667; } .ats-inline-busy ul.files li .st.ok { color:#1d6b2f; } .ats-inline-busy ul.files li .st.bad { color:#842029; }

#tab-loading-overlay {
    display: none;
    position: absolute; inset: 0;
    background: rgba(255,255,255,0.88);
    z-index: 400;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #555;
    font-size: 13px;
    pointer-events: none;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #0C5472;
}

.btn-primary {
    color: #fff;
    background-color: #072C3D;
    border-color: #072C3D;
}
.btn-primary:hover {
    background-color: #0C3D53;
    border-color: #0C3D53;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ─── Maintenance layout STANDARD (2026-10-19): Maintenance Grid → Detail Panel → Action Bar ───
   Every settings / master-data page = .ats-shell (or .slm-shell) → .ats-list (grid, user-resizable width) + .ats-form-area
   (detail panel = a flex COLUMN that scrolls as a whole). Inside the panel the .slm-btns action bar (New / Edit / Save /
   Delete / Cancel …) is a horizontal, sticky toolbar at the TOP (CSS order:-1, so the markup may still list it last) and the
   .ats-form / .slm-form fields follow in a label|field grid (--mnt-label-w). Nothing in the panel may overlap the actions:
   labels, long checkbox captions, hints, notes and errors wrap inside the field column; the panel scrolls when it is too
   short; the list panel is resized by its grip (CSS resize) and never pushes the panel below 0 width. Per-page CSS may only
   set --mnt-list-w / --mnt-label-w and page-specific extras — never copy these rules into a scoped .razor.css. */
.ats-shell, .slm-shell { display: flex; position: absolute; inset: 0; overflow: hidden; }

.ats-list, .slm-list {
    width: var(--mnt-list-w, 300px);
    min-width: 180px;
    max-width: 75%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #ccc;
    overflow: hidden;
    flex-shrink: 0;
    resize: horizontal;              /* the grip at the bottom-right corner lets the user widen / narrow the grid */
}

/* List panel header bar */
.slm-list-header {
    padding: 6px 10px;
    font-weight: 600;
    font-size: 12px;
    background: #e8edf4;
    border-bottom: 1px solid #c8d4dc;
    flex-shrink: 0;
}
.slm-grid { flex: 1; overflow-y: auto; }

/* Scrollable table wrapper */
.ats-grid-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Compact data table */
.ats-grid {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.ats-grid th {
    background: #e8edf4;
    border: 1px solid #bbb;
    padding: 3px 8px;
    text-align: left;
    white-space: nowrap;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 1;
    overflow: hidden;
}

/* Frozen header for EVERY grid (MK 2026-10-31): the .ats-grid thead th selector (0,1,2) outranks any page-level
   ".ats-grid th { position:… }" rule. Page <style> blocks are GLOBAL and stay active while that tab is open in the
   background (Blazor tabs are display:none, not unloaded), so an un-scoped rule in one page used to un-stick the
   headers of every other open module. Pages must scope their grid overrides with their own shell class. */
.ats-grid thead th {
    position: sticky;
    top: 0;
    z-index: 5;
}

.ats-grid td {
    border: 1px solid #ddd;
    padding: 3px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 0;
}

.ats-grid tr.sel td { background: #cfe2ff; }

.ats-grid tr:not(.sel):not(.group-row):hover td {
    background: #f0f4ff;
    cursor: pointer;
}

.ats-grid tr.group-row td {
    background: #d5e0f0;
    font-size: 11px;
    font-weight: bold;
    color: #072C3D;
    padding: 3px 8px;
    border: 1px solid #bbb;
}

.ats-grid tr.row-inactive td { color: #999; }

/* Column resize handle */
.col-resize-handle {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 2;
}
.col-resize-handle:hover,
.col-resize-handle:active { background: rgba(68,114,196,0.35); }

/* Inline badges in list rows */
.slm-badge {
    font-size: 10px;
    background: #f5a623;
    color: #fff;
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 5px;
    vertical-align: middle;
}
.slm-badge-default { background: #5cb85c; }

/* Detail panel: a scrolling column — action bar first (sticky), then the fields */
.ats-form-area, .slm-form-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 0 18px;
    overflow: auto;
}

/* Action bar */
.ats-form-area > .slm-btns, .slm-form-area > .slm-btns {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: #f6f8fb;
    border-bottom: 1px solid #d9e0e8;
    flex-shrink: 0;
}

/* Fields column */
.ats-form, .slm-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 820px;
    min-width: 0;
    box-sizing: border-box;
    padding: 14px 20px 0;
}
.ats-form-area > :not(.slm-btns):not(.ats-form):not(.slm-form),
.slm-form-area > :not(.slm-btns):not(.ats-form):not(.slm-form) { padding-left: 20px; padding-right: 20px; min-width: 0; box-sizing: border-box; }

/* Form row: label | field */
.slm-fr {
    display: grid;
    grid-template-columns: var(--mnt-label-w, 112px) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.slm-fr > * { min-width: 0; max-width: 100%; }
.slm-fr label { width: auto; font-size: 12px; }
.slm-fr > label + * + * { grid-column: 2; }       /* a third child (result text, hint) drops under the field, never beside the actions */
.slm-fr:not(:has(> label)) { display: flex; flex-wrap: wrap; align-items: center; }   /* a row without a label (test / refresh buttons + result text) flows freely */
.slm-fr > .slm-btn { width: auto; max-width: none; }

/* Text input / select */
.slm-input {
    width: 100%;
    padding: 4px 6px;
    border: 1px solid #bbb;
    border-radius: 3px;
    font-size: 12px;
    min-width: 0;
    box-sizing: border-box;
}
.slm-input:disabled { background: #f5f5f5; color: #666; }

/* Short / address helpers */
.ats-short  { max-width: 180px; }
.ats-fr-addr { align-items: flex-start; }
.ats-addr { resize: vertical; min-height: 60px; font-family: inherit; }

/* Checkbox row: caption wraps inside the field column */
.slm-fr-check { margin-top: 2px; }
.slm-fr-check > label {
    grid-column: 2;
    width: auto;
    white-space: normal;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    line-height: 1.35;
    cursor: pointer;
    padding-left: 0;
}
.slm-fr-check > label > input[type=checkbox] { margin-top: 2px; flex-shrink: 0; }

/* Hints, notes and errors align with the field column and wrap */
.slm-err  { color: #c00; font-size: 12px; margin-left: calc(var(--mnt-label-w, 112px) + 8px); padding-left: 0; }
.slm-hint { font-size: 11px; color: #555; margin: -4px 0 2px calc(var(--mnt-label-w, 112px) + 8px); }
.slm-note { font-size: 11px; color: #777; margin-top: 6px; line-height: 1.4; max-width: 820px; }
.slm-sub  { font-size: 11.5px; font-weight: 600; color: #072C3D; margin-top: 4px; text-transform: uppercase; letter-spacing: .3px; }
.slm-kv   { display: flex; gap: 8px; font-size: 12px; flex-wrap: wrap; } .slm-kv span { width: 110px; color: #666; flex-shrink: 0; }
.slm-ok   { font-size: 12px; color: #1c7a3a; } .slm-bad { font-size: 12px; color: #a33; }

/* Tabs inside a detail panel (Account Books) */
.slm-tabs { display: flex; gap: 2px; border-bottom: 1px solid #c9d2de; margin-bottom: 6px; flex-wrap: wrap; }
.slm-tabs button { border: 1px solid #c9d2de; border-bottom: none; background: #eef1f5; color: #444; font-size: 12px; padding: 5px 12px; border-radius: 4px 4px 0 0; cursor: pointer; }
.slm-tabs button.active { background: #fff; color: #072C3D; font-weight: 600; position: relative; top: 1px; }

/* Button column (legacy hosts that still lay the actions beside a form, e.g. Staff Maintenance's own panel) */
.slm-btns { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* Standard button */
.slm-btn {
    padding: 5px 14px;
    font-size: 12px;
    border: 1px solid #999;
    border-radius: 3px;
    background: #f0f0f0;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
    white-space: nowrap;
}
.slm-btn:hover:not(:disabled) { background: #dce6fa; }
.slm-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Save button — green tint */
.slm-btn-save { background: #d4edda; border-color: #5cb85c; }
.slm-btn-save:hover:not(:disabled) { background: #c3e6cb; }

/* Empty date inputs: hide the "dd/mm/yyyy" placeholder so a NULL date looks blank
   (the calendar icon stays). .date-blank is toggled by JS when the field is empty;
   the hint reappears on focus so the user can still type. */
input[type="date"].date-blank:not(:focus)::-webkit-datetime-edit { color: transparent; }
/* ── Shared mini-modal (Tax Info / ATS Info / Change of Name dialogs) ──
   Global because several pages use these dialogs standalone. */
.mini-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1100; display:flex; justify-content:center; align-items:center; }
.mini-modal { background:#fff; border:1px solid #999; box-shadow:0 8px 32px rgba(0,0,0,0.4); border-radius:4px; display:flex; flex-direction:column; overflow:hidden; }
.mini-hdr { background:#072C3D; color:#fff; padding:7px 12px; font-size:12px; font-weight:bold; display:flex; justify-content:space-between; align-items:center; flex-shrink:0; }
.mini-hdr button { background:none; border:none; color:#fff; font-size:16px; cursor:pointer; line-height:1; }
.mini-body { padding:16px 20px 10px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.mini-footer { padding:8px 20px 14px; display:flex; gap:8px; justify-content:flex-end; border-top:1px solid #eee; }
.mini-fr { display:flex; align-items:center; gap:8px; }
.mini-fr label { width:160px; font-size:12px; text-align:right; flex-shrink:0; font-weight:bold; }
.mini-input { flex:1; padding:3px 6px; border:1px solid #bbb; border-radius:3px; font-size:12px; min-width:0; box-sizing:border-box; }
.mini-input:read-only { background:#f5f5f5; color:#555; }
.mini-err { color:#c0392b; font-size:12px; margin-bottom:4px; }


/* ── Standard grid column header filter (GridColumnFilter component) ── */
/* Sticky column headers each form a stacking context, so a later header would paint
   over a filter panel opened from an earlier one — lift the open header above them. */
th:has(.gcf-panel) { z-index: 3000 !important; overflow: visible !important; }
.gcf-icon { margin-left:4px; cursor:pointer; color:#9db2c8; font-size:11px; }
.gcf-icon:hover { color:#4472c4; }
.gcf-icon.gcf-on { color:#EF444E; }
.gcf-overlay { position:fixed; inset:0; z-index:3100; }
.gcf-panel { position:fixed; z-index:3110; width:280px; background:#fff; border:1px solid #9db2c8; border-radius:5px; box-shadow:0 8px 22px rgba(0,0,0,0.28); font-size:12px; font-weight:normal; text-align:left; white-space:normal; }
.gcf-head { display:flex; align-items:center; justify-content:space-between; padding:6px 10px; background:#072C3D; color:#fff; font-weight:700; border-radius:4px 4px 0 0; }
.gcf-clear { border:1px solid #fff; background:#fff; color:#072C3D; border-radius:3px; font-size:11px; padding:1px 8px; cursor:pointer; font-weight:600; }
.gcf-sec { display:flex; gap:6px; padding:8px 10px; border-bottom:1px solid #e2e6ec; flex-wrap:wrap; }
.gcf-sec select, .gcf-sec input { border:1px solid #c2c8d0; border-radius:4px; padding:3px 6px; font-size:12px; flex:1; min-width:90px; }
.gcf-search { margin:8px 10px 4px; width:calc(100% - 20px); border:1px solid #c2c8d0; border-radius:4px; padding:3px 6px; font-size:12px; box-sizing:border-box; }
.gcf-list { max-height:230px; overflow:auto; padding:2px 0 6px; }
.gcf-list label { display:flex; gap:6px; align-items:center; justify-content:flex-start; padding:2px 12px; cursor:pointer; text-align:left; font-weight:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gcf-list label:hover { background:#eef3fb; }
.gcf-list input[type=checkbox] { flex-shrink:0; width:13px; height:13px; margin:0; }
.gcf-all { border-bottom:1px solid #eef1f5; padding-bottom:4px; margin-bottom:2px; }

/* STANDARD DateField (Components/Shared/DateField.razor) — invalid entry state */
.ats-date-bad { border-color: #d9534f !important; background: #fff5f5 !important; }

/* STANDARD GridControl inset (every module grid, current and future): a small,
   consistent breathing margin between the grid and its container edges — the
   clean framed look of the legacy desktop grids. Toolbars keep their own padding
   (12px) so headers, group panels and the grid body align on the same line. */
.ats-grid-inset { margin: 0 12px 10px; }

/* ── STANDARD DateField calendar picker (typing stays primary; button is
      tabindex -1 so the field remains ONE tab stop) ── */
.ats-datewrap { position: relative; display: flex; align-items: center; width: 100%; min-width: 0; flex: 1 1 auto; }
.ats-datewrap > .ats-datefield { flex: 1 1 auto; min-width: 0; }
/* Baseline look for the DateField input in hosts with no input styling of their own
   (e.g. dialog FOOTERS) — :where() keeps specificity at zero, so every dialog-body
   input rule still wins and nothing already styled changes. */
/* (0,0,1) — later than Bootstrap's `input` reboot so font-size sticks, still weaker
   than every host rule like `.jc-body input` (0,1,1). */
:where(.ats-datewrap) input { border: 1px solid #c2c8d0; border-radius: 5px; padding: 5px 8px; font-size: 12.5px; width: 100%; min-width: 0; box-sizing: border-box; background: #fff; color: #222; font-family: inherit; }
:where(.ats-datewrap) input:focus { outline: none; border-color: #4472c4; box-shadow: 0 0 0 2px rgba(68,114,196,0.15); }
.ats-date-btn { flex: 0 0 auto; margin-left: 4px; border: 1px solid #c2c8d0; background: #eef1f5; border-radius: 4px; padding: 3px 7px; cursor: pointer; color: #4472c4; font-size: 12px; line-height: 1.3; }
.ats-date-btn:hover { background: #e3e9f2; }
.ats-cal-overlay { position: fixed; inset: 0; z-index: 3300; }
/* Fixed position (coordinates set by positionDateCal) so a dialog's scroll area can
   never clip the popup — it flips above the field when there is no room below. */
.ats-cal { position: fixed; visibility: hidden; z-index: 3310; background: #fff; border: 1px solid #9db2c8; border-radius: 6px; box-shadow: 0 10px 26px rgba(0,0,0,0.3); padding: 8px; width: 240px; outline: none; }
.ats-cal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12.5px; color: #072C3D; margin-bottom: 6px; }
/* Calendar buttons are FULLY self-styled with .ats-cal-scoped selectors: the popup's
   DOM can sit inside dialog footers/toolbars whose generic `button` rules (grey box,
   border, big padding) would otherwise win and blow the 240px grid apart. */
.ats-cal .ats-cal-head button { border: none; background: #eef1f5; border-radius: 3px; width: 26px; height: 22px; min-width: 0; padding: 0; margin: 0; cursor: pointer; font-size: 14px; line-height: 1; font-weight: 400; color: #223; box-shadow: none; }
.ats-cal .ats-cal-head button:hover { background: #d5e0f0; }
.ats-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ats-cal-dow { font-size: 10px; color: #889; text-align: center; font-weight: 600; padding-bottom: 2px; }
.ats-cal .ats-cal-day { border: none; background: none; border-radius: 3px; font-size: 11.5px; padding: 3px 0; margin: 0; min-width: 0; width: auto; cursor: pointer; text-align: center; color: #223; font-weight: 400; box-shadow: none; }
.ats-cal .ats-cal-day:hover { background: #e3edfb; }
.ats-cal .ats-cal-day.om { color: #bbb; }
.ats-cal .ats-cal-day.today { outline: 1px solid #4472c4; }
.ats-cal .ats-cal-day.selday { background: #4472c4; color: #fff; font-weight: 700; }


/* ── STANDARD GridControl chrome (column chooser toggle/panel + header drag) —
      shared by every module grid ── */
.cc-toggle { padding: 3px 12px; border: 1px solid #c2c8d0; border-radius: 4px; background: #eef1f5; font-size: 12px; cursor: pointer; font-weight: 600; color: #1a2a4a; }
.cc-toggle:hover, .cc-toggle-active { background: #dde6f2; }
.col-chooser-panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 600; background: #fff; border: 1px solid #9db2c8; border-radius: 5px; box-shadow: 0 8px 22px rgba(0,0,0,0.25); font-size: 12px; min-width: 220px; }
.cc-header { padding: 6px 10px; font-weight: 700; background: #eef1f6; color: #072C3D; border-bottom: 1px solid #d5dce4; }
.cc-body { max-height: 300px; overflow: auto; padding: 4px 0; }
.cc-row { display: flex; gap: 6px; padding: 3px 10px; cursor: pointer; align-items: center; }
.cc-row:hover { background: #eef3fb; }
.cc-footer { padding: 6px 10px; border-top: 1px solid #d5dce4; }
.cc-footer button { border: 1px solid #c2c8d0; border-radius: 3px; background: #eef1f5; font-size: 11px; padding: 2px 10px; cursor: pointer; }
th.draggable { cursor: pointer; }
th.drag-over { background: #3d6a86 !important; }

/* Read-only / disabled DateField: the calendar button is inert too */
.ats-date-btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.modal-readonly .ats-date-btn { opacity: 0.45; cursor: default; pointer-events: none; }

/* Dialog tab bar (Job Details | Attachments (N)) — shared across job dialogs */
.ats-dlg-tabs { display:flex; gap:3px; border-bottom:2px solid #4472c4; margin:0 0 12px; }
.ats-dlg-tabs button { border:1px solid #c8d0da; border-bottom:none; background:#eef1f5; color:#334; border-radius:6px 6px 0 0; padding:6px 18px; font-size:12.5px; font-weight:600; cursor:pointer; }
.ats-dlg-tabs button:hover:not(.active) { background:#e3e9f2; }
.ats-dlg-tabs button.active { background:#4472c4; border-color:#4472c4; color:#fff; }


/* ── ATS dialogs (Services/AtsDialogService + Layout/AtsDialogHost; also the JS fallback atsMessage) ──
   The one look for every message / confirmation. z-index 3000+ sits above page modals (≤1100)
   and the PDF viewer (2500); calendars/pickers (3300) still float above when needed. */
.atsd-backdrop { position:fixed; inset:0; background:rgba(0,0,0,0.35); display:flex; align-items:center; justify-content:center; outline:none; }
.atsd-modal { width:460px; max-width:92vw; background:#fff; border:1px solid #072C3D; border-radius:6px; box-shadow:0 18px 50px rgba(0,0,0,0.5); overflow:hidden; }
.atsd-hdr { background:#072C3D; color:#fff; padding:10px 14px; font-weight:700; font-size:14px; display:flex; align-items:center; gap:9px; }
.atsd-hdr i { font-size:16px; }
.atsd-success .atsd-hdr i { color:#8fe0a0; }
.atsd-warning .atsd-hdr i { color:#ffd166; }
.atsd-error .atsd-hdr { background:#7a1f1f; }
.atsd-error .atsd-hdr i { color:#ffb3b3; }
.atsd-question .atsd-hdr i, .atsd-info .atsd-hdr i { color:#9fd3ff; }
.atsd-body { padding:16px; font-size:12.5px; color:#222; white-space:pre-line; max-height:60vh; overflow:auto; line-height:1.45; }
.atsd-foot { padding:10px 14px; border-top:1px solid #e2e6ec; display:flex; gap:8px; justify-content:flex-end; }
.atsd-btn { padding:6px 18px; border-radius:4px; font-size:12.5px; font-weight:600; cursor:pointer; background:#eef1f5; border:1px solid #c2c8d0; color:#1a2a4a; }
.atsd-btn:hover { background:#e2e8f0; }
.atsd-btn:focus-visible { outline:2px solid #072C3D; outline-offset:1px; }
.atsd-primary { background:#d4edda; border-color:#5cb85c; color:#1d6b2f; }
.atsd-primary:hover { background:#c3e6cb; }
.atsd-danger { background:#f8d7da; border-color:#d9534f; color:#8b1a1a; }
.atsd-danger:hover { background:#f1c0c4; }


/* ── Remark fields (STANDARD — every Job Control / Job Progress dialog, editable and read-only) ──
   3–4 lines by default, vertical scrollbar when the text is longer, user-resizable vertically.
   Read-only = the readonly attribute (not disabled): still scrollable, selectable and copyable;
   the page-level ".jc-readonly textarea { pointer-events:none }" must NOT apply here. */
textarea.ats-remark { grid-column:2/5; height:78px; min-height:52px; max-height:60vh; resize:vertical; overflow-y:auto; line-height:1.35; padding:5px 8px; font:inherit; box-sizing:border-box; }
.jc-readonly textarea.ats-remark, textarea.ats-remark[readonly] { pointer-events:auto; background:#f5f5f5; color:#555; cursor:text; }

/* ── Aud › Letter Centre pages (Bank Info / Bank of Client / Bank Confirmation / Reminders) ──
   Shared chrome, same metrics as the New Engagement / Resignation pages (eg-* / rs-*). */
.lc-shell { position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
.lc-toolbar { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid #d5dbe4; background:#f6f8fb; font-size:12.5px; flex-shrink:0; }
.lc-toolbar input { border:1px solid #c2c8d0; border-radius:4px; padding:4px 8px; font-size:12.5px; }
.lc-clear { padding:3px 12px; border:1px solid #d9534f; border-radius:4px; background:#f8d7da; color:#842029; font-size:12px; font-weight:600; cursor:pointer; }
.lc-hint { color:#667; font-size:11px; }
.lc-toolbar .lc-hint { margin-left:auto; }
.lc-grid-scroll { flex:1; overflow:auto; outline:none; }
.lc-shell > *:not(.lc-grid-scroll) { flex-shrink:0; }
.lc-backdrop { position:fixed; inset:0; background:rgba(7,44,61,0.45); z-index:1500; display:flex; align-items:flex-start; justify-content:center; padding-top:6vh; }
.lc-modal { width:940px; max-width:96vw; max-height:88vh; display:flex; flex-direction:column; background:#fff; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,0.45); overflow:hidden; }
.lc-modal-sm { width:560px; }
.lc-modal-md { width:680px; }
.lc-modal-xl { width:1240px; }
.lc-hdr { background:#072C3D; color:#fff; padding:12px 16px; display:flex; align-items:center; gap:10px; }
.lc-hdr .t { font-weight:700; font-size:14px; margin-right:auto; }
.lc-busy { display:inline-flex; align-items:center; gap:8px; font-size:12px; opacity:0.9; }
.lc-busy::before { content:""; width:14px; height:14px; border:2px solid #dde4f0; border-top-color:#4472c4; border-radius:50%; animation:ats-spin 0.75s linear infinite; }
.lc-save { background:#d4edda; border:1px solid #5cb85c; color:#1d6b2f; font-weight:700; padding:6px 18px; border-radius:5px; cursor:pointer; font-size:13px; }
.lc-del { background:#f8d7da; border:1px solid #d9534f; color:#842029; font-weight:700; padding:6px 14px; border-radius:5px; cursor:pointer; font-size:13px; }
.lc-x { background:#EF444E; border:none; color:#fff; font-weight:700; padding:6px 12px; border-radius:5px; cursor:pointer; font-size:13px; }
.lc-save:disabled, .lc-del:disabled, .lc-x:disabled { opacity:0.6; cursor:default; }
.lc-body { padding:14px 18px 16px; overflow:auto; font-size:12.5px; }
.lc-err { background:#f8d7da; border:1px solid #d9534f; color:#842029; border-radius:5px; padding:7px 10px; margin-bottom:10px; font-size:12.5px; }
.lc-fg { display:grid; grid-template-columns:170px 1fr 150px 1fr; gap:9px 12px; align-items:center; }
.lc-fg2 { display:grid; grid-template-columns:190px 1fr; gap:9px 12px; align-items:center; }
.lc-fg label, .lc-fg2 label { font-weight:600; color:#1a2a4a; font-size:12px; }
.lc-body input[type=radio], .lc-body input[type=checkbox] { width:14px; height:14px; margin:0; }
.lc-body input:not([type=checkbox]):not([type=radio]) { border:1px solid #c2c8d0; border-radius:5px; padding:5px 8px; font-size:12.5px; box-sizing:border-box; width:100%; font-family:inherit; }
.lc-body input:focus { outline:none; border-color:#4472c4; box-shadow:0 0 0 2px rgba(68,114,196,0.15); }
.lc-body input:disabled { background:#f5f5f5; color:#555; }
.lc-fg textarea.ats-remark { grid-column:2/5; width:100%; height:90px; }
.lc-fg2 textarea.ats-remark { grid-column:2; width:100%; height:112px; }
.lc-selinfo { background:#eef1f6; border-left:3px solid #072C3D; padding:6px 10px; margin-bottom:12px; font-size:12.5px; }
.lc-link { border:none; background:none; cursor:pointer; text-decoration:underline; color:#667; font-size:11px; }
.lc-foot { display:flex; justify-content:flex-end; gap:8px; padding:10px 16px; border-top:1px solid #e3e8ee; background:#f7f9fb; align-items:center; }
.lc-foot button { border:1px solid #c2c8d0; border-radius:5px; background:#eef1f5; padding:6px 16px; font-size:12.5px; font-weight:600; cursor:pointer; color:#1a2a4a; }
.lc-foot button.primary { background:#d4edda; border-color:#5cb85c; color:#1d6b2f; }
.lc-foot button:disabled { opacity:0.6; cursor:default; }
.lc-sub { height:46vh; overflow:auto; border:1px solid #d5dce4; border-radius:5px; margin-top:8px; }
.lc-sub table.ats-grid td, .lc-sub table.ats-grid th { white-space:nowrap; }
.lc-sub .pre { white-space:pre-line; }
.lc-inline-radio { display:flex; gap:18px; align-items:center; }
.lc-inline-radio label { display:flex; gap:6px; align-items:center; font-weight:normal; cursor:pointer; }
.ats-grid tr.lc-inactive td { color:#999; font-style:italic; }

/* ── Dialog positioning standard (MK 2026-10-10): EVERY modal opens centred in the visible viewport,
   independent of scroll position and screen size; oversized dialogs scroll inside (their bodies are
   overflow:auto), header and buttons stay reachable; nested confirmations centre above their parent.
   One global rule so every current and future *-backdrop inherits it — never per-module overrides. */
[class$="-backdrop"]:not(.pdfw-menu-backdrop):not(.jap-viewer-backdrop) { align-items: center !important; padding-top: 0 !important; }
[class$="-backdrop"] > [class*="-modal"] { max-height: 92vh; }
.lhd-modal, .atsd-modal { overflow: auto; }

/* ── Small toolbar button (STANDARD, global since 2026-10-26) ─────────────────────────────────
   Used by Refresh / Preview / Print / Export Excel on panels that live in several hosts (Statutory
   Registers workspace, Client Fees, Client Information dialog…). It used to live only in
   ClientDetailDialog's <style>, so any page shown without that dialog rendered bare browser buttons.
   Shared component styles belong HERE, never in one host's style block. */
.btnsa { font-size:11px; padding:4px 12px; cursor:pointer; margin-right:6px; background:#eef1f5; color:#1a2a4a; border:1px solid #c2c8d0; border-radius:4px; font-weight:600; }
.btnsa:hover { background:#dde6f2; }
.btnsa:disabled { opacity:0.6; cursor:default; }
/* Dark primary variant of the toolbar button (Approve fees / Generate / New item / Save) — used by the
   Client Fees panel, Billing dialog, Billing Items and the fees print dialog, so it is global too. */
.btnsa.fee-primary, .fee-primary { background:#072C3D !important; color:#fff !important; border-color:#072C3D !important; }

/* ─── Maintenance split panel (STANDARD, MK 2026-10-27) ───
   <MaintSplitter Key="module-key" /> sits between the list (.ats-list / .slm-list) and the detail panel: a draggable divider
   (initMaintSplitter in colresize.js) that stores the user's list width per module in localStorage (ats.pref.split.<key>),
   restores it on reopen, clamps it between the list's min-width and 75 % of the shell, and resets on double-click.
   With the splitter the list's corner grip is switched off. The list grid scrolls both ways; a maintenance table declares
   its own min-width (sum of its column widths) so columns are never squashed — the panel scrolls horizontally instead. */
.mnt-splitter { flex: 0 0 7px; cursor: col-resize; background: #e3e8ee; border-left: 1px solid #c8d4dc; border-right: 1px solid #c8d4dc; position: relative; z-index: 2; }
.mnt-splitter:hover, .mnt-splitter.dragging { background: #b9c7d8; }
.mnt-splitter::after { content: ""; position: absolute; top: 50%; left: 1px; width: 2px; height: 28px; margin-top: -14px; border-left: 1px dotted #5c6b80; border-right: 1px dotted #5c6b80; }
.ats-shell.has-splitter > .ats-list, .slm-shell.has-splitter > .slm-list { resize: none; max-width: none; border-right: 0; }
body.mnt-dragging { cursor: col-resize; user-select: none; }
body.mnt-dragging iframe { pointer-events: none; }
.slm-grid { overflow: auto; }
.slm-grid .ats-grid { table-layout: fixed; width: 100%; }
.slm-grid .ats-grid td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slm-list > .lc-toolbar { flex-wrap: wrap; gap: 6px; padding: 6px 10px; }
.slm-list > .lc-toolbar input { width: 140px; }

/* ── Background processing (STANDARD, MK 2026-10-31 / 2026-11-01): progress bars and counts of a job in its own tab (AfsBatchReview) ── */
.bgj-card { border:1px solid #d5dbe4; border-radius:6px; padding:10px 12px; margin-bottom:8px; background:#fafbfd; }
.bgj-card.run { border-color:#4472c4; background:#f3f7fd; }
.bgj-card.review { border-color:#5cb85c; background:#f4fbf5; }
.bgj-card.bad { border-color:#d9534f; background:#fdf5f5; }
.bgj-title { display:flex; align-items:center; gap:8px; font-size:13px; }
.bgj-state { font-size:11px; padding:1px 8px; border-radius:10px; background:#eef1f5; color:#2b3a55; }
.bgj-stage { color:#41506a; font-size:12px; margin:3px 0; }
.bgj-bar { height:8px; background:#e3e8ee; border-radius:4px; overflow:hidden; margin:4px 0; }
.bgj-bar > div { height:100%; background:#4472c4; transition:width .3s; }
.bgj-nums { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:#2b3a55; }
.bgj-counts { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.bgj-actions { display:flex; gap:8px; margin-top:8px; }
/* Upload card (shared: Superior Incorporation Smart Import + Batch Upload AFS — MK 2026-11-01 "same as Superior incorporation") */
.sm-box { border:1px solid #d5dbe4; border-radius:6px; padding:10px 12px; background:#fafbfd; }
.sm-box h4 { margin:0 0 6px 0; font-size:12.5px; color:#072C3D; }
.sm-files { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; min-height:24px; }
.sm-file { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border:1px solid #c2c8d0; border-radius:12px; background:#fff; font-size:12px; }
.sm-file button { border:0; background:transparent; cursor:pointer; color:#842029; font-weight:700; padding:0 2px; }
label.sm-choose { display:inline-block; padding:3px 12px; border:1px solid #c2c8d0; border-radius:4px; background:#eef1f5; font-size:12px; cursor:pointer; font-weight:600; color:#1a2a4a; }
label.sm-choose.off { opacity:.5; pointer-events:none; }
.sm-drop { border:2px dashed #c2c8d0; border-radius:6px; padding:10px; text-align:center; color:#8a97a6; font-size:12px; margin-top:6px; }
/* File-picker acknowledgement (STANDARD, MK 2026-11-01): label[data-pick-msg] pressed state while the native picker is opening / open */
label.sm-choose.is-picking { background:#dde6f2; border-color:#4472c4; color:#1a2a4a; box-shadow:inset 0 1px 3px rgba(0,0,0,0.25); cursor:progress; }
/* Batch Upload AFS — new-batch panel inside the AFS Batch Upload tab (Superior-style upload card) */
.afu-panel { flex:1; padding:12px; min-height:0; overflow:auto; }
.afu-card { position:relative; outline:none; }
.afu-card.ajr-drag { border-color:#4472c4; background:#eef4fc; }
.afu-card.ajr-drag .sm-drop { border-color:#4472c4; color:#2b4f8f; }
.afu-card .sm-drop { padding:18px 10px; }
.afu-card .sm-file.bad { border-color:#d9534f; color:#842029; }
.afu-card .sm-file .pg { color:#8a97a6; }
.afu-go { padding:5px 14px; border:1px solid #5cb85c; border-radius:4px; background:#d4edda; color:#1d6b2f; font-weight:700; font-size:12.5px; cursor:pointer; }
.afu-go:disabled { opacity:.5; cursor:default; }

/* ── Multi-user record notices (STANDARD, MK 2026-10-31) — shared by every edit window through
   Shared/RecordWatchBar (and ClientDetailDialog): amber = saved by another user while you have
   unsaved edits, red = deleted by another user, blue = information (refreshed / merged). ── */
.mu-bar { display:flex; align-items:center; gap:10px; padding:6px 14px; font-size:12px; border-bottom:1px solid; flex-shrink:0; }
.mu-bar button { font-size:11.5px; padding:2px 10px; border-radius:3px; cursor:pointer; font-weight:600; }
.mu-stale { background:#fff6e0; border-color:#e8cf8a; color:#6b4a00; }
.mu-stale button { background:#8a5a00; color:#fff; border:1px solid #6b4a00; }
.mu-gone { background:#fdeaea; border-color:#e5b3b3; color:#8a1f1f; }
.mu-info { background:#eaf3fb; border-color:#bcd5ea; color:#1d4f7a; }
.mu-info .mu-x { margin-left:auto; background:none; border:none; color:#1d4f7a; font-size:13px; padding:0 4px; }

/* Grid auto-refresh (STANDARD, MK 2026-11-01): subtle, non-blocking indicator shown only when a background grid
   refresh takes noticeable time (colresize.js atsGridRefreshing). Never a full-screen overlay. */
#ats-grid-refreshing {
    position: fixed; right: 18px; bottom: 34px; z-index: 3000;
    background: #072C3D; color: #fff; font-size: 11px; padding: 3px 11px; border-radius: 11px;
    opacity: 0; transition: opacity .15s; pointer-events: none;
    font-family: 'Segoe UI', Arial, sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
#ats-grid-refreshing.show { opacity: .88; }

/* ── Save guard (STANDARD, MK 2026-11-01) ── every dialog that writes to the database: the dialog element
   carries data-save-guard + data-saving, its first child is <SaveOverlay />, write buttons carry data-save.
   colresize.js adds .ats-locked (and inert) from the Save click until the backend answers — see
   Services/FormLock.cs. The overlay covers only that dialog. */
[data-save-guard] { position: relative; }
.ats-save-overlay { display: none; }
[data-save-guard].ats-locked > .ats-save-overlay {
    display: flex; position: absolute; inset: 0; z-index: 50; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.62); cursor: progress; border-radius: inherit;
}
.ats-save-box {
    display: flex; align-items: center; gap: 12px; max-width: 80%;
    background: #fff; border: 1px solid #c9d3de; border-left: 4px solid #4472c4; border-radius: 8px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.18); padding: 12px 18px; color: #1a2a4a;
}
.ats-save-box .ats-spinner { width: 22px; height: 22px; flex: 0 0 auto; }
.ats-save-msg { font-weight: 700; font-size: 13.5px; }
.ats-save-detail { font-size: 11.5px; color: #556; margin-top: 2px; }

/* ── Tax Fee last change (Shared/TaxFeeLastChange.razor, MK 2026-11-02) ─────────────────────────────── */
.taxfee-last { font-size:11px; color:#666; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; align-self:center; }

/* MoneyField STANDARD (Components/Shared/MoneyField.razor): amounts are right-aligned everywhere (MK 2026-11-02 — the component
   promised it but no rule existed, so Billing / invoice / e-Leave amount boxes were left-aligned). A host's inline Style still wins. */
.ats-moneyfield { text-align: right; font-variant-numeric: tabular-nums; }